/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* ── Stage (scrollable canvas — zoom out to see full bg) ──────── */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ── Background — fixed pixel size, centered, never stretched ─── */
.bg-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.bg-image {
  /* dimensions set via JS from config */
  display: block;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: none;          /* never stretch or crop */
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Text overlays ────────────────────────────────────────────── */
.text-layer {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.text-layer--top {
  top: 0;
  height: 33.333%;
  align-items: flex-end;
  padding-bottom: 0.5em;
}

.text-layer--bottom {
  bottom: 0;
  height: 33.333%;
  align-items: flex-start;
  padding-top: 0.5em;
}

/* Top text styling driven by CSS custom properties from config */
.text-layer--top .text-content {
  font-family: var(--top-font, "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif);
  font-size: var(--top-size, clamp(4rem, 12vw, 10rem));
  font-weight: var(--top-weight, 900);
  color: var(--top-color, #fff);
  letter-spacing: var(--top-spacing, 0.08em);
  text-transform: var(--top-transform, uppercase);
  text-shadow: var(--top-shadow, 0 4px 24px rgba(0,0,0,0.6));
  -webkit-text-stroke: var(--mode-stroke, var(--top-stroke, 0));
  paint-order: stroke fill;
}

/* Bottom text */
.text-layer--bottom .text-content {
  font-family: var(--bottom-font, "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif);
  font-size: var(--bottom-size, clamp(3rem, 10vw, 8rem));
  font-weight: var(--bottom-weight, 900);
  color: var(--bottom-color, #fff);
  letter-spacing: var(--bottom-spacing, 0.12em);
  text-transform: var(--bottom-transform, uppercase);
  text-shadow: var(--mode-bottom-shadow, var(--bottom-shadow, 0 4px 24px rgba(0,0,0,0.6)));
  -webkit-text-stroke: var(--mode-stroke, var(--bottom-stroke, 0));
  paint-order: stroke fill;
  transform-origin: center center;
}

/* ── Lazy river (modern: per-letter SVG-like wiggle via CSS) ─── */
.lazy-river {
  display: inline-flex;
  gap: var(--river-gap, 0.02em);
}

.lazy-river__char {
  display: inline-block;
  will-change: transform;
  animation: lazy-river-wiggle var(--river-duration, 6s) ease-in-out infinite;
  animation-delay: calc(var(--river-delay, 0s) + var(--char-index, 0) * var(--river-stagger, 0.18s));
}

@keyframes lazy-river-wiggle {
  0%, 100% {
    transform: translateY(0) rotate(0deg) skewX(0deg);
  }
  25% {
    transform: translateY(calc(var(--river-amp, 8px) * -1)) rotate(calc(var(--river-rotate, 3deg) * -1)) skewX(calc(var(--river-skew, 2deg) * -1));
  }
  50% {
    transform: translateY(calc(var(--river-amp, 8px) * 0.4)) rotate(var(--river-rotate, 3deg)) skewX(var(--river-skew, 2deg));
  }
  75% {
    transform: translateY(calc(var(--river-amp, 8px) * -0.6)) rotate(calc(var(--river-rotate, 3deg) * 0.5)) skewX(calc(var(--river-skew, 2deg) * -0.5));
  }
}

/* Legacy fallback: gentle whole-word bob instead of per-char */
.no-lazy-river .text-layer--bottom .text-content {
  animation: lazy-river-fallback 5s ease-in-out infinite;
}

@keyframes lazy-river-fallback {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Scatter GIFs ─────────────────────────────────────────────── */
.gif-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* individual gifs re-enable */
}

.scatter-gif {
  position: absolute;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  /* transparency: no background, PNG/GIF alpha preserved */
  background: transparent;
  image-rendering: auto;
  touch-action: none;
}

/* Modern: smooth GPU transform */
@supports (transform: translate3d(0,0,0)) {
  .scatter-gif {
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0)
               rotate(var(--rot, 0deg));
  }
}

/* Legacy: simple nudge on hover */
.no-scatter-physics .scatter-gif:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease-out;
}

/* ── Text modes (click anywhere to cycle) ─────────────────────── */
html.text-mode-2,
html.text-mode-3,
html.text-mode-4,
html.text-mode-5 {
  --mode-stroke: 3px #000;
}

html.text-mode-3,
html.text-mode-4,
html.text-mode-5 {
  --mode-bottom-shadow:
    0 10px 0 rgba(0, 0, 0, 0.95),
    0 14px 6px rgba(0, 0, 0, 0.85),
    0 24px 32px rgba(0, 0, 0, 0.75),
    0 40px 64px rgba(0, 0, 0, 0.45);
}

html.text-mode-4 .text-layer--bottom .text-content,
html.text-mode-5 .text-layer--bottom .text-content {
  transform: scale(1.7);
}

html.text-mode-5 .text-layer--bottom {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: max-content;
  height: auto;
  padding: 0;
  z-index: 30;
}

html.text-mode-5 .lazy-river__char {
  animation: none;
  transform: none;
}

html.text-mode-5 .text-layer--bottom .text-content {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #ffd93d,
    #6bcb77,
    #4d96ff,
    #c77dff,
    #ff6b6b
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: text-mode-rainbow 10s ease-in-out infinite;
}

@keyframes text-mode-rainbow {
  0%, 100% {
    background-position: 0% 50%;
    filter: brightness(1) saturate(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.4) saturate(1.35);
  }
}