/* ============================================================
   LUSITANO — styles.css
   Dark luxury · cinematic · animated
   ------------------------------------------------------------
   EDIT COLORS HERE: change the tokens in :root below and the
   whole site updates. Scent aura colors live further down under
   "SCENT MOODS".
============================================================ */

:root {
  /* Core palette */
  --black:    #0a0806;   /* warm void black — page base */
  --charcoal: #14110d;   /* panels */
  --smoke:    #1d1813;   /* raised panels */
  --ivory:    #f2ebdd;   /* primary text */
  --ivory-60: rgba(242, 235, 221, 0.6);
  --ivory-40: rgba(242, 235, 221, 0.4);
  --gold:     #c9a35c;   /* primary accent */
  --champagne:#e8d5a8;   /* light accent */
  --gold-soft: rgba(201, 163, 92, 0.16);
  --line:     rgba(242, 235, 221, 0.10);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Outfit", "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* No blue flash when tapping anything on Android/iOS */
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
  /* Blocks the long-press menu / Google Lens product chip on images */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 0.8rem 0 1.2rem;
}

h2 em, .story-line em {
  font-style: italic;
  color: var(--champagne);
}

.lede {
  color: var(--ivory-60);
  max-width: 38rem;
  margin-inline: auto;
  font-size: 1.02rem;
}

.section { padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 5vw, 4rem); position: relative; }
.section-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), box-shadow 0.45s var(--ease),
              transform 0.3s var(--ease);
  will-change: transform;
  cursor: pointer;
}

.btn-gold {
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  color: var(--black);
  box-shadow: 0 0 0 rgba(201, 163, 92, 0);
}
.btn-gold:hover {
  box-shadow: 0 8px 40px rgba(201, 163, 92, 0.35);
}

.btn-ghost {
  border-color: rgba(242, 235, 221, 0.3);
  color: var(--ivory);
  background: rgba(242, 235, 221, 0.04);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--champagne);
  box-shadow: 0 0 30px rgba(201, 163, 92, 0.15);
}

.btn-line {
  border-color: var(--line);
  color: var(--ivory-60);
  padding: 0.8rem 1.7rem;
  font-size: 0.7rem;
}
.btn-line:hover {
  border-color: var(--gold);
  color: var(--champagne);
}

/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
              border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(10, 8, 6, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  padding-block: 0.75rem;
}

.nav-brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}

.nav-links a {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-60);
  transition: color 0.35s var(--ease);
}
.nav-links a:hover { color: var(--champagne); }

.nav-cta {
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  color: var(--champagne) !important;
  transition: background 0.35s var(--ease), color 0.35s var(--ease) !important;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--black) !important;
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  z-index: 110;
}
.nav-toggle span {
  width: 26px; height: 1.5px;
  background: var(--ivory);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.nav-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle.open span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem 1.25rem 4rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(201, 163, 92, 0.08), transparent 60%),
    var(--black);
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Drifting mist layers — big blurred gradients moving on transform only */
.mist {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}
.mist-a {
  width: 60vw; height: 60vw;
  max-width: 760px; max-height: 760px;
  left: -12%; top: 8%;
  background: radial-gradient(circle, rgba(201,163,92,0.14), transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.mist-b {
  width: 52vw; height: 52vw;
  max-width: 680px; max-height: 680px;
  right: -14%; bottom: -8%;
  background: radial-gradient(circle, rgba(232,213,168,0.10), transparent 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.mist-c {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  left: 32%; bottom: 14%;
  background: radial-gradient(circle, rgba(242,235,221,0.06), transparent 60%);
  animation: drift-c 22s ease-in-out infinite alternate;
}

@keyframes drift-a { from { transform: translate(0, 0) scale(1); }   to { transform: translate(9vw, -5vh) scale(1.15); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-7vw, -7vh) scale(0.95); } }
@keyframes drift-c { from { transform: translate(0, 0) scale(0.9); } to { transform: translate(5vw, 6vh) scale(1.12); } }

.hero-inner { position: relative; z-index: 2; max-width: 60rem; }

.hero-logo {
  margin: 1.4rem 0 1.6rem;
  display: flex;
  justify-content: center;
  /* Cinematic logo entrance — scale + lift + blur in */
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  filter: blur(8px);
  animation: logo-in 1.6s var(--ease) 0.2s forwards;
}

.hero-logo img {
  width: clamp(280px, 42vw, 540px);
  height: auto;
  /* Mint glow to match the brand mark, sitting it in soft light */
  filter: drop-shadow(0 0 50px rgba(70, 230, 175, 0.22))
          drop-shadow(0 0 110px rgba(70, 230, 175, 0.10));
  /* Decorative — not clickable/long-pressable, so no Lens chip */
  pointer-events: none;
}

@keyframes logo-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

.hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--champagne);
}

.hero-sub {
  color: var(--ivory-60);
  max-width: 34rem;
  margin: 1.1rem auto 2.4rem;
  font-size: 0.98rem;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 56px;
  background: var(--line);
  overflow: hidden;
}
.scroll-hint span {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gold), transparent);
  animation: hint 2.4s var(--ease) infinite;
}
@keyframes hint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ============================================================
   SCROLL REVEALS
   .reveal elements fade/rise in when they enter the viewport.
   d2/d3/d4 add a stagger delay.
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.36s; }

/* ============================================================
   SCENT LIBRARY
============================================================ */
.scents {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201,163,92,0.05), transparent 70%),
    var(--black);
}

.library-group { max-width: 78rem; margin: 0 auto 4.5rem; }
.library-group:last-child { margin-bottom: 0; }

.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
}
.group-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.group-meta {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-40);
  white-space: nowrap;
}

.scent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}

/* ---------- The scent card ---------- */
.scent-card {
  --rx: 0deg;            /* tilt set by JS */
  --ry: 0deg;
  position: relative;
  min-height: 240px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--smoke), var(--charcoal) 70%);
  overflow: hidden;
  padding: 1.6rem 1.4rem;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease),
              transform 0.25s ease-out;
  /* No blue flash on mobile tap */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* The aura — each scent's signature glow. Faintly present at rest,
   blooms fully on hover / tap / keyboard focus. */
.scent-card .aura {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 55%),
    radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 55%);
  opacity: 0.14;
  transform: scale(0.9);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
  pointer-events: none;
}

/* The fx layer holds each scent's animation (ripples, smoke, sparkle…).
   Softly visible at rest, full strength when the card is awakened.
   Animations only run while the card is on screen (.inview from JS). */
.scent-card .fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.9s var(--ease);
}
.scent-card .fx i {
  position: absolute;
  display: block;
  animation-play-state: paused;
}
.scent-card.inview .fx i { animation-play-state: running; }

/* Awakened state */
.scent-card:hover,
.scent-card.active,
.scent-card:focus-visible {
  border-color: color-mix(in srgb, var(--c1) 55%, transparent);
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--c1) 50%, transparent);
}
.scent-card:hover .aura,
.scent-card.active .aura,
.scent-card:focus-visible .aura {
  opacity: 1;
  transform: scale(1);
}
.scent-card:hover .fx,
.scent-card.active .fx,
.scent-card:focus-visible .fx { opacity: 1; }

.card-body { position: relative; z-index: 2; }

.scent-card h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.scent-card .notes {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.scent-card .desc {
  font-size: 0.86rem;
  color: var(--ivory-60);
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s var(--ease), opacity 0.7s var(--ease) 0.1s;
}
.scent-card:hover .desc,
.scent-card.active .desc,
.scent-card:focus-visible .desc {
  max-height: 7em;
  opacity: 1;
}

/* ============================================================
   SCENT PALETTES — every scent has its own two colors.
   EDIT COLORS HERE. --c1 = main glow, --c2 = highlight.
============================================================ */
[data-scent="cold-water"]    { --c1: #3d86b8; --c2: #bee9f5; }
[data-scent="black-diamond"] { --c1: #8e99a8; --c2: #dde4ee; }
[data-scent="egyptian-musk"] { --c1: #b06a2e; --c2: #d98e4a; }
[data-scent="memories"]      { --c1: #c4a6a0; --c2: #ebd8d3; }
[data-scent="baby-powder"]   { --c1: #dce6ec; --c2: #f7f4ee; }
[data-scent="pineapple"]     { --c1: #e3b23c; --c2: #f2d06b; }
[data-scent="bubble-gum"]    { --c1: #dd93ab; --c2: #f2c4d0; }
[data-scent="horizon"]       { --c1: #b7c9d6; --c2: #e8d5a8; }
[data-scent="lavender"]      { --c1: #9a86c8; --c2: #c9bce8; }
[data-scent="new-car"]       { --c1: #8a6a4c; --c2: #9fb0be; }
[data-scent="vanilla"]       { --c1: #d8b988; --c2: #f4e6cb; }
[data-scent="cantaloupe"]    { --c1: #e58e6d; --c2: #b9cc95; }
[data-scent="sandalwood"]    { --c1: #c9a35c; --c2: #8a5a2b; }
[data-scent="sea-breeze"]    { --c1: #3fa796; --c2: #a9e2d2; }
[data-scent="mango"]         { --c1: #e8853d; --c2: #f5b26b; }
[data-scent="ocean"]         { --c1: #2e6f95; --c2: #7fb6d9; }
[data-scent="crystal"]       { --c1: #9fd8dc; --c2: #e4fbfc; }

/* ============================================================
   SCENT ANIMATIONS — one motif per scent family, colored by
   each scent's own palette. All transform/opacity only.
============================================================ */

/* Ripple — Cold Water: expanding water rings */
[data-anim="ripple"] .fx i {
  left: 50%; top: 55%;
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;
  border: 1px solid color-mix(in srgb, var(--c2) 80%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: fx-ripple 4.8s linear infinite;
}
[data-anim="ripple"] .fx i:nth-child(2) { animation-delay: 1.6s; }
[data-anim="ripple"] .fx i:nth-child(3) { animation-delay: 3.2s; }
@keyframes fx-ripple {
  0%   { transform: scale(0.15); opacity: 0.8; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* Waves — Ocean: slow rolling swells */
[data-anim="waves"] .fx i {
  left: -45%;
  width: 95%; height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c1) 55%, transparent);
  filter: blur(16px);
  animation: fx-wave 7s ease-in-out infinite;
}
[data-anim="waves"] .fx i:nth-child(1) { top: 56%; }
[data-anim="waves"] .fx i:nth-child(2) { top: 70%; animation-delay: 1.3s; background: color-mix(in srgb, var(--c2) 40%, transparent); }
[data-anim="waves"] .fx i:nth-child(3) { top: 84%; animation-delay: 2.6s; }
@keyframes fx-wave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(70%); }
}

/* Breeze — Sea Breeze: fresh air streaks sweeping through */
[data-anim="breeze"] .fx i {
  left: -55%;
  width: 45%; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c2) 85%, transparent), transparent);
  animation: fx-breeze 3.8s linear infinite;
}
[data-anim="breeze"] .fx i:nth-child(1) { top: 30%; }
[data-anim="breeze"] .fx i:nth-child(2) { top: 52%; animation-delay: 1.2s; }
[data-anim="breeze"] .fx i:nth-child(3) { top: 74%; animation-delay: 2.4s; }
@keyframes fx-breeze {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(380%); opacity: 0; }
}

/* Sparkle — Black Diamond & Crystal: glinting facets */
[data-anim="sparkle"] .fx i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c2);
  box-shadow: 0 0 12px var(--c2), 0 0 26px color-mix(in srgb, var(--c1) 60%, transparent);
  animation: fx-twinkle 2.8s ease-in-out infinite;
}
[data-anim="sparkle"] .fx i:nth-child(1) { left: 24%; top: 28%; }
[data-anim="sparkle"] .fx i:nth-child(2) { left: 68%; top: 20%; animation-delay: 0.9s; }
[data-anim="sparkle"] .fx i:nth-child(3) { left: 50%; top: 48%; animation-delay: 1.8s; }
@keyframes fx-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* Smoke — Egyptian Musk & Sandalwood: warm rising wisps */
[data-anim="smoke"] .fx i {
  bottom: -34%;
  width: 76px; height: 112px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c1) 55%, transparent);
  filter: blur(20px);
  animation: fx-rise 7.5s ease-in infinite;
}
[data-anim="smoke"] .fx i:nth-child(1) { left: 12%; }
[data-anim="smoke"] .fx i:nth-child(2) { left: 44%; animation-delay: 2.5s; background: color-mix(in srgb, var(--c2) 45%, transparent); }
[data-anim="smoke"] .fx i:nth-child(3) { left: 70%; animation-delay: 5s; }
@keyframes fx-rise {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  20%  { opacity: 0.65; }
  100% { transform: translateY(-240px) scale(1.35); opacity: 0; }
}

/* Powder — Memories & Baby Powder: soft specks settling */
[data-anim="powder"] .fx i {
  top: -12%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c2);
  filter: blur(2px);
  animation: fx-settle 9s linear infinite;
}
[data-anim="powder"] .fx i:nth-child(1) { left: 22%; }
[data-anim="powder"] .fx i:nth-child(2) { left: 54%; animation-delay: 3s; }
[data-anim="powder"] .fx i:nth-child(3) { left: 78%; animation-delay: 6s; width: 6px; height: 6px; }
@keyframes fx-settle {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.8; }
  100% { transform: translate(26px, 280px); opacity: 0; }
}

/* Orbs — Pineapple, Cantaloupe & Mango: juicy spheres drifting up */
[data-anim="orbs"] .fx i {
  bottom: -22%;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c2) 80%, transparent), color-mix(in srgb, var(--c1) 50%, transparent));
  filter: blur(7px);
  animation: fx-float 8s ease-in-out infinite;
}
[data-anim="orbs"] .fx i:nth-child(1) { left: 16%; }
[data-anim="orbs"] .fx i:nth-child(2) { left: 52%; animation-delay: 2.7s; width: 30px; height: 30px; }
[data-anim="orbs"] .fx i:nth-child(3) { left: 76%; animation-delay: 5.4s; width: 36px; height: 36px; }
@keyframes fx-float {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translateY(-260px); opacity: 0; }
}

/* Bubbles — Bubble Gum: playful bubbles wobbling upward */
[data-anim="bubbles"] .fx i {
  bottom: -14%;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c2) 85%, transparent);
  animation: fx-bubble 6s ease-in infinite;
}
[data-anim="bubbles"] .fx i:nth-child(1) { left: 22%; }
[data-anim="bubbles"] .fx i:nth-child(2) { left: 52%; animation-delay: 2s; width: 12px; height: 12px; }
[data-anim="bubbles"] .fx i:nth-child(3) { left: 74%; animation-delay: 4s; width: 22px; height: 22px; }
@keyframes fx-bubble {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.9; }
  50%  { transform: translate(12px, -120px); }
  100% { transform: translate(-8px, -250px); opacity: 0; }
}

/* Petals — Lavender: petals drifting down on the breeze */
[data-anim="petals"] .fx i {
  top: -14%;
  width: 10px; height: 14px;
  border-radius: 60% 40% 60% 40%;
  background: color-mix(in srgb, var(--c1) 85%, transparent);
  animation: fx-petal 8.5s ease-in-out infinite;
}
[data-anim="petals"] .fx i:nth-child(1) { left: 30%; }
[data-anim="petals"] .fx i:nth-child(2) { left: 60%; animation-delay: 2.8s; background: color-mix(in srgb, var(--c2) 85%, transparent); }
[data-anim="petals"] .fx i:nth-child(3) { left: 82%; animation-delay: 5.6s; width: 8px; height: 11px; }
@keyframes fx-petal {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.85; }
  100% { transform: translate(-64px, 290px) rotate(230deg); opacity: 0; }
}

/* Beam — Horizon: a slow pass of morning light */
[data-anim="beam"] .fx i:nth-child(1) {
  top: 0; bottom: 0; left: -80px;
  width: 64px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c2) 40%, transparent), transparent);
  transform: skewX(-16deg);
  animation: fx-beam 6s ease-in-out infinite;
}
[data-anim="beam"] .fx i:nth-child(2) {
  left: 0; right: 0; top: 62%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 70%, transparent), transparent);
  animation: fx-horizon-line 4s ease-in-out infinite;
}
[data-anim="beam"] .fx i:nth-child(3) { display: none; }
@keyframes fx-beam {
  0%        { transform: skewX(-16deg) translateX(0); }
  65%, 100% { transform: skewX(-16deg) translateX(520px); }
}
@keyframes fx-horizon-line {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.9; }
}

/* Sheen — New Car: light gliding across fresh leather */
[data-anim="sheen"] .fx i:nth-child(1) {
  top: 0; bottom: 0; left: -60px;
  width: 36px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c2) 45%, transparent), transparent);
  transform: skewX(-22deg);
  animation: fx-sheen 5.5s ease-in-out infinite;
}
[data-anim="sheen"] .fx i:nth-child(2) {
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 60%);
  animation: fx-leather-glow 6s ease-in-out infinite;
}
[data-anim="sheen"] .fx i:nth-child(3) { display: none; }
@keyframes fx-sheen {
  0%        { transform: skewX(-22deg) translateX(0); }
  55%, 100% { transform: skewX(-22deg) translateX(520px); }
}
@keyframes fx-leather-glow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Swirl — Vanilla: cream slowly folding into itself */
[data-anim="swirl"] .fx i:nth-child(1) {
  left: 50%; top: 52%;
  width: 170px; height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, color-mix(in srgb, var(--c1) 50%, transparent) 28%, transparent 60%);
  filter: blur(13px);
  animation: fx-spin 15s linear infinite;
}
[data-anim="swirl"] .fx i:nth-child(2) {
  left: 50%; top: 52%;
  width: 110px; height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0%, color-mix(in srgb, var(--c2) 45%, transparent) 25%, transparent 55%);
  filter: blur(10px);
  animation: fx-spin-reverse 11s linear infinite;
}
[data-anim="swirl"] .fx i:nth-child(3) { display: none; }
@keyframes fx-spin         { to { transform: rotate(360deg); } }
@keyframes fx-spin-reverse { to { transform: rotate(-360deg); } }

/* ============================================================
   COLLECTIONS
============================================================ */
.collections {
  background: linear-gradient(var(--black), var(--charcoal) 30%, var(--black));
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 72rem;
  margin: 0 auto;
}

.cat-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--smoke);
  overflow: hidden;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}
.cat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 163, 92, 0.4);
  box-shadow: 0 30px 60px -30px rgba(201, 163, 92, 0.3);
}

.cat-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Fallback panel if no image is present */
  background:
    radial-gradient(circle at 30% 20%, rgba(201,163,92,0.18), transparent 55%),
    linear-gradient(160deg, #221c14, #0f0c08);
}
.cat-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity 0.6s;
  pointer-events: none; /* decorative — no long-press / Lens chip */
}
.cat-card:hover .cat-visual img { transform: scale(1.06); }

.cat-body { padding: 1.7rem 1.6rem 2rem; }
.cat-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}
.cat-body p {
  color: var(--ivory-60);
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
}

/* ============================================================
   MAISON / STORY
============================================================ */
.story {
  text-align: center;
  overflow: hidden;
}
.story-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,163,92,0.10), transparent 60%);
  filter: blur(50px);
  animation: glow-breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes glow-breathe {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  to   { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.story-inner { position: relative; max-width: 46rem; margin: 0 auto; }

.story-line {
  font-size: clamp(2.4rem, 6vw, 4rem);
}

.story-copy {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.7;
  color: var(--ivory-60);
  margin: 1.6rem 0;
}

.story-sign {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   WHY LUSITANO
============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 72rem;
  margin: 0 auto;
}

.why-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.2rem 1.6rem;
  background: linear-gradient(170deg, var(--smoke), var(--charcoal));
  text-align: center;
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease),
              transform 0.6s var(--ease);
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 163, 92, 0.4);
  box-shadow: 0 0 50px -10px rgba(201, 163, 92, 0.18) inset,
              0 24px 50px -28px rgba(201, 163, 92, 0.3);
}

.why-icon {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(201, 163, 92, 0.4);
  border-radius: 50%;
  color: var(--champagne);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  transition: box-shadow 0.6s var(--ease), background 0.6s var(--ease);
}
.why-card:hover .why-icon {
  background: var(--gold-soft);
  box-shadow: 0 0 28px rgba(201, 163, 92, 0.35);
}

.why-card h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.why-card p { color: var(--ivory-60); font-size: 0.88rem; }

/* ============================================================
   WHERE TO BUY / WHOLESALE
============================================================ */
.buy { overflow: hidden; }

.buy-mist {
  position: absolute;
  right: -10%; top: -20%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(201,163,92,0.10), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}

.buy-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.4rem;
  max-width: 64rem;
  margin: 0 auto;
}

.buy-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.6rem 2.2rem;
  background: rgba(29, 24, 19, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.buy-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0.7rem 0 0.7rem;
}
.buy-card p { color: var(--ivory-60); font-size: 0.94rem; }

.buy-feature {
  border-color: rgba(201, 163, 92, 0.3);
  background:
    radial-gradient(circle at 85% 10%, rgba(201,163,92,0.12), transparent 55%),
    rgba(29, 24, 19, 0.7);
}
.buy-feature .btn { margin-top: 1.6rem; }

/* ============================================================
   FOOTER
============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}
.footer-brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.footer-tag {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ivory-40);
  margin: 0.5rem 0 1.6rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}
.footer-links a {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-60);
  transition: color 0.35s;
}
.footer-links a:hover { color: var(--champagne); }
.footer-fine { font-size: 0.74rem; color: var(--ivory-40); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: 1fr; max-width: 30rem; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .buy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Mobile nav: slide-down glass panel */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(10, 8, 6, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 0.95rem; }

  /* Scent cards become a luxe swipe row */
  .scent-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.9rem;
    padding-bottom: 1rem;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scent-grid::-webkit-scrollbar { display: none; }
  .scent-card {
    flex: 0 0 76%;
    max-width: 300px;
    scroll-snap-align: center;
    min-height: 260px;
  }
  /* Descriptions always visible on mobile (no hover) until tapped state styles kick in */
  .scent-card .desc { max-height: 7em; opacity: 1; }

  .group-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }

  .why-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }

  .hero-cta .btn { width: 100%; max-width: 320px; text-align: center; }
}

/* ============================================================
   REDUCED MOTION — respect users who prefer less animation
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-logo { opacity: 1; transform: none; filter: none; animation: none; }
  .scent-card { transform: none !important; }
  #particles { display: none; }
}