/* ============================================================
   ARTISTICS — PREMIUM ANIMATION SYSTEM
   Color palette: #00B9F4 (primary), #65DAFF (light), #0D0D0D (bg)
   ============================================================ */

/* ---------- 1. PAGE LOADER ---------- */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0D0D0D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Animated concentric rings behind the logo */
.loader-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.loader-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(101, 218, 255, 0.25);
  animation: loaderRingPulse 2.4s ease-in-out infinite;
}
.loader-ring:nth-child(1) { width: 160px; height: 160px; animation-delay: 0s;    border-color: rgba(0, 185, 244, 0.6); }
.loader-ring:nth-child(2) { width: 260px; height: 260px; animation-delay: 0.3s;  border-color: rgba(0, 185, 244, 0.35); }
.loader-ring:nth-child(3) { width: 380px; height: 380px; animation-delay: 0.6s;  border-color: rgba(0, 185, 244, 0.2); }
.loader-ring:nth-child(4) { width: 520px; height: 520px; animation-delay: 0.9s;  border-color: rgba(101, 218, 255, 0.12); }
.loader-ring:nth-child(5) { width: 680px; height: 680px; animation-delay: 1.2s;  border-color: rgba(101, 218, 255, 0.07); }

@keyframes loaderRingPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.6; }
}

/* Logo in loader */
.loader-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  animation: loaderLogoFloat 3s ease-in-out infinite;
}
.loader-logo-wrap img {
  width: 110px;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0, 185, 244, 0.8)) drop-shadow(0 0 60px rgba(101, 218, 255, 0.4));
  animation: loaderLogoBreathe 2s ease-in-out infinite;
}
@keyframes loaderLogoBreathe {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(0, 185, 244, 0.7)) drop-shadow(0 0 50px rgba(101,218,255,0.3)); }
  50%       { filter: drop-shadow(0 0 44px rgba(0, 185, 244, 1))   drop-shadow(0 0 80px rgba(101,218,255,0.6)); }
}
@keyframes loaderLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Progress bar */
.loader-progress-wrap {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.loader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00B9F4, #65DAFF);
  border-radius: 99px;
  transition: width 0.05s linear;
  box-shadow: 0 0 12px rgba(0, 185, 244, 0.9);
}

/* Loader text */
.loader-text {
  position: relative;
  z-index: 2;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 16px;
  animation: loaderTextBlink 1.5s ease-in-out infinite;
}
@keyframes loaderTextBlink {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* Loader wave sweep at bottom */
.loader-wave {
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 100px;
  background: linear-gradient(180deg, transparent, rgba(0,185,244,0.06));
  animation: loaderWaveSweep 3s ease-in-out infinite;
}
@keyframes loaderWaveSweep {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(10%) scaleY(1.4); }
  100% { transform: translateX(0) scaleY(1); }
}


/* ---------- 2. GLOBAL SCROLL REVEAL SYSTEM ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-up, .reveal-scale {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal           { transform: translateY(50px); }
.reveal-left      { transform: translateX(-60px); }
.reveal-right     { transform: translateX(60px); }
.reveal-scale     { transform: scale(0.88); }

.reveal.active, .reveal-left.active, .reveal-right.active,
.reveal-up.active, .reveal-scale.active {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s !important; }
.reveal-delay-2 { transition-delay: 0.22s !important; }
.reveal-delay-3 { transition-delay: 0.34s !important; }
.reveal-delay-4 { transition-delay: 0.46s !important; }


/* ---------- 3. BACKGROUND 3D GEOMETRIC CANVAS ---------- */
#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
}


/* ---------- 4. PER-SECTION GRADIENT RINGS ---------- */
.section-ring-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.s-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(101, 218, 255, 0.14);
  animation: sRingSpin 18s linear infinite;
}
.s-ring-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 185, 244, 0.08) 0%, transparent 70%);
  animation: sRingBreath 6s ease-in-out infinite;
}
@keyframes sRingSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sRingBreath {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* Hero-specific large ring */
.hero .section-ring-wrap .s-ring:nth-child(1) {
  width: 600px; height: 600px;
  top: 50%; left: 50%;
  border-color: rgba(0, 185, 244, 0.2);
  animation-duration: 22s;
}
.hero .section-ring-wrap .s-ring:nth-child(2) {
  width: 900px; height: 900px;
  top: 50%; left: 50%;
  border-color: rgba(101, 218, 255, 0.1);
  animation-duration: 30s;
  animation-direction: reverse;
}
/* ring glow blobs */
.about-section    .s-ring-glow { width: 700px; height: 700px; top: 20%; left: -15%; }
.services-section .s-ring-glow { width: 800px; height: 800px; top: 30%; right: -20%; left: auto; }
.stats-section    .s-ring-glow { width: 600px; height: 600px; top: 50%; left: 50%; }
.portfolio-section .s-ring-glow { width: 900px; height: 900px; top: 0%;  left: 50%; }
.testimonials-section .s-ring-glow { width: 700px; height: 700px; top: 30%; right: 0%; left: auto; }
.benefits-section .s-ring-glow { width: 750px; height: 750px; top: 50%; left: 0%; }
.cta-section      .s-ring-glow { width: 1000px;height: 1000px; top: 50%; left: 50%; }


/* ---------- 5. GLASSMORPHISM BUTTON ENHANCEMENTS ---------- */
/* Base glass styles are in styles.css — these add animation polish */

/* Keep mag-glow for backwards compat but tone it down */
.btn-pill .mag-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
              linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)) border-box;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
.btn-pill:hover .mag-glow { opacity: 0.6; }

/* Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  width: 20px; height: 20px;
  pointer-events: none;
  transform: scale(0);
  animation: rippleGrow 0.65s ease-out forwards;
}
@keyframes rippleGrow {
  to { transform: scale(30); opacity: 0; }
}

/* ───────────────────────────────────────────────────────
   GLOBAL GLASSMORPHISM BUTTON UTILITIES
   Use .btn-glass for pill/text buttons,
   .btn-glass-circle for icon arrow buttons
─────────────────────────────────────────────────────── */
.btn-glass {
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 100px; /* pill */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 500;
  padding: 14px 30px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.btn-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.08) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: inherit;
  pointer-events: none;
}
.btn-glass:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255,255,255,0.07);
}
.btn-glass:hover::before { opacity: 1; }
.btn-glass:active { transform: translateY(0) scale(0.97); }

/* Rectangular variant */
.btn-glass-rect {
  border-radius: 8px;
}

/* Circular icon arrow button */
.btn-glass-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #080808;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), box-shadow 0.32s ease;
}
.btn-glass-circle:hover {
  transform: scale(1.12) rotate(14deg);
  box-shadow: 0 10px 34px rgba(255,255,255,0.18);
}
.btn-glass-circle svg { width: 15px; height: 15px; }


/* Portfolio filter buttons */
.portfolio-filter-btn {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.portfolio-filter-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,185,244,0.15), rgba(101,218,255,0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.portfolio-filter-btn:hover::after   { opacity: 1; }
.portfolio-filter-btn:hover          { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,185,244,0.25); }
.portfolio-filter-btn.active         { box-shadow: 0 0 20px rgba(0,185,244,0.4) inset; }

/* Nav hamburger lines */
.nav-hamburger {
  transition: transform 0.3s ease;
}
.nav-hamburger:hover { transform: scale(1.15) rotate(90deg); }


/* ---------- 6. CARDS — GLASSMORPHISM HOVER + TILT ---------- */
.service-card, .why-choose-card, .process-card, .benefit-card, .blog-card, .social-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease,
              background 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card:hover    { box-shadow: 0 24px 60px rgba(0, 185, 244, 0.18), 0 0 0 1px rgba(0,185,244,0.3); }
.why-choose-card:hover { box-shadow: 0 16px 50px rgba(0, 185, 244, 0.15), 0 0 0 1px rgba(0,185,244,0.25); }
.process-card:hover    { box-shadow: 0 20px 55px rgba(0, 185, 244, 0.16); }
.benefit-card:hover    { box-shadow: 0 20px 55px rgba(0, 185, 244, 0.18); }
.blog-card:hover       { box-shadow: 0 20px 55px rgba(0, 185, 244, 0.16); }
.social-card:hover     { box-shadow: 0 16px 50px rgba(0, 185, 244, 0.2); }


/* Icon neon glow on hover */
.service-card-icon svg, .benefit-icon svg, .about-icon svg {
  transition: filter 0.4s ease, stroke 0.4s ease;
}
.service-card:hover .service-card-icon svg,
.benefit-card:hover .benefit-icon svg,
.about-info-item:hover .about-icon svg {
  filter: drop-shadow(0 0 10px rgba(0,185,244,0.8));
  stroke: #65DAFF;
}

/* Service card arrow */
.service-card-arrow {
  display: inline-flex;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.3s ease;
}
.service-card:hover .service-card-arrow { transform: translate(4px, -4px) scale(1.3); color: #65DAFF; }

/* Social card arrow */
.social-card-arrow {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.social-card:hover .social-card-arrow { transform: translate(4px,-4px) scale(1.5); }


/* ---------- 7. STAT COUNTER GLOW ---------- */
.stat-number {
  transition: text-shadow 0.4s ease;
}
.stat-item:hover .stat-number {
  text-shadow: 0 0 30px rgba(0,185,244,0.7), 0 0 60px rgba(101,218,255,0.35);
}


/* ---------- 8. PORTFOLIO ITEM PARALLAX OVERLAY ---------- */
.portfolio-item {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
  overflow: hidden;
}
.portfolio-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 28px 70px rgba(0,185,244,0.25);
}
.portfolio-img {
  position: relative;
  overflow: hidden;
}
.portfolio-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,185,244,0.25), rgba(101,218,255,0.15));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.portfolio-item:hover .portfolio-img::after { opacity: 1; }
.portfolio-img .img-placeholder {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.portfolio-item:hover .portfolio-img .img-placeholder { transform: scale(1.08); }


/* ---------- 9. TESTIMONIAL SLIDER TRANSITIONS ---------- */
.testimonial-slide {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.testimonial-slide.exiting {
  opacity: 0;
  transform: translateX(-40px);
}
.testimonial-slide.entering {
  opacity: 0;
  transform: translateX(40px);
}
#prevTestimonial, #nextTestimonial {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, color 0.3s ease;
}
#prevTestimonial:hover { transform: translateX(-4px) scale(1.15); box-shadow: 0 0 20px rgba(0,185,244,0.5); }
#nextTestimonial:hover { transform: translateX(4px)  scale(1.15); box-shadow: 0 0 20px rgba(0,185,244,0.5); }


/* ---------- 10. NAV SCROLL GLASSMORPHISM ---------- */
.navbar.scrolled {
  background: rgba(13, 13, 13, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.3), 0 1px 0 rgba(0,185,244,0.15) !important;
}

/* Nav links hover underline removed as per request */


/* ---------- 11. HERO PARTICLES (canvas-driven) ---------- */
#hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* ---------- 12. MARQUEE SPEED VARIATION ---------- */
.marquee-track {
  animation: marqueeScroll 18s linear infinite;
  will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Marquee item hover glow */
.marquee-item {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.marquee-item:hover {
  color: #65DAFF;
  text-shadow: 0 0 20px rgba(0,185,244,0.7);
}


/* ---------- 13. PLAY BUTTON PULSE ---------- */
.hero-play-btn, .video-play-btn {
  animation: playPulse 2.5s ease-in-out infinite;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,185,244,0.45); }
  50%       { box-shadow: 0 0 0 20px rgba(0,185,244,0); }
}
.hero-play-btn:hover, .video-play-btn:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 40px rgba(0,185,244,0.8) !important;
}


/* ---------- 14. CTA SECTION GLOW TEXT ---------- */
.cta-big-text {
  transition: text-shadow 0.5s ease;
  cursor: default;
}
.cta-big-text:hover {
  text-shadow: 0 0 60px rgba(0,185,244,0.25), 0 0 120px rgba(101,218,255,0.1);
}

/* CTA arrow circle bounce */
.cta-circle {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.cta-big-text:hover .cta-circle {
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 0 30px rgba(0,185,244,0.6);
}


/* ---------- 15. FOOTER LINK HOVER ---------- */
.footer-col a {
  position: relative;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-col a:hover {
  color: #65DAFF;
  padding-left: 6px;
}

/* Footer social icon glow */
.footer-socials a {
  transition: color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.footer-socials a:hover {
  color: #65DAFF;
  filter: drop-shadow(0 0 8px rgba(0,185,244,0.9));
  transform: translateY(-4px) scale(1.2);
}

/* Newsletter input glow */
.newsletter-input {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.newsletter-input:focus {
  box-shadow: 0 0 0 2px rgba(0,185,244,0.4), 0 0 20px rgba(0,185,244,0.15);
  outline: none;
}


/* ---------- 16. SECTION LABEL SHIMMER ---------- */
.section-label {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}
.section-label::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(101,218,255,0.25) 50%, transparent 70%);
  animation: labelShimmer 4s ease-in-out infinite;
}
@keyframes labelShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}


/* ---------- 17. FLOATING ACCENT DOTS ---------- */
@keyframes floatDot {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50%       { transform: translateY(-14px) scale(1.3); opacity: 1; }
}
.float-dot {
  animation: floatDot 3s ease-in-out infinite;
}
.float-dot:nth-child(2) { animation-delay: 0.7s; }
.float-dot:nth-child(3) { animation-delay: 1.4s; }


/* ---------- 18. PRICING BAR ICON SPIN ON HOVER ---------- */
.pricing-item {
  transition: transform 0.4s ease, background 0.4s ease;
}
.pricing-item:hover { transform: translateY(-6px); }
.pricing-item-icon svg {
  transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.pricing-item:hover .pricing-item-icon svg {
  filter: drop-shadow(0 0 12px rgba(0,185,244,0.9));
  transform: rotateY(180deg);
}


/* ---------- 19. BLOG CARD IMAGE HOVER PARALLAX ---------- */
.blog-img img, .blog-img .img-placeholder {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-card:hover .blog-img img,
.blog-card:hover .blog-img .img-placeholder {
  transform: scale(1.08) translateY(-4px);
}

/* Blog read-more link */
.blog-read-more {
  transition: color 0.3s ease, gap 0.3s ease, text-shadow 0.3s ease;
}
.blog-read-more:hover {
  color: #65DAFF;
  text-shadow: 0 0 14px rgba(0,185,244,0.7);
}
.blog-read-more svg {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.blog-read-more:hover svg { transform: translate(4px, -4px) scale(1.2); }


/* ---------- 20. PROCESS CARD EXPAND ICON ---------- */
.process-expand {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s ease,
              text-shadow 0.3s ease;
}
.process-card:hover .process-expand {
  transform: rotate(45deg);
  color: #65DAFF;
  text-shadow: 0 0 12px rgba(0,185,244,0.8);
}
.process-step-icon svg {
  transition: filter 0.4s ease, transform 0.5s ease;
}
.process-card:hover .process-step-icon svg {
  filter: drop-shadow(0 0 10px rgba(0,185,244,0.8));
  transform: rotate(-15deg) scale(1.1);
}


/* ---------- 21. HERO HEADING CHARACTER STAGGER ---------- */
.hero-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: charReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes charReveal {
  to { opacity: 1; transform: none; }
}


/* ---------- 22. SCROLL PROGRESS BAR ---------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00B9F4, #65DAFF, #00B9F4);
  background-size: 200% 100%;
  z-index: 99998;
  animation: scrollBarShimmer 3s linear infinite;
  box-shadow: 0 0 10px rgba(0,185,244,0.8);
  transition: width 0.1s linear;
}
@keyframes scrollBarShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}


/* ---------- 23. GLOW SPOTS (existing class enhanced) ---------- */
.glow-effect {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,185,244,0.12) 0%, transparent 70%);
  filter: blur(40px);
  animation: glowDrift 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33%       { transform: translate(30px, -20px) scale(1.1); opacity: 1; }
  66%       { transform: translate(-20px, 20px) scale(0.9); opacity: 0.7; }
}


/* ---------- 24. ABOUT 3D IMAGE TILT FRAME ---------- */
.about-3d-img {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
  transform-style: preserve-3d;
}
.about-3d-img:hover {
  box-shadow: 0 30px 80px rgba(0,185,244,0.2);
}


/* ---------- 25. RATING STARS PULSE ---------- */
.rating-stars svg, .testimonial-stars svg {
  transition: filter 0.3s ease, transform 0.3s ease;
}
.testimonial-rating-card:hover .rating-stars svg {
  filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.9));
  animation: starPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes starPop {
  from { transform: scale(0.7); }
  to   { transform: scale(1.2); }
}


/* ---------- 26. RESPONSIVE: keep animations smooth on mobile ---------- */
@media (max-width: 768px) {
  .s-ring-glow { opacity: 0.4 !important; }
  #bg-canvas   { opacity: 0.2 !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    transform: translateY(25px) !important;
  }
}

/* ========================================================
   USER REQUEST: REMOVE BLUE RING BACKGROUNDS GLOBALLY 
   ======================================================== */
.section-ring-wrap,
.loader-rings {
    display: none !important;
}