/* =============================================================================
   Home v2 — split-screen landing (pass 2)
   Left  : a giant "7" + a gear "0", with the department logos SCATTERED around
           as individual spinning gears (the gear spins; the logo inside stays
           upright). Sized to fit ONE screen.
   Right : the live donation total.

   Background is transparent like v1 (faint building photo only). Header is
   sticky. A back-to-v1 CTA + a decorative top-right wave are added.

   Reuses @keyframes y70-gear-spin / y70-gear-spin-rev (main.css) and the
   .y70-total-amount / .y70-progress-fill count-up in main.js.
   ============================================================================= */

/* ONE paint for the whole page — the hero and the content area are both
   transparent, so there is no seam to hide: the maroon glow is centred exactly
   ON the hero/content boundary (~100svh) and melts back to grey on both sides. */
.y70-home-v2 {
  /* lift the hero's view-timeline to body scope so the fixed progress line/fab
     (rendered in wp_footer, outside the hero) can still scroll-reveal off it */
  timeline-scope: --v2hero;
  background: var(--bg);   /* fallback for browsers without svh — plain grey, no broken paint */
  background:
    radial-gradient(1200px 720px at 0% 100svh, rgba(126, 0, 29, 0.18), rgba(126, 0, 29, 0.05) 46%, transparent 68%),
    radial-gradient(46vw 140svh at 100% 34svh, rgba(126, 0, 29, 0.10), transparent 72%),
    linear-gradient(172deg, #ffffff 0%, var(--bg) 58svh, var(--bg) 100%);
  overflow-x: clip;   /* belt & braces: decorated layers never cause sideways scroll */
}

/* ---- header : copied from v1 (body.home) — fixed & transparent so it overlaps
   the hero, the nav floats down ~70px, and on scroll the global .y70-scrolled
   rules (toggled by main.js on every page) turn it into the maroon pinned bar.
   home-v2.css loads after main.css, so the v2 scrolled-state overrides below are
   needed to out-rank the base transparent rule at equal specificity. ---------- */
.y70-home-v2 .y70-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  box-shadow: none;
  transition: transform 1.1s ease, background 1.1s ease, box-shadow 1.1s ease;
}
.y70-home-v2 .y70-nav {
  background: transparent;
  transform: translateY(clamp(40px, 7vh, 80px));
  transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}
.y70-home-v2 .kmutt-logo { filter: brightness(0); }

/* scrolled state (maroon pinned bar, white logo) */
.y70-home-v2.y70-scrolled .y70-header { transform: translateY(0); background: var(--primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.y70-home-v2.y70-scrolled .y70-nav { transform: translateY(0); }
.y70-home-v2.y70-scrolled .kmutt-logo { filter: brightness(0) invert(1); }

/* keep the fixed header clear of the WP admin bar */
body.admin-bar .y70-home-v2 .y70-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .y70-home-v2 .y70-header { top: 46px; } }

/* ---- hero shell : one screen tall, soft gradient + red glow (v2 pass-1) ---- */
.y70-v2-hero {
  --y70v2-hdr: 96px;                     /* header height; overridden inline */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: calc(100vh - var(--y70v2-hdr));    /* fallback when svh unsupported */
  max-height: calc(100vh - var(--y70v2-hdr));
  min-height: calc(100svh - var(--y70v2-hdr));
  max-height: calc(100svh - var(--y70v2-hdr));
  /* clip sideways only — the curve gear + corner gears are ALLOWED to sweep
     past the hero's bottom edge into the content area, stitching the junction
     (nothing gets cut on the boundary line any more) */
  overflow-x: clip;
  overflow-y: visible;
  /* no background of its own: the page-level paint on body.y70-home-v2 runs
     uninterrupted underneath both the hero and the content — zero seam */
  background: transparent;
}
/* colour divider on the LEFT shaped like a HUGE SOLID GEAR, its centre sitting
   exactly ON the bottom-left corner — the toothed rim is the divider, sweeping
   behind the "70" and off the screen edges, never over the right column.
   gear_hero.svg has a hollow centre, so a second mask layer (a solid circle)
   fills the hole → a completely SOLID gear. NOT faded. */
.y70-v2-curve {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  bottom: auto;
  width: min(150vh, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);   /* centre the gear ON the left-middle edge */
  pointer-events: none;
  background: linear-gradient(135deg, rgba(126, 0, 29, 0.30) 0%, rgba(167, 45, 51, 0.10) 78%);
  /* layer 2 plugs the svg's hollow centre. NOTE: must be an ellipse with explicit
     35%-of-box radii — a plain `circle` resolves % against the farthest CORNER,
     which made the plug smaller than the hole and left a ring-shaped gap. */
  -webkit-mask-image: url("../images/gear_hero.svg"), radial-gradient(ellipse 35% 35% at 50% 50%, #000 99.5%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-image: url("../images/gear_hero.svg"), radial-gradient(ellipse 35% 35% at 50% 50%, #000 99.5%, transparent 100%);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;         /* two layers union (mask-composite: add) = no hole */
}

/* background gears: one huge light SOLID gear centred at the bottom-right (right
   at the back), plus two faint ones — lightly blurred, all very slow.
   overflow:hidden clips the oversized gears so they never cause page overflow;
   a soft bottom mask fades only the GEARS into the section (text/curve untouched). */
.y70-v2-gearfield {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* sideways clip only — gears near the bottom continue PAST the junction into
     the content area instead of being sliced on the line (no fade mask either) */
  overflow-x: clip;
  overflow-y: visible;
  filter: blur(4px);
}
.y70-v2-gearfield .v2gear {
  position: absolute;
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
          mask: url("../images/gear_hero.svg") no-repeat center / contain;
  will-change: transform;
}
.v2gear--big { width: min(108vh, 86vw, 1100px); aspect-ratio: 1; right: -26%; bottom: -34%; background: rgba(126, 0, 29, 0.06); animation: y70-gear-spin 240s linear infinite; }
.v2gear--w1  { width: min(44vw, 540px); aspect-ratio: 1; left: -16vw; top: -14%;    background: var(--gear-color-1); animation: y70-gear-spin-rev 200s linear infinite; }
.v2gear--w2  { width: min(32vw, 400px); aspect-ratio: 1; left: 24%;   bottom: -22%; background: var(--gear-color-2); animation: y70-gear-spin 220s linear infinite; }

/* ---- LEFT : the animated "70" (logos cycle inside the gear "0") ----------- */
.y70-v2-hero__left {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;                 /* centre the "70" (not flush-left) */
  justify-content: center;
  padding: clamp(60px, 9vh, 110px) clamp(12px, 2vw, 40px) clamp(20px, 3vh, 40px);
}

/* the "70" lockup */
.y70-v2-lockup { position: relative; z-index: 4; display: flex; align-items: flex-end; }

.y70-v2-seven {
  position: relative;
  z-index: 0;
  font-family: var(--y70-font-base);
  font-weight: 800;
  font-size: min(64vh, 44vw, 700px);     /* a touch smaller (left side shrinks) */
  line-height: 0.62;
  letter-spacing: -0.06em;
  color: var(--primary);
  text-shadow: 0 22px 54px rgba(126, 0, 29, 0.22);
  -webkit-user-select: none;
          user-select: none;
}
.y70-v2-zero {
  --zero: min(34vh, 23vw, 360px);        /* clearly smaller than the 7 */
  position: relative;
  flex: 0 0 auto;
  width: var(--zero);
  height: var(--zero);
  margin-left: calc(var(--zero) * -0.06);
  margin-bottom: min(5vh, 7%);
}
/* thick toothed rim — spins; hollow centre so only the rim shows */
.y70-v2-zero-gear {
  position: absolute;
  inset: 2%;
  z-index: 0;
  background: var(--primary);
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
          mask: url("../images/gear_hero.svg") no-repeat center / contain;
  filter: drop-shadow(0 14px 30px rgba(126, 0, 29, 0.30));
  animation: y70-gear-spin 30s linear infinite;
  will-change: transform;
}
.y70-v2-zero-ring {
  position: absolute;
  inset: 21%;
  z-index: 1;
  border-radius: 999px;
  background: var(--bg);
}
/* thin inner ring (the "ขอบบาง") */
.y70-v2-zero-thin {
  position: absolute;
  inset: 30%;
  z-index: 2;
  border-radius: 999px;
  border: clamp(3px, 0.5vw, 7px) solid var(--primary);
}

/* small gears overlapping the rim of the "0" (mesh = spin the opposite way) */
.y70-v2-zero-sat {
  position: absolute;
  z-index: 3;
  background: var(--primary-600);
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
          mask: url("../images/gear_hero.svg") no-repeat center / contain;
  filter: drop-shadow(0 6px 14px rgba(126, 0, 29, 0.28));
  will-change: transform;
}
.y70-v2-zero-sat.s1 { width: 42%; height: 42%; top: -9%;   right: 0%; animation: y70-gear-spin-rev 30s linear infinite; }
.y70-v2-zero-sat.s2 { width: 32%; height: 32%; bottom: -7%; left: 2%; animation: y70-gear-spin-rev 26s linear infinite; }

/* department logos cycle one-at-a-time in the hollow centre of the "0" */
.y70-v2-zero-logos {
  position: absolute;
  inset: 31%;                 /* the white centre, inside the thin ring */
  z-index: 5;
  display: grid;
  place-items: center;
}
.y70-v2-zero-logo {
  position: absolute;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  /* cycle length = (logo count) × 4s; each logo holds ~4s. Tuned for 12 logos. */
  animation: y70-v2-logocycle 48s linear infinite;
  will-change: opacity, transform;
}
/* visible window ≈ 100/12 ≈ 8.33% of the cycle; slight overlap = soft crossfade */
@keyframes y70-v2-logocycle {
  0%    { opacity: 0; transform: translateY(22%) scale(0.94); }
  1%    { opacity: 1; transform: translateY(0) scale(1); }
  7.6%  { opacity: 1; transform: translateY(0) scale(1); }
  9.3%  { opacity: 0; transform: translateY(-22%) scale(0.94); }
  100%  { opacity: 0; }
}

.y70-v2-tagline {                      /* pinned to the bottom-left of the hero */
  position: absolute;
  left: clamp(18px, 3vw, 60px);
  bottom: clamp(14px, 2.6vh, 32px);
  z-index: 4;
  margin: 0;
  font-weight: 700;
  font-size: clamp(13px, 1.15vw, 19px);
  color: var(--muted);
}
.y70-v2-tagline strong { color: var(--primary); font-weight: 900; }

/* ---- RIGHT : the live donation total -------------------------------------- */
.y70-v2-hero__right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(20px, 4vh, 56px) clamp(24px, 4vw, 72px) clamp(20px, 4vh, 56px) clamp(14px, 2vw, 40px);
}
.y70-v2-total { width: 100%; max-width: 680px; text-align: left; padding: 0; }
/* body.home .y70-total-wrap (main.css) centres this block + its children now
   that v2 IS the front page — pin it back to the LEFT at every size */
body.y70-home-v2 .y70-total-wrap.y70-v2-total {
  margin-left: 0;
  margin-right: 0;
  align-items: flex-start;
}
.y70-v2-total .k {
  margin-bottom: 4px;
  font-size: clamp(17px, 1.45vw, 25px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: left;
}
.y70-v2-total .v {
  margin-inline: 0;
  text-align: left;
  /* Base size: 9.8vh on 16:9/16:10, 6vw on narrower aspects, HARD-CAPPED at 96px.
     The wrapper (.y70-v2-total) is capped at 720px with overflow:hidden by
     main.css `body.home .y70-total-wrap` (now in effect, since v2 is the front
     page). On a 2K/4K screen 9.8vh & 6vw both blow past the old 122px cap, making
     the amount ~720px = the wrapper edge → ".53" clipped. 96px keeps the full
     13-char number ~60px inside 720px even at its UNIFORM pre-count-up width
     (≈6.85em, before main.js shrinks the decimals to 0.5em → far narrower still).
     --num-fit (set by the inline script, measured against that 720px box) is the
     belt-and-braces for any zoom / OS-scaling edge case. */
  font-size: calc(min(9.8vh, 6vw, 96px) * var(--num-fit, 1));
  line-height: 0.98;
  overflow: visible;
  text-shadow: none;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary);
}
.y70-v2-total .v .y70-total-dec { color: var(--primary-600); -webkit-text-fill-color: var(--primary-600); }
.y70-v2-unit { margin-top: 3px; font-size: clamp(17px, 1.55vw, 27px); font-weight: 800; color: var(--muted); }

/* one-line breakdown: ครุภัณฑ์ (มูลค่า) | เงินสด (ทุกด้าน) — icons + thin divider */
.y70-v2-breakdown {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;                 /* falls to two lines only when space runs out */
  align-items: center;
  gap: 6px 14px;
  font-size: clamp(12px, 1.02vw, 16px);
  color: var(--muted);
}
.y70-v2-breakdown__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; }
.y70-v2-breakdown dt { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dark); }
.y70-v2-breakdown dt svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: var(--primary); }
.y70-v2-breakdown dt::after { content: ":"; }
.y70-v2-breakdown dd { margin: 0; font-weight: 600; }
.y70-v2-breakdown dd span { color: var(--primary); font-weight: 800; }
.y70-v2-breakdown__sep { width: 1.5px; height: 1.15em; border-radius: 1px; background: var(--border); }
.y70-v2-goal { margin: 10px 0 18px; font-size: clamp(14px, 1.15vw, 19px); font-weight: 700; color: var(--muted); }
.y70-v2-goal strong { color: var(--dark); font-weight: 900; }

.y70-v2-total .y70-progress-wrap { margin-bottom: 20px; }
.y70-v2-total .y70-progress-track { border-radius: 999px; height: 22px; background: linear-gradient(180deg, #fff, #eef1f6); border: 1px solid var(--border); }
.y70-v2-total .y70-progress-fill { border-radius: 999px; }
.y70-v2-total .y70-progress-label--target { right: 12px; font-size: 12px; }

.y70-v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.y70-v2-actions .y70-btn.primary { font-size: clamp(15px, 1.05vw, 19px); padding: 13px 30px; border-radius: 14px; }
.y70-v2-actions .y70-v2-secondary { font-weight: 800; color: var(--primary); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; }
.y70-v2-actions .y70-v2-secondary:hover { border-color: var(--primary); }
.y70-v2-total .y70-total-updated { margin-top: 16px; }

/* ---- below-hero : generous, modern spacing -------------------------------- */
#v2-after-hero {
  position: relative;
  z-index: 1;
  /* fully transparent base — the page paint on body runs straight through the
     hero→content junction (no per-area base colour = nothing to mismatch).
     Only the soft mid-page washes live here, drifting right → left → right. */
  background:
    radial-gradient(1000px 520px at 108% 16%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%),
    radial-gradient(1000px 560px at -10% 46%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%),
    radial-gradient(1000px 520px at 108% 80%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%);
  padding-top: clamp(80px, 13vh, 200px);         /* lots of breathing room after the hero */
  scroll-margin-top: clamp(70px, 10vh, 110px);   /* the scroll-arrow lands below the fixed header */
}

/* ---- shared home sections (history/news/results/souvenirs), v2 restyle ----
   The stock per-section corner gears get CLIPPED by each section's
   overflow:hidden, leaving chopped gear slices at every junction — so on v2
   they're removed entirely. Decorative gears are drawn once on the continuous
   canvas instead (.y70-v2-deco below), free to sit across section boundaries.
   Sections go transparent so the canvas shows through with no banding. */
.y70-home-v2 .y70-sec--tint,
.y70-home-v2 .y70-sec--alt { background: transparent; }
.y70-home-v2 .y70-sec::before,
.y70-home-v2 .y70-sec::after { display: none; }

/* canvas-level gears: big, faint, blurred, alternating right/left down the
   page — positioned in % of the WHOLE canvas, so junction lines pass straight
   through them (the thread that stitches the sections together) */
.y70-v2-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;            /* off-edge gears must not cause page overflow */
  pointer-events: none;
  filter: blur(3px);
}
.y70-v2-deco__gear {
  position: absolute;
  aspect-ratio: 1;
  background: var(--primary);
  opacity: 0.05;
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
          mask: url("../images/gear_hero.svg") no-repeat center / contain;
  will-change: transform;
}
.y70-v2-deco__gear.g1 { width: min(34vw, 460px); right: -12%; top: 12%; }
.y70-v2-deco__gear.g2 { width: min(30vw, 410px); left:  -11%; top: 37%; }
.y70-v2-deco__gear.g3 { width: min(36vw, 480px); right: -13%; top: 60%; }
.y70-v2-deco__gear.g4 { width: min(28vw, 380px); left:  -10%; top: 84%; }
/* keep real content above the deco layer */
.y70-home-v2 #v2-after-hero > .y70-container,
.y70-home-v2 #v2-after-hero > .y70-sec { position: relative; z-index: 1; }
/* the 5 purpose cards sit on the maroon wash → lift the whole group onto a
   frosted WHITE rounded panel so it pops against the gradient */
.y70-home-v2 .y70-purpose-split {
  margin-bottom: clamp(30px, 5vh, 60px);
  padding: clamp(24px, 3.2vw, 48px);
  background: color-mix(in srgb, #ffffff 86%, transparent);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(126, 0, 29, 0.08), 0 2px 10px rgba(42, 44, 47, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.y70-home-v2 .y70-purpose-split__title { font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.01em; }
.y70-home-v2 .y70-purpose-split__sub { margin: 10px 0 clamp(22px, 3.2vh, 38px); }
.y70-home-v2 .y70-purpose-grid { gap: clamp(12px, 1.4vw, 22px); }

/* cards pop harder against the panel… */
.y70-home-v2 .y70-purpose-card {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--primary) 16%, #ffffff);
  box-shadow: 0 14px 30px rgba(126, 0, 29, 0.10), 0 2px 8px rgba(42, 44, 47, 0.06);
}
.y70-home-v2 .y70-purpose-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(126, 0, 29, 0.16), 0 4px 12px rgba(42, 44, 47, 0.08);
}
/* …and each one springs in on its own beat (the stock reveal is a faint 35ms
   shuffle — v2 gives every card a clearly sequential pop via its --i index).
   fill: backwards (not forwards) so the finished animation releases transform
   back to normal styles and the hover lift keeps working. */
.y70-home-v2 .y70-purpose-split.is-visible .y70-purpose-card {
  opacity: 1;
  transform: none;
  animation: y70-v2-card-pop 0.65s cubic-bezier(0.34, 1.45, 0.45, 1) backwards;
  animation-delay: calc(var(--i, 1) * 110ms);
}
@keyframes y70-v2-card-pop {
  from { opacity: 0; transform: translateY(34px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
  to   { opacity: 1; transform: none; }
}
.y70-home-v2 .y70-deptboard-head { margin-top: clamp(30px, 5vh, 60px); }
/* last-updated + refresh for the dept board: a small CENTRED pill sitting just
   below the heading, above the chart. Reuses the hero's .y70-total-updated look.
   display:flex + fit-content lets margin:auto centre the pill (an inline-flex
   pill ignores auto margins). */
.y70-deptboard-meta {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4px auto 0;
  font-size: 12px;
}
.y70-deptboard-meta time { font-weight: 800; color: var(--dark); }
.y70-deptboard-meta .y70-total-refresh { width: 30px; height: 30px; }
.y70-home-v2 #v2-after-hero > .y70-container > .y70-card { margin-top: clamp(18px, 2.5vh, 32px); }

/* ---- scroll-down cue (circle + chevron) ----------------------------------- */
.y70-home-v2 .y70-scroll-down {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.4vh, 26px);
  transform: translateX(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid var(--primary);
  box-shadow: 0 8px 20px rgba(12, 18, 28, 0.12);
  text-decoration: none;
  animation: y70-v2-bob 1.8s ease-in-out infinite;
}
.y70-home-v2 .y70-scroll-down svg { display: block; }
.y70-home-v2 .y70-scroll-down:hover { background: #ffffff; }
@keyframes y70-v2-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* ---- progress line + status box: styles now live SITE-WIDE in
   assets/css/progress-line.css (white track; markup via wp_footer).
   Here we only keep the v2-page extras: the scroll-driven reveal (below in the
   @supports block) and the main padding override. ---- */
body.y70-home-v2 main { padding-bottom: 0; }   /* body.home reserved space for the old dock */

/* ---- responsive : phone = full-screen, "70" on top, total below ----------- */
@media (max-width: 960px) {
  /* one full screen, content centred, oversized gears clipped (no overflow) */
  .y70-v2-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;     /* fallback when svh unsupported */
    min-height: 100svh;
    max-height: none;
    overflow-x: clip;
    overflow-y: visible;                   /* gears cross the junction on phones too */
    padding-top: clamp(50px, 8vh, 84px);   /* clear the fixed header */
  }
  .y70-v2-curve { display: none; }
  .y70-v2-tagline { display: none; }     /* tagline stays off on phones */

  /* only 1–2 background gears, but REALLY big (clipped to the screen) */
  .v2gear--w2 { display: none; }
  .v2gear--big { width: min(150vw, 780px); right: -40%; bottom: -22%; }
  .v2gear--w1 { width: min(92vw, 470px); left: -36vw; top: -6%; }

  /* the 7 + gear "0" on top */
  .y70-v2-hero__left {
    order: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: clamp(6px, 1.5vh, 16px) 16px clamp(6px, 1.5vh, 14px);
  }
  .y70-v2-lockup { justify-content: center; }
  .y70-v2-seven { font-size: min(46vw, 340px); }
  .y70-v2-zero { --zero: min(30vw, 220px); margin-bottom: min(3vh, 4%); }

  /* the donation total below — LEFT-aligned, same as desktop */
  .y70-v2-hero__right {
    order: 2;
    justify-content: flex-start;
    text-align: left;
    padding: clamp(6px, 1.5vh, 16px) 22px clamp(20px, 4vh, 36px) clamp(20px, 5vw, 40px);
  }
  .y70-v2-total { margin: 0; text-align: left; }
  .y70-v2-total .k, .y70-v2-total .v, .y70-v2-unit, .y70-v2-goal { text-align: left; }
  .y70-v2-total .v { font-size: min(13.5vw, 82px); }
  .y70-v2-breakdown { justify-content: flex-start; }
  .y70-v2-breakdown__item { justify-content: flex-start; }
  .y70-v2-actions { justify-content: flex-start; }

  /* header fixed/transparent but the nav is NOT floated over the lockup.
     body-prefixed: must out-rank main.css's `body.home .y70-nav` now that the
     v2 page IS the front page (body carries both .home and .y70-home-v2). */
  body.y70-home-v2 .y70-nav { transform: none; }
  body.y70-home-v2.y70-scrolled .y70-nav { transform: none; }
  /* scroll-down arrow IS shown on phones now (this section is one full screen) */
}

/* =============================================================================
   Apple-style scroll-driven effects (CSS scroll-driven animations).
   Chrome/Edge 115+ only — older browsers skip the @supports block and simply
   see the normal static page.
   ============================================================================= */
@supports (animation-timeline: view()) {

  /* name the hero's progress (how far it has scrolled OUT of the viewport) */
  .y70-home-v2 .y70-v2-hero { view-timeline: --v2hero block; }

  /* as you scroll: the "70" zooms toward you and dissolves… */
  .y70-home-v2 .y70-v2-lockup {
    animation: y70-v2-hero-zoom linear both;
    animation-timeline: --v2hero;
    animation-range: exit 0% exit 85%;
  }
  /* …the donation panel drifts up and fades a beat earlier… */
  .y70-home-v2 .y70-v2-total {
    animation: y70-v2-hero-rise linear both;
    animation-timeline: --v2hero;
    animation-range: exit 0% exit 70%;
  }
  /* …the tagline slips away first… */
  .y70-home-v2 .y70-v2-tagline {
    animation: y70-v2-hero-fade linear both;
    animation-timeline: --v2hero;
    animation-range: exit 0% exit 45%;
  }
  /* …and the giant corner gear TURNS with the scroll (the machine engages) */
  .y70-home-v2 .y70-v2-curve {
    animation: y70-v2-gear-turn linear both;
    animation-timeline: --v2hero;
    animation-range: exit 0% exit 100%;
  }
  /* The "slip in once the hero exits" reveal for the progress line + status
     box — SKIPPED on iOS only (2026-08-10). Binding animation-timeline to a
     position:fixed element hit a WebKit bug on iOS Safari where the element
     stopped being fixed-to-viewport and instead rendered at a scrolled
     position mid-page, overlapping content. These two must stay reliably
     pinned to the viewport at all times (they show the live donation total),
     so correctness wins over the decorative fade-in there.
     -webkit-touch-callout is the standard feature-detect for "any browser on
     iOS" (Apple requires every iOS browser — Safari, Chrome, Firefox — to run
     on WebKit, so this catches all of them, not just Safari by name), without
     touching the animation anywhere it's demonstrated NOT to have this bug. */
  @supports not (-webkit-touch-callout: none) {
    .y70-home-v2 .y70-v2-progressline,
    .y70-home-v2 .y70-v2-fab {
      animation: y70-v2-fade-up linear both;
      animation-timeline: --v2hero;
      animation-range: exit 35% exit 80%;
    }
  }

  @keyframes y70-v2-hero-zoom {
    to { opacity: 0; transform: scale(1.22) translateY(-4%); filter: blur(3px); }
  }
  @keyframes y70-v2-hero-rise {
    to { opacity: 0; transform: translateY(-46px) scale(0.97); }
  }
  @keyframes y70-v2-hero-fade {
    to { opacity: 0; transform: translateY(10px); }
  }
  @keyframes y70-v2-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes y70-v2-gear-turn {
    /* keep the left-middle centring translate while adding the scroll rotation */
    to { transform: translate(-50%, -50%) rotate(14deg); }
  }

  /* below the hero: standalone blocks flip/zoom into place as they enter.
     ONLY the main container's children — never the .y70-sec sections (they get
     finer-grained reveals below) and never the .y70-v2-deco layer (a 3D flip on
     a page-tall layer projects wider than the viewport → sideways scrollbar) */
  .y70-home-v2 #v2-after-hero > .y70-container > * {
    animation: y70-v2-flip-in cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-timeline: view();
    animation-range: entry 8% entry 55%;
  }
  @keyframes y70-v2-flip-in {
    from { opacity: 0; transform: perspective(1100px) translateY(48px) rotateX(13deg) scale(0.95); }
    to   { opacity: 1; transform: perspective(1100px) translateY(0) rotateX(0deg) scale(1); }
  }

  /* shared sections: the header rises in first, the body flips in after it */
  .y70-home-v2 .y70-sec .y70-sec__head {
    animation: y70-v2-rise-in cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 45%;
  }
  .y70-home-v2 .y70-sec .y70-container > *:not(.y70-sec__head) {
    animation: y70-v2-flip-in cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-timeline: view();
    animation-range: entry 8% entry 50%;
  }

  /* canvas gears TURN as each crosses the screen — the same "machine engages"
     language as the hero's corner gear */
  .y70-home-v2 .y70-v2-deco__gear {
    animation: y70-v2-sec-gear linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .y70-home-v2 .y70-v2-deco__gear.g2,
  .y70-home-v2 .y70-v2-deco__gear.g4 { animation-name: y70-v2-sec-gear-rev; }

  @keyframes y70-v2-rise-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes y70-v2-sec-gear     { to { transform: rotate(55deg); } }
  @keyframes y70-v2-sec-gear-rev { to { transform: rotate(-55deg); } }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .y70-v2-gearfield .v2gear,
  .y70-v2-zero-gear,
  .y70-v2-zero-sat,
  .y70-v2-zero-logo,
  .y70-v2-curve,
  .y70-v2-lockup,
  .y70-v2-total,
  .y70-v2-tagline,
  .y70-v2-progressline,
  .y70-v2-fab,
  .y70-home-v2 #v2-after-hero .y70-container > *,
  .y70-home-v2 #v2-after-hero > *:not(.y70-container),
  .y70-home-v2 .y70-sec::before,
  .y70-home-v2 .y70-sec::after,
  .y70-home-v2 .y70-v2-deco__gear,
  .y70-home-v2 .y70-sec .y70-sec__head,
  .y70-home-v2 .y70-sec .y70-container > *,
  .y70-home-v2 .y70-purpose-split.is-visible .y70-purpose-card { animation: none !important; }
  /* no cycling — just show the first department logo, centred */
  .y70-v2-zero-logo { opacity: 0; transform: none; }
  .y70-v2-zero-logo:first-child { opacity: 1; }
}