@import url('/fonts/fonts.css');

/* ============================================================
   EMBERT — design tokens
   Кольори і знак строго за логобуком (стор. 11).
   Типографіка — веб-заміни ліцензійних шрифтів бренду,
   з ДОДАТНІМ трекінгом (пряма правка клієнтки: «ширше,
   між буквами додати простір»).
   ============================================================ */

:root {
  /* --- brand, з логобука --- */
  --navy:       #161240;
  --cream:      #FFEBD8;
  --sky:        #9DC1D7;
  --ink:        #1A1B20;

  /* --- derived: студійна порожнеча як у планки --- */
  --void:       #0A0820;
  --void-2:     #100C33;
  --navy-lift:  #1E1954;
  --line:       rgba(255, 235, 216, 0.14);
  --line-soft:  rgba(255, 235, 216, 0.07);
  --line-sky:   rgba(157, 193, 215, 0.30);

  --cream-90:   rgba(255, 235, 216, 0.90);
  --cream-64:   rgba(255, 235, 216, 0.64);
  --cream-44:   rgba(255, 235, 216, 0.44);
  --cream-26:   rgba(255, 235, 216, 0.26);

  /* --- типографіка --- */
  --sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif-thin: 'Cormorant Garamond', Georgia, serif;   /* V1 */
  --serif-mid:  'Playfair Display', Georgia, serif;     /* V2 */
  --serif-warm: 'Prata', Georgia, serif;                /* V3 */

  /* Флюїдна шкала. Дисплей навмисно широкий і легкий. */
  --t-hero:   clamp(2.75rem, 7.6vw, 8.5rem);
  --t-h2:     clamp(2rem, 4.4vw, 4.5rem);
  --t-h3:     clamp(1.375rem, 2.1vw, 2rem);
  --t-lead:   clamp(1.0625rem, 1.35vw, 1.375rem);
  --t-body:   clamp(1rem, 1.05vw, 1.0625rem);
  --t-small:  0.8125rem;
  --t-eyebrow: 0.6875rem;

  /* Трекінг: капітель завжди з великим простором */
  --tr-eyebrow: 0.24em;
  --tr-caps:    0.14em;
  --tr-display: 0.012em;

  /* --- ритм --- */
  --gutter:   clamp(1.25rem, 4.5vw, 4rem);
  --maxw:     82.5rem;      /* 1320 */
  --maxw-narrow: 46rem;     /* 736  */
  --sec-y:    clamp(6rem, 12vw, 12.5rem);
  --sec-y-sm: clamp(4rem, 7vw, 7rem);

  /* --- рух --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;
}

/* ============================================================ */

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

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

body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--sky); color: var(--navy); }

/* --- службові --- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--sky);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--cream-64);
  max-width: 34em;
}

.rule { height: 1px; background: var(--line); border: 0; }

.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;
}

/* --- поява по скролу: IntersectionObserver + CSS, без rAF --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-line] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal-line].is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-line] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}