/* ==========================================================================
   Révélation — public/css/components/reveal.css
   Fidèle à design/maquettes/site/revelation.html : un seul calque `.rv`
   (role=dialog) piloté par `data-step` 0 → 4, transitions CSS seulement
   (transform et opacity, un seul SVG en stroke-dashoffset). Jetons uniquement ;
   le calque porte `.on-ink` (valeurs sombres dans les deux thèmes).
   Sous prefers-reduced-motion : aucune transition, la page JS affiche t4.
   ========================================================================== */

.rv {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% 38%, rgba(147, 182, 221, .10), transparent 60%),
    radial-gradient(circle at 18% 12%, rgba(236, 232, 222, .35) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 72% 22%, rgba(236, 232, 222, .25) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 40% 78%, rgba(236, 232, 222, .2) 0 .7px, transparent 1.3px),
    var(--ink-block);
  background-size: auto, 140px 140px, 190px 190px, 230px 230px, auto;
  transition: transform var(--t-slow) var(--ease-out);
}
.rv.is-leaving { transform: translateY(-100%); }
.rv__top { position: absolute; inset: 0 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 3; }
.rv__skip {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-2);
  font: 500 15px/1 var(--font-ui); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px;
}

/* Ciel (t1) */
.rv__skywrap { position: absolute; inset: 64px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.rv__sky { position: relative; width: min(300px, 74vw, 42vh); aspect-ratio: 1; }
.rv__sky svg { width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke: var(--line); stroke-width: 1; }
.ring-draw { fill: none; stroke: var(--ink); stroke-opacity: .75; stroke-width: 1.5; stroke-dasharray: 817; stroke-dashoffset: 817; transform: rotate(-90deg); transform-origin: 150px 150px; transition: stroke-dashoffset 900ms var(--ease-out); }
.tick { stroke: var(--line-strong); stroke-width: 1; }
.tick--major { stroke: var(--ink); stroke-opacity: .7; }
.sun { transform-origin: 150px 150px; transform: rotate(-90deg); transition: transform 1000ms var(--ease-out); }
.sun circle:first-child { fill: var(--fire); fill-opacity: .25; }
.sun circle:last-child { fill: var(--earth); }
.rv__sky-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--ink); }
.rv__sky-c b { font: 500 26px/1.1 var(--font-display); display: block; }
.rv__sky-c span { font: 500 13px/1.5 var(--font-ui); color: var(--ink-3); margin-top: 6px; display: block; }
.rv__status { text-align: center; min-height: 52px; }
.rv__status p:first-child { font: italic 500 24px/1.2 var(--font-display); color: var(--ink); }
.rv__status p:last-child { margin-top: 10px; font: 500 13px/1 var(--font-ui); color: var(--ink-3); letter-spacing: .02em; }

/* Scène : piliers (t2–t4) puis phrase (t4) */
.rv__stage { position: absolute; inset: 64px 0 0; width: min(100%, 460px); margin: 0 auto; padding: 0 16px 24px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.rv__pillars { transition: transform 700ms var(--ease-out); transform-origin: 50% 100%; }
.rv__pillars .pillars { gap: 6px; }
.rv__cell { position: relative; }
.rv__cell .pillar {
  background: color-mix(in srgb, var(--surface) 78%, transparent); border-color: var(--line-soft);
  opacity: 0; transform: translateY(-18px) scale(1.06);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-stamp), border-color 300ms ease, background 300ms ease;
}
.rv__cell .pillar__g { font-size: clamp(34px, 11.5vw, 46px); }
.rv__cell:nth-child(2) .pillar { transition-delay: 260ms; }
.rv__cell:nth-child(3) .pillar { transition-delay: 520ms; }
.rv__cell:nth-child(4) .pillar { transition-delay: 780ms; }
.rv__slot { position: absolute; inset: 0; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); opacity: 0; transition: opacity 200ms ease; }
.rv .pillar--veiled { border-style: dashed; background: transparent; justify-content: center; min-height: 100%; }
.rv .pillar__veil { flex: 1; min-height: 60px; }
.rv__cap { margin-top: 22px; text-align: center; font: 500 14px/1.5 var(--font-ui); color: var(--ink-3); transition: opacity 300ms ease; opacity: 0; }
.rv__cap b { color: var(--ink); font-weight: 600; }
.stamp {
  position: absolute; top: -16px; right: -14px; width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center;
  background: var(--accent-fill); color: var(--on-seal); font: 600 24px/1 var(--font-ko);
  box-shadow: inset 0 0 0 2px var(--on-seal-ring), 0 6px 14px rgba(0, 0, 0, .4);
  transform: rotate(-6deg) scale(1.6); opacity: 0; transition: transform 280ms var(--ease-stamp), opacity 120ms ease; z-index: 2;
}

.rv__reveal { margin-top: 8px; max-height: 0; overflow: hidden; transition: max-height 700ms var(--ease-out); }
.rv__reveal > * { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.rv__reveal .kicker { margin-top: 8px; }
.rv__reveal h2 { margin-top: 12px; font: 500 clamp(40px, 13vw, 52px)/1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.rv__reveal h2:focus { outline: none; }
.rv__reveal h2 .ko { color: var(--wood); font-size: .86em; display: inline-block; line-height: 1; }
.rv__reveal .rv__arch { margin-top: 4px; font: italic 500 clamp(32px, 10vw, 40px)/1.1 var(--font-display); color: var(--wood); }
.rv__reveal .pique { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 24rem; }
.rv__reveal .pique b { color: var(--ink); font-weight: 600; }
.rv__reveal .btn { margin-top: 24px; }

/* ---------- États ---------- */
.rv[data-step="1"] .ring-draw { stroke-dashoffset: 0; }
.rv[data-step="1"] .sun { transform: rotate(var(--sun-rot, -90deg)); }
/* t2+ : le ciel se retire */
.rv[data-step="2"] .rv__skywrap, .rv[data-step="3"] .rv__skywrap, .rv[data-step="4"] .rv__skywrap { opacity: 0; transform: translateY(-40px) scale(.7); pointer-events: none; }
.rv[data-step="2"] .rv__slot { opacity: 1; }
.rv[data-step="2"] .pillar, .rv[data-step="3"] .pillar, .rv[data-step="4"] .pillar { opacity: 1; transform: none; }
.rv[data-step="2"] .rv__cap, .rv[data-step="3"] .rv__cap { opacity: 1; }
/* t3 : le Maître du Jour se lève, le sceau se pose */
.rv[data-step="3"] .pillar:not(.pillar--day), .rv[data-step="4"] .pillar:not(.pillar--day) { opacity: .42; transition-delay: 0ms; }
.rv[data-step="3"] .pillar--day, .rv[data-step="4"] .pillar--day { transform: translateY(-8px); border-color: var(--accent-fill); background: var(--surface); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); transition-delay: 0ms; }
.rv[data-step="3"] .stamp, .rv[data-step="4"] .stamp { opacity: 1; transform: rotate(-6deg) scale(1); transition-delay: 250ms; }
/* t4 : les piliers réduisent, la phrase arrive */
.rv[data-step="4"] .rv__pillars { transform: scale(.8); }
.rv[data-step="4"] .rv__cap { opacity: 0; }
.rv[data-step="4"] .rv__reveal { max-height: 520px; }
.rv[data-step="4"] .rv__reveal > * { opacity: 1; transform: none; }
.rv[data-step="4"] .rv__reveal > :nth-child(2) { transition-delay: 300ms; }
.rv[data-step="4"] .rv__reveal > :nth-child(3) { transition-delay: 600ms; }
.rv[data-step="4"] .rv__reveal > :nth-child(4) { transition-delay: 900ms; }
.rv[data-step="4"] .rv__reveal > :nth-child(n+5) { transition-delay: 1200ms; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv * { transition: none !important; }
}
@media (min-width: 900px) {
  .rv__stage { width: min(100%, 520px); }
  .rv__reveal .pique { font-size: 18px; }
}