/* Direction: AVUNE — prestige fragrance meets modern nutrition. White paper, warm ivory, forest-black green, champagne bronze used sparingly. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #ffffff;
  --surface: #f8f4eb;
  --surface-2: #efe8da;
  --border: #e6dfd0;
  --border-strong: #b3b5b4;
  --ink: #12241d;
  --muted: #55605a;
  --accent: #123026;
  --accent-hover: #0f2920;
  --accent-ink: #ffffff;
  --accent-text: #123026;
  --accent-strong: #123026;
  --accent-soft: #eee8d9;
  --accent-border: #94a29d;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #123026;
  --chart-2: #0b556f;
  --chart-3: #603583;
  --chart-4: #842541;
  --chart-5: #624901;
  --chart-6: #207029;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --radius-btn: 0px;
  --radius-input: 0px;
  --radius-card: 0px;
  --x-forest: #123026;
  --x-forest-deep: #0a1b15;
  --x-glass-hi: #2f5c4c;
  --x-gold: #b8975a;
  --x-gold-hi: #e6d3a4;
  --x-gold-lo: #7a5f30;
  --x-ivory: #f6f1e6;
  --x-liquid: #d9b86f;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030705;
  --surface: #1c201e;
  --surface-2: #101312;
  --border: #262a28;
  --border-strong: #4f5150;
  --ink: #ffffff;
  --muted: #9a9c9b;
  --accent: #254137;
  --accent-hover: #465e55;
  --accent-ink: #ffffff;
  --accent-text: #7b8c86;
  --accent-strong: #6f827b;
  --accent-soft: #0a1410;
  --accent-border: #12211b;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #072211;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2a1806;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2b0c0a;
  --danger-strong: #cd5c5c;
  --chart-1: #567368;
  --chart-2: #1192bf;
  --chart-3: #7f71c8;
  --chart-4: #b85d8c;
  --chart-5: #bd6630;
  --chart-6: #89890b;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html.reduced-motion { scroll-behavior: auto; }
body { -webkit-font-smoothing: antialiased; }
/* Clip sideways overflow inside each page region (body's own overflow is taken by the viewport, so it cannot do this). */
body > main, body > footer, body > header, body > div { overflow-x: clip; max-width: 100%; }
.snap-row { overscroll-behavior-x: contain; }

/* navigation */
.site-nav { background: var(--canvas); border-bottom: 1px solid var(--border); }
.nav-link { position: relative; padding-block: .3rem; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--x-gold); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }

/* cart badge + drawer */
.cart-badge { display: inline-flex; min-width: 1.15rem; height: 1.15rem; padding-inline: .3rem; align-items: center; justify-content: center; font-size: .65rem; font-weight: 600; background: var(--accent); color: var(--accent-ink); }
.cart-badge[data-n="0"] { display: none; }
dialog.drawer.modal { margin: 0 0 0 auto; padding: 0; height: 100dvh; max-height: 100dvh; width: min(26rem, 100vw); max-width: 100vw; border-radius: 0; }
dialog.drawer.modal[open] { display: block; }

/* bands */
.band-dark { background: var(--x-forest-deep); color: var(--x-ivory); }
.on-dark-soft { color: color-mix(in srgb, var(--x-ivory) 74%, transparent); }
.on-dark-line { border-color: color-mix(in srgb, var(--x-ivory) 18%, transparent); }
.gold-text { color: var(--x-gold-lo); }
.band-dark .gold-text, .gold-text-lit { color: var(--x-gold-hi); }
.gold-rule { height: 1px; width: 48px; background: var(--x-gold); }

/* buttons */
.btn-gold { background: var(--x-gold-hi); color: var(--x-forest-deep); border: 1px solid var(--x-gold-hi); transition: background-color .5s ease, color .5s ease, border-color .5s ease; }
.btn-gold:hover { background: transparent; color: var(--x-gold-hi); }
.btn-ghost-dark { background: transparent; color: var(--x-ivory); border: 1px solid color-mix(in srgb, var(--x-ivory) 40%, transparent); transition: border-color .5s ease, color .5s ease; }
.btn-ghost-dark:hover { border-color: var(--x-gold-hi); color: var(--x-gold-hi); }
.cta { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 600; padding-inline: 1.5rem; min-height: 2.8rem; display: inline-flex; align-items: center; gap: .5rem; }

/* hero */
.hero-veil { background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 35%, transparent) 0%, color-mix(in srgb, var(--surface) 80%, transparent) 60%, var(--surface) 100%); }
.hero-glow { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--x-gold-hi) 70%, transparent) 0%, transparent 62%); }
.bottle-float { animation: float 10s ease-in-out infinite; filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--x-forest-deep) 28%, transparent)); }
.bottle-float-dark { filter: drop-shadow(0 24px 50px color-mix(in srgb, var(--x-gold) 22%, transparent)); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* entrances: rest visible, move from an offset */
.hero-in { animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
.rv.in { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.rv-img.in { animation: unveil 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(22px); } to { transform: translateY(0); } }
@keyframes unveil { from { clip-path: inset(8% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* parallax (values written by app.js) */
.par { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }
.par-plain { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

.zoom img { transition: filter 1.2s ease; }
.zoom:hover img { filter: brightness(1.04) saturate(1.05); }

/* ritual gallery */
.snap-row { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 1.5rem; -webkit-overflow-scrolling: touch; }
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: start; flex: 0 0 auto; }

.ph { font-style: italic; color: var(--muted); }

.line-input { background: transparent; border: 0; border-bottom: 1px solid var(--border-strong); padding: .7rem 0; width: 100%; font-size: 1rem; outline: none; transition: border-color .4s ease; }
.line-input:focus { border-bottom-color: var(--x-gold); }

#sticky-cta { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#sticky-cta.is-hidden { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .bottle-float, .hero-in, .rv.in, .rv-img.in { animation: none; }
  .par, .par-plain { transform: none; }
}
html.reduced-motion .bottle-float, html.reduced-motion .hero-in, html.reduced-motion .rv.in, html.reduced-motion .rv-img.in { animation: none; }
html.reduced-motion .par, html.reduced-motion .par-plain { transform: none; }