/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TRANSITION — the cover

   Loaded as a render-blocking stylesheet from <head>, NOT inlined. Every page
   in netlify.toml overrides the permissive /* rule with its own
   script-src 'self' and no 'unsafe-inline', so an inline <script> bootstrap
   silently never runs. style-src does keep 'unsafe-inline', but an external
   sheet is one file instead of eight copies and fails safer: if this 404s the
   cover simply never appears and you are back to today's behaviour, rather
   than stuck behind a black screen.

   Nothing here needs JavaScript to APPEAR. #pt is opaque black from the
   browser's first paint. page-transition.js only ever takes it away.

   z-index is above 100001, the current ceiling in the app (wallet.js modals).
   ═══════════════════════════════════════════════════════════════════════════ */

#pt{
  position:fixed;
  inset:0;
  z-index:2000000;
  background:#000;
  /* FAILSAFE — this is the whole reason the cover is CSS and not JS.
     If page-transition.js 404s, is blocked, or throws, nothing would ever
     remove the overlay and the page would be black forever. This uncovers
     at 6s with or without JS. In the normal path the script removes #pt
     from the DOM long before this fires. */
  animation:ptFail 0s linear 6s forwards;
}
@keyframes ptFail{ to{ opacity:0; visibility:hidden; } }

/* ── the reveal grid ────────────────────────────────────────────────────── */
/* Built by JS at reveal time and handed the screen in the same style recalc
   that clears #pt's own background, so there is never a frame where neither
   is covering and the half-painted page flashes through. */
#pt .pt-grid{ position:absolute; inset:0; display:grid; align-content:start; justify-content:start; }
#pt .pt-grid i{ display:block; background:#000; opacity:1; transform:scale(1); }

#pt.pt-open{ background:transparent; }
#pt.pt-open .pt-grid i{
  animation:ptCell .30s cubic-bezier(.5,0,.7,0) forwards;
  animation-delay:var(--d);
}
#pt.pt-open .pt-grid i.h{
  animation:ptCell .30s cubic-bezier(.5,0,.7,0) forwards,
            ptHue  .30s ease-out forwards;
  animation-delay:var(--d),var(--d);
}
@keyframes ptCell{ to{ opacity:0; transform:scale(.34); } }
@keyframes ptHue{ 0%{background:#000} 34%{background:var(--h)} 100%{background:var(--h)} }

/* ── the mark, from the first frame ─────────────────────────────────────── */
/* Same nine-block geometry and colours as the burger in wallet.js. Those two
   hexes are sampled from the mark PNG, not the app's --green / --org; a shade
   apart at a distance reads as a mistake.

   The mark is visible the whole time the cover is, at the blocks' own resting
   alpha. It used to be hidden until the 400ms threshold, which meant every
   navigation opened on four hundred milliseconds of nothing — an empty black
   screen, then a ring that had barely arrived before the page did.

   What the threshold gates now is only the LIGHT. Under 400ms you get a still
   mark and then the page, which is a brand beat rather than dead time; over it
   the head starts travelling and the mark becomes a spinner. Nothing appears,
   so nothing can flash: the difference between fast and slow is whether the
   thing already on screen starts moving. */
#pt .pt-ring{
  position:absolute; left:50%; top:50%;
  width:132px; height:132px; margin:-66px 0 0 -66px;
  opacity:1; transition:opacity .16s ease;
}
@media(max-width:600px){
  #pt .pt-ring{ width:104px; height:104px; margin:-52px 0 0 -52px; }
}
#pt .pt-ring rect{ fill:#f0f0f0; opacity:.18; }
#pt .pt-ring rect.g{ fill:#7ED956; }
#pt .pt-ring rect.o{ fill:#FF7A01; }

/* The mark goes as the blocks open — a .16s fade against a reveal that runs
   260ms of stagger plus 300ms of cell. It must not still be sitting over the
   page once the cover has gone. */
#pt.pt-open .pt-ring{ opacity:0; }
/* Nothing moves and nothing scales — only the light does. Every block stays
   exactly where the icon puts it and keeps its own fill, so the head takes the
   colour of wherever it is rather than any colour being animated. The old
   version scaled each block to .8 as it dimmed, which is the discarded-blocks
   move the menu icon no longer makes. */
#pt.pt-wait .pt-ring rect{ animation:ptRing 2s linear infinite; animation-delay:var(--d); }
#pt.pt-wait .pt-ring rect.core{ animation:none; }
/* The fall is 480ms against a 250ms beat, so two blocks are always still
   dimming behind the head. That overlap is the tail; without it the head reads
   as a blink moving position rather than as something travelling. */
@keyframes ptRing{ 0%{ opacity:1; } 24%{ opacity:.18; } 100%{ opacity:.18; } }

/* ── the wallet gate must not animate underneath the cover ──────────────── */
/* #walletGate fades in over 0.5s (wallet.js). The cover sits above it, so that
   fade is invisible while covered and then starts playing at the exact moment
   the cover lifts — which reads as the page flickering. While pt-covering is
   set the gate simply is where it is; the cover is the transition. */
html.pt-covering #walletGate{ transition:none !important; }

/* ── outbound cover ─────────────────────────────────────────────────────── */
/* A separate element, not #pt — #pt carries the failsafe animation on the
   same properties and the two would fight. Capped at ~140ms in JS: anything
   longer is dead time added before the navigation even starts. */
.pt-exit{
  position:fixed; inset:0; z-index:2000000; background:#000;
  opacity:0; animation:ptExitIn .14s linear forwards;
}
@keyframes ptExitIn{ to{ opacity:1; } }

@media(prefers-reduced-motion:reduce){
  #pt .pt-grid i,
  #pt.pt-open .pt-grid i,
  #pt.pt-open .pt-grid i.h,
  #pt.pt-wait .pt-ring rect,
  .pt-exit{ animation:none !important; }
  .pt-exit{ opacity:1; }
}
