/* So'rah case study — overview page */

/* ---------- hero: full film in a rounded panel ---------- */
.home-hero { min-height: calc(100svh - var(--gap)); margin-top: var(--gap); display: grid; align-items: end; padding: var(--s-6) var(--gutter) var(--s-6); background: var(--s-night); color: #fff; }
.home-hero__film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,30,4,.35) 0%, rgba(7,30,4,0) 30%, rgba(7,30,4,.05) 55%, rgba(7,30,4,.82) 100%); }
.home-hero__in { position: relative; max-width: 1100px; }
.home-hero__chips { margin-bottom: var(--s-4); }
.home-hero__title { margin: 0; line-height: 0; }
.home-hero__logo { display: inline-block; color: #fff; }
.home-hero__logo svg { height: clamp(80px, calc(196 * var(--fx)), 196px); width: auto; filter: drop-shadow(0 20px 50px rgba(0,0,0,.35)); }
.home-hero__logo b { font-size: var(--t-mega) !important; line-height: .9 !important; }
.home-hero__sub { margin-top: var(--s-4); font-size: var(--t-lead); color: rgba(255,255,255,.85); }
.home-hero__sub b { color: #fff; font-weight: 600; }
.home-hero__sound { position: absolute; right: var(--s-5); bottom: calc(var(--s-6) + 64px); padding: .7em 1.1em; border-radius: 999px; font: 600 var(--t-micro)/1 var(--font); background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: #fff; }
.home-hero__sound:hover { box-shadow: inset 0 0 0 1px #fff; }
.home-hero__cue { position: absolute; right: var(--s-5); bottom: var(--s-6); font: 600 var(--t-micro)/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); display: grid; justify-items: center; gap: .8em; }
.home-hero__cue::after { content: ""; width: 1.5px; height: 34px; background: linear-gradient(#fff, transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
/* the team, as Figma multiplayer cursors drifting over the film */
.home-hero__crew { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.home-hero__crew .ptr { position: absolute; left: 0; top: 0; will-change: transform; }
@media (max-width: 760px) { .home-hero__sound { top: calc(var(--bar-h) + 8px); bottom: auto; right: var(--s-3); } .home-hero__crew .ptr:nth-child(n+3) { display: none; } }

/* ---------- intro ---------- */
.home-intro { position: relative; padding-bottom: var(--s-6); }
.home-intro__text { max-width: 26ch; font-weight: 300; font-size: clamp(28px, calc(70 * var(--fx)), 70px); line-height: 1.12; letter-spacing: -.025em; }
.home-intro__text b { font-weight: 600; }
.home-intro__sticker { position: absolute; right: var(--gutter); top: 0; width: clamp(110px, calc(260 * var(--fx)), 260px); animation: spin 26s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 900px) { .home-intro__sticker { position: relative; right: auto; margin-top: var(--s-5); } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.2fr); gap: var(--gap); margin: 0; }
.facts__i { background: var(--s-paper); border-radius: var(--r-card); padding: var(--s-4); display: grid; align-content: space-between; gap: var(--s-4); min-height: clamp(130px, calc(210 * var(--fx)), 210px); }
.facts dt { font: 600 var(--t-micro)/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--s-grey); }
.facts dd { margin: 0; font: 600 var(--t-h4)/1.15 var(--font); letter-spacing: -.01em; }
.facts__i--team { background: var(--s-mint); }
.facts__i--team dd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); font-size: var(--t-body); }
.facts__i--team small { display: block; font: 500 var(--t-micro)/1.3 var(--font); color: #4f6a4f; }
@media (max-width: 1100px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts__i--team { grid-column: 1 / -1; } }

/* ---------- process: live gradient mesh (as on the published page) + the Figma bubble diagram ---------- */
.process { color: #fff; background: #57B860; padding-bottom: var(--s-7); }
.process__mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.process__mesh i { position: absolute; border-radius: 50%; filter: blur(clamp(60px, 8vw, 140px)); will-change: transform; }
.process__mesh i:nth-child(1) { width: 62%; aspect-ratio: 1; left: -14%; top: -18%; background: #1FA637; animation: drift-a 16s var(--ease-io) infinite alternate; }
.process__mesh i:nth-child(2) { width: 52%; aspect-ratio: 1; right: -12%; top: -12%; background: #4FE3F2; animation: drift-b 19s var(--ease-io) infinite alternate; }
.process__mesh i:nth-child(3) { width: 30%; aspect-ratio: 1; right: 12%; top: 22%; background: #F2508A; animation: drift-c 21s var(--ease-io) infinite alternate; }
.process__mesh i:nth-child(4) { width: 44%; aspect-ratio: 1; left: 22%; bottom: -16%; background: #F06A55; animation: drift-b 23s var(--ease-io) infinite alternate-reverse; }
.process__mesh i:nth-child(5) { width: 34%; aspect-ratio: 1; left: 30%; top: 4%; background: #F1E68C; animation: drift-a 25s var(--ease-io) infinite alternate-reverse; }
.process__mesh i:nth-child(6) { width: 40%; aspect-ratio: 1; right: -8%; bottom: -14%; background: #3CCB9C; animation: drift-c 20s var(--ease-io) infinite alternate; }
.process::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(7,30,4,.08); pointer-events: none; }
.process__head { text-shadow: 0 2px 30px rgba(7,30,4,.25); }
.process__head .t-h1 { max-width: 16ch; }
.process__head .t-h1 b { color: #fff; }
.process__lead { margin-top: var(--s-3); max-width: 42ch; color: rgba(255,255,255,.9); }

.pmap { position: relative; container-type: inline-size; aspect-ratio: 936 / 520; margin-top: var(--s-6); }
.pmap__line { position: absolute; left: 0; right: 0; top: 56%; height: 2px; background: rgba(255,255,255,.9); border-radius: 2px; transform-origin: 0 50%; }
.pmap__big { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 .32cqw rgba(255,255,255,.62), 0 3cqw 6cqw -3cqw rgba(7,30,4,.25); -webkit-backdrop-filter: blur(4px) saturate(1.15); backdrop-filter: blur(4px) saturate(1.15); transition: background .5s, transform .8s var(--ease); }
.pmap__big.is-hot { background: rgba(255,255,255,.24); }
.pmap__n { position: absolute; transform: translate(-50%, -50%); font: 600 2.6cqw/1 var(--font); color: #fff; }
.pmap__ph { position: absolute; transform: translate(-50%, -50%); font: 600 2.7cqw/1 var(--font); color: #fff; white-space: nowrap; letter-spacing: -.01em; }
.pmap__ph small { display: block; margin-top: .6em; font: 500 1.25cqw/1.2 var(--font); text-align: center; opacity: .85; }
/* sub-step bubbles: the Figma arcs sitting on the line; each one opens its chapter */
.pmap__sub { position: absolute; border-radius: 999px 999px 0 0; box-shadow: inset 0 .3cqw 0 0 rgba(255,255,255,.85), inset .3cqw 0 0 0 rgba(255,255,255,.55), inset -.3cqw 0 0 0 rgba(255,255,255,.55); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 1.2cqw; text-align: center; transition: background .35s, transform .5s var(--ease-back); transform-origin: 50% 100%; }
.pmap__sub span { display: block; font: 600 1.5cqw/1.38 var(--font); color: #fff; }
.pmap__sub:hover, .pmap__sub:focus-visible, .pmap__sub.is-hot { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)); transform: scale(1.06); }
.pmap__sub:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.pmap__sub .ptr { position: absolute; left: 60%; top: -1.6cqw; opacity: 0; transform: translate(-6px, 6px) scale(.8); transition: .35s var(--ease-back); }
.pmap__sub .ptr__label { font-size: 1.35cqw; }
.pmap__sub .ptr__arrow { width: 2cqw; }
.pmap__sub:hover .ptr, .pmap__sub:focus-visible .ptr { opacity: 1; transform: none; }
.js .pmap [data-pm] { opacity: 0; }
.pmap.is-in [data-pm] { opacity: 1; transition: opacity .8s var(--ease), transform .9s var(--ease-back); transition-delay: calc(var(--d, 0) * 1ms); }
.js .pmap .pmap__big { transform: scale(.7); }
.pmap.is-in .pmap__big { transform: none; }
.js .pmap .pmap__line { transform: scaleX(0); }
.pmap.is-in .pmap__line { transform: none; transition: transform 1.4s var(--ease); }

/* chapter cards under the diagram, grouped by phase */
.pcards { display: grid; grid-template-columns: 5fr 5fr 2.3fr; gap: var(--gap); margin-top: var(--s-6); }
.pcards__ph { display: grid; gap: var(--gap); align-content: start; }
.pcards__ph > p { white-space: nowrap; font: 600 var(--t-micro)/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); padding-left: .2em; }
.pcards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--gap); }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.9); color: var(--s-ink); box-shadow: 0 20px 40px -26px rgba(7,30,4,.6); transition: transform .5s var(--ease), box-shadow .5s, background .3s; }
.pcard:hover, .pcard.is-hot { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(7,30,4,.7); background: #fff; }
.pcard__img { aspect-ratio: 16 / 10; background: var(--s-sage) center/cover no-repeat; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.06); }
.pcard__t { padding: var(--s-2) var(--s-3) var(--s-3); display: grid; gap: .25em; }
.pcard__t small { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-green); }
.pcard__t b { font: 600 var(--t-body)/1.2 var(--font); letter-spacing: -.01em; }
.pcard__t span { font-size: var(--t-micro); color: var(--s-grey); line-height: 1.35; }
@media (max-width: 1100px) { .pcards { grid-template-columns: 1fr; } }

/* mobile: the bubble diagram becomes a list */
.pmap__list { display: none; }
@media (max-width: 700px) {
  .pmap { aspect-ratio: auto; container-type: normal; }
  .pmap > :not(.pmap__list) { display: none; }
  .pmap__list { display: grid; gap: var(--s-4); }
  .pmap__list section { background: rgba(255,255,255,.14); border-radius: var(--r-card); padding: var(--s-4); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
  .pmap__list h3 { font: 600 var(--t-h4)/1.2 var(--font); margin-bottom: var(--s-2); }
  .pmap__list a { display: inline-flex; margin: 4px 6px 0 0; padding: .5em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); font: 600 var(--t-micro)/1 var(--font); }
}

/* ---------- start ---------- */
.start { min-height: 70svh; display: grid; }
.start__link { position: relative; display: grid; align-content: center; gap: var(--s-4); padding: var(--s-8) var(--gutter); overflow: hidden; isolation: isolate; }
.start__link::before { content: ""; position: absolute; width: 70vw; aspect-ratio: 1; left: 50%; top: 110%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(141,219,29,.5), transparent); z-index: -1; transition: top 1s var(--ease); }
.start__link:hover::before { top: 85%; }
.start__title { font: 300 var(--t-display)/1 var(--font); letter-spacing: -.04em; max-width: 14ch; }
.start__title em { font-style: italic; font-weight: 700; color: var(--s-lime); }
.start__go { display: inline-flex; align-items: center; gap: .6em; font: 600 var(--t-h4)/1 var(--font); color: var(--s-lime-2); }
.start__go svg { width: 1em; transition: transform .45s var(--ease); }
.start__link:hover .start__go svg { transform: translateX(10px); }