/* Chococado — custom.css : détails typographiques, motion, textures */

:root {
  --c-noir: #1F1310;
  --c-creme: #F5EBDD;
  --c-or: #B0824F;
  --c-grenat: #8B2331;
  --c-ganache: #3D2417;
  --c-craft: #EADFD0;
}

/* Typographie */
.font-display { font-family: "Fraunces", serif; font-feature-settings: "ss01" on, "ss02" on; }
.font-body { font-family: "Manrope", sans-serif; }
html, body { font-family: "Manrope", sans-serif; color: var(--c-noir); background: var(--c-creme); }
h1, h2, h3, h4, .display { font-family: "Fraunces", serif; letter-spacing: -0.01em; }

/* Grain overlay on hero */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.4; mix-blend-mode: multiply; pointer-events: none;
}

/* Hero entrance stagger */
[data-stagger] > * { opacity: 0; transform: translateY(24px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
[data-stagger] > *:nth-child(1) { animation-delay: .1s; }
[data-stagger] > *:nth-child(2) { animation-delay: .3s; }
[data-stagger] > *:nth-child(3) { animation-delay: .5s; }
[data-stagger] > *:nth-child(4) { animation-delay: .7s; }
[data-stagger] > *:nth-child(5) { animation-delay: .9s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* Header shrink */
header.fixed { transition: background-color .3s ease, height .3s ease; }
header.fixed.is-scrolled { background-color: rgba(31, 19, 16, 0.98); }

/* CTA underline animation */
.cta-underline { position: relative; }
.cta-underline::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1px; background: var(--c-or); transition: right .35s ease;
}
.cta-underline:hover::after { right: 0; }

/* Elegant serif italic tweak for display */
.font-display em { font-style: italic; font-weight: 400; }

/* Custom scrollbar hidden */
body { scrollbar-width: thin; scrollbar-color: var(--c-or) transparent; }

/* Rich underline for links in body copy */
.prose-warm a { color: var(--c-grenat); text-decoration: underline; text-decoration-color: var(--c-or); text-underline-offset: 3px; }
.prose-warm a:hover { color: var(--c-or); }