/* ============================================================
   AURIS × ESSENCE — sales page
   Design tokens + system
   ============================================================ */

/* --- Neue Haas Grotesk Display (licensed webfont) --- */
@font-face {
  font-family: "Neue Haas Grotesk Display";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("nhg-roman.woff2") format("woff2"),
       url("nhg-roman.woff") format("woff");
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("nhg-bold.woff2") format("woff2"),
       url("nhg-bold.woff") format("woff");
}

:root {
  /* --- Essence palette --- */
  --wine-deep:   #1f0515;   /* fundo dominante */
  --wine:        #350924;   /* primária da marca */
  --wine-mid:    #551027;   /* transições, sombras */

  --rose:        #CD648B;   /* ativo, destaque */
  --rose-glow:   #FF7BA8;   /* luz, faísca */
  --rose-soft:   #E8B0C4;   /* sublinhas, texto delicado */

  --cream:       #FFF4F0;   /* texto sobre vinho / fundo claro */
  --cream-warm:  #FFF3DC;   /* fundo claro secundário */

  /* --- derived --- */
  --ink:            var(--cream);
  --ink-dim:        color-mix(in oklab, var(--cream) 62%, var(--wine));
  --ink-faint:      color-mix(in oklab, var(--cream) 38%, var(--wine));
  --line:           color-mix(in oklab, var(--rose-soft) 18%, transparent);
  --line-strong:    color-mix(in oklab, var(--rose-soft) 34%, transparent);

  /* tweakable accent hue control */
  --accent:      var(--rose);
  --accent-glow: var(--rose-glow);
  --glow-strength: 1;

  /* --- type --- */
  --font-sans:  "Neue Haas Grotesk Display", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- layout --- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 80px);

  /* fluid type scale */
  --fs-eyebrow: clamp(11px, 0.78vw, 13px);
  --fs-body:    clamp(16px, 1.18vw, 19px);
  --fs-lead:    clamp(20px, 1.9vw, 30px);
  --fs-h3:      clamp(22px, 2.2vw, 34px);
  --fs-h2:      clamp(34px, 5.2vw, 78px);
  --fs-display: clamp(48px, 9vw, 150px);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  background: var(--wine-deep);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: hidden;
  font-weight: 400;
  letter-spacing: -0.01em;
}

::selection { background: var(--accent); color: var(--wine-deep); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 0.98;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
/* serif accent words inside bold headings must stay regular (Instrument Serif has no bold) */
:where(h1, h2, h3) em, .big em { font-weight: 400; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.32;
  color: var(--ink-dim);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* glow accent text */
.glow-text {
  color: var(--accent-glow);
  text-shadow: 0 0 calc(40px * var(--glow-strength)) color-mix(in oklab, var(--accent-glow) 55%, transparent);
}

/* ============================================================
   SECTION RHYTHM
   ============================================================ */
section { position: relative; }
.section-pad { padding-block: clamp(90px, 14vh, 200px); }

.section-light {
  background: var(--cream);
  color: var(--wine-deep);
}
.section-light .lead { color: color-mix(in oklab, var(--wine-deep) 64%, var(--cream)); }
.section-light .eyebrow { color: var(--wine-mid); }
.section-light .eyebrow::before { background: var(--wine-mid); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  padding: 0.95em 1.8em;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, box-shadow .35s, color .35s;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--wine-deep);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-glow) 60%, transparent);
}
.btn-primary:hover {
  background: var(--accent-glow);
  transform: translateY(-2px);
  box-shadow: 0 12px 50px color-mix(in oklab, var(--accent-glow) 45%, transparent);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-glow); transform: translateY(-2px); }
.btn .arrow { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
/* Hide only when JS is active AND the element hasn't been revealed yet.
   If JS never runs, content stays visible — it can't get stuck hidden. */
html.js .reveal:not(.in):not(.shown) { opacity: 0; transform: translateY(34px); }
.reveal.in { opacity: 1; transform: none; }
/* safety net: guarantees final state even if a post-paint transition is
   throttled (e.g. unfocused tab). Snaps without transition. */
.reveal.shown { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}