/* =========================================================
   v57 — SUBTLE MOTION STANDARD
   Polished, one-time motion only. No constant distraction.
   ========================================================= */

:root {
  --motion-ease: cubic-bezier(.2,.72,.2,1);
  --motion-fast: 260ms;
  --motion-mid: 480ms;
  --motion-lime: #d6ff4b;
}

/* 1) One-time section reveal */
.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(2px);
  transition:
    opacity var(--motion-mid) var(--motion-ease),
    transform var(--motion-mid) var(--motion-ease),
    filter 420ms ease;
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* 2) Accent label / divider reveal */
.motion-accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.motion-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: min(54px, 55%);
  height: 1px;
  background: linear-gradient(90deg, var(--motion-lime), rgba(214,255,75,0));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.motion-accent.is-accent-revealed::after {
  animation: motionAccentLine 520ms var(--motion-ease) 90ms forwards;
}

@keyframes motionAccentLine {
  0% { transform: scaleX(0); opacity: 0; }
  30% { opacity: .95; }
  100% { transform: scaleX(1); opacity: .58; }
}

/* 3) One-shot emphasis when an item becomes active */
.motion-active-pop {
  animation: motionActivePop 520ms var(--motion-ease) both;
}

@keyframes motionActivePop {
  0% {
    transform: scale(.987);
    box-shadow: var(--motion-base-shadow, none);
  }
  38% {
    transform: scale(1.008);
    box-shadow:
      var(--motion-base-shadow, 0 18px 55px rgba(0,0,0,.28)),
      0 0 0 1px rgba(214,255,75,.34),
      0 0 30px rgba(214,255,75,.14);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--motion-base-shadow, none);
  }
}

/* Don't let the pulse break 3D coverflow transforms on elements whose
   transform is already used for layout. Pulse the inner visual instead. */
.video-coverflow-card.motion-active-pop,
.campaign-coverflow-card.motion-active-pop,
.subsidy-coverflow-card.motion-active-pop,
.artist-hero-card.motion-active-pop {
  animation: none;
}

.video-coverflow-card.motion-active-pop > *,
.campaign-coverflow-card.motion-active-pop .campaign-coverflow-frame,
.subsidy-coverflow-card.motion-active-pop .social-phone,
.artist-hero-card.motion-active-pop .artist-hero-card-media {
  animation: motionInnerActivePop 520ms var(--motion-ease) both;
}

@keyframes motionInnerActivePop {
  0% { filter: brightness(.98); }
  38% { filter: brightness(1.07) drop-shadow(0 0 18px rgba(214,255,75,.13)); }
  100% { filter: brightness(1); }
}

/* 4) Slightly more intentional modal entrance, preserving v49 behavior */
.case-study-modal-backdrop {
  transition: opacity 360ms ease, backdrop-filter 460ms ease, -webkit-backdrop-filter 460ms ease !important;
}

.case-study-modal:not(.is-open) .case-study-modal-backdrop {
  opacity: 0;
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
}

.case-study-modal.is-open .case-study-modal-backdrop {
  opacity: 1;
}

.case-study-modal-panel {
  transform: translateY(16px) scale(.968);
  opacity: .84;
}

.case-study-modal.is-open .case-study-modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Tablet: lighter motion */
@media (max-width: 1100px) {
  .motion-reveal {
    transform: translate3d(0, 10px, 0);
    transition-duration: 390ms;
  }

  .case-study-modal-panel {
    transform: translateY(10px) scale(.982);
  }
}

/* Phone: fast and lightweight */
@media (max-width: 760px) {
  .motion-reveal {
    transform: translate3d(0, 8px, 0);
    filter: none;
    transition-duration: 320ms;
  }

  .motion-accent::after { bottom: -5px; }
  .case-study-modal-panel { transform: translateY(7px) scale(.99); }
}

/* Respect accessibility / battery-conscious preference */
@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal.is-revealed,
  .case-study-modal-panel,
  .case-study-modal-backdrop {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .motion-active-pop,
  .motion-active-pop > *,
  .motion-accent::after {
    animation: none !important;
  }
}