/* ============================================================================
   Deevoted page transition — D14 "The Sealed Mark" (site-wide, robust v3).

   NO native cross-document View Transitions. A cross-doc VT makes the captured root
   NON-INTERACTIVE for the length of the transition, so a link clicked within ~0.7s of
   arriving at a page was dead — the directional "can't navigate FROM <page>" bug
   (worst on the IA hubs you click straight back out of). So every layer here is a
   pointer-events:none overlay and the page is interactive throughout:
     • CLOSE = an intercepted .dvtrans overlay (the generative diamond draw), navigating
               on the close animation's actual END (no blind timer).
     • COVER = the outgoing page stays visible during the fetch (normal navigation), and
               a before-paint html.dv-arriving::before (set by the synchronous head
               transition.js) covers the incoming first paint until the overlay seals.
     • OPEN  = the .dvtrans overlay seals over that cover then animates out.
   Coordination is one timestamped sessionStorage handoff with a generous window and no
   deferred-script dependency, so the slow-network races are gone too. The whole stack is
   pointer-events:none — it never blocks a click. NAMESPACED `.dvtrans` (the site already
   uses `.stamp`). CLS 0.
   ============================================================================ */

/* NO @view-transition. We deliberately do NOT use native cross-document View Transitions: a cross-doc VT
   makes the captured root NON-INTERACTIVE for the length of the transition, so any link clicked within
   ~0.7s of arriving at a page was dead — the directional "can't navigate FROM <page>" bug, worst on the IA
   hubs you click straight back out of (proven: a pointer-events:none overlay lets clicks through, but the
   VT capture does not). Instead the open is a pointer-events:none JS overlay driven by a sessionStorage
   handoff from a SYNCHRONOUS head script (so the page is interactive the whole time, and the original
   slow-network races are gone too — the freshness window is generous and there is no deferred-script). */

/* before-paint cover on the incoming page: the synchronous head script adds html.dv-arriving as soon as it
   sees a fresh handoff (during head parse, before first paint) so the destination never flashes; the
   .dvtrans overlay then seals over it and opens. pointer-events:none → interactive even while covered. */
html.dv-arriving::before{ content:''; position:fixed; inset:0; z-index:8999; background:var(--near-black,#323132); pointer-events:none; }

/* ── THE CLOSE overlay (outgoing, intercepted JS): amber lines draw in, charcoal shades cover, the
   Partnership diamond forms + flashes red, the brand "d" reverses white. Ends in the SEALED state, which
   the browser then snapshots. ── */
.dvtrans{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:0; --cdur:.82s; --odur:.72s; }
.dvt-shade{ position:absolute; left:0; right:0; height:50.2vh; background:var(--near-black,#323132); transform:scaleY(0); }
.dvt-shade.top{ top:0; transform-origin:top center; } .dvt-shade.bot{ bottom:0; transform-origin:bottom center; }
.dvt-line{ position:absolute; left:0; right:0; height:2px; opacity:0;
  background:linear-gradient(90deg, rgba(212,163,116,0), var(--human-amber,#D4A374) 12%, #fff, var(--human-amber,#D4A374) 88%, rgba(212,163,116,0));
  box-shadow:0 0 14px 1px rgba(212,163,116,.75); }
.dvt-line.top{ top:0; } .dvt-line.bot{ bottom:0; }
.dvt-dia{ position:absolute; left:50%; top:50%; width:172px; height:172px; transform:translate(-50%,-50%); opacity:0; overflow:visible; }
.dvt-dia .dvt-su,.dvt-dia .dvt-sd{ fill:none; stroke:var(--human-amber,#D4A374); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:130; stroke-dashoffset:130; filter:drop-shadow(0 0 5px rgba(212,163,116,.55)); }
.dvt-dia .dvt-sf{ fill:var(--brand-red,#ED202D); opacity:0; }
.dvt-din{ position:absolute; left:50%; top:50%; width:62px; height:auto; transform:translate(-50%,-50%); opacity:0; overflow:visible; }

/* the SEALED state (held while the browser fetches + swaps) = full charcoal + the completed mark */
.dvtrans.sealed{ opacity:1; }
.dvtrans.sealed .dvt-shade.top,.dvtrans.sealed .dvt-shade.bot{ transform:scaleY(1); }
.dvtrans.sealed .dvt-dia{ opacity:1; } .dvtrans.sealed .dvt-su,.dvtrans.sealed .dvt-sd{ stroke-dashoffset:0; } .dvtrans.sealed .dvt-sf{ opacity:1; }
.dvtrans.sealed .dvt-din{ opacity:1; }

/* CLOSE animation (timer/animationend-driven in JS — navigation waits for it to actually finish) */
.dvtrans.closing{ opacity:1; }
.dvtrans.closing .dvt-shade.top{ animation:dvt-shtop var(--cdur) cubic-bezier(.5,0,.18,1) both; }
.dvtrans.closing .dvt-shade.bot{ animation:dvt-shbot var(--cdur) cubic-bezier(.5,0,.18,1) both; }
@keyframes dvt-shtop{ 0%{transform:scaleY(0)} 48%{transform:scaleY(1)} 100%{transform:scaleY(1)} }
@keyframes dvt-shbot{ 0%{transform:scaleY(0)} 48%{transform:scaleY(1)} 100%{transform:scaleY(1)} }
.dvtrans.closing .dvt-line.top{ animation:dvt-lntop var(--cdur) cubic-bezier(.42,0,.2,1) both; }
.dvtrans.closing .dvt-line.bot{ animation:dvt-lnbot var(--cdur) cubic-bezier(.42,0,.2,1) both; }
@keyframes dvt-lntop{ 0%{transform:translateY(0);opacity:0} 8%{opacity:1} 42%{transform:translateY(50vh);opacity:1} 60%,100%{transform:translateY(50vh);opacity:0} }
@keyframes dvt-lnbot{ 0%{transform:translateY(0);opacity:0} 8%{opacity:1} 42%{transform:translateY(-50vh);opacity:1} 60%,100%{transform:translateY(-50vh);opacity:0} }
.dvtrans.closing .dvt-dia{ animation:dvt-diashow var(--cdur) both; }
@keyframes dvt-diashow{ 0%,40%{opacity:0} 44%{opacity:1} 100%{opacity:1} }
.dvtrans.closing .dvt-su,.dvtrans.closing .dvt-sd{ animation:dvt-diadraw var(--cdur) cubic-bezier(.4,0,.25,1) both; }
@keyframes dvt-diadraw{ 0%,42%{stroke-dashoffset:130} 70%,100%{stroke-dashoffset:0} }
.dvtrans.closing .dvt-sf{ animation:dvt-diafill var(--cdur) ease both; }
@keyframes dvt-diafill{ 0%,72%{opacity:0} 86%,100%{opacity:1} }
.dvtrans.closing .dvt-din{ animation:dvt-dinshow var(--cdur) ease both; }
@keyframes dvt-dinshow{ 0%,76%{opacity:0;transform:translate(-50%,-50%) scale(.72)} 90%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }

/* OPEN animation (incoming page, JS-driven from pagereveal — pointer-events:none so the page is
   interactive throughout): the sealed mark deconstructs, the charcoal shades retract, destination revealed. */
.dvtrans.opening{ opacity:1; }
.dvtrans.opening .dvt-shade.top{ animation:dvt-shtop-open var(--odur) cubic-bezier(.5,0,.2,1) both; }
.dvtrans.opening .dvt-shade.bot{ animation:dvt-shbot-open var(--odur) cubic-bezier(.5,0,.2,1) both; }
@keyframes dvt-shtop-open{ 0%,34%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
@keyframes dvt-shbot-open{ 0%,34%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
.dvtrans.opening .dvt-line.top{ animation:dvt-lntop-open var(--odur) ease both; }
.dvtrans.opening .dvt-line.bot{ animation:dvt-lnbot-open var(--odur) ease both; }
@keyframes dvt-lntop-open{ 0%{transform:translateY(50vh);opacity:0} 24%{opacity:.75} 100%{transform:translateY(0);opacity:0} }
@keyframes dvt-lnbot-open{ 0%{transform:translateY(-50vh);opacity:0} 24%{opacity:.75} 100%{transform:translateY(0);opacity:0} }
.dvtrans.opening .dvt-dia{ animation:dvt-diashow-open var(--odur) ease both; }
@keyframes dvt-diashow-open{ 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)} }
.dvtrans.opening .dvt-sf{ animation:dvt-diafill-open var(--odur) ease both; }
@keyframes dvt-diafill-open{ 0%{opacity:1} 18%,100%{opacity:0} }
.dvtrans.opening .dvt-su,.dvtrans.opening .dvt-sd{ animation:dvt-diadraw-open var(--odur) cubic-bezier(.5,0,.3,1) both; }
@keyframes dvt-diadraw-open{ 0%,14%{stroke-dashoffset:0} 60%,100%{stroke-dashoffset:130} }
.dvtrans.opening .dvt-din{ animation:dvt-dinshow-open var(--odur) ease both; }
@keyframes dvt-dinshow-open{ 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)} }

/* ===== two-mode: reduced-motion = instant cut (no close overlay, no cover, no open) ===== */
@media (prefers-reduced-motion: reduce){
  .dvtrans{ display:none; }
  html.dv-arriving::before{ display:none; }
}