/* ============================================================
   HARLYS Luxury — Tweak overrides layer
   Variables here can be set by the tweaks panel via inline style on :root
   ============================================================ */

:root {
  /* Defaults — get overridden by the tweaks JS */
  --display-font: "Cormorant Garamond";
  --body-font: "Inter";
  --display-weight: 300;
  --title-scale: 1;
  --body-scale: 1;
  --tracking: 0em;
  --kicker-tracking: 0.28em;
  --line-height: 1.6;

  --card-padding-scale: 1;
  --section-spacing-scale: 1;
  --card-radius: 4px;
  --btn-radius: 0px;
  --shadow-scale: 1;
  --glow-scale: 1;

  --noise-opacity: 0;
  --vignette-opacity: 0;
  --grain-opacity: 0;
  --scanline-opacity: 0;
  --spotlight-intensity: 1;
  --atmosphere-intensity: 1;
  --spotlight-hue: 78;
  --glass-blur: 20px;
  --glass-opacity: 0.72;

  --float-speed: 7s;
  --float-amp: 5px;
  --bar-anim-speed: 0.9s;

  --cta-py: 140px;
  --cta-center-glow: 1;

  --darkness: 1;
}

/* Apply overrides to existing rules */
body {
  font-family: var(--body-font), system-ui, sans-serif;
  font-size: calc(17px * var(--body-scale));
  line-height: var(--line-height);
  letter-spacing: var(--tracking);
}
.sans { font-family: var(--body-font), system-ui, sans-serif; }

/* Display elements */
.hd__logo,
.section__h, .section__h .italic,
.hero__h, .hero__h .italic,
.hero__seal-mark,
.museum__label .h,
.glass__pic, .glass__name, .glass__num,
.pillar__num, .pillar__h,
.bespoke__seal, .bespoke__h,
.bespoke__ul li span:last-child,
.confidant__mark, .confidant__q, .confidant__pic, .confidant__n,
.ledger__intro h3,
.ledger__card::before, .ledger__card-h,
.bar__val, .kpi__n,
.privy__h,
.foot__motto {
  font-family: var(--display-font), "Times New Roman", serif !important;
}

.hero__h, .section__h, .privy__h {
  font-weight: var(--display-weight) !important;
  font-size: calc(clamp(56px, 7vw, 108px) * var(--title-scale));
}
.section__h { font-size: calc(clamp(40px, 4.6vw, 72px) * var(--title-scale)); }
.privy__h { font-size: calc(clamp(56px, 7vw, 108px) * var(--title-scale)); }

/* Inter / sans elements still use body font for sans elements */
.hd__logo .mono,
.hd__nav, .hd__cta,
.btn-gold, .btn-ghost,
.hero__pre, .hero__sub,
.hero__seal-txt strong,
.museum__plaque, .museum__label .p,
.glass__lbl, .glass__role, .glass__sub, .glass__line,
.section__pre, .section__lede,
.pillar__d,
.bespoke__no, .bespoke__d, .bespoke__ul li, .bespoke__more,
.confidant__r,
.ledger__intro p, .ledger__card-s,
.bar__lbl, .kpi__l,
.privy__pre, .privy__d,
.foot__col h4, .foot__col a, .foot__addr, .foot__base {
  font-family: var(--body-font), system-ui, sans-serif !important;
}

/* Italic display toggle */
:root[data-italic-display="0"] .italic,
:root[data-italic-display="0"] .hero__h .italic,
:root[data-italic-display="0"] .section__h .italic,
:root[data-italic-display="0"] .privy__h .italic,
:root[data-italic-display="0"] .pillar__h,
:root[data-italic-display="0"] .bespoke__h,
:root[data-italic-display="0"] .confidant__q,
:root[data-italic-display="0"] .confidant__n,
:root[data-italic-display="0"] .ledger__intro h3,
:root[data-italic-display="0"] .glass__name,
:root[data-italic-display="0"] .museum__label .h,
:root[data-italic-display="0"] .privy__h .italic,
:root[data-italic-display="0"] .foot__motto {
  font-style: normal !important;
}

/* Kicker case toggle */
:root[data-upper-kickers="0"] .hero__pre,
:root[data-upper-kickers="0"] .section__pre,
:root[data-upper-kickers="0"] .pillar__num,
:root[data-upper-kickers="0"] .bespoke__no,
:root[data-upper-kickers="0"] .privy__pre,
:root[data-upper-kickers="0"] .museum__plaque,
:root[data-upper-kickers="0"] .glass__lbl,
:root[data-upper-kickers="0"] .ledger__card-s {
  text-transform: none !important;
}

/* Kicker tracking */
.hero__pre, .section__pre, .pillar__num, .bespoke__no,
.privy__pre, .museum__plaque, .glass__lbl, .ledger__card-s,
.hd__nav, .hd__cta, .btn-gold, .btn-ghost,
.kpi__l, .bar__lbl, .foot__col h4 {
  letter-spacing: var(--kicker-tracking) !important;
}

/* Section spacing scale */
.section { padding: calc(120px * var(--section-spacing-scale)) 40px; }
.hero__inner { padding: calc(88px * var(--section-spacing-scale)) 40px calc(96px * var(--section-spacing-scale)); }

/* Card padding scale */
.pillar { padding: calc(48px * var(--card-padding-scale)) calc(32px * var(--card-padding-scale)); }
.bespoke__card { padding: calc(44px * var(--card-padding-scale)) calc(36px * var(--card-padding-scale)); }
.confidant { padding: calc(40px * var(--card-padding-scale)) calc(32px * var(--card-padding-scale)); }
.ledger__card { padding: calc(40px * var(--card-padding-scale)); }
.glass { padding: calc(18px * var(--card-padding-scale)) calc(22px * var(--card-padding-scale)); }

/* Radius */
.btn-gold, .btn-ghost { border-radius: var(--btn-radius) !important; }
.bespoke__card, .confidant, .ledger__card, .museum, .glass {
  border-radius: var(--card-radius);
}

/* Shadow scale */
.glass {
  box-shadow: 0 calc(24px * var(--shadow-scale)) calc(48px * var(--shadow-scale)) rgba(0,0,0, calc(0.4 * var(--shadow-scale)));
  backdrop-filter: blur(var(--glass-blur));
  background: rgba(30, 26, 21, var(--glass-opacity));
}

/* Float anim */
@keyframes floatyTw {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(calc(-1 * var(--float-amp))); }
}
.glass {
  animation: floatyTw var(--float-speed) ease-in-out infinite;
}

/* Bar animation speed */
.bar__fill {
  animation-duration: var(--bar-anim-speed);
}

/* Spotlight intensity */
.museum__spotlight {
  opacity: var(--spotlight-intensity);
  background: radial-gradient(ellipse at top,
    oklch(0.95 0.08 var(--spotlight-hue) / 0.18) 0%,
    transparent 60%) !important;
}

/* Atmosphere */
.hero, .privy {
  filter: brightness(var(--darkness));
}
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 75% 40%,
      oklch(0.7 0.09 var(--spotlight-hue) / calc(0.10 * var(--atmosphere-intensity))) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 100%,
      oklch(0.7 0.09 var(--spotlight-hue) / calc(0.04 * var(--atmosphere-intensity))) 0%,
      transparent 60%),
    var(--bg) !important;
}
.privy {
  background:
    radial-gradient(ellipse 50% 70% at 50% 30%,
      oklch(0.7 0.09 var(--spotlight-hue) / calc(0.14 * var(--atmosphere-intensity) * var(--cta-center-glow))) 0%,
      transparent 60%),
    var(--bg) !important;
  padding: var(--cta-py) 40px !important;
}

/* ============================================================
   Mobile overrides — nécessitent !important pour passer les tweaks
   ============================================================ */
@media (max-width: 600px) {
  .section { padding: 68px 18px !important; }
  .section--alt > .section__inner { padding: 0 18px !important; }
  .hero__inner { padding: 44px 18px 52px !important; }
  .privy { padding: 68px 18px !important; }
  .hero__h,
  .section__h,
  .privy__h { font-size: calc(clamp(38px, 10.5vw, 58px) * var(--title-scale)) !important; }
}

/* Gold glow on CTAs */
.btn-gold {
  box-shadow: 0 0 calc(0px * var(--glow-scale)) transparent;
  transition: all .25s, box-shadow .35s;
}
.btn-gold:hover {
  box-shadow: 0 0 calc(40px * var(--glow-scale)) var(--gold-tint);
}

/* ============================================================
   Hero alignment
   ============================================================ */
:root[data-hero-align="center"] .hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
}
:root[data-hero-align="center"] .hero__l {
  margin: 0 auto;
  max-width: 760px;
}
:root[data-hero-align="center"] .hero__sub,
:root[data-hero-align="center"] .hero__seal {
  margin-left: auto;
  margin-right: auto;
}
:root[data-hero-align="center"] .hero__pre,
:root[data-hero-align="center"] .hero__ctas {
  justify-content: center;
}
:root[data-hero-align="center"] .hero__r {
  display: none;
}

/* ============================================================
   Museum frame styles
   ============================================================ */
:root[data-museum-style="solid"] .museum {
  background: var(--bg-3) !important;
}
:root[data-museum-style="solid"] .museum__base { display: none; }

:root[data-museum-style="duotone"] .museum {
  background: linear-gradient(135deg, var(--gold-3) 0%, var(--bg) 100%) !important;
}
:root[data-museum-style="duotone"] .museum__base { display: none; }

:root[data-museum-style="gold"] .museum {
  background: linear-gradient(180deg, var(--gold-tint) 0%, var(--bg-2) 100%) !important;
  border: 1px solid var(--gold-3) !important;
}

:root[data-museum-style="void"] .museum {
  background: #000 !important;
  border: 1px solid var(--gold) !important;
}
:root[data-museum-style="void"] .museum__base { display: none; }

:root[data-museum-style="columns"] .museum__base {
  background: repeating-linear-gradient(90deg,
    var(--gold-tint) 0 1px,
    transparent 1px 60px) !important;
  filter: none !important;
}

/* ============================================================
   Border styles
   ============================================================ */
:root[data-border-style="medium"] {
  --line: rgba(184, 172, 149, 0.28);
  --line-2: rgba(184, 172, 149, 0.18);
  --line-3: rgba(184, 172, 149, 0.50);
}
:root[data-border-style="thick"] {
  --line: rgba(184, 172, 149, 0.50);
  --line-2: rgba(184, 172, 149, 0.32);
  --line-3: rgba(184, 172, 149, 0.78);
}
:root[data-border-style="thick"] .pillar,
:root[data-border-style="thick"] .pillars,
:root[data-border-style="thick"] .bespoke__card,
:root[data-border-style="thick"] .confidant,
:root[data-border-style="thick"] .ledger__card {
  border-width: 2px !important;
}
:root[data-border-style="none"] .pillars,
:root[data-border-style="none"] .pillar,
:root[data-border-style="none"] .bespoke__card,
:root[data-border-style="none"] .confidant,
:root[data-border-style="none"] .ledger__card,
:root[data-border-style="none"] .museum,
:root[data-border-style="none"] .glass,
:root[data-border-style="none"] .section--alt,
:root[data-border-style="none"] .privy {
  border: none !important;
}

:root[data-border-color="gold"] {
  --line: rgba(200, 166, 104, 0.28);
  --line-2: rgba(200, 166, 104, 0.16);
  --line-3: rgba(200, 166, 104, 0.50);
}
:root[data-border-color="strong"] {
  --line: rgba(236, 227, 208, 0.30);
  --line-2: rgba(236, 227, 208, 0.18);
  --line-3: rgba(236, 227, 208, 0.55);
}

/* ============================================================
   Vertical column rule
   ============================================================ */
:root[data-vertical-rule="1"] body::before {
  content: "";
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--gold-tint);
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   Roman numerals toggle
   ============================================================ */
:root[data-roman-numerals="0"] .pillar:nth-child(1) .pillar__num { content: "01"; }
:root[data-roman-numerals="0"] .pillar:nth-child(1) .pillar__num,
:root[data-roman-numerals="0"] .pillar:nth-child(2) .pillar__num,
:root[data-roman-numerals="0"] .pillar:nth-child(3) .pillar__num,
:root[data-roman-numerals="0"] .pillar:nth-child(4) .pillar__num {
  font-size: 0;
}
:root[data-roman-numerals="0"] .pillar:nth-child(1) .pillar__num::after { content: "01"; font-size: 12px; }
:root[data-roman-numerals="0"] .pillar:nth-child(2) .pillar__num::after { content: "02"; font-size: 12px; }
:root[data-roman-numerals="0"] .pillar:nth-child(3) .pillar__num::after { content: "03"; font-size: 12px; }
:root[data-roman-numerals="0"] .pillar:nth-child(4) .pillar__num::after { content: "04"; font-size: 12px; }

:root[data-roman-numerals="0"] .bespoke__seal { font-size: 0; }
:root[data-roman-numerals="0"] .bespoke__card:nth-child(1) .bespoke__seal::after { content: "1"; font-size: 22px; }
:root[data-roman-numerals="0"] .bespoke__card:nth-child(2) .bespoke__seal::after { content: "2"; font-size: 22px; }
:root[data-roman-numerals="0"] .bespoke__card:nth-child(3) .bespoke__seal::after { content: "3"; font-size: 22px; }
:root[data-roman-numerals="0"] .bespoke__card:nth-child(4) .bespoke__seal::after { content: "4"; font-size: 22px; }

/* ============================================================
   Deco separators on section__pre
   ============================================================ */
:root[data-deco-separators="0"] .section__pre::before,
:root[data-deco-separators="0"] .section__pre::after {
  display: none !important;
}

/* ============================================================
   Ledger style (bars/dots/line)
   ============================================================ */
:root[data-ledger-style="dots"] .bar__fill {
  background: transparent !important;
}
:root[data-ledger-style="dots"] .bar__fill::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
}

:root[data-ledger-style="line"] .bars {
  height: 200px;
  position: relative;
}
:root[data-ledger-style="line"] .bar__fill {
  background: transparent !important;
  border-top: 2px solid var(--gold);
}

/* ============================================================
   Atmosphere effects
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image:
    /* Vignette */
    radial-gradient(ellipse at center,
      transparent 40%,
      rgba(0,0,0, calc(0.6 * var(--vignette-opacity))) 100%),
    /* Scanlines */
    repeating-linear-gradient(0deg,
      rgba(0,0,0, calc(0.3 * var(--scanline-opacity))) 0 1px,
      transparent 1px 3px),
    /* Noise via SVG-ish pattern */
    radial-gradient(circle at 25% 25%, rgba(255,255,255, calc(0.02 * var(--noise-opacity))) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255, calc(0.02 * var(--noise-opacity))) 0 1px, transparent 1px 4px);
}

/* Film grain (subtle animated overlay) */
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-2%, -1%); }
  30% { transform: translate(1%, 2%); }
  50% { transform: translate(-1%, 1%); }
  70% { transform: translate(2%, -2%); }
  90% { transform: translate(-2%, 1%); }
}
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 8999;
  background-image:
    repeating-radial-gradient(circle at 30% 40%,
      rgba(255,255,255, calc(0.04 * var(--grain-opacity))) 0 1px,
      transparent 1px 2px),
    repeating-radial-gradient(circle at 70% 60%,
      rgba(0,0,0, calc(0.04 * var(--grain-opacity))) 0 1px,
      transparent 1px 2px);
  animation: grainShift 0.8s steps(6) infinite;
  opacity: var(--grain-opacity);
}

/* ============================================================
   Footer style variants
   ============================================================ */
:root[data-footer-style="minimal"] .foot__col,
:root[data-footer-style="minimal"] .foot__brand .foot__motto,
:root[data-footer-style="minimal"] .foot__brand .foot__addr {
  display: none;
}
:root[data-footer-style="minimal"] .foot__grid {
  grid-template-columns: 1fr;
  text-align: center;
}

:root[data-footer-style="centered"] .foot__grid {
  grid-template-columns: 1fr;
  text-align: center;
}
:root[data-footer-style="centered"] .foot__brand .hd__logo {
  justify-content: center;
}
:root[data-footer-style="centered"] .foot__motto,
:root[data-footer-style="centered"] .foot__addr {
  margin-left: auto;
  margin-right: auto;
}