/* =========================================================== */
/* AG Curtain - ADAPTED for The Tooth Place: the "readiness veil"*/
/* (rebuild plan Section 4.4). THIS FILE IS NOT THE CANONICAL    */
/* DROP-IN. What changed vs AG Curtain Sweep-Reveal v2.5 and why: */
/*  - cream veil, not a charcoal wall; it sits UNDER the header  */
/*    (z 90 < 100) so the logo, phone and Book stay usable from  */
/*    the first frame (canonical z was 2147483645, covering all);*/
/*  - no timed emblem draw / sweep / loading bar: the four tooth */
/*    outlines from the logo are a 4-step indicator tied to four */
/*    REAL readiness signals (ag-curtain.js), then the gold brush*/
/*    arc draws (210ms) and the veil lifts (420ms);              */
/*  - no minimum display (canonical held 2520ms); fail-open at   */
/*    2100ms (canonical 6000ms);                                 */
/*  - shown once per session, never under reduced motion, never */
/*    without JS (the boot script in <head> sets .veil-off).     */
/* Markup: _src/partials/veil.html. Orchestrator: ag-curtain.js. */
/* =========================================================== */

.ttp-veil { display: none; }
html.is-loading { overflow: hidden; }

html.js:not(.veil-off) .ttp-veil {
  /* owner 2026-09-24: emblem only, above all chrome (was z 90 under the header) */
  position: fixed; inset: 0; z-index: 2147483646; /* above the AG scrollbar rail (2147483640); only the cursor sits higher */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 21px;
  background: var(--cream, #F7F1E5); color: var(--charcoal, #2A2A2A);
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 420ms var(--ease-satisfying), transform 420ms var(--ease-satisfying), visibility 0s linear 0s;
}
/* lift: .is-loading is removed by ag-curtain.js (or by the <head> fail-safe) */
html.js:not(.veil-off):not(.is-loading) .ttp-veil {
  opacity: 0; transform: translateY(-7vh); visibility: hidden; pointer-events: none;
  transition: opacity 420ms var(--ease-satisfying), transform 420ms var(--ease-satisfying), visibility 0s linear 420ms;
}
/* everything was ready within 210ms of first paint: no arc draw, a 210ms fade so nothing flashes */
html.veil-quick.js:not(.is-loading) .ttp-veil {
  transform: none;
  transition: opacity 210ms var(--ease-soft), visibility 0s linear 210ms;
}

.ttp-veil__mark { position: relative; width: min(56vw, 231px); aspect-ratio: 770 / 576; }
.ttp-veil__teeth, .ttp-veil__arc { position: absolute; inset: 0; }
.ttp-veil__teeth svg, .ttp-veil__arc svg { display: block; width: 100%; height: 100%; max-width: none; }
.ttp-veil__teeth { color: var(--charcoal, #2A2A2A); }
/* 2026-09-24 owner: paced reveal on first visit (teeth 280ms apart, arc 630ms) */
/* owner 2026-09-24 (2): teeth start invisible and ease in one by one; >= 3s total */
.ttp-veil__teeth g {
  opacity: 0; transform: scale(0.93); transform-box: fill-box; transform-origin: center;
  transition: opacity 490ms var(--ease-settle), transform 700ms var(--ease-satisfying);
}
.ttp-veil__teeth g.is-lit { opacity: 1; transform: none; }
.ttp-veil__arc { color: var(--gold, #C9A861); }
.ttp-veil #arc-reveal use { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-settle); }
.ttp-veil.is-drawn #arc-reveal use { stroke-dashoffset: 0; }


@media (prefers-reduced-motion: reduce) { .ttp-veil { display: none !important; } html.is-loading { overflow: auto; } }