/* ==========================================================================
   reveal.css — "The Reveal" choreography. Ported from the preview's §1 VEIL +
   CANDLELIGHT blocks, adapted for production (session-gated ceremony).

   The blindfold is HORIZONTAL: two halves (top + bottom) that LIFT off the eyes,
   parting at a gold seam on the eye-line — the visitor IS the blindfolded client.

   Body state machine (driven by reveal.js):
     .sealed            initial — dark, scroll-locked (no-preference only)
     .reveal-go         first visit — fire the full ceremony (keyframes below)
     .revealed-instant  return visit / no-JS — straight to the warm hero, no anim
   ========================================================================== */

/* ---- SCROLL LOCK — gated to no-preference (preview: body.sealed) -------- */
@media (prefers-reduced-motion: no-preference) {
  body.sealed {
    overflow: hidden; /* hold them in the dark a beat */
  }
}

/* ==========================================================================
   CANDLELIGHT — the breathing dark (gold above, blood-red below)
   ========================================================================== */
.candle {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
}
.candle.a {
  top: -12vh;
  left: 50%;
  width: 70vw;
  height: 55vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232, 178, 89, 0.16), transparent);
}
.candle.b {
  bottom: -18vh;
  right: -10vw;
  width: 55vw;
  height: 50vh;
  background: radial-gradient(closest-side, rgba(168, 50, 43, 0.10), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .candle.a {
    animation: flameA 7.5s ease-in-out infinite;
  }
  .candle.b {
    animation: flameB 9.5s ease-in-out infinite;
  }
  @keyframes flameA {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
  }
  @keyframes flameB {
    0%, 100% { opacity: 0.50; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.07); }
  }
}

/* ==========================================================================
   THE VEIL — horizontal blindfold halves, eye-line seam, pupil bloom
   ========================================================================== */
#veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
#veil .half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.6%; /* slight overlap so no seam-gap flicker */
  background: var(--ink);
  /* woven fabric of the blindfold — layered threads + pressed-cloth shading */
  background-image:
    repeating-linear-gradient(48deg, rgba(0, 0, 0, 0.30) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-42deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 5px),
    radial-gradient(120% 140% at 50% 50%, rgba(30, 24, 17, 0.9), var(--ink) 70%);
  box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
#veil .top    { top: 0;    transform-origin: top; }
#veil .bottom { bottom: 0; transform-origin: bottom; }

/* the seam of first light at the eye-line */
#veil .seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%) scaleX(0.2);
  background: linear-gradient(90deg, transparent, var(--grace-hi), transparent);
  opacity: 0;
  box-shadow:
    0 0 24px 6px rgba(246, 215, 154, 0.7),
    0 0 60px 18px rgba(232, 178, 89, 0.4);
}
/* full-screen pupil-adjustment bloom */
#veil .bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 48%, rgba(246, 215, 154, 0.55), transparent 70%);
  opacity: 0;
}

/* ==========================================================================
   THE CEREMONY — first visit only, motion welcome (preview .reveal-go)
   First light = gold seam blooming BEFORE the halves open, then they lift.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-go #veil .seam   { animation: seam 1.7s var(--ease-unveil) forwards; }
  .reveal-go #veil .top    { animation: liftTop 1.7s var(--ease-unveil) 0.18s forwards; }
  .reveal-go #veil .bottom { animation: liftBot 1.7s var(--ease-unveil) 0.18s forwards; }
  .reveal-go #veil .bloom  { animation: bloom 1.1s ease-out 0.55s forwards; }
  .reveal-go #veil         { animation: veilOff 0.01s linear 1.9s forwards; }

  @keyframes seam {
    0%   { opacity: 0; transform: translateY(-50%) scaleX(0.15); }
    14%  { opacity: 1; }
    40%  { opacity: 1; transform: translateY(-50%) scaleX(1); }
    100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
  }
  @keyframes liftTop {
    0%   { transform: translateY(0); }
    18%  { transform: translateY(0.6%); }   /* the hesitation at the knot */
    100% { transform: translateY(-101%); }
  }
  @keyframes liftBot {
    0%   { transform: translateY(0); }
    18%  { transform: translateY(-0.6%); }
    100% { transform: translateY(101%); }
  }
  @keyframes bloom {
    0%   { opacity: 0; }
    35%  { opacity: 1; }                    /* over-bright */
    100% { opacity: 0; }                    /* eyes settle */
  }
  @keyframes veilOff { to { visibility: hidden; } }

  /* hero resolves like vision focusing */
  .reveal-go .focus-in {
    animation: focusIn 1.3s var(--ease-focus) 0.7s both;
  }
  @keyframes focusIn {
    0%   { opacity: 0; filter: blur(14px); transform: translateY(10px) scale(1.012); }
    60%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0); transform: none; }
  }
}

/* reduced motion: the reveal becomes a gentle, inclusive fade ------------- */
@media (prefers-reduced-motion: reduce) {
  .candle.a, .candle.b { animation: none; }
  .reveal-go #veil { animation: softFade 0.5s ease forwards; }
  @keyframes softFade { to { opacity: 0; visibility: hidden; } }
  .focus-in { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ==========================================================================
   INSTANT REVEAL — return visit / no-JS: end-state, no animation
   ========================================================================== */
.revealed-instant #veil {
  visibility: hidden;
}
.revealed-instant .focus-in {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ==========================================================================
   SCROLL-REVEAL — staggered emergence from shadow (IO-driven, preview .reveal)
   Stagger delay is set inline by reveal.js, matching the preview.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: brightness(0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition:
      opacity 0.9s var(--ease-rise),
      transform 0.9s var(--ease-rise),
      filter 1.1s ease;
  }
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: brightness(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}