/* ==========================================================================
   Easter Egg Modes
   Activated by typing secret cheat codes. Each mode overrides CSS custom
   properties and injects visual elements via JS.
   Uses html[data-easter-egg] selectors to beat theme specificity.
   ========================================================================== */

/* ==========================================================================
   Geocities Mode (iddqd) — garish 90s web
   ========================================================================== */

html[data-easter-egg='geocities'],
html[data-easter-egg='geocities'][data-mode='dark'] {
  --color-primary: #ff00ff;
  --color-primary-light: #ff66ff;
  --color-primary-dark: #cc00cc;
  --color-accent: #00ff00;
  --color-accent-light: #66ff66;
  --color-accent-dark: #00cc00;

  --color-bg: #ffff00;
  --color-bg-alt: #ff9900;
  --color-surface: #00ffff;
  --color-border: #ff00ff;

  --color-text: #ff00ff;
  --color-text-muted: #0000ff;
  --color-text-light: #ff0000;
  --color-text-inverse: #ffff00;

  --color-hero-bg: #ff9900;
  --color-hero-text: #0000ff;
  --color-hero-text-muted: #ff0000;

  --color-footer-bg: #000080;
  --color-footer-text: #ffff00;
  --color-footer-muted: #00ffff;

  --font-display: 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-body: 'Comic Sans MS', 'Chalkboard SE', cursive;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

/* Tiled dot pattern background */
html[data-easter-egg='geocities'] body,
html[data-easter-egg='geocities'][data-mode='dark'] body {
  background-image:
    radial-gradient(circle, #ff00ff 1px, transparent 1px),
    radial-gradient(circle, #00ff00 1px, transparent 1px);
  background-size: 20px 20px;
  background-position:
    0 0,
    10px 10px;
  padding-bottom: 50px;
}

/* Rainbow top bar */
html[data-easter-egg='geocities'] body::before,
html[data-easter-egg='geocities'][data-mode='dark'] body::before {
  height: 8px;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #0000ff, #9900ff, #ff0000);
  background-size: 200% 100%;
  animation: geocities-rainbow 3s linear infinite;
}

@keyframes geocities-rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Hero image — ridged gold border */
html[data-easter-egg='geocities'] .hero__image,
html[data-easter-egg='geocities'][data-mode='dark'] .hero__image {
  border: 5px ridge gold;
  border-radius: 0;
}

/* Cards — dashed borders, contrasting colors */
html[data-easter-egg='geocities'] .card,
html[data-easter-egg='geocities'][data-mode='dark'] .card {
  border: 3px dashed #ff00ff;
  border-left: 3px dashed #ff00ff;
  background-color: #00ffff;
}

/* Nav */
html[data-easter-egg='geocities'] .nav,
html[data-easter-egg='geocities'][data-mode='dark'] .nav {
  background-color: #000080;
}

html[data-easter-egg='geocities'] .nav__brand,
html[data-easter-egg='geocities'] .nav__link,
html[data-easter-egg='geocities'][data-mode='dark'] .nav__brand,
html[data-easter-egg='geocities'][data-mode='dark'] .nav__link {
  color: #ffff00;
}

/* Footer social buttons */
html[data-easter-egg='geocities'] .footer__social .btn--social,
html[data-easter-egg='geocities'][data-mode='dark'] .footer__social .btn--social {
  border-color: #ffff00;
  color: #ffff00;
}

/* Selection */
html[data-easter-egg='geocities'] ::selection,
html[data-easter-egg='geocities'][data-mode='dark'] ::selection {
  background-color: #ff00ff;
  color: #ffff00;
}

/* Injected: Construction banner */
.geocities-banner {
  position: fixed;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 500;
  background: repeating-linear-gradient(45deg, #000000, #000000 10px, #ffcc00 10px, #ffcc00 20px);
  text-align: center;
  padding: 6px 0;
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  font-weight: bold;
  color: #ff0000;
}

.geocities-banner span {
  background: #ffff00;
  padding: 2px 8px;
}

/* Injected: Scrolling marquee */
.geocities-marquee {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: #000080;
  color: #00ff00;
  font-family: 'Comic Sans MS', cursive;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 0;
  white-space: nowrap;
  overflow: hidden;
}

.geocities-marquee span {
  display: inline-block;
  animation: geocities-scroll 15s linear infinite;
}

@keyframes geocities-scroll {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Injected: Hit counter */
.geocities-counter {
  position: fixed;
  bottom: 44px;
  right: 16px;
  z-index: 500;
  background: #000000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  padding: 4px 8px;
  border: 2px inset #808080;
}

/* Injected: Guestbook link */
.geocities-guestbook {
  position: fixed;
  bottom: 44px;
  left: 16px;
  z-index: 500;
  background: #ff00ff;
  color: #ffff00;
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 12px;
  border: 3px outset #ff66ff;
  text-decoration: none;
  cursor: pointer;
}

/* ==========================================================================
   Text Adventure Mode (xyzzy) — green phosphor terminal
   ========================================================================== */

html[data-easter-egg='textadventure'],
html[data-easter-egg='textadventure'][data-mode='dark'] {
  --color-primary: #33ff33;
  --color-primary-light: #66ff66;
  --color-primary-dark: #00cc00;
  --color-accent: #33ff33;
  --color-accent-light: #66ff66;
  --color-accent-dark: #00cc00;

  --color-bg: #0a0a0a;
  --color-bg-alt: #111111;
  --color-surface: #0f0f0f;
  --color-border: #33ff33;

  --color-text: #33ff33;
  --color-text-muted: #22cc22;
  --color-text-light: #119911;
  --color-text-inverse: #0a0a0a;

  --color-hero-bg: #0a0a0a;
  --color-hero-text: #33ff33;
  --color-hero-text-muted: #22cc22;

  --color-footer-bg: #050505;
  --color-footer-text: #33ff33;
  --color-footer-muted: #119911;

  --font-display: 'Courier New', Courier, monospace;
  --font-body: 'Courier New', Courier, monospace;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

/* Text glow + CRT vignette */
html[data-easter-egg='textadventure'] body,
html[data-easter-egg='textadventure'][data-mode='dark'] body {
  text-shadow: 0 0 5px rgba(51, 255, 51, 0.5);
  padding-bottom: 50px;
  animation: crt-flicker 4s infinite;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.7);
}

@keyframes crt-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.98;
  }
  75% {
    opacity: 0.99;
  }
}

/* CRT scanlines overlay */
html[data-easter-egg='textadventure'] body::after,
html[data-easter-egg='textadventure'][data-mode='dark'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Green top bar */
html[data-easter-egg='textadventure'] body::before,
html[data-easter-egg='textadventure'][data-mode='dark'] body::before {
  background: #33ff33;
  height: 2px;
}

/* Hero image — grayscale with green tint */
html[data-easter-egg='textadventure'] .hero__image,
html[data-easter-egg='textadventure'][data-mode='dark'] .hero__image {
  filter: grayscale(1) brightness(1.2) sepia(1) hue-rotate(70deg) saturate(3);
  border: 1px solid #33ff33;
  border-radius: 0;
}

/* Blinking cursor after name */
html[data-easter-egg='textadventure'] .hero__name::after,
html[data-easter-egg='textadventure'][data-mode='dark'] .hero__name::after {
  content: '_';
  animation: blink-cursor 1s step-end infinite;
  color: #33ff33;
}

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

/* Cards — terminal style */
html[data-easter-egg='textadventure'] .card,
html[data-easter-egg='textadventure'][data-mode='dark'] .card {
  border: 1px solid #33ff33;
  border-left: 1px solid #33ff33;
  background-color: #0a0a0a;
}

/* Nav */
html[data-easter-egg='textadventure'] .nav,
html[data-easter-egg='textadventure'][data-mode='dark'] .nav {
  background-color: #0a0a0a;
  border-bottom: 1px solid #33ff33;
}

html[data-easter-egg='textadventure'] .nav__brand,
html[data-easter-egg='textadventure'] .nav__link,
html[data-easter-egg='textadventure'][data-mode='dark'] .nav__brand,
html[data-easter-egg='textadventure'][data-mode='dark'] .nav__link {
  color: #33ff33;
}

/* Footer social buttons */
html[data-easter-egg='textadventure'] .footer__social .btn--social,
html[data-easter-egg='textadventure'][data-mode='dark'] .footer__social .btn--social {
  border-color: #33ff33;
  color: #33ff33;
}

/* Links — green */
html[data-easter-egg='textadventure'] a,
html[data-easter-egg='textadventure'][data-mode='dark'] a {
  color: #66ff66;
  text-decoration-color: #33ff33;
}

/* Selection */
html[data-easter-egg='textadventure'] ::selection,
html[data-easter-egg='textadventure'][data-mode='dark'] ::selection {
  background-color: #33ff33;
  color: #0a0a0a;
}

/* Injected: ASCII art header */
.textadventure-ascii {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.1;
  color: #33ff33;
  white-space: pre;
  text-shadow: 0 0 5px rgba(51, 255, 51, 0.5);
  text-align: center;
  pointer-events: none;
}

/* Injected: "maze" message */
.textadventure-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 499;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #33ff33;
  text-shadow: 0 0 5px rgba(51, 255, 51, 0.5);
  opacity: 0.15;
  white-space: pre-wrap;
  text-align: center;
  pointer-events: none;
  max-width: 80vw;
}

/* Injected: Command prompt bar */
.textadventure-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: #0a0a0a;
  border-top: 1px solid #33ff33;
  padding: 8px 16px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #33ff33;
  text-shadow: 0 0 5px rgba(51, 255, 51, 0.5);
}

.textadventure-prompt span {
  animation: blink-cursor 1s step-end infinite;
}

/* ==========================================================================
   Aqua Mode (motherlode) — 2003 macOS
   ========================================================================== */

html[data-easter-egg='aqua'],
html[data-easter-egg='aqua'][data-mode='dark'] {
  --color-primary: #333333;
  --color-primary-light: #555555;
  --color-primary-dark: #111111;
  --color-accent: #2a72db;
  --color-accent-light: #4a92f7;
  --color-accent-dark: #1a5ab8;

  --color-bg: #c0c0c0;
  --color-bg-alt: #d4d4d4;
  --color-surface: #ffffff;
  --color-border: #999999;

  --color-text: #222222;
  --color-text-muted: #555555;
  --color-text-light: #777777;
  --color-text-inverse: #ffffff;

  --color-hero-bg: transparent;
  --color-hero-text: #222222;
  --color-hero-text-muted: #555555;

  --color-footer-bg: #444444;
  --color-footer-text: #e0e0e0;
  --color-footer-muted: #aaaaaa;

  --font-display:
    'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
  --font-body: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Pinstripe background */
html[data-easter-egg='aqua'] body,
html[data-easter-egg='aqua'][data-mode='dark'] body {
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 1px,
    rgba(255, 255, 255, 0.3) 1px,
    rgba(255, 255, 255, 0.3) 2px
  );
}

/* Aqua blue top bar gradient */
html[data-easter-egg='aqua'] body::before,
html[data-easter-egg='aqua'][data-mode='dark'] body::before {
  height: 4px;
  background: linear-gradient(180deg, #6cb4f6 0%, #2a72db 50%, #1a5ab8 100%);
}

/* Brushed metal nav */
html[data-easter-egg='aqua'] .nav,
html[data-easter-egg='aqua'][data-mode='dark'] .nav {
  background: linear-gradient(
    180deg,
    #e8e8e8 0%,
    #d0d0d0 25%,
    #c0c0c0 50%,
    #b0b0b0 75%,
    #c8c8c8 100%
  );
  border-bottom: 1px solid #888888;
}

html[data-easter-egg='aqua'] .nav__brand,
html[data-easter-egg='aqua'] .nav__link,
html[data-easter-egg='aqua'][data-mode='dark'] .nav__brand,
html[data-easter-egg='aqua'][data-mode='dark'] .nav__link {
  color: #222222;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Cards — white gradient bg, prominent shadows */
html[data-easter-egg='aqua'] .card,
html[data-easter-egg='aqua'][data-mode='dark'] .card {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border: 1px solid #bbbbbb;
  border-left: 3px solid #2a72db;
  border-radius: 12px;
}

/* Hero image — large shadow, rounded corners */
html[data-easter-egg='aqua'] .hero__image,
html[data-easter-egg='aqua'][data-mode='dark'] .hero__image {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Glossy "lickable" buttons — Aqua pill style */
html[data-easter-egg='aqua'] .btn,
html[data-easter-egg='aqua'][data-mode='dark'] .btn {
  background: linear-gradient(180deg, #6cb4f6 0%, #4a92f7 40%, #2a72db 60%, #1a5ab8 100%);
  color: #ffffff;
  border: 1px solid #1a5ab8;
  border-radius: 9999px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

html[data-easter-egg='aqua'] .btn::after,
html[data-easter-egg='aqua'][data-mode='dark'] .btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}

/* Social buttons — Aqua pill treatment */
html[data-easter-egg='aqua'] .btn--social,
html[data-easter-egg='aqua'][data-mode='dark'] .btn--social {
  background: linear-gradient(180deg, #6cb4f6 0%, #4a92f7 40%, #2a72db 60%, #1a5ab8 100%);
  border-color: #1a5ab8;
  color: #ffffff;
}

html[data-easter-egg='aqua'] .footer__social .btn--social,
html[data-easter-egg='aqua'][data-mode='dark'] .footer__social .btn--social {
  background: linear-gradient(180deg, #6cb4f6 0%, #4a92f7 40%, #2a72db 60%, #1a5ab8 100%);
  border-color: #1a5ab8;
  color: #ffffff;
}

/* Footer — brushed metal treatment */
html[data-easter-egg='aqua'] footer,
html[data-easter-egg='aqua'][data-mode='dark'] footer {
  background: linear-gradient(
    180deg,
    #888888 0%,
    #666666 25%,
    #555555 50%,
    #444444 75%,
    #555555 100%
  );
}

/* Dark mode toggle FAB — Aqua style */
html[data-easter-egg='aqua'] .dark-mode-fab,
html[data-easter-egg='aqua'][data-mode='dark'] .dark-mode-fab {
  background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
  border: 1px solid #999999;
}

/* Selection */
html[data-easter-egg='aqua'] ::selection,
html[data-easter-egg='aqua'][data-mode='dark'] ::selection {
  background-color: #2a72db;
  color: #ffffff;
}

/* Injected: Made on a Mac badge */
.aqua-badge {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 500;
  font-family: 'Lucida Grande', Geneva, Verdana, sans-serif;
  font-size: 11px;
  color: #555555;
  background: linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 100%);
  border: 1px solid #aaaaaa;
  border-radius: 8px;
  padding: 4px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}