/* ROAR 2026 countdown lander
   Desktop: 1:1 stage built on the 1920x1080 mockup grid, scaled to the viewport.
   Mobile: same content reflowed into a neon panel. */

@font-face {
  font-family: "Skyrox";
  src: url("../fonts/Skyrox-MediumCondensed.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Menlo Web";
  src: url("../fonts/Menlo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Menlo Web";
  src: url("../fonts/Menlo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --violet: #9713fe;
  --indigo: #4f2bcc;
  --neon: #b31cff;
  --neon-hi: #f2c8ff;
  --pink: #ff1468;
  --ink: #12042f;
  --white: #ffffff;
  --silver: #e1dfe3;
  --mono: "Menlo Web", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --display: "Skyrox", "Arial Black", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--white);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

h1, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

.num, .date { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; }

.label { text-transform: uppercase; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--mono);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--violet) 0%, var(--indigo) 100%);
  transition: filter .2s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn:focus-visible { outline: 3px solid var(--neon-hi); outline-offset: 4px; }

.date, .venue { color: var(--silver); }
.venue { font-weight: 700; text-transform: uppercase; }

/* =========================================================
   MOBILE / PORTRAIT (default)
   ========================================================= */

.plate { display: none; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 4, 47, .35) 0%, rgba(18, 4, 47, .15) 40%, rgba(18, 4, 47, .55) 100%),
    url("../img/bg-mobile.webp") center / cover no-repeat;
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  padding:
    calc(28px + env(safe-area-inset-top, 0px))
    16px
    calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Neon panel */
.panel {
  --cut: 28px;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 46px 18px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 0 10px rgba(179, 28, 255, .65));
}
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.panel::before {
  inset: 0;
  background: linear-gradient(180deg, var(--neon-hi) 0%, var(--neon) 6%, var(--neon) 94%, var(--neon-hi) 100%);
}
.panel::after {
  inset: 6px;
  --cut: 25px;
  background:
    radial-gradient(circle at 26px 26px, var(--pink) 0 6px, rgba(255, 20, 104, .45) 7px, transparent 13px),
    radial-gradient(circle at calc(100% - 26px) 26px, var(--pink) 0 6px, rgba(255, 20, 104, .45) 7px, transparent 13px),
    repeating-linear-gradient(180deg, rgba(60, 40, 160, .22) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(30, 8, 74, .94) 0%, rgba(16, 4, 44, .96) 100%);
}

.logo { position: relative; width: 100%; max-width: 420px; }

/* Three.js roar canvas: logo box plus 30% / 50% room for shockwaves */
.logo-fx {
  position: absolute;
  left: -30%;
  top: -50%;
  width: 160%;
  height: 200%;
  pointer-events: none;
}
.logo.fx-ready > img { visibility: hidden; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 420px;
  margin-top: 26px;
}
.unit { display: flex; flex-direction: column; align-items: center; }
.num { font-size: clamp(26px, 8.4vw, 44px); line-height: 1; }
.label { margin-top: 10px; font-size: clamp(11px, 3.2vw, 14px); line-height: 1; }

.cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-top: 28px;
}
.btn { width: 100%; height: 56px; font-size: 18px; }

/* Date tab hanging off the panel */
.event {
  --cut: 34px;
  position: relative;
  z-index: 2;
  width: min(86%, 400px);
  margin-top: -34px;
  padding: 20px 28px 22px;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(179, 28, 255, .65));
}
.event::before,
.event::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, var(--cut) 100%);
}
.event::before { inset: 0; background: var(--neon); }
.event::after {
  inset: 6px 6px 6px 6px;
  --cut: 31px;
  background: linear-gradient(180deg, #120534 0%, #24083f 100%);
}
.date { display: block; font-size: clamp(24px, 7.6vw, 38px); line-height: 1; }
.venue { margin-top: 10px; font-size: clamp(14px, 4.4vw, 20px); line-height: 1.1; }

/* =========================================================
   GLOW + SOUND TOGGLE (shared)
   ========================================================= */

.glow {
  --gx: 52%;
  --gy: 24%;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
}
/* ambient breathing light */
.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 42% at 50% 40%, rgba(150, 28, 255, .55), rgba(150, 28, 255, 0) 72%),
    radial-gradient(ellipse 26% 55% at 0% 50%, rgba(255, 20, 104, .45), rgba(255, 20, 104, 0) 70%),
    radial-gradient(ellipse 26% 55% at 100% 50%, rgba(255, 20, 104, .45), rgba(255, 20, 104, 0) 70%);
  opacity: .22;
  animation: glow-breathe 6s ease-in-out infinite alternate;
}
/* roar burst from the mouth */
.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx) var(--gy),
    rgba(255, 60, 150, .9) 0, rgba(190, 40, 255, .55) 14%, rgba(120, 30, 255, .18) 34%, rgba(120, 30, 255, 0) 55%);
  transform-origin: var(--gx) var(--gy);
  opacity: 0;
}
.glow-ring {
  position: absolute;
  left: var(--gx);
  top: var(--gy);
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  border-radius: 50%;
  border: 2px solid rgba(255, 70, 160, .8);
  box-shadow: 0 0 40px 6px rgba(190, 40, 255, .55), inset 0 0 40px 6px rgba(255, 40, 140, .35);
  opacity: 0;
  transform: scale(.05);
}

.is-roaring .glow::after { animation: glow-burst 2.2s cubic-bezier(.2, .7, .3, 1) both; }
.is-roaring .glow-ring { animation: glow-ring 1.5s .32s cubic-bezier(.15, .6, .3, 1) both; }
.is-roaring .plate,
.is-roaring .backdrop { animation: bg-flash 2.2s ease-out both; }

@keyframes glow-breathe { from { opacity: .16; } to { opacity: .42; } }
@keyframes glow-burst {
  0%   { opacity: 0;   transform: scale(.6); }
  12%  { opacity: .15; transform: scale(.7); }
  20%  { opacity: 1;   transform: scale(1); }
  55%  { opacity: .55; transform: scale(1.08); }
  100% { opacity: 0;   transform: scale(1.2); }
}
@keyframes glow-ring {
  0%   { opacity: 0;  transform: scale(.05); }
  10%  { opacity: 1; }
  100% { opacity: 0;  transform: scale(2.4); }
}
@keyframes bg-flash {
  0%, 14% { filter: brightness(1) saturate(1); }
  20%     { filter: brightness(1.32) saturate(1.25); }
  55%     { filter: brightness(1.1) saturate(1.08); }
  100%    { filter: brightness(1) saturate(1); }
}

.sound-toggle {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  color: var(--white);
  background: linear-gradient(90deg, var(--violet) 0%, var(--indigo) 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: filter .2s ease;
}
.sound-toggle:hover { filter: brightness(1.15); }
.sound-toggle:focus-visible { outline: 3px solid var(--neon-hi); outline-offset: 3px; clip-path: none; }
.sound-toggle .ico-on { display: none; }
.sound-toggle[aria-pressed="true"] .ico-on { display: inline; }
.sound-toggle[aria-pressed="true"] .ico-off { display: none; }
.sound-toggle[hidden] { display: none; }

/* =========================================================
   DESKTOP / LANDSCAPE: 1:1 stage on the 1920x1080 grid
   1 design px = var(--u)
   ========================================================= */

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  :root {
    /* cover: the stage always fills the viewport edge to edge */
    --u: max(100vw / 1920, 100vh / 1080);
  }
  @supports (height: 100dvh) {
    :root { --u: max(100vw / 1920, 100dvh / 1080); }
  }

  body { overflow: hidden; height: 100vh; height: 100dvh; }

  .backdrop { display: none; }

  .stage {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: calc(var(--u) * 1920);
    height: calc(var(--u) * 1080);
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
  }

  .plate {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .panel { display: contents; }

  .glow {
    position: absolute;
    --gx: 50.9%;   /* lion mouth on the 1920x1080 grid */
    --gy: 32.5%;
  }
  .glow-ring {
    width: calc(var(--u) * 1100);
    height: calc(var(--u) * 1100);
    margin: calc(var(--u) * -550) 0 0 calc(var(--u) * -550);
  }

  .panel::before, .panel::after, .event::before, .event::after { content: none; }

  .logo {
    position: absolute;
    left: calc(var(--u) * 588);
    top: calc(var(--u) * 159);
    width: calc(var(--u) * 744);
    max-width: none;
  }

  .countdown {
    position: absolute;
    left: calc(var(--u) * 534.33);
    top: calc(var(--u) * var(--cd-top, 576));
    width: calc(var(--u) * 853.33);
    max-width: none;
    margin: 0;
  }
  /* optical nudges so each column lands on the mockup's glyph positions */
  .unit:nth-child(1) { transform: translateX(calc(var(--u) * 1)); }
  .unit:nth-child(2) { transform: translateX(calc(var(--u) * 2.5)); }
  .unit:nth-child(3) { transform: translateX(calc(var(--u) * 2)); }
  .num { font-size: calc(var(--u) * 72); }
  .label {
    margin-top: calc(var(--u) * var(--label-gap, 8));
    font-size: calc(var(--u) * 22);
  }

  .cta {
    position: absolute;
    left: calc(var(--u) * 673);
    top: calc(var(--u) * 713);
    flex-direction: row;
    gap: calc(var(--u) * 24);
    width: auto;
    max-width: none;
    margin: 0;
  }
  .btn {
    width: calc(var(--u) * 275);
    height: calc(var(--u) * 72);
    font-size: calc(var(--u) * 27);
  }

  .event {
    position: absolute;
    left: calc(var(--u) * 560);
    top: calc(var(--u) * var(--ev-top, 867));
    width: calc(var(--u) * 800);
    margin: 0;
    padding: 0;
    filter: none;
  }
  .date { font-size: calc(var(--u) * 70); }
  .venue {
    margin-top: calc(var(--u) * var(--venue-gap, 7));
    font-size: calc(var(--u) * 40);
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .sound-toggle { transition: none; }
  .glow::before, .glow::after, .glow-ring, .plate, .backdrop { animation: none !important; }
}

/* =========================================================
   TRAILER POPUP
   ========================================================= */

.modal-open body { overflow: hidden; }

.trailer {
  width: min(92vw, 1280px, calc((100dvh - 120px) * 16 / 9));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: visible;
}
.trailer::backdrop {
  background: rgba(10, 2, 30, .86);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.trailer-frame {
  --cut: 22px;
  position: relative;
  padding: 5px;
  background: linear-gradient(180deg, var(--neon-hi) 0%, var(--neon) 8%, var(--neon) 92%, var(--neon-hi) 100%);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 0 18px rgba(179, 28, 255, .7));
}
.trailer-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0220;
  clip-path: polygon(calc(var(--cut) - 2px) 0, 100% 0, 100% calc(100% - var(--cut) + 2px), calc(100% - var(--cut) + 2px) 100%, 0 100%, 0 calc(var(--cut) - 2px));
}
.trailer-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.trailer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--white);
  background: linear-gradient(90deg, var(--violet) 0%, var(--indigo) 100%);
  cursor: pointer;
  transition: filter .2s ease;
}
.trailer-close:hover { filter: brightness(1.15); }
.trailer-close:focus-visible { outline: 3px solid var(--neon-hi); outline-offset: 3px; }

.trailer[open] { animation: trailer-in .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes trailer-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .trailer[open] { animation: none; } }