/* ============================================================
   base.css — токены, типографика, reset, утилиты, reveal
   ============================================================ */

:root{
  /* — Палитра — */
  --cream:      #FDF8F1;
  --cream-2:    #F9EFE0;
  --sand:       #F2E5D1;
  --sand-2:     #EADCC6;
  --paper:      #FFFFFF;

  --gold:       #C8A250;
  --gold-2:     #E3C377;
  --gold-3:     #A87C2C;
  --gold-soft:  #F6E9CF;

  --rose:       #E7B3B8;
  --rose-2:     #F6DCDE;

  --wine:       #6E1C2F;
  --wine-2:     #8E2C44;
  --navy:       #1B2A44;

  --ink:        #2C2521;
  --ink-soft:   #635750;
  --ink-faint:  #8C7F76;

  --line:       rgba(200,162,80,.34);
  --line-soft:  rgba(200,162,80,.18);

  /* — Тени (тёплые, мягкие) — */
  --sh-xs: 0 1px 2px rgba(110,28,47,.05);
  --sh-sm: 0 4px 16px -6px rgba(110,28,47,.14);
  --sh-md: 0 18px 44px -22px rgba(110,28,47,.30);
  --sh-lg: 0 44px 96px -44px rgba(110,28,47,.42);
  --sh-gold: 0 20px 60px -26px rgba(168,124,44,.55);

  /* — Радиусы — */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 42px;

  /* — Шрифты — */
  --f-display: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --f-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-hand:    'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;

  /* — Ритмика — */
  --wrap: 1160px;
  --pad-x: clamp(20px, 5vw, 64px);
  --gap-section: clamp(72px, 11vw, 148px);

  /* — Движение — */
  --e-out: cubic-bezier(.22,.68,.24,1);
  --e-soft: cubic-bezier(.4,.14,.3,1);
  --e-back: cubic-bezier(.34,1.46,.5,1);
}

/* ---------------- reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color: var(--sand-2) var(--cream);
}

body{
  margin:0;
  min-height:100svh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(16px, .55vw + 14.6px, 18px);
  line-height:1.7;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.12; letter-spacing:-.012em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ico{
  display:inline-block;
  vertical-align:-.16em;
  width:1.25em; height:1.25em;
  flex:none;
}
.ico--sm{ width:1.05em; height:1.05em; }
.ico--xs{ width:.95em; height:.95em; }

/* Доступный фокус */
:focus-visible{
  outline:2px solid var(--gold-3);
  outline-offset:3px;
  border-radius:6px;
}

::selection{ background: var(--gold-soft); color: var(--wine); }

/* ---------------- типографика ---------------- */
.display{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.06;
}

.hand{
  font-family:var(--f-hand);
  font-weight:600;
  letter-spacing:0;
}

.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-3);
}

/* ---------------- layout ---------------- */
.section{
  position:relative;
  padding: var(--gap-section) var(--pad-x);
  overflow:clip;
}

.section--cream{
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(900px 460px at 100% 110%, rgba(246,220,222,.55), transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.section--paper{
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,1), transparent 65%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 40%, var(--cream) 100%);
}
.section--tight{ padding-block: clamp(64px, 8vw, 108px); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; }
.wrap--narrow{ max-width:820px; }

/* ---------------- заголовок секции ---------------- */
.section-head{
  text-align:center;
  margin-bottom: clamp(40px, 5.5vw, 72px);
}
.section-head--center{ margin-bottom: clamp(30px, 4vw, 46px); }

.section-head__line{
  display:block;
  width:clamp(64px,10vw,120px);
  height:1px;
  margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.section-head--center .section-head__line:first-child{ margin-bottom:20px; }
.section-head--center .section-head__line:last-child{ margin-top:20px; }

.section-head__kicker{
  margin:18px 0 10px;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-3);
}

.section-head__title{
  font-family:var(--f-display);
  font-size:clamp(2.05rem, 4.6vw, 3.55rem);
  font-weight:700;
  color:var(--wine);
  letter-spacing:-.018em;
}
.section-head__title .dot{ color:var(--gold); }

.section-head__lead{
  margin-top:14px;
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--ink-soft);
  font-weight:500;
}

/* ---------------- scroll reveal ---------------- */
.js [data-reveal]{
  opacity:0;
  will-change:opacity, transform;
}
.js [data-reveal="up"]{ transform:translate3d(0,34px,0); }
.js [data-reveal="scale"]{ transform:translate3d(0,26px,0) scale(.965); }
.js [data-reveal="fade"]{ transform:none; }

.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:
    opacity .95s var(--e-out) var(--rd, 0ms),
    transform 1.05s var(--e-out) var(--rd, 0ms);
}

/* появление текста по словам */
.js .split-line{
  display:block;
  overflow:hidden;
}
.js .split-line > span{
  display:block;
  transform:translate3d(0,105%,0);
  transition:transform 1.1s var(--e-out) var(--sd, 0ms);
}
.js .is-in .split-line > span{ transform:none; }

/* появление текста по словам (разбивка скриптом) */
.js .w{
  display:inline-block;
  transform:translate3d(0,.5em,0);
  opacity:0;
}
.js .is-in .w{
  transform:none;
  opacity:1;
  transition:
    transform .95s var(--e-out) var(--wd, 0ms),
    opacity .8s var(--e-out) var(--wd, 0ms);
}

/* ---------------- прогресс прокрутки ---------------- */
.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:60;
  background:rgba(200,162,80,.14);
  pointer-events:none;
}
.scroll-progress > span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--wine-2));
  box-shadow:0 0 12px rgba(200,162,80,.6);
}

/* ---------------- уважение к prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .js .split-line > span{ transform:none !important; }
  .js .w{ transform:none !important; opacity:1 !important; }
}