/* Hero header. Sticks to the top of the viewport on desktop so the
   name + status badge travel as one unit. Translucent + backdrop-blur
   so the dot field behind it still reads, and scrolled content fades
   through softly rather than being hard-clipped.

   On scroll past a small threshold, JS toggles .hero--compact and the
   bar slims down: smaller name, hidden tagline, tighter status badge. */

/* When the hero is sticky, anchor jumps (#about, #more-posts) would land
   behind it. scroll-padding-top reserves the compact hero height in
   scroll targets so sections land just under the slim bar. */
html { scroll-padding-top: 70px; }
@media (max-width: 768px) { html { scroll-padding-top: 60px; } }

/* The sticky hero shrinks on scroll, which shortens the document by the
   shrinkage delta. Browsers respond by auto-adjusting scrollY (scroll
   anchoring) to keep visible content stable — which pushes scroll back
   past the toggle threshold and ping-pongs the compact state. Excluding
   only the hero from scroll anchoring stops the ping-pong while letting
   the rest of the document anchor normally (so lazy-loading images and
   late-mounted sections don't visibly jerk the page).
   Pairs with the hysteresis in js/hero-shrink.js. */
.hero { overflow-anchor: none; }

.hero {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 2.5rem 0 2.2rem;
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Hairline + faint downward shadow give the sticky bar a "floating"
     edge against content scrolling beneath it. Both are tuned to the
     ghost-border / dark-elevation aesthetic used by sidebar panels. */
  /* Just a hint — tight, low-opacity red wash at the boundary plus a
     small dark shadow for depth. No defined edge, no glowing slab. */
  box-shadow:
    0 6px 18px rgba(139, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.3);
  /* Matches the GSAP Flip timing in js/hero-shrink.js (expo.inOut, 0.85s)
     so the hero's outer padding collapses in sync with the inner morph.
     .hero itself stays out of the Flip target list — transforms on a
     sticky element can subtly break sticky on some browsers. */
  transition: padding 850ms cubic-bezier(0.87, 0, 0.13, 1);
}

.hero__container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.hero__main { flex: 1; min-width: 0; }

.hero__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--color-text);
  /* Name + rock are NOT in the Flip target list (Flip-transforming them
     read as "weird movement"). Instead we transition font-size / width
     via CSS over the same 850ms expo.inOut curve as the Flip morph, so
     the name shrinks smoothly in place. */
  transition: font-size 850ms cubic-bezier(0.87, 0, 0.13, 1);
}
.hero__name-animated .encrypted-char { font-family: var(--font-mono); font-size: 0.55em; color: var(--color-text-muted); transition: all 0.12s ease; display: inline; letter-spacing: 0; }
.hero__name-animated .encrypted-char.revealed { font-family: var(--font-display); font-size: 1em; color: var(--color-text); letter-spacing: 0.01em; }

.hero__sub {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-left: 0.15rem;
}
.hero__divider { flex-shrink: 0; display: flex; align-items: center; }
.hero__divider svg { width: 32px; height: 10px; overflow: visible; }
.hero__divider svg path { stroke: var(--color-red); stroke-width: 1.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--color-red-glow)); }
.hero__tagline { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: lowercase; color: var(--color-text-label); }
.hero__rock {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0.05rem;
  margin-bottom: -0.35rem;
  opacity: 0.85;
  /* Keep hover transform/opacity tween; size transition tracks the
     name's 850ms expo.inOut so they shrink in lockstep. */
  transition:
    transform var(--transition-base),
    opacity var(--transition-base),
    width 850ms cubic-bezier(0.87, 0, 0.13, 1),
    height 850ms cubic-bezier(0.87, 0, 0.13, 1),
    margin-bottom 850ms cubic-bezier(0.87, 0, 0.13, 1);
}
.hero__rock:hover { transform: rotate(10deg) scale(1.2); opacity: 1; }

/* ---------- Compact state (scrolled) ----------
   Hero slims down: tighter padding, smaller name, tagline collapses,
   rock shrinks. The status badge has its own compact rules in
   css/status-badge.css. */

.hero--compact { padding: 0.7rem 0 1rem; }

/* Name + rock stay anchored (position-wise) but shrink modestly via CSS
   font-size / width transitions. Squiggly + tagline slot in *beside*
   the name via a flex row instead of stacking below it, and Flip
   animates that slot transition (see js/hero-shrink.js). */
.hero--compact .hero__main {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.hero--compact .hero__name { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.hero--compact .hero__rock {
  width: 18px;
  height: 18px;
  margin-bottom: -0.2rem;
}
.hero--compact .hero__sub {
  margin-top: 0;
  gap: 0.55rem;
}
.hero--compact .hero__divider svg { width: 24px; height: 8px; }
.hero--compact .hero__tagline { font-size: 0.6rem; }

/* ---------- Mobile ----------
   Mobile is always-compact (js/hero-shrink.js adds .hero--compact on
   mobile and skips the scroll listener). The hero is a block-layout
   sticky bar: name on top, squiggly + tagline beneath. The status badge
   floats absolutely positioned in the top-right corner as a collapsed
   "JENI" chip; tapping it toggles .is-expanded to reveal the full
   stat panel (see css/status-badge.css mobile rules + the
   bindMobileToggle handler in js/status-badge.js). */
@media (max-width: 768px) {
  .hero {
    padding: 1.7rem 1.5rem 1.5rem;
    /* Keep position:sticky + background from the base rule. The flex
       container layout from the previous iteration is dropped — name
       and tagline now stack vertically (block flow), and the badge is
       absolutely positioned over the top-right. */
  }

  .hero__container {
    max-width: none;
    margin: 0;
    padding: 0;
    /* Padding-right reserves room for the absolutely-positioned badge
       so the name can't run under it on narrow screens. */
    padding-right: 3.5rem;
  }

  /* Override the desktop-compact flex layout for hero__main — on mobile
     name and sub stack vertically. */
  .hero--compact .hero__main {
    display: block;
  }
  .hero--compact .hero__name { font-size: 1.4rem; }
  .hero--compact .hero__sub {
    margin-top: 0.45rem;
    gap: 0.5rem;
  }
  .hero--compact .hero__divider svg { width: 22px; height: 8px; }
  .hero--compact .hero__tagline { font-size: 0.58rem; }
}