/* Brand tokens — from color-font.pdf (The Perfection In Smile identity).
   Layout & motion come from the references; colors, fonts, content and media are ours. */
:root {
  --navy: #0B295D;
  --blue: #083977;
  --gold: #CE9E45;
  --gold-ink: #AE8035;     /* darkest stop of the logo gradient: gold display text on cream (3.3:1, large text) */
  --gold-deep: #8A6424;    /* gold-ink darkened: small gold text on cream/white (5:1) */
  --light-yellow: #F3D385;
  --cream: #FDF7EB;        /* logo / brand-sheet background */
  --navy-deep: #06142E;    /* navy darkened — base under dimmed photos */

  /* page background: pure white (client round, 2026-10-26); cream stays the brand accent */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: var(--navy);
  --accent: var(--gold);
  --shadow-tint: 11, 41, 93; /* navy rgb, for shadows */

  --font: "Poppins", sans-serif;

  /* layout: full-bleed sections, one shared content width */
  --gutter: clamp(20px, 3.4vw, 56px);
  --wrap: 1520px;
  /* Script display face "Amsterdam One" (brand sheet) — for the "Dr. Doaa" signature only; font file still needed */
  --font-script: "Amsterdam One", cursive;
}

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

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.page {
  background: var(--surface);
}

/* Lenis smooth scroll (the reference site runs Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Entrance reveals (assets/js/base.js). Approximates the reference's Framer springs:
   blur  — opacity .001→1, blur 10px→0, y 10→0, spring 1.2s no bounce
   chars / words — same, per token, 0.05s stagger
   pop   — opacity 0→1, scale .5→1, spring 1.2s bounce .2 */
.js [data-reveal="blur"],
.js .reveal-token {
  display: inline-block;
  opacity: .001;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1), filter 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="blur"] { display: block; }
.js [data-reveal="pop"] {
  opacity: 0;
  transform: scale(.5);
  transition: opacity 1.2s cubic-bezier(.23, 1, .32, 1), transform 1.2s cubic-bezier(.23, 1, .32, 1);
  transition-delay: var(--d, 0s);
}
/* rise — opacity 0→1, y var(--y, 35px)→0 (Framer spring stiffness 140 / damping 30)
   words-rise — per word, opacity .001→1, y 10→0, no blur (spring 134 / 40) */
.js [data-reveal="rise"] {
  opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 35px));
  transition: opacity .9s cubic-bezier(.25, 1, .5, 1), transform .9s cubic-bezier(.25, 1, .5, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal-token--rise {
  filter: none;
  transition-duration: 1.1s;
}
/* chars-blur — RedDent hero title: per character, blur 10px + y 10px, 0.05s stagger,
   spring 0.4s (fires on load, like the reference's onMount) */
.js .reveal-token--fast { transition-duration: .7s; }
/* reference springs (stiffness 300 / damping 60 / mass 1.2): ~1s, no overshoot */
.js [data-reveal="rise"][style*="--y:80px"],
.js [data-reveal="rise"][style*="--y:50px"],
.js [data-reveal="rise"][style*="--y:110px"],
.js [data-reveal="rise"][style*="--x:"] {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.js .is-revealed[data-reveal="blur"],
.js .is-revealed .reveal-token { opacity: 1; filter: none; transform: none; }
.js .is-revealed[data-reveal="pop"],
.js .is-revealed[data-reveal="rise"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .reveal-token { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

/* TEMP — remove once real neighbouring sections exist */
.temp-spacer {
  height: 100vh;
  display: grid;
  place-items: center;
  color: rgba(10, 17, 40, .3);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}