@font-face{font-family:"Jost";src:url(/assets/fonts/jost.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/assets/fonts/cormorant-italic.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap}

:root{
  --ink:#fff;
  --plum:#3a2a6b;
  --rose:#ff8fc0;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%;background:#0a0c26;overflow:hidden;overscroll-behavior:none}
body{
  font-family:"Jost",system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;touch-action:none;
}

#sky{position:fixed;inset:0;width:100%;height:100%;display:block}
#fallback{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}

#plane{
  position:fixed;left:0;top:0;width:var(--plane,40px);height:var(--plane,40px);
  margin:calc(var(--plane,40px)/-2) 0 0 calc(var(--plane,40px)/-2);
  pointer-events:none;will-change:transform;opacity:0;
  filter:drop-shadow(0 0 6px #ff7ab8) drop-shadow(0 0 18px rgba(255,90,170,.65));
}

#gate{
  position:fixed;left:50%;top:calc(50% + clamp(70px,13vh,120px));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:none;border:0;color:#fff;cursor:pointer;font:inherit;padding:24px;
  transition:opacity .7s ease;
}
#gate.off{opacity:0;pointer-events:none}
#gate i{
  width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 0 14px 3px #ff8fc0,0 0 44px 10px rgba(255,90,170,.5);
  animation:pulse 2.2s ease-in-out infinite;
}
#gate span{font-size:12px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;opacity:.75;white-space:nowrap}
@keyframes pulse{50%{transform:scale(1.6);opacity:.6}}

#stage{
  position:fixed;left:0;right:0;bottom:clamp(40px,9vh,96px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 20px;pointer-events:none;
  text-shadow:0 1px 22px rgba(44,26,96,.62),0 0 3px rgba(44,26,96,.35);
}

#name{
  font-weight:400;font-size:clamp(15px,1.75vw,24px);letter-spacing:.42em;margin-right:-.42em;
  line-height:1.3;
}
#name span{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(10px);
  transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease);
  transition-delay:calc(var(--i)*38ms)}
#name.on span{opacity:1;transform:none;filter:blur(0)}
#name span.gap{width:.42em}

#soon{
  margin-top:clamp(4px,1vh,10px);
  font:italic 300 clamp(54px,8vw,104px)/1.05 "Cormorant",Georgia,serif;
  letter-spacing:-.01em;
  opacity:0;transform:translateY(24px) scale(.97);filter:blur(16px);
  transition:opacity 1.6s var(--ease) .55s,transform 1.9s var(--ease) .55s,filter 1.6s var(--ease) .55s;
}
#soon.on{opacity:1;transform:none;filter:blur(0)}
#soon span{
  padding:0 .12em .08em;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#ffc2dd 47%,#bfe0ff 53%,#fff 62%,#fff 100%);
  background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6.5s ease-in-out infinite;
  filter:drop-shadow(0 2px 20px rgba(58,34,110,.42));text-shadow:none;
}
@keyframes shimmer{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}

#soon-en{
  opacity:0;transform:translateY(12px);
  transition:opacity 1.3s var(--ease) 1.25s,transform 1.3s var(--ease) 1.25s;
}
#soon-en{font-size:clamp(10px,1vw,12.5px);font-weight:400;letter-spacing:.56em;margin-right:-.56em;text-transform:uppercase;margin-top:clamp(6px,1.2vh,12px)}
#soon-en.on{opacity:.94;transform:none}

#hint{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + clamp(18px,3.4vh,34px));transform:translateX(-50%);
  white-space:nowrap;font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  text-shadow:0 1px 14px rgba(58,34,110,.55);
}
#hint.on{opacity:.88}

#sound,#skip{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:opacity .8s ease,background .3s ease;
}
#sound:hover,#skip:hover{background:rgba(255,255,255,.22)}
#sound{
  right:18px;width:44px;height:44px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;gap:3px;
}
#sound i{display:block;width:2px;height:15px;border-radius:2px;background:#fff;transform:scaleY(.2);transform-origin:center;transition:transform .3s ease}
#sound[aria-pressed=true] i{animation:eq 1.15s ease-in-out infinite}
#sound[aria-pressed=true] i:nth-child(2){animation-delay:-.45s}
#sound[aria-pressed=true] i:nth-child(3){animation-delay:-.85s}
#sound[aria-pressed=true] i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
#skip{left:18px;height:44px;border-radius:22px;padding:0 20px;font:400 11px "Jost",sans-serif;letter-spacing:.28em;text-transform:uppercase}
#skip.off{opacity:0;pointer-events:none}

/* Without WebGL2, or when motion is reduced: the finished sky as a still picture. */
body.still{background:#c9bfe4 center/cover no-repeat}
body.still #plane,body.still #gate,body.still #skip,body.still #sound,body.still #hint{display:none}

@media (max-height:520px) and (orientation:landscape){
  #soon{font-size:clamp(40px,13vh,64px)}
  #stage{bottom:14px}
  #soon-en{display:none}
}