@property --light-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

:root {
  color-scheme: dark;
  --light-x: 50%;
  --light-y: 8%;
  --warm: #fff1a8;
  --warm-strong: #ffc95b;
  --cool: #bdeeff;
  --cool-strong: #4eb8ff;
  --ink: #eef8ff;
  --muted: rgba(214, 235, 248, .64);
  --bg: #071523;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  position: relative;
  min-height: 100svh;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: --light-x 40s linear;
}

.atmosphere,
.sky,
.mesh,
.horizon-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.atmosphere { z-index: 0; overflow: hidden; }

.sky {
  transition: opacity 1800ms ease;
}

.sky-day {
  opacity: 1;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), rgba(255, 222, 123, .28) 0%, rgba(255, 197, 88, .08) 19%, transparent 42%),
    radial-gradient(circle at 50% -12%, rgba(95, 205, 255, .24), transparent 47%),
    linear-gradient(155deg, #061421 0%, #0b2439 48%, #12324b 73%, #17334a 100%);
}

.sky-night {
  opacity: 0;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), rgba(123, 205, 255, .26) 0%, rgba(66, 129, 216, .08) 21%, transparent 44%),
    radial-gradient(circle at 50% -15%, rgba(48, 88, 137, .26), transparent 48%),
    linear-gradient(155deg, #020811 0%, #061426 54%, #0c2137 76%, #12283a 100%);
}

body[data-phase="night"] .sky-day { opacity: 0; }
body[data-phase="night"] .sky-night { opacity: 1; }

.mesh {
  opacity: .27;
  background-image:
    linear-gradient(rgba(113, 190, 232, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 190, 232, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 78% 70% at 50% 54%, #000 0%, rgba(0,0,0,.58) 58%, transparent 100%);
}

.horizon-glow {
  background:
    radial-gradient(ellipse 70% 24% at 50% 96%, rgba(22, 111, 167, .14), transparent 68%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.025) 49%, transparent 56%);
}

.celestial-stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  left: 50%;
  top: 9%;
  width: clamp(34px, 3.2vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: left 40s linear, top 40s linear, opacity 1100ms ease;
  will-change: left, top;
}

.orb.is-visible { opacity: 1; }

.sun {
  background: radial-gradient(circle at 34% 32%, #fffde0 0%, #fff2a2 35%, #ffd660 70%, #ffae53 100%);
  box-shadow: 0 0 16px rgba(255, 246, 183, .96), 0 0 44px rgba(255, 210, 90, .52), 0 0 92px rgba(255, 171, 76, .22);
}

.moon {
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0%, rgba(246,248,238,.98) 42%, rgba(194,205,212,.96) 72%, rgba(112,132,151,.92) 100%);
  box-shadow: 0 0 15px rgba(237, 250, 255, .86), 0 0 42px rgba(111, 196, 255, .38), 0 0 88px rgba(73, 132, 226, .19);
}

.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 73% 50%, rgba(10, 31, 48, .48) 0%, rgba(10, 31, 48, .26) 36%, transparent 66%);
}

.light-beam {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 52vw;
  height: clamp(120px, 22vh, 230px);
  transform-origin: 0 50%;
  opacity: .18;
  mix-blend-mode: screen;
  pointer-events: none;
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
  background: radial-gradient(ellipse 108% 100% at 0 50%, rgba(255, 248, 207, .68), rgba(255, 209, 105, .19) 45%, transparent 80%);
  filter: blur(20px);
  transition: left 40s linear, top 40s linear, transform 40s linear, opacity 1200ms ease;
}

body[data-phase="night"] .light-beam {
  background: radial-gradient(ellipse 108% 100% at 0 50%, rgba(235, 251, 255, .62), rgba(111, 199, 255, .17) 46%, transparent 80%);
  opacity: .15;
}

.hero {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(28px, 4.8vh, 58px);
  padding: clamp(32px, 6vh, 72px) 4vw;
}

.brand-row {
  width: min(1180px, 94vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.5vw, 38px);
}

.brand-mark {
  width: clamp(76px, 8.5vw, 126px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(30, 108, 255, .28));
}

.brand-copy {
  min-width: 0;
  text-align: left;
}

.brand-acronym {
  font-size: clamp(44px, 7.2vw, 106px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.055em;
  background: linear-gradient(95deg, #3c8cff, #7edaff 56%, #6d65ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(61, 139, 255, .18));
}

.brand-full {
  margin-top: clamp(10px, 1.5vh, 18px);
  color: rgba(225, 242, 255, .72);
  font-size: clamp(12px, 1.45vw, 20px);
  font-weight: 660;
  line-height: 1.2;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.light-text {
  background-image: radial-gradient(circle at var(--line-light-x, 50%) 50%, var(--warm) 0%, var(--warm-strong) 18%, var(--cool) 61%, var(--cool-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(84, 190, 255, .13));
}

.slogan-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

h1 {
  margin: 0;
  width: max-content;
  max-width: 94vw;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(42px, 7.7vw, 118px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.045em;
}

.countdown-row {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.7vh, 18px);
}

.countdown-label {
  color: rgba(218, 237, 249, .52);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: .24em;
}

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(7px, 1.35vw, 22px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.unit {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
}

.unit strong {
  min-width: 2ch;
  text-align: center;
  font-size: clamp(34px, 6.2vw, 92px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
}

.unit:first-child strong { min-width: 2.15ch; }

.unit small {
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 760;
  letter-spacing: .03em;
  -webkit-text-fill-color: rgba(231, 244, 252, .78);
  color: rgba(231, 244, 252, .78);
}

.separator {
  transform: translateY(-.08em);
  font-size: clamp(26px, 4.2vw, 62px);
  font-weight: 500;
  opacity: .26;
}

.meta {
  position: fixed;
  z-index: 8;
  bottom: 12px;
  color: rgba(205, 230, 246, .32);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .11em;
}

.meta-left { left: 14px; }
.meta-right { right: 14px; text-align: right; }

@media (max-width: 720px) {
  .hero { gap: clamp(25px, 4vh, 38px); padding-inline: 18px; }
  .brand-row { flex-direction: column; gap: 12px; }
  .brand-mark { width: 78px; }
  .brand-copy { text-align: center; }
  .brand-acronym { font-size: clamp(52px, 18vw, 82px); }
  .brand-full { max-width: 88vw; font-size: 10px; line-height: 1.4; letter-spacing: .08em; }
  h1 { white-space: normal; font-size: clamp(38px, 12.5vw, 62px); line-height: 1.08; }
  .countdown { width: 96vw; gap: clamp(3px, 1vw, 8px); }
  .unit { gap: .12em; }
  .unit strong { font-size: clamp(28px, 9.4vw, 44px); }
  .unit small { font-size: 9px; }
  .separator { font-size: 24px; }
  .countdown-label { letter-spacing: .16em; }
  .meta-right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body, .orb, .light-beam, .sky { transition: none !important; }
}