/* ==========================================================
   M. R Media Marketing — Motion layer (design only)
   Sirf animation / smooth effects. Koi text, heading, link,
   meta ya tracking code isme nahi hai.
   Saare effects tabhi chalte hain jab motion.js <html> par
   "mr-motion" class lagata hai (reduced-motion users ke liye off).
   ========================================================== */

:root {
  --mr-accent: #ff5a1f;
  --mr-accent-2: #ffb36b;
  --mr-ease: cubic-bezier(.22, .7, .2, 1);
}

html.mr-motion {
  scroll-behavior: smooth;
}


/* ---------- Scroll progress bar ---------- */

mr-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, var(--mr-accent), var(--mr-accent-2));
  transform-origin: 0 50%;
  transform: scaleX(0);
}


/* ---------- Header shadow on scroll ---------- */

.site-header {
  transition: box-shadow .35s ease;
}

.site-header.mr-scrolled {
  box-shadow: 0 12px 30px -20px rgba(17, 16, 15, .45);
}


/* ---------- Scroll reveal ---------- */

.mr-motion .mr-reveal {
  opacity: 0;
}

.mr-motion .mr-reveal.mr-in {
  opacity: 1;
  animation: mr-rise .9s var(--mr-ease) var(--mr-delay, 0s) backwards;
}

.mr-motion .mr-reveal--pop.mr-in {
  animation-name: mr-pop;
}

.mr-motion .mr-reveal--side.mr-in {
  animation-name: mr-slide;
}

@keyframes mr-rise {
  from { opacity: 0; translate: 0 34px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes mr-pop {
  from { opacity: 0; scale: .86; translate: 0 14px; }
  to   { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes mr-slide {
  from { opacity: 0; translate: -42px 0; }
  to   { opacity: 1; translate: 0 0; }
}


/* ---------- Hero: floating blobs + moving dot grid ---------- */

.mr-motion .hero {
  position: relative;
  isolation: isolate;
}

mr-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

mr-blob {
  position: absolute;
  display: block;
  width: 44vw;
  max-width: 580px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .24;
  filter: blur(70px);
  background: radial-gradient(circle, var(--mr-accent), transparent 66%);
}

mr-blob:nth-child(1) {
  top: -18%;
  left: -12%;
  animation: mr-drift-a 18s ease-in-out infinite alternate;
}

mr-blob:nth-child(2) {
  right: -10%;
  bottom: -26%;
  background: radial-gradient(circle, var(--mr-accent-2), transparent 66%);
  animation: mr-drift-b 22s ease-in-out infinite alternate;
}

@keyframes mr-drift-a {
  to { translate: 12vw 8vh; scale: 1.15; }
}

@keyframes mr-drift-b {
  to { translate: -10vw -10vh; scale: .9; }
}

mr-dots {
  position: absolute;
  inset: 0;
  display: block;
  background-image: radial-gradient(rgba(17, 16, 15, .13) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
  animation: mr-dots 40s linear infinite;
}

@keyframes mr-dots {
  to { background-position: 260px 260px; }
}

/* Hero headline highlight: shimmering gradient */
.mr-motion .hero h1 em {
  background: linear-gradient(100deg, var(--mr-accent) 20%, var(--mr-accent-2) 40%, var(--mr-accent) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mr-text-shine 5s linear infinite;
}

@keyframes mr-text-shine {
  from { background-position: 100% 0; }
  to   { background-position: -150% 0; }
}

/* Hero image: unveil + light parallax + floating note */
.mr-motion .hero-visual {
  translate: 0 var(--mr-par, 0px);
}

.mr-motion .hero-visual img {
  animation: mr-unveil 1.5s var(--mr-ease) .25s backwards;
}

@keyframes mr-unveil {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.mr-motion .image-note {
  animation: mr-float 5s ease-in-out infinite;
}

@keyframes mr-float {
  50% { translate: 0 -10px; }
}


/* ---------- Services marquee (motion graphic strip) ---------- */

mr-marquee {
  display: block;
  overflow: hidden;
  padding: 18px 0;
  background: #11100f;
  color: #f7f5f1;
  border-block: 1px solid rgba(255, 255, 255, .08);
}

mr-track {
  display: flex;
  width: max-content;
  animation: mr-marquee 38s linear infinite;
}

mr-track span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
}

mr-track span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 245, 241, .65);
}

mr-track span::after {
  content: "\2726";
  color: var(--mr-accent);
  -webkit-text-stroke: 0;
  font-size: .62em;
}

mr-marquee:hover mr-track {
  animation-play-state: paused;
}

@keyframes mr-marquee {
  to { translate: -50% 0; }
}


/* ---------- Buttons: light sweep ---------- */

.mr-motion .button,
.mr-motion .nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

mr-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  z-index: -1;
  display: block;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-130%) skewX(-20deg);
  animation: mr-sweep 4.8s ease-in-out infinite;
}

@keyframes mr-sweep {
  0%, 62% { transform: translateX(-130%) skewX(-20deg); }
  100%    { transform: translateX(330%) skewX(-20deg); }
}


/* ---------- Service cards: cursor glow + lift + underline ---------- */

.mr-motion .service-grid > article {
  position: relative;
  isolation: isolate;
}

.mr-motion .service-grid > article:hover {
  translate: 0 -6px;
}

mr-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 90, 31, .16), transparent 65%);
  transition: opacity .4s ease;
}

mr-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, var(--mr-accent), var(--mr-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--mr-ease);
}

.service-grid > article:hover mr-glow {
  opacity: 1;
}

.service-grid > article:hover mr-line {
  transform: scaleX(1);
}


/* ---------- Industry chips ---------- */

.mr-motion .industry-list > span:hover {
  translate: 0 -4px;
  border-color: var(--mr-accent);
}


/* ---------- SEO process rail: line draws in ---------- */

.mr-motion .process-rail {
  background-image: linear-gradient(90deg, var(--mr-accent), var(--mr-accent-2));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 2px;
  transition: background-size 1.8s var(--mr-ease) .2s;
}

.mr-motion .process-rail.mr-drawn {
  background-size: 100% 2px;
}


/* ---------- Trust band + final CTA: slow rotating aurora ---------- */

.mr-motion .trust-band,
.mr-motion .final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

mr-aurora {
  position: absolute;
  inset: -50%;
  z-index: -1;
  display: block;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(255, 90, 31, .22), transparent 30%, rgba(255, 179, 107, .18), transparent 60%);
  filter: blur(60px);
  animation: mr-spin 26s linear infinite;
}

@keyframes mr-spin {
  to { rotate: 360deg; }
}


/* ---------- Floating WhatsApp: pulse ring ---------- */

mr-ring {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  animation: mr-ring 2.4s ease-out infinite;
}

@keyframes mr-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}


/* ---------- Custom cursor (desktop only) ---------- */

mr-cursor,
mr-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

mr-cursor {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 90, 31, .7);
  transition: width .3s ease, height .3s ease, margin .3s ease, background-color .3s ease, opacity .3s ease;
}

mr-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--mr-accent);
  transition: opacity .3s ease;
}

mr-cursor.is-on,
mr-dot.is-on {
  opacity: 1;
}

mr-cursor.is-hover {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background-color: rgba(255, 90, 31, .12);
}


/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  mr-marquee {
    padding: 13px 0;
  }

  mr-blob {
    width: 80vw;
    opacity: .2;
  }
}