/* Cancedda Artisan Spirits — Design tokens (BRAND REALE, da brief v2)
   Navy #2D2F4D (Pantone 533) · Rame #9F7051 (Pantone 6034) · Release azzurro #4D94A3
   Type: Playfair Display (titoli) · EB Garamond (testi) · Montserrat (UI) */

:root {
  /* ── Surfaces — dark luxury WARM (navy base, not black) ─── */
  --c-bg: #2d2f4d;            /* brand navy — primary background */
  --c-bg-alt: #34365a;       /* lifted navy panel */
  --c-bg-deep: #20223a;      /* deepest navy — hero/footer */
  --c-bg-deep-2: #191b30;    /* near-black navy */
  --c-paper: #34365a;        /* card surface */
  /* RGB triplets for translucent gradients/vignettes */
  --c-bg-rgb: 45, 47, 77;
  --c-bg-deep-rgb: 32, 34, 58;
  --c-bg-deep-2-rgb: 25, 27, 48;
  /* hero spotlight intensity (raised on darker palettes) */
  --spot-a: 0.38;
  --spot-b: 0.14;
  --c-paper-light: #f4f1ea;  /* warm ivory — for light product panels */
  --c-line: rgba(244, 241, 234, 0.14);
  --c-line-strong: rgba(244, 241, 234, 0.30);
  --c-nav-bg: rgba(32, 34, 58, 0.82);   /* scrolled nav bar */

  /* ── Brand accents ──────────────────────────────────────── */
  --c-ink: #2d2f4d;          /* navy ink (for light surfaces) */
  --c-copper: #9f7051;       /* brand copper — primary accent */
  --c-copper-light: #c08e6a;
  --c-copper-deep: #7e5740;
  /* legacy aliases so existing components keep working */
  --c-gold: #9f7051;
  --c-gold-light: #c08e6a;
  --c-gold-deep: #7e5740;
  --c-blue: #4d94a3;         /* release N°1 azzurro */
  --c-blue-deep: #3a7080;
  --c-blue-light: #6fb3c1;

  /* ── Text ───────────────────────────────────────────────── */
  --c-text: #f4f1ea;         /* warm ivory on navy */
  --c-text-muted: rgba(244, 241, 234, 0.66);
  --c-text-faint: rgba(244, 241, 234, 0.42);
  --c-text-on-dark: #f4f1ea;
  --c-text-on-dark-muted: rgba(244, 241, 234, 0.66);
  --c-text-on-dark-faint: rgba(244, 241, 234, 0.42);
  --c-text-on-light: #2d2f4d;
  --c-text-on-light-muted: rgba(45, 47, 77, 0.7);

  /* ── Release colours (Memories N°1–5) ───────────────────── */
  --c-rel-1: #4d94a3;        /* N°1 azzurro — Morning Sea (active) */
  --c-rel-1-soft: #6fb3c1;
  --c-rel-2: #cdd4d8;        /* N°2 bianco — Alpine Wind */
  --c-rel-3: #b5532f;        /* N°3 rosso arancio — Christmas */
  --c-rel-4: #d8b44a;        /* N°4 giallo — Spring */
  --c-rel-5: #3c6b50;        /* N°5 verde — Mediterranean */

  /* ── Type ───────────────────────────────────────────────── */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'EB Garamond', Georgia, serif;
  --f-ui: 'Montserrat', system-ui, sans-serif;
  --f-accent: 'Playfair Display', Georgia, serif;

  /* ── Spacing scale (luxury breathes) ────────────────────── */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 2rem;
  --s-4: 3rem;
  --s-5: 5rem;
  --s-6: 7rem;

  /* ── Easings & durations ────────────────────────────────── */
  --e-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.9s;
  --t-med: 0.6s;
  --t-fast: 0.4s;
}

/* ════════════════════════════════════════════════════════════
   AMBIENCE PALETTES — override surfaces only; copper, ivory and
   release colours stay constant. Switch via html[data-palette].
   ════════════════════════════════════════════════════════════ */

/* NOTTE — quasi-nero con lean blu (direzione del brief originale).
   Il navy brand resta nel logo e negli accenti, non a tutta pagina. */
html[data-palette="notte"] {
  --c-bg: #0d0d15;
  --c-bg-alt: #15151f;
  --c-bg-deep: #08080e;
  --c-bg-deep-2: #050508;
  --c-paper: #15151f;
  --c-bg-rgb: 13, 13, 21;
  --c-bg-deep-rgb: 8, 8, 14;
  --c-bg-deep-2-rgb: 5, 5, 8;
  --c-line: rgba(244, 241, 234, 0.12);
  --c-line-strong: rgba(244, 241, 234, 0.26);
  --spot-a: 0.52;
  --spot-b: 0.19;
}

/* CARBONE — quasi-nero caldo (lean espresso), rame in primo piano. */
html[data-palette="carbone"] {
  --c-bg: #131110;
  --c-bg-alt: #1b1815;
  --c-bg-deep: #0d0b0a;
  --c-bg-deep-2: #080706;
  --c-paper: #1b1815;
  --c-bg-rgb: 19, 17, 16;
  --c-bg-deep-rgb: 13, 11, 10;
  --c-bg-deep-2-rgb: 8, 7, 6;
  --c-line: rgba(244, 241, 234, 0.12);
  --c-line-strong: rgba(244, 241, 234, 0.26);
  --spot-a: 0.52;
  --spot-b: 0.19;
}

/* NAVY FONDO — identità navy mantenuta, ma scurita e desaturata
   (niente lettura "elettrica"). */
html[data-palette="navy-fondo"] {
  --c-bg: #181a27;
  --c-bg-alt: #202233;
  --c-bg-deep: #10111c;
  --c-bg-deep-2: #0a0b13;
  --c-paper: #202233;
  --c-bg-rgb: 24, 26, 39;
  --c-bg-deep-rgb: 16, 17, 28;
  --c-bg-deep-2-rgb: 10, 11, 19;
  --spot-a: 0.48;
  --spot-b: 0.17;
}

/* ════════════════════════════════════════════════════════════
   VARIANT B — "LUCE": all-bright / airy, like the paper-cut
   illustration. Flips surfaces to warm ivory and text to navy
   ink. Applied via html[data-theme="luce"] (wins over palette).
   ════════════════════════════════════════════════════════════ */
html[data-theme="luce"] {
  --c-bg: #f4efe4;
  --c-bg-alt: #ffffff;
  --c-bg-deep: #ece6d8;
  --c-bg-deep-2: #e3dccb;
  --c-paper: #ffffff;
  --c-bg-rgb: 244, 239, 228;
  --c-bg-deep-rgb: 236, 230, 216;
  --c-bg-deep-2-rgb: 227, 220, 203;

  --c-text: #2d2f4d;
  --c-text-muted: rgba(45, 47, 77, 0.68);
  --c-text-faint: rgba(45, 47, 77, 0.42);
  --c-line: rgba(45, 47, 77, 0.14);
  --c-line-strong: rgba(45, 47, 77, 0.30);

  /* copper reads richer on ivory */
  --c-copper-light: #9f7051;
  --c-gold: #8a5f44;
  --c-gold-light: #9f7051;

  /* sun-bright hero spotlight, gentle */
  --spot-a: 0.30;
  --spot-b: 0.10;
  --c-nav-bg: rgba(255, 253, 248, 0.86);
}

/* Light variant: clear-glass bottle needs a soft podium + shadow to read on ivory */
html[data-theme="luce"] .hc-bottle-wrap::after,
html[data-theme="luce"] .pdp-hero .reveal:has(.pdp-bottle)::after {
  content: ''; position: absolute; left: 50%; bottom: 8%; width: 42%; height: 14%;
  transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(45,47,77,0.22), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
html[data-theme="luce"] .hc-bottle img,
html[data-theme="luce"] .pdp-bottle {
  filter: drop-shadow(0 26px 44px rgba(45,47,77,0.28)) drop-shadow(0 2px 3px rgba(45,47,77,0.22)) !important;
}
/* keep the living hero photo vivid (don't wash it on ivory) */
html[data-theme="luce"] .hc-video, html[data-theme="luce"] .hc-photo { opacity: .8; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { position: relative; overflow-x: hidden; }

/* Subtle grain for print-stock feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzMwMCcgaGVpZ2h0PSczMDAnIGZpbHRlcj0ndXJsKCNnKScgb3BhY2l0eT0nLjA1Jy8+PC9zdmc+");
  pointer-events: none;
  z-index: 8;
  mix-blend-mode: overlay;
  opacity: var(--grain-o, 0.55);
}

/* ── Type primitives ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-copper-light);
  line-height: 1;
}
.eyebrow-muted { color: var(--c-text-muted); }

.caption {
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  line-height: 1.5;
}

.h-display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}
/* Emphasis in display headings is COLOUR AND WEIGHT, never slant.
 *
 * Montecatini Pro ships eight faces — Largo, Normale, Stretto, Ampio, in several
 * weights — and not one of them is an italic. `font-style: italic` therefore made the
 * browser shear the upright glyphs, and iOS shears harder than desktop: on an iPhone
 * the letters of "LEGAL DRINKING AGE?" collided, the question mark landing on the E.
 * Desktop looked fine, which is why it read as a mobile bug and wasn't.
 *
 * A drawn Art-Déco face has no business being slanted by arithmetic. The copper
 * already separates the emphasised words; a lighter weight against the surrounding
 * 500 does the rest, using the real drawn letterforms.
 */
.h-display em, .h-display i {
  font-style: normal;
  font-weight: 300;
  color: var(--c-copper-light);
}

.h-section {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}
/* Same rule as .h-display above: colour and weight, never a synthesised slant. This is
 * the one the age gate uses — "Are you of legal drinking age?" */
.h-section em, .h-section i { font-style: normal; font-weight: 300; color: var(--c-copper-light); }

.h-product {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.05;
  margin: 0;
}

.body-l {
  font-family: var(--f-body);
  font-size: 1.12rem;
  line-height: 1.85;
  font-weight: 400;
  color: var(--c-text);
}
.body-l em { font-style: italic; color: var(--c-copper-light); }

.body-m {
  font-family: var(--f-body);
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--c-text-muted);
}

/* Display font again — no italic exists, so this asked for the same synthesised slant.
 * Body italics elsewhere in this file are left alone on purpose: Transat has no italic
 * either, but body copy runs small and upright-spaced, where a browser's shear is the
 * ordinary, unremarkable thing. It is large display type with tight tracking that
 * breaks. */
.lyric {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--c-text);
}

/* Inverted helpers for light panels */
.on-light { color: var(--c-text-on-light); }
.on-light .body-m { color: var(--c-text-on-light-muted); }
.on-light .h-section em, .on-light .h-display em { color: var(--c-copper); }
.on-light .eyebrow { color: var(--c-copper); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-copper);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--e-smooth), color var(--t-fast) var(--e-smooth), border-color var(--t-fast) var(--e-smooth);
}
.btn:hover { background: var(--c-copper); color: var(--c-bg-deep); border-color: var(--c-copper); }

.btn-primary { background: var(--c-copper); color: #fff; border-color: var(--c-copper); }
.btn-primary:hover { background: var(--c-copper-light); border-color: var(--c-copper-light); color: var(--c-bg-deep); }

.btn-release { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-release:hover { background: var(--c-blue-deep); border-color: var(--c-blue-deep); }

.btn-ghost { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--c-copper-light); }
.btn-ghost:hover { background: transparent; color: var(--c-copper); border-color: transparent; }

.text-link {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  transition: color var(--t-fast) var(--e-smooth), gap var(--t-fast) var(--e-smooth);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-copper);
}
.text-link:hover { color: var(--c-copper-light); border-bottom-color: var(--c-copper-light); gap: 1rem; }
.text-link .arrow { width: 26px; height: 1px; background: currentColor; position: relative; transition: width var(--t-fast) var(--e-smooth); }
.text-link .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.text-link:hover .arrow { width: 38px; }

/* ── Layout helpers ───────────────────────────────────────── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-5); }
@media (max-width: 768px) { .container { padding: 0 var(--s-3); } }

.section { position: relative; padding: var(--s-6) 0; }
@media (max-width: 768px) { .section { padding: var(--s-5) 0; } }

.section-deep { background: var(--c-bg-deep); }
.section-light { background: var(--c-paper-light); color: var(--c-text-on-light); }
.section-light .body-m { color: var(--c-text-on-light-muted); }

.divider { height: 1px; background: var(--c-line); border: none; margin: 0; }

/* Section eyebrow + rule */
.section-numeral { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2.5rem; }
.section-numeral .num { font-family: var(--f-ui); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.32em; color: var(--c-copper-light); }
.section-numeral .label { font-family: var(--f-ui); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-text-muted); }
.section-numeral .rule { flex: 1; height: 1px; background: var(--c-line); }

/* ── Reveal on scroll ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--e-smooth), transform 0.9s var(--e-smooth); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Marquee ──────────────────────────────────────────────── */
.marquee { overflow: hidden; padding: 1.1rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-bg-deep); color: var(--c-copper-light); }
.marquee.marquee-dark { background: var(--c-bg-deep-2); }
.marquee-track { display: flex; white-space: nowrap; animation: marquee 38s linear infinite; font-family: var(--f-body); font-style: italic; letter-spacing: 0.14em; font-size: 1rem; width: max-content; }
.marquee-track span { padding: 0 1.8rem; flex-shrink: 0; }
.marquee-track span::after { content: '✦'; margin-left: 1.8rem; font-style: normal; color: var(--c-copper); opacity: 0.5; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Ghost type ───────────────────────────────────────────── */
.ghost { position: absolute; font-family: var(--f-display); color: rgba(244, 241, 234, 0.045); pointer-events: none; font-weight: 600; line-height: 0.85; user-select: none; }

/* ── Vertical text ────────────────────────────────────────── */
.vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-ui); font-weight: 300; font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-text-muted); }

/* ── Badge (technical product tags) ───────────────────────── */
.badge {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
  padding: 0.5rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--c-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-copper); }

::selection { background: var(--c-copper); color: #fff; }

/* ════════════════════════════════════════════════════════════
   HERO wow-effect (stable here so React re-renders never restart it)
   ════════════════════════════════════════════════════════════ */
.hero-wow { --mx: 0; --my: 0; --sy: 0; }

/* parallax layers driven by --mx/--my (mouse) and --sy (scroll) */
.hero-wow .hw-ghost {
  transform: translate(calc(var(--mx) * 34px), calc(var(--my) * 22px + var(--sy) * -0.07px));
  transition: transform 0.5s var(--e-smooth);
}
.hero-wow .hw-bottle {
  transform: translate(calc(var(--mx) * -22px), calc(var(--sy) * 0.12px)) scale(1.05);
  transition: transform 0.4s var(--e-smooth);
  will-change: transform;
}
.hero-wow .hw-tag {
  transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 11px));
  transition: transform 0.5s var(--e-smooth);
}
/* ── CINEMATIC ENTRANCE ─────────────────────────────────────
   base state is VISIBLE (robust); the full sequence plays only
   once .hw-play is added (after the age-gate is dismissed). */
.hero-wow .hw-rule { transform-origin: left; }

/* spotlight bloom behind the bottle */
.hero-wow .hw-spot {
  position: absolute; z-index: 4; top: 40%; left: 60%; width: 72%; height: 82%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,242,214,var(--spot-a, 0.38)), rgba(201,169,110,var(--spot-b, 0.14)) 44%, transparent 70%);
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
}
/* letterbox bars */
.hero-wow .hw-bar { position: absolute; left: 0; right: 0; z-index: 8; background: var(--c-bg-deep-2); pointer-events: none; height: 0; }
.hero-wow .hw-bar.top { top: 0; }
.hero-wow .hw-bar.bottom { bottom: 0; }
/* drifting copper dust motes */
.hero-wow .hw-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-wow .hw-motes span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.8), transparent 70%); opacity: 0; }
/* continuous float wrapper (separate from entrance + parallax) */
.hero-wow .hw-bottle-float { width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .hero-wow.hw-play .hw-bar { animation: hwBars 1.3s var(--e-smooth) both; }
  .hero-wow.hw-play .hw-curtain { animation: hwCurtain 1.1s var(--e-smooth) both; }
  .hero-wow.hw-play .hw-word { animation: hwWordUp 1.15s var(--e-smooth) backwards; animation-delay: var(--wd); }
  .hero-wow.hw-play .hw-fade { animation: hwFadeUp 1.1s var(--e-smooth) backwards; animation-delay: var(--wd, 0.2s); }
  .hero-wow.hw-play .hw-eyebrow { animation: hwFadeUp 1.1s var(--e-smooth) 0.45s backwards; }
  .hero-wow.hw-play .hw-rule { animation: hwRule 1s var(--e-smooth) 0.5s backwards; }
  .hero-wow.hw-play .hw-spot { animation: hwSpot 2.2s var(--e-smooth) 0.5s both, hwBreathe 7s ease-in-out 2.7s infinite; }
  .hero-wow.hw-play .hw-bottle img { animation: hwBottleIn 2.3s var(--e-smooth) 0.55s backwards; }
  .hero-wow.hw-play .hw-bottle-float { animation: hwFloat 7s ease-in-out 2.6s infinite; }
  .hero-wow.hw-play .hw-tag { animation: hwOpacity 1.1s var(--e-smooth) 1.3s backwards; }
  .hero-wow.hw-play .hw-sweep { animation: hwSweep 2s var(--e-smooth) 0.7s both; }
  .hero-wow.hw-play .hw-motes span { animation-name: hwMote; animation-timing-function: linear; animation-iteration-count: infinite; }
  .hero-wow .hw-scrollline { animation: hwScroll 2.6s ease-in-out infinite; }
}

@keyframes hwBars { 0% { height: 50%; } 100% { height: 0; } }
@keyframes hwCurtain { from { opacity: 1; } to { opacity: 0; } }
@keyframes hwWordUp { from { transform: translateY(120%); filter: blur(7px); } to { transform: translateY(0); filter: blur(0); } }
@keyframes hwFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hwRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hwSpot { from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hwBreathe { 0%,100% { opacity: 0.78; } 50% { opacity: 1; } }
@keyframes hwBottleIn { from { opacity: 0; transform: translateY(36px) scale(1.16); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes hwFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hwOpacity { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hwSweep { 0% { opacity: 0; transform: translateX(-35%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(35%); } }
@keyframes hwScroll { 0%,100% { transform: scaleX(0.4); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes hwMote { 0% { opacity: 0; transform: translateY(24px) scale(0.5); } 18% { opacity: 0.9; } 82% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } }

.hero-wow .hw-sweep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(201,169,110,0.16) 50%, transparent 64%);
}
.hero-wow .hw-curtain { position: absolute; inset: 0; z-index: 7; background: var(--c-bg-deep); pointer-events: none; opacity: 0; }
.hero-wow .hw-scrollline { transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .hero-wow .hw-word, .hero-wow .hw-fade, .hero-wow .hw-eyebrow, .hero-wow .hw-rule, .hero-wow .hw-bottle img, .hero-wow .hw-tag, .hero-wow .hw-spot { animation: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }
  .hero-wow .hw-spot { opacity: 0.8 !important; }
  .hero-wow .hw-sweep, .hero-wow .hw-scrollline, .hero-wow .hw-bar, .hero-wow .hw-curtain, .hero-wow .hw-motes span, .hero-wow .hw-bottle-float { animation: none !important; }
  .hero-wow .hw-bar, .hero-wow .hw-curtain { display: none !important; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-bottle { min-height: 60vh; order: -1; }
}