:root {
  --ink: #080a0b;
  --paper: #fffdf0;
  --sun: #ffd900;
  --orange: #f47a16;
  --red: #bc161e;
  --navy: #052f58;
  --pointer-x: 0;
  --pointer-y: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sun);
}

body {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  --gutter: clamp(1rem, 4.5vw, 5.5rem);
}

.scene::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .98) 0 18%, rgba(255, 241, 139, .94) 34%, transparent 61%),
    repeating-linear-gradient(118deg, transparent 0 7%, rgba(255, 255, 255, .28) 7.4% 8.2%, transparent 8.6% 15%),
    linear-gradient(135deg, #fff8d8 0%, #ffd817 52%, #f46d18 100%);
  background-size: 100% 100%, 145% 145%, 100% 100%;
  pointer-events: none;
  transform: scale(1.08) rotate(-1deg);
}

.is-ready .scene::after {
  animation: intro-backdrop 2400ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.opening-logo {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  z-index: 5;
  width: clamp(9.6rem, 16vw, 17rem);
  max-height: min(44vh, 18rem);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .28));
  transform: translate3d(calc(-50vw + 50%), calc(50vh - 50%), 0) scale(2.45);
  transform-origin: center center;
}

.is-ready .opening-logo {
  animation: logo-dock 2400ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.scene__depth,
.scene__art,
.scene__shade,
.scene__glow,
.scene__rays,
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene__depth {
  z-index: -1;
  inset: -2.5%;
  transform: translate(calc(var(--pointer-x) * -10px), calc(var(--pointer-y) * -7px));
  transition: transform 900ms cubic-bezier(.2, .8, .2, 1);
}

.scene__art {
  background-color: var(--sun);
  background-image: linear-gradient(145deg, #fff 0%, #ffe529 47%, #f2631e 70%, var(--navy) 100%);
  background-image: url("background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.09);
  filter: saturate(1.04) contrast(1.02);
}

.is-ready .scene__art {
  animation: art-enter 1800ms cubic-bezier(.18, .84, .24, 1) forwards,
    art-drift 18s 1800ms ease-in-out infinite alternate;
}

.scene__shade {
  background:
    linear-gradient(90deg, rgba(255, 246, 178, .9) 0%, rgba(255, 244, 162, .62) 27%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 55%, rgba(3, 19, 37, .16) 100%);
  mix-blend-mode: multiply;
  opacity: .46;
}

.scene__glow {
  inset: 26% auto auto 29%;
  width: clamp(15rem, 34vw, 38rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,226,31,.14) 43%, transparent 72%);
  filter: blur(12px);
  animation: glow-breathe 6s ease-in-out infinite;
}

.scene__rays {
  inset: 30% auto auto 33%;
  width: clamp(16rem, 37vw, 40rem);
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 5deg, rgba(255,255,255,.1) 0deg 2deg, transparent 2deg 18deg);
  border-radius: 50%;
  filter: blur(2px);
  animation: rays-turn 70s linear infinite;
}

.particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 12px 3px rgba(255, 230, 62, .7);
  opacity: 0;
  animation: particle-drift 8s linear infinite;
}

.particles i:nth-child(1) { left: 14%; top: 48%; animation-delay: -1s; }
.particles i:nth-child(2) { left: 25%; top: 58%; animation-delay: -5s; animation-duration: 11s; }
.particles i:nth-child(3) { left: 41%; top: 37%; animation-delay: -3s; }
.particles i:nth-child(4) { left: 52%; top: 55%; animation-delay: -7s; animation-duration: 10s; }
.particles i:nth-child(5) { left: 68%; top: 42%; animation-delay: -2s; animation-duration: 12s; }
.particles i:nth-child(6) { left: 82%; top: 61%; animation-delay: -6s; }

.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(47rem, 52vw);
  height: 100%;
  padding:
    max(clamp(1.5rem, 6vh, 4.5rem), env(safe-area-inset-top))
    var(--gutter)
    max(clamp(1.25rem, 4vh, 3rem), env(safe-area-inset-bottom));
}

.status,
.identity,
.countdown,
.powered-by,
.edition {
  opacity: 0;
  transform: translateY(24px);
}

.is-ready .status { animation: content-enter 650ms 1450ms cubic-bezier(.16, 1, .3, 1) forwards; }
.is-ready .identity { animation: content-enter 850ms 1620ms cubic-bezier(.16, 1, .3, 1) forwards; }
.is-ready .countdown { animation: content-enter 900ms 1880ms cubic-bezier(.16, 1, .3, 1) forwards; }
.is-ready .powered-by { animation: content-enter 800ms 2180ms cubic-bezier(.16, 1, .3, 1) forwards; }
.is-ready .edition { animation: content-enter 800ms 2080ms cubic-bezier(.16, 1, .3, 1) forwards; }

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 clamp(.75rem, 2vh, 1.3rem);
  padding: .48rem .75rem .43rem;
  background: var(--red);
  color: white;
  box-shadow: 6px 6px 0 rgba(5, 47, 88, .95);
  font-size: clamp(.65rem, .85vw, .84rem);
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-1.5deg) translateY(24px);
}

.status span {
  width: .48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe750;
  box-shadow: 0 0 0 4px rgba(255, 231, 80, .2);
  animation: badge-pulse 1.8s ease-in-out infinite;
}

.identity {
  text-transform: uppercase;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.45));
}

.title {
  display: flex;
  align-items: baseline;
  gap: clamp(.35rem, .8vw, .8rem);
  margin: 0;
  white-space: nowrap;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(3.1rem, 6.2vw, 7.8rem);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: .79;
}

.title span { color: var(--ink); }
.title em { color: var(--orange); font-style: normal; }
.title b { color: var(--red); font-weight: inherit; }

.event-name {
  margin: clamp(.8rem, 2vh, 1.45rem) 0 .45rem;
  color: var(--ink);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1rem, 1.75vw, 2rem);
  letter-spacing: .07em;
  line-height: 1;
}

.event-name strong { color: var(--red); font-weight: inherit; }
.event-name span { color: var(--navy); }

.event-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  font-size: clamp(.62rem, .8vw, .85rem);
  font-weight: 900;
  letter-spacing: .075em;
}

.event-meta i {
  width: 1.65rem;
  height: 3px;
  background: var(--red);
  transform: skewX(-30deg);
}

.countdown {
  position: relative;
  width: min(100%, 42rem);
  margin-top: clamp(1.2rem, 4vh, 3.5rem);
  padding: clamp(.85rem, 1.5vw, 1.2rem) clamp(.9rem, 2vw, 1.65rem) clamp(.9rem, 1.6vw, 1.3rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.36);
  border-left: 5px solid var(--red);
  background: rgba(5, 20, 31, .83);
  box-shadow: 0 20px 50px rgba(3, 22, 44, .28), inset 0 1px rgba(255,255,255,.14);
  color: white;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.countdown::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: skewX(-20deg);
  animation: panel-sheen 7s 2s ease-in-out infinite;
}

.countdown__eyebrow {
  margin: 0 0 .55rem;
  color: #ffd72c;
  font-size: clamp(.55rem, .7vw, .7rem);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.countdown__grid {
  display: grid;
  grid-template-columns: minmax(3.2rem, 1.35fr) auto repeat(3, minmax(2.7rem, 1fr) auto);
  grid-template-columns: minmax(3.2rem, 1.35fr) auto minmax(2.7rem, 1fr) auto minmax(2.7rem, 1fr) auto minmax(2.7rem, 1fr);
  align-items: start;
  gap: clamp(.25rem, .75vw, .75rem);
}

.time {
  min-width: 0;
  text-align: center;
}

.time strong {
  display: block;
  color: white;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2rem, 4.2vw, 5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: .9;
  text-shadow: 3px 3px 0 rgba(188, 22, 30, .76);
  transform-origin: center bottom;
}

.time strong.is-ticking {
  animation: digit-tick 360ms cubic-bezier(.2, .8, .2, 1);
}

.time span {
  display: block;
  margin-top: .48rem;
  color: rgba(255,255,255,.72);
  font-size: clamp(.48rem, .65vw, .67rem);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.countdown__grid > i {
  color: #ffd72c;
  font-family: Impact, sans-serif;
  font-size: clamp(1.55rem, 3.1vw, 3.7rem);
  font-style: normal;
  line-height: .85;
  animation: separator-pulse 1s ease-in-out infinite;
}

.countdown__complete {
  display: none;
  margin: .2rem 0 0;
  color: white;
  font-family: Impact, sans-serif;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--red);
}

.countdown.is-complete .countdown__grid,
.countdown.is-complete .countdown__eyebrow {
  display: none;
}

.countdown.is-complete .countdown__complete {
  display: block;
}

.powered-by {
  position: absolute;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: max(1.3rem, env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(.65rem, .85vw, .85rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 1px 1px 5px rgba(0,0,0,.75);
}

.edition {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1.3rem, env(safe-area-inset-bottom));
  margin: 0;
  color: rgba(255,255,255,.82);
  font-family: Impact, sans-serif;
  font-size: clamp(.7rem, 1vw, 1rem);
  letter-spacing: .2em;
  text-shadow: 1px 1px 5px rgba(0,0,0,.7);
}

.edition span { color: #ffd72c; }
.edition b { color: #ff4a23; }

.noscript {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 10;
  margin: 0;
  padding: .75rem;
  background: #111;
  color: white;
  text-align: center;
  font: 700 .8rem Arial, sans-serif;
}

@keyframes art-enter {
  to { opacity: 1; transform: scale(1.035); }
}

@keyframes logo-dock {
  0% {
    opacity: 0;
    transform: translate3d(calc(-50vw + 50%), calc(50vh - 50%), 0) scale(2.45);
  }
  15% {
    opacity: 1;
    transform: translate3d(calc(-50vw + 50%), calc(50vh - 50%), 0) scale(2.45);
  }
  38% {
    opacity: 1;
    transform: translate3d(calc(-50vw + 50%), calc(50vh - 50%), 0) scale(2.45);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes intro-backdrop {
  0% {
    opacity: 1;
    background-position: center, 0% 0%, center;
    transform: scale(1.08) rotate(-1deg);
  }
  38% {
    opacity: 1;
    background-position: center, 42% 28%, center;
    transform: scale(1.14) rotate(1deg);
  }
  78%, 100% {
    opacity: 0;
    background-position: center, 100% 65%, center;
    transform: scale(1.22) rotate(2deg);
  }
}

@keyframes art-drift {
  from { transform: scale(1.035) translate3d(-.25%, 0, 0); }
  to { transform: scale(1.07) translate3d(.4%, -.45%, 0); }
}

@keyframes content-enter {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes badge-pulse {
  50% { opacity: .55; transform: scale(.72); box-shadow: 0 0 0 8px rgba(255,231,80,0); }
}

@keyframes glow-breathe {
  50% { opacity: .62; transform: scale(1.09); }
}

@keyframes rays-turn {
  to { transform: rotate(360deg); }
}

@keyframes particle-drift {
  0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.6); }
  22%, 72% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(34px, -65px, 0) scale(1.25); }
}

@keyframes panel-sheen {
  0%, 68% { left: -40%; }
  86%, 100% { left: 125%; }
}

@keyframes separator-pulse {
  50% { opacity: .38; }
}

@keyframes digit-tick {
  0% { opacity: .2; transform: translateY(-8px) rotateX(-65deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}

@media (max-width: 900px) {
  .scene__art { background-position: 52% center; }
  .scene__shade {
    background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,239,141,.62) 29%, transparent 57%);
    opacity: .7;
  }
  .hero {
    width: 100%;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .identity { max-width: calc(100% - clamp(10rem, 25vw, 17rem)); }
  .title { flex-wrap: wrap; white-space: normal; font-size: clamp(3rem, 11vw, 6.2rem); }
  .event-name { font-size: clamp(.9rem, 3.1vw, 1.55rem); }
  .event-meta { font-size: clamp(.56rem, 1.8vw, .78rem); }
  .countdown { width: min(100%, 35rem); margin-top: clamp(1rem, 3vh, 2.2rem); }
  .time strong { font-size: clamp(2rem, 8.7vw, 4rem); }
  .countdown__grid > i { font-size: clamp(1.45rem, 6vw, 2.8rem); }
}

@media (max-width: 520px) {
  .scene { --gutter: clamp(.8rem, 4vw, 1.2rem); }
  .scene__depth { inset: -1.5%; }
  .opening-logo { width: clamp(8.2rem, 36vw, 12rem); max-height: 36vh; }
  .scene__art { background-position: 58% center; }
  .scene__glow { left: 12%; top: 27%; width: 72vw; }
  .scene__rays { left: 5%; top: 29%; width: 86vw; }
  .hero { padding-top: max(clamp(1rem, 4vh, 2.4rem), env(safe-area-inset-top)); }
  .status { margin-bottom: clamp(.7rem, 2vh, 1rem); padding: .4rem .58rem .36rem; }
  .identity { max-width: 62vw; }
  .title { flex-wrap: wrap; gap: .18rem .35rem; white-space: normal; font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .event-name { margin-top: .72rem; font-size: clamp(.86rem, 4vw, 1.2rem); }
  .event-meta { gap: .42rem; font-size: clamp(.52rem, 2.25vw, .68rem); }
  .event-meta i { width: .9rem; }
  .countdown { padding: .72rem .62rem .78rem; border-left-width: 4px; }
  .countdown__eyebrow { margin-left: .18rem; }
  .countdown__grid { gap: clamp(.14rem, 1vw, .36rem); }
  .time strong { font-size: clamp(1.72rem, 9.8vw, 2.75rem); text-shadow: 2px 2px 0 rgba(188,22,30,.8); }
  .time span { margin-top: .35rem; font-size: clamp(.42rem, 1.8vw, .56rem); letter-spacing: .09em; }
  .countdown__grid > i { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  .edition { font-size: .58rem; }
  .particles i:nth-child(n+5) { display: none; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .scene__art { background-position: center 58%; }
  .opening-logo { width: clamp(7.6rem, 20vw, 11rem); max-height: 48vh; }
  .scene__shade { background: linear-gradient(90deg, rgba(255,250,205,.86), rgba(255,241,127,.42) 43%, transparent 64%); }
  .hero {
    width: min(54vw, 40rem);
    padding-top: max(.75rem, env(safe-area-inset-top));
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  }
  .status { margin-bottom: .55rem; padding: .32rem .55rem; font-size: .54rem; }
  .title { font-size: clamp(2.2rem, 7.5vw, 4.7rem); }
  .event-name { margin-top: .55rem; font-size: clamp(.75rem, 2.1vw, 1.2rem); }
  .event-meta { font-size: clamp(.46rem, 1.2vw, .64rem); }
  .countdown { margin-top: clamp(.55rem, 2.3vh, 1rem); padding: .55rem .7rem .62rem; }
  .countdown__eyebrow { margin-bottom: .35rem; }
  .time strong { font-size: clamp(1.5rem, 5vw, 2.7rem); }
  .time span { margin-top: .22rem; }
  .countdown__grid > i { font-size: clamp(1rem, 3.5vw, 1.9rem); }
  .powered-by,
  .edition { bottom: max(.55rem, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scene__depth { transform: none; }
  .scene__art { opacity: 1; transform: none; }
  .scene::after { opacity: 0; transform: none; }
  .opening-logo { opacity: 1; transform: none; }
  .status,
  .identity,
  .countdown,
  .powered-by,
  .edition { opacity: 1; transform: none; }
}