/* ==========================================================================
   animations.css — keyframes, reveal/mask, cross-document view transitions,
   wipe fallback, and the full reduced-motion unwind.
   ========================================================================== */

/* ---- reveal-on-enter + image mask wipe ---- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
[data-reveal].is-in{opacity:1;transform:none;}
[data-mask]{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.7,0,.2,1);}
[data-mask].is-in{clip-path:inset(0 0 0 0);}

/* ---- keyframes ---- */
@keyframes cueIn{to{opacity:.6;}}
@keyframes cueLine{0%,100%{transform:scaleY(.3);}50%{transform:scaleY(1);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--rose-ink-rgb),.5);}100%{box-shadow:0 0 0 12px rgba(var(--rose-ink-rgb),0);}}
@keyframes posterIn{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes posterOut{from{transform:scaleY(1);}to{transform:scaleY(0);}}
@keyframes posterMarkIn{from{opacity:0;transform:translateY(10px);}to{opacity:.85;transform:none;}}
@keyframes posterMarkOut{from{opacity:.85;transform:none;}to{opacity:0;transform:translateY(-8px);}}

/* ---- the poster page transition ----------------------------------------------
   The prototype's full-screen "Pétale" curtain is THE page transition (the site
   is multi-page now). On leaving a page transitions.js plays .cover-in (the
   curtain rises and the wordmark fades up); on the next page the inline head
   guard sets html.wipe-enter so the curtain is already covering before paint,
   then transitions.js plays .cover-out (it retracts and the wordmark fades).   */
.wipe{position:fixed;inset:0;z-index:var(--z-wipe);background:var(--pistache);transform:scaleY(0);
  transform-origin:bottom;pointer-events:none;display:flex;align-items:center;justify-content:center;
  will-change:transform;}
.wipe-mark{font-family:var(--display);font-weight:300;font-size:clamp(44px,9vw,104px);color:var(--cacao);
  opacity:0;letter-spacing:-.03em;font-variation-settings:'opsz' 144;}

/* leaving: curtain rises from the bottom, wordmark fades up */
.wipe.cover-in{transform-origin:bottom;animation:posterIn .42s cubic-bezier(.7,0,.3,1) forwards;}
.wipe.cover-in .wipe-mark{animation:posterMarkIn .42s ease forwards;}

/* arriving: head guard holds the curtain covering before first paint … */
html.wipe-enter .wipe{transform:scaleY(1);transform-origin:top;}
html.wipe-enter .wipe .wipe-mark{opacity:.85;}
html.wipe-enter{background:var(--pistache);}   /* backstop against any sliver */
/* … then it retracts upward and the wordmark fades out */
.wipe.cover-out{transform-origin:top;animation:posterOut .52s cubic-bezier(.7,0,.3,1) forwards;}
.wipe.cover-out .wipe-mark{animation:posterMarkOut .4s ease forwards;}

/* ---- reduced motion: unwind every effect to a simple fade / instant ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{scroll-behavior:auto!important;}
  .hero{height:auto;}
  .hero-sticky{position:relative;height:100svh;}
  .hero-cake,.hero-stage{transform:none!important;}
  .hero-word .ch,.hero-tag{opacity:1!important;transform:none!important;transition:none;}
  .hero-cue{display:none;}
  [data-reveal]{transform:none;transition:opacity .5s;}
  [data-mask]{clip-path:none!important;}
  .reel{height:auto;}
  .reel-sticky{position:static;height:auto;display:block;padding:40px 0;}
  .reel-head--top{display:block;}
  .reel-head--inline{display:none;}
  .reel-track{overflow-x:auto;transform:none!important;scroll-snap-type:x mandatory;}
  .reel-item{scroll-snap-align:center;}
  .reel-progress{display:none;}
  .stack-card{position:static!important;}
  .marquee-track{animation:none;}
  .wipe{display:none!important;}
  .dot-live::before{animation:none;}
  .cursor{display:none!important;}
  .field{transform:none!important;}
}