/* Tap-A-Post motion layer.
   Two jobs: the keyframe catalogue lifted from the prototypes, and the
   cross-page transitions that join the screens together (docs/JOURNEY.md §7).

   Everything in this file must degrade to nothing under prefers-reduced-motion.
   The audience includes people reading in bed with a child. */

/* ========================================================================
   1. Cross-document view transitions
   ======================================================================== */
/* Declarative, no JS, no SPA framework. Browsers without support navigate
   normally and lose only the animation. */
@view-transition { navigation: auto; }

/* Elements that persist across a navigation. The name must be unique per
   page, so only ever one of each is rendered at a time. */
.vt-wordmark     { view-transition-name: wordmark; }
.vt-preview-card { view-transition-name: preview-card; }
.vt-seal         { view-transition-name: seal; }
/* .parchment carries view-transition-name: parchment (components.css) */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: ease;
}

/* The preview card is the emotional through-line from shop to questionnaire:
   the letter you were previewing is the letter you now write. Give it room. */
::view-transition-old(preview-card),
::view-transition-new(preview-card) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   2. Keyframe catalogue
   ======================================================================== */

/* ---- Storybook backdrop scenes ----------------------------------------- */
@keyframes tapSnow2 {
  0%   { transform: translate(0, -6vh); }
  50%  { transform: translate(14px, 48vh); }
  100% { transform: translate(-6px, 106vh); }
}
@keyframes tapTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes tapDrift   { 0% { transform: translateX(-6%); } 100% { transform: translateX(6%); } }
@keyframes tapLamp    { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes tapRise {
  0%   { transform: translateY(108vh) rotate(-7deg); }
  100% { transform: translateY(-24vh) rotate(8deg); }
}

/* ---- Seal interaction --------------------------------------------------- */
@keyframes tapNote {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-6deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-14px, -84px) rotate(10deg); }
}
@keyframes tapNoteB {
  0%   { opacity: 0; transform: translate(0, 0) rotate(8deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, -72px) rotate(-8deg); }
}
@keyframes tapWob {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  30%      { transform: translate(-50%, -50%) rotate(-5deg) scale(1.05); }
  60%      { transform: translate(-50%, -50%) rotate(4deg); }
}
@keyframes tapCue {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(7px); opacity: 0.4; }
}

/* ---- Stamps and postmarks ----------------------------------------------- */
/* RECEIVED / POSTED rubber stamp coming down. */
@keyframes tapStampIn {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.8); }
  100% { opacity: 0.92; transform: rotate(-8deg) scale(1); }
}
/* Chapter postmark franking in on scroll-into-view. */
@keyframes tapPostmarkIn {
  from { opacity: 0; transform: rotate(-6deg) scale(1.7); }
  to   { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* ---- Questionnaire page turns ------------------------------------------- */
@keyframes qSlideA { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes qSlideB { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes qFadeA  { from { opacity: 0; } to { opacity: 1; } }
@keyframes qFadeB  { from { opacity: 0; } to { opacity: 1; } }
@keyframes qSheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* ========================================================================
   3. Applied helpers
   ======================================================================== */
.is-stamping  { animation: tapStampIn var(--dur-stamp) var(--ease-stamp) both; mix-blend-mode: multiply; }
.is-franking  { animation: tapPostmarkIn 520ms var(--ease-stamp) both; }
.page-turn    { animation: qSlideA var(--dur-page-turn) ease both; }
.sheet-up     { animation: qSheetUp 320ms ease both; }

/* ========================================================================
   4. Reduced motion — hard stop
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Scroll set-pieces freeze at their end states; page turns become fades. */
  @view-transition { navigation: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Page turns keep a fade, because losing it entirely makes the questionnaire
     feel like it jumped rather than advanced. */
  .page-turn { animation: qFadeA 160ms ease both !important; animation-duration: 160ms !important; }
}