:root{
  --bg:#0e0e0e;
  --accent:#e5bc78;   /* cookie tan */
  --brown:#54301c;    /* outline brown */
  --punk:#66ffcc;     /* neon mint */
  --hot:#ff3b6b;      /* neon pink */
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  height:100vh;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: Arial, Helvetica, sans-serif;
  color:#fff;
  overflow:hidden;
}

/* subtle punk scanline grain */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.018),
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:0.9;
}

/* vignette */
body::before{
  content:"";
  position:fixed;
  inset:-20px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 40%, transparent 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%);
  z-index:0;
}

.container{
  text-align:center;
  padding:2rem 1.25rem;
  position:relative;
  z-index:2;
}

/* LOGO */
.logo{
  max-width:680px;
  width:min(92vw, 680px);
  animation: float 4s ease-in-out infinite;
  cursor:pointer;
  user-select:none;
  -webkit-user-drag:none;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.55));
}

/* SLOGAN */
.slogan{
  margin-top:1.4rem;
  font-size:1.15rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
}

.slogan span{
  display:inline-block;
  position:relative;
}

/* punk underline */
.slogan span::after{
  content:"";
  position:absolute;
  left:-4%;
  bottom:-7px;
  width:108%;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--punk), var(--hot));
  transform:rotate(-2deg);
  filter: drop-shadow(0 0 10px rgba(102,255,204,0.25));
}

.sub{
  margin-top:0.9rem;
  font-size:0.95rem;
  opacity:0.78;
  letter-spacing:0.03em;
}

/* tiny hint (subtle) */
.tiny{
  margin-top:1.15rem;
  font-size:0.78rem;
  opacity:0.38;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* floating */
@keyframes float{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(-0.6deg)}
  100%{transform:translateY(0) rotate(0)}
}

/* SHAKE (dot easter egg) */
.shake{
  animation:shake 520ms cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake{
  10%, 90%{transform:translate3d(-1px, 0, 0)}
  20%, 80%{transform:translate3d(3px, 0, 0)}
  30%, 50%, 70%{transform:translate3d(-6px, 0, 0)}
  40%, 60%{transform:translate3d(6px, 0, 0)}
}

/* hidden click target */
.easter-crumb{
  position:fixed;
  right:10px;
  bottom:10px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(229,188,120,0.14);
  box-shadow:0 0 0 1px rgba(229,188,120,0.22), 0 0 14px rgba(229,188,120,0.08);
  cursor:pointer;
  opacity:0.28;
  z-index:6;
  border:none;
}
.easter-crumb:hover{opacity:0.7}

/* ---------- LIGHT SHOW (logo 7-click) ---------- */
.lightshow-layer{
  position:fixed;
  inset:-60px;
  z-index:1;
  pointer-events:none;
  opacity:0;
  filter:blur(26px);
  transition:opacity 160ms ease;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 59, 107, 0.24), transparent 55%),
    radial-gradient(circle at 72% 22%, rgba(102, 255, 204, 0.18), transparent 52%),
    radial-gradient(circle at 62% 82%, rgba(120, 140, 255, 0.18), transparent 55%),
    radial-gradient(circle at 30% 86%, rgba(255, 217, 92, 0.12), transparent 50%);
}

/* Punker show: faster pulse + mild glitch offsets */
.lightshow-on .lightshow-layer{
  opacity:1;
  animation:
    glowPulse 0.85s ease-in-out infinite,
    hueSpin 2.1s linear infinite,
    layerJitter 0.18s steps(2,end) infinite;
}

.lightshow-on .logo{
  animation:
    float 4s ease-in-out infinite,
    logoFlicker 0.55s steps(2,end) infinite,
    logoGlow 0.95s ease-in-out infinite,
    logoJitter 0.20s steps(2,end) infinite;
}

@keyframes glowPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

@keyframes hueSpin{
  0%{filter:blur(26px) hue-rotate(0deg) saturate(1.2)}
  100%{filter:blur(26px) hue-rotate(360deg) saturate(1.2)}
}

@keyframes layerJitter{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2px,-1px) scale(1.03)}
  100%{transform:translate(-2px,1px) scale(1)}
}

@keyframes logoGlow{
  0%{filter:
      drop-shadow(0 0 0 rgba(229,188,120,0))
      drop-shadow(0 0 0 rgba(102,255,204,0))
      drop-shadow(0 0 0 rgba(255,59,107,0));
  }
  50%{filter:
      drop-shadow(0 0 18px rgba(229,188,120,0.75))
      drop-shadow(0 0 28px rgba(102,255,204,0.40))
      drop-shadow(0 0 22px rgba(255,59,107,0.25));
  }
  100%{filter:
      drop-shadow(0 0 0 rgba(229,188,120,0))
      drop-shadow(0 0 0 rgba(102,255,204,0))
      drop-shadow(0 0 0 rgba(255,59,107,0));
  }
}

@keyframes logoFlicker{
  0%,100%{opacity:1}
  14%{opacity:0.92}
  22%{opacity:1}
  38%{opacity:0.86}
  46%{opacity:1}
  63%{opacity:0.90}
  71%{opacity:1}
  83%{opacity:0.88}
}

@keyframes logoJitter{
  0%{transform:translate(0,0)}
  50%{transform:translate(1px,-1px)}
  100%{transform:translate(-1px,1px)}
}

#sparkles{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:0;
  transition:opacity 160ms ease;
}
.lightshow-on #sparkles{
  opacity:1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo{animation:none}
  .lightshow-on .logo{animation:none}
  .lightshow-on .lightshow-layer{animation:none}
  .shake{animation:none}
}