/* ============================================================
   KOSMETOLOGIA NK — Natalia Knez
   Design system
   ============================================================ */

/* Lenis smooth scroll (only active when JS adds the .lenis class) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

:root {
  /* Brand constants */
  --green-900: #2a3830;
  --green-800: #35473b;
  --green-700: #3f5346;
  --green-600: #4a6053;
  --cream-50:  #f6f2ea;
  --cream-100: #f1ece2;
  --cream-200: #e9e2d4;
  --cream-300: #ddd2bf;
  --gold:      #b68d63;
  --gold-soft: #c6a583;
  --peach:     #dda890;
  --peach-soft:#e7c2b0;
  --ink:       #26211b;
  --ink-soft:  #5b5347;

  /* Semantic tokens (default = GREEN palette) */
  --hero-bg:   var(--green-800);
  --hero-fg:   #ffffff;
  --hero-muted:#dde3da;
  --page-bg:   var(--cream-50);
  --page-fg:   var(--ink);
  --page-muted:var(--ink-soft);
  --panel-bg:  #ffffff;
  --band-bg:   var(--green-800);
  --band-fg:   #ffffff;
  --soft-bg:   #f4e6dc;       /* peachy soft panel */
  --accent:    var(--gold);
  --accent-2:  var(--peach);
  --line:      rgba(38,33,27,.14);
  --line-light:rgba(246,242,234,.22);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
}

/* CREAM palette ------------------------------------------------ */
:root[data-palette="cream"] {
  --hero-bg:   var(--cream-50);
  --hero-fg:   var(--ink);
  --hero-muted:#7c7264;
  --band-bg:   var(--green-800);
  --band-fg:   var(--cream-50);
  --soft-bg:   #efe6d8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--page-fg);
  background: var(--page-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Typography helpers ---------- */
.serif { font-family: var(--serif); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .32em;
  text-transform: uppercase;
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1.display { font-size: clamp(44px, 8.5vw, 132px); }
h2.display { font-size: clamp(34px, 5.4vw, 78px); }
h3.display { font-size: clamp(26px, 3vw, 42px); }

p { text-wrap: pretty; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; }

.section-pad { padding-block: clamp(72px, 11vw, 160px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-weight: 400;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: 1.05em 2.1em; border-radius: 999px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background .4s, color .4s, box-shadow .4s;
  will-change: transform;
}
.btn--peach { background: var(--peach); color: #fff; }
.btn--peach:hover { background: #d49a80; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(221,168,144,.7); }
.btn--green { background: var(--green-800); color: var(--cream-50); }
.btn--green:hover { background: var(--green-900); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(35,47,39,.6); }
.btn--ghost { border: 1px solid currentColor; }
.btn--ghost:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #a87f55; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(182,141,99,.7); }

/* ---------- Sparkle (4-point star) ---------- */
.spark {
  position: absolute; width: 26px; height: 26px; pointer-events: none;
  background: var(--accent-2);
  -webkit-mask: var(--spark-mask) center/contain no-repeat;
  mask: var(--spark-mask) center/contain no-repeat;
  opacity: .9;
}
:root {
  --spark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52 27 73 48 100 50 73 52 52 73 50 100 48 73 27 52 0 50 27 48 48 27 50 0Z' fill='black'/%3E%3C/svg%3E");
}

/* ---------- Reveal animation (CSS-driven, robust) ---------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  .js .reveal.in { opacity: 1; transform: none; }
}