@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@property --glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --glow: 0;
  --fx: 50%;
  --fy: 16%;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #06070b;
}

body {
  overflow: hidden;
  color: #f4ecdf;
  background:
    radial-gradient(ellipse 90% 42% at 50% 115%, rgba(150, 42, 8, 0.42), transparent 62%),
    radial-gradient(ellipse 80% 48% at 50% -12%, rgba(28, 34, 72, 0.85), transparent 58%),
    #06070b;
}

#storm, .floor, .flash, .flare, .vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#storm { z-index: 0; display: block; }

.floor {
  z-index: 1;
  background: radial-gradient(
    ellipse 78% 50% at 50% 112%,
    rgba(255, 88, 16, calc(0.22 + var(--glow) * 0.38)),
    transparent 70%
  );
}

.vignette {
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.72)),
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.58) 100%);
}

.flash {
  z-index: 3;
  opacity: 0;
  background:
    radial-gradient(
      circle at var(--fx) var(--fy),
      rgba(255, 255, 255, 0.95) 0%,
      rgba(198, 210, 255, 0.55) 16%,
      rgba(104, 86, 210, 0.2) 40%,
      rgba(0, 0, 0, 0) 64%
    ),
    rgba(176, 188, 255, 0.34);
  mix-blend-mode: screen;
}

.flare {
  z-index: 3;
  opacity: 0;
  top: calc(var(--fy) - 12vh);
  height: 24vh;
  bottom: auto;
  background: linear-gradient(
    to bottom,
    rgba(190, 204, 255, 0),
    rgba(232, 238, 255, 0.42) 50%,
    rgba(190, 204, 255, 0)
  );
  mix-blend-mode: screen;
}

.stage {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(1.25rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  transform: translateY(-2vh);
  background: radial-gradient(ellipse at 50% 44%, rgba(5, 6, 10, 0.62) 0%, rgba(5, 6, 10, 0.22) 44%, rgba(5, 6, 10, 0) 68%);
}

.mark-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.logo {
  font-family: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(5.25rem, 27vw, 19rem);
  line-height: 0.78;
  letter-spacing: 0.06em;
  word-spacing: 0.14em;
  white-space: nowrap;
  text-rendering: geometricPrecision;
}

h1.logo {
  margin: 0;
  background-image: linear-gradient(
    185deg,
    #ffffff 0%,
    #e8edf4 14%,
    #8e97a3 32%,
    #fbfcff 44%,
    #fff6d8 49%,
    #e6c56a 55%,
    #8f8770 63%,
    #d5dbe4 78%,
    #ffffff 100%
  );
  background-size: 100% 160%;
  background-position: 50% calc(8% + var(--glow) * 42%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #f5f7fb;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 calc(8px + var(--glow) * 20px) rgba(255, 248, 230, calc(0.35 + var(--glow) * 0.65)))
    drop-shadow(0 0 calc(14px + var(--glow) * 40px) rgba(232, 184, 74, calc(0.28 + var(--glow) * 0.6)))
    drop-shadow(0 0 calc(26px + var(--glow) * 64px) rgba(120, 156, 255, calc(0.22 + var(--glow) * 0.55)));
}

.glitch {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

.glitch::before {
  content: "D J W";
}

.rule {
  width: min(12rem, 42vw);
  height: 1px;
  margin: 0.85rem 0 1.05rem;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), #f2d48a 40%, #fff 50%, #f2d48a 60%, rgba(255, 255, 255, 0.35), transparent);
  box-shadow: 0 0 calc(8px + var(--glow) * 20px) rgba(242, 212, 138, calc(0.45 + var(--glow) * 0.5));
  transform: scaleX(calc(0.8 + var(--glow) * 0.4));
}

.tagline {
  margin: 0;
  max-width: 16em;
  font-family: "Cormorant Garamond", Palatino, "Palatino Linotype", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.28;
  letter-spacing: 0.012em;
  text-align: center;
  text-wrap: balance;
  color: #f4ecdf;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.85);
}

html.hit {
  animation: glow 820ms ease-out;
}

html.hit h1.logo {
  animation: shake 180ms linear;
}

html.hit .glitch {
  animation: glitch 180ms linear;
}

.flash.go {
  animation: burst 340ms ease-out forwards;
}

.flare.go {
  animation: flare 340ms ease-out forwards;
}

@keyframes glow {
  from { --glow: 1; }
  to { --glow: 0; }
}

@keyframes burst {
  0% { opacity: 0.72; }
  40% { opacity: 0.2; }
  100% { opacity: 0; }
}

@keyframes flare {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes shake {
  0% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(-4px, 1px) scale(1.012); }
  45% { transform: translate(3px, -1px) scale(1.008); }
  70% { transform: translate(-2px, 0) scale(1); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes glitch {
  0% {
    opacity: 0.75;
    color: #9ec4ff;
    transform: translate(-7px, 0);
    clip-path: inset(18% 0 58% 0);
  }
  45% {
    opacity: 0.7;
    color: #ffb089;
    transform: translate(6px, 1px);
    clip-path: inset(52% 0 16% 0);
  }
  100% {
    opacity: 0;
    transform: none;
    clip-path: none;
  }
}

@media (max-width: 380px) {
  .logo {
    font-size: clamp(4.4rem, 24vw, 6rem);
    letter-spacing: 0.03em;
    word-spacing: 0.08em;
  }
}

@media (max-height: 520px) {
  .logo { font-size: clamp(3.6rem, 18vh, 8rem); }
  .stage { transform: none; }
  .tagline { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.hit,
  html.hit h1.logo,
  html.hit .glitch,
  .flash.go,
  .flare.go {
    animation: none;
  }

  .flash, .flare { opacity: 0; }
}