/* Leptis Magna — Motion layer
   Tokens, reveal primitives, topbar scroll state, micro-interactions.
   Additive only: never redefines element base styles. */

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-fine: cubic-bezier(0.33, 1, 0.5, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --d-xs: 180ms;
  --d-sm: 320ms;
  --d-md: 640ms;
  --d-lg: 900ms;
  --d-xl: 1200ms;

  --rise-sm: 10px;
  --rise-md: 18px;
  --rise-lg: 24px;

  --stagger: 90ms;
}

/* ---------- Reveal primitives ----------
   Element is marked with data-reveal="<variant>". The pre-state applies
   immediately; IntersectionObserver adds .is-in once the element is
   visible, which releases opacity/transform/filter to their natural values. */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--d-lg) var(--ease-out-soft) var(--delay, 0ms),
    transform var(--d-lg) var(--ease-out-soft) var(--delay, 0ms),
    filter var(--d-lg) var(--ease-out-soft) var(--delay, 0ms);
  will-change: opacity, transform, filter;
}

/* Fade only — for elements with an existing transform (e.g. hero .a2 annotation). */
[data-reveal="fade"] { /* opacity-only */ }

[data-reveal="up"]    { transform: translateY(var(--rise-md)); filter: blur(6px); }
[data-reveal="rise"]  { transform: translateY(var(--rise-sm)); filter: blur(4px); }
[data-reveal="right"] { transform: translateX(calc(var(--rise-md) * -1)); }
[data-reveal="left"]  { transform: translateX(var(--rise-md)); }
[data-reveal="pop"]   { transform: scale(0.86); }

/* Hero-specific: slower/longer timings for the most prominent element */
[data-reveal="hero-heading"] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  transition:
    opacity var(--d-xl) var(--ease-out-soft) var(--delay, 0ms),
    transform var(--d-xl) var(--ease-out-soft) var(--delay, 0ms),
    filter var(--d-xl) var(--ease-out-soft) var(--delay, 0ms);
}
[data-reveal="hero-bottle"] {
  opacity: 0;
  transition:
    opacity var(--d-xl) var(--ease-out-soft) var(--delay, 0ms);
}

/* The released state — same for every variant */
.is-in[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Faster tuning for small items (cards, list bullets) */
[data-reveal-fine] {
  transition-duration: var(--d-md);
  transition-timing-function: var(--ease-out-fine);
}

/* ---------- Topbar scroll-state ---------- */
.topbar {
  transition:
    background-color 220ms var(--ease-out-fine),
    backdrop-filter 220ms var(--ease-out-fine),
    border-color 220ms var(--ease-out-fine),
    box-shadow 220ms var(--ease-out-fine);
}
.topbar.is-stuck {
  background: oklch(0.965 0.018 88 / 0.94);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 1px 0 oklch(0.55 0.04 120 / 0.06), 0 10px 30px -20px oklch(0.3 0.05 120 / 0.18);
}

/* Scroll-spy — animated underline on nav links */
.topbar nav a {
  position: relative;
}
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right; /* RTL-native: grows from the reading start */
  transition: transform 360ms var(--ease-out-soft);
}
html[dir="ltr"] .topbar nav a::after { transform-origin: left; }
.topbar nav a.is-active {
  color: var(--olive-deep);
}
.topbar nav a.is-active::after {
  transform: scaleX(1);
}

/* Lang toggle micro */
.lang-toggle {
  transition: border-color 0.2s, color 0.2s, background 0.2s, letter-spacing 220ms var(--ease-out-fine);
}
.lang-toggle:hover {
  letter-spacing: 0.18em;
}

/* ---------- Hero micro ---------- */
.hero-stage {
  transform: translate3d(0, var(--scroll-y, 0px), 0);
  transition: transform 220ms linear; /* gentle catch-up on direction change */
}
.hero-bottle {
  transition: transform 420ms var(--ease-out-fine);
  will-change: transform;
}
.hero-annotation {
  /* parallax layer — soft counter-motion against bottle */
  transform: translate3d(0, var(--ann-y, 0px), 0);
  transition: transform 260ms linear;
}
.hero-annotation.a2 {
  /* preserve existing vertical centering — compose via custom property */
  transform: translate3d(0, calc(-50% + var(--ann-y, 0px)), 0);
}

/* ---------- Grades watermark parallax ----------
   sections.css owns .grades::before / ::after transforms; we compose via
   a --parallax variable that Animations.jsx writes to .grades as it scrolls. */
/* (no rules here — see sections.css edits) */

/* ---------- Benefits feature card gradient sweep ---------- */
.benefit-card.feature {
  background-image:
    linear-gradient(105deg,
      oklch(0.36 0.06 130) 0%,
      var(--olive-deep) 55%,
      oklch(0.30 0.05 128) 100%);
  background-size: 180% 100%;
  background-position: 80% 0;
  transition: background-position 900ms var(--ease-out-soft),
              transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.benefit-card.feature.is-in {
  background-position: 0 0;
}

/* b-art watermark — tiny drift inside card */
.benefit-card .b-art {
  transform: translate3d(0, var(--b-art-y, 0px), 0);
  transition: transform 220ms linear;
}

/* ---------- Tasting: step swap keyframes ----------
   .step-num, .step-title, .step-desc receive key={idx} in JSX, so each
   idx change triggers a remount and replays the animation cleanly. */
.step-num {
  animation: step-num-in 420ms var(--ease-out-fine) both;
}
.step-title {
  animation: step-text-in 360ms var(--ease-out-fine) both;
}
.step-desc {
  animation: step-text-in 360ms var(--ease-out-fine) 60ms both;
}
.cue-list li {
  animation: cue-in 480ms var(--ease-out-fine) both;
  animation-delay: calc(var(--i, 0) * 60ms + 140ms);
}

@keyframes step-num-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes step-text-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cue-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Tracker tick flushes to 100% before swap (CSS-only) */
.step-tracker .tick {
  transition: background 320ms var(--ease-out-fine);
}
.step-tracker .tick.active {
  transition: background 220ms var(--ease-out-fine);
}

/* ---------- Signs: list bullet stagger ---------- */
.signs-list.is-in li {
  animation: bullet-in 520ms var(--ease-out-fine) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes bullet-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.signs-list li {
  transition: background 220ms var(--ease-out-fine),
              transform 220ms var(--ease-out-fine);
}
.signs-list li:hover {
  transform: translateX(calc(2px * var(--dir, 1)));
}
.signs-list li:hover .mark { filter: brightness(1.06); }
.signs-card.bad .signs-list li:hover .mark { filter: brightness(1.04) hue-rotate(-4deg); }
.signs-list .mark { transition: filter 200ms var(--ease-out-fine); }

/* ---------- Footer ---------- */
.footer-mark {
  transition: transform 500ms var(--ease-out-fine);
}
.footer-brand:hover .footer-mark {
  transform: rotate(8deg);
}

/* ---------- Spec grid micro ---------- */
.spec-cell {
  transition: background 0.3s ease;
}

/* Grade row easing refinement (existing rule uses 0.25s ease; refine) */
.grade-row {
  transition: background 0.3s var(--ease-out-fine),
              transform 0.3s var(--ease-out-fine),
              border-color 0.3s var(--ease-out-fine);
}

/* Benefit card easing refinement */
.benefit-card {
  transition: transform 0.3s var(--ease-out-fine),
              box-shadow 0.3s var(--ease-out-fine),
              border-color 0.3s var(--ease-out-fine);
}

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

.btn {
  transition: transform 180ms var(--ease-out-fine), background 0.2s, color 0.2s;
}
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 120ms;
}

/* ---------- Reduced motion ----------
   Snap everything to final state. Only short opacity fades remain. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: opacity 200ms linear !important;
    transform: none !important;
    filter: none !important;
  }
  [data-reveal="hero-heading"],
  [data-reveal="hero-bottle"] {
    transition: opacity 200ms linear !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-stage,
  .hero-bottle,
  .hero-annotation,
  .hero-annotation.a2,
  .benefit-card .b-art {
    transform: none !important;
  }
  .hero-annotation.a2 {
    transform: translateY(-50%) !important;
  }
  .benefit-card.feature {
    transition: none !important;
    background-position: 0 0 !important;
  }
  .step-num, .step-title, .step-desc, .cue-list li, .signs-list.is-in li {
    animation: none !important;
  }
  .topbar nav a::after {
    transition: none !important;
  }
}