:root {
  --bg: #f7f2e7;
  --ink: #1f1a17;
  --muted: #5c4d43;
  --brand: #bd5f2b;
  --brand-dark: #93481f;
  --surface: #fffaf1;
  --line: #e7dccf;
  --shadow: 0 14px 40px rgba(43, 21, 7, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 25% 10%, rgba(255, 224, 183, 0.35), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(234, 183, 118, 0.25), transparent 50%),
    var(--bg);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.bg-shape {
  position: fixed;
  border-radius: 999px;
  filter: blur(2px);
  z-index: -1;
}

.bg-shape-a {
  width: 460px;
  height: 460px;
  top: -160px;
  right: -160px;
  background: linear-gradient(120deg, rgba(189, 95, 43, 0.3), rgba(126, 53, 22, 0.4));
}

.bg-shape-b {
  width: 380px;
  height: 380px;
  bottom: -140px;
  left: -140px;
  background: linear-gradient(140deg, rgba(210, 144, 78, 0.33), rgba(255, 205, 142, 0.2));
}

.site-header {
  padding: 1rem 0;
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(247, 242, 231, 0.72);
  border-bottom: 1px solid rgba(146, 110, 81, 0.2);
  z-index: 10;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.03em;
}

.site-nav {
  display: flex;
  gap: 1rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--brand-dark);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
}

.fancy-toggle,
.retro-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.fancy-toggle:hover,
.fancy-toggle:focus-visible,
.retro-toggle:hover,
.retro-toggle:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.fancy-toggle[aria-pressed='true'] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, #be5b27, #f1a334 55%, #d95720);
}

.retro-toggle[aria-pressed='true'] {
  color: #101010;
  border-color: #4d4d4d;
  background: linear-gradient(180deg, #d8d8d8, #a9a9a9);
}

.language-select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font: inherit;
  max-width: 170px;
}

.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;
}

.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font: inherit;
}

.hero {
  padding: 5rem 0 3rem;
}

.eyebrow {
  margin: 0;
  color: var(--brand-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

h1,
h2 {
  font-family: "Fraunces", serif;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(2rem, 6vw, 4.2rem);
  max-width: 13ch;
}

.intro {
  max-width: 55ch;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
}

.hero-actions {
  margin-top: 1.7rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.bottle-showcase {
  padding-bottom: 1.8rem;
}

.bottle-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.bottle-image {
  width: 100%;
  display: block;
  border-radius: 18px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #efe4d3;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
  width: 100%;
}

picture img {
  display: block;
  width: 100%;
  height: auto;
}

.bottle-caption {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  min-height: 44px;
  line-height: 1.2;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand-dark);
}

.btn-ghost {
  border: 1px solid #bda58f;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  padding: 1.6rem 0 2.6rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.card h2 {
  margin-top: 0;
  font-size: 1.45rem;
}

.card p {
  margin-bottom: 0;
  color: var(--muted);
}

.text-link {
  display: inline-block;
  margin-top: 0.85rem;
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
}

.about {
  padding-bottom: 4rem;
}

.about p {
  max-width: 65ch;
  color: var(--muted);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 2.2rem;
}

.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

body.fancy-mode {
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 214, 143, 0.35), transparent 40%),
    radial-gradient(circle at 88% 14%, rgba(255, 99, 37, 0.3), transparent 42%),
    radial-gradient(circle at 30% 95%, rgba(255, 188, 91, 0.24), transparent 45%),
    linear-gradient(130deg, #2a160f, #1f0f0c 48%, #311811);
  color: #f6e8d8;
}

body.fancy-mode .brand,
body.fancy-mode h1,
body.fancy-mode h2 {
  color: #fff2df;
}

body.fancy-mode .site-header {
  background: rgba(35, 17, 13, 0.74);
  border-bottom: 1px solid rgba(255, 174, 90, 0.35);
}

body.fancy-mode .site-nav a,
body.fancy-mode .intro,
body.fancy-mode .card p,
body.fancy-mode .about p,
body.fancy-mode .bottle-caption,
body.fancy-mode .site-footer p {
  color: #f2d8bc;
}

body.fancy-mode .card,
body.fancy-mode .about,
body.fancy-mode .bottle-card,
body.fancy-mode .site-nav {
  background: linear-gradient(160deg, rgba(64, 36, 27, 0.92), rgba(45, 24, 18, 0.96));
  border-color: rgba(252, 184, 104, 0.4);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 237, 203, 0.06);
}

body.fancy-mode .card::after,
body.fancy-mode .bottle-card::after {
  content: '';
  position: absolute;
  inset: -130% -40%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 214, 0.23) 48%, transparent 62%);
  transform: translateX(-30%) rotate(14deg);
  animation: sheen 9s linear infinite;
  pointer-events: none;
}

body.fancy-mode .btn-primary {
  background: linear-gradient(120deg, #c1571f, #f1a12d 55%, #d24d1a);
}

body.fancy-mode .btn-ghost,
body.fancy-mode .language-select,
body.fancy-mode .menu-toggle,
body.fancy-mode .fancy-toggle {
  border-color: rgba(250, 183, 101, 0.45);
  background: rgba(255, 235, 205, 0.1);
  color: #fff0dc;
}

body.fancy-mode .eyebrow {
  color: #ffd083;
}

body.fancy-mode .bg-shape-a {
  background: linear-gradient(125deg, rgba(255, 177, 92, 0.45), rgba(238, 76, 24, 0.34));
}

body.fancy-mode .bg-shape-b {
  background: linear-gradient(140deg, rgba(255, 147, 59, 0.3), rgba(251, 213, 142, 0.2));
}

@keyframes sheen {
  0% {
    transform: translateX(-34%) rotate(14deg);
  }

  100% {
    transform: translateX(40%) rotate(14deg);
  }
}

body.retro-mode {
  font-family: "Times New Roman", serif;
  background:
    /* Stars layer */
    radial-gradient(1px 1px at 15% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 20%, rgba(135, 206, 235, 0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 15%, rgba(255, 250, 180, 0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, rgba(200, 220, 255, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 12%, rgba(255, 200, 220, 0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 30%, rgba(180, 220, 255, 0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 50%, rgba(255, 255, 200, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(200, 255, 255, 0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 70%, rgba(255, 200, 150, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 55%, rgba(200, 200, 255, 0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 85%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 80%, rgba(180, 255, 200, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 65%, rgba(255, 180, 200, 0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 35%, rgba(220, 200, 255, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 90%, rgba(255, 255, 180, 0.85) 0%, transparent 100%),
    /* Scanlines */
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 4px),
    #030303;
  background-size: 
    180px 180px, 210px 210px, 240px 240px, 270px 270px, 300px 300px, 330px 330px,
    200px 200px, 250px 250px, 220px 220px, 260px 260px, 290px 290px, 310px 310px, 280px 280px, 240px 240px, 320px 320px,
    auto, auto;
  background-attachment: fixed;
  animation: retro-stars-twinkle 8s ease-in-out infinite;
  color: #00ff84;
}

body.retro-mode::before,
body.retro-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

body.retro-mode::before {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: soft-light;
  animation: crt-scan 6s linear infinite;
}

body.retro-mode::after {
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.38) 100%);
  animation: crt-flicker 0.18s steps(2, jump-none) infinite;
}

body.retro-mode[data-retro-variant='stars'],
body.retro-mode[data-retro-variant='max'] {
  background:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.95) 99%, transparent 100%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 247, 177, 0.95) 99%, transparent 100%),
    radial-gradient(1px 1px at 170px 150px, rgba(164, 223, 255, 0.95) 99%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 4px),
    #020202;
  background-size: 200px 200px, 260px 260px, 320px 320px, auto, auto;
  animation: starfield-pan 80s linear infinite;
}

body.retro-mode .bg-shape {
  display: none;
}

body.retro-mode .site-header,
body.retro-mode .site-footer {
  backdrop-filter: none;
  background: #0a0a0a;
  border-color: #888;
}

body.retro-mode .site-header {
  overflow: hidden;
}

body.retro-mode .brand,
body.retro-mode h1,
body.retro-mode h2,
body.retro-mode p,
body.retro-mode .bottle-caption {
  color: #00ff84;
}

body.retro-mode .site-nav a,
body.retro-mode .text-link {
  color: #66aaff;
  text-decoration: underline;
}

body.retro-mode[data-retro-variant='max'] .site-nav a,
body.retro-mode[data-retro-variant='max'] .text-link {
  animation: retro-link-flash 1.5s steps(2, jump-none) infinite;
}

body.retro-mode .card,
body.retro-mode .about,
body.retro-mode .bottle-card,
body.retro-mode .site-nav {
  border-radius: 0;
  box-shadow: none;
  border: 2px ridge #b8b8b8;
  background: #060606;
  animation: retro-wobble 5s ease-in-out infinite;
}

body.retro-mode .card::after,
body.retro-mode .bottle-card::after {
  content: none;
}

body.retro-mode .btn,
body.retro-mode .menu-toggle,
body.retro-mode .language-select,
body.retro-mode .fancy-toggle,
body.retro-mode .retro-toggle {
  font-family: "Courier New", monospace;
  border-radius: 0;
  border: 2px outset #c0c0c0;
  box-shadow: none;
  background: #c0c0c0;
  color: #000;
  animation: retro-button-pulse 1.6s steps(2, jump-none) infinite;
}

body.retro-mode .btn-primary,
body.retro-mode .btn-ghost {
  background: #c0c0c0;
  color: #000;
}

body.retro-mode .eyebrow {
  color: #ffff66;
  animation: blink-1990 1.2s steps(2, jump-none) infinite;
}

body.retro-mode .brand {
  animation: retro-brand-sway 2.4s ease-in-out infinite;
}

body.retro-mode .bottle-image {
  animation: retro-float 2.2s ease-in-out infinite;
}

body.retro-mode .retro-counter {
  animation: counter-hop 0.8s steps(2, jump-none) infinite;
}

.retro-stickers {
  display: none;
  width: min(1100px, 92vw);
  margin: 0 auto 1rem;
  padding: 0.4rem 0;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

body.retro-mode .retro-stickers {
  display: flex;
}

.retro-sticker {
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  line-height: 1;
  padding: 0.28rem 0.42rem;
  border: 2px outset #c0c0c0;
  background: linear-gradient(180deg, #efefef, #b7b7b7);
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 0 0 1px #777;
  cursor: pointer;
  user-select: none;
}

.retro-sticker:hover {
  transform: translateY(-1px);
}

.retro-sticker:focus-visible {
  outline: 2px dashed #00ff84;
  outline-offset: 2px;
}

.retro-sticker--netscape {
  background: linear-gradient(180deg, #8ab1ff, #4f6fd8);
  color: #fff;
  animation: sticker-spin 4.8s linear infinite;
  transform-origin: center;
}

.retro-sticker--html {
  background: linear-gradient(180deg, #ffc570, #ef8c3d);
  animation: sticker-bob 1.4s ease-in-out infinite;
}

.retro-sticker--under-construction {
  background: repeating-linear-gradient(45deg, #ffd84b 0, #ffd84b 7px, #111 7px, #111 14px);
  color: #fff;
  animation: sticker-alert 0.9s steps(2, jump-none) infinite;
}

.retro-sticker--web10 {
  background: linear-gradient(180deg, #7fffd6, #2abf92);
}

.retro-sticker--resolution {
  background: linear-gradient(180deg, #ffdff5, #ff9ad4);
}

.retro-sticker--js {
  background: linear-gradient(180deg, #f8f08f, #d2bc40);
}

.retro-sticker--fx {
  background: linear-gradient(180deg, #b8ffe8, #6ad3b2);
  font-weight: 700;
}

body.retro-mode[data-retro-variant='max'] .retro-sticker {
  animation: sticker-jitter 0.22s steps(2, jump-none) infinite;
}

body.retro-mode[data-retro-variant='max'] {
  animation: starfield-pan 30s linear infinite, max-hue-party 9s linear infinite;
}

body.retro-mode[data-retro-variant='max'] .site-header,
body.retro-mode[data-retro-variant='max'] .site-footer,
body.retro-mode[data-retro-variant='max'] .card,
body.retro-mode[data-retro-variant='max'] .about,
body.retro-mode[data-retro-variant='max'] .bottle-card {
  animation: retro-wobble 2.2s ease-in-out infinite, max-invert-pop 1.1s steps(2, jump-none) infinite;
}

body.retro-mode[data-retro-variant='max'] .brand {
  animation: retro-brand-sway 0.8s ease-in-out infinite, logo-hyper-spin 3.8s linear infinite;
}

body.retro-mode[data-retro-variant='rainbow'] h1,
body.retro-mode[data-retro-variant='rainbow'] h2,
body.retro-mode[data-retro-variant='max'] h1,
body.retro-mode[data-retro-variant='max'] h2 {
  background: linear-gradient(90deg, #ff2f6f, #ffcf40, #3dff75, #4dc7ff, #cc5bff, #ff2f6f);
  background-size: 220% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rainbow-shift 8s linear infinite;
  text-shadow: none;
}

body.retro-mode[data-retro-variant='max'] .site-header::after {
  content: 'WELCOME TO THE WORLD WIDE WHISKEY WEB';
  display: block;
  white-space: nowrap;
  margin-top: 0.35rem;
  font-family: "Courier New", monospace;
  color: #ff74d4;
  text-shadow: 1px 1px 0 #360052;
  animation: marquee-1990 14s linear infinite;
}

.retro-gif-wall {
  display: none;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 35;
}

body.retro-mode .retro-gif-wall {
  display: block;
}

.retro-gif {
  position: absolute;
  width: 58px;
  height: 58px;
  image-rendering: pixelated;
  filter: saturate(1.2) contrast(1.08);
}

.retro-gif--flame {
  top: 18%;
  left: 4%;
  animation: gif-bounce-a 2.1s ease-in-out infinite;
}

.retro-gif--banana {
  bottom: 20%;
  right: 7%;
  animation: gif-bounce-b 2.8s ease-in-out infinite;
}

.retro-gif--sparkle {
  top: 10%;
  right: 24%;
  animation: gif-spin 6.8s linear infinite;
}

.retro-gif--construction {
  bottom: 12%;
  left: 18%;
  width: 74px;
  animation: gif-shake 0.45s steps(2, jump-none) infinite;
}

.retro-gif--new {
  top: 45%;
  left: 50%;
  margin-left: -29px;
  animation: gif-pulse 0.95s steps(2, jump-none) infinite;
}

.retro-gif--cat {
  bottom: auto;
  right: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  font-size: 8rem;
  opacity: 0.7;
  z-index: 35;
  animation: cat-float 12s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

body.retro-mode[data-retro-variant='max'] .retro-gif--cat {
  font-size: 10rem;
  animation-duration: 6s;
}

.retro-gif--drift {
  top: var(--gif-y, 50%);
  left: var(--gif-x, 50%);
  animation: gif-drift var(--gif-dur, 6s) ease-in-out var(--gif-delay, 0s) infinite;
}

body.retro-mode[data-retro-variant='max'] .retro-gif {
  animation-duration: 0.9s;
}

.retro-marquee-rain {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 72px;
  z-index: 34;
  pointer-events: none;
}

body.retro-mode .retro-marquee-rain {
  display: block;
}

.retro-marquee-line {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  padding: 0.18rem 0;
  color: #ffe36e;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px dashed #00ff84;
  border-bottom: 1px dashed #00ff84;
  text-shadow: 1px 1px 0 #54004b;
}

body.retro-mode[data-retro-variant='max'] .retro-marquee-line {
  animation: marquee-color-noise 0.65s steps(2, jump-none) infinite;
}

.retro-counter {
  display: none;
  position: fixed;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 40;
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.5rem;
  border: 2px outset #c0c0c0;
  color: #000;
  background: #c0c0c0;
  box-shadow: 0 0 0 1px #7e7e7e;
}

body.retro-mode .retro-counter {
  display: block;
}

body.retro-mode[data-retro-variant='max'] .retro-counter {
  color: #160000;
  background: linear-gradient(180deg, #fff48b, #ffd54a);
  border-color: #ffe37f;
  animation: blink-1990 0.9s steps(2, jump-none) infinite;
}

.retro-midi {
  display: none;
  position: fixed;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 40;
  font-family: "Courier New", monospace;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000;
  padding: 0.32rem 0.45rem;
  box-shadow: 0 0 0 1px #7e7e7e;
}

body.retro-mode .retro-midi {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.retro-midi-label {
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.03em;
  animation: midi-blink 0.8s steps(2, jump-none) infinite;
}

.retro-midi-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  width: 44px;
  height: 12px;
}

.retro-midi-bar {
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #31f36a, #158e35);
  transform-origin: bottom;
  animation: midi-eq 0.55s steps(2, jump-none) infinite;
  animation-delay: calc(var(--bar-index) * 0.06s);
}

body.retro-mode[data-retro-variant='max'] .retro-midi {
  animation: midi-jitter 0.2s steps(2, jump-none) infinite;
}

body.retro-mode[data-retro-variant='max'] .retro-midi-bar {
  animation-duration: 0.3s;
}

@keyframes blink-1990 {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.25;
  }
}

@keyframes crt-scan {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(4px);
  }
}

@keyframes crt-flicker {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.09;
  }
}

@keyframes retro-link-flash {
  0%,
  49% {
    color: #66aaff;
  }

  50%,
  100% {
    color: #ff8ff0;
  }
}

@keyframes sticker-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes sticker-alert {
  0%,
  49% {
    filter: saturate(1);
  }

  50%,
  100% {
    filter: saturate(1.7);
  }
}

@keyframes sticker-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes sticker-jitter {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(1px, -1px);
  }

  100% {
    transform: translate(-1px, 1px);
  }
}

@keyframes retro-wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(0.35deg);
  }

  75% {
    transform: rotate(-0.35deg);
  }
}

@keyframes retro-button-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.22);
  }
}

@keyframes retro-brand-sway {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(2px);
  }

  75% {
    transform: translateX(-2px);
  }
}

@keyframes retro-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes counter-hop {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes max-hue-party {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes max-invert-pop {
  0%,
  100% {
    filter: invert(0);
  }

  50% {
    filter: invert(0.08);
  }
}

@keyframes logo-hyper-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes gif-bounce-a {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(-6deg);
  }
}

@keyframes gif-bounce-b {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  50% {
    transform: translateX(-14px) rotate(7deg);
  }
}

@keyframes cat-float {
  0% {
    transform: translate(-50%, -50%) translateX(-120px) translateY(-80px);
    opacity: 0.5;
  }

  25% {
    transform: translate(-50%, -50%) translateX(100px) translateY(-120px);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) translateX(80px) translateY(100px);
    opacity: 0.6;
  }

  75% {
    transform: translate(-50%, -50%) translateX(-110px) translateY(90px);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) translateX(-120px) translateY(-80px);
    opacity: 0.5;
  }
}

@keyframes gif-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes gif-shake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(1px, -1px);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(1px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes gif-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: saturate(1.2) contrast(1.08);
  }

  50% {
    transform: scale(1.15);
    filter: saturate(1.9) contrast(1.3);
  }
}

@keyframes gif-drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(8px, -10px) rotate(6deg);
  }

  50% {
    transform: translate(-5px, -14px) rotate(-4deg);
  }

  75% {
    transform: translate(-10px, 4px) rotate(3deg);
  }
}

@keyframes midi-eq {
  0%,
  100% {
    transform: scaleY(0.2);
  }

  50% {
    transform: scaleY(1);
  }
}

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

  50% {
    opacity: 0.45;
  }
}

@keyframes midi-jitter {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(1px, -1px);
  }

  100% {
    transform: translate(-1px, 1px);
  }
}

@keyframes marquee-color-noise {
  0%,
  100% {
    color: #ffe36e;
    filter: hue-rotate(0deg);
  }

  50% {
    color: #7ff6ff;
    filter: hue-rotate(65deg);
  }
}

@keyframes starfield-pan {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 260px 520px, -220px 380px, 320px 640px, 0 0, 0 0;
  }
}

@keyframes retro-stars-twinkle {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
  }

  25% {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 200, 255, 0.8));
  }

  50% {
    filter: brightness(0.8) drop-shadow(0 0 4px rgba(135, 206, 235, 0.5));
  }

  75% {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 100, 0.7));
  }
}

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

  100% {
    background-position: 220% 50%;
  }
}

@keyframes marquee-1990 {
  0% {
    transform: translateX(102%);
  }

  100% {
    transform: translateX(-102%);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 850px) {
  .container {
    width: min(1100px, 94vw);
  }

  .site-header {
    padding: 0.8rem 0;
  }

  .nav-wrap {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .brand {
    order: 1;
  }

  .menu-toggle {
    order: 2;
    margin-left: auto;
  }

  .lang-switch {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .fancy-toggle {
    order: 4;
    width: 100%;
    justify-content: center;
  }

  .retro-toggle {
    order: 5;
    width: 100%;
    justify-content: center;
  }

  .features {
    grid-template-columns: 1fr;
    padding: 1.1rem 0 2rem;
  }

  .site-nav {
    display: none;
    position: static;
    width: 100%;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: var(--shadow);
    order: 6;
    gap: 0.5rem;
  }

  .site-nav.open {
    display: flex;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .hero {
    padding: 3.1rem 0 2rem;
  }

  h1 {
    max-width: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn,
  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  .card,
  .bottle-card,
  .about {
    border-radius: 18px;
  }

  .bottle-showcase {
    padding-bottom: 1.2rem;
  }

  .bottle-image {
    aspect-ratio: 3 / 4;
  }

  .language-select {
    max-width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
  }

  .bottle-card {
    padding: 0.6rem;
  }

  .bottle-caption {
    font-size: 0.9rem;
  }
}

  .footer-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 2.4rem;
  }

  .site-nav {
    padding: 0.65rem;
  }

  .card,
  .about,
  .bottle-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  h1 {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  .intro {
    font-size: 1rem;
  }

  .bottle-caption {
    font-size: 0.9rem;
  }
}