/* ============================================================
   Colors — tweak these to shift the whole palette.
   ============================================================ */
:root {
  --night:     #1c1410;  /* background — desert at night */
  --shadow:    #3a2a20;  /* dark layer */
  --sand:      #e8c995;  /* main text */
  --sandstone: #d9a066;  /* accent */
  --terracotta:#d0582f;  /* glitch red */
  --magenta:   #c94f9b;  /* psychedelic pop */
  --turquoise: #40c9b5;  /* glitch cyan */
  --dune:      #8b5a3c;  /* muted brown */

  --display: "Tilt Warp", "Trebuchet MS", sans-serif;
  --mono:    "Syne Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(201,79,155,.18), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(64,201,181,.12), transparent 55%),
    var(--night);
  color: var(--sand);
  font-family: var(--display);
  overflow: hidden;
}
::selection { background: var(--magenta); color: var(--night); }

main {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(32px, 6vh, 64px);
  padding: 16px;
  text-align: center;
}

h1 {
  font-size: clamp(52px, 13vw, 190px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0;
  /* flowing psychedelic fill */
  background: linear-gradient(100deg, var(--sand), var(--sandstone), var(--terracotta), var(--magenta), var(--turquoise), var(--sand));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flow 9s linear infinite, warp 7s ease-in-out infinite alternate;
}
@keyframes flow { to { background-position: 300% 0; } }
/* Tilt Warp's rotation axes — makes the letters slowly bend */
@keyframes warp {
  0%   { font-variation-settings: "XROT" -30, "YROT" -20; }
  50%  { font-variation-settings: "XROT" 25,  "YROT" 30; }
  100% { font-variation-settings: "XROT" -10, "YROT" 40; }
}

.play {
  font-family: var(--mono);
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--turquoise);
  text-decoration: none;
  border: 1px solid var(--shadow);
  border-radius: 999px;
  padding: 12px 28px;
  letter-spacing: .15em;
  transition: border-color .2s, color .2s;
}
.play:hover, .play:focus-visible { border-color: var(--magenta); color: var(--sand); box-shadow: 0 0 24px rgba(201,79,155,.35); outline: none; }

/* ---------- texture overlays ---------- */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 50; opacity: .09;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(1%, 3%); }
}
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 49; opacity: .25;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.35) 2px 3px);
}

/* earth layers along the bottom of the screen */
.strata { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.strata span { display: block; height: 6px; }
.strata span:nth-child(1) { background: var(--sandstone);  width: 72%; }
.strata span:nth-child(2) { background: var(--turquoise);  width: 54%; margin-left: 12%; }
.strata span:nth-child(3) { background: var(--terracotta); width: 86%; margin-left: 4%; }
.strata span:nth-child(4) { background: var(--magenta);    width: 40%; margin-left: 30%; }
.strata span:nth-child(5) { background: var(--dune);       width: 100%; height: 14px; }

/* ---------- the glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
.glitch::before { -webkit-text-fill-color: var(--terracotta); color: var(--terracotta); mix-blend-mode: screen; animation: glitch-a 3.2s infinite steps(1); }
.glitch::after  { -webkit-text-fill-color: var(--turquoise); color: var(--turquoise); mix-blend-mode: screen; animation: glitch-b 2.7s infinite steps(1); }
@keyframes glitch-a {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  87% { clip-path: inset(12% 0 60% 0); transform: translate(-6px, -2px); }
  89% { clip-path: inset(55% 0 20% 0); transform: translate(5px, 1px); }
  91% { clip-path: inset(30% 0 45% 0); transform: translate(-3px, 0); }
  94% { clip-path: inset(80% 0 4% 0);  transform: translate(7px, 2px); }
}
@keyframes glitch-b {
  0%, 80%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  81% { clip-path: inset(65% 0 10% 0); transform: translate(6px, 2px); }
  84% { clip-path: inset(5% 0 75% 0);  transform: translate(-5px, -1px); }
  87% { clip-path: inset(40% 0 35% 0); transform: translate(4px, 0); }
}
/* JS adds this class for occasional big hits */
.glitch.burst { animation: flow 9s linear infinite, warp 7s ease-in-out infinite alternate, burst .28s steps(2) 1; }
@keyframes burst {
  0%   { transform: translate(0); filter: none; }
  25%  { transform: translate(-4px, 2px) skewX(-8deg); filter: hue-rotate(40deg); }
  50%  { transform: translate(5px, -2px) skewX(6deg); }
  75%  { transform: translate(-2px, 0); filter: contrast(1.6); }
  100% { transform: translate(0); filter: none; }
}

.glitch-hover:hover { animation: jitter .25s steps(2) infinite; text-shadow: -3px 0 var(--terracotta), 3px 0 var(--turquoise); }
@keyframes jitter {
  0% { transform: translate(0); }
  50% { transform: translate(-2px, 1px); }
  100% { transform: translate(2px, -1px); }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .glitch::before, .glitch::after { display: none; }
}