/*
  MediaVerse Marketing website: shared motion effects
  Used by: index.html, services.html, about.html, pricing.html (linked in <head>, with effects.js).
  What it does: fade-up on scroll, glowing card borders on hover, shimmering heading text,
  slowly drifting hero glows, and the scrolling brand strip on the home page.
  Everything here is switched off for visitors who ask for reduced motion.
  To remove the effects from a page, delete its effects.css and effects.js lines.
*/

/* Fade-up on scroll (classes are added by effects.js, so content never hides without JS) */
.mv-rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--mv-d,0s)}
.mv-rv.mv-in{opacity:1;transform:none}

/* Glowing border on hover for cards */
@property --mv-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.mv-glow{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mv-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--mv-a),transparent 0 55%,#ecb2ff 70%,#7df4ff 80%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s}
.mv-rv.mv-glow{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transition-delay:var(--mv-d,0s),var(--mv-d,0s),0s}
.mv-rv.mv-glow.mv-in{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transition-delay:var(--mv-d,0s),0s,0s}
.mv-glow:hover{box-shadow:0 20px 50px rgba(118,0,160,.25)}
.mv-glow.mv-lift:hover{transform:translateY(-4px)}
.mv-glow:hover::after{opacity:1;animation:mv-spin 4s linear infinite}
@keyframes mv-spin{to{--mv-a:360deg}}

/* Shimmering gradient text, for one key heading per page */
.mv-shine{background:linear-gradient(100deg,#ecb2ff 0%,#a855f7 30%,#7df4ff 55%,#ecb2ff 80%,#ecb2ff 100%)!important;background-size:250% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;animation:mv-shine 7s linear infinite}
@keyframes mv-shine{to{background-position:-250% 0}}

/* Slowly drifting hero glows (the pages' existing glow shapes). main clips them so they never cause sideways scrolling. */
main{overflow-x:clip}
.media-orbit-blob,.media-orbit-glow{animation:mv-drift 20s ease-in-out infinite alternate}
.media-orbit-blob + .media-orbit-blob,.media-orbit-glow + .media-orbit-glow{animation-duration:26s;animation-delay:-8s}
@keyframes mv-drift{0%{translate:0 0;scale:1}50%{translate:5vw 4vh;scale:1.15}100%{translate:-3vw 7vh;scale:.95}}

/* Brand name strip (home page) */
.mv-marquee{overflow:hidden;padding:22px 0;border-block:1px solid rgba(255,255,255,.05);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mv-marquee-track{display:flex;align-items:center;width:max-content;animation:mv-scroll 45s linear infinite}
.mv-marquee:hover .mv-marquee-track{animation-play-state:paused}
.mv-marquee-track span{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.03em;white-space:nowrap;padding:0 26px;color:transparent;-webkit-text-stroke:1px rgba(236,178,255,.5)}
.mv-marquee-track span:nth-of-type(3n+1){color:#e4e1e9;-webkit-text-stroke:0}
.mv-marquee-track i{font-style:normal;color:#ecb2ff;font-size:16px}
@keyframes mv-scroll{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .mv-rv{opacity:1;transform:none;transition:none}
  .mv-glow,.mv-glow::after{transition:none}
  .mv-glow:hover::after{animation:none}
  .mv-glow.mv-lift:hover{transform:none}
  .mv-shine,.media-orbit-blob,.media-orbit-glow,.mv-marquee-track{animation:none}
  .mv-marquee{overflow-x:auto}
}