@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/barlow-condensed-700.ttf') format('truetype'); }
.wrap:has(#start:not([hidden])) { width:min(1440px,calc(100% - 96px)); margin:0 auto; }
#start { position:relative; isolation:isolate; max-width:none; min-height:calc(100svh - 80px); margin:0; display:flex; align-items:center; overflow:hidden; }
.intro-copy { position:relative; z-index:2; width:100%; padding:65px 0; }
#start h1 { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:clamp(64px,10.5vw,156px); line-height:.9; letter-spacing:-.025em; margin:0 0 32px; }
.title-mask { display:block; overflow:hidden; padding-bottom:.07em; margin-bottom:-.07em; }
.title-mask>span { display:block; }
.accent { color:var(--accent); }
#start p { font-size:15px; margin-bottom:30px; max-width:320px; }
#start-guide { display:inline-flex; align-items:center; gap:50px; min-height:56px; padding:16px 24px; }
#start-guide>span { font-size:22px; line-height:1; }
.intro-art { --pointer-x:0px; --pointer-y:0px; position:absolute; right:-3%; top:12%; width:min(53vw,670px); aspect-ratio:1; z-index:0; transform:translate(var(--pointer-x),var(--pointer-y)); }
.intro-art::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse,#e5642420,transparent 65%); }
.sculpture { position:absolute; inset:10%; perspective:1000px; }
.sculpture-core { position:absolute; inset:14%; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(-34deg); }
.plane { position:absolute; inset:0; border:1px solid #d4d2b8; background-color:#181915; background-image:linear-gradient(#b6b39a18 1px,transparent 1px),linear-gradient(90deg,#b6b39a18 1px,transparent 1px); background-size:25% 25%; box-shadow:0 10px 0 #1e1f19,0 11px 0 #737364; backface-visibility:visible; }
.plane-bottom { transform:translateZ(-85px); opacity:.55; }
.plane-middle { transform:translateZ(0); opacity:.8; }
.plane-top { transform:translateZ(85px); background-color:#ed7046; border-color:#ffbf9e; background-image:linear-gradient(#71361940 1px,transparent 1px),linear-gradient(90deg,#71361940 1px,transparent 1px); box-shadow:0 10px 0 #b54424,0 11px 0 #ffae83,0 0 90px #ff6a3220; }
.core-dot { position:absolute; top:47%; left:47%; width:6%; height:6%; border-radius:50%; background:#fff3df; box-shadow:0 0 30px #fff3df80; }
.axis { position:absolute; left:50%; top:50%; width:1px; height:190px; transform-origin:top; transform:translateZ(85px) rotateX(90deg); background:linear-gradient(var(--accent),transparent); }
.orbit { position:absolute; inset:6%; border:1px solid #807d632a; border-radius:50%; }
.orbit::after { content:''; position:absolute; top:50%; left:-3px; width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 18px #ff714850; }
.orbit-two { inset:17%; border-style:dashed; transform:rotateX(55deg) rotateZ(25deg); opacity:.5; }
#toggle-motion { position:absolute; bottom:24px; right:0; z-index:3; font-size:11px; color:var(--muted); text-decoration:none; }
.button,.option,.text-button { transition:background .35s,border-color .35s,transform .35s,color .35s; }
.button:hover { transform:translateY(-2px); }
.button>span { display:inline-block; transition:transform .35s; }
.button:hover>span { transform:translate(2px,-2px); }
.option:hover { transform:translateX(3px); }
.progress span { transition:width .65s cubic-bezier(.16,1,.3,1); }
main[data-transitioning] { pointer-events:none; }
@media(prefers-reduced-motion:no-preference) {
  .title-mask>span { animation:line-reveal .95s cubic-bezier(.16,1,.3,1) both; }
  .title-mask:nth-child(2)>span { animation-delay:.1s; }
  .title-mask:nth-child(3)>span { animation-delay:.2s; }
  #start p { animation:soft-reveal .8s .35s both; }
  #start-guide { animation:soft-reveal .8s .45s both; }
  .intro-art { transition:transform 1.2s cubic-bezier(.16,1,.3,1); animation:art-reveal 1.3s .1s both; }
  .sculpture-core { animation:sculpture-drift 12s ease-in-out infinite; }
  .orbit-one { animation:orbit 36s linear infinite; }
  .motion-paused .sculpture-core,.motion-paused .orbit-one { animation-play-state:paused; }
  @keyframes line-reveal { from { transform:translateY(110%); opacity:0; } to { transform:translateY(0); opacity:1; } }
  @keyframes soft-reveal { from { opacity:0; translate:0 20px; } to { opacity:1; translate:0 0; } }
  @keyframes art-reveal { from { opacity:0; scale:.92; } to { opacity:1; scale:1; } }
  @keyframes sculpture-drift { 0%,100% { transform:rotateX(58deg) rotateZ(-34deg) translateZ(0); } 50% { transform:rotateX(64deg) rotateZ(-24deg) translateZ(12px); } }
  @keyframes orbit { to { rotate:360deg; } }
}
@media(max-width:700px) {
  .wrap:has(#start:not([hidden])) { width:calc(100% - 40px); }
  #start { align-items:flex-start; min-height:calc(100svh - 70px); }
  .intro-copy { padding:clamp(65px,13vh,120px) 0 190px; }
  #start h1 { font-size:clamp(50px,13.6vw,95px); margin-bottom:26px; }
  #start p { max-width:260px; font-size:14px; }
  .intro-art { width:280px; right:-35px; top:auto; bottom:-20px; opacity:.65; }
  #toggle-motion { bottom:15px; left:0; right:auto; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  #toggle-motion { display:none; }
}