/* ==========================================================================
   Home hero — "Your land, through the years" (2026-10-09)
   Markup: sections/walk-hero.php   Motion: assets/js/walk-hero.js
   Scroll-told like icapital.es, opening like bright-avenue.jp.
   ========================================================================== */

.wh { position: relative; height: 700vh; background: var(--background); }   /* 520vh film + 180vh finale */
.wh__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--primary); }

.wh__media { position: absolute; inset: 0; z-index: 1; background: var(--primary); will-change: clip-path; }
.wh__poster, .wh__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wh__video { opacity: 0; transition: opacity 0.5s ease; }
.wh__video.is-live { opacity: 1; }
.wh__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 30, 18, 0.55) 0%, rgba(14, 30, 18, 0.18) 34%, rgba(14, 30, 18, 0) 55%),
    linear-gradient(0deg, rgba(14, 30, 18, 0.55) 0%, rgba(14, 30, 18, 0) 32%);
}

/* Giant wordmark: visible at Year 0, fades as the walk starts. */
.wh__mark {
  position: absolute; z-index: 2; left: 0; right: 0; top: 63%;
  margin: 0; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10.4vw; line-height: 0.9; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
  transform: translate3d(0, calc(-50% + var(--my, 0px)), 0);
  pointer-events: none;
}
.wh__logo {
  position: absolute; z-index: 5; left: 50%; top: 50%; margin: 0;
  font-family: var(--font-display); font-size: 1.05rem; color: #fff;
  opacity: 0; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
}

/* Chapters: one headline at a time, centred near the top (icapital style). */
.wh__chapters {
  position: absolute; z-index: 3; left: 50%; top: clamp(7.5rem, 17vh, 10rem);
  width: min(46rem, 88vw); transform: translateX(-50%); text-align: center;
}
.wh__chapter {
  position: absolute; inset: 0 0 auto 0; color: #fff;
  opacity: 0; transform: translateY(22px); visibility: hidden;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.wh__chapter.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s; }
.wh__eyebrow {
  margin: 0 0 0.8rem; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent);
}
.wh__title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.9rem); line-height: 1.08; color: #fff;
  text-shadow: 0 4px 28px rgba(10, 24, 14, 0.45);
}
.wh__title em { font-style: normal; color: var(--accent); }
.wh__text {
  margin: 0.9rem auto 0; max-width: 34rem; font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 14px rgba(10, 24, 14, 0.5);
}

/* Finale (scroll-driven by walk-hero.js): a dark veil and the logo, which pops
   up and fits the screen (width of the phone, or the height of a short
   window, never more than 56rem). */
.wh__finale {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 0 5vw;
  background: rgba(12, 28, 17, 0.78); opacity: 0; pointer-events: none;
}
.wh__finale-logo {
  width: min(88vw, calc(66svh * 2.75), 56rem); height: auto;
  opacity: 0; transform: scale(0.5); will-change: transform, opacity;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.35));
}
html:not(.js) .wh__finale { display: none; }

/* Finale ribbon: two crossed bands sweep in (clip wipe, set by walk-hero.js)
   and the front one scrolls the figures sideways for as long as it shows. */
.wh__ribbons { position: absolute; left: -10vw; right: -10vw; bottom: clamp(5rem, 17vh, 11rem); height: 0; }
.wh__ribbon {
  position: absolute; left: 0; right: 0; top: 0; translate: 0 -50%;
  overflow: hidden; white-space: nowrap; clip-path: inset(0 100% 0 0);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.wh__ribbon--back { rotate: 3deg; background: #B8DD7C; color: #1F3D26; padding: 0.55rem 0; font: 700 clamp(0.7rem, 1vw, 0.85rem)/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.92; }
.wh__ribbon--front { rotate: -2.5deg; background: var(--primary); color: #fff; padding: clamp(0.8rem, 1.6vh, 1.1rem) 0; border-block: 1px solid rgba(184, 221, 124, 0.45); }
.wh__ribbon-run { display: inline-flex; animation: whRibbon 38s linear infinite; }
.wh__ribbon--back .wh__ribbon-run { animation-direction: reverse; animation-duration: 46s; }
.wh__ribbon-run > span { display: inline-flex; align-items: center; flex: none; }
.wh__ribbon i { font-style: normal; color: var(--accent, #B8DD7C); margin: 0 clamp(1rem, 2.4vw, 2rem); font-size: 0.8em; }
.wh__ribbon--back i { color: #2C5F38; }
.wh__stat { display: inline-flex; align-items: baseline; gap: 0.15em; font-weight: 400; font-size: clamp(0.95rem, 1.35vw, 1.2rem); color: rgba(255, 255, 255, 0.86); }
.wh__stat em { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: #fff; font-variant-numeric: tabular-nums; }
.wh__stat small { font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.4rem); color: #B8DD7C; margin-right: 0.35em; }
@keyframes whRibbon { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .wh__ribbons { bottom: 27vh; } .wh__ribbon--back { top: 3.4rem; rotate: 5deg; } }   /* clear of the phone menu bar */
@media (prefers-reduced-motion: reduce) { .wh__ribbon-run { animation: none; } }

/* Big year counter, bottom left. */
.wh__year {
  position: absolute; z-index: 3; left: max(var(--gutter), 4vw); bottom: 6vh; margin: 0;
  display: flex; align-items: baseline; gap: 0.6rem; color: #fff; pointer-events: none;
  text-shadow: 0 4px 30px rgba(10, 24, 14, 0.4);
}
.wh__year span { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.85; }
.wh__year strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 10vw, 9rem); line-height: 0.85; font-variant-numeric: tabular-nums; }

/* Progress rail with year ticks, right edge. */
.wh__rail {
  position: absolute; z-index: 3; right: max(var(--gutter), 2.6vw); top: 50%;
  width: 2px; height: 42vh; transform: translateY(-50%); background: rgba(255, 255, 255, 0.28); border-radius: 2px;
}
.wh__rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.wh__tick { position: absolute; left: 50%; top: calc(var(--at) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: background-color 0.3s ease, transform 0.3s ease; }
.wh__tick b { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 500 0.72rem var(--font-mono); color: rgba(255, 255, 255, 0.8); }
.wh__tick.is-on { background: var(--accent); transform: scale(1.3); }

.wh__addr { position: absolute; z-index: 3; right: max(var(--gutter), 4vw); bottom: 6vh; margin: 0; text-align: right; font-size: var(--text-xs); line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.wh__hint {
  position: absolute; z-index: 3; left: 50%; bottom: 3vh; margin: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.wh__hint span { width: 1px; height: 34px; background: linear-gradient(currentColor, transparent); animation: whDrip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes whDrip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---- Opening state (class set in <head>, removed by walk-hero.js) ------- */
html.bah-intro { overflow: hidden; }
html.bah-intro .wh__media { clip-path: inset(50% 50% round 12px); }
html.bah-intro .wh__chapters,
html.bah-intro .wh__year,
html.bah-intro .wh__rail,
html.bah-intro .wh__addr,
html.bah-intro .wh__hint { opacity: 0; }
html.bah-intro .wh__mark { --my: 60vh; }
html.bah-intro .site-header,
html.bah-intro .wa-fab,
html.bah-intro .bottom-nav { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.wh__chapters, .wh__year, .wh__rail, .wh__addr, .wh__hint { transition: opacity 0.6s ease; }
.wa-fab, .bottom-nav { transition: opacity 0.6s ease, transform 0.6s ease; }

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 760px) {
  .wh { height: 640vh; }   /* 460vh film + 180vh finale */
  /* Top to bottom on a phone: headline and buttons, then the wordmark, then
     the year counter above the bottom menu. Buttons sit side by side and the
     wordmark and year rail start below them, so nothing overlaps. */
  .wh__mark { font-size: 14.5vw; line-height: 0.95; top: auto; bottom: calc(92px + 2vh + 5.6rem); transform: translate3d(0, var(--my, 0px), 0); }
  .wh__mark span { display: block; }
  .wh__chapters { top: 6.4rem; width: calc(100% - 2 * var(--gutter)); }
  .wh__title { font-size: 1.9rem; }
  .wh__text { font-size: 0.98rem; }
  .wh__year { bottom: calc(92px + 2vh); }
  .wh__year strong { font-size: 4.2rem; }
  .wh__rail { height: 18vh; top: auto; bottom: calc(92px + 2vh); transform: none; }
  .wh__addr, .wh__hint { display: none; }
}
/* Short phones (older or small screens): a little smaller so it still fits. */
@media (max-width: 760px) and (max-height: 700px) {
  .wh__mark { font-size: 12vw; bottom: calc(92px + 2vh + 4.4rem); }
  .wh__year strong { font-size: 3.4rem; }
  .wh__rail { height: 14vh; }
}

/* ---- No script / reduced motion: one still, Year 6 message ------------- */
html:not(.js) .wh { height: auto; }
html:not(.js) .wh__pin { position: relative; }
/* Reduced motion: the scrub stays (it only moves when the visitor scrolls),
   but the opening animation is skipped (walk-hero.js) and nothing loops. */
@media (prefers-reduced-motion: reduce) {
  .wh__hint span { animation: none; }
}

/* ---- Smoother motion (2026-10-09, v2) ----------------------------------- */
/* Chapters: the block fades quickly; the headline rises in word by word,
   then the eyebrow, the line of text and the buttons follow. */
.wh__chapter { transform: none; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.wh__chapter.is-on { transition: opacity 0.25s ease, visibility 0s; }
.wh__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wh__title .w > span {
  display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: left bottom;
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.85, 0.35);
}
.wh__chapter.is-on .wh__title .w > span {
  transform: none;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.08s + var(--i) * 0.06s);
}
.wh__eyebrow, .wh__text {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.wh__chapter.is-on .wh__eyebrow { opacity: 1; transform: none; transition: opacity 0.7s ease 0.05s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s; }
.wh__chapter.is-on .wh__text    { opacity: 1; transform: none; transition: opacity 0.8s ease 0.35s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; }

/* Year counter rolls up (or down when scrolling back). */
.wh__year strong { display: inline-block; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.3s ease; }
.wh__year strong.is-out-up   { transform: translate3d(0, -40%, 0); opacity: 0; filter: blur(6px); transition-duration: 0.16s; }
.wh__year strong.is-out-down { transform: translate3d(0, 40%, 0);  opacity: 0; filter: blur(6px); transition-duration: 0.16s; }
.wh__year strong.is-in-up    { transform: translate3d(0, 40%, 0);  opacity: 0; transition: none; }
.wh__year strong.is-in-down  { transform: translate3d(0, -40%, 0); opacity: 0; transition: none; }

/* Rail fill and ticks glide. */
.wh__rail-fill { transition: transform 0.12s linear; }

/* Lenis smooth scroll (home page). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Falling leaves (from the original hero) ---------------------------- */
.wh__leaves { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.wh__leaf-defs { position: absolute; width: 0; height: 0; }
.wh__leaf {
  --p: clamp(0, (var(--leaf-fall, 0) - var(--t0)) * var(--inv), 1);
  position: absolute; left: var(--x); top: var(--y); width: 58px; height: 58px;
  opacity: calc(var(--o) * (1 - var(--p) * 0.3));
  transform: translate3d(calc(var(--p) * var(--dx)), calc(var(--p) * var(--dy)), 0) rotate(calc(var(--p) * var(--spin))) scale(var(--s));
  filter: drop-shadow(0 4px 9px rgba(20, 32, 18, 0.34));
  will-change: transform, opacity;
}
.wh__leaf svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .wh__leaf { width: 44px; height: 44px; } }
html.bah-intro .wh__leaves { opacity: 0; }