/* ==========================================================================
   LAAN JEWELRY — Core stylesheet
   Design POV: warm luxury editorial. Beige · espresso brown · antique gold,
   with emerald green as a sparing accent.
   ========================================================================== */

/* ---------- Custom display font (self-hosted) ---------------------------- */
@font-face {
  font-family: "Tenada";
  src: url("../fonts/Tenada.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- Design tokens ------------------------------------------------- */
/* Warm brown-&-beige luxury theme (2026-07-16 refresh). Primary palette:
   soft beige surfaces · espresso-brown text · antique gold metallic detail,
   with EMERALD GREEN used only as a sparing accent (card hairlines, hovers,
   small marks). Token NAMES are kept so every existing class keeps working —
   only the VALUES change: "surface" tokens (ivory/cream/sand) are warm light
   beiges; "text" tokens (ink/cocoa/mocha) are warm browns; --rose is aliased
   to the emerald accent; dark bands (espresso) become deep espresso-brown.
   NOTE: the homepage hero (.hero-still + its shader) is intentionally left on
   its own dark palette and is NOT driven by these tokens. */
:root {
  /* Surface / text scale (warm, light) */
  --ink:        #33261a;   /* primary text (espresso brown)  */
  --espresso:   #271a10;   /* darkest surfaces / dark bands  */
  --cocoa:      #5b4531;   /* nav links / secondary text     */
  --mocha:      #6d5741;   /* secondary text (AA on beige)   */
  --taupe:      #86705a;   /* muted small labels (AA)        */
  --taupe-lite: #9a8368;   /* muted text                     */
  --ivory:      #f5ecdf;   /* base canvas (warm beige)       */
  --cream:      #fdf8f0;   /* lighter surface / cards        */
  --sand:       #ece0cd;   /* cards / secondary surface      */
  --sand-deep:  #ddccb2;

  /* Accents */
  --gold:       #b8873f;   /* antique gold — decorative      */
  --gold-soft:  #cda45f;   /* lighter gold (on dark bands)   */
  --gold-deep:  #7a5a22;   /* gold for text (AA on beige)    */
  --rose:       #1c7a52;   /* emerald accent (aliased)       */
  --rose-soft:  #2f9d6c;
  --rose-deep:  #145c3c;
  --emerald:      #1c7a52; /* emerald accent / brand green   */
  --emerald-soft: #2f9d6c;
  --emerald-deep: #0f5738; /* logo circle green / dark btn   */
  --emerald-ink:  #0a3d28; /* deepest green                  */
  --on-dark:      #f6efe3; /* warm light text on dark bands  */

  /* Functional */
  --line:       rgba(60,40,22,.14);
  --line-strong:rgba(60,40,22,.24);
  --danger:     #c0503f;
  --success:    #2f9d6c;

  /* Elevation (soft, warm shadows for a light canvas) */
  --sh-sm: 0 1px 2px rgba(58,40,22,.06), 0 2px 6px rgba(58,40,22,.05);
  --sh-md: 0 6px 18px rgba(58,40,22,.10), 0 2px 6px rgba(58,40,22,.07);
  --sh-lg: 0 22px 55px rgba(58,40,22,.16), 0 8px 20px rgba(58,40,22,.10);

  /* Radii */
  --r-xs: 4px; --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px;

  /* Type */
  --f-display: "Tenada", "Playfair Display", "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-arabic:  "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --f-script:  "Great Vibes", "Snell Roundhand", "Brush Script MT", cursive;

  /* Fluid type scale (min → max via clamp) */
  --t-xs:  clamp(.72rem, .70rem + .1vw, .78rem);
  --t-sm:  clamp(.84rem, .82rem + .12vw, .92rem);
  --t-base:clamp(1rem, .97rem + .16vw, 1.08rem);
  --t-md:  clamp(1.12rem, 1.05rem + .4vw, 1.35rem);
  --t-lg:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-xl:  clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
  --t-2xl: clamp(2.8rem, 1.7rem + 5.4vw, 6rem);

  /* Spacing (marketing-spacious) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 180ms; --dur-2: 320ms; --dur-3: 560ms; --dur-4: 900ms;
  /* Scroll-reveal is deliberately quicker than the general durations: product
     imagery should land almost immediately once scrolled into view, not
     perform. Keep this short — it gates how fast the catalog reads. */
  --dur-reveal: 240ms;
  --dur-reveal-lg: 720ms;   /* graceful scroll-in settle for the reveal engine */

  --z-nav: 100; --z-drawer: 200; --z-modal: 400; --z-toast: 500;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Page base is the warm ivory canvas. Dark sections (hero, quote band, marquee)
   set their own espresso background, so they stay dark; every light section is
   readable instead of showing dark text on a dark page. */
html { background: var(--ivory); }
/* Clip horizontal overflow at the root so the off-canvas (position:fixed) mobile
   drawer can't create a phantom sideways scroll. `clip` (not `hidden`) keeps the
   sticky header working. */
html { overflow-x: clip; }
body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: clip;
}

/* ---------- Site-wide moving background ---------------------------------- */
.site-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.site-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--ivory) 74%, transparent), color-mix(in srgb, var(--ivory) 88%, transparent) 70%);
}
@media (prefers-reduced-motion: reduce) { .site-veil { background: var(--ivory); } }
/* Translucent light section so the motion shows through subtly */
.sec-tint { background: color-mix(in srgb, var(--cream) 55%, transparent); }

img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: var(--r-xs); }

/* ---------- Typography ---------------------------------------------------- */
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: var(--t-2xl); font-weight: 800; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p  { max-width: 68ch; }

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.script { font-style: italic; }
.muted { color: var(--mocha); }

/* ---------- RTL & language fonts ----------------------------------------- */
html[dir="rtl"] body { font-family: var(--f-arabic); letter-spacing: 0; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
  font-family: var(--f-arabic); font-weight: 600; line-height: 1.25; letter-spacing: 0;
}
html[dir="rtl"] .eyebrow { letter-spacing: .12em; }
/* Numbers/prices stay tabular */
.price, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(56px, 10vw, 128px); }
.section-tight { padding-block: clamp(40px, 7vw, 80px); }
.stack > * + * { margin-top: var(--s-5); }
.center { text-align: center; }
/* A centered PARAGRAPH must also fill/centre its box. The global
   `p { max-width: 68ch }` readability cap otherwise leaves a short centred link
   (e.g. "Shop all new pieces") sitting left-of-centre on wide screens, because
   the paragraph box is only 68ch wide and left-aligned — only its text was
   centred inside it. */
p.center { max-width: none; margin-inline: auto; }
.lead { font-size: var(--t-md); color: var(--mocha); max-width: 60ch; }
.divider-gold { width: 56px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; }
.center .divider-gold { margin-inline: auto; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  --btn-bg: var(--emerald-deep); --btn-fg: #f1f7f3;
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 52px; padding: 0 var(--s-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; letter-spacing: .1em; }
.btn--gold { --btn-bg: var(--gold); --btn-fg: #2a1d12; }
.btn--gold:hover { --btn-bg: var(--gold-soft); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { --btn-bg: var(--sand); box-shadow: none; }
.btn--wa { --btn-bg: #1f7a4d; --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: #24905b; }
/* outlined "ghost on photo" button for the photographic hero */
.btn--hero {
  --btn-bg: transparent; --btn-fg: #fff;
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(2px); letter-spacing: .14em;
}
.btn--hero:hover { --btn-bg: rgba(255,255,255,.16); border-color: #fff; box-shadow: none; }
.btn--dark { --btn-bg: var(--emerald-deep); --btn-fg: #f1f7f3; }
.btn--dark:hover { --btn-bg: #145038; }
.btn--block { width: 100%; justify-content: center; }
.btn svg { width: 20px; height: 20px; }

.link-underline {
  position: relative; font-weight: 500; letter-spacing: .04em;
  color: var(--ink); padding-bottom: 2px;
}
.link-underline::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur-2) var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---------- Motion engine (scroll reveal) --------------------------------
   Elements start hidden + offset and settle into place as they scroll in. The
   JS staggers groups so items arrive one by one. Rich variants (zoom in / zoom
   out / rise / blur) let sections feel deliberately choreographed. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition:
    opacity var(--dur-reveal-lg) var(--ease-out),
    transform var(--dur-reveal-lg) var(--ease-out),
    filter var(--dur-reveal-lg) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]     { transform: none; }
[data-reveal="left"]     { transform: translateX(-32px); }
[data-reveal="right"]    { transform: translateX(32px); }
[data-reveal="scale"]    { transform: scale(.96); }
[data-reveal="zoom"]     { transform: scale(.80); }            /* grows in from small */
[data-reveal="zoom-out"] { transform: scale(1.14); }           /* eases down from large */
[data-reveal="rise"]     { transform: translateY(58px) scale(.97); }
[data-reveal="blur"]     { transform: translateY(22px); filter: blur(12px); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Image reveal: a soft Ken-Burns settle as the piece scrolls into view. */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img > img, .reveal-img > video { transform: scale(1.07); transition: transform var(--dur-4) var(--ease-out); }
.reveal-img.is-in > img, .reveal-img.is-in > video { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-in { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .reveal-img > img, .reveal-img > video { transform: none !important; }
  .btn, .btn:hover { transform: none; }
}

/* ---------- Toast --------------------------------------------------------- */
.toast-host { position: fixed; inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline: 0; display: grid; justify-items: center; gap: 8px; z-index: var(--z-toast); pointer-events: none; }
.toast { background: var(--espresso); color: var(--on-dark); padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--sh-lg); font-size: var(--t-sm); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-2), transform var(--dur-2); }
.toast.is-in { opacity: 1; transform: none; }

/* ---------- Utilities ----------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--espresso); color: var(--on-dark); padding: 10px 16px; border-radius: var(--r-sm); z-index: var(--z-modal); transition: top var(--dur-2); }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }