@font-face{
  font-family:'KiwiSoda';
  src:url('../media/fonts/kiwisoda.woff2') format('woff2'),
      url('../media/fonts/kiwisoda.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --display:'KiwiSoda', ui-sans-serif, system-ui, sans-serif;
  --cur-normal:url('../media/cursors/normal.png') 4 4, auto;
  --cur-hand:url('../media/cursors/link-select2.png') 9 11, pointer;
  --accent:#60d7ff; --accent-soft:rgba(96,215,255,.55); --accent-ring:rgba(96,215,255,.8);
  --accent-other:#ff5a3c; --accent-other-soft:rgba(255,90,60,.55);
}
html.realm-stone{ --accent:#ff5a3c; --accent-soft:rgba(255,90,60,.55); --accent-ring:rgba(255,90,60,.85);
  --accent-other:#60d7ff; --accent-other-soft:rgba(96,215,255,.55); }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#000; cursor:var(--cur-normal); }
body{ overflow:hidden; color:#e8e0d8; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a, button, [role="button"], .yes, .no, #introBox{ cursor:var(--cur-hand); }

.bgvideo{
  position:fixed; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000; z-index:0;
}
.grade{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:color; opacity:.92;
  background:linear-gradient(176deg, #6fd2ff 0%, #2487e6 42%, #0c3a63 72%, #04111f 100%);
}
.realm-stone .grade{ background:linear-gradient(176deg, #ff8a5a 0%, #e02626 44%, #6a0f10 74%, #25050a 100%); }
body::after{
  content:''; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%,
    transparent 36%, rgba(0,0,0,.34) 72%, rgba(0,0,0,.62) 100%);
}
#post{ position:fixed; inset:0; z-index:100; pointer-events:none; }
#post .post-grain{
  position:absolute; inset:0;
  background-image:var(--grain); background-size:150px 150px;
  opacity:.06;
}
#post .post-ca{
  position:absolute; inset:0; mix-blend-mode:screen; opacity:.5;
  background:
    radial-gradient(140% 120% at -8% 50%, rgba(255,40,80,.06), transparent 34%),
    radial-gradient(140% 120% at 108% 50%, rgba(0,200,255,.06), transparent 34%);
}
.realm-stone #post .post-ca{
  background:
    radial-gradient(140% 120% at -8% 50%, rgba(255,40,40,.07), transparent 34%),
    radial-gradient(140% 120% at 108% 50%, rgba(255,160,60,.06), transparent 34%);
}
@media (prefers-reduced-motion: reduce){ #post .post-grain{ animation:none; } }
.ambient-rest #release::before, .ambient-rest #release::after,
.ambient-rest #release *, .ambient-rest #release *::before, .ambient-rest #release *::after,
.ambient-rest #dock, .ambient-rest #dock *, .ambient-rest #mute{ animation-play-state:paused !important; }

#intro{ position:fixed; inset:0; z-index:10; }
#intro .rays{
  position:fixed; left:50%; top:50%; width:175vmax; height:175vmax;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none; opacity:.65;
  background:repeating-conic-gradient(from 0deg,
    rgba(125,205,255,0) 0deg, rgba(125,205,255,.06) 1.4deg, rgba(125,205,255,0) 4deg, rgba(125,205,255,0) 10deg);
  -webkit-mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 28%, transparent 60%);
          mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 28%, transparent 60%);
  animation:rayspin 64s linear infinite;
}
@keyframes rayspin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ #intro .rays{ animation:none; } }
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.seen{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
#introBox{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,88vh); max-width:760px; aspect-ratio:1/1;
  display:grid; place-items:center; cursor:var(--cur-hand); user-select:none;
}
#introBox:focus-visible{ outline:2px solid rgba(217,205,191,.6); outline-offset:10px; border-radius:6px; }
#introBox img{ grid-area:1/1; width:60%; height:60%; object-fit:contain; display:none; }
#introBox img.boom{ width:100%; height:100%; }
#ask{
  position:fixed; left:0; right:0; bottom:clamp(22px,4.8vh,48px); z-index:11;
  max-width:34ch; margin:0 auto;
  text-align:center; color:#d6cdc0; opacity:.9; padding:0 7vw; pointer-events:none;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.08rem,3.1vw,1.55rem); letter-spacing:.045em; line-height:1.4;
}

#lids{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.lid{
  position:absolute; left:-2vw; width:104vw; height:62vh; background:#000;
  box-shadow:0 0 80px 34px #000;
  transition:transform .30s cubic-bezier(.22,1,.36,1); will-change:transform;
}
.lid-top{ top:0;    transform:translateY(-101%); border-radius:0 0 50% 50%/0 0 16% 16%; }
.lid-bot{ bottom:0; transform:translateY(101%);  border-radius:50% 50% 0 0/16% 16% 0 0; }
#lids.closing .lid{ transition:transform .16s cubic-bezier(.5,0,.85,.45); }
#lids.closing .lid-top,#lids.closing .lid-bot{ transform:translateY(0); }
#lids.flip{ z-index:95; }
#lids.flip .lid{ transition-duration:.42s; }

#release{
  position:fixed; inset:0; z-index:20; overflow-y:auto;
  background:radial-gradient(135% 105% at 50% 38%,
    rgba(5,10,18,.82) 0%, rgba(1,3,7,.90) 58%, rgba(0,0,0,.95) 100%);
  scrollbar-width:none;
}
#release::-webkit-scrollbar{ display:none; }
#release::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 44% at 50% 40%, var(--accent-soft), transparent 70%);
  opacity:.06; mix-blend-mode:screen; animation:relAura 13s ease-in-out infinite;
}
@keyframes relAura{ 0%,100%{ opacity:.045; } 50%{ opacity:.13; } }
#release .wrap{
  position:relative; z-index:1;
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(44px,9vh,110px) 6vw clamp(104px,17vh,150px);
}
.eyebrow{
  margin:clamp(26px,4.6vh,42px) 0 0; padding-left:.42em;
  font-family:var(--display); font-weight:400;
  font-size:clamp(.72rem,2vw,.9rem); letter-spacing:.42em; text-transform:uppercase;
  color:#7cc4e6;
}
.title{
  margin:clamp(7px,1.3vh,13px) 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,8.4vw,4rem); letter-spacing:.03em; line-height:1.05;
  color:#ece4d8;
  text-shadow:0 0 30px var(--accent-soft), 0 2px 4px rgba(0,0,0,.65);
  animation:titleBreath 6.5s ease-in-out infinite;
}
@keyframes titleBreath{
  0%,100%{ text-shadow:0 0 22px var(--accent-soft), 0 2px 4px rgba(0,0,0,.65); }
  50%    { text-shadow:0 0 44px var(--accent-ring), 0 2px 4px rgba(0,0,0,.65); }
}
.realm-stone .eyebrow{ color:#ff9a82; }