/**
 * V33 Phase 3: shared micro-interaction classes, built on Phase 1's
 * elevation/motion design tokens (assets/css/style.css's :root block).
 * This file is purely additive -- it defines new classes, it does not
 * override any existing selector. The blanket prefers-reduced-motion
 * rule in style.css already disables every transition/animation defined
 * here automatically (it targets *,*::before,*::after), so nothing in
 * this file needs its own reduced-motion media query.
 */

.motion-hover-lift {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.motion-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

/* Skeleton / shimmer loading placeholders */
.skeleton {
  background: var(--line-light, #E5E9EA);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: motion-shimmer 1.4s ease-in-out infinite;
}
@keyframes motion-shimmer {
  100% { transform: translateX(100%); }
}

/* ==========================================================================
   V34 Phase 1: animated-text + staggered-reveal utilities. Both are gated
   behind classes that only exist once JS has run (.reveal-words-ready is
   added by marketing.js after word-splitting; .reveal-stagger children are
   only hidden when the container itself carries .reveal, which marketing.js
   upgrades with .is-visible), so a no-JS visitor sees plain static text.
   The blanket prefers-reduced-motion rule in style.css also covers these,
   but explicit overrides keep them readable even if that rule changes.
   ========================================================================== */

/* Word-rise reveal: marketing.js splits a [data-reveal-words] element into
   .rw-word spans (aria-label keeps the original string for screen readers)
   and assigns each a --rw-i index. Words rise + fade in sequence. */
.rw-word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.55em);
  transition:opacity .55s var(--ease-cinematic), transform .55s var(--ease-cinematic);
  transition-delay:calc(var(--rw-i, 0) * 40ms);
}
.reveal-words-ready.is-visible .rw-word,
.is-visible .reveal-words-ready .rw-word{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rw-word{ transition:none; opacity:1; transform:none; }
}

/* Staggered children: a container marked class="reveal reveal-stagger"
   cascades its direct children in as it scrolls into view. marketing.js
   assigns each child a --stagger-i index (capped so long grids like the
   15-item icon grid don't wait forever). */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-cinematic), transform var(--dur-slow) var(--ease-cinematic);
  transition-delay:calc(var(--stagger-i, 0) * 45ms);
}
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-stagger > *{ transition:none; opacity:1; transform:none; }
}

/* ==========================================================================
   V34 Phase 3: shared toast notifications (assets/js/toast.js +
   includes/flash.php). Bottom-right stack, slide-up entry, auto-dismiss.
   Works on light and dark admin surfaces alike.
   ========================================================================== */
.toast-stack{
  position:fixed;
  right:20px; bottom:20px;
  z-index:9998;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(360px, calc(100vw - 32px));
  pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--teal-deep, #00262C); color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md, 10px);
  padding:12px 14px;
  box-shadow:var(--elev-3, 0 20px 50px rgba(0,20,24,.14));
  font-size:.88rem; line-height:1.4;
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events:auto;
}
.toast.toast--in{ opacity:1; transform:none; }
.toast.toast--leaving{ opacity:0; transform:translateY(6px); }
.toast-msg{ flex:1; overflow-wrap:anywhere; }
.toast-close{
  flex-shrink:0; background:none; border:none; color:var(--fog, #9FB4B8);
  font-size:.72rem; padding:2px; cursor:pointer; line-height:1.2;
}
.toast-close:hover{ color:#fff; }
.toast--success{ border-left:3px solid #2ECC71; }
.toast--error{ border-left:3px solid #e05252; }
.toast--info{ border-left:3px solid var(--orange, #F69810); }
@media (max-width:600px){ .toast-stack{ right:16px; bottom:16px; } }

/* Top-of-page progress bar (JS-controlled width/visibility, see page-progress-bar.js) */
.page-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--orange, #F69810);
  z-index: 9999;
  opacity: 0;
  transition: width var(--dur-slow) var(--ease-out), opacity var(--dur-fast) ease;
  pointer-events: none;
}
.page-progress-bar.is-active {
  opacity: 1;
  width: 70%; /* animates toward this; JS jumps to 100% + fades out on load/pagehide */
}