/* ── Kaanthika — Design tokens & base ─────────────── */
:root {
  /* Onyx (default — like reference) */
  --bg: #14100c;
  --bg-soft: #1d1812;
  --bg-card: #221c15;
  --cream: #f5ede1;
  --ivory: #ebe2d2;
  --gold: #d4a857;
  --gold-bright: #f0c878;
  --dim: rgba(245, 237, 225, 0.6);
  --dimmer: rgba(245, 237, 225, 0.4);
  --line: rgba(245, 237, 225, 0.12);
  --line-strong: rgba(245, 237, 225, 0.22);

  --font-serif: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Chrome that sits ON TOP of photography. These never flip with the palette —
     a photo stays dark underneath whatever the page theme is, so its text and
     controls must stay light or they vanish. */
  /* Frosted chrome surfaces (nav, sticky bars, panels). These DO follow the palette. */
  --glass: rgba(20, 16, 12, 0.55);
  --glass-strong: rgba(20, 16, 12, 0.85);
  --glass-solid: rgba(20, 16, 12, 0.95);
  --tint: rgba(255, 255, 255, 0.04);
  --tint-strong: rgba(255, 255, 255, 0.06);

  /* Card shadows. The dark palette can take heavy black; on the light one that
     reads as dirt, so it gets a soft warm shadow instead. */
  --shadow-card: 0 18px 40px -26px rgba(0, 0, 0, 0.75);
  --shadow-card-hover: 0 30px 60px -28px rgba(0, 0, 0, 0.9);

  --on-media: #f5ede1;
  --on-media-dim: rgba(245, 237, 225, 0.62);
  --on-media-line: rgba(245, 237, 225, 0.25);
  --on-media-scrim: rgba(20, 16, 12, 0.5);
  --on-media-scrim-strong: rgba(20, 16, 12, 0.85);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-palette="champagne"] {
  --bg: #f5ede1;
  --bg-soft: #ebe2d2;
  --bg-card: #e0d4be;
  --cream: #1a1410;
  --ivory: #2a221a;
  --gold: #a07c3a;
  --gold-bright: #c9a86a;
  --dim: rgba(26, 20, 16, 0.6);
  --dimmer: rgba(26, 20, 16, 0.4);
  --line: rgba(26, 20, 16, 0.12);
  --line-strong: rgba(26, 20, 16, 0.22);
  --glass: rgba(245, 237, 225, 0.72);
  --glass-strong: rgba(245, 237, 225, 0.92);
  --glass-solid: rgba(245, 237, 225, 0.97);
  --shadow-card: 0 10px 30px -14px rgba(74, 56, 36, 0.28);
  --shadow-card-hover: 0 26px 50px -18px rgba(74, 56, 36, 0.34);
  --tint: rgba(26, 20, 16, 0.05);
  --tint-strong: rgba(26, 20, 16, 0.08);
}

[data-palette="noir"] {
  --bg: #050505;
  --bg-soft: #0d0d0d;
  --bg-card: #161616;
  --cream: #f8f5ee;
  --ivory: #e8e2d2;
  --gold: #e6c178;
  --gold-bright: #ffd98c;
  --dim: rgba(248, 245, 238, 0.55);
  --dimmer: rgba(248, 245, 238, 0.35);
  --line: rgba(248, 245, 238, 0.1);
  --line-strong: rgba(248, 245, 238, 0.2);
}

* { box-sizing: border-box; }
/* The page scrollbar sat immediately right of the full-bleed hero and read as a
   pale gap against the artwork. Taking it out of the layout lets the hero's
   width:100% reach the real viewport edge, with no 100vw overflow hacks. */
html { scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

[data-font="playfair"] { --font-serif: 'Playfair Display', serif; }
[data-font="cormorant"] { --font-serif: 'Cormorant Garamond', serif; }
[data-font="dmserif"] { --font-serif: 'DM Serif Display', serif; }
[data-font="fraunces"] { --font-serif: 'Fraunces', serif; }

.font-serif { font-family: var(--font-serif); }
.font-body  { font-family: var(--font-body); }

/* Display serif — elegant tracking */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.display em, .italic-serif {
  font-style: italic;
  font-family: var(--font-serif);
}

/* Eyebrow — uppercase tracked */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dim);
}

/* ── Scrollbars ─────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ── Buttons ─────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  border-radius: 999px;
  transition: all 0.4s var(--ease-out);
  cursor: pointer; border: none;
  position: relative; overflow: hidden;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--cream); color: var(--bg);
}
.btn-primary:hover { background: var(--gold); color: var(--bg); transform: translateY(-1px); }
.btn-gold {
  background: var(--gold); color: var(--bg);
}
.btn-gold:hover { background: var(--gold-bright); }
.btn-ghost {
  background: transparent; color: var(--cream); border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-dark {
  background: var(--bg); color: var(--cream);
}
.btn-dark:hover { background: var(--bg-soft); }
.btn:active { transform: scale(0.98); }

.btn-arrow {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--bg);
  transition: all 0.35s var(--ease-out);
  cursor: pointer; border: none;
}
.btn-arrow:hover { background: var(--gold); transform: scale(1.05); }

/* ── Glass / blurred cards ─────── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
}
.glass-light {
  background: rgba(245, 237, 225, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
}

/* ── Inputs ─────── */
.input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 0 10px;
  width: 100%;
  transition: border-color 0.3s;
}
.input:focus { outline: none; border-color: var(--gold); }
.input::placeholder { color: var(--dimmer); }

.input-box {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--cream);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  transition: all 0.3s;
}
.input-box:focus { outline: none; border-color: var(--gold); background: var(--bg-card); }
.input-box::placeholder { color: var(--dimmer); }

/* ── Reveal animations ─────── */
/* NOTE: keyframes use transform-only (no opacity start) so content stays visible
   even if iframe animations are paused/throttled. The <Reveal> JSX component
   handles its own opacity transitions via inline style + IntersectionObserver. */
@keyframes fadeUp {
  from { transform: translateY(24px); }
  to   { transform: translateY(0); }
}
@keyframes fadeIn {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
@keyframes scaleIn {
  from { transform: scale(0.96); }
  to   { transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.reveal { animation: fadeUp 0.8s var(--ease-out) both; }
.reveal-fade { animation: fadeIn 0.6s ease both; }
.reveal-scale { animation: scaleIn 0.7s var(--ease-out) both; }
.reveal-d1 { animation-delay: 0.1s; }
.reveal-d2 { animation-delay: 0.2s; }
.reveal-d3 { animation-delay: 0.3s; }
.reveal-d4 { animation-delay: 0.4s; }
.reveal-d5 { animation-delay: 0.5s; }
.reveal-d6 { animation-delay: 0.6s; }

/* Stagger letters/words on hero */
.hero-word { display: inline-block; animation: fadeUp 1s var(--ease-out) both; }

/* Image hover zoom */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.9s var(--ease-out); }
.img-zoom:hover img { transform: scale(1.06); }

/* Subtle parallax floating */
.float-y { animation: float 6s ease-in-out infinite; }

/* Magnetic underline link */
.link-underline {
  position: relative; display: inline-block;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 1px; width: 100%; background: currentColor;
  transform-origin: right; transform: scaleX(0);
  transition: transform 0.5s var(--ease-out);
}
.link-underline:hover::after {
  transform-origin: left; transform: scaleX(1);
}

/* Marquee */
.marquee {
  display: flex; gap: 3rem; white-space: nowrap;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* Page transition */
.page-enter { animation: pageIn 0.55s var(--ease-out) both; }
@keyframes pageIn {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

/* Loader dot */
.dot-bounce span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin: 0 2px;
  animation: dotBounce 1.2s infinite ease-in-out both;
}
.dot-bounce span:nth-child(1) { animation-delay: -0.32s; }
.dot-bounce span:nth-child(2) { animation-delay: -0.16s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Section dividers */
.hairline {
  height: 1px; background: var(--line); width: 100%;
}

/* Card hover lift */
.card-lift { transition: transform 0.6s var(--ease-out), box-shadow 0.6s; }
.card-lift:hover { transform: translateY(-6px); }

/* ══════════════════════════════════════════════════════════
   MOTION LAYER
   ══════════════════════════════════════════════════════════ */

/* ── Buttons: light sweep on hover ── */
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.42) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn > * { position: relative; z-index: 1; }
.btn svg { transition: transform 0.45s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary:hover { box-shadow: 0 10px 30px -12px rgba(212,168,87,0.55); }

.btn-arrow svg { transition: transform 0.45s var(--ease-out); }
.btn-arrow:hover svg { transform: translateX(3px); }

/* ── SplitText: word-by-word mask reveal ── */
.split-text { display: inline; }
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word:not(:last-child) { margin-right: 0.26em; }
.split-word-inner {
  display: inline-block;
  transition: transform 0.95s var(--ease-out), opacity 0.95s var(--ease-out);
  will-change: transform;
}

/* ── Scroll progress bar ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 999; pointer-events: none; background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright, #f0c674));
  transform-origin: left; transform: scaleX(0);
}

/* ── Product / editorial card: lift + zoom + shine ── */
.motion-card {
  position: relative;
  transition: transform 0.65s var(--ease-out), box-shadow 0.65s var(--ease-out), border-color 0.5s;
  will-change: transform;
}
/* hover lift only — a resting shadow here would also hit category tiles and story images */
.motion-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
.motion-card .motion-media { overflow: hidden; position: relative; }
.motion-card .motion-media img { transition: transform 1.1s var(--ease-out); }
.motion-card:hover .motion-media img { transform: scale(1.07); }
.motion-card .motion-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.95s var(--ease-out);
  pointer-events: none;
}
.motion-card:hover .motion-media::after { transform: translateX(130%); }

/* ── Product cards: shine sweep + smoother zoom, all three card styles ── */
.card-float-img, .card-bord-img, .card-edit-img { position: relative; }
.card-float-img::after, .card-bord-img::after, .card-edit-img::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.2) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 1s var(--ease-out);
  pointer-events: none;
}
.card-float:hover .card-float-img::after,
.card-bord:hover .card-bord-img::after,
.card-edit:hover .card-edit-img::after { transform: translateX(130%); }

.card-name { transition: color 0.4s var(--ease-out); }
.card-float:hover .card-name,
.card-bord:hover .card-name,
.card-edit:hover .card-name { color: var(--gold); }

.card-add { transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out), background 0.4s; }
.card-float:hover .card-add, .card-edit:hover .card-add { transform: translateY(0) scale(1.02); }

/* ── Gold rule that draws itself in ── */
.rule-draw { position: relative; height: 1px; background: var(--line); overflow: hidden; }
.rule-draw::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold); transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.rule-draw.is-in::after { transform: scaleX(1); }

/* ── Eyebrow label: dot pulse ── */
.eyebrow-live .dot { animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,87,0.55); }
  55% { box-shadow: 0 0 0 7px rgba(212,168,87,0); }
}

/* ── Tilt-free hover glow for chips ── */
.chip-hover { transition: transform 0.45s var(--ease-out), border-color 0.45s, background 0.45s; }
.chip-hover:hover { transform: translateY(-3px); border-color: var(--gold); }

/* ── Slow ambient drift for decorative images ── */
.drift { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,-14px,0) scale(1.02); }
}

/* ── Marquee pauses when you hover it ── */
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* ── Respect reduced motion everywhere ── */
@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .motion-card .motion-media::after { display: none; }
  .drift, .float-y, .marquee, .eyebrow-live .dot { animation: none !important; }
  .split-word-inner { transition: none !important; transform: none !important; opacity: 1 !important; }
  .motion-card:hover { transform: none; }
}

/* Marker dot */
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* Number badge for editorial cards */
.num-badge {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; color: var(--gold);
}

/* Container */
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 768px) { .wrap { padding: 0 18px; } }

/* Selection */
::selection { background: var(--gold); color: var(--bg); }

/* Simplify the brand mark — drop the busy concentric rings on mobile */
@media (max-width: 640px) {
  .brand-mark { display: none !important; }
}

/* Mobile menu trigger — visible only when nav links collapse */
.nav-menu-btn { display: none !important; }
@media (max-width: 900px) {
  .nav-menu-btn { display: inline-flex !important; }
}

/* Per-page top padding overrides for mobile — inline style on pages uses 140-160px to */
/* clear the desktop navbar, which is way too much on phones where the nav is smaller. */
@media (max-width: 800px) {
  .pg-top { padding-top: 100px !important; }
}
@media (max-width: 640px) {
  .pg-top { padding-top: 80px !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* On phones the search icon stays in the top navbar; cart + menu move into */
/* the bottom nav, so hide them from the header to keep it minimal.          */
@media (max-width: 768px) {
  .nav-actions .nav-icon-btn[aria-label="Cart"],
  .nav-actions .nav-icon-btn[aria-label="Menu"],
  .nav-actions .nav-menu-btn { display: none !important; }
  .nav-pill-inner { padding-right: 14px !important; }
  .nav-box-inner .nav-actions .nav-icon-btn[aria-label="Cart"] { display: none !important; }
}

/* ── Mobile baseline (≤640px) ─────────────────────────────
   One place for global mobile rhythm: tighter wrap padding, smaller
   eyebrow tracking, scaled display headings, stacked grids, larger
   tap targets. Per-page tweaks layer on top via their own media queries. */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  /* 10px uppercase with wide tracking is hard to read on a phone */
  .eyebrow { font-size: 11px; letter-spacing: 0.2em; }
  .display { line-height: 0.98; letter-spacing: -0.015em; }
  .btn { padding: 13px 22px; font-size: 11px; letter-spacing: 0.18em; }
  .btn-arrow { width: 40px; height: 40px; }
  .hairline { margin: 30px 0; }

  /* Page chrome */
  main { padding-top: 80px; }

  /* Inputs */
  .input-box { padding: 12px 14px; font-size: 14px; }

  /* Footer */
  .loj-footer { padding: 60px 0 24px; margin-top: 70px; }
  .footer-top { gap: 36px; }
  .footer-cols { gap: 28px 24px; }
  .footer-marks { padding: 22px; gap: 18px; }
  .newsletter { flex-direction: column; align-items: stretch; gap: 14px; }
  .newsletter .btn { width: 100%; }
  .footer-bottom { margin-top: 40px; }
}

/* ── Shared form & summary line styles (used across Cart, Checkout, Contact, Tracking) ─── */
.cart-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; color: var(--cream); font-size: 14px;
  gap: 16px;
}
.cart-line span:first-child { color: var(--dim); }
.cart-total { font-size: 18px; font-weight: 500; padding-top: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field-full { grid-column: 1 / -1; }
.field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
  font-weight: 500;
}

.promo-row { display: flex; gap: 8px; margin-top: 20px; }
.promo-row .input-box { flex: 1; padding: 10px 14px; font-size: 13px; }
.promo-row .btn { padding: 10px 20px; }

/* ── Toast notifications ─────── */
.toast-stack {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 200;
  pointer-events: none;
}
.toast {
  background: var(--glass-solid); backdrop-filter: blur(20px);
  border: 1px solid var(--gold);
  color: var(--cream);
  padding: 14px 22px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; pointer-events: auto;
  animation: toastIn 0.4s var(--ease-out), toastOut 0.4s 2.6s var(--ease-out) forwards;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.toast-success { border-color: var(--gold); }
@keyframes toastIn {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(10px); }
}

/* ── Brand lockup: mark + name cropped out of the Kaanthika logo art ── */
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
/* the supplied logo art is gold; the brand reads as black on the light theme */
.brand-lockup-mark, .brand-lockup-name { filter: brightness(0); }
/* on the dark palettes black would disappear, so flip it to the cream instead */
[data-palette="onyx"] .brand-lockup-mark, [data-palette="onyx"] .brand-lockup-name,
[data-palette="noir"] .brand-lockup-mark, [data-palette="noir"] .brand-lockup-name { filter: brightness(0) invert(1); }
.brand-lockup-mark { height: 30px; width: auto; display: block; }
.brand-lockup-name { height: 17px; width: auto; display: block; }
@media (max-width: 640px) {
  .brand-lockup { gap: 7px; }
  .brand-lockup-mark { height: 25px; }
  .brand-lockup-name { height: 14px; }
}