/* Milestone 1 (Safety Baseline and CSS Isolation): every selector in
   this file is now scoped beneath .emt-journey-studio and every
   var() reference renamed to the --emt-js-* prefix (see
   styles/tokens.css) — no behavior/appearance change, only isolation
   from a host WordPress page's own styles. */

/* Milestone 3B Stage 14 (Legacy Builder Removal): removed
   .crossfade-group.is-crossfading (+ child selector) and the
   emt-fade-out/emt-fade-in keyframes with their .is-leaving-fade/
   .is-entering-fade classes — all were studio-transition.js-only
   (deleted in Stage 12). .is-leaving/.is-entering below stay: they're
   still driven directly by journey-booklet.js for the booklet frame's
   own reveal. */

@keyframes emt-fade-lift-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes emt-fade-lift-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.emt-journey-studio .is-leaving {
  animation: emt-fade-lift-out var(--emt-js-motion-reveal) var(--emt-js-ease-standard)
    forwards;
}

.emt-journey-studio .is-entering {
  animation: emt-fade-lift-in var(--emt-js-motion-reveal) var(--emt-js-ease-standard)
    forwards;
}

/* Modal Architecture milestone: replaces the retired brochure-cover
   hinge scene (desktop/tablet) and the separate mobile-only fade —
   one calm fade+scale, applied directly to the <dialog> itself,
   identically at every breakpoint. Desktop's own sizing (min(1180px,
   94vw) / min(860px, 92dvh), styles/journey-booklet.css) already
   reads as a focused overlay rather than a full page, so the earlier
   hinge metaphor (opening a physical brochure cover in place) no
   longer fits — CTAs now launch this from arbitrary page positions
   (any Celebration-page tab link), not from one fixed closed-cover
   widget. journey-booklet.js gates both directions behind
   prefers-reduced-motion itself (no animation class applied at all
   when set), same convention as every other motion in this app. */

@keyframes emt-modal-open {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes emt-modal-close {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

.journey-booklet.emt-journey-studio.is-modal-entering {
  animation: emt-modal-open var(--emt-js-motion-modal) var(--emt-js-ease-standard) forwards;
}

.journey-booklet.emt-journey-studio.is-modal-leaving {
  animation: emt-modal-close var(--emt-js-motion-modal) var(--emt-js-ease-standard) forwards;
}