/* Home page V2: paper world, stories track, app demo */

/* ---------- the paper world behind the hero ---------- */
.hero { isolation: isolate; background: linear-gradient(#cdeaf5, var(--sky) 55%); }
.hero-in { position: relative; z-index: 2; }
.world { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; left: 0; width: clamp(110px, 14vw, 200px); opacity: .95; filter: drop-shadow(0 5px 0 rgb(31 42 68 / .08)); animation: drift linear infinite; will-change: transform; }
.cloud.c1 { top: 9%; animation-duration: 70s; animation-delay: -12s; }
.cloud.c2 { top: 24%; width: clamp(80px, 9vw, 130px); animation-duration: 95s; animation-delay: -60s; opacity: .8; }
.cloud.c3 { top: 4%; width: clamp(70px, 8vw, 110px); animation-duration: 120s; animation-delay: -30s; opacity: .7; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
.birds { position: absolute; top: 15%; left: 0; width: 110px; animation: fly 48s linear infinite; animation-delay: -8s; }
@keyframes fly { from { transform: translate(-20vw, 0); } 50% { transform: translate(55vw, -30px); } to { transform: translate(130vw, 10px); } }
.wing { transform-box: fill-box; transform-origin: center; animation: flap .5s ease-in-out infinite alternate; }
.wing.w2 { animation-delay: -.2s; } .wing.w3 { animation-delay: -.35s; }
@keyframes flap { to { transform: scaleY(.45); } }
.hill { position: absolute; left: -2%; width: 104%; bottom: 0; will-change: transform; }
.hill.h1 { height: 26%; bottom: 6%; }
.hill.h2 { height: 20%; bottom: 2%; }
.hill.h3 { height: 13%; bottom: -1px; }
@media (max-width: 859px) { .hill.h1 { height: 16%; } .hill.h2 { height: 12%; } .hill.h3 { height: 7%; } }

/* word-by-word title */
.hero-title .wd { display: inline-block; }

/* ---------- stories: horizontal track ---------- */
.stories { position: relative; overflow: clip; }
.stories-pin { min-height: 100svh; display: grid; align-content: center; gap: 10px; padding-block: clamp(56px, 9vh, 96px) 40px; }
.stories-head h2 { font-size: clamp(1.8rem, 4.8vw, 2.8rem); }
.stories-track { display: flex; gap: 0; width: max-content; will-change: transform; }
.story {
  width: 100vw; flex: none; display: grid; align-items: center; gap: 24px 48px; padding: 18px max(var(--gut), calc((100vw - 1120px) / 2));
}
@media (min-width: 860px) { .story { grid-template-columns: 1fr 1.1fr; } }
.story-txt { max-width: 30rem; }
.story .kicker { font-weight: 800; color: var(--c); filter: brightness(.8); }
.story h3 { font-size: clamp(1.9rem, 5.4vw, 3.4rem); margin-top: 6px; }
.story p.sum { margin-top: 14px; font-size: 1.12rem; color: var(--ink-2); }
.story .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.story .meta span { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--ink); font-weight: 800; font-size: .9rem; padding: 6px 12px; border-radius: 99px; }
.story .btn { margin-top: 22px; }
.fan { position: relative; width: min(78vw, 440px); aspect-ratio: 1; justify-self: center; perspective: 1200px; }
.fan::before { content: ""; position: absolute; inset: 8% 4% -4%; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, transparent); filter: blur(0); transform: scale(1.08); }
.fan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px 10px 10px 6px; box-shadow: var(--cut-lg); transform-origin: 50% 110%; }
.fan .f3 { z-index: 3; }
.fan .f2 { z-index: 2; transform: rotate(-9deg) translateX(-14%); }
.fan .f1 { z-index: 1; transform: rotate(9deg) translateX(14%); }
@media (max-width: 859px) { .stories-pin { align-content: start; } .fan { width: min(64vw, 300px); } .story { padding-top: 6px; } .story p.sum { font-size: 1rem; } }
.stories.no-pin .stories-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
.stories.no-pin .story { scroll-snap-align: start; }

/* ---------- platform: phone + steps ---------- */
.platform { background: var(--sky); }
.plat-grid { display: grid; gap: 28px; margin-top: 36px; }
.plat-phone-col { position: sticky; top: 76px; z-index: 2; display: grid; justify-items: center; padding-block: 8px; background: linear-gradient(var(--sky) 88%, transparent); }
.phone { position: relative; width: min(46vw, 230px, calc((100svh - 140px) * .46 * .5)); min-width: 150px; aspect-ratio: 375 / 812; border-radius: 34px; background: var(--ink); padding: 9px; box-shadow: var(--cut-lg); }
.phone::before { content: ""; position: absolute; z-index: 3; top: 15px; left: 50%; width: 30%; height: 16px; margin-left: -15%; background: var(--ink); border-radius: 0 0 12px 12px; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: var(--sky); }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .45s ease, transform .6s var(--ease-paper); }
.phone-screen img.on { opacity: 1; transform: scale(1); }
.plat-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.plat-steps li { min-height: 44svh; display: grid; align-content: center; gap: 8px; padding: 18px 0; opacity: .35; transition: opacity .35s ease, transform .45s var(--ease-paper); transform: translateX(-6px); counter-increment: s; }
.plat-steps li::before { content: counter(s); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--paper); font: 650 1.3rem/1 var(--display); box-shadow: var(--cut); }
.plat-steps li.on { opacity: 1; transform: none; }
.plat-steps li.on::before { background: var(--sun); }
.plat-steps h3 { font-size: clamp(1.4rem, 4vw, 2rem); }
.plat-steps p { color: var(--ink-2); font-size: 1.1rem; max-width: 30rem; }
.plat-steps .btn { justify-self: start; margin-top: 12px; }
@media (max-width: 859px) {
  .phone { width: min(40vw, 190px); }
  .plat-steps li { min-height: 52svh; }
}
@media (min-width: 860px) {
  .plat-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; }
  .plat-phone-col { top: 12vh; align-self: start; height: 76vh; align-content: center; background: none; }
  .phone { width: min(300px, calc(76vh * .46)); }
  .plat-steps li { min-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .birds, .wing { animation: none; }
  .cloud.c1 { transform: translateX(8vw); } .cloud.c2 { transform: translateX(60vw); } .cloud.c3 { transform: translateX(80vw); }
  .birds { display: none; }
  .plat-steps li { opacity: 1; transform: none; }
}

/* fixes */
.stories-pin { grid-template-columns: minmax(0, 1fr); }
.stories-track { justify-self: start; }
.story { min-width: 0; }
.story-txt { min-width: 0; }
@media (min-width: 860px) { .story { gap: 24px 72px; } }
.birds { top: 5%; }
@media (max-width: 859px) { .birds { display: none; } .plat-phone-col { background: var(--sky); box-shadow: 0 10px 12px -10px rgb(31 42 68 / .25); } }
@media (min-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .story h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
  .fan { justify-self: end; margin-right: 6%; width: min(36vw, 420px); }
}
.fan::before { transform: none; }