/* ============================================================
   KOULAM × 770 — on scrolle, on entre.
   Brique sombre, or discret, serif solennelle.
   ============================================================ */

:root {
  --bg: #100c09;
  --cream: #efe4cd;
  --gold: #d8b46a;
  --brick: #9c4a32;
  --orange: #f28a2e;
  --hairline: rgba(239, 228, 205, 0.28);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------------- grain ---------------- */

.grain {
  position: fixed; inset: -60px; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07; mix-blend-mode: overlay;
  animation: grain-shift 0.9s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 33% { transform: translate(18px, -12px); }
  66% { transform: translate(-14px, 16px); } 100% { transform: translate(0, 0); }
}

/* ---------------- loader ---------------- */

.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-word { font-size: 10px; font-weight: 600; letter-spacing: 0.5em; text-indent: 0.5em; opacity: 0.8; }
.loader-770 { font-family: var(--serif); font-weight: 300; font-size: 64px; color: var(--gold); line-height: 1; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.loader-line { width: 150px; height: 1px; background: rgba(239, 228, 205, 0.15); overflow: hidden; }
.loader-line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; animation: ld 1.5s var(--ease-out) forwards; }
@keyframes ld { to { transform: scaleX(1); } }

/* ---------------- experience ---------------- */

.exp { position: relative; height: 520vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }

.seq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; background: #17110c; }

.shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 12, 9, 0.5) 0%, rgba(16, 12, 9, 0) 20%),
    linear-gradient(0deg, rgba(16, 12, 9, 0.55) 0%, rgba(16, 12, 9, 0) 26%);
}
/* voile noir du franchissement de la porte */
.veil { position: absolute; inset: 0; z-index: 8; background: #060403; opacity: 0; pointer-events: none; }

.shade2 {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(10, 7, 4, 0.72) 0%, rgba(10, 7, 4, 0.35) 38%, rgba(10, 7, 4, 0) 62%);
  transition: opacity 0.8s var(--ease-out);
}
.pin.is-finale .shade2 { opacity: 1; }

.pin::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.55);
}

/* ---------------- hero overlay ---------------- */

.hero { position: absolute; inset: 0; z-index: 18; }

.bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 34px 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.wordmark { font-size: 12px; font-weight: 700; letter-spacing: 0.44em; }
.btn-ghost {
  border: 1px solid var(--hairline); padding: 10px 18px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em;
  background: rgba(16, 12, 9, 0.25); backdrop-filter: blur(3px);
  transition: background 0.3s, color 0.3s;
}
.btn-ghost:hover { background: var(--cream); color: #17110c; }

.hero-copy {
  position: absolute; left: 8vw; top: 50%; transform: translateY(-52%);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.hero-kicker { font-size: 9.5px; font-weight: 600; letter-spacing: 0.4em; color: rgba(239, 228, 205, 0.85); }
.hero-title {
  font-family: var(--serif); font-weight: 300;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: clamp(110px, 22vw, 300px); line-height: 0.95;
  color: transparent;
  background: linear-gradient(178deg, #f8efd9 8%, #e3cd9b 55%, #bd9a58 100%);
  -webkit-background-clip: text; background-clip: text;
  margin: 6px 0 10px -6px;
}
.hero-sub {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2.4vw, 27px); color: rgba(244, 236, 216, 0.96);
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.85;
}
.scroll-cue span { font-size: 9px; font-weight: 600; letter-spacing: 0.34em; }
.scroll-cue i { width: 1px; height: 34px; background: var(--cream); overflow: hidden; position: relative; display: block; }
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--gold); animation: cue 2.2s var(--ease-out) infinite;
}
@keyframes cue { 0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; } }

/* ---------------- captions ---------------- */

.cap {
  position: absolute; left: 8vw; bottom: 16%;
  z-index: 12; opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.cap.is-on { opacity: 1; transform: none; }
.cap p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 3vw, 38px); line-height: 1.4;
  color: rgba(244, 236, 216, 0.97);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65);
}

/* ---------------- finale ---------------- */

.finale {
  position: absolute; left: 8vw; top: 50%; transform: translateY(-50%);
  z-index: 14; max-width: 560px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65);
}
.finale.is-on { opacity: 1; visibility: visible; }
.finale-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.5em; color: var(--gold); }
.finale-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 6vw, 88px); line-height: 1.02;
  color: transparent;
  background: linear-gradient(178deg, #f8efd9 8%, #e3cd9b 60%, #bd9a58 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
  margin: 14px 0 18px;
}
.finale-sub { font-size: 13.5px; line-height: 1.8; color: rgba(244, 236, 216, 0.94); }

.cta {
  display: inline-block; margin-top: 30px;
  padding: 16px 34px; border-radius: 999px;
  background: linear-gradient(135deg, #f7a04b, #ec7a1c);
  color: #1d1105; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  box-shadow: 0 12px 30px rgba(236, 122, 28, 0.35);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
  text-shadow: none;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(236, 122, 28, 0.45); }

.feats { display: flex; gap: 12px; list-style: none; margin-top: 26px; flex-wrap: wrap; }
.feats li { font-size: 9px; font-weight: 600; letter-spacing: 0.28em; color: rgba(239, 228, 205, 0.75); }

/* ---------------- progress ---------------- */

.progressbar {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 12; display: flex; align-items: center; gap: 14px;
  color: rgba(239, 228, 205, 0.8);
}
.progressbar > span:not(.pb-track) { font-size: 8px; font-weight: 600; letter-spacing: 0.3em; }
.pb-track { display: block; width: 170px; height: 1px; background: rgba(239, 228, 205, 0.22); overflow: hidden; }
.pb-track i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }

/* ---------------- learn (contenu indexable) ---------------- */

.learn { position: relative; z-index: 10; background: #0d0a07; border-top: 1px solid rgba(239, 228, 205, 0.1); }
.learn-inner { max-width: 720px; margin: 0 auto; padding: 90px 28px 80px; }
.learn-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: 0.44em; color: var(--gold); margin: 0 0 16px; }
.learn-title {
  font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.6vw, 56px);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  line-height: 1.08; margin: 0 0 28px;
  color: transparent;
  background: linear-gradient(178deg, #f8efd9 8%, #e3cd9b 60%, #bd9a58 100%);
  -webkit-background-clip: text; background-clip: text;
}
.learn p { font-size: 14px; line-height: 2; color: rgba(239, 228, 205, 0.82); margin: 0 0 22px; }
.learn a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.learn-faq { margin-top: 46px; border-top: 1px solid rgba(239, 228, 205, 0.12); padding-top: 38px; }
.learn-faq h3 {
  font-family: var(--serif); font-weight: 400; font-size: 23px;
  color: var(--cream); margin: 0 0 12px;
}
.learn-faq h3:not(:first-child) { margin-top: 34px; }

/* ---------------- footer ---------------- */

.foot {
  position: relative; z-index: 10;
  padding: 60px 8vw 70px; background: #0b0805;
  display: flex; flex-direction: column; gap: 18px;
  border-top: 1px solid rgba(239, 228, 205, 0.12);
}
.foot-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.5em; color: var(--gold); }
.foot-link { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: rgba(239, 228, 205, 0.85); }
.foot-link:hover { color: var(--gold); }

/* ---------------- responsive ---------------- */

@media (max-width: 700px) {
  .bar { padding: 20px 20px 0; }
  .shade2 { background: linear-gradient(180deg, rgba(10, 7, 4, 0.78) 0%, rgba(10, 7, 4, 0.4) 48%, rgba(10, 7, 4, 0) 72%); }
  .hero-copy { left: 7vw; }
  .cap { left: 7vw; bottom: 20%; }
  .finale { left: 7vw; right: 7vw; }
  .exp { height: 420vh; }
  .scroll-cue { bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-cue i::after { animation: none; }
}