/* ==========================================================================
   SPEEDNET TECHNOLOGIES — PREMIUM ANIMATIONS
   Clean, subtle, professional. No jarring effects.
   ========================================================================== */

/* ── Core Keyframes ───────────────────────────────────────────────────────── */
@keyframes gentleFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gentleFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll Reveal: Cards & Elements ─────────────────────────────────────── */
.observe-me {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.observe-me.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-only for cards with overflow:hidden (feature-item, service-card) */
/* No translateY — avoids gradient clip artifacts during transition */
.observe-fade {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity;
}

.observe-fade.in-view {
  opacity: 1;
}

/* Stagger delays for feature-items in grid */
.features-grid .observe-fade:nth-child(1) { transition-delay: 0.00s; }
.features-grid .observe-fade:nth-child(2) { transition-delay: 0.08s; }
.features-grid .observe-fade:nth-child(3) { transition-delay: 0.16s; }
.features-grid .observe-fade:nth-child(4) { transition-delay: 0.00s; }
.features-grid .observe-fade:nth-child(5) { transition-delay: 0.08s; }
.features-grid .observe-fade:nth-child(6) { transition-delay: 0.16s; }

.services-detail-grid .observe-fade:nth-child(1) { transition-delay: 0.00s; }
.services-detail-grid .observe-fade:nth-child(2) { transition-delay: 0.08s; }
.services-detail-grid .observe-fade:nth-child(3) { transition-delay: 0.16s; }

/* Features grid stagger */
.features-grid .observe-me:nth-child(1) { transition-delay: 0.00s; }
.features-grid .observe-me:nth-child(2) { transition-delay: 0.08s; }
.features-grid .observe-me:nth-child(3) { transition-delay: 0.16s; }
.features-grid .observe-me:nth-child(4) { transition-delay: 0.00s; }
.features-grid .observe-me:nth-child(5) { transition-delay: 0.08s; }
.features-grid .observe-me:nth-child(6) { transition-delay: 0.16s; }

/* Plans preview grid */
.plans-preview-grid .observe-me:nth-child(1) { transition-delay: 0.00s; }
.plans-preview-grid .observe-me:nth-child(2) { transition-delay: 0.10s; }
.plans-preview-grid .observe-me:nth-child(3) { transition-delay: 0.20s; }

/* Services 4col */
.services-grid-4col .observe-me:nth-child(1) { transition-delay: 0.00s; }
.services-grid-4col .observe-me:nth-child(2) { transition-delay: 0.08s; }
.services-grid-4col .observe-me:nth-child(3) { transition-delay: 0.16s; }
.services-grid-4col .observe-me:nth-child(4) { transition-delay: 0.24s; }

/* RP plan cards */
.rp-grid .observe-me:nth-child(1) { transition-delay: 0.00s; }
.rp-grid .observe-me:nth-child(2) { transition-delay: 0.08s; }
.rp-grid .observe-me:nth-child(3) { transition-delay: 0.16s; }
.rp-grid .observe-me:nth-child(4) { transition-delay: 0.04s; }
.rp-grid .observe-me:nth-child(5) { transition-delay: 0.12s; }
.rp-grid .observe-me:nth-child(6) { transition-delay: 0.20s; }

/* Steps grid */
.steps-grid .observe-me:nth-child(1) { transition-delay: 0.00s; }
.steps-grid .observe-me:nth-child(2) { transition-delay: 0.10s; }
.steps-grid .observe-me:nth-child(3) { transition-delay: 0.20s; }
.steps-grid .observe-me:nth-child(4) { transition-delay: 0.30s; }

/* Contact info */
.contact-info-stack .observe-me:nth-child(1) { transition-delay: 0.00s; }
.contact-info-stack .observe-me:nth-child(2) { transition-delay: 0.08s; }
.contact-info-stack .observe-me:nth-child(3) { transition-delay: 0.16s; }

/* About values */
.about-values-grid .observe-me:nth-child(1) { transition-delay: 0.00s; }
.about-values-grid .observe-me:nth-child(2) { transition-delay: 0.10s; }
.about-values-grid .observe-me:nth-child(3) { transition-delay: 0.20s; }

/* ── OTT Marquee — Smooth Speed (60s = gentle pace) ──────────────────────── */
.rp-marquee__track {
  animation: rpScrollSmooth 60s linear infinite !important;
}

.rp-marquee__row--reverse .rp-marquee__track {
  animation: rpScrollSmoothRev 65s linear infinite !important;
}

.rp-marquee:hover .rp-marquee__track,
.rp-marquee:active .rp-marquee__track {
  animation-play-state: paused !important;
}

@keyframes rpScrollSmooth {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes rpScrollSmoothRev {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ── Inner page heroes — Gentle Fade Up ──────────────────────────────────── */
.rp-hero__inner {
  animation: gentleFadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.page-hero h1 {
  animation: gentleFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s both;
}

.page-hero .lead {
  animation: gentleFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}

/* ── Feature Card Hover Glow ──────────────────────────────────────────────── */
.feature-item {
  position: relative;
  isolation: isolate;
}

.feature-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 99, 243, 0.06), transparent 70%);
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}

.feature-item:hover::after {
  opacity: 1;
}

/* ── Service Card Image Zoom ──────────────────────────────────────────────── */
.service-card .service-img,
.service-detail-card .sdc-img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.service-card:hover .service-img,
.service-detail-card:hover .sdc-img {
  transform: scale(1.06) !important;
}

/* ── Button Transition Polish ─────────────────────────────────────────────── */
.btn {
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── About Values Hover ───────────────────────────────────────────────────── */
.about-val-card {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-val-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 99, 243, 0.09);
  border-color: rgba(20, 99, 243, 0.22);
}

/* ── Contact Info Card ────────────────────────────────────────────────────── */
.contact-info-card {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── btn-block utility ────────────────────────────────────────────────────── */
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ── FAQ smooth expand ────────────────────────────────────────────────────── */
.faq-answer {
  transition: max-height 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── Nav HOT badge subtle pulse ───────────────────────────────────────────── */
@keyframes badgePulseSubtle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}

.nav-badge-hot {
  animation: badgePulseSubtle 3s ease-in-out infinite;
}

/* ── Plan price pop on tenure change ─────────────────────────────────────── */
@keyframes priceBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); color: #1463f3; }
  100% { transform: scale(1); }
}

.rp-card__price.is-bump strong {
  animation: priceBump 0.35s cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .observe-me {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .observe-fade {
    opacity: 1 !important;
    transition: none !important;
  }

  .rp-hero__inner,
  .page-hero h1,
  .page-hero .lead {
    animation: none !important;
  }

  .rp-marquee__track {
    animation-duration: 500s !important;
  }
}