/* pg-animations.css */

.pg-anim {
  --pg-duration: 0.6s;
  --pg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  overflow: hidden;
  border-radius: 6px;
}

.pg-anim__page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
}

.pg-anim__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pg-anim__overlay {
  position: absolute;
  inset: 0;
  background: var(--accent);
  pointer-events: none;
}

/* --- Fade --- */
.pg-anim-fade .pg-anim__overlay {
  animation: pg-fade 1.8s var(--pg-ease) both;
}

@keyframes pg-fade {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Slide Left --- */
.pg-anim-slide-left .pg-anim__overlay {
  animation: pg-slide-left 1.8s var(--pg-ease) both;
}

@keyframes pg-slide-left {
  0%   { transform: translateX(100%); }
  30%  { transform: translateX(0%); }
  70%  { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* --- Slide Up --- */
.pg-anim-slide-up .pg-anim__overlay {
  animation: pg-slide-up 1.8s var(--pg-ease) both;
}

@keyframes pg-slide-up {
  0%   { transform: translateY(100%); }
  30%  { transform: translateY(0%); }
  70%  { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}

/* --- Scale Fade --- */
.pg-anim-scale-fade .pg-anim__overlay {
  animation: pg-scale-fade 1.8s var(--pg-ease) both;
}

@keyframes pg-scale-fade {
  0%   { opacity: 0; transform: scale(1.05); }
  25%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* --- Wipe Right --- */
.pg-anim-wipe-right .pg-anim__overlay {
  animation: pg-wipe-right 1.8s var(--pg-ease) both;
}

@keyframes pg-wipe-right {
  0%   { clip-path: inset(0 0 0 100%); }
  30%  { clip-path: inset(0 0 0 0%); }
  70%  { clip-path: inset(0 0 0 0%); }
  100% { clip-path: inset(0 100% 0 0%); }
}

/* --- Curtain --- */
.pg-anim-curtain .pg-anim__overlay {
  animation: pg-curtain 1.8s var(--pg-ease) both;
  transform-origin: top center;
}

@keyframes pg-curtain {
  0%   { transform: scaleY(0); transform-origin: top center; }
  30%  { transform: scaleY(1); transform-origin: top center; }
  70%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

/* --- Circle Expand --- */
.pg-anim-circle-expand .pg-anim__overlay {
  animation: pg-circle-expand 1.8s var(--pg-ease) both;
}

@keyframes pg-circle-expand {
  0%   { clip-path: circle(0% at 50% 50%); }
  35%  { clip-path: circle(150% at 50% 50%); }
  65%  { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

/* --- Blur Zoom --- */
.pg-anim-blur-zoom .pg-anim__overlay {
  animation: pg-blur-zoom 1.8s var(--pg-ease) both;
}

@keyframes pg-blur-zoom {
  0%   { opacity: 0; filter: blur(8px); transform: scale(1.1); }
  25%  { opacity: 1; filter: blur(0px); transform: scale(1); }
  75%  { opacity: 1; filter: blur(0px); transform: scale(1); }
  100% { opacity: 0; filter: blur(8px); transform: scale(0.9); }
}

/* --- Flip Page --- */
.pg-anim-flip-page .pg-anim__overlay {
  animation: pg-flip-page 1.8s var(--pg-ease) both;
  backface-visibility: hidden;
}

@keyframes pg-flip-page {
  0%   { transform: perspective(800px) rotateY(90deg); opacity: 0; }
  30%  { transform: perspective(800px) rotateY(0deg); opacity: 1; }
  70%  { transform: perspective(800px) rotateY(0deg); opacity: 1; }
  100% { transform: perspective(800px) rotateY(-90deg); opacity: 0; }
}

/* --- Diagonal Wipe --- */
.pg-anim-diagonal-wipe .pg-anim__overlay {
  animation: pg-diagonal-wipe 1.8s var(--pg-ease) both;
}

@keyframes pg-diagonal-wipe {
  0%   { clip-path: polygon(0% 100%, 0% 100%, 0% 100%); }
  30%  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  70%  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(100% 0%, 100% 0%, 100% 100%); }
}

/* --- Slide Right --- */
.pg-anim-slide-right .pg-anim__overlay {
  animation: pg-slide-right 1.8s var(--pg-ease) both;
}

@keyframes pg-slide-right {
  0%   { transform: translateX(100%); }
  30%  { transform: translateX(0%); }
  70%  { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* --- Zoom Out --- */
.pg-anim-zoom-out .pg-anim__overlay {
  animation: pg-zoom-out 2s var(--pg-ease) both;
}

@keyframes pg-zoom-out {
  0%   { opacity: 0; transform: scale(1.5); }
  20%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* --- Blinds --- */
.pg-anim-blinds .pg-anim__overlay {
  background: repeating-linear-gradient(
    to bottom,
    var(--accent) 0px,
    var(--accent) 12px,
    transparent 12px,
    transparent 24px
  );
  animation: pg-blinds 2s ease both;
}

@keyframes pg-blinds {
  0%   { clip-path: inset(0 0 100% 0); }
  35%  { clip-path: inset(0 0 0% 0); }
  65%  { clip-path: inset(0 0 0% 0); }
  100% { clip-path: inset(100% 0 0% 0); }
}

/* --- Flash --- */
.pg-anim-flash .pg-anim__overlay {
  background: var(--text);
  animation: pg-flash 1.5s ease both;
}

@keyframes pg-flash {
  0%   { opacity: 0; }
  15%  { opacity: 0.9; }
  40%  { opacity: 0.3; }
  60%  { opacity: 0.7; }
  80%  { opacity: 0.1; }
  100% { opacity: 0; }
}

/* --- Shutter Vertical --- */
.pg-anim-shutter-v .pg-anim__overlay {
  background: repeating-linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) calc(100% / 6 - 1px),
    transparent calc(100% / 6 - 1px),
    transparent calc(100% / 6)
  );
  animation: pg-shutter-v 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes pg-shutter-v {
  0%   { clip-path: inset(0 0 100% 0); }
  35%  { clip-path: inset(0 0 0% 0); }
  65%  { clip-path: inset(0 0 0% 0); }
  100% { clip-path: inset(100% 0 0% 0); }
}

/* --- Ink Spread --- */
.pg-anim-ink-spread .pg-anim__overlay {
  background: radial-gradient(circle at 0% 0%, var(--accent) 0%, var(--accent) 70%, transparent 70%);
  background-size: 200% 200%;
  animation: pg-ink-spread 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pg-ink-spread {
  0%   { clip-path: circle(0% at 0% 0%); opacity: 1; }
  40%  { clip-path: circle(150% at 0% 0%); opacity: 1; }
  70%  { clip-path: circle(150% at 0% 0%); opacity: 1; }
  100% { clip-path: circle(0% at 100% 100%); opacity: 0; }
}

/* --- Pixel Fade --- */
.pg-anim-pixel-fade .pg-anim__overlay {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      rgba(0,0,0,0.08) 7px,
      rgba(0,0,0,0.08) 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 7px,
      rgba(0,0,0,0.08) 7px,
      rgba(0,0,0,0.08) 8px
    );
  animation: pg-pixel-fade 2s steps(8, end) both;
}

@keyframes pg-pixel-fade {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; transform: scale(1.02); }
  50%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1); }
}

/* --- Swipe Up & Down --- */
.pg-anim-swipe-up-down .pg-anim__overlay {
  background: transparent;
  pointer-events: none;
}
.pg-anim-swipe-up-down .pg-anim__overlay::before,
.pg-anim-swipe-up-down .pg-anim__overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--accent);
}
.pg-anim-swipe-up-down .pg-anim__overlay::before {
  top: 0;
  animation: pg-swipe-top 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pg-anim-swipe-up-down .pg-anim__overlay::after {
  bottom: 0;
  animation: pg-swipe-bottom 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pg-swipe-top {
  0%   { transform: translateY(-100%); }
  30%  { transform: translateY(0%); }
  70%  { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}
@keyframes pg-swipe-bottom {
  0%   { transform: translateY(100%); }
  30%  { transform: translateY(0%); }
  70%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* --- Elastic Curtain --- */
.pg-anim-elastic-curtain .pg-anim__overlay {
  animation: pg-elastic-curtain 2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pg-elastic-curtain {
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(0%); }
  65%  { transform: translateX(0%); }
  100% { transform: translateX(105%); }
}

/* --- Liquid Edge --- */
.pg-anim-liquid-edge .pg-anim__overlay {
  background: var(--accent);
  clip-path: polygon(0 0, 85% 0, 100% 15%, 92% 40%, 100% 65%, 88% 80%, 100% 100%, 0 100%);
  animation: pg-liquid-edge 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes pg-liquid-edge {
  0%   { transform: translateX(-110%); }
  40%  { transform: translateX(0%); }
  60%  { transform: translateX(0%); }
  100% { transform: translateX(110%); }
}

/* --- Split Horizontal --- */
.pg-anim-split-h .pg-anim__overlay {
  background: transparent;
  pointer-events: none;
}
.pg-anim-split-h .pg-anim__overlay::before,
.pg-anim-split-h .pg-anim__overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--accent);
}
.pg-anim-split-h .pg-anim__overlay::before {
  top: 0;
  animation: pg-split-h-top 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pg-anim-split-h .pg-anim__overlay::after {
  bottom: 0;
  animation: pg-split-h-bottom 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes pg-split-h-top {
  0%   { transform: translateY(-100%); }
  35%  { transform: translateY(0%); }
  65%  { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}
@keyframes pg-split-h-bottom {
  0%   { transform: translateY(100%); }
  35%  { transform: translateY(0%); }
  65%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* --- Color Wash --- */
.pg-anim-color-wash .pg-anim__overlay {
  background: radial-gradient(ellipse 200% 200% at -10% 50%, var(--accent) 0%, var(--accent) 50%, transparent 51%);
  background-size: 200% 100%;
  animation: pg-color-wash 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes pg-color-wash {
  0%   { background-position: -100% 50%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { background-position: 0% 50%; opacity: 1; }
  60%  { background-position: 0% 50%; opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: 200% 50%; opacity: 0; }
}

/* --- Typewriter Overlay --- */
.pg-anim-typewriter-overlay .pg-anim__overlay {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pg-typewriter-overlay 2s linear both;
}
.pg-anim-typewriter-overlay .pg-anim__overlay::after {
  content: '';
  font-family: monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--accent);
  animation: pg-typewriter-text 1s steps(10, end) 0.2s both,
             pg-typewriter-caret 0.6s step-end 0.2s 2;
}

@keyframes pg-typewriter-overlay {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pg-typewriter-text {
  0%  { content: '|'; width: 0; }
  10% { content: 'L|'; }
  20% { content: 'Lo|'; }
  30% { content: 'Loa|'; }
  40% { content: 'Load|'; }
  50% { content: 'Loadi|'; }
  60% { content: 'Loadin|'; }
  70% { content: 'Loading|'; }
  80% { content: 'Loading.|'; }
  90% { content: 'Loading..|'; }
  100%{ content: 'Loading...'; }
}
@keyframes pg-typewriter-caret {
  from { border-color: var(--accent); }
  50%  { border-color: transparent; }
  to   { border-color: var(--accent); }
}

/* --- Fold 3D --- */
.pg-anim-fold-3d {
  perspective: 1200px;
}
.pg-anim-fold-3d .pg-anim__page {
  transform-origin: top center;
  animation: pg-fold-3d-page 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pg-anim-fold-3d .pg-anim__overlay {
  display: none;
}

@keyframes pg-fold-3d-page {
  0%   { transform: perspective(1200px) rotateX(0deg); opacity: 1; }
  30%  { transform: perspective(1200px) rotateX(-90deg); opacity: 0.3; }
  50%  { transform: perspective(1200px) rotateX(-90deg); opacity: 0.3; }
  80%  { transform: perspective(1200px) rotateX(0deg); opacity: 1; }
  100% { transform: perspective(1200px) rotateX(0deg); opacity: 1; }
}

/* --- Grid Wipe --- */
.pg-anim-grid-wipe .pg-anim__overlay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: transparent;
  overflow: hidden;
}
.pg-anim-grid-wipe .pg-anim__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    var(--accent) 0%, var(--accent) 33.33%,
    transparent 33.33%, transparent 66.66%,
    var(--accent) 66.66%, var(--accent) 100%
  ),
  repeating-linear-gradient(
    90deg,
    var(--accent) 0%, var(--accent) 33.33%,
    transparent 33.33%, transparent 66.66%,
    var(--accent) 66.66%, var(--accent) 100%
  );
  background-blend-mode: multiply;
  clip-path: inset(100% 0 0 0);
  animation: pg-grid-wipe 1.4s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes pg-grid-wipe {
  0%   { clip-path: inset(100% 0 0 0); opacity: 1; }
  45%  { clip-path: inset(0% 0 0 0); opacity: 1; }
  55%  { clip-path: inset(0% 0 0 0); opacity: 1; }
  100% { clip-path: inset(0% 0 100% 0); opacity: 1; }
}

/* --- Venetian Horizontal --- */
.pg-anim-venetian-h .pg-anim__overlay {
  background: repeating-linear-gradient(
    180deg,
    var(--accent) 0px, var(--accent) 16px,
    transparent 16px, transparent 32px
  );
  clip-path: inset(0 100% 0 0);
  animation: pg-venetian-h 1.6s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes pg-venetian-h {
  0%   { clip-path: inset(0 100% 0 0); }
  40%  { clip-path: inset(0 0% 0 0); }
  60%  { clip-path: inset(0 0% 0 0); }
  100% { clip-path: inset(0 0% 0 100%); }
}

/* --- Slash Wipe --- */
.pg-anim-slash-wipe .pg-anim__overlay {
  clip-path: polygon(0% 0%, 0% 0%, -15% 100%, -15% 100%);
  animation: pg-slash-wipe 1.4s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes pg-slash-wipe {
  0%   { clip-path: polygon(0% 0%, 0% 0%, -15% 100%, -15% 100%); }
  40%  { clip-path: polygon(0% 0%, 115% 0%, 100% 100%, -15% 100%); }
  60%  { clip-path: polygon(0% 0%, 115% 0%, 100% 100%, -15% 100%); }
  100% { clip-path: polygon(115% 0%, 115% 0%, 100% 100%, 100% 100%); }
}

/* --- Zoom Blur Out --- */
.pg-anim-zoom-blur-out .pg-anim__page {
  animation: pg-zoom-blur-page 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pg-anim-zoom-blur-out .pg-anim__overlay {
  animation: pg-zoom-blur-overlay 2s cubic-bezier(0.76, 0, 0.24, 1) both;
}
@keyframes pg-zoom-blur-page {
  0%   { transform: scale(1); filter: blur(0px); }
  30%  { transform: scale(1.15); filter: blur(8px); }
  70%  { transform: scale(0.9); filter: blur(8px); }
  100% { transform: scale(1); filter: blur(0px); }
}
@keyframes pg-zoom-blur-overlay {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Morph Circle Wipe --- */
.pg-anim-morph-circle-wipe .pg-anim__overlay {
  border-radius: 50%;
  transform: scale(0);
  animation: pg-morph-circle 1.8s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes pg-morph-circle {
  0%   { transform: scale(0); border-radius: 50%; opacity: 1; }
  40%  { transform: scale(2); border-radius: 20%; opacity: 1; }
  60%  { transform: scale(2); border-radius: 0%; opacity: 1; }
  100% { transform: scale(0); border-radius: 0%; opacity: 0; }
}

/* --- Door Open --- */
.pg-anim-door-open {
  perspective: 1200px;
}
.pg-anim-door-open .pg-anim__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pg-anim-door-open .pg-anim__overlay::before,
.pg-anim-door-open .pg-anim__overlay::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--accent);
  backface-visibility: hidden;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
  animation-fill-mode: both;
}
.pg-anim-door-open .pg-anim__overlay::before {
  left: 0;
  transform-origin: left center;
  animation-name: pg-door-left;
}
.pg-anim-door-open .pg-anim__overlay::after {
  right: 0;
  transform-origin: right center;
  animation-name: pg-door-right;
}
@keyframes pg-door-left {
  0%   { transform: rotateY(0deg); opacity: 1; }
  45%  { transform: rotateY(0deg); opacity: 1; }
  100% { transform: rotateY(-90deg); opacity: 0; }
}
@keyframes pg-door-right {
  0%   { transform: rotateY(0deg); opacity: 1; }
  45%  { transform: rotateY(0deg); opacity: 1; }
  100% { transform: rotateY(90deg); opacity: 0; }
}

/* --- Film Grain --- */
.pg-anim-film-grain .pg-anim__overlay {
  background: var(--accent);
  opacity: 0;
  animation: pg-film-grain-fade 1.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pg-anim-film-grain .pg-anim__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.04) 2px,
      rgba(0,0,0,0.04) 4px
    );
  animation: pg-grain-shift 0.08s steps(1) infinite;
}
@keyframes pg-film-grain-fade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pg-grain-shift {
  0%   { background-position: 0 0, 0 0; }
  25%  { background-position: 3px 1px, -2px 3px; }
  50%  { background-position: -1px 4px, 4px -1px; }
  75%  { background-position: 2px -3px, -3px 2px; }
  100% { background-position: -4px 2px, 1px -4px; }
}

/* --- Crossfade --- */
.pg-anim-crossfade .pg-anim__page {
  animation: pg-crossfade-page 1.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pg-anim-crossfade .pg-anim__overlay {
  animation: pg-crossfade-overlay 1.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}
@keyframes pg-crossfade-page {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  75%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pg-crossfade-overlay {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Wipe Arc --- */
.pg-anim-wipe-arc .pg-anim__overlay {
  clip-path: ellipse(0% 0% at 50% 0%);
  animation: pg-wipe-arc 1.5s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes pg-wipe-arc {
  0%   { clip-path: ellipse(0% 0% at 50% 0%); }
  40%  { clip-path: ellipse(120% 120% at 50% 0%); }
  60%  { clip-path: ellipse(120% 120% at 50% 0%); }
  100% { clip-path: ellipse(0% 0% at 50% 200%); }
}

/* --- Split Diagonal --- */
.pg-anim-split-diagonal .pg-anim__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pg-anim-split-diagonal .pg-anim__overlay::before,
.pg-anim-split-diagonal .pg-anim__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
  animation-fill-mode: both;
}
.pg-anim-split-diagonal .pg-anim__overlay::before {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  animation-name: pg-diag-top;
}
.pg-anim-split-diagonal .pg-anim__overlay::after {
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
  animation-name: pg-diag-bottom;
}
@keyframes pg-diag-top {
  0%   { transform: translate(0, 0); opacity: 1; }
  45%  { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(-105%, -105%); opacity: 1; }
}
@keyframes pg-diag-bottom {
  0%   { transform: translate(0, 0); opacity: 1; }
  45%  { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(105%, 105%); opacity: 1; }
}

/* --- noise-burst --- */
.pg-anim-noise-burst .pg-anim__overlay {
  animation: pg-noise-burst 0.6s steps(1) both;
}
@keyframes pg-noise-burst {
  0%   { opacity: 0; }
  10%  { opacity: 1; filter: contrast(20) blur(0); background: var(--accent); clip-path: inset(30% 20% 30% 20%); }
  25%  { clip-path: inset(10% 0 10% 0); filter: hue-rotate(90deg); }
  40%  { clip-path: inset(50% 0 0 0); filter: hue-rotate(180deg); }
  55%  { clip-path: inset(0 50% 0 0); }
  70%  { clip-path: inset(0); }
  100% { opacity: 0; clip-path: inset(0); }
}

/* --- color-bleed --- */
.pg-anim-color-bleed .pg-anim__overlay--a {
  background: var(--accent);
  animation: pg-bleed-a 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.pg-anim-color-bleed .pg-anim__overlay--b {
  background: #ec4899;
  animation: pg-bleed-b 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes pg-bleed-a {
  from { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  to   { transform: scaleX(0); transform-origin: right; }
}
@keyframes pg-bleed-b {
  from { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(1); transform-origin: right; }
  51%  { transform: scaleX(1); transform-origin: left; }
  to   { transform: scaleX(0); transform-origin: left; }
}

/* --- stripe-wipe --- */
.pg-anim-stripe-wipe .pg-anim__stripe {
  position: absolute;
  top: 0; bottom: 0;
  width: 25%;
  background: var(--accent);
  left: calc((var(--si) - 1) * 25%);
  animation: pg-stripe 0.6s cubic-bezier(0.22,1,0.36,1) calc((var(--si) - 1) * 0.07s) both;
}
@keyframes pg-stripe {
  from { transform: scaleY(0); transform-origin: bottom; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  51%  { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* --- radial-wipe --- */
.pg-anim-radial-wipe .pg-anim__overlay {
  background: var(--accent);
  animation: pg-radial-wipe 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes pg-radial-wipe {
  from { clip-path: circle(0% at 50% 50%); opacity: 1; }
  50%  { clip-path: circle(120% at 50% 50%); opacity: 1; }
  100% { clip-path: circle(120% at 50% 50%); opacity: 0; }
}

/* --- vhs-glitch --- */
.pg-anim-vhs-glitch .pg-anim__page {
  animation: pg-vhs-page 0.7s steps(1) both;
}
.pg-anim-vhs-glitch .pg-anim__overlay {
  background: linear-gradient(180deg, rgba(255,255,0,0.4) 0%, transparent 50%, rgba(0,255,255,0.4) 100%);
  animation: pg-vhs-overlay 0.7s steps(1) both;
}
@keyframes pg-vhs-page {
  0%   { filter: none; }
  10%  { filter: hue-rotate(90deg) saturate(3); clip-path: inset(5% 0 80% 0); transform: translateX(5px); }
  20%  { filter: hue-rotate(180deg); clip-path: inset(60% 0 5% 0); transform: translateX(-5px); }
  35%  { filter: hue-rotate(270deg); clip-path: inset(30% 0 40% 0); }
  50%  { clip-path: none; filter: none; transform: none; }
  100% { filter: none; }
}
@keyframes pg-vhs-overlay {
  0%,60%,100% { opacity: 0; }
  10%,50%     { opacity: 1; }
}

/* --- mosaic --- */
.pg-anim-mosaic .pg-anim__tile {
  position: absolute;
  width: 33.33%;
  height: 50%;
  background: var(--accent);
  animation: pg-mosaic-tile 0.6s cubic-bezier(0.22,1,0.36,1) calc((var(--ti) - 1) * 0.08s) both;
}
.pg-anim-mosaic .pg-anim__tile:nth-child(2) { left: 0;      top: 0; }
.pg-anim-mosaic .pg-anim__tile:nth-child(3) { left: 33.33%; top: 0; }
.pg-anim-mosaic .pg-anim__tile:nth-child(4) { left: 66.66%; top: 0; }
.pg-anim-mosaic .pg-anim__tile:nth-child(5) { left: 0;      top: 50%; }
.pg-anim-mosaic .pg-anim__tile:nth-child(6) { left: 33.33%; top: 50%; }
.pg-anim-mosaic .pg-anim__tile:nth-child(7) { left: 66.66%; top: 50%; }
@keyframes pg-mosaic-tile {
  from { transform: scale(0); opacity: 0; border-radius: 50%; }
  50%  { transform: scale(1.05); opacity: 1; border-radius: 0; }
  to   { transform: scale(0); opacity: 0; border-radius: 0; }
}

/* --- liquid-flow --- */
.pg-anim-liquid-flow .pg-anim__overlay {
  background: var(--accent);
  animation: pg-liquid-flow 0.8s cubic-bezier(0.22,1,0.36,1) both;
  border-radius: 0;
}
@keyframes pg-liquid-flow {
  0%   { transform: scaleX(0) skewY(0deg); transform-origin: left; border-radius: 0 50% 50% 0; }
  40%  { transform: scaleX(1) skewY(-3deg); transform-origin: left; border-radius: 0 10% 10% 0; }
  41%  { transform-origin: right; }
  80%  { transform: scaleX(1) skewY(3deg); border-radius: 10% 0 0 10%; }
  100% { transform: scaleX(0) skewY(0deg); transform-origin: right; border-radius: 50% 0 0 50%; }
}

/* --- film-strip --- */
.pg-anim-film-strip .pg-anim__page {
  animation: pg-film-strip 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.pg-anim-film-strip .pg-anim__overlay {
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 20px,
    rgba(0,0,0,0.8) 20px, rgba(0,0,0,0.8) 24px
  );
  animation: pg-film-scan 0.7s linear both;
}
@keyframes pg-film-strip {
  from { transform: translateY(-30px); filter: brightness(0.3) sepia(1); }
  to   { transform: none; filter: none; }
}
@keyframes pg-film-scan {
  from { transform: translateX(-100%); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* --- smoke-dissolve --- */
.pg-anim-smoke-dissolve .pg-anim__page {
  animation: pg-smoke-out 0.8s ease both;
}
.pg-anim-smoke-dissolve .pg-anim__overlay {
  background: radial-gradient(ellipse at 50% 80%, rgba(200,200,220,0.6) 0%, transparent 70%);
  animation: pg-smoke-rise 0.8s ease both;
}
@keyframes pg-smoke-out {
  from { opacity: 0; filter: blur(10px); transform: scale(1.05) translateY(10px); }
  to   { opacity: 1; filter: none; transform: none; }
}
@keyframes pg-smoke-rise {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-40%) scale(1.4); filter: blur(20px); }
}

/* --- mosaic-tiles --- */
.pg-anim-mosaic-tiles .pg-anim__page {
  animation: pg-mosaic-tiles-page 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
.pg-anim-mosaic-tiles .pg-anim__tile {
  position: absolute;
  width: 25%;
  height: 33.33%;
  background: var(--accent);
  animation: pg-mosaic-tile-flip 0.5s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: calc((var(--tc) + var(--tr) * 4) * 0.06s);
  backface-visibility: hidden;
}
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(2)  { --tc:0; --tr:0; left:0;   top:0; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(3)  { --tc:1; --tr:0; left:25%; top:0; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(4)  { --tc:2; --tr:0; left:50%; top:0; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(5)  { --tc:3; --tr:0; left:75%; top:0; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(6)  { --tc:0; --tr:1; left:0;   top:33.33%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(7)  { --tc:1; --tr:1; left:25%; top:33.33%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(8)  { --tc:2; --tr:1; left:50%; top:33.33%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(9)  { --tc:3; --tr:1; left:75%; top:33.33%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(10) { --tc:0; --tr:2; left:0;   top:66.66%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(11) { --tc:1; --tr:2; left:25%; top:66.66%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(12) { --tc:2; --tr:2; left:50%; top:66.66%; }
.pg-anim-mosaic-tiles .pg-anim__tile:nth-child(13) { --tc:3; --tr:2; left:75%; top:66.66%; }
@keyframes pg-mosaic-tiles-page {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pg-mosaic-tile-flip {
  0%   { transform: scaleY(1); opacity: 1; }
  50%  { transform: scaleY(0); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* --- squeeze-reveal --- */
.pg-anim-squeeze-reveal .pg-anim__page {
  animation: pg-squeeze-in 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  transform-origin: center;
}
@keyframes pg-squeeze-in {
  0%   { transform: scaleX(0); opacity: 0; }
  60%  { transform: scaleX(1.04); opacity: 1; }
  80%  { transform: scaleX(0.98); }
  100% { transform: scaleX(1); opacity: 1; }
}

/* --- noise-dissolve --- */
.pg-anim-noise-dissolve .pg-anim__page {
  animation: pg-noise-dissolve-in 0.9s ease both;
}
.pg-anim-noise-dissolve .pg-anim__overlay {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") center/cover;
  mix-blend-mode: multiply;
  animation: pg-noise-overlay 0.9s ease both;
}
@keyframes pg-noise-dissolve-in {
  0%   { opacity: 0; filter: contrast(3) brightness(0.4); }
  50%  { opacity: 0.6; filter: contrast(2) brightness(0.7); }
  100% { opacity: 1; filter: none; }
}
@keyframes pg-noise-overlay {
  0%   { opacity: 1; transform: scale(1.05); }
  70%  { opacity: 0.3; }
  100% { opacity: 0; transform: scale(1); }
}

/* --- split-triple --- */
.pg-anim-split-triple .pg-anim__page {
  animation: pg-split-triple-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.pg-anim-split-triple .pg-anim__panel {
  position: absolute;
  left: 0; width: 100%;
  background: var(--accent);
  animation: pg-split-triple-out 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.pg-anim-split-triple .pg-anim__panel--top    { top: 0;      height: 33.33%; animation-name: pg-panel-top; }
.pg-anim-split-triple .pg-anim__panel--middle { top: 33.33%; height: 33.33%; animation-name: pg-panel-mid; }
.pg-anim-split-triple .pg-anim__panel--bottom { top: 66.66%; height: 33.34%; animation-name: pg-panel-bot; }
@keyframes pg-split-triple-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pg-panel-top {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
@keyframes pg-panel-mid {
  0%   { opacity: 1; transform: scaleY(1); }
  60%  { opacity: 0.5; transform: scaleY(0.5); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes pg-panel-bot {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ============================================================
   cube-rotate
   ============================================================ */
.pg-anim-cube-rotate {
  perspective: 800px;
  overflow: visible;
}
.pg-anim-cube-rotate .pg-anim__page {
  transform-style: preserve-3d;
  animation: pg-cube-rotate 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes pg-cube-rotate {
  from {
    transform: translateX(100%) rotateY(-90deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
  }
}

/* ============================================================
   color-block-sweep
   ============================================================ */
.pg-anim-color-block-sweep {
  overflow: hidden;
}
/* .pg-anim-color-block-sweep .pg-anim__page uses base position: absolute; inset: 0 */
.pg-anim-color-block-sweep .pg-anim__page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, #6366f1);
  transform-origin: left center;
  animation: pg-block-sweep 0.7s cubic-bezier(0.77,0,0.18,1) both;
  z-index: 2;
}
.pg-anim-color-block-sweep .pg-anim__page .pg-anim__label {
  position: relative;
  z-index: 1;
  animation: pg-block-content-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes pg-block-sweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  45%  { transform: scaleX(1); transform-origin: left center; }
  46%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes pg-block-content-in {
  0%   { opacity: 0; }
  49%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   rain-reveal
   ============================================================ */
.pg-anim-rain-reveal {
  overflow: hidden;
}
.pg-anim-rain-reveal .pg-anim__page {
  position: relative;
  animation: pg-rain-fade-in 0.1s 0.65s both;
  opacity: 0;
}
.pg-anim-rain-reveal .pg-anim__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: flex;
}
.pg-anim-rain-reveal .pg-anim__overlay::before,
.pg-anim-rain-reveal .pg-anim__overlay::after {
  content: '';
  flex: 1;
  background: var(--surface, #fff);
  transform-origin: top center;
  animation: pg-rain-strip 0.5s ease-in both;
}
.pg-anim-rain-reveal .pg-anim__strip {
  flex: 1;
  background: var(--surface, #fff);
  transform-origin: top center;
  animation: pg-rain-strip 0.5s ease-in both;
}
.pg-anim-rain-reveal .pg-anim__strip:nth-child(1)  { animation-delay: 0.00s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(2)  { animation-delay: 0.05s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(3)  { animation-delay: 0.10s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(4)  { animation-delay: 0.15s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(5)  { animation-delay: 0.20s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(6)  { animation-delay: 0.25s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(7)  { animation-delay: 0.30s; }
.pg-anim-rain-reveal .pg-anim__strip:nth-child(8)  { animation-delay: 0.35s; }
@keyframes pg-rain-strip {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes pg-rain-fade-in {
  to { opacity: 1; }
}

/* ============================================================
   shockwave-enter
   ============================================================ */
.pg-anim-shockwave-enter {
  overflow: hidden;
}
.pg-anim-shockwave-enter .pg-anim__page {
  animation: pg-shockwave-in 0.5s ease-out both;
}
.pg-anim-shockwave-enter .pg-anim__page::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent, #6366f1);
  border-radius: 4px;
  opacity: 0;
  animation: pg-shockwave-ring 0.5s ease-out 0.05s both;
  pointer-events: none;
  z-index: 3;
}
@keyframes pg-shockwave-in {
  from {
    transform: scale(1.15);
    opacity: 0;
    filter: blur(8px);
  }
  to {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes pg-shockwave-ring {
  0%   { opacity: 0.8; transform: scale(1);    }
  100% { opacity: 0;   transform: scale(1.12); }
}

/* ── tv-off ─────────────────────────────────────────────── */
.pg-anim-tv-off {
  animation: pg-tv-off 0.6s ease-in both;
  transform-origin: center;
}
@keyframes pg-tv-off {
  0%   { transform: scaleY(1) scaleX(1); opacity:1; }
  40%  { transform: scaleY(0.05) scaleX(1); opacity:1; }
  60%  { transform: scaleY(0.05) scaleX(0.3); opacity:1; filter:brightness(3); }
  100% { transform: scaleY(0) scaleX(0); opacity:0; }
}

/* ── paint-splash ───────────────────────────────────────── */
.pg-anim-paint-splash {
  animation: pg-paint-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.pg-anim-paint-splash::before {
  content:''; position:absolute; inset:0;
  background: var(--accent);
  clip-path: polygon(0 0,100% 0,100% 0,0 0);
  animation: pg-paint-wipe 0.7s cubic-bezier(0.22,1,0.36,1) both;
  z-index:10;
}
@keyframes pg-paint-in {
  from { opacity:0; }
  40%  { opacity:0; }
  to   { opacity:1; }
}
@keyframes pg-paint-wipe {
  0%   { clip-path: polygon(0 0,100% 0,100% 0%,0 0%); }
  50%  { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  100% { clip-path: polygon(0 0,100% 0,100% 200%,0 200%); transform:translateY(100%); }
}

/* ── pixel-assemble ─────────────────────────────────────── */
.pg-anim-pixel-assemble {
  animation: pg-pixel-asm 0.8s steps(8) both;
}
@keyframes pg-pixel-asm {
  0%   { clip-path: inset(0 100% 0 0); opacity:0; filter:contrast(2); }
  12%  { clip-path: inset(0 88% 0 0); }
  25%  { clip-path: inset(0 75% 0 0); opacity:0.5; }
  50%  { clip-path: inset(0 50% 0 0); opacity:0.8; filter:contrast(1.2); }
  75%  { clip-path: inset(0 25% 0 0); }
  100% { clip-path: inset(0 0% 0 0); opacity:1; filter:none; }
}

/* ── matrix-fall ────────────────────────────────────────── */
.pg-anim-matrix-fall {
  animation: pg-matrix-reveal 0.8s steps(12) both;
  position:relative;
}
.pg-anim-matrix-fall::before {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg,
    rgba(0,255,65,0.15) 0px,transparent 2px,transparent 20px);
  animation: pg-matrix-scan 0.8s steps(12) both;
  z-index:1; pointer-events:none;
}
@keyframes pg-matrix-reveal {
  from { opacity:0; filter:brightness(0.3) saturate(0) hue-rotate(100deg); }
  to   { opacity:1; filter:none; }
}
@keyframes pg-matrix-scan {
  from { opacity:1; transform:translateY(-100%); }
  to   { opacity:0; transform:translateY(100%); }
}

/* ── origami-fold ── */
.pg-anim-origami-fold {
  animation: pg-origami 0.7s cubic-bezier(0.22,1,0.36,1) both;
  transform-style: preserve-3d;
  transform-origin: top left;
}
@keyframes pg-origami {
  from { opacity:0; transform: perspective(800px) rotateY(-90deg) rotateX(-20deg) scale(0.8); }
  60%  { transform: perspective(800px) rotateY(5deg) rotateX(2deg); }
  to   { opacity:1; transform: perspective(800px) rotateY(0) rotateX(0); }
}

/* ── ink-blot-reveal ── */
.pg-anim-ink-blot-reveal {
  animation: pg-ink-blot 0.8s cubic-bezier(0.22,1,0.36,1) both;
  clip-path: circle(0% at 50% 50%);
}
@keyframes pg-ink-blot {
  0%   { clip-path: circle(0% at 50% 50%); filter: blur(4px); }
  50%  { filter: blur(1px); }
  100% { clip-path: circle(150% at 50% 50%); filter: blur(0); }
}

/* ── clock-wipe ── */
.pg-anim-clock-wipe {
  animation: pg-clock-wipe 0.7s ease-in-out both;
}
@keyframes pg-clock-wipe {
  from { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); opacity:0; }
  25%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%); opacity:1; }
  50%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%); }
  75%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%); }
  87%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

/* ── bounce-page ── */
.pg-anim-bounce-page {
  animation: pg-bounce 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes pg-bounce {
  from { opacity:0; transform: translateY(40px) scale(0.95); }
  60%  { transform: translateY(-8px) scale(1.01); }
  80%  { transform: translateY(4px) scale(0.99); }
  to   { opacity:1; transform: none; }
}