/* =====================================================
   MOTION & INTERACTION (same behaviour as filmwebinar.maflam.com)
   ===================================================== */
.scroll-progress { position: fixed; top: 0; right: 0; height: 3px; width: 100%; z-index: 200; transform-origin: right center; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, #5affff, #7a5cff, #ff4fa3); box-shadow: 0 0 12px rgba(90, 255, 255, .7); pointer-events: none; }

/* entrance on load */
@keyframes blurIn { from { opacity: 0; filter: blur(18px); transform: translateY(30px); } to { opacity: 1; filter: blur(0); transform: none; } }
.hero__text > * { animation: blurIn 1s cubic-bezier(.2, .7, .2, 1) both; }
.hero__text > .l1 { animation-delay: .1s; }
.hero__text > .l2 { animation-delay: .25s; }
.hero__text > .badge { animation-delay: .4s; }
.hero__text > h1 { animation-delay: .5s; }
.hero__text > .sub { animation-delay: .6s; }
.hero__text > .pills { animation-delay: .7s; }
.hero__text > .btn { animation: blurIn 1s .8s both, pulseGlow 2.8s 2s infinite; }
.hero__text { will-change: opacity, filter, transform; }
.hero__bg { will-change: transform; transform: translateY(var(--hy, 0px)) scale(var(--hs, 1)); }
@keyframes hdrIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
header { animation: hdrIn .8s cubic-bezier(.2, .7, .2, 1) both; }

/* buttons: shine sweep + pulse + ripple */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%); transform: translateX(120%); transition: transform .8s; pointer-events: none; }
.btn:hover::after { transform: translateX(-120%); }
.btn:active { transform: scale(.98); }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 calc(24 * var(--u)) rgba(90, 255, 255, .25); } 50% { box-shadow: 0 0 calc(48 * var(--u)) rgba(90, 255, 255, .7); } }
.cta .btn, .learn .btn { animation: pulseGlow 2.8s infinite; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* cards: hover lift + cursor spotlight */
.q, .feature, .card, .chip, .pill, .speaker img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s, background-color .35s; }
.q, .card, .pill { position: relative; overflow: hidden; }
.q::before, .card::after, .pill::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(90, 255, 255, .22), transparent 70%); }
.q:hover::before, .card:hover::after, .pill:hover::before { opacity: 1; }
.q:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); border-color: rgba(90, 255, 255, .7); }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(90, 255, 255, .12); }
.pill:hover { transform: translateY(-4px); border-color: var(--cyan); }
.feature .icon { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.feature:hover .icon { transform: scale(1.18) rotate(-6deg); }
.chip:hover { background: rgba(90, 255, 255, .12); transform: translateY(-2px); }
.speaker img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.speaker img:hover { transform: scale(1.03); }
.nav-links a, .footer-row a { position: relative; }
.nav-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 1px; background: #5affea; transform: scaleX(0); transition: transform .3s; }
.nav-links a:hover::after { transform: scaleX(1); }
.socials a:hover { transform: translateY(-4px) scale(1.1); }

/* ambient */
.story .rule { background-size: 200% 100%; animation: shimmer 4s linear infinite; background-image: linear-gradient(90deg, transparent, #5affff, transparent, #5affff, transparent); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.swirl { translate: 0 var(--sy, 0px); will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

html, body { overflow-x: clip; max-width: 100%; }