/* ERRORBORNS CINEMATIC SYSTEM v2.12.2 — refined atmosphere */
:root{
  --cinematic-ease:cubic-bezier(.2,.8,.2,1);
  --cinematic-slow:cubic-bezier(.16,1,.3,1);
  --pointer-x:50vw;
  --pointer-y:35vh;
  --scroll-velocity:0;
}

html{background:#030303}
body{position:relative;isolation:isolate;transition:opacity .22s ease;background:#030303}
body.is-leaving{opacity:0}
body::before{
  content:"";
  position:fixed;
  z-index:80;
  inset:-18vmax;
  pointer-events:none;
  opacity:.26;
  background:
    radial-gradient(36vmax 28vmax at var(--pointer-x) var(--pointer-y),rgba(99,58,139,.10),transparent 70%),
    radial-gradient(25vmax 22vmax at calc(var(--pointer-x) + 14vw) calc(var(--pointer-y) - 10vh),rgba(82,35,99,.045),transparent 72%);
  transform:translateZ(0);
  transition:opacity .5s ease;
}
body::after{
  content:"";
  position:fixed;
  z-index:81;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.14) 76%,rgba(0,0,0,.42) 100%);
}

.cinematic-grain{display:none!important}

.site-header{
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s var(--cinematic-ease);
}
.site-header.is-scrolled{
  background:rgba(5,5,6,.82);
  border-color:rgba(239,228,209,.13);
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  backdrop-filter:blur(18px) saturate(1.1);
}
.brand-lockup img{transition:transform .6s var(--cinematic-slow),filter .6s ease}
.brand-lockup:hover img{transform:rotate(-5deg) scale(1.08);filter:contrast(1.12)}

.scene,.subhero{--parallax-y:0px;--content-shift:0px;--scene-opacity:1;position:relative;isolation:isolate;perspective:1100px;transform-style:preserve-3d}
.scene::after,.subhero::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.30;
  background:
    linear-gradient(105deg,transparent 0 44%,rgba(176,128,214,.012) 49%,transparent 54%),
    radial-gradient(80% 60% at 50% 110%,rgba(99,61,130,.055),transparent 70%);
}
.scene__media,.subhero__media{overflow:hidden;transform:translateZ(-1px) scale(1.001)}
.scene__media img,.subhero__media img{
  will-change:transform;
  transform:translate3d(0,var(--parallax-y),0) scale(1.072);
  transition:filter .7s ease,opacity .7s ease;
}
.scene.is-scene-active .scene__media img,.subhero.is-scene-active .subhero__media img{filter:saturate(.95) contrast(1.06)}
.scene__content,.subhero__content{
  will-change:transform,opacity;
  transform:translate3d(0,var(--content-shift),0);
  opacity:var(--scene-opacity);
}

.hero-copy,.subhero__content{transform-style:preserve-3d}
.hero-copy h1,.subhero h1{
  transform-origin:left center;
  transition:clip-path .82s var(--cinematic-slow),transform .82s var(--cinematic-slow),opacity .7s ease;
}
body:not(.cinematic-loaded) .hero-copy h1,
body:not(.cinematic-loaded) .subhero h1{
  clip-path:inset(0 100% 0 0);
  transform:translate3d(0,14px,0);
  opacity:.25;
}
body.cinematic-loaded .hero-copy h1,
body.cinematic-loaded .subhero h1{
  clip-path:inset(0 0 0 0);
  transform:translate3d(0,0,0);
  opacity:1;
}
.hero-copy .status-pill,.subhero__eyebrow{opacity:.92;text-shadow:0 0 12px rgba(192,151,227,.12)}

[data-cinematic-reveal]{
  --reveal-y:18px;
  opacity:0;
  transform:translate3d(0,var(--reveal-y),0) scale(.993);
  filter:blur(1.5px);
  transition:
    opacity .7s var(--cinematic-ease) var(--reveal-delay,0ms),
    transform .78s var(--cinematic-slow) var(--reveal-delay,0ms),
    filter .55s ease var(--reveal-delay,0ms);
}
[data-cinematic-reveal].is-revealed{
  --reveal-y:0px;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

.cinematic-tilt{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --tilt-z:0px;
  transform-style:preserve-3d;
  will-change:transform;
}
.cinematic-tilt.is-revealed{
  transform:perspective(1000px) translate3d(0,0,var(--tilt-z)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease,opacity .7s var(--cinematic-ease) var(--reveal-delay,0ms),filter .55s ease var(--reveal-delay,0ms);
}
.cinematic-tilt:hover{
  --tilt-z:4px;
  box-shadow:0 22px 54px rgba(0,0,0,.38),0 0 0 1px rgba(239,228,209,.045) inset;
}
.cinematic-tilt img{transition:transform 1.1s var(--cinematic-slow),filter .7s ease}
.cinematic-tilt:hover img{transform:scale(1.022);filter:saturate(.98) contrast(1.035)}

.cinematic-magnetic{
  --mag-x:0px;
  --mag-y:0px;
  transform:translate3d(var(--mag-x),var(--mag-y),0);
  transition:transform .22s var(--cinematic-ease),background .22s ease,color .22s ease,border-color .22s ease;
  will-change:transform;
}

.progress{box-shadow:0 0 10px rgba(205,169,236,.24)}
.noise,.scanlines{display:none!important}

.gateway-card::before,.asset-card::before,.relic-card::before,.signal-card::before,.surface-tile::before,.sticker-card::before,.character-card::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(115deg,transparent 20%,rgba(238,226,203,.075) 48%,transparent 72%);
  transform:translateX(-120%);
  transition:opacity .25s ease,transform 1.05s var(--cinematic-slow);
}
.gateway-card:hover::before,.asset-card:hover::before,.relic-card:hover::before,.signal-card:hover::before,.surface-tile:hover::before,.sticker-card:hover::before,.character-card:hover::before{
  opacity:.55;
  transform:translateX(120%);
}
.asset-card,.relic-card,.signal-card,.surface-tile,.sticker-card,.character-card{position:relative}

/* Procedural soundtrack control */
.sound-dock{
  position:fixed;
  z-index:110;
  right:1rem;
  bottom:1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem;
  border:1px solid rgba(239,228,209,.16);
  border-radius:999px;
  background:rgba(6,6,7,.88);
  box-shadow:0 14px 42px rgba(0,0,0,.38);
  backdrop-filter:blur(18px) saturate(1.15);
  transition:transform .3s var(--cinematic-ease),border-color .25s ease,background .25s ease;
}
.sound-dock:hover{border-color:rgba(239,228,209,.32);background:rgba(8,8,10,.93)}
.sound-toggle{
  appearance:none;
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:38px;
  padding:.52rem .7rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#b9afa2;
  cursor:pointer;
  font:900 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.sound-toggle[aria-pressed="true"]{color:#efe4d1}
.sound-bars{display:flex;align-items:center;gap:2px;width:18px;height:15px}
.sound-bars i{display:block;width:2px;height:24%;border-radius:2px;background:currentColor;transform-origin:center bottom}
.sound-toggle[aria-pressed="true"] .sound-bars i{animation:eb-bars .85s ease-in-out infinite alternate}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:-.34s}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:-.62s}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(4){animation-delay:-.17s}
@keyframes eb-bars{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
.sound-volume{width:72px;accent-color:#e8dcc9;opacity:.72;cursor:pointer}
.sound-dock:not(.is-on) .sound-volume{width:0;opacity:0;pointer-events:none;margin-left:-.5rem}

@media(max-width:759px){
  body::before{opacity:.18}
  .scene__media img,.subhero__media img{transform:translate3d(0,var(--parallax-y),0) scale(1.045)}
  .sound-dock{right:.7rem;bottom:5.4rem}
  .sound-volume{width:58px}
  [data-cinematic-reveal]{--reveal-y:12px;filter:blur(1px)}
}

@media(hover:none),(pointer:coarse){
  .cinematic-tilt.is-revealed{transform:none}
  .cinematic-magnetic{transform:none}
}

@media(prefers-reduced-motion:reduce){
  body::before,.cinematic-grain{display:none}
  .sound-bars i{animation:none!important}
  .scene__media img,.subhero__media img,.scene__content,.subhero__content{transform:none!important}
  [data-cinematic-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hero-copy h1,.subhero h1{clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important}
  .cinematic-tilt,.cinematic-tilt.is-revealed,.cinematic-magnetic{transform:none!important;transition:none!important}
}

/* v2.12.2 licensed darkwave file */
.sound-dock{flex-wrap:wrap;max-width:min(94vw,420px)}
.sound-credit{flex-basis:100%;padding-left:2.45rem;color:rgba(232,220,201,.5);font:700 .42rem/1.2 ui-monospace,monospace;letter-spacing:.1em;white-space:nowrap}
.sound-dock:not(.is-on) .sound-credit{display:none}
@media(max-width:599px){.sound-credit{font-size:.36rem;padding-left:2.2rem}}