/* ====================================================
   PARI TECH — design system (preset: b4XwkK2enL)
   ==================================================== */

/* ─── 1. DESIGN TOKENS — light (default) ─────────── */
:root {
  --background:           oklch(1 0 0);
  --foreground:           oklch(0.145 0 0);
  --card:                 oklch(0.985 0 0);
  --card-foreground:      oklch(0.145 0 0);
  --muted:                oklch(0.97 0 0);
  --muted-foreground:     oklch(0.556 0 0);
  --primary:              oklch(0.555 0.163 48.998);
  --primary-foreground:   oklch(0.987 0.022 95.277);
  --border:               oklch(0.922 0 0);
  --ring:                 oklch(0.708 0 0);
  --radius:               0.625rem;
  /* site-specific */
  --symbol:               oklch(0.72 0 0);
  --dim:                  oklch(0.88 0 0);
  --accent-green:         oklch(0.527 0.154 150.069);
  --accent-orange:        oklch(0.555 0.163 48.998);
  --accent-purple:        oklch(0.585 0.148 282.072);
  --sel-bg:               oklch(0.145 0 0);
  --sel-fg:               oklch(1 0 0);
  --card-hover:           oklch(0.975 0 0);
  --tag-bg:               oklch(0.96 0 0);
  --tag-border:           oklch(0.9 0 0);
}

/* ─── 2. DESIGN TOKENS — dark ─────────────────────── */
[data-theme="dark"] {
  --background:           oklch(0.145 0 0);
  --foreground:           oklch(0.985 0 0);
  --card:                 oklch(0.185 0 0);
  --card-foreground:      oklch(0.985 0 0);
  --muted:                oklch(0.22 0 0);
  --muted-foreground:     oklch(0.62 0 0);
  --primary:              oklch(0.6 0.137 46.201);
  --primary-foreground:   oklch(0.987 0.022 95.277);
  --border:               oklch(1 0 0 / 9%);
  --ring:                 oklch(0.556 0 0);
  --symbol:               oklch(0.35 0 0);
  --dim:                  oklch(0.24 0 0);
  --accent-green:         oklch(0.643 0.197 142.496);
  --accent-orange:        oklch(0.72 0.191 58.619);
  --accent-purple:        oklch(0.693 0.148 282.072);
  --sel-bg:               oklch(1 0 0);
  --sel-fg:               oklch(0.145 0 0);
  --card-hover:           oklch(0.2 0 0);
  --tag-bg:               oklch(0.18 0 0);
  --tag-border:           oklch(0.28 0 0);
}

/* ─── 3. RESET ─────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── 4. BASE ──────────────────────────────────────── */
html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Courier New", Courier, monospace;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 1.5rem 4rem;
}
::selection {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

/* ─── 5. LAYOUT ────────────────────────────────────── */
#header-bar {
  position: fixed;
  top: 0;
  left: max(0px, calc(50vw - 195px));
  width: min(100vw, 390px);
  height: 5rem;
  background: linear-gradient(
    to bottom,
    var(--background) 0%,
    var(--background) 68%,
    transparent 100%
  );
  z-index: 98;
  transition: background 0.4s;
  pointer-events: none;
}
#container {
  max-width: 390px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── 6. CONTROLS ──────────────────────────────────── */
#controls {
  position: fixed;
  top: 1.3rem;
  right: max(0.75rem, calc(50vw - 195px + 0.75rem));
  display: flex;
  gap: 0.4rem;
  z-index: 99;
}
#controls-left {
  position: fixed;
  top: 1.3rem;
  left: max(0.75rem, calc(50vw - 195px + 0.75rem));
  z-index: 99;
}
.ctrl-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.ctrl-btn:hover,
.ctrl-btn.active {
  color: var(--foreground);
  border-color: var(--muted-foreground);
  background: color-mix(in oklch, var(--foreground) 5%, transparent);
}

/* ─── 7. MUSIC MINI-PLAYER ─────────────────────────── */
#music-wrap { position: relative; }

.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 7px;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
}
.eq-bar {
  width: 2px;
  background: var(--muted-foreground);
  border-radius: 1px;
  animation: eqBounce 0.7s ease-in-out infinite alternate;
  transition: background 0.3s;
}
.eq-bar:nth-child(1) { animation-duration: 0.55s; animation-delay: 0s; }
.eq-bar:nth-child(2) { animation-duration: 0.8s;  animation-delay: 0.15s; }
.eq-bar:nth-child(3) { animation-duration: 0.6s;  animation-delay: 0.05s; }
@keyframes eqBounce {
  from { height: 2px; opacity: 0.4; }
  to   { height: 7px; opacity: 1; }
}
#music-btn.paused .eq-bar {
  animation-play-state: paused;
  height: 3px;
  opacity: 0.3;
}
#music-btn:hover .eq-bar,
#music-btn.active .eq-bar {
  background: var(--foreground);
}

#music-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 210px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem 0.6rem;
  font-family: "Courier New", monospace;
  font-size: 0.5rem;
  color: var(--muted-foreground);
  z-index: 100;
  transition: background 0.4s, border-color 0.4s;
  box-shadow: 0 4px 24px oklch(0 0 0 / 0.15);
}
#music-panel.open { display: block; }
.mp-label {
  font-size: 0.38rem;
  color: var(--symbol);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.mp-title {
  font-size: 0.62rem;
  color: var(--foreground);
  margin-bottom: 0.08rem;
  letter-spacing: 0.01em;
}
.mp-artist {
  font-size: 0.44rem;
  color: var(--muted-foreground);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.mp-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.4rem;
  color: var(--symbol);
  margin-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.mp-bar-wrap {
  width: 100%;
  height: 2px;
  background: var(--dim);
  margin-bottom: 0.5rem;
  overflow: hidden;
  border-radius: 1px;
}
.mp-bar {
  height: 100%;
  background: var(--muted-foreground);
  width: 0%;
  animation: mpfill 222s linear infinite;
}
@keyframes mpfill { 0% { width: 0%; } 100% { width: 100%; } }
.mp-controls {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}
.mp-ctrl-btn {
  background: none;
  border: none;
  color: var(--symbol);
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
  line-height: 1;
}
.mp-ctrl-btn:hover { color: var(--foreground); }
.mp-footer {
  font-size: 0.35rem;
  color: var(--symbol);
  text-align: center;
  letter-spacing: 0.1em;
  border-top: 1px solid var(--border);
  padding-top: 0.3rem;
}

/* ─── 8. SKIP BUTTON — removed ─────────────────────── */

/* ─── 9. MANIFEST HEADER ───────────────────────────── */
#manifest-header {
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 1.4rem;
  opacity: 0;
  transition: opacity 0.6s;
}
#manifest-header.visible { opacity: 1; }
.manifest-kicker {
  font-size: 0.42rem;
  color: var(--symbol);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.45rem;
}
.manifest-title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--foreground);
  display: block;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.manifest-sub {
  font-size: 0.68rem;
  color: var(--muted-foreground);
  letter-spacing: 0.01em;
  line-height: 1.55;
  display: block;
}

/* ─── 10. TYPEWRITER ───────────────────────────────── */
#typewriter-wrapper {
  width: 100%;
  max-height: 275px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
#typewriter-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 1;
}
[data-theme="dark"] #typewriter-wrapper::after {
  background: linear-gradient(to bottom, transparent, oklch(0.145 0 0));
}
[data-theme="light"] #typewriter-wrapper::after {
  background: linear-gradient(to bottom, transparent, oklch(1 0 0));
}
#typewriter-wrapper.expanded {
  max-height: 1500px;
}
#typewriter-wrapper.expanded::after {
  opacity: 0;
}
#typewriter-readmore {
  display: block;
  background: none;
  border: none;
  color: var(--muted-foreground);
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  padding: 0.6rem 0;
  cursor: pointer;
  letter-spacing: 0.2em;
  width: 100%;
  text-align: left;
  transition: color 0.2s;
  margin-bottom: 0.5rem;
}
#typewriter-readmore:hover { color: var(--foreground); }
#typewriter-readmore.hidden { display: none; }
#typewriter {
  width: 100%;
  text-align: left;
  min-height: 200px;
  margin-bottom: 1rem;
}
.tw-line {
  font-size: 0.82rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
  overflow: hidden;
  white-space: pre-wrap;
  display: block;
}
.tw-line.quiet   { color: oklch(0.50 0 0); font-size: 0.74rem; }
[data-theme="dark"] .tw-line.quiet { color: oklch(0.58 0 0); }
.tw-line.loud    { font-size: 1rem; letter-spacing: 0.01em; color: var(--foreground); }
.tw-line.whisper {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--foreground);
  text-transform: none;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}
.tw-line.whisper:first-child { margin-top: 0; }
/* prevent .gap from overriding the whisper's own top margin */
.tw-line.whisper.gap { margin-top: 2rem; }
.tw-line.divider { color: var(--symbol); font-size: 0.6rem; letter-spacing: 0.8em; line-height: 2.8; }
.tw-line.gap     { margin-top: 0.4rem; }
.tw-line.rule    { display: none; height: 0; }
.tw-line.section-gap { margin-top: 3rem; }
.tw-line.accent  { color: var(--primary); font-size: 0.82rem; letter-spacing: 0.03em; }
.tw-line.sep {
  display: block;
  color: var(--symbol);
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  margin-top: 1.5rem;
  opacity: 0.5;
  user-select: none;
}
.tw-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: var(--foreground);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  margin-left: 1px;
}

/* ─── 11. ASCII ART ────────────────────────────────── */
#ascii-container {
  opacity: 0;
  transition: opacity 1.2s;
  margin-bottom: 2.5rem;
  text-align: center;
}
#ascii-container.visible { opacity: 1; }
#ascii-art {
  font-size: 3.2px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: pre;
  color: var(--dim);
  display: inline-block;
  text-align: left;
  transition: color 2s;
}
#ascii-container.visible #ascii-art { color: var(--muted-foreground); }

/* ─── 12. BRAND ────────────────────────────────────── */
#brand {
  opacity: 0;
  transition: opacity 0.8s;
  margin-bottom: 0.4rem;
  text-align: center;
}
#brand.visible { opacity: 1; }
#brand h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: lowercase;
  transition: color 0.5s ease;
}
#brand .sub {
  font-size: 0.63rem;
  color: var(--muted-foreground);
  letter-spacing: 0.12em;
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* ─── 13. GAME ─────────────────────────────────────── */
#game-card {
  width: 100%;
  max-width: 390px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.8rem 0.6rem;
  margin: 2.8rem 0 1rem;
  opacity: 0;
  transition: opacity 0.6s, background 0.4s, border-color 0.4s;
}
#game-card.visible { opacity: 1; }
#game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
#game-label {
  font-size: 0.45rem;
  color: var(--muted-foreground);
  letter-spacing: 0.25em;
  text-transform: lowercase;
}
#game-zone {
  width: 100%;
  max-width: 390px;
  height: 108px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  border-radius: calc(var(--radius) * 0.5);
}
#game-zone.visible { opacity: 1; }
#game-hint {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  color: var(--symbol);
  letter-spacing: 0.1em;
  transition: opacity 0.3s;
  white-space: nowrap;
}
#game-zone.playing #game-hint { opacity: 0; pointer-events: none; }
#game-start-btn {
  position: absolute;
  top: 38px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s;
  z-index: 5;
}
#game-start-btn:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}
/* when game-over text is visible, push start button down */
#game-over-text.show ~ #game-start-btn { top: 60px; }
#game-zone.playing #game-start-btn,
#game-zone.started #game-start-btn { display: none; }
#game-jump-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: auto;
  background: none;
  border: 1px solid var(--border);
  color: var(--symbol);
  font-family: "Courier New", monospace;
  font-size: 0.5rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  z-index: 5;
  touch-action: manipulation;
  user-select: none;
}
/* larger invisible tap area for jumping on mobile */
#game-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
#game-zone.playing #game-jump-btn { display: block; }
/* game improvement styles */
.boss-obstacle { font-size: 20px; }
.powerup { filter: saturate(1.8); }
#game-zone.game-night { background: oklch(0.1 0 0); }
#game-zone.game-night .obstacle {
  filter: drop-shadow(0 0 3px var(--accent-orange));
}
#game-zone.game-slow #pigeon {
  filter: drop-shadow(0 0 5px oklch(0.75 0.2 200));
}
#score-display.score-combo { color: var(--accent-orange); }
#score-display { transition: color 0.15s; }

/* pombasso mode toast */
#pombasso-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-family: "Courier New", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: var(--accent-orange);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  line-height: 1.6;
}
@keyframes pombassoIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  35%  { transform: translate(-50%, -50%) scale(0.97); }
  50%  { transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
#pombasso-toast.active {
  animation: pombassoIn 2s cubic-bezier(0.22, 0.68, 0, 1.2) forwards;
}
@keyframes pigeonPop {
  0%   { font-size: 18px; }
  30%  { font-size: 36px; }
  60%  { font-size: 22px; }
  80%  { font-size: 26px; }
  100% { font-size: 20px; }
}
#pigeon.pombasso-pop {
  animation: pigeonPop 0.6s cubic-bezier(0.22, 0.68, 0, 1.2) forwards;
}

@keyframes pigeonBob {
  0%   { transform: scaleX(-1) translateY(0px);  }
  50%  { transform: scaleX(-1) translateY(-2px); }
  100% { transform: scaleX(-1) translateY(0px);  }
}
#game-zone.playing #pigeon.walking {
  animation: pigeonBob 0.22s steps(2, end) infinite;
}
#ground {
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--border);
  transition: background 0.4s;
}
#pigeon {
  position: absolute;
  bottom: 19px;
  left: 50px;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
  transform: scaleX(-1);
  transition: none;
}
.obstacle {
  position: absolute;
  bottom: 19px;
  font-size: 15px;
  line-height: 1;
  z-index: 2;
}
#score-display {
  font-size: 0.6rem;
  color: var(--symbol);
  letter-spacing: 0.1em;
  transition: color 0.3s, text-shadow 0.3s;
}
#game-card:has(#game-zone.playing) #score-display {
  color: var(--accent-orange);
  text-shadow: 0 0 8px color-mix(in oklch, var(--accent-orange) 60%, transparent);
}
#score-display.score-combo {
  color: oklch(0.85 0.2 80);
  text-shadow: 0 0 12px oklch(0.85 0.2 80 / 0.7);
}
#game-over-text {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  color: var(--accent-orange);
  opacity: 0;
  text-align: center;
  transition: opacity 0.3s;
  letter-spacing: 0.02em;
  line-height: 1.6;
  width: 90%;
  padding: 0.25rem 0.5rem 0.6rem;
  z-index: 4;
}
#game-over-text.show { opacity: 1; }

/* ─── 14. PRODUCTS ─────────────────────────────────── */
#products-section {
  margin-top: 2.5rem;
  width: 100%;
  max-width: 390px;
  padding-left: 2rem;
  position: relative;
  opacity: 0;
  transition: opacity 0.5s;
}
#products-section.visible { opacity: 1; }
#products-label {
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}
.products-kicker {
  display: block;
  font-size: 0.58rem;
  color: var(--symbol);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.products-title {
  display: block;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--foreground);
  line-height: 1.2;
}
.product-card {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.8rem;
  position: relative;
  margin-left: 0;
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  border-color: var(--muted-foreground);
  background: var(--card-hover);
  box-shadow: 0 2px 12px oklch(0 0 0 / 0.08);
}
.product-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.product-card .card-name {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.card-status {
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: calc(var(--radius) * 0.6);
}
.status-live,
.status-launched {
  background: color-mix(in oklch, var(--accent-green) 15%, transparent);
  color: var(--accent-green);
  border: 1px solid color-mix(in oklch, var(--accent-green) 30%, transparent);
}
.status-wip {
  background: color-mix(in oklch, var(--accent-orange) 15%, transparent);
  color: var(--accent-orange);
  border: 1px solid color-mix(in oklch, var(--accent-orange) 30%, transparent);
}
.status-idea {
  background: color-mix(in oklch, var(--accent-purple) 15%, transparent);
  color: var(--accent-purple);
  border: 1px solid color-mix(in oklch, var(--accent-purple) 30%, transparent);
}
.status-pivoted {
  background: color-mix(in oklch, var(--muted-foreground) 10%, transparent);
  color: var(--muted-foreground);
  border: 1px solid color-mix(in oklch, var(--muted-foreground) 22%, transparent);
  opacity: 0.75;
}
.product-card .card-desc {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  margin-bottom: 0.6rem;
}
.card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.card-tag {
  font-size: 0.45rem;
  color: var(--muted-foreground);
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--tag-border);
  background: var(--tag-bg);
  border-radius: calc(var(--radius) * 0.5);
}
.card-category {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.5);
  color: var(--muted-foreground);
}
/* timeline connector */
.product-card::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--dim);
  box-sizing: border-box;
  z-index: 1;
  transition: border-color 0.2s;
}
/* nth-child(2..4) are the cards; nth-child(1) is #products-label */
.product-card:nth-child(2)::before { border-color: var(--accent-purple); background: color-mix(in oklch, var(--accent-purple) 18%, var(--background)); }
.product-card:nth-child(3)::before { border-color: var(--accent-orange); background: color-mix(in oklch, var(--accent-orange) 18%, var(--background)); }
.product-card:nth-child(4)::before { border-color: var(--accent-green);  background: color-mix(in oklch, var(--accent-green)  18%, var(--background)); }
.product-card:nth-child(5)::before { border-color: var(--muted-foreground); background: color-mix(in oklch, var(--muted-foreground) 12%, var(--background)); opacity: 0.5; }
#products-section::before {
  content: "";
  position: absolute;
  left: 0.75rem;   /* = padding-left(2rem) - card_dot_left(1.5rem) + dot_half(0.25rem) */
  top: 3.2rem;
  bottom: 0.8rem;
  width: 1px;
  background: var(--border);
}

/* ─── 15. PIGEON ASCII ─────────────────────────────── */
#pigeon-ascii-wrap {
  opacity: 0;
  transition: opacity 0.8s;
  margin-top: 3rem;
  text-align: center;
}
#pigeon-ascii-wrap.visible { opacity: 1; }
#pigeon-ascii {
  font-size: 3.5px;
  line-height: 1.18;
  white-space: pre;
  color: var(--symbol);
  display: inline-block;
  text-align: left;
  font-family: "Courier New", monospace;
  transition: color 1s;
  cursor: pointer;
  transform: scaleX(1);
  will-change: transform;
}
#pigeon-ascii-wrap.visible #pigeon-ascii { color: var(--muted-foreground); }
@keyframes pigeonJumpFlip {
  0%   { transform: scaleX(1)  translateY(0); }
  30%  { transform: scaleX(1)  translateY(-22px); }
  55%  { transform: scaleX(-1) translateY(-14px); }
  100% { transform: scaleX(-1) translateY(0); }
}
@keyframes pigeonJumpUnflip {
  0%   { transform: scaleX(-1) translateY(0); }
  30%  { transform: scaleX(-1) translateY(-22px); }
  55%  { transform: scaleX(1)  translateY(-14px); }
  100% { transform: scaleX(1)  translateY(0); }
}
#pigeon-ascii.jump-flip   { animation: pigeonJumpFlip   0.42s cubic-bezier(.22,.68,0,1.2) forwards; }
#pigeon-ascii.jump-unflip { animation: pigeonJumpUnflip 0.42s cubic-bezier(.22,.68,0,1.2) forwards; }

/* ─── 16. EGG BUTTON ───────────────────────────────── */
#egg-btn {
  font-size: 0.4rem;
  color: #c44;
  letter-spacing: 0.25em;
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  border: 1px solid #c44;
  padding: 0.28rem 0.65rem;
  display: inline-block;
  border-radius: var(--radius);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  animation: eggPulse 2.8s ease-in-out infinite;
}
#egg-btn:hover {
  background: rgba(204, 68, 68, 0.1);
  color: #e66;
  border-color: #e66;
}
@keyframes eggPulse {
  0%, 100% { border-color: #a33; opacity: 0.75; }
  50%       { border-color: #d55; opacity: 1; }
}
#pigeon-label {
  font-size: 0.55rem;
  color: var(--muted-foreground);
  letter-spacing: 0.15em;
  margin-top: 0.8rem;
}

/* ─── 17. KERNEL EASTER EGG — terminal meltdown ─────── */
#kernel-overlay {
  position: fixed;
  left: max(0px, calc(50vw - 195px));
  top: 0;
  bottom: 0;
  width: min(100vw, 390px);
  background: var(--background);
  border-left: 1px solid var(--accent-orange);
  border-right: 1px solid var(--accent-orange);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 2rem 1.8rem;
  box-shadow: inset 0 0 80px color-mix(in oklch, var(--accent-orange) 8%, transparent);
}
/* scanlines */
#kernel-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    oklch(0 0 0 / 0.04) 2px,
    oklch(0 0 0 / 0.04) 4px
  );
  pointer-events: none;
  z-index: 1;
}
@keyframes errBlink {
  0%, 100% { opacity: 1; }
  49%       { opacity: 1; }
  50%       { opacity: 0; }
  99%       { opacity: 0; }
}
#kernel-header {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  color: var(--accent-orange);
  letter-spacing: 0.18em;
  margin-bottom: 1.8rem;
  line-height: 1.6;
  width: 100%;
}
#kernel-header span {
  display: inline-block;
  animation: errBlink 1.1s step-end infinite;
}
#kernel-logs {
  width: 100%;
  font-family: "Courier New", monospace;
  font-size: 0.5rem;
  line-height: 1.9;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  max-height: 220px;
  overflow: hidden;
}
.kernel-log {
  display: block;
  position: static;
  font-size: 0.5rem;
  animation: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kernel-log.err  { color: var(--accent-orange); }
.kernel-log.warn { color: var(--accent-green); }
.kernel-log.ok   { color: var(--muted-foreground); }
#kernel-msg {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  color: var(--foreground);
  letter-spacing: 0.04em;
  line-height: 1.8;
  border: 1px solid color-mix(in oklch, var(--accent-orange) 40%, var(--border));
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  width: 100%;
  white-space: pre-line;
}
#kernel-exit {
  margin-top: 1.5rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted-foreground);
  font-family: "Courier New", monospace;
  font-size: 0.52rem;
  padding: 0.35rem 1rem;
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: color 0.2s, border-color 0.2s;
  z-index: 1000;
}
#kernel-exit:hover { color: var(--foreground); border-color: var(--muted-foreground); }
#kernel-overlay.active { /* no background pulse — site handles its own dark */ }

@keyframes kernelDissolve {
  0%   { opacity: 1; filter: none; transform: none; }
  25%  { opacity: 1; filter: contrast(1.8) brightness(1.4) saturate(0); transform: skewX(0.4deg); }
  50%  { opacity: 0.6; filter: blur(0.8px) contrast(2.5) brightness(1.8); transform: skewX(-0.6deg) scaleY(0.985); }
  75%  { opacity: 0.25; filter: blur(3px) brightness(2.5); transform: scaleY(0.96) skewX(1.2deg); }
  100% { opacity: 0; filter: blur(8px) brightness(4); transform: scaleY(0.9); }
}
#kernel-overlay.dissolving {
  animation: kernelDissolve 0.5s ease-in forwards;
  pointer-events: none;
}

/* ─── 18. PILL EASTER EGG ───────────────────────────── */
#pill-trigger {
  margin-top: 0.7rem;
  background: none;
  border: 1px solid color-mix(in oklch, var(--accent-orange) 22%, var(--border));
  border-radius: var(--radius);
  color: color-mix(in oklch, var(--accent-orange) 55%, var(--muted-foreground));
  font-family: "Courier New", monospace;
  font-size: 0.5rem;
  padding: 0.35rem 1rem;
  cursor: pointer;
  letter-spacing: 0.09em;
  line-height: 1.6;
  text-align: left;
  transition: color 0.2s, border-color 0.2s;
  z-index: 1000;
}
#pill-trigger:hover {
  color: var(--accent-orange);
  border-color: color-mix(in oklch, var(--accent-orange) 55%, var(--border));
}

@keyframes crtFlicker {
  0%, 89%, 91%, 93%, 100% { opacity: 1; }
  90%  { opacity: 0.92; }
  92%  { opacity: 0.97; }
}
@keyframes crtHSync {
  0%, 94%, 96%, 100% { transform: translateX(0); }
  95% { transform: translateX(-1.5px); }
}

#pill-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.015 0 0);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.7s ease;
}
/* vignette — heavy CRT screen edge */
#pill-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 75% at 50% 50%,
    transparent 45%,
    oklch(0 0 0 / 0.55) 80%,
    oklch(0 0 0 / 0.85) 100%
  );
  pointer-events: none;
  z-index: 10;
}
/* dense scanlines */
#pill-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    oklch(0 0 0 / 0.18) 1px,
    oklch(0 0 0 / 0.18) 2px
  );
  pointer-events: none;
  z-index: 11;
}
#pill-overlay.active {
  opacity: 1;
  animation: crtFlicker 9s ease-in-out infinite, crtHSync 14s steps(1) infinite;
}

#pill-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
}
#pill-intro {
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  color: var(--muted-foreground);
  letter-spacing: 0.2em;
  min-height: 1.2em;
  margin: 0;
}
#pill-options {
  display: flex;
  gap: 4.5rem;
  align-items: flex-start;
  transition: opacity 0.8s ease;
}
.pill-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.pill {
  width: 88px;
  height: 34px;
  border-radius: 50px;
  cursor: pointer;
  transition: box-shadow 0.35s ease, transform 0.2s ease;
  outline: none;
}
.pill:hover { transform: translateY(-3px); }
.pill-red {
  background: oklch(0.55 0.22 25 / 80%);
  border: 2px solid oklch(0.65 0.22 25);
  box-shadow:
    0 0 14px oklch(0.55 0.22 25 / 60%),
    inset 0 0 12px oklch(0.75 0.18 25 / 20%);
}
.pill-red:hover {
  background: oklch(0.58 0.22 25 / 92%);
  box-shadow:
    0 0 32px oklch(0.55 0.22 25 / 95%),
    0 0 70px oklch(0.55 0.22 25 / 40%),
    inset 0 0 20px oklch(0.75 0.18 25 / 30%);
}
.pill-blue {
  background: oklch(0.5 0.2 260 / 80%);
  border: 2px solid oklch(0.62 0.2 260);
  box-shadow:
    0 0 14px oklch(0.5 0.2 260 / 60%),
    inset 0 0 12px oklch(0.7 0.16 260 / 20%);
}
.pill-blue:hover {
  background: oklch(0.53 0.2 260 / 92%);
  box-shadow:
    0 0 32px oklch(0.5 0.2 260 / 95%),
    0 0 70px oklch(0.5 0.2 260 / 40%),
    inset 0 0 20px oklch(0.7 0.16 260 / 30%);
}
.pill-label {
  font-family: "Courier New", monospace;
  font-size: 0.48rem;
  color: var(--muted-foreground);
  letter-spacing: 0.18em;
}

#pill-outcome {
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: absolute;
  inset: 0;
  padding: 0;
  max-width: 520px;
  margin: 0 auto;
  z-index: 3;
  overflow: hidden;
}
/* top fade */
#pill-outcome::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, oklch(0.015 0 0) 25%, transparent);
  pointer-events: none;
  z-index: 5;
}
/* bottom fade — sits above scroll, below exit bar */
#pill-outcome::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 3.2rem;
  height: 5rem;
  background: linear-gradient(to top, oklch(0.015 0 0) 25%, transparent);
  pointer-events: none;
  z-index: 5;
}
#pill-outcome-text {
  flex: 1;
  overflow-y: auto;
  padding: 5rem clamp(2rem, 8vw, 5rem) 10rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
  white-space: pre-wrap;
}
#pill-outcome-text::-webkit-scrollbar { display: none; }
#pill-outcome-text.red {
  color: var(--accent-green);
  text-shadow:
    0 0 5px oklch(0.643 0.197 142.496 / 0.7),
    0 0 14px oklch(0.643 0.197 142.496 / 0.35),
    0 0 28px oklch(0.643 0.197 142.496 / 0.15);
}
#pill-outcome-text.blue {
  color: oklch(0.68 0.05 220);
  text-shadow:
    0 0 5px oklch(0.68 0.08 220 / 0.55),
    0 0 14px oklch(0.68 0.08 220 / 0.25),
    0 0 28px oklch(0.68 0.08 220 / 0.1);
}
.pill-disclaimer { color: oklch(0.55 0.22 25 / 85%) !important; }

#pill-choice-exit {
  flex-shrink: 0;
  margin-top: 2rem;
  background: none;
  border: none;
  border-top: 1px solid oklch(1 0 0 / 8%);
  color: oklch(0.4 0 0);
  font-family: "Courier New", monospace;
  font-size: 0.48rem;
  padding: 0.8rem 2rem;
  cursor: pointer;
  letter-spacing: 0.12em;
  width: 100%;
  text-align: center;
  transition: color 0.2s;
}
#pill-choice-exit:hover { color: var(--muted-foreground); }

#pill-close {
  flex-shrink: 0;
  display: block;
  margin: 0;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted-foreground);
  font-family: "Courier New", monospace;
  font-size: 0.52rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  letter-spacing: 0.12em;
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: color 0.2s, background 0.2s;
  position: relative;
  z-index: 6;
}
#pill-close:hover { color: var(--foreground); background: oklch(1 0 0 / 4%); }

/* ─── 19. ANIMATIONS ───────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
#typewriter {
  transition: none;
}

/* ─── 19. RESPONSIVE ───────────────────────────────── */
@media (max-width: 768px) {
  /* tech badges e category — legíveis no mobile */
  .card-tag {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
  }
  .card-category {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  /* read more — tap target decente */
  #typewriter-readmore {
    font-size: 0.82rem;
    padding: 1rem 0;
    letter-spacing: 0.12em;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 420px) {
  #ascii-art {
    font-size: 2.4px;
    transform: scale(1.25);
    transform-origin: top center;
  }
  #pigeon-ascii { font-size: 2.2px; }
  body { padding: 5rem 1rem 3rem; }
  .product-card { padding: 0.8rem 1rem; }
  .card-category { display: none; }
  .tw-line { font-size: 0.8rem; }
  #music-panel { width: 180px; }
}