/* ============================================
   SUPERSNEK — Spring / Easter edition
   Warhol grid in soft pastels
   Blossoms, mint, lavender, buttercup
   ============================================ */

:root {
  --blossom: #f8b4d9;
  --mint: #a8e6cf;
  --lavender: #c5b9e8;
  --buttercup: #fff59d;
  --white: #fffef9;
  --black: #3d2a4a;
  --font: "Georgia", "Times New Roman", serif;
}

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

html {
  font-size: 20px;
}

html, body {
  overflow: hidden;
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ============================================
   WARHOL GRID — Spring palette
   ============================================ */

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  min-height: 100vh;
  max-height: 100vh;
  gap: 2px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  cursor: pointer;
}

.cell img {
  width: 100%;
  max-width: min(200px, 22vw);
  height: auto;
  object-fit: contain;
  mix-blend-mode: darken;
}

/* Spring / Easter color blocks */
.cell--1 {
  background: var(--blossom);
}

.cell--2 {
  background: var(--mint);
}

.cell--3 {
  background: var(--lavender);
}

.cell--4 {
  background: var(--buttercup);
}

/* Slight rotation variations */
.cell:nth-child(4n) img { transform: rotate(-0.6deg); }
.cell:nth-child(4n + 2) img { transform: rotate(0.4deg); }

/* Hue shift for variety */
.cell--2 img {
  filter: hue-rotate(15deg);
}

.cell--3 img {
  filter: hue-rotate(-20deg);
}

.cell--4 img {
  filter: hue-rotate(10deg);
}

/* ============================================
   MINIMAL BRAND TEXT
   ============================================ */

.brand {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: #000;
  opacity: 1;
  z-index: 10;
}

/* ============================================
   CONTACT — bottom right (matches brand position)
   ============================================ */

.contact {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: #000;
  text-decoration: none;
  opacity: 0.9;
  z-index: 10;
  transition: opacity 0.2s ease;
}

.contact:hover {
  opacity: 1;
}

/* ============================================
   LASER / EXPLOSION ANIMATION
   ============================================ */

.laser-beam {
  position: fixed;
  height: 4px;
  background: linear-gradient(90deg, #ff0, #f80);
  border-radius: 2px;
  box-shadow: 0 0 12px #ff0, 0 0 24px #f80;
  transform-origin: left center;
  z-index: 100;
  pointer-events: none;
  animation: laser-shoot 0.4s ease-out forwards;
}

@keyframes laser-shoot {
  0% {
    width: 0;
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    width: var(--laser-length, 500px);
    opacity: 0;
  }
}

/* Enhanced explosion — shockwave burst + snake disintegration */
.cell {
  overflow: visible;
}

.cell.snek-explode img {
  animation: snake-explode 0.6s ease-out forwards;
}

@keyframes snake-explode {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
  30% {
    transform: scale(1.4);
    opacity: 1;
    filter: blur(2px) brightness(2);
  }
  60% {
    transform: scale(1.8);
    opacity: 0.7;
    filter: blur(4px) brightness(1.5);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    filter: blur(12px) brightness(0.5);
  }
}

.cell.snek-explode {
  animation: cell-flash 0.6s ease-out forwards;
}

@keyframes cell-flash {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 100, 0, 0);
  }
  20% {
    box-shadow: inset 0 0 80px 30px rgba(255, 200, 100, 0.7);
  }
  50% {
    box-shadow: inset 0 0 100px 40px rgba(255, 150, 50, 0.5);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 100, 0, 0);
  }
}

/* Explosion burst — radial shockwave at impact point */
.explosion-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180%;
  height: 180%;
  margin-left: -90%;
  margin-top: -90%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 230, 150, 0.8) 15%,
    rgba(255, 180, 80, 0.6) 30%,
    rgba(255, 100, 0, 0.4) 50%,
    rgba(255, 50, 0, 0.15) 70%,
    transparent 85%
  );
  pointer-events: none;
  z-index: 50;
  animation: explosion-burst-anim 0.8s ease-out forwards;
  transform-origin: center center;
}

@keyframes explosion-burst-anim {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ============================================
   NUKE — full-screen blast (random ~1 in 12 clicks)
   ============================================ */

.nuke-overlay {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 220, 0.98) 10%,
    rgba(255, 220, 150, 0.9) 25%,
    rgba(255, 180, 80, 0.7) 45%,
    rgba(255, 100, 0, 0.4) 65%,
    rgba(255, 50, 0, 0.15) 85%,
    transparent 100%
  );
  box-shadow: 0 0 200px 100px rgba(255, 255, 255, 0.5);
  animation: nuke-blast 1.2s ease-out forwards;
  transform-origin: center center;
}

@keyframes nuke-blast {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  15% {
    transform: translate(-50%, -50%) scale(80);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(120);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(150);
    opacity: 0;
  }
}

body.nuke-shake {
  animation: nuke-screen-shake 0.08s ease-in-out 12 forwards;
}

@keyframes nuke-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-12px, 6px); }
  50% { transform: translate(10px, -8px); }
  75% { transform: translate(-6px, 10px); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    min-height: auto;
  }

  .cell img {
    max-width: min(140px, 35vw);
  }

  .brand,
  .contact {
    font-size: 0.95rem;
  }
}