/* =====================================================================
   Intro 3D layer: a deep-space starfield you fly through, a medicine
   wheel that spins in like a real coin with thickness, a logo that tilts
   in 3D with your mouse or by tilting your phone, and a warp jump on Enter.
   ===================================================================== */
#warp{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}


/* The wheel becomes a 3D coin */
.wheel{perspective:900px}
.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--crx,0deg)) rotateY(var(--cry,0deg))}
.coin>svg{position:relative;z-index:2;transform:translateZ(7px)}
.coin-edge{position:absolute;left:4%;top:4%;width:92%;height:92%;border-radius:50%;background:radial-gradient(circle, #0b2a58 60%, #1e8bff 61%, #0a3a7a 70%, #071833 71%);
  box-shadow:0 0 0 2px rgba(95,176,255,.6)}
body.s1 .coin{animation:coinIn 2.1s cubic-bezier(.16,1,.3,1) both}
@keyframes coinIn{0%{transform:rotateX(70deg) rotateY(-540deg) scale(.4)}60%{transform:rotateX(-8deg) rotateY(14deg) scale(1.05)}100%{transform:rotateX(var(--crx,0deg)) rotateY(var(--cry,0deg)) scale(1)}}
body.s1 .coin.idle{animation:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* Logo tilts in 3D and floats */
.logo picture{display:block;transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--lrx,0deg)) rotateY(var(--lry,0deg)) translateZ(0);transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(30,139,255,.35))}
body.ready .logo picture{animation:float3d 6s ease-in-out infinite}
@keyframes float3d{50%{translate:0 -10px}}
.logo .glint{position:absolute;inset:0;pointer-events:none;border-radius:20px;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(500px circle at var(--gx,50%) var(--gy,30%), rgba(255,255,255,.28), transparent 45%)}
body.ready .logo .glint{opacity:1;transition:opacity 1s}

/* Depth: far things move less, near things move more */
.constellation{rotate:calc(var(--dx,0) * 6deg)}

/* Warp jump into the platform */
body.leaving .logo picture{transition:transform 1s cubic-bezier(.7,0,.3,1), opacity .9s;transform:perspective(1100px) translateZ(700px);opacity:0}
body.leaving .coin{transition:transform 1s cubic-bezier(.7,0,.3,1);transform:rotateY(720deg) scale(3)}

.tilt-hint{position:fixed;left:50%;bottom:max(64px, calc(env(safe-area-inset-bottom) + 56px));transform:translateX(-50%);z-index:20;padding:8px 14px;border-radius:999px;border:1px solid rgba(160,200,255,.35);
  background:rgba(3,9,21,.55);color:#cfe8ff;font:600 .85rem "Saira",sans-serif;cursor:pointer;backdrop-filter:blur(6px)}

@media (prefers-reduced-motion:reduce){
  #warp{display:none}
  body.s1 .coin{animation:none}
  .logo picture{transform:none!important;animation:none!important}
}