/* ================================================================
   sections/hero.css
   ─────────────────────────────────────────────────────────────────
   Full-viewport hero section with:
     - Simulated Van Gogh "Starry Night" CSS background
     - Grain texture overlay
     - Atmospheric glow orbs
     - Editorial ruled column lines
     - Top meta bar
     - Giant shimmer name (h1)
     - Floating frosted-glass center panel
     - Decorative geometric shapes (rings, dots, cross)
     - Lower statistics + collection card strip
     - Animated scroll cue
   ================================================================ */


/* ── Hero wrapper ────────────────────────────────────────────────
   Full viewport height, flex column so the lower strip is pushed
   to the bottom with flex children.

   STARRY NIGHT BACKGROUND
   ───────────────────────
   Built entirely with CSS background-image layers (no images).
   Reading order (bottom to top, as CSS renders them):

   Layer 1  : deep navy base gradient (linear-gradient 185deg)
   Layer 2–5: large atmospheric haze ellipses (radial-gradient ellipse)
               → simulate the swirling cloudy sky from Van Gogh
   Layer 6–22: individual star points (1–3px radial-gradient dots)
               → warm whites, gold, and cool blue-white hues
   Layer 23–28: extra scattered background stars
   Layer 29 : subtle overall blue tint on top (linear-gradient overlay)

   background-attachment: fixed creates a parallax effect when
   the user scrolls past the hero section.
   ─────────────────────────────────────────────────────────────── */
.hero {
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  position:    relative;
  overflow:    hidden;

  /* ── Starry Night sky — CSS only ── */
  background-color: #0a1628;
  background-image:
    /* TOP TINT — overall cool blue wash */
    linear-gradient(rgba(46, 74, 122, 0.50), rgba(46, 74, 122, 0.25)),

    /* ATMOSPHERIC HAZE — large soft ellipses simulating Van Gogh swirls */
    radial-gradient(ellipse 120% 60% at 70% 20%, rgba(74, 111, 165, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse  80% 40% at 20% 70%, rgba(45,  70, 130, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse  60% 30% at 50% 40%, rgba(30,  50, 110, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse 100% 50% at 85% 60%, rgba(55,  80, 150, 0.30) 0%, transparent 50%),

    /* STARS — each radial-gradient is one star point
       Format: radial-gradient(SIZE at X% Y%, COLOR 0%, transparent 0%)
       Size  : 1px (tiny) → 3px (bright star)
       Color : warm white (232,228,201), cool blue (176,196,222),
               gold (232,197,71), pale yellow (255,255,240/200)        */
    radial-gradient(1.5px 1.5px at  8% 15%, rgba(232, 228, 201, 0.90) 0%, transparent 0%),
    radial-gradient(2px   2px   at 12% 42%, rgba(176, 196, 222, 0.85) 0%, transparent 0%),
    radial-gradient(1px   1px   at 18%  8%, rgba(232, 197,  71, 0.70) 0%, transparent 0%),
    radial-gradient(2.5px 2.5px at 22% 65%, rgba(255, 255, 240, 0.90) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 28% 30%, rgba(200, 220, 255, 0.75) 0%, transparent 0%),
    radial-gradient(1px   1px   at 33% 78%, rgba(232, 228, 201, 0.65) 0%, transparent 0%),
    radial-gradient(2px   2px   at 38% 18%, rgba(255, 255, 200, 0.80) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 44% 52%, rgba(176, 196, 222, 0.70) 0%, transparent 0%),
    radial-gradient(1px   1px   at 50% 88%, rgba(232, 228, 201, 0.60) 0%, transparent 0%),
    radial-gradient(3px   3px   at 55% 12%, rgba(255, 240, 180, 0.85) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 60% 68%, rgba(200, 220, 255, 0.70) 0%, transparent 0%),
    radial-gradient(2px   2px   at 65% 35%, rgba(232, 197,  71, 0.65) 0%, transparent 0%),
    radial-gradient(1px   1px   at 70% 82%, rgba(255, 255, 240, 0.75) 0%, transparent 0%),
    radial-gradient(2.5px 2.5px at 75% 22%, rgba(176, 196, 222, 0.80) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 80% 55%, rgba(232, 228, 201, 0.70) 0%, transparent 0%),
    radial-gradient(1px   1px   at 85%  5%, rgba(200, 220, 255, 0.65) 0%, transparent 0%),
    radial-gradient(2px   2px   at 90% 45%, rgba(255, 250, 200, 0.80) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 94% 72%, rgba(232, 228, 201, 0.75) 0%, transparent 0%),
    radial-gradient(1px   1px   at 97% 28%, rgba(176, 196, 222, 0.60) 0%, transparent 0%),

    /* EXTRA SCATTERED STARS — fills thinner areas of the sky */
    radial-gradient(1px   1px   at  5% 55%, rgba(255, 255, 240, 0.55) 0%, transparent 0%),
    radial-gradient(2px   2px   at 15% 90%, rgba(200, 220, 255, 0.65) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 42%  5%, rgba(232, 197,  71, 0.50) 0%, transparent 0%),
    radial-gradient(1px   1px   at 57% 48%, rgba(232, 228, 201, 0.55) 0%, transparent 0%),
    radial-gradient(2px   2px   at 72% 10%, rgba(176, 196, 222, 0.70) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 88% 85%, rgba(255, 250, 200, 0.60) 0%, transparent 0%),

    /* BASE SKY — deep navy gradient (rendered last = bottommost layer) */
    linear-gradient(185deg, #0a1628 0%, #0e2040 35%, #0a1832 60%, #080f22 100%);

  background-size:       cover;
  background-position:   center center;
  background-repeat:     no-repeat;
  background-attachment: fixed; /* parallax scroll effect */
}


/* ── Grain texture overlay ───────────────────────────────────────
   SVG fractalNoise filter inlined as data URI, repeated as a
   tiny 180px tile at 4% opacity. Gives the "printed" analogue feel.
   pointer-events: none ensures it never intercepts mouse/touch.
   ─────────────────────────────────────────────────────────────── */
.hero-grain {
  position:         absolute;
  inset:            0;
  z-index:          0;
  pointer-events:   none;
  opacity:          0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:  180px 180px;
}


/* ── Atmospheric glow orbs ───────────────────────────────────────
   Two large blurred radial circles placed off-corner to add warmth
   (gold/top-right) and cool depth (blue/bottom-left).
   filter: blur(90px) makes them softly bleed across the sky.
   ─────────────────────────────────────────────────────────────── */
.hero-atmo {
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
  filter:         blur(90px);
  z-index:        0;
}

/* Warm gold orb — top right */
.hero-atmo--rose {
  top:        -8%;
  right:      -8%;
  width:      52vw;
  height:     52vw;
  max-width:  680px;
  max-height: 680px;
  background: radial-gradient(circle, rgba(232, 197, 71, 0.25) 0%, transparent 70%);
}

/* Cool blue orb — bottom left */
.hero-atmo--cream {
  bottom:     -12%;
  left:       -8%;
  width:      40vw;
  height:     40vw;
  max-width:  520px;
  max-height: 520px;
  background: radial-gradient(circle, rgba(74, 111, 165, 0.30) 0%, transparent 70%);
}


/* ── Editorial ruled column lines ────────────────────────────────
   Four vertical 1px lines that fade in at 20% and out at 80%,
   mimicking the column rules of a print layout / editorial spread.
   ─────────────────────────────────────────────────────────────── */
.hero-ruled-lines {
  position:        absolute;
  inset:           0;
  z-index:         0;
  pointer-events:  none;
  display:         flex;
  justify-content: space-between;
  padding:         0 5vw;
}

.hero-ruled-lines span {
  display: block;
  width:   1px;
  height:  100%;
  background: linear-gradient(
    to bottom,
    transparent                    0%,
    rgba(255, 255, 255, 0.06)     20%,
    rgba(255, 255, 255, 0.06)     80%,
    transparent                  100%
  );
}


/* ── Top meta bar ────────────────────────────────────────────────
   Thin bar at the very top of the hero (below fixed navbar).
   Three columns: left tag · centre info · right tag.
   Separated from the type layer by a 1px bottom border.
   Fades in via animation on page load.
   ─────────────────────────────────────────────────────────────── */
.hero-meta-bar {
  position:        relative;
  z-index:         10;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         88px 48px 16px; /* top padding clears the fixed navbar */
  border-bottom:   1px solid rgba(255, 255, 255, 0.9);
  animation:       fadeInUp 0.5s ease 0.05s both;
}

.hero-meta-bar__tag {
  font-family:    var(--font-display);
  font-size:      0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.7);
}

.hero-meta-bar__center {
  font-family:    var(--font-display);
  font-size:      0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.9);
}


/* ── Type layer (flex child, grows to fill remaining height) ─────
   Houses the giant name h1 and the floating center panel.
   overflow: visible lets the giant name bleed past bounds.
   ─────────────────────────────────────────────────────────────── */
.hero-type-layer {
  position:       relative;
  z-index:        5;
  flex:           1;           /* fills space between meta bar and lower strip */
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        24px 40px 0;
  overflow:       visible;
}


/* ── Giant background name (h1) ──────────────────────────────────
   Two spans: "Chelsea" (light, outlined) and "Resada" (bold, solid).
   The name is purely decorative / typographic background — the
   center panel floats on top of it via position: absolute.

   SHIMMER EFFECT
   ──────────────
   .hero-name-shimmer is applied by JS (shimmer.js) after
   document.fonts.ready resolves, ensuring the serif font is loaded
   before the gradient clip is applied (avoids flash of unstyled text).
   ─────────────────────────────────────────────────────────────── */
.hero-giant-name {
  font-family:    var(--font-serif);
  line-height:    0.88;
  pointer-events: none; /* name is decorative, should not intercept clicks */
  user-select:    none;
}

.hero-giant-name__row {
  display: block;
}

/* First name — light weight, slightly washed out */
.hero-giant-name__row--first {
  font-size:           clamp(4.5rem, 14.5vw, 13rem);
  font-weight:         300;
  color:               #cce5f5;
  -webkit-text-stroke: 1px rgba(90, 74, 58, 0.12);
  animation:           fadeInUp 0.75s ease 0.15s both;
}

/* Last name — bold, full white */
.hero-giant-name__row--last {
  font-size:   clamp(5rem, 16.5vw, 15rem);
  font-weight: 600;
  color:       var(--text-primary);
  text-shadow: 4px 8px 40px rgba(44, 32, 24, 0.07);
  animation:   fadeInUp 0.8s ease 0.25s both;
  padding-left: 5vw; /* slight indent for editorial offset rhythm */
}

/* Shimmer class — added by shimmer.js after fonts load.
   Uses background-clip: text to paint only the text glyphs.
   background-size: 250% lets the gold highlight sweep across. */
.hero-name-shimmer {
  background-image: linear-gradient(
    105deg,
    var(--text-secondary)       0%,
    var(--text-secondary)      38%,
    rgba(232, 197, 71, 0.95)   48%,
    var(--text-secondary)      58%,
    var(--text-secondary)     100%
  );
  background-size:         250% 100%;
  background-clip:         text;
  -webkit-background-clip: text;
  color:                   transparent;
  animation:               heroShimmerSweep 4s ease-in-out infinite;
}

/* Delay the sweep on the last name so they don't sync */
.hero-giant-name__row--last.hero-name-shimmer {
  animation-delay: 1.2s;
}

@keyframes heroShimmerSweep {
  0%   { background-position: 120% center; }
  100% { background-position: -30% center; }
}


/* ── Floating center panel ───────────────────────────────────────
   Absolutely positioned over the giant name.
   Frosted-glass effect via backdrop-filter: blur.
   Corner bracket ornaments expand on hover (.hero-panel-corner).
   ─────────────────────────────────────────────────────────────── */
.hero-center-panel {
  position:               absolute;
  top:                    50%;
  left:                   50%;
  transform:              translate(-50%, -50%);
  z-index:                20;
  width:                  clamp(280px, 38vw, 520px);
  padding:                36px 40px 32px;
  background:             rgba(13, 27, 62, 0.78);
  backdrop-filter:        blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:                 1px solid rgba(100, 140, 200, 0.35);
  text-align:             center;
  animation:              fadeIn 1s ease 0.4s both;
}

/* Corner bracket ornaments — expand on panel hover */
.hero-panel-corner {
  position:       absolute;
  width:          16px;
  height:         16px;
  pointer-events: none;
  transition:     width var(--transition-med), height var(--transition-med);
}

.hero-center-panel:hover .hero-panel-corner {
  width:  22px;
  height: 22px;
}

.hero-panel-corner--tl { top: 10px;    left:  10px;  border-top:    1.5px solid var(--accent-soft); border-left:  1.5px solid var(--accent-soft); }
.hero-panel-corner--tr { top: 10px;    right: 10px;  border-top:    1.5px solid var(--accent-soft); border-right: 1.5px solid var(--accent-soft); }
.hero-panel-corner--bl { bottom: 10px; left:  10px;  border-bottom: 1.5px solid var(--accent-soft); border-left:  1.5px solid var(--accent-soft); }
.hero-panel-corner--br { bottom: 10px; right: 10px;  border-bottom: 1.5px solid var(--accent-soft); border-right: 1.5px solid var(--accent-soft); }

/* Mobile name — shown only on small screens where giant name is hidden */
.hero-mobile-name {
  display:         none; /* shown via media query in responsive.css */
  flex-direction:  row;
  align-items:     baseline;
  justify-content: center;
  gap:             0.4em;
  line-height:     1;
  margin-bottom:   4px;
}

.hero-mobile-name__first,
.hero-mobile-name__last {
  font-family:    var(--font-serif);
  font-size:      clamp(1.6rem, 7vw, 2rem);
  font-weight:    400;
  color:          var(--text-primary);
  letter-spacing: 0.06em;
}

/* Spinning ✦ ornament at top of panel */
.hero-center-panel__ornament {
  display:        block;
  font-size:      0.7rem;
  color:          var(--accent-soft);
  margin-bottom:  10px;
  letter-spacing: 0.3em;
  animation:      heroSpinSlow 12s linear infinite;
}

@keyframes heroSpinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Role / degree label */
.hero-center-panel__role {
  font-family:    var(--font-display);
  font-size:      0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  14px;
  line-height:    1.7;
}

/* Thin gradient rule between role and intro text */
.hero-center-panel__rule {
  width:      48px;
  height:     1px;
  background: linear-gradient(to right, transparent, var(--accent-soft), transparent);
  margin:     0 auto 16px;
}

/* Intro paragraph */
.hero-center-panel__intro {
  font-family:   var(--font-serif);
  font-size:     1rem;
  line-height:   1.78;
  color:         var(--text-secondary);
  margin-bottom: 16px;
}

/* Italic quote with gold left border */
.hero-center-panel__quote {
  font-family:   var(--font-serif);
  font-size:     0.9rem;
  font-style:    italic;
  color:         var(--accent-secondary);
  border-left:   2px solid var(--accent-soft);
  padding-left:  12px;
  text-align:    left;
  line-height:   1.65;
  margin-bottom: 0;
}

/* CTA button row */
.hero-cta-row {
  display:         flex;
  align-items:     center;
  gap:             14px;
  margin-top:      24px;
  justify-content: center;
  flex-wrap:       wrap;
}


/* ── Decorative geometric shapes ─────────────────────────────────
   Pure CSS ornamental elements layered on top of the background.
   All have pointer-events: none — purely visual.
   ─────────────────────────────────────────────────────────────── */
.hero-deco {
  position:       absolute;
  pointer-events: none;
  z-index:        2;
}

/* Large spinning ring — top left area */
.hero-deco--ring-lg {
  top:           12%;
  left:          4%;
  width:         clamp(80px, 10vw, 140px);
  height:        clamp(80px, 10vw, 140px);
  border-radius: 50%;
  border:        1px solid rgba(255, 255, 255, 0.9);
  animation:     heroDecoSpin 18s linear infinite;
}

/* Inner dashed ring — ::after pseudo-element */
.hero-deco--ring-lg::after {
  content:       '';
  position:      absolute;
  inset:         10px;
  border-radius: 80%;
  border:        1px dashed rgba(255, 255, 255, 1);
}

/* Small counter-spinning ring — bottom right area */
.hero-deco--ring-sm {
  bottom:        18%;
  right:         5%;
  width:         clamp(50px, 6vw, 80px);
  height:        clamp(50px, 6vw, 80px);
  border-radius: 80%;
  border:        1px solid rgba(255, 255, 255, 0.9);
  animation:     heroDecoSpin 10s linear infinite reverse;
}

/* 3×2 grid of dots — top right area */
.hero-deco--dot-cluster {
  top:                  20%;
  right:                6%;
  display:              grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                  7px;
  animation:            fadeIn 1.2s ease 0.6s both;
}

.hero-deco--dot-cluster span {
  display:       block;
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.80);
  opacity:       0.7;
}

/* Crosshair — bottom left area */
.hero-deco--cross {
  bottom:    22%;
  left:      5%;
  width:     24px;
  height:    24px;
  animation: fadeIn 1.2s ease 0.8s both;
}

.hero-deco--cross .h {
  position:  absolute;
  top:       50%;
  left:      0;
  transform: translateY(-50%);
  width:     100%;
  height:    1px;
  background: rgba(255, 255, 255, 0.80);
}

.hero-deco--cross .v {
  position:  absolute;
  left:      50%;
  top:       0;
  transform: translateX(-50%);
  height:    100%;
  width:     1px;
  background: rgba(255, 255, 255, 0.80);
}

@keyframes heroDecoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ── Lower strip ─────────────────────────────────────────────────
   Three-column grid at the very bottom of the hero.
   Separated from type layer by a 1px top border.
   Columns: [folio label] [stat pills] [collection card]
   ─────────────────────────────────────────────────────────────── */
.hero-lower {
  position:              relative;
  z-index:               10;
  display:               grid;
  grid-template-columns: 1fr auto 260px;
  align-items:           stretch;
  border-top:            1px solid rgba(255, 255, 255, 0.9);
  animation:             fadeInUp 1s ease 0.55s both;
}

/* Left cell — folio number and tagline */
.hero-lower__intro {
  padding:      26px 36px 26px 48px;
  display:      flex;
  flex-direction: column;
  gap:          12px;
  border-right: 1px solid rgba(255, 255, 255, 0.9);
}

.hero-folio-eyebrow {
  display:        flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.85);
}

.hero-folio-eyebrow__num  { color: var(--accent-primary); }

.hero-folio-eyebrow__line {
  display:    block;
  flex:       1;
  max-width:  28px;
  height:     1px;
  background: rgba(255, 255, 255, 0.4);
}

.hero-folio-eyebrow__text {
  font-size:      0.62rem;
  letter-spacing: 0.16em;
  color:          rgba(255, 255, 255, 0.9);
}

.hero-folio-desc {
  font-family:    var(--font-display);
  font-size:      0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.9);
}

/* Centre cell — stat pills (Projects / Years / Curiosity) */
.hero-lower__stats {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  padding:        24px 44px;
  border-right:   1px solid rgba(255, 255, 255, 0.9);
  gap:            0;
}

.hero-stat-pill {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        10px 0;
}

.hero-stat-pill__num {
  font-family:  var(--font-serif);
  font-size:    2.1rem;
  font-weight:  600;
  color:        var(--text-primary);
  line-height:  1;
}

.hero-stat-pill__label {
  font-family:    var(--font-display);
  font-size:      0.57rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 1);
}

/* Thin separator between stat pills */
.hero-stat-sep {
  width:       26px;
  height:      1px;
  background:  rgba(255, 255, 255, 0.70);
  flex-shrink: 0;
}

/* Right cell — collection preview card */
.hero-collection-card {
  display:     flex;
  flex-direction: row;
  align-items: stretch;
  background:  linear-gradient(135deg, rgba(10, 21, 48, 0.92) 0%, rgba(20, 32, 80, 0.96) 100%);
  border-top:  1px solid rgba(232, 197, 71, 0.35);
  overflow:    hidden;
  transition:  background var(--transition-med), border-color var(--transition-med);
}

.hero-collection-card:hover {
  background:      linear-gradient(135deg, rgba(14, 28, 65, 0.95) 0%, rgba(30, 48, 110, 0.98) 100%);
  border-top-color: rgba(232, 197, 71, 0.7);
}

/* Image frame — left half of the card */
.hero-collection-card__frame {
  flex:     1;
  overflow: hidden;
}

.hero-collection-card__ph {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
}

/* Actual image (when provided via index.html) */
.hero-collection-card__img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

/* Placeholder shown when no image is provided yet */
.hero-collection-card__img-placeholder {
  width:           100%;
  height:          100%;
  min-height:      90px;
  background:      linear-gradient(135deg, rgba(17, 29, 58, 0.9), rgba(30, 50, 90, 0.9));
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
}

.hero-collection-card__img-placeholder span:first-child {
  font-size: 1.4rem;
  color:     rgba(232, 197, 71, 0.5);
}

.hero-collection-card__img-placeholder span:last-child {
  font-family:    var(--font-display);
  font-size:      0.5rem;
  letter-spacing: 0.15em;
  color:          rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}

/* Text body — right half of the card */
.hero-collection-card__body {
  padding:        20px 16px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  justify-content: center;
  border-left:    1px solid rgba(232, 197, 71, 0.2);
}

.hero-collection-card__title {
  font-family:  var(--font-serif);
  font-size:    1.1rem;
  font-weight:  600;
  color:        var(--text-light);
  line-height:  1.3;
}

.hero-collection-card__link {
  font-family:     var(--font-display);
  font-size:       0.58rem;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           var(--accent-primary);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  margin-top:      6px;
  border-bottom:   1px solid transparent;
  transition:      gap var(--transition-fast), border-color var(--transition-fast);
}

.hero-collection-card__link:hover {
  gap:          9px;
  border-color: var(--accent-soft);
}


/* ── Scroll cue ──────────────────────────────────────────────────
   Fixed bottom-left arrow that bounces to hint at scrolling.
   aria-hidden="true" — purely decorative, not read by screenreaders.
   ─────────────────────────────────────────────────────────────── */
.hero-scroll-cue {
  position:   absolute;
  bottom:     28px;
  left:       48px;
  z-index:    15;
  display:    flex;
  align-items: center;
  gap:        8px;
  animation:  heroScrollBounce 2.5s ease-in-out infinite;
}

.hero-scroll-cue__num {
  font-family: var(--font-display);
  font-size:   0.78rem;
  color:       rgba(255, 255, 255, 0.70);
}

.hero-scroll-cue__label {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.5);
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}


/* ── Shared hero keyframes ───────────────────────────────────────
   Reused across meta bar, name rows, lower strip, and deco shapes.
   ─────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}