/* ==============================================
   NRML — Main Stylesheet
   Structure:
     1.  Custom Properties (Design Tokens)
     2.  Reset / Base
     3.  Typography
     4.  Layout Utilities
     5.  Components — Site Header
     6.  Components — Hero
     7.  Components — Site Footer
     8.  Component  — Secret Menu
     9.  Component  — Particles canvas
     10. Modes — Default fade-in
     11. Modes — ?mode=party
     12. Modes — ?mode=notnormal
     13. Media Queries
============================================== */


/* ==============================================
   1. CUSTOM PROPERTIES
============================================== */
:root {
  /* Colours */
  --color-bg:       #000000;
  --color-surface:  #0d0d0d;
  --color-text:     #ffffff;
  --color-muted:    #666666;
  --color-accent:   #ffffff;

  /* Typography */
  --font-sans:      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Helvetica, Arial, sans-serif;
  --font-mono:      "Courier New", Courier, monospace;
  --font-size-base: 1rem;
  --line-height:    1.6;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;

  /* Transitions */
  --transition-base: 200ms ease;

  /* Logo */
  --logo-size: 300px;
}


/* ==============================================
   2. RESET / BASE
============================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* ==============================================
   3. TYPOGRAPHY
============================================== */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}


/* ==============================================
   4. LAYOUT UTILITIES
============================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==============================================
   5. COMPONENT — SITE HEADER
============================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: var(--space-md);
}


/* ==============================================
   6. COMPONENT — HERO
============================================== */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
}

/* <picture> wrapper — keeps the logo centred and never wider than the viewport */
.hero__logo-wrap {
  display: block;
  width: var(--logo-size);
  max-width: 90vw; /* never clip on narrow screens */
}

.hero__logo {
  width: 100%;   /* fill the picture wrapper */
  height: auto;
  opacity: 0;    /* starts hidden; JS animates in via fadeLogo() */
  /* No-JS fallback: fade in after a brief delay so JS can cancel this first */
  animation: logo-reveal 1.4s ease 0.4s forwards;
}

@keyframes logo-reveal {
  to { opacity: 1; }
}


/* ==============================================
   7. COMPONENT — SITE FOOTER
============================================== */
.site-footer {
  padding-block: var(--space-lg);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
}


/* ==============================================
   8. COMPONENT — SECRET MENU
============================================== */
.secret-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
}

/* Wrapper so hint can sit beside the rolodex */
.secret-menu__body {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.secret-menu.is-open {
  display: flex;
}

.secret-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0; /* animated in by anime.js */
}

.secret-menu__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.secret-menu__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
}

/* Rolodex drum */
.secret-menu__rolodex {
  position: relative;
  height: 52px; /* one item height — others peek above/below */
  width: 280px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secret-menu__btn {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.15em;
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  width: 280px;
  height: 44px;
  white-space: nowrap;
  transition: border-color 150ms ease;
  will-change: transform, opacity;
}

/* Active (centred) item */
.secret-menu__btn.is-active {
  border-color: rgba(255,255,255,0.8);
  color: #fff;
}

.secret-menu__btn:hover {
  border-color: rgba(255,255,255,0.5);
}

.secret-menu__hint {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: left;
  white-space: nowrap;
}

/* Intensity row */
.secret-menu__intensity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.secret-menu__intensity-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.secret-menu__intensity-arrows {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
}

.secret-menu__intensity-arrow {
  font-size: 0.75rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.2em 0.4em;
  transition: color var(--transition-base);
  user-select: none;
}

.secret-menu__intensity-arrow:hover {
  color: var(--color-text);
}

.secret-menu__intensity-value {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  min-width: 120px;
  text-align: center;
  transition: color 150ms ease;
}

/* Colour the value by level */
.secret-menu__intensity-value[data-level="0"] { color: #7ecfff; }
.secret-menu__intensity-value[data-level="1"] { color: #ffffff; }
.secret-menu__intensity-value[data-level="2"] { color: #ff4444; text-shadow: 0 0 8px #ff4444; }


/* ==============================================
   9. COMPONENT — PARTICLES CANVAS
============================================== */
#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 1;
}


/* ==============================================
   10. MODES — Default fade-in
   (opacity handled by anime.js in main.js)
============================================== */


/* ==============================================
   11. MODES — ?mode=party
============================================== */
.party-emoji {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.6rem;
  transform: translate(-50%, -50%);
  user-select: none;
  will-change: transform, opacity;
}

/* Beat ripple — centred circle that expands outward */
.party-ripple {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 9990;
  will-change: transform, opacity;
}


/* ==============================================
   12. MODES — ?mode=rave
============================================== */

/* Tunnel zoom ring */
.rave-tunnel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 2px solid transparent; /* colour set by JS */
  pointer-events: none;
  z-index: 9991;
  will-change: transform, opacity;
}

.rave-strobe {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: none;
  opacity: 0;
}

.rave-laser {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform;
}

.mode-rave .hero__logo {
  mix-blend-mode: screen;
}


/* ==============================================
   13. MODES — ?mode=matrix
============================================== */

/* Hacking terminal — bottom-left corner */
.matrix-terminal {
  position: fixed;
  bottom: var(--space-lg);
  left: var(--space-lg);
  z-index: 9997;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.1vw, 0.78rem);
  color: #00ff41;
  text-shadow: 0 0 6px #00ff41;
  letter-spacing: 0.08em;
  line-height: 1.7;
  max-width: min(380px, 45vw);
}

.matrix-terminal__line {
  white-space: nowrap;
  overflow: hidden;
}
.matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.mode-matrix .hero {
  z-index: 2;
}

.mode-matrix .hero__logo {
  mix-blend-mode: screen;
}

.matrix-char {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: #00ff41;
  transform: translate(-50%, -50%);
  user-select: none;
  text-shadow: 0 0 6px #00ff41;
  will-change: transform, opacity;
}


/* ==============================================
   14. MODES — ?mode=notnormal
============================================== */

/* Glitch cursor trail */
.glitch-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.4rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #fff;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  user-select: none;
  text-shadow: 3px 0 #f00, -3px 0 #0ff, 0 3px #f0f;
}

/* Ghost cursor trails */
.glitch-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-size: 1.2rem;
  font-weight: 900;
  font-family: var(--font-mono);
  transform: translate(-50%, -50%);
  user-select: none;
  mix-blend-mode: screen;
}

/* Scanlines overlay */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.4) 2px,
    rgba(0, 0, 0, 0.4) 4px
  );
  animation: scanroll 4s linear infinite;
}

@keyframes scanroll {
  from { background-position: 0 0; }
  to   { background-position: 0 100vh; }
}

/* RGB split */
.mode-notnormal::before,
.mode-notnormal::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9994;
  mix-blend-mode: screen;
  animation: rgbShift 0.2s steps(1) infinite;
}

.mode-notnormal::before {
  background: rgba(255, 0, 0, 0.07);
  transform: translateX(-6px);
}

.mode-notnormal::after {
  background: rgba(0, 255, 255, 0.07);
  transform: translateX(6px);
}

@keyframes rgbShift {
  0%   { transform: translateX(-6px) translateY(0); }
  33%  { transform: translateX(6px)  translateY(-3px); }
  66%  { transform: translateX(-3px) translateY(3px); }
  100% { transform: translateX(-6px) translateY(0); }
}

/* Fake error messages */
.fake-error {
  position: fixed;
  z-index: 9993;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.2vw, 0.85rem);
  color: #ff0000;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #ff0000;
  padding: 0.3em 0.6em;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 8px #ff0000;
  letter-spacing: 0.05em;
}

/* CSS chaos classes injected by JS */
.flip-x   { transform: scaleX(-1) !important; }
.flip-y   { transform: scaleY(-1) !important; }
.spin-slow { animation: spinSlow 0.3s linear infinite !important; }
.blur-it  { filter: blur(4px) !important; }
.pixelate { image-rendering: pixelated; filter: contrast(200%) brightness(150%) !important; }

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ==============================================
   15. MEDIA QUERIES
============================================== */

/* --- Responsive logo sizing --- */
@media (max-width: 768px) {
  :root {
    --logo-size: 240px;
  }
}

@media (max-width: 480px) {
  :root {
    --logo-size: min(200px, 65vw);
  }
}

@media (max-width: 320px) {
  :root {
    --logo-size: min(160px, 80vw);
  }
}

/* --- Responsive secret menu --- */
@media (max-width: 600px) {
  /* Stack the rolodex and side instructions vertically */
  .secret-menu__body {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding-inline: var(--space-md);
  }

  .secret-menu__side {
    align-items: center;
    text-align: center;
  }

  .secret-menu__hint {
    white-space: normal;
    text-align: center;
    line-height: 1.8;
  }

  .secret-menu__rolodex,
  .secret-menu__btn {
    width: min(280px, 85vw);
  }

  .secret-menu__intensity-value {
    min-width: 100px;
  }
}

/* --- Touch devices: remove hover effects that don't apply --- */
@media (hover: none) {
  .secret-menu__btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}