/* ==========================================================================
   Meortech "motion stages" — background-motion sections inspired by the
   Robinhood samples (strategy / ipo / invest / home "join" CTAs).
   Each stage = section.mt-stage > .mt-bg (image or video) + .mt-overlay + content.
   Only transform/opacity are animated (GPU friendly); animations pause when the
   section is off-screen and are disabled for visitors who prefer reduced motion.
   ========================================================================== */

.mt-stage { position: relative; overflow: hidden; isolation: isolate; }

/* Background layer (image now; a <video> can be dropped in via data-video) */
.mt-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mt-bg picture, .mt-bg img, .mt-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
.mt-bg .mt-media { position: absolute; inset: -2%; transform-origin: center center; will-change: transform; }
.mt-bg video { opacity: 0; transition: opacity 1.2s ease; }
.mt-bg.has-video video { opacity: 1; }

/* Overlays (sit above the media, below the content) */
.mt-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mt-overlay--30 { background: rgba(0, 0, 0, .30); }
.mt-overlay--60 { background: rgba(0, 0, 0, .60); }
.mt-overlay--70 { background: rgba(0, 0, 0, .70); }
.mt-overlay--78 { background: rgba(0, 0, 0, .78); }
.mt-overlay--82 { background: rgba(0, 0, 0, .82); }
/* Brand-tinted overlay for the cyan "capability lift" band (keeps dark text legible) */
.mt-overlay--brand { background: linear-gradient(120deg, rgba(156, 240, 255, .93) 0%, rgba(156, 240, 255, .86) 55%, rgba(0, 218, 243, .82) 100%); }
/* Extra soft vignette used with the light 30% overlay so text over a busy photo stays readable */
.mt-overlay--vignette { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .55) 45%, rgba(10, 10, 10, .15) 100%); }

.mt-content { position: relative; z-index: 1; }

/* --- A. "The pros got you covered" (strategy.html): zoom linked to scroll position --- */
.mt-stage[data-motion="scroll-zoom"] .mt-media {
  transform: scale(calc(1.16 - 0.16 * var(--mt-progress, 0))) translate3d(0, calc((0.5 - var(--mt-progress, 0)) * 6%), 0);
}

/* --- B. "Learn more about IPOs" (ipo.html): continuous subtle zoom (Ken Burns) --- */
@keyframes mtSubtleZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.mt-stage[data-motion="subtle-zoom"] .mt-media { animation: mtSubtleZoom 20s ease-in-out infinite alternate; }

/* --- C. "Join a new generation" (invest.html): slow drifting loop, like a looping video --- */
@keyframes mtDrift {
  0%   { transform: scale(1.10) translate3d(-2%, -1%, 0); }
  50%  { transform: scale(1.16) translate3d(1.5%, 1%, 0); }
  100% { transform: scale(1.10) translate3d(2%, -1.5%, 0); }
}
.mt-stage[data-motion="drift"] .mt-media { animation: mtDrift 28s ease-in-out infinite alternate; }

/* --- D. "Join a new generation" (home): gentle breathing loop behind a light overlay --- */
@keyframes mtBreathe {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(0, -2%, 0); }
}
.mt-stage[data-motion="breathe"] .mt-media { animation: mtBreathe 24s ease-in-out infinite alternate; }

/* Pause looping motion while the section is off-screen (set by motion.js) */
.mt-stage:not(.mt-visible) .mt-media { animation-play-state: paused; }

/* Content entrance: fade + lift (the existing .reveal elements inside keep their own motion) */
.mt-fade { opacity: 0; transform: translateY(40px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.mt-fade.mt-in { opacity: 1; transform: none; }
/* If the inner content already slides (.reveal), only fade the wrapper to avoid double movement */
.mt-fade.mt-fade--soft { transform: none; }

/* CTA hover brightness (as in the source CTAs) — buttons/links inside a stage */
.mt-stage .mt-content a[class*="bg-"], .mt-stage .mt-content button[type="submit"] { transition-property: color, background-color, border-color, filter, transform; }
.mt-stage .mt-content a[class*="bg-"]:hover, .mt-stage .mt-content button[type="submit"]:hover { filter: brightness(1.08); }

/* No JS → show content */
.no-js .mt-fade { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mt-stage .mt-media { animation: none !important; transform: scale(1.04) !important; }
  .mt-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}