/* ─────────────────────────────────────────────────────────
   transitions.css · puzaosi
   Shared entrance + page-transition system.
   ───────────────────────────────────────────────────────── */

:root{
  --t-ease: cubic-bezier(.7,0,.15,1);
  --t-ease-out: cubic-bezier(.2,.8,.2,1);
  --t-accent: #c8ff3e;
}

/* ── PAGE CURTAIN (entry + exit between pages) ────────────── */
.pz-curtain{
  position:fixed; inset:0; z-index:9999;
  background:#0a0a0c;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  /* start covering, slide up off-screen on enter */
  transform:translateY(0);
  transition:transform .7s var(--t-ease);
}
.pz-curtain.up{ transform:translateY(-101%); }
.pz-curtain.down{ transform:translateY(0); }
.pz-curtain.pre{ transform:translateY(101%); transition:none; }

.pz-curtain .pz-c-stripes{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(8,1fr);
  pointer-events:none;
}
.pz-curtain .pz-c-stripes span{
  background:#0a0a0c;
  border-right:1px solid rgba(255,255,255,.03);
  transform:translateY(101%);
  transition:transform .85s var(--t-ease);
}
.pz-curtain.up .pz-c-stripes span{ transform:translateY(-101%); }

.pz-curtain .pz-c-mark{
  position:relative;z-index:2;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.42em;color:var(--t-accent);
  text-transform:uppercase;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--t-ease-out),transform .35s var(--t-ease-out);
}
.pz-curtain.show-mark .pz-c-mark{ opacity:1;transform:none; }
.pz-curtain .pz-c-mark::before{content:"● ";color:#fff}

/* exit state: quick fade while shuffles run */
body.pz-out{ transition:opacity .42s var(--t-ease-out), filter .42s var(--t-ease-out); opacity:.0; filter:blur(6px); }

/* brief entry veil — short black flash, then lifts so the scrambled
   text is what the user sees first (never the settled layout) */
.pz-veil{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:#0a0a0c;
  opacity:1;
  transition:opacity .5s var(--t-ease-out);
}
.pz-veil.out{ opacity:0; }

/* ── PARTICLE / LIGHT-DOT LAYER ───────────────────────────── */
.pz-particles{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;opacity:.55;
}
.pz-particles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--t-accent);
  box-shadow:0 0 12px var(--t-accent),0 0 24px rgba(200,255,62,.4);
  animation:pz-drift linear infinite;
  opacity:0;
}
.pz-particles i.alt{ background:#fff;box-shadow:0 0 8px #fff; }
@keyframes pz-drift{
  0%   { transform:translate3d(0,0,0) scale(.6); opacity:0; }
  10%  { opacity:.9; }
  90%  { opacity:.9; }
  100% { transform:translate3d(var(--dx,0),var(--dy,-120vh),0) scale(1); opacity:0; }
}

/* ── ENTRANCE PRIMITIVES (driven by .pz-in on body) ───────── */

/* shared base */
[data-anim]{ will-change:opacity,transform,filter,clip-path; }

/* blur + lift in */
[data-anim="blur"]{
  opacity:0; transform:translateY(18px) scale(.985);
  filter:blur(14px);
  transition:opacity .9s var(--t-ease-out),transform .9s var(--t-ease-out),filter .9s var(--t-ease-out);
}
.pz-in [data-anim="blur"]{ opacity:1;transform:none;filter:blur(0); }

/* 3D tilt-in (for hero logo) */
[data-anim="tilt"]{
  opacity:0;
  transform:perspective(900px) rotateX(-22deg) rotateY(14deg) translateZ(-80px) scale(.92);
  filter:blur(10px);
  transition:opacity 1.05s var(--t-ease-out),transform 1.05s var(--t-ease-out),filter .9s var(--t-ease-out);
}
.pz-in [data-anim="tilt"]{ opacity:1;transform:perspective(900px) rotateX(0) rotateY(0) translateZ(0) scale(1);filter:blur(0); }

/* clip-path wipe (cover image curtains apart) */
[data-anim="wipe"]{
  clip-path:inset(0 50% 0 50%);
  -webkit-clip-path:inset(0 50% 0 50%);
  filter:saturate(.4) brightness(.6);
  transition:clip-path 1s var(--t-ease),-webkit-clip-path 1s var(--t-ease),filter 1.1s var(--t-ease-out);
}
.pz-in [data-anim="wipe"]{ clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);filter:none; }

/* clip-path wipe vertical (top→bottom) */
[data-anim="wipe-v"]{
  clip-path:inset(0 0 100% 0);
  -webkit-clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--t-ease),-webkit-clip-path 1s var(--t-ease);
}
.pz-in [data-anim="wipe-v"]{ clip-path:inset(0);-webkit-clip-path:inset(0); }

/* fade only */
[data-anim="fade"]{ opacity:0;transition:opacity .9s var(--t-ease-out); }
.pz-in [data-anim="fade"]{ opacity:1; }

/* char-drop (JS splits chars into spans) */
.pz-char{ display:inline-block; opacity:0; transform:translateY(-1.1em) rotate(-8deg); filter:blur(6px);
  transition:opacity .55s var(--t-ease-out),transform .65s var(--t-ease-out),filter .55s var(--t-ease-out); }
.pz-in .pz-char{ opacity:1; transform:none; filter:blur(0); }
.pz-char.space{ width:.28em }

/* legacy .reveal compat — when curtain lifts, force any .reveal that also carries data-anim into its "in" state */
.pz-in [data-anim].reveal,
.pz-in [data-anim].reveal-mask{ opacity:1; transform:none; }
.pz-in [data-anim].reveal-mask > *{ transform:translateY(0); }

/* stagger delays (apply via data-d="N") */
[data-anim][data-d="1"]{ transition-delay:.05s }
[data-anim][data-d="2"]{ transition-delay:.18s }
[data-anim][data-d="3"]{ transition-delay:.32s }
[data-anim][data-d="4"]{ transition-delay:.46s }
[data-anim][data-d="5"]{ transition-delay:.6s }
[data-anim][data-d="6"]{ transition-delay:.74s }
[data-anim][data-d="7"]{ transition-delay:.88s }

/* one quick accent flash sweep on page load */
.pz-flash{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(200,255,62,.18) 50%,transparent 100%);
  transform:translateY(-100%);
  animation:pz-flash 1.1s var(--t-ease) forwards;
}
@keyframes pz-flash{
  0%{transform:translateY(-100%)}
  60%{transform:translateY(0)}
  100%{transform:translateY(100%);opacity:0}
}

/* reduced motion: collapse to fast fade */
@media (prefers-reduced-motion: reduce){
  .pz-curtain,.pz-curtain *{transition:none !important;animation:none !important;}
  [data-anim]{transition:opacity .25s linear !important;transform:none !important;filter:none !important;clip-path:none !important;-webkit-clip-path:none !important;opacity:1 !important;}
  .pz-particles{display:none}
  .pz-flash{display:none}
  .pz-char{opacity:1;transform:none;filter:none;transition:none}
}