/* ============================================================
   CREEKBORNE STUDIOS — STYLE.CSS
   Retro Pixel / Atmospheric Dark Aesthetic
   Palette: Deep Slate + Indigo + Teal Accents + Warm Amber
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg-darkest:   #060a12;
  --bg-dark:      #0d1421;
  --bg-mid:       #111d2e;
  --ink:          #0d1421;

  --teal-bright:  #4ef0c4;
  --teal-mid:     #2abf99;
  --teal-dim:     #1a6e58;

  --indigo:       #3a4fd4;
  --indigo-light: #7b8eff;

  --amber:        #f0c44e;
  --amber-dim:    #a07f1a;

  --white:        #e8eefc;
  --white-dim:    #8899bb;
  --white-faint:  #3a4660;

  --pixel-size:   4px;
  --font-pixel:   'Press Start 2P', monospace;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-darkest);
  color: var(--white);
  font-family: var(--font-pixel);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── BACKGROUND THREE.JS CANVAS ──────────────────────────── */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}

/* ── CRT / FILM OVERLAYS ─────────────────────────────────── */
.crt-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%,
      transparent 60%,
      rgba(0, 0, 0, 0.55) 100%);
}

.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
  mix-blend-mode: multiply;
}

.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 40%,
    rgba(6, 10, 18, 0.80) 100%
  );
}

#noise-canvas {
  position: fixed; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
}

/* ── MAIN CONTENT ────────────────────────────────────────── */
.main-content {
  position: fixed; inset: 0; z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2rem;
  text-align: center;
}

/* ── STUDIO BADGE ────────────────────────────────────────── */
.studio-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: var(--teal-mid);
  margin-bottom: 2.8rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.3s forwards;
}

.badge-dot {
  width: 8px; height: 8px;
  background: var(--teal-bright);
  display: inline-block;
  box-shadow: 0 0 8px var(--teal-bright), 0 0 20px rgba(78, 240, 196, 0.4);
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--teal-bright), 0 0 20px rgba(78,240,196,0.4); }
  50%       { opacity: 0.5; box-shadow: 0 0 4px var(--teal-mid); }
}

/* ── STUDIO NAME ─────────────────────────────────────────── */
.studio-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.1;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.55s forwards;
}

.name-line {
  font-size: clamp(1.6rem, 5.5vw, 4.2rem);
  color: var(--white);
  text-shadow:
    3px 3px 0 var(--indigo),
    6px 6px 0 rgba(58,79,212,0.4),
    0 0 40px rgba(123,142,255,0.25);
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: glitchShift 8s ease-in-out infinite;
}

.name-studios {
  font-size: clamp(0.6rem, 1.8vw, 1.2rem);
  color: var(--teal-bright);
  letter-spacing: 0.5em;
  text-shadow:
    0 0 12px rgba(78,240,196,0.6),
    0 0 30px rgba(78,240,196,0.25);
}

/* Subtle glitch on the big title */
@keyframes glitchShift {
  0%, 94%, 100% {
    text-shadow:
      4px 4px 0 var(--indigo),
      8px 8px 0 rgba(58,79,212,0.4),
      0 0 40px rgba(123,142,255,0.25);
    transform: translate(0, 0);
  }
  95% {
    text-shadow:
      -3px 2px 0 var(--teal-dim),
      5px -2px 0 var(--amber-dim),
      0 0 40px rgba(123,142,255,0.25);
    transform: translate(-2px, 1px);
  }
  96% {
    text-shadow:
      4px 4px 0 var(--indigo),
      8px 8px 0 rgba(58,79,212,0.4);
    transform: translate(2px, 0);
  }
  97% {
    text-shadow:
      -2px -1px 0 var(--amber-dim),
      3px 3px 0 var(--indigo);
    transform: translate(0, -1px);
  }
}

/* ── PIXEL DIVIDER ───────────────────────────────────────── */
.divider-pixel {
  display: flex;
  gap: 6px;
  margin: 1.8rem 0;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.8s forwards;
}

.divider-pixel span {
  width: 8px; height: 8px;
  background: var(--indigo);
  box-shadow: 0 0 6px rgba(58,79,212,0.6);
}

.divider-pixel span:nth-child(3) {
  background: var(--teal-bright);
  box-shadow: 0 0 10px rgba(78,240,196,0.7);
}

/* ── COMING SOON ─────────────────────────────────────────── */
.coming-soon {
  font-size: clamp(0.75rem, 2.5vw, 1.4rem);
  letter-spacing: 0.25em;
  color: var(--amber);
  text-shadow:
    2px 2px 0 var(--amber-dim),
    0 0 20px rgba(240,196,78,0.35);
  display: flex;
  align-items: center;
  gap: 0.6em;
  opacity: 0;
  animation: fadeUp 0.7s ease 1.0s forwards;
}

.cs-word {
  display: inline-block;
}

.cursor {
  color: var(--amber);
  animation: blink 1.1s step-end infinite;
  text-shadow: 0 0 10px rgba(240,196,78,0.8);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── BOTTOM ROW ──────────────────────────────────────────── */
.bottom-row {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-top: 3.5rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 1.3s forwards;
}

.tagline {
  font-size: clamp(0.42rem, 1.1vw, 0.65rem);
  color: var(--white-dim);
  letter-spacing: 0.2em;
  line-height: 1.8;
}

/* ── PIXEL SPRITES (pure CSS) ────────────────────────────── */
.pixel-sprite {
  width: 32px; height: 32px;
  image-rendering: pixelated;
  position: relative;
  flex-shrink: 0;
}

/* Left sprite — a pixel "crystal" shape */
#sprite-left {
  background:
    /* row 1 */ linear-gradient(var(--teal-bright) 0, var(--teal-bright) 0) 12px 0,
    /* row 2 */ linear-gradient(var(--teal-mid) 0, var(--teal-mid) 0) 8px 4px,
                linear-gradient(var(--teal-bright) 0, var(--teal-bright) 0) 12px 4px,
                linear-gradient(var(--teal-mid) 0, var(--teal-mid) 0) 16px 4px,
    /* row 3 */ linear-gradient(var(--indigo-light) 0, var(--indigo-light) 0) 4px 8px,
                linear-gradient(var(--teal-mid) 0, var(--teal-mid) 0) 8px 8px,
                linear-gradient(var(--white) 0, var(--white) 0) 12px 8px,
                linear-gradient(var(--teal-mid) 0, var(--teal-mid) 0) 16px 8px,
                linear-gradient(var(--indigo-light) 0, var(--indigo-light) 0) 20px 8px,
    /* row 4 */ linear-gradient(var(--teal-dim) 0, var(--teal-dim) 0) 8px 12px,
                linear-gradient(var(--teal-mid) 0, var(--teal-mid) 0) 12px 12px,
                linear-gradient(var(--teal-dim) 0, var(--teal-dim) 0) 16px 12px,
    /* row 5 */ linear-gradient(var(--indigo) 0, var(--indigo) 0) 12px 16px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  animation: floatSprite 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(78,240,196,0.5));
}

/* Right sprite — mirror */
#sprite-right {
  background:
    linear-gradient(var(--amber) 0, var(--amber) 0) 12px 0,
    linear-gradient(var(--amber-dim) 0, var(--amber-dim) 0) 8px 4px,
    linear-gradient(var(--amber) 0, var(--amber) 0) 12px 4px,
    linear-gradient(var(--amber-dim) 0, var(--amber-dim) 0) 16px 4px,
    linear-gradient(var(--indigo-light) 0, var(--indigo-light) 0) 4px 8px,
    linear-gradient(var(--amber-dim) 0, var(--amber-dim) 0) 8px 8px,
    linear-gradient(var(--white) 0, var(--white) 0) 12px 8px,
    linear-gradient(var(--amber-dim) 0, var(--amber-dim) 0) 16px 8px,
    linear-gradient(var(--indigo-light) 0, var(--indigo-light) 0) 20px 8px,
    linear-gradient(var(--amber-dim) 0, var(--amber-dim) 0) 8px 12px,
    linear-gradient(var(--amber) 0, var(--amber) 0) 12px 12px,
    linear-gradient(var(--amber-dim) 0, var(--amber-dim) 0) 16px 12px,
    linear-gradient(var(--indigo) 0, var(--indigo) 0) 12px 16px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  animation: floatSprite 3s ease-in-out 1.5s infinite;
  filter: drop-shadow(0 0 8px rgba(240,196,78,0.5));
}

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

/* ── SHARED ANIMATIONS ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .studio-badge { font-size: 0.42rem; margin-bottom: 2rem; }
  .name-studios { letter-spacing: 0.35em; }
  .bottom-row { gap: 1rem; }
  .pixel-sprite { display: none; }
}