/* Drafting marks belong to the margins; copy and controls keep their positions. */
.blueprint-zone{position:relative;isolation:isolate}
.blueprint-zone::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:24px 8px;border-top:1px dashed rgba(21,23,43,.07);border-left:1px dashed rgba(21,23,43,.07);border-right:1px dashed rgba(21,23,43,.07);border-radius:28px 28px 0 0}
.blueprint{position:absolute;z-index:-1;pointer-events:none;width:240px;height:187px;color:var(--ink);fill:none;opacity:.14;animation:blueprint-flow var(--draft-time,24s) linear infinite;animation-play-state:paused}
.blueprint.is-drawing{animation-play-state:running}
.drawing-paused .blueprint{animation-play-state:paused}
.blueprint--route{--draft-time:20s;animation-direction:reverse}
.blueprint--rings{--draft-time:32s}
.blueprint--wave{--draft-time:28s;animation-direction:reverse}
.blueprint--trace{--draft-time:18s}
@keyframes blueprint-flow{to{stroke-dashoffset:-32}}
.blueprint-zone > .blueprint.blueprint--sweep{left:max(24px,calc((100% - var(--container))/2 + 24px));right:auto;top:auto;bottom:12px;width:min(calc(100% - 48px),calc(var(--container) - 48px));height:100px;opacity:.18;animation-name:blueprint-sweep;--draft-time:10s}
.about-hero > .blueprint.blueprint--sweep{translate:0 var(--scroll-y,0px)}
.blueprint-zone > .blueprint--sweep.is-reverse{animation-direction:reverse;--draft-time:14s}
@keyframes blueprint-sweep{to{stroke-dashoffset:-128}}
.hero.blueprint-zone{padding-bottom:144px}
.playing.blueprint-zone{padding-bottom:156px}
.playing.blueprint-zone .playing__head{margin-bottom:64px}
.verticals.blueprint-zone{padding-bottom:172px}
.about-hero.blueprint-zone{padding-bottom:156px}
.about-values.blueprint-zone,.about-lab.blueprint-zone{padding-bottom:164px}
.about-story.blueprint-zone{padding-bottom:172px}
.send.blueprint-zone > .blueprint.blueprint--sweep,.about-invite.blueprint-zone > .blueprint.blueprint--sweep{top:8px;bottom:auto;height:72px;opacity:.18}
.legal-hero > .blueprint.blueprint--sweep{left:0;right:auto;top:auto;bottom:-6px;width:100%;height:30px;opacity:.16;animation-name:blueprint-sweep;--draft-time:14s}
.blueprint--hero{width:440px;height:342px;right:8px;bottom:24px}
.blueprint--games{opacity:.1;right:28px;bottom:36px;width:310px;height:241px}
.blueprint--corner{right:12px;bottom:16px;width:170px;height:132px}
.blueprint--dark{color:#fff;--draft-accent:#fff;opacity:.16}
.verticals.blueprint-zone::before,.about-story.blueprint-zone::before{border-color:rgba(255,255,255,.09);inset:80px 16px 28px}
.verticals .blueprint,.about-story .blueprint{right:max(16px,calc((100% - var(--container))/2));bottom:18px;width:200px;height:156px}
.send.blueprint-zone::before,.about-invite.blueprint-zone::before{inset:32px max(16px,calc((100% - var(--container))/2)) 24px;border-color:rgba(21,23,43,.1)}
.send .blueprint,.about-invite .blueprint{left:max(24px,calc((100% - var(--container))/2 + 24px));right:auto;bottom:140px;width:180px;height:140px;opacity:.22}
.about-hero .blueprint{right:0;bottom:36px;width:420px;height:327px}
.about-values .blueprint,.about-lab .blueprint{bottom:0;width:130px;height:101px;opacity:.15}
.legal-hero{position:relative;isolation:isolate}
.legal-hero .blueprint{left:calc(100% + 8px);right:auto;top:0;bottom:auto;width:160px;height:125px;opacity:.18}
.legal-footer{position:relative;isolation:isolate}
.legal-footer .blueprint{right:16px;bottom:8px;width:80px;height:62px;opacity:.1}
.blueprint.blueprint--trail{left:24px;right:auto;bottom:14px;width:250px;height:62px;opacity:.2}
.blueprint.blueprint--trail-top{left:24px;right:auto;top:24px;bottom:auto;width:230px;height:58px;opacity:.16}
.verticals .blueprint--trail,.about-story .blueprint--trail{left:max(24px,calc((100% - var(--container))/2 + 24px));bottom:24px}
.legal-copy section,.legal-contact{position:relative;isolation:isolate}
.legal-copy section .blueprint{right:0;top:-20px;bottom:auto;width:150px;height:38px;opacity:.16}
.legal-copy section:first-child .blueprint{top:-44px}
.legal-contact .blueprint{right:0;top:-30px;width:200px;height:50px;opacity:.16}
.has-parallax{translate:0 var(--scroll-y,0px)}
/* Rotate the dashed ring inside a fixed circle so its box cannot widen the page. */
.about-art__orbit{animation:none;border:0;overflow:hidden}
.about-art__orbit::after{content:"";position:absolute;inset:0;border:2px dashed var(--border-strong);border-radius:50%;animation:orbit-turn 36s linear infinite}
@media(max-width:1100px){
  .legal-hero .blueprint{left:auto;right:-8px;top:-28px;width:100px;height:78px;opacity:.12}
  .blueprint--games{width:160px;height:125px;right:20px;bottom:12px;opacity:.12}
}
@media(max-width:860px){
  .blueprint--hero{right:0;bottom:56px;width:360px;height:280px}
  .about-hero .blueprint{right:50%;translate:50% var(--scroll-y,0px);bottom:80px;width:min(360px,90%)}
}
@media(max-width:600px){
  .blueprint-zone > .blueprint.blueprint--sweep{height:76px;opacity:.2}
  .hero.blueprint-zone,.about-hero.blueprint-zone{padding-bottom:128px}
  .playing.blueprint-zone{padding-bottom:132px}
  .about-values.blueprint-zone,.about-lab.blueprint-zone{padding-bottom:132px}
  .verticals.blueprint-zone,.about-story.blueprint-zone{padding-bottom:144px}
  .blueprint-zone::before{inset:16px 8px;border-radius:20px 20px 0 0;opacity:.65}
  .blueprint--hero{width:270px;height:210px;right:4px;bottom:64px;opacity:.16}
  .blueprint--games{width:90px;height:70px;bottom:12px}
  .send .blueprint,.about-invite .blueprint{width:90px;height:70px;left:24px;bottom:140px;opacity:.17}
  .verticals .blueprint,.about-story .blueprint{width:100px;height:78px;opacity:.12}
  .about-values .blueprint,.about-lab .blueprint{width:80px;height:62px;opacity:.12}
  .legal-hero .blueprint{top:-26px;width:70px;height:55px;opacity:.1}
  .blueprint.blueprint--trail{width:140px;height:36px;bottom:12px;opacity:.15}
  .blueprint.blueprint--trail-top{width:130px;height:33px;top:12px;opacity:.13}
  .legal-copy section .blueprint{width:100px;height:25px;top:-14px}
  .legal-copy section:first-child .blueprint{top:-32px}
  .legal-contact .blueprint{width:120px;height:30px;top:-22px}
}
@media(prefers-reduced-motion:reduce){
  .blueprint{animation:none;stroke-dashoffset:0}
  .blueprint-zone > .blueprint.blueprint--sweep,.legal-hero > .blueprint.blueprint--sweep{animation:none}
  .has-parallax{translate:0 0!important}
  .about-art__orbit::after{animation:none}
  .about-hero .blueprint{translate:50% 0!important}
  .about-hero > .blueprint.blueprint--sweep{translate:0 0!important}
}
@media(prefers-reduced-motion:reduce) and (min-width:861px){.about-hero .blueprint{translate:0 0!important}}

/* Each large drawing has its own geometry and motion. Inline SVG lets the
   signal, trace and measuring arm move independently of the fixed guides. */
.blueprint-zone > .blueprint.blueprint--animated,.legal-hero > .blueprint.blueprint--animated{animation:none}
.blueprint--animated path,.blueprint--animated circle{vector-effect:non-scaling-stroke}
.draft-guide{opacity:.35}
.draft-detail{stroke-width:1;opacity:.55}
.draft-accent{stroke:var(--draft-accent,#FF3B30);stroke-width:2}
.draft-motion{animation-play-state:paused!important}
.blueprint.is-drawing .draft-motion{animation-play-state:running!important}
.drawing-paused .blueprint .draft-motion{animation-play-state:paused!important}
.draft-trace{animation:draft-trace 16s ease-in-out infinite}
.draft-current{animation:draft-current 18s linear infinite}
.draft-signal{offset-path:path('M0 116H300V44H600V116H900V44H1200');offset-rotate:0deg;animation:draft-signal 24s linear infinite}
.draft-orbit,.draft-orbit-inner{transform-origin:600px 80px;animation:draft-orbit 36s linear infinite}
.draft-orbit-inner{animation-direction:reverse;animation-duration:28s;opacity:.45}
.draft-wave{animation:draft-wave 14s ease-in-out infinite}
.draft-scan{transform:translateX(600px);animation:draft-scan 20s ease-in-out infinite alternate}
@keyframes draft-trace{0%,100%{clip-path:inset(0 100% 0 0)}45%,60%{clip-path:inset(0 0 0 0)}}
@keyframes draft-current{to{stroke-dashoffset:-128}}
@keyframes draft-signal{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes draft-orbit{to{transform:rotate(360deg)}}
@keyframes draft-wave{0%,100%{transform:translateY(-10px);stroke-dashoffset:0}50%{transform:translateY(10px);stroke-dashoffset:-48}}
@keyframes draft-scan{from{transform:translateX(100px)}to{transform:translateX(1100px)}}
@media(prefers-reduced-motion:reduce){
  .blueprint .draft-motion{animation:none!important;clip-path:none}
}

/* One quiet, continuous thread replaces the separate section dividers. */
.has-page-thread{position:relative}
.has-page-thread .blueprint-zone::before{display:none}
.page-thread{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden;opacity:.2}
.page-thread.is-ready{display:block}
.page-thread__line{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-dasharray:10 16;stroke-linecap:round;vector-effect:non-scaling-stroke}
.page-thread__line--light{stroke:#fff;opacity:.85}
.page-thread__dashes{animation:page-thread-flow 28s linear infinite;animation-play-state:paused}
.page-thread.is-drawing .page-thread__dashes{animation-play-state:running}
.drawing-paused .page-thread .page-thread__dashes{animation-play-state:paused}
.page-thread__bead{fill:var(--accent);stroke:var(--ground);stroke-width:1.5}
.page-thread__marker{position:absolute;left:0;top:0;width:11.5px;height:11.5px;border:1.5px solid var(--ground);border-radius:50%;background:var(--accent);opacity:.2;z-index:2;pointer-events:none;contain:strict;will-change:transform}
.page-thread__marker[hidden]{display:none}
@keyframes page-thread-flow{to{stroke-dashoffset:-104}}
[data-thread-route="studio"] .page-thread__line{stroke-dasharray:12 20}
[data-thread-route="studio"] .page-thread__dashes{animation-name:studio-thread-flow;animation-duration:36s}
@keyframes studio-thread-flow{to{stroke-dashoffset:-128}}
@media(prefers-reduced-motion:reduce){
  .page-thread .page-thread__dashes{animation:none}
  .page-thread__bead{display:none}
  .page-thread__marker{display:none!important}
}

/* Touch scrolling keeps the artwork still and the large SVG guides static.
   Entrances and tap surprises remain available; desktop keeps parallax. */
@media(max-width:600px),(hover:none),(pointer:coarse){
  .blueprint,.blueprint .draft-motion,.page-thread .page-thread__dashes{animation:none!important}
  .about-art__orbit::after,.about-art__small,.about-art__spark,.about-art__main svg{animation:none!important}
}

.has-page-thread .blueprint--hero,.has-page-thread .blueprint--games{opacity:.07}

/* Broad turns need a taller clear corridor below the illustrations. */
.has-page-thread .hero,.has-page-thread .about-hero{padding-bottom:320px}
.has-page-thread .playing{padding-bottom:300px}
.has-page-thread .verticals,.has-page-thread .about-story{padding-bottom:296px}
.has-page-thread .about-values,.has-page-thread .about-lab{padding-bottom:280px}
@media(max-width:600px){
  .has-page-thread .hero,.has-page-thread .about-hero{padding-bottom:288px}
  .has-page-thread .playing{padding-bottom:264px}
  .has-page-thread .verticals,.has-page-thread .about-story{padding-bottom:252px}
  .has-page-thread .about-values,.has-page-thread .about-lab{padding-bottom:252px}
}