/* ═══════════════════════════════════════════════
   tech is a fucking cult — stylesheet
   ═══════════════════════════════════════════════ */

:root {
  --neon-1: #ff2bd6;
  --neon-2: #00e5ff;
  --neon-3: #fffb00;
  --neon-4: #00ff6a;
  --neon-5: #ff5c00;
  --ink: #0a0014;
  --hot: #ff2bd6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace;
  color: #fff;
  background:
    repeating-linear-gradient(45deg,
      #1a0033 0 24px, #320066 24px 48px),
    #1a0033;
  overflow-x: hidden;
}

/* ═══════════ MARQUEE ═══════════ */

.marquee {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 22vh;
  min-height: 160px;
  display: flex;
  align-items: center;
  background: #000;
  border-top: 4px solid var(--neon-1);
  border-bottom: 4px solid var(--neon-2);
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(0,0,0,0.6);
}

.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation: scroll 28s linear infinite;
  will-change: transform;
}

.marquee-text {
  display: inline-block;
  padding: 0.1em 1rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(2.6rem, 7.5vw, 7.5rem);
  line-height: 1.2;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg,
    var(--neon-1), var(--neon-3), var(--neon-4),
    var(--neon-2), var(--neon-5), var(--neon-1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-shift 6s linear infinite;
  text-shadow: none;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes rainbow-shift {
  to { background-position: 300% 0; }
}

/* ═══════════ HERO HAMSTER ROW ═══════════ */

.hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(6px, 1vw, 14px);
  padding: 12px 12px 8px;
  background:
    radial-gradient(ellipse at center, #4b0082 0%, transparent 70%),
    repeating-linear-gradient(90deg,
      transparent 0 40px, rgba(255,255,255,0.04) 40px 41px);
  border-bottom: 4px dashed var(--neon-3);
  overflow: hidden;
}

/* ═══════════ WELCOME BLOCK ═══════════ */

.welcome {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px;
  text-align: center;
}

.welcome h1 {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  margin: 0 0 0.4em;
  letter-spacing: 0.05em;
}

.welcome .subtitle {
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  color: var(--neon-3);
  text-shadow: 2px 2px 0 #000;
  margin: 0.2em 0 0.8em;
}

.welcome .pitch {
  font-size: 1.3rem;
  line-height: 1.5;
  color: #fff;
  background: #000;
  padding: 14px 18px;
  border: 3px ridge var(--neon-2);
  text-align: left;
}

.welcome .pitch b { color: var(--neon-3); }
.welcome .pitch em { color: var(--neon-1); font-style: normal; text-decoration: underline; }
.welcome .pitch u { color: var(--neon-4); }

.welcome .notice {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--neon-3);
  margin-top: 16px;
}

.rainbow {
  background: linear-gradient(90deg,
    var(--neon-1), var(--neon-3), var(--neon-4),
    var(--neon-2), var(--neon-5), var(--neon-1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-shift 4s linear infinite;
}

.rainbow-bar {
  height: 10px;
  border: 0;
  margin: 20px 0;
  background: linear-gradient(90deg,
    #ff0040, #ff7700, #ffee00, #00ff33, #00e5ff, #5e00ff, #ff00cc);
  box-shadow: 0 0 12px rgba(255,255,255,0.2);
}

/* ═══════════ HAMSTER GRID ═══════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 6px;
  padding: 10px 12px;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 43, 214, 0.18) 0deg 30deg,
      rgba(0, 229, 255, 0.18) 30deg 60deg,
      rgba(255, 251, 0, 0.18) 60deg 90deg);
  border-top: 4px dashed var(--neon-1);
  border-bottom: 4px dashed var(--neon-4);
}

/* ═══════════ HAMSTER ═══════════ */

.hamster-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 1;
}

.hamster {
  width: 100%;
  height: 100%;
  max-width: 140px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35));
  animation: bob var(--bob-duration, 0.58s) ease-in-out infinite alternate;
  animation-delay: calc(var(--phase, 0) * -0.015s);
}

/* hero row sizing — wider range for depth */
.hero-row .hamster-cell { width: clamp(54px, 8vw, 120px); }
.hero-row .hamster-cell.big { transform: scale(1.3); }
.hero-row .hamster-cell.small { transform: scale(0.78); }

/* colors */
.hamster .belly       { fill: #f0b88a; }
.hamster .belly-light { fill: #f8d2a6; }
.hamster .face        { fill: #f0b88a; }
.hamster .ear         { fill: #d9905c; }
.hamster .ear-inner   { fill: #ffb9c9; }
.hamster .cheek       { fill: #ff9ab3; opacity: 0.7; }
.hamster .eye         { fill: #1a0014; }
.hamster .glint       { fill: #fff; }
.hamster .nose        { fill: #6b2a2a; }
.hamster .mouth       { stroke: #4a1515; stroke-width: 1.6; stroke-linecap: round; }
.hamster .leg         { fill: #d9905c; }
.hamster .shadow      { fill: rgba(0,0,0,0.25); }

/* color variants (applied by JS: .v1 .. .v6) */
.hamster-cell.v2 .belly, .hamster-cell.v2 .face { fill: #ffd0a3; }
.hamster-cell.v2 .ear, .hamster-cell.v2 .leg { fill: #e8a875; }

.hamster-cell.v3 .belly, .hamster-cell.v3 .face { fill: #e5b0ff; }
.hamster-cell.v3 .ear, .hamster-cell.v3 .leg { fill: #b070e0; }
.hamster-cell.v3 .belly-light { fill: #f5ccff; }

.hamster-cell.v4 .belly, .hamster-cell.v4 .face { fill: #a0f0d0; }
.hamster-cell.v4 .ear, .hamster-cell.v4 .leg { fill: #5cc99a; }
.hamster-cell.v4 .belly-light { fill: #c8f7e4; }

.hamster-cell.v5 .belly, .hamster-cell.v5 .face { fill: #fff0a0; }
.hamster-cell.v5 .ear, .hamster-cell.v5 .leg { fill: #e0c050; }
.hamster-cell.v5 .belly-light { fill: #fff8c8; }

.hamster-cell.v6 .belly, .hamster-cell.v6 .face { fill: #ffa0c8; }
.hamster-cell.v6 .ear, .hamster-cell.v6 .leg { fill: #e05c94; }
.hamster-cell.v6 .belly-light { fill: #ffc8dc; }

/* raver variant: sunglasses */
.hamster-cell.raver .eye { fill: #000; }
.hamster-cell.raver .glint { opacity: 0; }
.hamster-cell.raver .face::after { /* not applicable on SVG but kept conceptually */ }

/* animations */
@keyframes bob {
  0%   { transform: translateY(0) rotate(-1.5deg); }
  100% { transform: translateY(-12px) rotate(1.5deg); }
}

.hamster .legs-front {
  transform-origin: 60px 96px;
  animation: legs-front 0.58s ease-in-out infinite alternate;
  animation-delay: inherit;
}
.hamster .legs-back {
  transform-origin: 60px 96px;
  animation: legs-back 0.58s ease-in-out infinite alternate;
  animation-delay: inherit;
}
.hamster .head {
  transform-origin: 60px 50px;
  animation: head-wiggle 1.16s ease-in-out infinite;
  animation-delay: inherit;
}
.hamster .ear-l { animation: ear-twitch 1.6s ease-in-out infinite; transform-origin: 36px 38px; }
.hamster .ear-r { animation: ear-twitch 1.6s ease-in-out infinite 0.4s; transform-origin: 84px 38px; }

@keyframes legs-front {
  0%   { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(-2px) scaleY(0.85); }
}
@keyframes legs-back {
  0%   { transform: translateY(-2px) scaleY(0.85); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes head-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes ear-twitch {
  0%, 90%, 100% { transform: rotate(0deg); }
  95%           { transform: rotate(-20deg); }
}

/* ═══════════ MANIFESTO ═══════════ */

.manifesto {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 20px 24px;
  text-align: center;
}

.manifesto h2 {
  font-family: 'Times New Roman', serif;
  color: #ff2020;
  text-shadow: 2px 2px 0 #000, 4px 4px 0 var(--neon-3);
  font-size: clamp(1.6rem, 4vw, 3rem);
  margin-bottom: 18px;
}

.manifesto p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 12px 0;
  color: #fff;
}

.manifesto em {
  color: var(--neon-1);
  font-style: normal;
  font-weight: bold;
  text-decoration: underline;
}

.legacy-marquee {
  display: block;
  margin-top: 22px;
  padding: 10px;
  font-size: 1.4rem;
  font-weight: bold;
  background: #000;
  color: var(--neon-3);
  border: 3px ridge var(--neon-1);
  font-family: 'Times New Roman', serif;
}

/* ═══════════ BLINK ═══════════ */

.blink {
  animation: blink 1s steps(2, start) infinite;
  color: var(--neon-3);
}
@keyframes blink { to { visibility: hidden; } }

/* ═══════════ GUESTBOOK FOOTER ═══════════ */

.guestbook {
  margin-top: 40px;
  padding: 20px 16px 40px;
  text-align: center;
  background: #000;
  border-top: 6px double var(--neon-2);
}

.under-construction {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 14px;
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  color: #000;
  background: repeating-linear-gradient(45deg,
    #ffcc00 0 12px, #000 12px 24px);
  border: 3px solid #ffcc00;
}

.counter-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #111;
  border: 3px inset #888;
  margin: 10px auto 18px;
}

.counter-label {
  font-family: 'Courier New', monospace;
  color: var(--neon-3);
  font-size: 1.1rem;
}

.counter {
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  color: #ff0040;
  background: #1a0000;
  padding: 2px 10px;
  border: 2px inset #550;
  text-shadow: 0 0 6px #ff0040;
}

.webring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
}
.webring a {
  padding: 6px 12px;
  color: #00ffff;
  background: #000;
  border: 2px outset #888;
  font-family: 'Courier New', monospace;
  text-decoration: underline;
  font-size: 1.1rem;
}
.webring a:visited { color: #d070ff; }
.webring a:hover   { color: var(--neon-3); background: #222; }

.tiny {
  font-size: 1rem;
  color: #aaa;
  margin-top: 18px;
}

/* ═══════════ REDUCED MOTION ═══════════ */

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-text,
  .rainbow,
  .hamster,
  .hamster .legs-front,
  .hamster .legs-back,
  .hamster .head,
  .hamster .ear-l,
  .hamster .ear-r,
  .blink {
    animation: none !important;
  }
}

/* ═══════════ MOBILE ═══════════ */

@media (max-width: 520px) {
  .marquee { height: 18vh; min-height: 120px; }
}