:root {
  --bg: #032e30;
  --ice: #e2f0ef;
  --mist: #a9d4d6;
  --sea: #82c3c5;
  --coral: #c46960;
  --accent: var(--sea);
  --accent-soft: rgba(130, 195, 197, 0.55);
  --stage-w: 2560px;
  --stage-h: 1440px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ice);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: translate(-50%, -50%) scale(min(100vw / var(--stage-w), 100vh / var(--stage-h)));
  transform-origin: center center;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(closest-side at 18% 22%, var(--accent-soft), transparent 72%),
    radial-gradient(closest-side at 82% 78%, rgba(196, 105, 96, 0.28), transparent 70%),
    radial-gradient(closest-side at 70% 18%, rgba(226, 240, 239, 0.12), transparent 60%),
    linear-gradient(160deg, #05484a 0%, var(--bg) 46%, #021c1d 100%);
  animation: drift 22s ease-in-out infinite alternate;
}

.sky::before,
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sky::before {
  background-image:
    radial-gradient(3px 3px at 12% 18%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 28% 72%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(3px 3px at 46% 34%, rgba(255, 255, 255, 0.55) 50%, transparent 52%),
    radial-gradient(2px 2px at 63% 14%, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
    radial-gradient(3px 3px at 78% 48%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(2px 2px at 88% 22%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(2px 2px at 18% 88%, rgba(255, 255, 255, 0.5) 50%, transparent 52%),
    radial-gradient(3px 3px at 54% 82%, rgba(255, 255, 255, 0.65) 50%, transparent 52%),
    radial-gradient(2px 2px at 92% 76%, rgba(255, 255, 255, 0.55) 50%, transparent 52%);
  animation: twinkle 4.8s ease-in-out infinite;
}

.sky::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 4px,
    rgba(0, 0, 0, 0.08) 5px
  );
  opacity: 0.35;
  pointer-events: none;
}

.frame {
  position: absolute;
  inset: 64px 82px;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: inset 0 0 106px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  border: 6px solid var(--accent);
}

.frame::before {
  top: -3px;
  left: -3px;
  border-right: 0;
  border-bottom: 0;
}

.frame::after {
  right: -3px;
  bottom: -3px;
  border-left: 0;
  border-top: 0;
}

main {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 2100px;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mark {
  width: 198px;
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.45));
}

.brand {
  margin: 0;
  font-family: Orbitron, sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--mist);
}

h1 {
  margin: 32px 0 0;
  font-family: Orbitron, sans-serif;
  font-weight: 700;
  font-size: 176px;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 38px color-mix(in srgb, var(--accent) 65%, transparent);
}

.meter {
  width: 854px;
  height: 8px;
  margin: 48px 0 34px;
  border-radius: 999px;
  background: rgba(226, 240, 239, 0.16);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), #fff);
  animation: sweep 2.4s ease-in-out infinite;
}

.sub {
  margin: 0;
  font-size: 48px;
  letter-spacing: 0.08em;
  color: var(--ice);
}

.handle {
  margin: 38px 0 0;
  padding: 16px 34px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, white 10%);
  background: rgba(2, 20, 21, 0.45);
  font-size: 38px;
  letter-spacing: 0.04em;
  color: #fff;
}

.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.scene-art-scrim {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3, 18, 20, 0.72) 0%, rgba(3, 18, 20, 0.28) 42%, rgba(3, 18, 20, 0.62) 100%);
  pointer-events: none;
}

.scene.has-art .scene-art,
.scene.has-art .scene-art-scrim { display: block; }

.scene.has-art .sky { display: none; }

.scene-motion { --spark: 130, 195, 197; }

.scene-motion .sky {
  background: linear-gradient(160deg, #05484a 0%, var(--bg) 46%, #021c1d 100%);
}

.scene-motion .sky::before { z-index: 1; }
.scene-motion .sky::after { z-index: 2; }

.scene-motion .aurora {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.scene-motion .aurora-a {
  width: 78%;
  height: 78%;
  left: -8%;
  top: -18%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  animation: aurora-a 26s ease-in-out infinite alternate;
}

.scene-motion .aurora-b {
  width: 70%;
  height: 70%;
  left: 42%;
  top: 38%;
  background: radial-gradient(closest-side, rgba(196, 105, 96, 0.34), transparent 70%);
  animation: aurora-b 32s ease-in-out infinite alternate;
}

.scene-motion .aurora-c {
  width: 54%;
  height: 54%;
  left: 48%;
  top: -8%;
  background: radial-gradient(closest-side, rgba(226, 240, 239, 0.2), transparent 68%);
  animation: aurora-c 22s ease-in-out infinite alternate;
}

.scene-motion .edge-spark {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene-motion .mark {
  animation: starting-float 4.6s ease-in-out infinite;
}

.scene-motion h1 {
  animation: starting-glow 2.6s ease-in-out infinite;
}

.scene-motion .sub {
  animation: starting-fade 3.2s ease-in-out infinite;
}

.scene-motion .handle {
  animation: starting-handle 2.8s ease-in-out infinite;
}

.scene-motion .frame::before,
.scene-motion .frame::after {
  animation: starting-corner 3.4s ease-in-out infinite;
}

.scene-motion .meter::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 22%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0.7;
  animation: sweep 3.6s ease-in-out infinite reverse;
}

.scene-motion .meter { position: relative; }

.scene-starting,
.scene-ending {
  --accent: var(--coral);
  --accent-soft: rgba(196, 105, 96, 0.48);
  --spark: 196, 105, 96;
}

.scene-starting main {
  top: 31%;
  z-index: 2;
}

.scene-starting .scout-space {
  position: absolute;
  z-index: 0;
  left: 96px;
  top: 88px;
  width: 1560px;
  height: 1120px;
  object-fit: cover;
  object-position: 22% 46%;
  pointer-events: none;
  mask-image:
    linear-gradient(90deg, #000 58%, transparent 92%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 72%, transparent 96%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, #000 58%, transparent 92%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 72%, transparent 96%);
  -webkit-mask-composite: source-in;
}

.scene-starting .scout {
  position: absolute;
  z-index: 1;
  left: 120px;
  right: 120px;
  bottom: 108px;
  height: 500px;
  pointer-events: none;
}

.scene-starting .scout-ground {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 390px;
  height: 320px;
  object-fit: cover;
  object-position: right bottom;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35));
}

.scene-starting .scout-party {
  position: absolute;
  left: 4px;
  bottom: 252px;
  z-index: 2;
  height: 250px;
  width: auto;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.4));
}

.scene-starting .scout-vista {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1080px;
  height: 440px;
  object-fit: cover;
  object-position: 72% center;
  border-radius: 96px 28px 28px 28px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  mask-image:
    linear-gradient(90deg, transparent, #000 16%),
    linear-gradient(180deg, transparent, #000 22%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 16%),
    linear-gradient(180deg, transparent, #000 22%);
  -webkit-mask-composite: source-in;
}

.scene-ending main {
  top: 32%;
  z-index: 3;
}

.scene-ending .skyworks {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene-ending .finale {
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 88px;
  width: 2320px;
  height: 1252px;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 28px;
  pointer-events: none;
}

.scene-ending .meter span {
  width: 100%;
  animation: none;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
}

.scene-raid {
  --accent: #f0c14b;
  --accent-soft: rgba(240, 193, 75, 0.45);
}

.scene-raid .sky { display: none; }

.raid-land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.raid-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 2, 24, 0.22) 0%, rgba(6, 2, 24, 0) 36%);
  pointer-events: none;
}

.scene-raid main {
  top: 64px;
  right: auto;
  bottom: auto;
  width: max-content;
  max-width: 2100px;
  transform: translate(-50%, 0);
  padding: 28px 72px 36px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 36px rgba(3, 20, 22, 0.12);
}

.scene-raid .mark {
  width: 92px;
  margin-bottom: 6px;
}

.scene-raid .brand {
  font-size: 28px;
  color: #065758;
}

.scene-raid h1 {
  margin-top: 10px;
  font-size: 108px;
  line-height: 0.98;
  color: #032e30;
  animation: raid-glow 1.4s ease-in-out infinite;
}

.scene-raid .meter {
  width: 560px;
  margin: 18px 0 12px;
  background: rgba(6, 87, 88, 0.16);
}

.scene-raid .meter span { animation-duration: 1.15s; }

.scene-raid .sub {
  font-size: 34px;
  color: #065758;
  text-shadow: none;
}

.scene-raid .handle {
  margin-top: 16px;
  font-size: 32px;
  color: #032e30;
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(6, 87, 88, 0.45);
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1.2%, 0) scale(1.06); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@keyframes aurora-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(22%, 16%, 0) scale(1.12); }
  100% { transform: translate3d(8%, 30%, 0) scale(0.92); }
}

@keyframes aurora-b {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-26%, -18%, 0) scale(1.16); }
  100% { transform: translate3d(-10%, -6%, 0) scale(0.9); }
}

@keyframes aurora-c {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-18%, 22%, 0) scale(1.2); }
  100% { transform: translate3d(14%, 8%, 0) scale(0.88); }
}

@keyframes starting-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

@keyframes starting-glow {
  0%, 100% { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { text-shadow: 0 0 72px color-mix(in srgb, var(--accent) 95%, transparent), 0 0 16px rgba(255, 255, 255, 0.4); }
}

@keyframes starting-fade {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

@keyframes starting-handle {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 65%, transparent); }
}

@keyframes starting-corner {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 16px var(--accent)); }
}

@keyframes raid-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(240, 193, 75, 0.15); }
  50% { text-shadow: 0 0 22px rgba(240, 193, 75, 0.55); }
}

.scene-brb {
  --accent: var(--coral);
  --accent-soft: rgba(196, 105, 96, 0.45);
}

.scene-brb .sky { display: none; }

.scene-brb .raid-scrim {
  background: linear-gradient(to top, rgba(3, 20, 22, 0.28) 0%, rgba(3, 20, 22, 0) 30%);
}

.scene-brb main {
  top: auto;
  right: auto;
  bottom: 96px;
  width: max-content;
  max-width: 2100px;
  transform: translate(-50%, 0);
  padding: 12px 48px 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 36px rgba(3, 20, 22, 0.12);
}

.scene-brb .mark {
  width: 52px;
  margin-bottom: 2px;
}

.scene-brb .brand {
  font-size: 20px;
  color: #065758;
}

.scene-brb h1 {
  margin-top: 2px;
  font-size: 64px;
  line-height: 0.96;
  color: #032e30;
  animation: brb-glow 1.8s ease-in-out infinite;
}

.scene-brb .meter {
  width: 420px;
  height: 6px;
  margin: 8px 0 6px;
  background: rgba(6, 87, 88, 0.16);
}

.scene-brb .meter span { animation-duration: 1.15s; }

.scene-brb .sub {
  font-size: 24px;
  color: #065758;
  text-shadow: none;
}

.scene-brb .handle {
  margin-top: 8px;
  padding: 6px 18px;
  font-size: 22px;
  color: #032e30;
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(6, 87, 88, 0.45);
}

@keyframes brb-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(196, 105, 96, 0.18); }
  50% { text-shadow: 0 0 26px rgba(196, 105, 96, 0.6); }
}