/* Self-hosted display face — no external dependency (SIL OFL, see fonts/OFL.txt) */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fredoka-700.woff2") format("woff2");
}

:root {
  --bg:        #080605;
  --bg-2:      #0d0907;
  --ink:       #f5efe8;

  --o-primary: #ff7a18;
  --o-deep:    #ff5e00;
  --o-highl:   #ffc24b;

  /* Cinematic ease-out (never bare `ease`) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  color-scheme: dark; /* dark UA canvas + scrollbars, no white flash before paint */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: rgba(255, 122, 24, 0.30); /* brand orange, tinted */
  color: var(--ink);
}

body {
  /* A warm floor so the black never feels flat */
  background:
    radial-gradient(120% 90% at 50% 8%, var(--bg-2) 0%, var(--bg) 55%),
    var(--bg);
  min-height: 100svh;
}

/* ------------------------------------------------------------------ */
/* Aurora glow background                                             */
/* ------------------------------------------------------------------ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.62;
  will-change: transform;
  /* alternate ease-in-out drift; each blob overrides duration/delay below */
  animation: drift 30s ease-in-out infinite alternate;
}

.blob--a {
  top: -16vmax;
  left: -10vmax;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.74 0.2 55 / 1) 0%, oklch(0.74 0.2 55 / 0) 64%);
  animation-duration: 28s;
  animation-delay: -6s;
}
.blob--b {
  bottom: -18vmax;
  right: -12vmax;
  width: 82vmax;
  height: 82vmax;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.68 0.23 38 / 0.95) 0%, oklch(0.68 0.23 38 / 0) 62%);
  animation-duration: 36s;
  animation-delay: -14s;
  opacity: 0.6;
}
.blob--c {
  top: 14%;
  left: 40%;
  width: 58vmax;
  height: 58vmax;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.82 0.16 72 / 0.9) 0%, oklch(0.82 0.16 72 / 0) 60%);
  animation-duration: 24s;
  animation-delay: -3s;
  opacity: 0.45;
}
.blob--d {
  bottom: 2%;
  left: -10vmax;
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.62 0.21 30 / 0.9) 0%, oklch(0.62 0.21 30 / 0) 62%);
  animation-duration: 40s;
  animation-delay: -20s;
  opacity: 0.5;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vmax, -4vmax, 0) scale(1.12); }
  100% { transform: translate3d(-5vmax, 5vmax, 0) scale(1.04); }
}

/* Film grain overlay (static) — pseudo-element, no markup needed */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Soft vignette so text stays legible — kept light so the corner glow reads */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 135% at 50% 42%,
    rgba(8, 6, 5, 0) 55%, rgba(8, 6, 5, 0.5) 100%);
}

/* ------------------------------------------------------------------ */
/* Hero                                                              */
/* ------------------------------------------------------------------ */
main {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6vmin 5vw;
  text-align: center;
}

/* Big rounded title. Glow lives here; the gradient FILL lives on .grad,
   applied to the split letters (background/background-clip do not inherit,
   so it must sit on whatever paints the text). */
.display {
  margin: 0;
  font-family: "Fredoka", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25; /* room below the baseline so descenders aren't clipped */
  letter-spacing: -0.01em;
  font-size: clamp(3.5rem, 16vw, 14rem);
  filter: drop-shadow(0 0 42px rgba(255, 110, 20, 0.5))
          drop-shadow(0 10px 36px rgba(255, 60, 0, 0.28));
}

/* Orange gradient clipped to glyphs. Vertical (top->bottom) so per-letter
   spans read as one continuous gradient across the word. */
.grad {
  background: linear-gradient(180deg, var(--o-highl) 0%,
              var(--o-primary) 50%, var(--o-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Per-letter reveal: opacity + translateY + blur -> sharp */
.display .ltr {
  display: inline-block;
  white-space: pre; /* preserve any spaces */
  /* extend the gradient's paint box below the baseline so the clipped
     fill covers descenders (e.g. the "y" tail) */
  padding-bottom: 0.16em;
  opacity: 0;
  transform: translateY(0.3em);
  filter: blur(12px);
  animation: materialize 0.85s var(--ease-out) both;
  animation-delay: calc(var(--i) * 70ms + 0.15s);
}

@keyframes materialize {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ------------------------------------------------------------------ */
/* Accessibility — reduced motion                                    */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .display .ltr {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}