/* Roots home: the scroll story. Everything scroll-driven lives under html.motion (JS on AND no reduced-motion
   preference). Without it (no JS, or prefers-reduced-motion) the same markup is a calm static page: every ring
   drawn, every stage listed, the guide shown open.
   Only transform, clip-path, opacity and stroke-dashoffset change while scrolling (compositor friendly). */

.home .top-float { position: absolute; left: 0; right: 0; top: 0; z-index: 6; }

/* ---------- shared: masked reveals (never plain fades) ---------- */
.motion .mask-up { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); }
.motion .mask-up.in { clip-path: inset(0 0 -10% 0); transform: none; }
.motion .wipe { clip-path: inset(0 100% 0 0 round 28px); transition: clip-path 1.5s var(--ease); }
.motion .wipe.in { clip-path: inset(0 0 0 0 round 28px); }
.motion .wipe > * { transform: translateX(-18px); transition: transform 1.5s var(--ease); }
.motion .wipe.in > * { transform: none; }
.motion .found .wipe:nth-child(2) { transition-delay: .12s; }
.motion .found .wipe:nth-child(3) { transition-delay: .24s; }
.motion .found .wipe:nth-child(4) { transition-delay: .36s; }
.motion .found .wipe:nth-child(2) > * { transition-delay: .12s; }
.motion .found .wipe:nth-child(3) > * { transition-delay: .24s; }
.motion .found .wipe:nth-child(4) > * { transition-delay: .36s; }
.motion .ic.draw { stroke-dasharray: 170; stroke-dashoffset: 170; transition: stroke-dashoffset 2.2s var(--ease) .45s; }
.motion .in .ic.draw, .motion .ic.draw.in { stroke-dashoffset: 0; }
.found .share { display: flex; align-items: center; gap: 10px; }
.found .share i { display: block; height: 3px; width: 34px; border-radius: 3px; background: var(--sienna); }
.motion .found .share i { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) 1s; }
.motion .found .in .share i { transform: none; }
/* rings the scroll draws itself: no class-triggered draw animation on them */
.rings.scrubbed path[pathLength] { animation: none !important; }

/* ---------- scenes (sticky) ---------- */
.scene { position: relative; padding: 0; }
.stick { position: relative; }
.motion .scene .stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.motion .scene-hero { height: 190vh; }
.motion .scene-story { height: 600vh; }
.motion .scene-guide { height: 230vh; }

/* ---------- 1. hero ---------- */
.scene-hero .stick { padding: 96px 0 40px; }
.hero-in { display: grid; gap: 14px; align-items: center; width: 100%; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.scene-hero .hero-art { order: -1; width: min(52vw, 230px); margin: 0 auto 4px; }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: 1.25fr .75fr; gap: 36px; }
  .hero-copy h1 { font-size: clamp(3.4rem, 5.6vw, 4.8rem); }
  .scene-hero .hero-art { order: 0; width: 100%; max-width: 470px; margin: 0 0 0 auto; }
}
.motion .scene-hero .hero-art { transform: scale(calc(.9 + var(--p, 0) * .16)) rotate(calc(var(--p, 0) * -8deg)); will-change: transform; }
.motion .scene-hero .hero-copy { transform: translateY(calc(var(--p, 0) * -36px)); }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: .85rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.scroll-hint span { width: 18px; height: 28px; border: 2px solid var(--ink-soft); border-radius: 10px; position: relative; }
.scroll-hint span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--sienna); animation: hint 2.6s var(--ease) infinite; }
@keyframes hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }
.scroll-hint { display: none; }
.motion .scroll-hint { display: flex; opacity: calc(1 - var(--p, 0) * 5); }
@media (max-height: 700px) and (max-width: 899px) { .motion .scroll-hint { display: none; } }

/* ---------- 2. the six years ---------- */
.scene-story { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%); }
.story-in { display: grid; gap: 18px; align-items: center; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.story-art { position: relative; width: min(100%, 520px); margin: 0 auto; }
.story-count { margin: 6px 0 0; text-align: center; font-weight: 600; color: var(--ink-soft); font-size: .95rem; }
.story-count b { font-weight: 900; color: var(--ink); font-size: 1.25rem; }
.story-h { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 22px; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.stages li { padding-left: 18px; border-left: 2px solid var(--porcelain); }
.stages li.now { border-left-color: var(--sienna); }
.st-n { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.stages .now .st-n { color: var(--sienna); }
.stages h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: 8px; }
.stages p { margin: 0; color: var(--ink); max-width: 34ch; font-size: 1.08rem; }
.story-belief { margin: 30px 0 0; font-weight: 700; font-size: 1.1rem; color: var(--ink-soft); }
.motion .story-in { padding-top: 64px; padding-bottom: 20px; }
.motion .story-art { width: min(78vw, 46svh, 520px); }
.motion .stages { display: block; position: relative; height: 12.5em; }
.motion .stages li { position: absolute; inset: 0 0 auto 0; border-left: 0; padding-left: 0;
  clip-path: inset(0 0 100% 0); transform: translateY(28px); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.motion .stages li.on { clip-path: inset(-4px 0 -12px 0); transform: none; transition-delay: .18s; }
.motion .stages li.past { clip-path: inset(0 0 100% 0); transform: translateY(-22px); transition-duration: .7s; }
.motion .story-belief { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease); }
.motion .scene-story.done .story-belief { clip-path: inset(0); }
.motion .story-h { margin-bottom: 18px; }
@media (min-width: 900px) {
  .story-in { grid-template-columns: 1fr 1fr; gap: 64px; }
  .motion .story-art { width: min(100%, 72svh, 540px); }
  .motion .stages { height: 11em; }
}
@media (max-width: 899px) {
  .motion .story-copy { text-align: left; }
  .motion .story-h { font-size: 1.45rem; margin-bottom: 12px; }
  .motion .stages { height: 10.5em; }
  .motion .stages p { font-size: 1rem; }
  .motion .story-belief { margin-top: 8px; font-size: 1rem; }
  .motion .story-count { margin-top: 0; }
}

/* ---------- 4. how your body works ---------- */
.films { display: grid; gap: 34px; }
@media (min-width: 900px) { .films { grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; } .film-b { margin-top: 120px; } }
.film { margin: 0; }
.frame { border-radius: 26px; overflow: hidden; background: #EDE7E0; box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion .frame { clip-path: inset(14% 10% 14% 10% round 26px); transition: clip-path 1.6s var(--ease); }
.motion .frame video { transform: scale(1.14); transition: transform 2.2s var(--ease); }
.motion .film.in .frame { clip-path: inset(0 0 0 0 round 26px); }
.motion .film.in .frame video { transform: none; }
.film figcaption { padding: 16px 4px 0; display: grid; gap: 4px; }
.film figcaption b { font-weight: 800; font-size: 1.12rem; }
.film figcaption span { color: var(--ink-soft); font-size: .96rem; }
.credit { margin: 26px 0 0; font-size: .8rem; color: var(--ink-soft); }

/* ---------- 5. rings section: drawn by the scroll ---------- */
.days .days-art { max-width: 460px; }

/* ---------- 6. the guide: tilting cover, pages fan out ---------- */
.guide-in { display: grid; gap: 30px; align-items: center; width: 100%; padding-top: 40px; padding-bottom: 40px; }
.guide-copy h2 { margin-bottom: 14px; }
.guide-copy p { max-width: 38ch; }
.guide-copy .btn { margin-top: 8px; }
.book { --w: min(46vw, 210px); --fan: .55; perspective: 1500px; width: var(--w); aspect-ratio: 580 / 820; margin: 0 auto; position: relative; }
.book-tilt { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(8deg) rotateZ(-2deg); }
.pg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px 10px 10px 6px; background: #fff;
  box-shadow: 0 2px 0 rgba(59,50,54,.05), 0 30px 50px -28px rgba(59,50,54,.45); backface-visibility: hidden; }
.pg.cover { box-shadow: inset 6px 0 10px -6px rgba(59,50,54,.25), 0 34px 60px -26px rgba(59,50,54,.5); }
/* static (no motion): the open fan */
.pg1 { transform: translateX(calc(var(--w) * .30 * var(--fan) * 1.8)) rotate(5deg); }
.pg2 { transform: translateX(calc(var(--w) * .58 * var(--fan) * 1.8)) rotate(10deg); }
.pg3 { transform: translateX(calc(var(--w) * .84 * var(--fan) * 1.8)) rotate(15deg); }
.motion .book-tilt { transform: rotateY(calc(-30deg + var(--p, 0) * 22deg)) rotateX(calc(12deg - var(--p, 0) * 6deg)) rotateZ(calc(-4deg + var(--p, 0) * 3deg)) translateX(calc(var(--p, 0) * var(--w) * -.25)); will-change: transform; }
.motion .pg1 { transform: translateZ(-6px) translateX(calc(var(--w) * .30 * var(--fan) * 1.8 * var(--q, 0))) rotate(calc(5deg * var(--q, 0))); }
.motion .pg2 { transform: translateZ(-12px) translateX(calc(var(--w) * .58 * var(--fan) * 1.8 * var(--q, 0))) rotate(calc(10deg * var(--q, 0))); }
.motion .pg3 { transform: translateZ(-18px) translateX(calc(var(--w) * .84 * var(--fan) * 1.8 * var(--q, 0))) rotate(calc(15deg * var(--q, 0))); }
.motion .pg.cover { transform: translateZ(4px); }
@media (min-width: 900px) {
  .guide-in { grid-template-columns: .9fr 1.1fr; gap: 40px; }
  .book { --w: 300px; --fan: .7; margin: 0 auto 0 40px; }
}
@media (max-width: 899px) {
  .scene-guide .guide-in { gap: 26px; }
  .scene-guide .book { order: -1; margin-left: calc(50% - var(--w) * .85); }
}

/* ---------- static fallbacks ---------- */
html:not(.motion) .scene .stick { padding: 56px 0; }
html:not(.motion) .scene-hero .stick { padding-top: 96px; }
.motion .rings .disc { transform-box: fill-box; transform-origin: center; }

/* /free: the guide shown open (no scroll scene) */
.book.open { --q: 1; }
.motion .book.open .book-tilt { transform: rotateY(-16deg) rotateX(7deg) rotateZ(-2deg); animation: book-in 1.8s var(--ease) both; }
@keyframes book-in { from { transform: rotateY(-40deg) rotateX(14deg) rotateZ(-6deg) translateY(30px); opacity: 0; } }
.free-book { padding: 30px 0 40px; }
.free-book .book { --w: min(40vw, 170px); margin: 0 auto 0 12%; }
@media (min-width: 900px) { .free-book .book { --w: 260px; --fan: .6; margin: 0 auto 0 30px; } }
@media (prefers-reduced-motion: reduce) { .motion .book.open .book-tilt { animation: none; } }
.free-book { overflow: visible; }
@media (max-width: 899px) { .hero-art.free-book { width: 100%; margin: 0 0 6px; } .free-book .book { --w: 150px; --fan: .42; margin: 0 0 0 calc(50% - 130px); } }
@media (min-width: 900px) { .free-book .book { --w: 250px; --fan: .42; margin: 0 0 0 10px; } }
html:not(.motion) .story-count { display: none; }