/* ============================================================
   Hero (R6) — wordmark + calendar, lit from above.

   Two objects on a dark stage. No atmosphere. No orb in the hero.
   The "lit from above" cinematography is a single top-edge gradient
   that hot-spots over the calendar's horizontal centre.

   Layout (desktop ≥1024):
     ┌─────────────────────────────────────────────┐
     │  ── top-edge light gradient ──              │
     │                                             │
     │  ENTRA       ┌─────────────────────────┐    │
     │  NELLA       │   8×7 calendar          │    │
     │  STANZA.     │   Week 1 featured       │    │
     │              │   29 Casel-Red dots     │    │
     │  body        │                         │    │
     │  [ CTA ]     └─────────────────────────┘    │
     │  ↓ Scopri                                   │
     └─────────────────────────────────────────────┘

   Mobile: wordmark stacks above calendar.
   ============================================================ */

.hero {
  position: relative;
  /* room for nav (~64px) + breathing space — content layout drives height
     rather than locking to 100vh; lets the calendar live without crop. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(5rem, 9vh, 7rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-chamber-navy);
}

/* v7 — full-bleed cinematic background image (lone athlete in chamber).
   Sits behind the existing ::before light gradient + ::after overlay,
   below the inner content (z-index: 1). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* v9 — athlete recentred at viewport center, vertical at 50% so
     the head + beam intersection (the most cinematic moment in the
     source image) lands in the upper-middle of the viewport instead of
     being cropped. AD flagged v8 had figure pinched lower-right;
     a too-aggressive lift in early v9 cropped the head — this settles. */
  /* v12 — ALTERNATIVE hero mood: athlete walking INTO the amber beam
     from behind, mid-stride (arrival / commitment) instead of v11's
     bowed-recovery pose. Same atmosphere, different emotional moment.
     Use this version if you want "Entra nella Stanza" to land as a
     literal entrance instead of a reflective state. */
  background-image: url('../../assets/img/hero-alt-03-walk-in.jpg');
  background-size: cover;
  background-position: 50% 55%;
  /* settle on first paint, then very slow Ken Burns push so the room
     "breathes" without competing with copy. */
  animation:
    hero-bg-settle 2400ms var(--ease-out) both,
    hero-bg-kenburns 36s var(--ease-in-out) 2400ms infinite alternate;
}
@keyframes hero-bg-settle {
  from { transform: scale(1.08); opacity: 0; }
  to   { transform: scale(1.02); opacity: 1; }
}
@keyframes hero-bg-kenburns {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 768px) {
  .hero__bg {
    /* v12 mobile — vertical version of the walking-into-beam pose so
       the hero mood is consistent across desktop and mobile. */
    background-image: url('../../assets/img/hero-alt-03-walk-in-mobile.jpg');
    background-position: 50% 50%;
  }
}

/* ---------- "Lit from above" — Oryzo's single-gradient cinematography ---------- */

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* darken left half so wordmark stays legible over the image */
    linear-gradient(
      90deg,
      rgba(10, 12, 24, 0.94) 0%,
      rgba(10, 12, 24, 0.84) 28%,
      rgba(10, 12, 24, 0.42) 56%,
      rgba(10, 12, 24, 0.16) 80%,
      rgba(10, 12, 24, 0.42) 100%
    ),
    /* original top light retained, atop the image */
    radial-gradient(
      ellipse 70% 50% at 72% -8%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.015) 22%,
      transparent 55%
    ),
    /* bottom floor wash so athlete grounds into deeper navy */
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(10, 12, 24, 0.6) 100%
    );
}

@media (max-width: 768px) {
  .hero::before {
    background:
      /* mobile: darken top for text legibility above the small portrait */
      linear-gradient(
        180deg,
        rgba(10, 12, 24, 0.94) 0%,
        rgba(10, 12, 24, 0.68) 40%,
        rgba(10, 12, 24, 0.28) 70%,
        rgba(10, 12, 24, 0.65) 100%
      );
  }
}

/* ---------- Inner grid ---------- */

.hero__inner {
  position: relative;
  /* v10 — bumped to z-index 3 so motes (z-index 2) sit below it. */
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero__inner {
    /* v8 — calendar removed; left column takes ~45% to keep wordmark
       sitting on the dark side of the gradient, athlete breathes right. */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: center;
  }
}
.hero--v8 .hero__left {
  /* push wordmark slightly lower so it doesn't crowd nav */
  margin-top: clamp(2rem, 8vh, 6rem);
  margin-bottom: clamp(2rem, 6vh, 4rem);
}

/* ---------- Left column: wordmark + body + CTA ---------- */

.hero__left {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__wordmark {
  margin: 0;
  margin-left: -0.045em; /* optical-align to grid edge */
}

/* line-by-line stagger fade-up on first paint */
.hero__wordmark > span {
  opacity: 0;
  transform: translateY(20px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__wordmark > span {
    animation: hero-line-rise 580ms var(--ease-out) forwards;
  }
  .hero__wordmark > span:nth-child(1) { animation-delay: 80ms; }
  .hero__wordmark > span:nth-child(2) { animation-delay: 160ms; }
  .hero__wordmark > span:nth-child(3) { animation-delay: 240ms; }
}
@keyframes hero-line-rise {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__wordmark > span {
    opacity: 1;
    transform: none;
  }
}

/* state used by ?reveal=hero-rest to skip stagger */
.hero[data-arrived='true'] .hero__wordmark > span {
  opacity: 1;
  transform: none;
  animation: none;
}

.hero__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-muted);
  line-height: var(--lh-body);
  max-width: 38ch;
  opacity: 0;
  transform: translateY(8px);
}
.hero__cta-row {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
}
.hero__cta-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-muted-soft);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__lede {
    animation: hero-line-rise 360ms var(--ease-out) 1820ms forwards;
  }
  .hero__cta-row {
    animation: hero-line-rise 360ms var(--ease-out) 1940ms forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lede,
  .hero__cta-row {
    opacity: 1;
    transform: none;
  }
}
.hero[data-arrived='true'] .hero__lede,
.hero[data-arrived='true'] .hero__cta-row {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ---------- Scroll cue ---------- */

.hero__scroll-cue {
  position: absolute;
  bottom: clamp(1rem, 3vh, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-muted-soft);
  opacity: 0;
  z-index: 3;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-cue {
    animation: hero-line-rise 600ms var(--ease-out) 2200ms forwards;
  }
  .hero__scroll-cue svg {
    animation: bounce-cue 1800ms var(--ease-in-out) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.hero__scroll-cue svg {
  width: 12px;
  height: 12px;
}

/* ---------- Right column: calendar object ---------- */

.hero__calendar-wrap {
  position: relative;
  width: 100%;
  /* On desktop the calendar tilts slightly right of optical-center;
     mobile it sits centred. */
  margin-inline: auto;
}

.hero-calendar {
  position: relative;
  width: 100%;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025) 0%,
      transparent 40%
    ),
    var(--color-blue-steel);
  border: 1px solid var(--color-border-strong);
  /* the 1px inset top highlight implies a top light without rendering one */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px -24px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.75rem);
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-calendar {
    animation: hero-line-rise 480ms var(--ease-out) 320ms forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-calendar {
    opacity: 1;
    transform: none;
  }
}
.hero[data-arrived='true'] .hero-calendar {
  opacity: 1;
  transform: none;
  animation: none;
}

.hero-calendar__head {
  display: grid;
  grid-template-columns: 48px repeat(7, 1fr) 132px;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.hero-calendar__head-cell {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted-soft);
  text-align: center;
}
.hero-calendar__head-cell--week,
.hero-calendar__head-cell--phase {
  text-align: left;
}

.hero-calendar__row {
  display: grid;
  grid-template-columns: 48px repeat(7, 1fr) 132px;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  border-radius: 6px;
  position: relative;
  transition: background-color 280ms var(--ease-out);
}
.hero-calendar__row + .hero-calendar__row {
  border-top: 1px solid var(--color-row-divider);
}

.hero-calendar__week-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
.hero-calendar__phase {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-muted-softer);
  text-align: right;
  white-space: nowrap;
}

.hero-calendar__cell {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-calendar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 6px rgba(233, 69, 96, 0.5);
  opacity: 0;
  transform: scale(0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-calendar__dot.is-lit {
    animation: hero-cal-dot 280ms var(--ease-out) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-calendar__dot {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hero-cal-dot {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* featured week (Week 1) — soft surface + expanded phase label + red underline */
.hero-calendar__row--featured {
  background: rgba(255, 255, 255, 0.025);
}
.hero-calendar__row--featured .hero-calendar__week-num {
  color: var(--color-fg);
}
.hero-calendar__row--featured .hero-calendar__phase {
  color: var(--color-red);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.hero-calendar__row--featured .hero-calendar__phase::before {
  content: '· ';
  opacity: 0.6;
}
/* the red underline draws in left-to-right once featured row is "ready" */
.hero-calendar__row--featured::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: var(--color-red);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 280ms var(--ease-out);
}
.hero-calendar__row--featured.is-underlined::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-calendar__row--featured::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* ---------- Mobile composition ---------- */

@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero-calendar__head,
  .hero-calendar__row {
    grid-template-columns: 32px repeat(7, 1fr) 96px;
    gap: 2px;
  }
  .hero-calendar__phase {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
  .hero-calendar__cell {
    height: 24px;
  }
  .hero-calendar__dot {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 540px) {
  .hero-calendar {
    padding: 0.875rem 0.625rem;
  }
  .hero-calendar__head,
  .hero-calendar__row {
    grid-template-columns: 20px repeat(7, 1fr) 72px;
  }
  .hero-calendar__head-cell {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .hero-calendar__phase {
    font-size: 7px;
  }
  .hero-calendar__week-num {
    font-size: 10px;
  }
}

/* ---------- Animation primitives shared with rest of page ---------- */

@keyframes bounce-cue {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   v10 — hero dust motes + silhouette breath
   Three particle layers drift through the amber beam at different
   rates, creating depth without a particle library. The bg image
   itself gets a subtle "breath" — a slow scale loop synced with the
   site's 5s heartbeat. All motion respects prefers-reduced-motion.
   ============================================================ */

/* shared mote layer base — a sprinkle of tiny radial-gradient dots */
.hero__motes {
  position: absolute;
  inset: 0;
  /* z-index 2 — sits ABOVE the ::before overlay (z-index 1) so motes
     read on the screen. Content layer below was bumped to z-index 3. */
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  /* clip motes to the right two-thirds where the amber beam lives,
     so left side (where copy lives) stays clean */
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.95) 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.95) 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* Tile-based mote pattern. Each gradient creates ONE dot per tile,
   then the tile repeats across the viewport, giving us dense particle
   coverage. Different tile sizes per layer create parallax depth. */

.hero__motes--near {
  /* v11 — particle sizes bumped ~25% so they read in stills without
     becoming "snow" (AD's guidance). */
  background-image:
    radial-gradient(circle at 22% 38%, rgba(255, 215, 160, 1.0) 0, rgba(255, 215, 160, 0.55) 1.7px, transparent 3.6px),
    radial-gradient(circle at 68% 12%, rgba(255, 215, 160, 0.95) 0, rgba(255, 215, 160, 0.5) 1.5px, transparent 3.2px),
    radial-gradient(circle at 78% 82%, rgba(255, 215, 160, 0.85) 0, rgba(255, 215, 160, 0.42) 1.6px, transparent 3.4px);
  background-size: 160px 200px, 220px 240px, 180px 260px;
  background-position: 0 0, 80px 40px, 30px 120px;
  animation: hero-motes-drift-near 22s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
}

.hero__motes--mid {
  background-image:
    radial-gradient(circle at 30% 45%, rgba(255, 205, 145, 0.85) 0, rgba(255, 205, 145, 0.4) 1.4px, transparent 3px),
    radial-gradient(circle at 72% 28%, rgba(255, 205, 145, 0.75) 0, rgba(255, 205, 145, 0.35) 1.3px, transparent 2.8px);
  background-size: 280px 320px, 360px 280px;
  background-position: 40px 80px, 180px 20px;
  animation: hero-motes-drift-mid 38s linear infinite;
  opacity: 0.95;
  mix-blend-mode: screen;
}

.hero__motes--far {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 195, 135, 0.7) 0, rgba(255, 195, 135, 0.32) 1.1px, transparent 2.2px),
    radial-gradient(circle at 25% 75%, rgba(255, 195, 135, 0.65) 0, rgba(255, 195, 135, 0.28) 1.0px, transparent 2px);
  background-size: 460px 500px, 540px 440px;
  background-position: 0 0, 240px 280px;
  animation: hero-motes-drift-far 70s linear infinite;
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* v11 — single anchor mote near the headline's right edge, only on
   widescreen. Hand-placed pixel-perfectly so the eye catches it as
   you read STANZA — turns the mote layer into a deliberate composition
   instead of "snow". */
@media (min-width: 1024px) {
  .hero__motes--anchor {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* v11.1 — repositioned closer to the red period of STANZA. (AD: at
       v11 the anchor read "too far right" on 1440w). The primary mote
       now sits ~40px off the period at 33% horizontal / 56% vertical,
       larger and brighter so it reads at first glance. A secondary
       mote drifts upward and to the right as if rising from it. */
    background-image:
      radial-gradient(circle at 33% 56%, rgba(255, 220, 165, 1.0)  0, rgba(255, 220, 165, 0.7)  3.2px, transparent 8px),
      radial-gradient(circle at 30% 64%, rgba(255, 220, 165, 0.7) 0, rgba(255, 220, 165, 0.4) 2.0px, transparent 4.5px),
      radial-gradient(circle at 37% 50%, rgba(255, 220, 165, 0.55) 0, rgba(255, 220, 165, 0.3) 1.4px, transparent 3.0px),
      radial-gradient(circle at 39% 44%, rgba(255, 220, 165, 0.4) 0, rgba(255, 220, 165, 0.22) 1.0px, transparent 2.2px);
    animation: hero-motes-anchor-drift 14s ease-in-out infinite alternate;
    mix-blend-mode: screen;
  }
  @keyframes hero-motes-anchor-drift {
    0%   { transform: translate(0, 0); opacity: 0.7; }
    45%  { transform: translate(12px, -22px); opacity: 1; }
    100% { transform: translate(4px, -10px); opacity: 0.75; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__motes--anchor { animation: none; opacity: 0.65; transform: none; }
  }
}

/* v10 — animate background-position so each tile slides; this lets
   particles "drift" upward through the chamber without the layer
   detaching from its container. Distance roughly = one tile cycle. */
@keyframes hero-motes-drift-near {
  from { background-position: 0 0, 80px 40px, 30px 120px; }
  to   { background-position: -40px -200px, 40px -200px, -10px -140px; }
}
@keyframes hero-motes-drift-mid {
  from { background-position: 40px 80px, 180px 20px; }
  to   { background-position: 80px -240px, 240px -260px; }
}
@keyframes hero-motes-drift-far {
  from { background-position: 0 0, 240px 280px; }
  to   { background-position: -30px -500px, 210px -160px; }
}

/* silhouette breath — bg image scales 1.0 → 1.012 every 5s, hooked
   to the global heartbeat cadence. Stacks UNDER the Ken Burns push
   defined earlier; the two compositional pulses (breath + Ken Burns)
   create the sense of a living room without ever competing. */
.hero--v10 .hero__bg {
  animation:
    hero-bg-settle 2400ms var(--ease-out) both,
    hero-bg-kenburns 36s var(--ease-in-out) 2400ms infinite alternate,
    hero-bg-breath 5s ease-in-out 2400ms infinite;
}
@keyframes hero-bg-breath {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.05) saturate(1.08); }
}

/* reduced motion — kill ambient drift, keep image static */
@media (prefers-reduced-motion: reduce) {
  .hero__motes,
  .hero__motes--near,
  .hero__motes--mid,
  .hero__motes--far { animation: none; opacity: 0.4; }
  .hero--v10 .hero__bg { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   v11 — mobile motion gesture
   On mobile (≤768px), the dust motes are too subtle to read at small
   viewport. Replace them with a single drifting "ember" — one larger
   amber dot that floats vertically through the hero, like a firefly
   in the chamber. Pure CSS, prefers-reduced-motion safe.
   ============================================================ */

@media (max-width: 768px) {
  /* hide the desktop tile motes — they're too small at mobile DPR */
  .hero__motes--near,
  .hero__motes--mid,
  .hero__motes--far { display: none; }

  /* repurpose the anchor element as a single drifting ember */
  .hero__motes--anchor {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255, 215, 160, 0.95) 0, rgba(255, 215, 160, 0.5) 3.5px, transparent 8px);
    background-size: 100% 100%;
    background-position: 50% 78%;
    background-repeat: no-repeat;
    animation: hero-ember-drift 9s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 0.85;
  }

  @keyframes hero-ember-drift {
    0%   { background-position: 38% 82%; opacity: 0.4; }
    35%  { background-position: 56% 60%; opacity: 0.95; }
    70%  { background-position: 48% 40%; opacity: 0.85; }
    100% { background-position: 62% 20%; opacity: 0.3; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__motes--anchor {
      animation: none;
      background-position: 50% 50%;
      opacity: 0.6;
    }
  }
}