/* ───────────────────────────────────────────────────────────
   transition.css — shared page-transition (band wipe + liquid wordmark)
   Pulled from the Stevia "Please" reference: a soft horizontal-band wipe
   reveals each page on load and covers it on navigation, with a
   continuously-waving wordmark riding on top. Kept in the site palette.
   Pairs with transition.js. Include on every content page.
   ─────────────────────────────────────────────────────────── */
.pgx{position:fixed;inset:0;z-index:9000;pointer-events:none;}
.pgx-bands{position:absolute;inset:0;width:100vw;height:100vh;display:flex;flex-direction:column;}
.pgx-bands i{flex:1 0 0;display:block;width:100vw;
  background:linear-gradient(92deg,#F1EFE3 0%,#E9EFE0 60%,#E3EEDD 100%);
  transform:translateX(0);transition:transform .62s cubic-bezier(.76,0,.24,1);will-change:transform;}
.pgx-bands i:nth-child(even){background:linear-gradient(92deg,#EDF1E7 0%,#E4EEDB 100%);}

/* covering (default) → revealed: bands slide off, alternating sides */
.pgx.reveal .pgx-bands i{transform:translateX(-110vw);}
.pgx.reveal .pgx-bands i:nth-child(even){transform:translateX(110vw);}
.pgx .pgx-bands i:nth-child(1){transition-delay:0s}    .pgx .pgx-bands i:nth-child(2){transition-delay:.05s}
.pgx .pgx-bands i:nth-child(3){transition-delay:.10s}  .pgx .pgx-bands i:nth-child(4){transition-delay:.15s}
.pgx .pgx-bands i:nth-child(5){transition-delay:.20s}  .pgx .pgx-bands i:nth-child(6){transition-delay:.25s}
.pgx .pgx-bands i:nth-child(7){transition-delay:.30s}

/* liquid wordmark riding on top — waves continuously while visible */
.pgx-mark{position:absolute;inset:0;display:grid;place-items:center;opacity:1;
  transition:opacity .42s ease;}
.pgx.reveal .pgx-mark{opacity:0;}
.pgx-mark svg{width:min(86vw,920px);height:auto;overflow:visible;}
.pgx-mark text{font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:-.03em;fill:#22271E;}
.pgx-mark .dot{fill:#C8643C;}

@media (prefers-reduced-motion:reduce){
  .pgx{display:none !important;}
}