/* ═══════════════════════════════════════════════════════════════════
   S.L.V INTERIOR WORKS — ANIMATIONS CSS
   Keyframes, transitions and decorative motion effects
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Preloader Spin ──────────────────────────────────────────────── */
@keyframes preloaderSpin {
  to { transform: rotate(360deg); }
}

/* ─── Hero Gradient Shift (kolam border) ──────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Hero Scroll Bounce ──────────────────────────────────────────── */
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 0.4; }
}

/* ─── Ticker Scroll ───────────────────────────────────────────────── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── WhatsApp Ping Ring ──────────────────────────────────────────── */
@keyframes pingRing {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

/* ─── Rangoli Particle Float ─────────────────────────────────────── */
@keyframes particleFloat {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-20vh)  rotate(720deg); opacity: 0; }
}

/* ─── Pulse Glow ──────────────────────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,30,58,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(196,30,58,0); }
}

/* ─── Shimmer (for skeleton loaders / decorative lines) ───────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ─── Float Up Down (decorative icons) ───────────────────────────── */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ─── Rotate Slow (decorative mandala or leaf) ───────────────────── */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Fade In Up ──────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Scale In ────────────────────────────────────────────────────── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Slide In Right ──────────────────────────────────────────────── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Slide In Left ───────────────────────────────────────────────── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Lotus Bloom ─────────────────────────────────────────────────── */
@keyframes lotusBloom {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ─── Border Trace (decorative line draw) ────────────────────────── */
@keyframes borderTrace {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ─── NumberCountUp handled in JS but we add the tick class ─────── */
.count-tick {
  animation: scaleIn 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   DECORATIVE ELEMENTS

   Kolam / Rangoli Borders
   ═══════════════════════════════════════════════════════════════════ */

/* Section header decorative diamonds */
.section-header::before {
  content: '◆ ◇ ◆';
  display: block;
  font-size: 0.6rem;
  color: var(--c-secondary);
  letter-spacing: 8px;
  margin-bottom: 6px;
  text-align: center;
  opacity: 0.7;
}

/* Decorative top kolam line on dark sections */
.why-section,
.testimonials-section,
.stats-section {
  border-top: 1px solid rgba(255,215,0,0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE CARD — 3-D tilt perspective
   ═══════════════════════════════════════════════════════════════════ */
.services-grid {
  perspective: 1200px;
}

.service-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* JS adds inline transform on mousemove — CSS provides base transition */
.service-card.tilt-active {
  transition: transform 0.1s linear;
}

/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO ITEM — reveal mask
   ═══════════════════════════════════════════════════════════════════ */
.portfolio-item {
  animation-fill-mode: both;
}

.portfolio-item[data-aos].aos-animate .portfolio-thumb {
  animation: fadeInUp 0.5s ease both;
}

/* ═══════════════════════════════════════════════════════════════════
   WHY CARD — inner glow on hover
   ═══════════════════════════════════════════════════════════════════ */
.why-card .why-icon {
  position: relative;
}

.why-card .why-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.4s ease;
  z-index: -1;
}

.why-card:hover .why-icon::after { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════
   ABOUT SECTION — animated gradient border
   ═══════════════════════════════════════════════════════════════════ */
.about-img-placeholder {
  animation: gradientShift 5s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS SECTION — connecting line between steps
   ═══════════════════════════════════════════════════════════════════ */
.process-steps {
  position: relative;
}

/* The arrow icons have their own animation */
.process-arrow {
  animation: floatUpDown 2s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   STAT NUMBERS — glow on count complete
   ═══════════════════════════════════════════════════════════════════ */
.stat-number.counted {
  animation: pulseGlow 1s ease;
  color: var(--c-accent);
  text-shadow: 0 0 20px rgba(255,215,0,0.6);
}

/* ═══════════════════════════════════════════════════════════════════
   NAV LINK ACTIVE state
   ═══════════════════════════════════════════════════════════════════ */
.nav-links a.active {
  color: var(--c-accent) !important;
}

.nav-links a.active::after {
  width: calc(100% - 28px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AOS OVERRIDES — custom easing for Andhra feel
   ═══════════════════════════════════════════════════════════════════ */
[data-aos="fade-up"] {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-aos="zoom-in"] {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOVER SHIMMER on .btn-primary
   ═══════════════════════════════════════════════════════════════════ */
.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.btn-primary:hover::after {
  left: 120%;
}

/* ═══════════════════════════════════════════════════════════════════
   FLOATING BUTTON — entrance animation
   ═══════════════════════════════════════════════════════════════════ */
.float-whatsapp {
  animation: scaleIn 0.4s 1.5s ease both;
}

/* ═══════════════════════════════════════════════════════════════════
   GLIGHTBOX — Custom Andhra Theme Overrides
   ═══════════════════════════════════════════════════════════════════ */
.glightbox-overlay {
  background: rgba(28,28,46,0.96) !important;
}

.glightbox-clean .gclose {
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)) !important;
}

.gnext, .gprev {
  background: rgba(255,215,0,0.15) !important;
  border: 1px solid rgba(255,215,0,0.3) !important;
  border-radius: 50% !important;
  color: var(--c-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR — Custom Andhra-themed scrollbar
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-dark); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-primary), var(--c-secondary));
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

/* ═══════════════════════════════════════════════════════════════════
   SELECTION COLOR
   ═══════════════════════════════════════════════════════════════════ */
::selection {
  background: var(--c-accent);
  color: var(--c-dark);
}

/* ═══════════════════════════════════════════════════════════════════
   FOCUS VISIBLE STYLES (accessibility)
   ═══════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}