/* Motion direction: see audit/landing-motion-study-2026-10-25.json.
   Native sticky scenes; no wheel interception, scroll library or loading gate. */
:root { --scene-ease:cubic-bezier(.16,1,.3,1); }
.motion-word { display:inline-block; transform-origin:50% 100%; }
.hero-stage { position:relative; }
.site-header { transition:width .85s var(--scene-ease),top .85s var(--scene-ease),border-radius .85s var(--scene-ease),background .5s,box-shadow .5s; }
.header-inner { transition:min-height .85s var(--scene-ease),padding .85s var(--scene-ease),gap .85s var(--scene-ease); }
.site-header .site-brand img { transition:width .85s var(--scene-ease),height .85s var(--scene-ease); }
.site-header .site-brand span { max-width:145px; opacity:1; overflow:hidden; transition:max-width .85s var(--scene-ease),opacity .35s; }
.site-header.is-scrolled { width:min(1000px,calc(100% - 64px)); border-radius:60px; background:#0b0918f2; }
.site-header.is-scrolled .header-inner { min-height:64px; padding:8px 18px; gap:22px; }
.site-header.is-scrolled .site-brand { gap:0; }
.site-header.is-scrolled .site-brand img { width:38px; height:38px; }
.site-header.is-scrolled .site-brand span { max-width:0; opacity:0; }
.site-header.is-scrolled .button-header { padding-block:11px; border-radius:40px; }
.site-header.is-scrolled .af-admin-launch { border-radius:30px; }
.hero { background:#070711; }
.hero-art { transform:translate3d(0,var(--hero-drift,0px),0) scale(var(--hero-scale,1.025)); }
.hero::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background:#070711; opacity:var(--hero-dim,0); }
.hero-bottom { z-index:4; }
.possibilities { padding:0; position:relative; z-index:5; }
.possibilities::before { display:none; }
.catalog-intro { position:relative; overflow:clip; padding:100px 0 50px; background:#f1edf6; color:#241934; border-radius:38px 38px 0 0; box-shadow:0 -20px 80px #0003; --muted:#62566d; --violet:#8251b1; }
.catalog-intro::before { content:''; pointer-events:none; position:absolute; inset:0; background:radial-gradient(ellipse at 73% 85%,#d2b7ec80,transparent 60%); }
.catalog-intro>.container { position:relative; }
.catalog-intro .eyebrow { color:#75548d; }
.catalog-intro .section-heading { gap:50px; }
.identity-preview { position:relative; height:320px; max-width:1120px; margin:15px auto 0; isolation:isolate; }
.identity-connections { position:absolute; width:100%; height:100%; inset:0; stroke:#b9a4cc; stroke-width:1; }
.identity-connections .signal-flow { stroke:#8a54c3; stroke-width:2; stroke-dasharray:14 600; stroke-dashoffset:600; animation:signal-travel 5s linear infinite; }
.identity-origin { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; gap:12px; width:122px; height:122px; background:linear-gradient(140deg,#fff,#e7d9f7); border:1px solid #cbb3e2; border-radius:32px; box-shadow:0 10px 45px #69478c24,inset 0 0 0 7px #ffffff50; }
.identity-origin span { font-size:8px; letter-spacing:1.8px; }
.identity-fragment { position:absolute; width:260px; padding:24px; border:1px solid #bba6ce65; border-radius:18px; background:#ffffffb8; box-shadow:0 16px 35px #54307812; }
.identity-fragment>span { font-size:8px; letter-spacing:1.7px; color:#7d6491; display:block; }
.identity-fragment b { display:block; font-size:21px; letter-spacing:-.6px; line-height:1.12; font-weight:460; margin:18px 0 12px; }
.identity-fragment em { font-size:1.3em; }
.identity-fragment small { font-size:10px; color:#7d7086; }
.fragment-passport { left:4%; top:0; rotate:-5deg; }
.fragment-dossier { left:11%; bottom:0; rotate:4deg; }
.fragment-comic { right:1%; top:25%; width:300px; height:190px; rotate:4deg; overflow:hidden; }
.fragment-comic>b,.fragment-comic>small,.fragment-comic>span { position:relative; z-index:1; }
.fragment-comic b { max-width:135px; }
.fragment-comic img { position:absolute; width:180px; height:180px; right:-20px; bottom:-38px; object-fit:contain; mask-image:linear-gradient(#000 75%,transparent); }
.catalog-body { position:relative; padding:44px 0 90px; background:radial-gradient(ellipse at 90% 20%,#23123466,transparent 40%),#090812; border-radius:34px 34px 0 0; margin-top:-24px; }
.catalog-body .story-filters { margin-top:0; }
.story-card { background:linear-gradient(145deg,#21162e,#100d1b 65%); }
.story-grid { align-items:stretch; }
.story-art { transform-origin:center; }
.story-copy { position:relative; }
.story-copy>h4,.story-copy>p,.story-copy>.story-action { position:relative; }
.story-card[data-in-view=false] *, .identity-preview:not([data-in-view=true]) * { animation-play-state:paused!important; }
.story-groups { overflow-anchor:none; }
.story-filters button::before { content:''; position:absolute; bottom:3px; left:25%; width:50%; height:1px; background:#dab4ff; transform:scaleX(0); transition:transform .55s var(--scene-ease); }
.story-filters button[aria-pressed=true]::before { transform:scaleX(1); }
.journey-section { position:relative; padding:0; background:#070711; overflow:visible; z-index:2; }
.journey-sticky { position:relative; overflow:clip; min-height:900px; height:100svh; isolation:isolate; background:radial-gradient(ellipse at 50% 54%,#2a164440,transparent 60%),#070711; }
.journey-sticky::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,#c8a4ff 1px,transparent 1px),radial-gradient(circle,#f4d4aa 1px,transparent 1px); background-size:157px 167px,229px 213px; background-position:30px 130px,94px 40px; opacity:.16; }
.journey-heading { position:relative; z-index:2; text-align:center; padding-top:115px; }
.journey-heading .eyebrow { justify-content:center; }
.journey-heading h2 { margin-top:26px; font-size:clamp(48px,4.7vw,72px); font-weight:380; line-height:1.02; letter-spacing:-2.6px; }
.journey-heading h2 em { font-size:1.16em; }
.journey-heading>p:last-child { font-size:14px; color:#b9accb; margin:22px 0 0; }
.personal-universe { position:absolute; width:min(1000px,90vw); height:620px; left:50%; top:50%; transform:translate(-50%,-44%); z-index:1; }
#personal-universe-canvas { width:100%; height:100%; position:absolute; inset:0; opacity:0; }
.personal-universe[data-rendered=true] #personal-universe-canvas { opacity:1; }
.personal-universe[data-rendered=true] .sphere-fallback { opacity:0; }
.sphere-fallback { position:absolute; width:390px; height:390px; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:inset 10px -20px 50px #05040a, inset -3px 2px 15px #d6abff,0 0 70px #8d48df55; background:radial-gradient(circle at 65% 30%,#9469bc,#3d235b 40%,#0d091b 70%); }
.sphere-fallback i { position:absolute; inset:35% -25%; border:1px solid #ab85d890; border-radius:50%; rotate:-25deg; }
.sphere-fallback i:nth-child(2) { rotate:30deg; }
.sphere-fallback i:nth-child(3) { inset:-10% 30%; }
.sphere-fallback span { position:absolute; top:20%; right:3%; font-size:40px; color:#fff1dd; text-shadow:0 0 22px #ffad77; }
.universe-caption { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:9px; letter-spacing:3px; color:#f4e4ff; white-space:nowrap; text-shadow:0 2px 10px #120721; }
.universe-label { position:absolute; z-index:2; color:#d6c3ea; font-size:10px; padding:9px 12px; border-radius:30px; background:#0e0b19d9; border:1px solid #9d77c133; white-space:nowrap; opacity:.75; }
.universe-label::before { content:''; display:inline-block; width:4px; height:4px; background:#d3aaff; border-radius:50%; margin-right:7px; box-shadow:0 0 10px #d3aaff; }
.label-1 { left:10%; top:35%; }.label-2 { right:9%; top:31%; }.label-3 { left:3%; top:52%; }
.label-4 { right:3%; top:50%; }.label-5 { left:15%; top:69%; }.label-6 { right:14%; top:68%; }
.label-7 { left:32%; top:80%; }.label-8 { right:27%; top:19%; }.label-9 { right:21%; top:82%; }
.journey-chapters { position:absolute; left:0; right:0; bottom:58px; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; list-style:none; }
.journey-chapters li { border-top:1px solid #a18ab23b; padding-top:21px; position:relative; }
.journey-chapters li::before { content:''; position:absolute; top:-1px; left:0; height:2px; width:100%; background:#d0a7ff; transform-origin:left; transform:scaleX(var(--chapter-fill,0)); box-shadow:0 0 14px #b46fff80; }
.journey-chapters .step-number { font-size:10px; letter-spacing:2px; color:#b9a3ce; margin-bottom:12px; display:block; border:0; padding:0; }
.journey-chapters .step-number::after { display:none; }
.journey-chapters h3 { font-size:20px; letter-spacing:-.5px; font-weight:460; margin-bottom:12px; }
.journey-chapters p { color:#ae9dbe; font-size:13px; line-height:1.7; max-width:350px; }
.journey-chapters li[data-active=true] .step-number { color:#edccff; }
.journey-progress { position:absolute; left:0; right:0; bottom:0; height:2px; background:#2d203c; }
.journey-progress span { display:block; width:100%; height:100%; background:#b787ed; transform-origin:left; transform:scaleX(var(--journey-progress,0)); }
.try-curtain { position:relative; z-index:4; background:#f1edf6; border-radius:38px 38px 0 0; box-shadow:0 -24px 90px #0005; padding:1px 0 90px; color:#251b31; --muted:#62566d; --violet:#8251b1; }
.try-curtain .eyebrow { color:#75548d; }
.try-curtain .try-section { padding-top:105px; padding-bottom:0; }
.try-curtain .try-shell { color:#f5f2fb; --muted:#b7b2c9; --violet:#d5adfa; background:#0c0a19; border-color:#ab8bc9; box-shadow:0 24px 70px #34164d2c; }
.try-curtain .try-shell .eyebrow { color:#cfa8ed; }
.try-curtain .try-field input { color-scheme:dark; }
.tools-strip { position:relative; z-index:4; margin-top:50px; }
.questions-section { position:relative; }
.closing-section { isolation:isolate; background:#070711; border-radius:30px; }
.closing-art { opacity:.65; }
.closing-horizon { position:absolute; z-index:1; left:-10%; right:-10%; bottom:-55px; height:280px; pointer-events:none; background:radial-gradient(ellipse at 50% 100%,#fff0db 4%,#d6adff 24%,#8e47ca 40%,#35184a 56%,transparent 72%); transform:translateY(var(--horizon-shift,50px)); opacity:var(--horizon-opacity,.65); }
.closing-horizon i { display:block; position:absolute; left:-5%; right:-5%; top:-140px; height:245px; background:#080610; border-radius:50%; filter:blur(18px); }
.closing-copy { z-index:3; }
.closing-orbits { z-index:2; }
@keyframes signal-travel { to { stroke-dashoffset:0; } }
@media(min-width:961px) and (prefers-reduced-motion:no-preference) {
  :root[data-motion-scenes=true] .hero-stage { height:calc(max(860px,100svh) + 100svh); }
  :root[data-motion-scenes=true] .hero { position:sticky; top:0; max-height:none; }
  :root[data-motion-scenes=true] .possibilities { margin-top:-100svh; }
  :root[data-motion-scenes=true] .journey-section { height:240svh; min-height:1800px; }
  :root[data-motion-scenes=true] .journey-sticky { position:sticky; top:0; min-height:0; }
  :root[data-motion-scenes=true] .try-curtain { margin-top:-50svh; }
  .journey-heading { transform:translateY(var(--journey-heading-y,0px)); opacity:var(--journey-heading-opacity,1); }
  .personal-universe { top:47%; transform:translate(-50%,calc(-50% + var(--sphere-y,70px))) scale(var(--sphere-scale,.82)); }
  .story-grid { grid-template-columns:1.12fr 1fr 1fr; }
  .story-group:nth-child(2) .story-grid { grid-template-columns:1fr 1.12fr 1fr; }
  .story-group:nth-child(3) .story-grid { grid-template-columns:1fr 1fr 1.12fr; }
}
@media(min-width:961px) and (max-height:820px) {
  .journey-heading { padding-top:90px; }
  .journey-heading h2 { font-size:52px; }
  .journey-heading>p:last-child { margin-top:14px; }
  .personal-universe { height:530px; }
  .journey-chapters { bottom:30px; }
  .journey-chapters p { font-size:12px; }
}
@media(max-width:1180px) and (min-width:961px) {
  .site-header.is-scrolled { width:calc(100% - 80px); }
  .site-header.is-scrolled .header-inner { gap:16px; }
  .site-header.is-scrolled .desktop-nav { gap:20px; }
  .fragment-passport { left:0; }.fragment-dossier { left:2%; }.fragment-comic { right:0; }
  .identity-origin { width:100px; height:100px; }
}
@media(max-width:960px) {
  .site-header.is-scrolled { width:calc(100% - 40px); }
  .site-header.is-scrolled .site-brand { gap:10px; }
  .site-header.is-scrolled .site-brand span { max-width:145px; opacity:1; }
  .site-header.is-scrolled .header-inner { gap:16px; }
  .catalog-intro { padding-top:75px; }
  .identity-preview { height:290px; }
  .identity-fragment { width:220px; padding:20px; }
  .identity-fragment b { font-size:19px; }
  .fragment-passport { left:0; }.fragment-dossier { left:3%; }.fragment-comic { right:0; width:230px; }
  .identity-origin { width:95px; height:95px; }
  .identity-origin img { width:42px; height:42px; }
  .identity-origin span { letter-spacing:1px; font-size:7px; }
  .journey-sticky { height:auto; min-height:0; padding-bottom:60px; }
  .journey-heading { padding-top:75px; }
  .personal-universe { position:relative; top:auto; left:auto; transform:none; margin:-15px auto -50px; width:100%; height:560px; }
  .journey-chapters { position:relative; bottom:auto; gap:22px; }
  .journey-chapters h3 { font-size:18px; }
  .journey-chapters p { font-size:12px; }
  .journey-progress { display:none; }
  .try-curtain { padding-bottom:65px; }
}
@media(max-width:680px) {
  .site-header.is-scrolled { width:calc(100% - 24px); border-radius:20px; top:8px; }
  .site-header.is-scrolled .header-inner { min-height:58px; padding:7px 11px; gap:9px; }
  .site-header.is-scrolled .site-brand img { width:31px; height:31px; }
  .site-header.is-scrolled .site-brand { gap:7px; }
  .catalog-intro { border-radius:24px 24px 0 0; padding:65px 0 42px; }
  .catalog-intro .section-heading { gap:24px; margin-bottom:24px; }
  .identity-preview { height:405px; width:100%; margin-top:0; }
  .identity-connections { display:none; }
  .identity-origin { width:70px; height:70px; top:35px; left:50%; border-radius:23px; gap:0; z-index:3; }
  .identity-origin img { width:32px; height:32px; }
  .identity-origin span { font-size:5px; }
  .identity-fragment { width:calc(50% - 9px); padding:15px; border-radius:13px; }
  .identity-fragment>span { font-size:6px; letter-spacing:1px; }
  .identity-fragment b { font-size:17px; margin:12px 0 9px; }
  .identity-fragment small { font-size:8px; }
  .fragment-passport { left:0; top:95px; min-height:140px; rotate:-3deg; }
  .fragment-dossier { right:0; left:auto; bottom:auto; top:95px; min-height:140px; rotate:3deg; }
  .fragment-comic { top:auto; right:5%; bottom:0; height:145px; width:90%; rotate:-2deg; }
  .fragment-comic b { max-width:140px; font-size:24px; }
  .fragment-comic img { width:155px; height:155px; right:-3px; bottom:-23px; }
  .catalog-body { padding:30px 0 55px; border-radius:24px 24px 0 0; }
  .journey-heading { padding-top:64px; }
  .journey-heading h2 { font-size:45px; letter-spacing:-1.8px; margin-top:20px; }
  .journey-dash { display:none; }
  .journey-heading>p:last-child { font-size:12px; line-height:1.7; max-width:240px; margin:20px auto 0; }
  .personal-universe { height:410px; margin:0 auto -15px; }
  .sphere-fallback { width:230px; height:230px; }
  .universe-label { padding:6px 8px; font-size:7px; }
  .universe-label::before { width:3px; height:3px; margin-right:4px; }
  .universe-caption { font-size:6px; letter-spacing:1.6px; }
  .label-1 { left:7%; top:26%; }.label-2 { right:5%; top:35%; }.label-3 { left:2%; top:47%; }
  .label-4 { right:1%; top:56%; }.label-5 { left:4%; top:66%; }.label-6 { right:8%; top:73%; }
  .label-7 { left:9%; top:84%; }.label-8 { right:8%; top:16%; }.label-9 { right:3%; top:89%; }
  .journey-chapters { grid-template-columns:1fr; gap:24px; }
  .journey-chapters li { padding-top:18px; }
  .journey-chapters .step-number { font-size:9px; }
  .journey-chapters h3 { font-size:21px; }
  .journey-chapters p { font-size:13px; max-width:none; }
  .journey-chapters li::before { transform:scaleX(.16); }
  .try-curtain { border-radius:24px 24px 0 0; padding-bottom:50px; }
  .try-curtain .try-section { padding-top:60px; }
  .tools-strip { margin-top:36px; }
  .closing-horizon { height:230px; bottom:-40px; }
}
@media(max-width:380px) {
  .site-header.is-scrolled .header-inner { gap:7px; }
  .identity-fragment b { font-size:15px; }
  .fragment-comic b { font-size:21px; }
  .journey-heading h2 { font-size:39px; }
  .universe-label { font-size:6px; }
}
/* Pausing freezes the current pose without changing scroll geometry. */
:root[data-motion-paused=true] .hero-art { transform:translate3d(0,var(--hero-drift,0px),0) scale(var(--hero-scale,1.025)); }
@media(prefers-reduced-motion:reduce) {
  .hero::after { display:none; }
  .motion-word { transform:none!important; filter:none!important; opacity:1!important; clip-path:none!important; }
  .site-header,.header-inner,.site-brand * { transition:none!important; }
  .journey-sticky { height:auto; min-height:0; padding-bottom:60px; }
  .personal-universe { position:relative; top:auto; left:auto; transform:none; margin:0 auto; }
  .journey-chapters { position:relative; bottom:auto; }
  .journey-chapters li::before { transform:scaleX(.16); }
  .journey-progress { display:none; }
  .identity-connections .signal-flow { animation:none; }
  .closing-horizon { transform:none; opacity:.8; }
}
@media print {
  .hero-stage,.journey-section { height:auto; min-height:0; }
  .hero,.journey-sticky { position:relative; }
  .possibilities,.try-curtain { margin-top:0; }
  .personal-universe,.identity-preview,.closing-horizon { display:none; }
  .journey-chapters { position:relative; bottom:auto; color:#111; }
}