/* ================================================================
   KONAMI CODE EASTER EGG — Neo Puzzle Lovers
   ================================================================ */

/* ── Full-spectrum rainbow: gradient scrolls seamlessly at 200% width ── */
@keyframes konami-rainbow {
  0%   { background-position: 0%   0%; }
  100% { background-position: 100% 0%; }
}

/* ── Text: cycles through every hue in the visible spectrum ── */
@keyframes konami-text-hue {
  0%   { color: #ff2020; }
  14%  { color: #ff8800; }
  28%  { color: #e8e000; }
  42%  { color: #00e844; }
  57%  { color: #00d4ff; }
  71%  { color: #4455ff; }
  85%  { color: #cc00ff; }
  100% { color: #ff2020; }
}

/* ── Glitch burst: chromatic aberration + clip-path slice ── */
@keyframes konami-glitch {
  0%, 87%, 100% {
    transform:   translate(0, 0);
    text-shadow: none;
    clip-path:   none;
  }
  88% {
    transform:   translate(-5px, 2px);
    text-shadow: 4px  0 #ff0044, -4px 0 #00eeff;
    clip-path:   inset(15% 0 65% 0);
  }
  90% {
    transform:   translate(5px, -2px);
    text-shadow: -4px 0 #ff0044,  4px 0 #00eeff;
    clip-path:   inset(60% 0  5% 0);
  }
  92% {
    transform:   translate(-3px, 3px);
    text-shadow:  3px 0 #44ff00, -3px 0 #ff8800;
    clip-path:   inset(0%  0 82% 0);
  }
  94% {
    transform:   translate(4px, -1px);
    text-shadow: none;
    clip-path:   inset(38% 0 38% 0);
  }
  96% {
    transform:   translate(-2px, 2px);
    text-shadow: -5px 0 #ff00cc, 5px 0 #00ff88;
    clip-path:   none;
  }
}

/* ── Hero logo: hue-rotate + blur + invert + saturate cycling + big wobble ── */
@keyframes konami-logo {
  0%   { transform: translate(  0px,   0px) rotate(  0deg) scale(1.00); filter: hue-rotate(  0deg) saturate(1)   blur(0px) brightness(1.0) invert(0);   }
  10%  { transform: translate( -9px,  6px)  rotate(-14deg) scale(1.12); filter: hue-rotate( 72deg) saturate(3)   blur(0px) brightness(1.5) invert(0);   }
  20%  { transform: translate( 12px, -9px)  rotate( 18deg) scale(0.88); filter: hue-rotate(144deg) saturate(1)   blur(3px) brightness(0.7) invert(0.7); }
  30%  { transform: translate( -6px,  12px) rotate( -9deg) scale(1.18); filter: hue-rotate(216deg) saturate(5)   blur(0px) brightness(1.7) invert(0);   }
  40%  { transform: translate( 14px,  -5px) rotate( 22deg) scale(0.82); filter: hue-rotate(288deg) saturate(0.2) blur(2px) brightness(0.5) invert(1);   }
  50%  { transform: translate(  0px,   0px) rotate(-18deg) scale(1.22); filter: hue-rotate(360deg) saturate(2)   blur(0px) brightness(1.3) invert(0);   }
  60%  { transform: translate(-11px,  -7px) rotate( 12deg) scale(0.90); filter: hue-rotate(432deg) saturate(6)   blur(1px) brightness(2.0) invert(0.4); }
  70%  { transform: translate(  9px,  10px) rotate(-20deg) scale(1.14); filter: hue-rotate(504deg) saturate(1)   blur(0px) brightness(0.6) invert(0.9); }
  80%  { transform: translate(-13px,   4px) rotate( 16deg) scale(0.86); filter: hue-rotate(576deg) saturate(3)   blur(2px) brightness(1.6) invert(0);   }
  90%  { transform: translate(  7px, -11px) rotate(-11deg) scale(1.06); filter: hue-rotate(648deg) saturate(2)   blur(0px) brightness(1.0) invert(0.5); }
  100% { transform: translate(  0px,   0px) rotate(  0deg) scale(1.00); filter: hue-rotate(720deg) saturate(1)   blur(0px) brightness(1.0) invert(0);   }
}

/* ── Nav bar: horizontal shake + slight tilt ── */
@keyframes konami-nav {
  0%, 100% { transform: translateX(  0px) rotate(0deg);    }
  15%       { transform: translateX(-14px) rotate(-1.8deg); }
  30%       { transform: translateX( 18px) rotate( 2.2deg); }
  45%       { transform: translateX(-10px) rotate(-1.2deg); }
  60%       { transform: translateX( 20px) rotate( 2.8deg); }
  75%       { transform: translateX(-12px) rotate(-2.0deg); }
  90%       { transform: translateX( 14px) rotate( 1.6deg); }
}

/* ── Paragraphs & labels: wave / skew ── */
@keyframes konami-wave {
  0%, 100% { transform: translate(0,   0)    skewX(0deg)  skewY(0deg);  }
  20%       { transform: translate( 5px,-4px) skewX( 4deg) skewY(-1deg); }
  40%       { transform: translate(-5px, 5px) skewX(-3deg) skewY( 2deg); }
  60%       { transform: translate( 6px, 2px) skewX( 5deg) skewY(-2deg); }
  80%       { transform: translate(-4px,-5px) skewX(-4deg) skewY( 1deg); }
}

/* ── Pills / tags: bounce ── */
@keyframes konami-bounce {
  0%, 100% { transform: translateY(  0px) scale(1.00); }
  25%       { transform: translateY(-20px) scale(1.12); }
  55%       { transform: translateY(  9px) scale(0.90); }
  80%       { transform: translateY(-12px) scale(1.06); }
}

/* ── Scroll cue: full rotation + float ── */
@keyframes konami-spin {
  0%   { transform: translateY(  0px) rotate(  0deg) scale(1.0); }
  50%  { transform: translateY(-28px) rotate(360deg) scale(1.3); }
  100% { transform: translateY(  0px) rotate(720deg) scale(1.0); }
}

/* ── Footer: slide side-to-side ── */
@keyframes konami-footer {
  0%, 100% { transform: translateX(  0px) scaleX(1.00); }
  25%       { transform: translateX(-35px) scaleX(0.88); }
  50%       { transform: translateX( 45px) scaleX(1.12); }
  75%       { transform: translateX(-22px) scaleX(0.94); }
}

/* ── Logo rings: spin in opposite directions ── */
@keyframes konami-ring-cw {
  0%   { transform: rotate(  0deg) scale(1.0); }
  50%  { transform: rotate(180deg) scale(1.4); }
  100% { transform: rotate(360deg) scale(1.0); }
}
@keyframes konami-ring-ccw {
  0%   { transform: rotate(   0deg) scale(1.2); }
  50%  { transform: rotate(-180deg) scale(0.7); }
  100% { transform: rotate(-360deg) scale(1.2); }
}

/* ── Small tags / meta: rapid micro-jitter ── */
@keyframes konami-jitter {
  0%, 100% { transform: translate( 0px,  0px); }
  20%       { transform: translate(-3px,  2px); }
  40%       { transform: translate( 3px, -3px); }
  60%       { transform: translate(-2px,  3px); }
  80%       { transform: translate( 3px,  1px); }
}

/* ── Dance A: big position jumps + heavy rotation ── */
@keyframes konami-dance {
  0%   { transform: translate(   0px,    0px) rotate(   0deg) scale(1.00); }
  8%   { transform: translate( -95px,   45px) rotate( -22deg) scale(0.82); }
  18%  { transform: translate( 140px,  -65px) rotate(  30deg) scale(1.18); }
  28%  { transform: translate( -45px,  120px) rotate( -12deg) scale(0.88); }
  38%  { transform: translate( 180px,   28px) rotate(  38deg) scale(0.72); }
  48%  { transform: translate(-130px,  -55px) rotate( -28deg) scale(1.22); }
  58%  { transform: translate(  75px,  145px) rotate(  16deg) scale(0.86); }
  68%  { transform: translate(-160px,  -35px) rotate( -35deg) scale(1.14); }
  78%  { transform: translate( 120px, -100px) rotate(  24deg) scale(0.80); }
  88%  { transform: translate( -65px,   80px) rotate( -16deg) scale(1.10); }
  100% { transform: translate(   0px,    0px) rotate(   0deg) scale(1.00); }
}

/* ── Dance B: offset phase, different amplitude ── */
@keyframes konami-dance-b {
  0%   { transform: translate(   0px,    0px) rotate(   0deg) scale(1.00); }
  10%  { transform: translate( 110px,  -80px) rotate(  26deg) scale(1.14); }
  22%  { transform: translate(-155px,   50px) rotate( -32deg) scale(0.78); }
  35%  { transform: translate(  90px,  135px) rotate(  20deg) scale(1.20); }
  48%  { transform: translate( -60px, -105px) rotate( -14deg) scale(0.86); }
  60%  { transform: translate( 175px,  -20px) rotate(  42deg) scale(0.70); }
  73%  { transform: translate(-110px,  115px) rotate( -26deg) scale(1.16); }
  86%  { transform: translate(  80px, -120px) rotate(  18deg) scale(0.88); }
  100% { transform: translate(   0px,    0px) rotate(   0deg) scale(1.00); }
}

/* ── Sweep: element flies edge-to-edge across the screen ── */
@keyframes konami-sweep {
  0%   { transform: translate(   0px,    0px) rotate(   0deg) scale(1.00); }
  12%  { transform: translate(-360px,  -90px) rotate( -45deg) scale(0.55); }
  24%  { transform: translate(   0px,    0px) rotate(  10deg) scale(1.12); }
  36%  { transform: translate( 380px,   70px) rotate(  48deg) scale(0.58); }
  50%  { transform: translate( -25px,  170px) rotate( -12deg) scale(1.25); }
  62%  { transform: translate(-340px,  -60px) rotate( -46deg) scale(0.62); }
  74%  { transform: translate(   0px,    0px) rotate(   6deg) scale(0.93); }
  86%  { transform: translate( 300px, -140px) rotate(  40deg) scale(0.65); }
  100% { transform: translate(   0px,    0px) rotate(   0deg) scale(1.00); }
}

/* ── Explosion GIF: pop in then fade out ── */
@keyframes konami-explosion-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(var(--exp-rot, 0deg)); }
  18%  { opacity: 1; transform: scale(1.3) rotate(calc(var(--exp-rot, 0deg) + 8deg)); }
  65%  { opacity: 1; transform: scale(1.0) rotate(var(--exp-rot, 0deg)); }
  100% { opacity: 0; transform: scale(0.6) rotate(calc(var(--exp-rot, 0deg) - 4deg)); }
}

/* ================================================================
   CHAOS STATE
   ================================================================ */

/* Full-spectrum rainbow. background-size 200% + animating position 0→100%
   slides the entire gradient past, showing every hue in a seamless loop. */
body.konami-mode {
  background:      linear-gradient(
    90deg,
    #ff0000  0%,
    #ff8800 12%,
    #ffee00 25%,
    #44ee00 37%,
    #00eecc 50%,
    #0055ff 62%,
    #8800ff 75%,
    #ff00aa 87%,
    #ff0000 100%
  ) !important;
  background-size: 200% 100% !important;
  animation:       konami-rainbow 2s linear infinite !important;
}

/* Hide background layer so the rainbow is unobstructed */
body.konami-mode .bg-orb-a,
body.konami-mode .bg-orb-b,
body.konami-mode .bg-orb-c,
body.konami-mode .starfield,
body.konami-mode .bg-grid      { opacity: 0 !important; }

/* Block all clicks; mouse-wheel / keyboard scroll still works */
body.konami-mode * { pointer-events: none !important; }

/* ── Hero logo: filter madness + big wobble ── */
body.konami-mode #hero-logo {
  animation:      konami-logo 2.2s ease-in-out infinite !important;
  will-change:    transform, filter;
  transition:     none !important; /* cancel the opacity fade transition */
}

/* ── Nav bar: shake + tilt ── */
body.konami-mode nav {
  animation: konami-nav 0.7s ease-in-out infinite !important;
}

/* ── Headings and key text: hue-cycle + glitch burst ── */
body.konami-mode h1,
body.konami-mode h2,
body.konami-mode h3,
body.konami-mode .section-title,
body.konami-mode .nav-logo-text,
body.konami-mode .nav-logo-eyebrow,
body.konami-mode .hero-subtitle,
body.konami-mode .hero-kicker,
body.konami-mode .typewriter-line {
  animation:
    konami-text-hue  1.4s linear      infinite,
    konami-glitch    3.8s ease-in-out  infinite !important;
}

body.konami-mode h2,
body.konami-mode .hero-subtitle   { animation-delay: -0.5s,  -1.3s !important; }
body.konami-mode h3               { animation-delay: -1.0s,  -2.6s !important; }
body.konami-mode .hero-kicker     { animation-delay: -0.8s,  -0.6s !important; }
body.konami-mode .typewriter-line { animation-delay: -1.3s,  -3.1s !important; }
body.konami-mode .nav-logo-eyebrow{ animation-delay: -0.3s,  -1.8s !important; }

/* ── Paragraphs and labels: wave / skew ── */
body.konami-mode p,
body.konami-mode .signal-label,
body.konami-mode .work-meta,
body.konami-mode .hero-desc,
body.konami-mode .contact-tagline,
body.konami-mode .faq-answer {
  animation: konami-wave 1.1s ease-in-out infinite !important;
}

body.konami-mode .signal-label  { animation-delay: -0.4s !important; }
body.konami-mode .work-meta     { animation-delay: -0.8s !important; }
body.konami-mode .faq-answer    { animation-delay: -0.6s !important; }

/* ── Pills: bounce with staggered delay ── */
body.konami-mode .hero-pills li {
  animation: konami-bounce 0.8s ease-in-out infinite !important;
}
body.konami-mode .hero-pills li:nth-child(2) { animation-delay: -0.27s !important; }
body.konami-mode .hero-pills li:nth-child(3) { animation-delay: -0.54s !important; }
body.konami-mode .hero-pills li:nth-child(4) { animation-delay: -0.13s !important; }

/* ── Small tags: micro-jitter ── */
body.konami-mode .work-tag,
body.konami-mode .member-gen,
body.konami-mode .member-title {
  animation: konami-jitter 0.15s linear infinite !important;
}
body.konami-mode .member-gen   { animation-delay: -0.05s !important; }
body.konami-mode .member-title { animation-delay: -0.10s !important; }

/* ── Logo rings: spin in opposite directions ── */
body.konami-mode .logo-ring   { animation: konami-ring-cw  1.8s linear infinite !important; }
body.konami-mode .logo-ring-b { animation: konami-ring-ccw 1.3s linear infinite !important; }

/* ── Scroll cue: full rotation + float ── */
body.konami-mode .scroll-cue {
  animation: konami-spin 1.6s ease-in-out infinite !important;
}

/* ── Footer: slide side-to-side ── */
body.konami-mode footer {
  animation: konami-footer 1.2s ease-in-out infinite !important;
}

/* ── Interactive / card elements: wild dance ── */
body.konami-mode .nav-links a,
body.konami-mode .btn-primary,
body.konami-mode .btn-secondary,
body.konami-mode .contact-email,
body.konami-mode .activity-card,
body.konami-mode .engine-card,
body.konami-mode .work-card,
body.konami-mode .faq-item,
body.konami-mode .member-card {
  animation:   konami-dance 1.4s ease-in-out infinite !important;
  will-change: transform;
}

body.konami-mode .nav-links a:nth-child(2n),
body.konami-mode .activity-card:nth-child(2n),
body.konami-mode .engine-card:nth-child(2n),
body.konami-mode .work-card:nth-child(2n),
body.konami-mode .faq-item:nth-child(2n),
body.konami-mode .member-card:nth-child(2n) {
  animation-name:     konami-dance-b !important;
  animation-duration: 1.7s           !important;
  animation-delay:    -0.45s         !important;
}

body.konami-mode .nav-links a:nth-child(3n),
body.konami-mode .activity-card:nth-child(3n),
body.konami-mode .engine-card:nth-child(3n),
body.konami-mode .work-card:nth-child(3n),
body.konami-mode .member-card:nth-child(3n) {
  animation-name:     konami-sweep !important;
  animation-duration: 2.1s         !important;
  animation-delay:    -0.8s        !important;
}

body.konami-mode .theme-picker {
  animation-name:     konami-sweep !important;
  animation-duration: 2.4s         !important;
  animation-delay:    -1.1s        !important;
}

body.konami-mode .btn-secondary,
body.konami-mode .contact-email {
  animation-duration: 1.15s  !important;
  animation-delay:    -0.35s !important;
}

/* ================================================================
   EXPLOSION GIFs
   ================================================================ */

.konami-explosion {
  position:        fixed;
  z-index:         9998;
  pointer-events:  none;
  image-rendering: pixelated;
  animation:       konami-explosion-pop 1.8s ease-out forwards;
}

/* ================================================================
   COUNTDOWN BANNER
   ================================================================ */

#konami-banner {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         99999;
  padding:         0.55rem 1.2rem;
  background:      rgba(0, 0, 0, 0.82);
  color:           #fff;
  text-align:      center;
  font-family:     "Pixelify Sans", monospace;
  font-size:       0.82rem;
  letter-spacing:  0.05em;
  backdrop-filter: blur(6px);
  pointer-events:  none;
  opacity:         0;
  transform:       translateY(-100%);
  transition:      opacity 0.4s ease, transform 0.4s ease;
}

#konami-banner.is-visible {
  opacity:   1;
  transform: translateY(0);
}

#konami-banner #konami-timer {
  font-weight: 700;
  color:       #ffdd00;
}