/* ============================================
   ANIMATIONS.CSS — Premium Animation Layer
   Oryzo.ai-inspired GSAP-powered experience
   ============================================ */

/* --- Smooth scroll override (GSAP handles it) --- */
html { scroll-behavior: auto; }

/* --- GSAP Reveal Base States --- */
.gsap-reveal { opacity: 0; visibility: hidden; }
.gsap-reveal.active { opacity: 1; visibility: visible; }

/* --- Scroll Progress Enhanced --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #dc2626, #991b1b, #dc2626);
  z-index: 99998;
  transform-origin: left;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.4), 0 0 4px rgba(220, 38, 38, 0.6);
}

/* --- Section Dividers --- */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.06) 20%, rgba(220, 38, 38, 0.12) 50%, rgba(15, 23, 42, 0.06) 80%, transparent 100%);
  margin: 0 auto;
  transform: scaleX(0);
  opacity: 0;
}
.section-divider.active {
  transform: scaleX(1);
  opacity: 1;
}

/* --- Magnetic Button --- */
[data-magnetic] {
  position: relative;
  will-change: transform;
}

/* --- 3D Card Tilt --- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-tilt]:hover {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.14), 0 0 30px rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
}

/* --- Parallax Image Container --- */
[data-parallax] {
  overflow: hidden;
  will-change: transform;
}
[data-parallax] img {
  will-change: transform;
  transform: scale(1.15);
}

/* --- Image Parallax on Scroll --- */
[data-parallax-img] {
  will-change: transform;
}

/* --- Premium Card Hover Glow --- */
.showcase-card {
  position: relative;
  overflow: hidden;
}
.showcase-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(220, 38, 38, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.showcase-card:hover::before {
  opacity: 1;
}
.showcase-card > * {
  position: relative;
  z-index: 1;
}

/* --- Char Card Hover Glow --- */
.char-card {
  position: relative;
  overflow: hidden;
}
.char-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.03) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.char-card:hover::before {
  opacity: 1;
}
.char-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* --- Industry Item Hover --- */
.industry-item {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}
.industry-item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.1);
}

/* --- Button Premium Hover --- */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  pointer-events: none;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.35);
  transform: translateY(-2px);
}
.btn-secondary:hover {
  border-color: rgba(220, 38, 38, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* --- Nav Link Premium Hover --- */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-blue);
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* --- Review Card Hover --- */
.review-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* --- Contact Info Card Hover --- */
.contact-info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-info-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* --- Footer Link Hover --- */
.footer-links a {
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-links a:hover {
  color: var(--accent-blue);
  padding-left: 4px;
}

/* --- Social Icon Hover --- */
.footer-social a,
.top-bar-social a {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease,
              background 0.3s ease;
}
.footer-social a:hover,
.top-bar-social a:hover {
  transform: translateY(-3px) scale(1.1);
}

/* --- WhatsApp Float Animation --- */
.whatsapp-float {
  animation: whatsappPulse 2s infinite;
}
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
  50% { box-shadow: 0 4px 25px rgba(37, 211, 102, 0.5); }
}

/* --- Back to Top Enhanced --- */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
}

/* --- Form Input Focus Glow --- */
.form-control:focus {
  border-color: rgba(220, 38, 38, 0.4);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Star Rating Hover --- */
.star-rating-input i {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
  cursor: pointer;
}
.star-rating-input i:hover {
  transform: scale(1.2);
}

/* --- Preloader GSAP States --- */
.preloader-gsap .preloader-left,
.preloader-gsap .preloader-right {
  will-change: transform;
}
.preloader-gsap .preloader-letter-img {
  will-change: transform, opacity;
}

/* --- Hero Video Scale --- */
.hero-video {
  transform: scale(1.05);
  will-change: transform;
}

/* --- Image Zoom on Hover (Products) --- */
.showcase-card-image {
  overflow: hidden;
}
.showcase-card-image img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.showcase-card:hover .showcase-card-image img {
  transform: scale(1.08);
}

/* --- Feature Icon Hover --- */
.feature-card .pbmit-featured-wrapper {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-card:hover .pbmit-featured-wrapper {
  transform: scale(1.08) translateY(-4px);
}

/* --- About Image Badge Pulse --- */
.about-image-badge {
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* --- Counter Accent Color Animation --- */
.hero-stat-number .accent {
  transition: color 0.3s ease;
}
.hero-stat:hover .accent {
  color: var(--accent-blue);
}

/* --- Mobile: Disable Premium Effects --- */
@media (max-width: 768px) {
  [data-magnetic] { transform: none !important; }
  [data-tilt] { transform: none !important; }
  .showcase-card::before { display: none; }
  .char-card::before { display: none; }
  .industry-item:hover { transform: none; }
  .btn::before { display: none; }
  .btn-primary:hover { transform: none; }
  .btn-secondary:hover { transform: none; }
  .nav-link::after { display: none; }
  .back-to-top { display: block; }
  .about-image-badge { animation: none; }
  .whatsapp-float { animation: none; }
  .scroll-progress { display: none; }
}

/* ============================================
   GLASSMORPHISM ACCENTS — Minimal + Glass
   ============================================ */

/* --- Hero Glass Overlay --- */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(255,255,255,0.8) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- Navbar Glass on Scroll --- */
.navbar.scrolled {
  background: rgba(248, 250, 252, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

/* --- Glass Floating Buttons --- */
.whatsapp-float {
  background: rgba(37, 211, 102, 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(37, 211, 102, 0.3);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.25);
}
.whatsapp-float:hover {
  background: rgba(37, 211, 102, 0.95) !important;
  box-shadow: 0 8px 40px rgba(37, 211, 102, 0.4);
}

.back-to-top {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.back-to-top:hover {
  background: rgba(220, 38, 38, 0.9) !important;
  border-color: rgba(220, 38, 38, 0.3);
  color: #fff;
}

/* --- Product Card Glass Hover --- */
.product-showcase-card {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-showcase-card:hover {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Blog Card Glass Hover --- */
.blog-card {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-card:hover {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Enquiry Modal Glass --- */
.enquiry-modal-content {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

/* --- Image Modal Glass --- */
.image-modal .modal-content {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --- Search Overlay Glass --- */
.search-overlay {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search-overlay-content {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Trust Bar Glass Edge Fade --- */
.trust-bar::before,
.trust-bar::after {
  content: '';
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.trust-bar::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary), transparent);
}
.trust-bar::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary), transparent);
}

/* --- Reduced Motion: Disable Glass --- */
@media (prefers-reduced-motion: reduce) {
  .navbar.scrolled { backdrop-filter: none; }
  .whatsapp-float { backdrop-filter: none; }
  .back-to-top { backdrop-filter: none; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-progress { display: none; }
  .section-divider { opacity: 1; transform: scaleX(1); }
  .whatsapp-float { animation: none; }
  .about-image-badge { animation: none; }
}

/* --- Print: Hide Animation Elements --- */
@media print {
  .scroll-progress, .section-divider, .cursor-dot, .cursor-ring, .whatsapp-float, .back-to-top { display: none !important; }
}