/* ═══════════════════════════════════════════════════════════
   NextGen IT Hub — animations.css  (v3)
   ═══════════════════════════════════════════════════════════ */

/* ─── PRELOADER ─────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #060E1A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

#preloader.pre-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pre-logo {
  width: 80px;
  height: auto;
  border-radius: 10px;
  animation: preLogoIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes preLogoIn {
  from { opacity: 0; transform: scale(0.7) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.pre-bar-track {
  width: 130px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  animation: preFadeIn 0.25s ease 0.1s both;
}

.pre-bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1A5CFF 0%, #4A7FFF 40%, #C8973A 80%, #DBAF5E 100%);
  animation: preBarFill 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
  box-shadow: 0 0 10px rgba(26, 92, 255, 0.6);
}

@keyframes preBarFill {
  0%   { width: 0%;   }
  60%  { width: 75%;  }
  85%  { width: 92%;  }
  100% { width: 100%; }
}

.pre-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
  animation: preFadeIn 0.5s ease 0.25s both;
}

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

/* Body hidden state while preloader is active */
body.pre-loading {
  overflow: hidden;
}


/* ─── Hero Particle Canvas ─── */
#hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.6;
}

/* ─── Typewriter Cursor ─── */
.typewriter-cursor {
  display: inline-block;
  width: 3px; height: 1.1em;
  background: var(--gold-light);
  margin-left: 3px;
  border-radius: 2px;
  animation: cursorBlink 0.85s step-end infinite;
  vertical-align: middle;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Shimmer Layer on Service Cards ─── */
.shimmer-layer {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.07) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 0.75s ease;
  pointer-events: none;
  z-index: 1;
}
.service-card:hover .shimmer-layer {
  background-position: 200% 0;
}

/* ─── Service Card Mouse-Glow ::after ─── */
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(26, 92, 255, 0.07) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::after { opacity: 1; }

/* ─── Service Card Icon Pop on Hover ─── */
.service-card:hover .icon {
  animation: iconPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes iconPop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.25) rotate(-6deg); }
  100% { transform: scale(1.1) rotate(-4deg); }
}

/* ─── Why Card Mouse-Glow ─── */
.why-card {
  --mx: 50%; --my: 50%;
}
.why-card::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    100px circle at var(--mx) var(--my),
    rgba(200, 151, 58, 0.18),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.why-card:hover::after { opacity: 1; }

/* ─── Industry Card icon scale ─── */
.industry-card .industry-icon svg,
.industry-card > span svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.industry-card:hover .industry-icon svg,
.industry-card:hover > span svg {
  transform: scale(1.2) rotate(-6deg);
}

/* ─── Blog Card SVG Zoom ─── */
.blog-img svg {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-card:hover .blog-img svg {
  transform: scale(1.18) rotate(4deg);
}

/* ─── Button Ripple ─── */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: ripple 0.65s linear;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Gold button subtle pulse */
.btn-gold {
  animation: goldGlow 3.5s ease-in-out infinite;
}
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(200,151,58,0.30); }
  50%       { box-shadow: 0 8px 36px rgba(200,151,58,0.55); }
}

/* ─── Nav Link Underline Slide ─── */
.nav-links a:not(.btn) {
  position: relative;
}
.nav-links a:not(.btn)::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%; right: 50%;
  height: 2px; border-radius: 1px;
  background: var(--royal-light);
  transition: left 0.28s ease, right 0.28s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after {
  left: 16px; right: 16px;
}

/* ─── Metric / Stat counter underline ─── */
.metric-num, .stat-num { position: relative; }
.metric-num::after, .stat-num::after {
  content: '';
  position: absolute; bottom: -4px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%; height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  border-radius: 1px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.counted .metric-num::after,
.counted .stat-num::after {
  transform: translateX(-50%) scaleX(1);
}

/* ─── Section Label Pulse Dot ─── */
.section-label {
  position: relative;
}
.section-label::before {
  content: '';
  position: absolute; left: -14px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--royal);
  animation: dotPulse 2s ease-in-out infinite;
}
.section-dark .section-label::before,
.section-dark-alt .section-label::before { background: var(--gold); }
@keyframes dotPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50%       { transform: translateY(-50%) scale(1.6); opacity: 0.5; }
}

/* ─── Stats Bar Scanline ─── */
.stats-bar { position: relative; overflow: hidden; }
.stats-bar::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: scanline 4s ease-in-out 1.5s infinite;
  z-index: 2;
}
@keyframes scanline {
  0%   { left: -10%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* ─── Page Hero Breath ─── */
.page-hero { position: relative; overflow: hidden; }
.page-hero h1 { animation: slideDown 0.65s cubic-bezier(0.4, 0, 0.2, 1) both; }
.page-hero p  { animation: slideDown 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.14s both; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Hero Floating Orbs ─── */
.orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(55px);
}
.orb-1 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(26,92,255,0.10), transparent 70%);
  animation: orbDrift1 13s ease-in-out infinite;
}
.orb-2 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(200,151,58,0.08), transparent 70%);
  animation: orbDrift2 17s ease-in-out infinite reverse;
}
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(50px, -35px); }
  66%       { transform: translate(-25px, 45px); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-40px, -55px); }
}

/* ─── CTA Breath ─── */
.cta { position: relative; overflow: hidden; }
.cta::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(26,92,255,0.10), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(200,151,58,0.06), transparent 50%);
  animation: ctaPulse 6s ease-in-out infinite alternate;
}
@keyframes ctaPulse {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* ─── WhatsApp Button Bounce ─── */
.whatsapp-btn { animation: waBounce 3s ease-in-out infinite; }
@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  45%       { transform: translateY(-7px); }
  60%       { transform: translateY(-3px); }
}
.whatsapp-btn:hover { animation: none; transform: scale(1.12) !important; }

/* ─── Callback Button Ring ─── */
.callback-btn::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(26,92,255,0.5);
  animation: callRing 2.2s ease-out infinite;
}
@keyframes callRing {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ─── FAQ slide on hover ─── */
.faq-item { transition: all 0.3s ease; }
.faq-item:hover { border-color: rgba(26,92,255,0.18); transform: translateX(5px); }

/* ─── Mission/Vision card top bar ─── */
.mv-card { position: relative; overflow: hidden; }
.mv-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.mv-card:hover::before { transform: scaleX(1); }

/* ─── Contact item icon bounce ─── */
.contact-item .icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contact-item:hover .icon { transform: scale(1.2) rotate(-5deg); }

/* ─── Tech Badge lift ─── */
.tech-badge {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease, color 0.3s ease;
}
.tech-badge:hover { transform: translateY(-3px) scale(1.06); }

/* ─── Service index item underline ─── */
.service-index-item { position: relative; overflow: hidden; }
.service-index-item::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--royal);
  transition: width 0.3s ease;
}
.service-index-item:hover::after { width: 100%; }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V4: ADVANCED AGENCY ANIMATIONS (Cursor, Marquee, Parallax, Page Transitions, Magnetic)
   ═══════════════════════════════════════════════════════════ */

/* ─── Custom Interactive Cursor ─── */
.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 20px; height: 20px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s;
  will-change: transform, width, height;
}
.custom-cursor.cursor-hover {
  width: 60px; height: 60px;
  background: white;
}
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .custom-cursor { display: none !important; }
}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button {
  cursor: none !important;
}

/* ─── Text Split Animations ─── */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
}
.reveal.visible .split-char, .split-done.visible .split-char {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Infinite Marquee ─── */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  width: 100%;
}
.marquee-content {
  display: flex;
  animation: marqueeScroll 25s linear infinite;
}
.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); /* Moves exactly half the width since we duplicated content inside it */ }
}

/* ─── Parallax ─── */
.parallax-el {
  will-change: transform;
}

/* ─── Magnetic Buttons ─── */
.magnetic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform 0.1s linear, background-color 0.3s ease;
}
.magnetic-text {
  display: inline-block;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ─── Page Transitions ─── */
.page-transition-overlay {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--royal);
  z-index: 9999998;
  transition: top 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}
body.is-transitioning .page-transition-overlay {
  top: 0;
}

/* ═══════════════════════════════════════════════════════════
   OPTION 1: 3D Mouse-Tracked Tilt Cards CSS
   ═══════════════════════════════════════════════════════════ */
.service-card, .industry-card, .blog-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.card-glare {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  transition: background 0.1s ease;
}

/* ═══════════════════════════════════════════════════════════
   OPTION 2: Scroll-Triggered Parallax Masking
   ═══════════════════════════════════════════════════════════ */
.wipe-mask {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 1.2s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: clip-path;
}
.wipe-mask.visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.parallax-wipe {
  transform: scale(1.1) translateX(-5%);
  transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
}
.wipe-mask.visible .parallax-wipe {
  transform: scale(1) translateX(0);
}

/* ═══════════════════════════════════════════════════════════
   OPTION 4: Floating Glassmorphism Elements
   ═══════════════════════════════════════════════════════════ */
.glass-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
  animation: floatGlass 12s ease-in-out infinite alternate;
}
.glass-shape-0 {
  width: 150px; height: 150px;
  top: 10%; left: 5%;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation-duration: 14s;
}
.glass-shape-1 {
  width: 80px; height: 80px;
  top: 60%; left: 80%;
  border-radius: 50%;
  animation-duration: 9s;
  animation-direction: alternate-reverse;
}
.glass-shape-2 {
  width: 200px; height: 100px;
  bottom: 20%; left: 15%;
  border-radius: 20px;
  animation-duration: 18s;
  transform: rotate(15deg);
}
@keyframes floatGlass {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(10deg); }
  100% { transform: translateY(15px) rotate(-15deg); }
}