/* General-purpose scroll-anchored text reveal utility.
   Source: reveal-and-glass-system.html */

.reveal-clip{ display:inline-block; overflow:hidden; padding-bottom:0.15em; margin-bottom:-0.15em; }
.reveal-piece{ display:inline-block; }

/* "disrupt" effect — per Carrie's TBWA\HAKUHODO reference (slits, shifting
   typography, a visible grid), adapted to this site's own ink/maroon
   palette rather than that reference's black/lime — a few quick slit-clip
   + horizontal-throw flickers, then settles fully clean and static. Paused
   until reveal.js flips animation-play-state on scroll intersection. */
.reveal-piece-disrupt{
  animation: revealDisrupt 640ms cubic-bezier(.22,1,.36,1) forwards;
  animation-play-state: paused;
}
@keyframes revealDisrupt{
  0%   { opacity:0; transform:translateX(var(--dx,0)); clip-path:inset(0 0 55% 0); }
  18%  { opacity:1; transform:translateX(calc(var(--dx,0) * -0.7)); clip-path:inset(45% 0 0 0); }
  36%  { transform:translateX(calc(var(--dx,0) * 0.45)); clip-path:inset(0 0 20% 0); }
  55%  { transform:translateX(calc(var(--dx,0) * -0.2)); clip-path:inset(10% 0 0 0); }
  100% { opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}

/* Faint horizontal grid-line flash across a disrupt container while its
   pieces are flickering — the "visible grid" element from the reference,
   in the site's own --ink at low opacity instead of that reference's
   accent yellow. Add class "reveal-grid" as a sibling inside a
   [data-effect="disrupt"] container to opt in (see _press-section.php). */
[data-effect="disrupt"]{ position:relative; }
.reveal-grid{
  position:absolute; inset:-0.3em -0.4em; pointer-events:none;
  background-image: repeating-linear-gradient(to bottom, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 8px);
  opacity:0; animation: revealGridFlash 640ms cubic-bezier(.22,1,.36,1) forwards;
  animation-play-state: paused;
}
@keyframes revealGridFlash{
  0%   { opacity:0; }
  20%  { opacity:0.16; }
  55%  { opacity:0.08; }
  100% { opacity:0; }
}

/* [data-reveal-block] — whole-element fade/rise, see reveal.js. Used for
   content the word/character rebuild would break (real links, admin HTML
   blocks, icon+label pairs) — a class toggle on the untouched element. */
[data-reveal-block]{
  opacity:0; transform:translateY(22px);
  transition:opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1), box-shadow 700ms cubic-bezier(.22,1,.36,1);
}
[data-reveal-block].is-revealed{ opacity:1; transform:translateY(0); }

/* pop3d block variant — same dimensional-pop idea as the word-level
   "pop3d" reveal effect, applied to a whole block instead of per-word;
   settles with a faint permanent shadow rather than a flat landing. */
[data-reveal-block][data-reveal-block-effect="pop3d"]{
  transform:perspective(900px) translateY(30px) rotateX(16deg);
  transform-origin:center top;
}
[data-reveal-block][data-reveal-block-effect="pop3d"].is-revealed{
  transform:none; box-shadow:0 22px 44px rgba(55,14,14,0.12);
}

@media (prefers-reduced-motion: reduce){
  .reveal-piece-disrupt{ animation: none !important; opacity:1; transform:none; clip-path:none; }
  .reveal-grid{ animation: none !important; opacity:0; }
  [data-reveal-block]{ opacity:1; transform:none; transition:none; }
}