:root {
  --mx: 0;
  --my: 0;
  --px: 50%;
  --py: 50%;
  --heroFlip: 0;
  --section: 0;
  --flip: 0;
  --spotify: #1ed760;
  --ember: #ff3b16;
  --gold: #ffd18a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site {
  width: 100%;
}

.hero-intro {
  position: relative;
  min-height: 220svh;
  overflow: visible;
  background: #000;
  isolation: isolate;
}

.hero-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(135, 0, 0, 0.22), transparent 24rem),
    radial-gradient(circle at 50% 100%, rgba(255, 48, 12, 0.12), transparent 32rem),
    #000;
  isolation: isolate;
}

.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.14), transparent 9rem),
    conic-gradient(from 0deg at 50% 50%, transparent, rgba(255, 42, 16, 0.16), transparent 32%);
  filter: blur(18px);
  animation: slow-turn 14s linear infinite;
}

.storm-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.78;
}

.storm-light::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 56rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 9%),
    radial-gradient(circle, rgba(255, 61, 20, 0.32), transparent 45%),
    radial-gradient(circle, rgba(255, 166, 96, 0.14), transparent 64%);
  filter: blur(20px);
  opacity: 0.5;
  animation: storm-pulse 5.8s infinite;
}

.storm-image {
  position: absolute;
  top: 50%;
  width: clamp(9rem, 20vw, 17rem);
  height: clamp(25rem, 58vh, 38rem);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    saturate(1.25)
    contrast(1.18)
    drop-shadow(0 0 1rem rgba(255, 166, 96, 0.35));
  animation: natural-lightning 6.8s infinite;
}

.storm-left {
  left: max(1.5rem, 9vw);
  background-image: url("assets/hero-lightning-left.png");
  transform: translateY(-53%) rotate(-4deg);
}

.storm-right {
  right: max(1.5rem, 9vw);
  background-image: url("assets/hero-lightning-right.png");
  transform: translateY(-53%) rotate(4deg);
  animation-delay: 1.4s;
}

body:not(.spotify-ready) .storm-image {
  opacity: calc((1 - var(--heroFlip)) * 0.32);
}

.hero-stage {
  position: relative;
  z-index: 2;
  width: clamp(20rem, 48vw, 42rem);
  height: min(78svh, 48rem);
  display: grid;
  place-items: center;
  perspective: 1400px;
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 120px)
    rotateX(calc(var(--my) * -4deg))
    rotateY(calc(var(--mx) * 6deg));
  transition: transform 160ms ease-out;
}

.hero-card {
  position: relative;
  z-index: 3;
  width: min(100%, 42rem);
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--heroFlip) * 180deg));
  transition: transform 180ms ease-out;
}

.hero-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 2rem;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.hero-logo-face {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 44, 18, 0.16), transparent 38%),
    #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 4rem rgba(255, 34, 14, 0.12);
  transform: translateZ(12px);
}

.hero-character-face {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.1), transparent 24%),
    radial-gradient(circle at 50% 75%, rgba(255, 36, 16, 0.2), transparent 42%),
    #020202;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 5rem rgba(255, 42, 16, 0.14);
  transform: rotateY(180deg) translateZ(12px);
}

.hero-logo {
  width: min(92%, 38rem);
  max-height: 76%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1.4rem rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 3.5rem rgba(255, 16, 8, 0.34));
  transform: translateZ(38px);
}

.hero-character {
  height: 116%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateZ(48px) translateY(-3%) scale(1.02);
  filter:
    drop-shadow(0 0 1.1rem rgba(255, 255, 255, 0.14))
    drop-shadow(0 0 2.8rem rgba(255, 42, 16, 0.42))
    drop-shadow(0 2.2rem 2rem rgba(0, 0, 0, 0.82));
}

.hero-character-face::before,
.hero-character-face::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-character-face::before {
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.16), transparent 24% 66%, rgba(255, 53, 16, 0.14)),
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.14), transparent 18%);
  mix-blend-mode: screen;
}

.hero-character-face::after {
  left: 50%;
  bottom: 4%;
  width: 58%;
  height: 8%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.76);
  filter: blur(18px);
  transform: translateX(-50%);
}

.hero-orbit {
  display: none;
}

.hero-orbit-a {
  width: 88%;
  aspect-ratio: 1;
  transform: translateZ(-18px) rotateX(72deg) rotateZ(18deg);
  animation: spin 18s linear infinite;
}

.hero-orbit-b {
  width: 62%;
  aspect-ratio: 1;
  border-color: rgba(255, 54, 22, 0.36);
  transform: translateZ(40px) rotateX(66deg) rotateY(24deg);
  animation: spin 12s linear infinite reverse;
}

.hero-stage-shadow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 0;
  width: 46%;
  height: 9%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(24px);
  transform: translateX(-50%) translateZ(-60px);
}

.intro-cue,
.portal-cue {
  position: absolute;
  left: 50%;
  bottom: 1.45rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(255, 227, 198, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.intro-cue span,
.portal-cue span {
  width: 1.8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.portal-area {
  position: relative;
  min-height: 220svh;
  background: #050101;
}

.viewport {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  perspective: 1200px;
  isolation: isolate;
  cursor: crosshair;
}

.scene {
  position: absolute;
  inset: -1.5vh -1.5vw;
  z-index: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--my) * -2.4deg))
    rotateY(calc(var(--mx) * 3.2deg))
    translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 0)
    scale(1.015);
  transition: transform 160ms ease-out;
}

.scene-layer {
  position: absolute;
  inset: 0;
  background-image: url("assets/inferno-place-crisp.webp");
  background-position: center;
  background-size: cover;
  will-change: transform;
}

.scene-back {
  transform: translateZ(0);
  filter: brightness(0.92) contrast(1.1) saturate(1.15);
}

.scene-glow {
  opacity: 0.3;
  transform: translateZ(36px) scale(1.025);
  background:
    radial-gradient(circle at 50% 56%, rgba(255, 150, 46, 0.5), transparent 27rem),
    radial-gradient(circle at 83% 22%, rgba(255, 222, 169, 0.24), transparent 19rem),
    radial-gradient(circle at 26% 38%, rgba(255, 72, 22, 0.34), transparent 18rem);
  mix-blend-mode: screen;
}

.scene::before,
.scene::after,
.vignette {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene::before {
  z-index: 5;
  background:
    radial-gradient(circle at var(--px) var(--py), rgba(255, 196, 111, 0.12), transparent 18rem),
    linear-gradient(90deg, rgba(4, 1, 1, 0.22), transparent 35%, rgba(4, 1, 1, 0.18));
  mix-blend-mode: soft-light;
}

.scene::after {
  z-index: 6;
  background:
    radial-gradient(ellipse at 50% 104%, rgba(255, 58, 14, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(5, 1, 1, 0), rgba(5, 1, 1, 0.24));
}

.vignette {
  z-index: 7;
  box-shadow: inset 0 0 4.4rem 0.7rem rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 116, 37, 0.12);
}

.lightning {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 238, 200, 0.62), transparent 17rem),
    radial-gradient(circle at 26% 35%, rgba(255, 176, 104, 0.44), transparent 14rem);
  mix-blend-mode: screen;
  animation: flash 6.8s infinite;
}

#emberCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.media-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 18;
  width: clamp(18rem, 36vw, 34rem);
  aspect-ratio: 1.05;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform:
    translate3d(
      calc(-50% + var(--mx) * -18px),
      calc(-50% + var(--my) * -12px),
      170px
    )
    rotateX(calc(10deg + var(--my) * -7deg))
    rotateY(calc(var(--mx) * 13deg))
    rotateZ(calc(var(--section) * -3deg))
    scale(calc(0.96 + var(--section) * 0.04));
  filter:
    drop-shadow(0 0 2.8rem rgba(255, 38, 16, 0.52))
    drop-shadow(0 2.5rem 2.2rem rgba(0, 0, 0, 0.78));
  transition: transform 160ms ease-out;
}

.media-frame {
  position: relative;
  z-index: 3;
  width: min(100%, 34rem);
  aspect-ratio: 1 / 1;
  display: block;
  overflow: visible;
  border: 1px solid rgba(255, 224, 184, 0.28);
  border-radius: 2.2rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
    rgba(10, 2, 1, 0.42);
  box-shadow:
    inset 0 0 2rem rgba(255, 255, 255, 0.08),
    inset 0 -1.2rem 2.6rem rgba(0, 0, 0, 0.46),
    0 0 2.8rem rgba(255, 55, 17, 0.42),
    0 2.2rem 3rem rgba(0, 0, 0, 0.72);
  transform:
    translateZ(78px)
    rotateX(calc(-8deg + var(--my) * 3deg))
    rotateY(calc(var(--mx) * -5deg));
  transform-style: preserve-3d;
}

.media-frame::before,
.media-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.media-frame::before {
  inset: -1px;
  z-index: 4;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset -1.2rem -1.2rem 0 rgba(56, 8, 3, 0.28);
}

.media-frame::after {
  left: 7%;
  right: 7%;
  bottom: -1.2rem;
  height: 2rem;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 48, 15, 0.5);
  filter: blur(20px);
}

.coin-inner,
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
}

.coin-inner {
  transform: rotateY(calc(var(--flip) * 180deg));
  transition: transform 180ms ease-out;
}

.coin-face {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.coin-front {
  background: #070201;
  transform: translateZ(8px);
}

.coin-front video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
  filter: contrast(1.08) saturate(1.12) brightness(1.04);
}

.coin-back {
  display: block;
  padding: 0;
  color: #f5fff8;
  text-align: center;
  text-decoration: none;
  background: #050101;
  border: 1px solid rgba(30, 215, 96, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 3rem rgba(30, 215, 96, 0.11);
  transform: rotateY(180deg) translateZ(8px);
  pointer-events: none;
}

body.spotify-ready .coin-back {
  pointer-events: auto;
}

.coin-back::before,
.coin-back::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.coin-back::before {
  inset: 0.7rem;
  border: 1px solid rgba(30, 215, 96, 0.22);
  border-radius: 1.45rem;
  box-shadow: 0 0 2.4rem rgba(30, 215, 96, 0.1);
}

.coin-back::after {
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.12), transparent 28% 66%, rgba(30, 215, 96, 0.12)),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.4));
  mix-blend-mode: screen;
}

.ghost-promo-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.26), transparent 24% 58%, rgba(255, 98, 31, 0.18)),
    radial-gradient(circle at 75% 18%, rgba(255, 232, 192, 0.22), transparent 26%);
  mix-blend-mode: screen;
}

.stage-ring {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(255, 226, 189, 0.32);
  border-radius: 50%;
  box-shadow:
    inset 0 0 2.3rem rgba(255, 52, 17, 0.22),
    0 0 3.6rem rgba(255, 52, 17, 0.16);
}

.stage-ring-a {
  width: 96%;
  aspect-ratio: 1;
  transform: translateZ(6px) rotateX(72deg) rotateZ(14deg);
  animation: spin 16s linear infinite;
}

.stage-ring-b {
  width: 66%;
  aspect-ratio: 1;
  border-color: rgba(255, 54, 22, 0.42);
  transform: translateZ(78px) rotateX(68deg) rotateY(22deg);
  animation: spin 11s linear infinite reverse;
}

.stage-shadow {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 0;
  width: 58%;
  height: 14%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.66);
  filter: blur(20px);
  transform: translateX(-50%) translateZ(-40px) rotateX(78deg);
}

.portal-cue {
  color: rgba(255, 227, 198, calc(0.78 - var(--section) * 0.78));
  transform: translateX(-50%) translateY(calc(var(--section) * 1.4rem));
}

.viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: radial-gradient(
    30rem circle at var(--px) var(--py),
    rgba(255, 102, 32, 0.18),
    transparent 52%
  );
}

@keyframes flash {
  0%,
  70%,
  73%,
  77%,
  100% {
    opacity: 0;
  }
  71%,
  74% {
    opacity: 0.58;
  }
  75% {
    opacity: 0.14;
  }
}

@keyframes spin {
  to {
    rotate: 0 0 1 360deg;
  }
}

@keyframes slow-turn {
  to {
    rotate: 360deg;
  }
}

@keyframes storm-pulse {
  0%,
  72%,
  78%,
  84%,
  100% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(0.96);
  }
  73%,
  79% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
  80% {
    opacity: 0.42;
  }
}

@keyframes storm-ring {
  0%,
  72%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.94);
  }
  74% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.06);
  }
  80% {
    opacity: 0.34;
  }
}

@keyframes natural-lightning {
  0%,
  68%,
  72%,
  78%,
  100% {
    filter:
      saturate(1.08)
      contrast(1.08)
      brightness(0.82)
      drop-shadow(0 0 0.7rem rgba(255, 88, 32, 0.22));
  }
  69%,
  73% {
    filter:
      saturate(1.45)
      contrast(1.35)
      brightness(1.35)
      drop-shadow(0 0 1.6rem rgba(255, 214, 164, 0.5));
  }
  74% {
    filter:
      saturate(1.25)
      contrast(1.18)
      brightness(0.95)
      drop-shadow(0 0 1rem rgba(255, 120, 44, 0.32));
  }
}

@keyframes bolt-flash {
  0%,
  70%,
  73%,
  76%,
  100% {
    opacity: 0;
  }
  71%,
  74% {
    opacity: 0.82;
  }
  75% {
    opacity: 0.22;
  }
}

@media (max-width: 720px) {
  .scene {
    inset: -2vh -22vw;
  }

  .media-stage {
    width: min(82vw, 24rem);
  }

  .media-frame {
    border-radius: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}