/*
  Servixa Home
  Fast Loading + Smooth Scrolling + Mobile Optimized Animations

  Features:
  - No Preloader Animation
  - No Skeleton Loading Animation
  - No Text Shimmer
  - Smooth Mobile Scrolling
  - Prevent Horizontal Overflow
  - Prevent Animation Overflow
  - Lightweight Scroll Reveal
  - Touch-Friendly
  - Reduced Motion Support
*/


/* =========================================================
   GLOBAL RESET & SCROLL FIX
   ========================================================= */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  overscroll-behavior-x: none;
}


body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-y: auto;

  opacity: 1;
  visibility: visible;

  /* Better touch scrolling */
  -webkit-overflow-scrolling: touch;

  /* Prevent horizontal bounce */
  overscroll-behavior-x: none;
}


/* =========================================================
   UNIVERSAL BOX SIZING
   Prevents width overflow
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* =========================================================
   IMAGES & MEDIA
   Prevent horizontal overflow
   ========================================================= */

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}


img {
  height: auto;
}


/* =========================================================
   TEXT OVERFLOW FIX
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}


/* =========================================================
   IMPORTANT:
   Prevent elements from creating horizontal scrolling
   ========================================================= */

section,
header,
footer,
main,
nav,
article,
aside {
  max-width: 100%;
}


/* =========================================================
   SCROLL REVEAL
   Lightweight
   ========================================================= */

.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;

  transition:
    opacity 0.5s ease-out,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


.reveal {
  transform: translate3d(0, 18px, 0);
}


.reveal-left {
  transform: translate3d(-18px, 0, 0);
}


.reveal-right {
  transform: translate3d(18px, 0, 0);
}


.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   STAGGER DELAYS
   ========================================================= */

.delay-100 {
  transition-delay: 50ms;
}

.delay-200 {
  transition-delay: 100ms;
}

.delay-300 {
  transition-delay: 150ms;
}

.delay-400 {
  transition-delay: 200ms;
}

.delay-500 {
  transition-delay: 250ms;
}

.delay-600 {
  transition-delay: 300ms;
}


/* =========================================================
   PULSE
   ========================================================= */

.pulse-slow {
  animation: pulseSlow 5s ease-in-out infinite;
}


@keyframes pulseSlow {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.025);
    opacity: 1;
  }

}


/* =========================================================
   SOFT GLOW
   ========================================================= */

.pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}


@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(6, 182, 212, 0);
  }

  50% {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
  }

}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.float-card-slow {
  animation: floatCardSlow 7s ease-in-out infinite;
}


.float-card-medium {
  animation: floatCardMedium 6s ease-in-out infinite;
}


@keyframes floatCardSlow {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }

}


@keyframes floatCardMedium {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -4px, 0);
  }

}


/* =========================================================
   BUTTON RIPPLE
   ========================================================= */

.btn-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


.btn-ripple::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 100px;
  height: 100px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.25);

  transform:
    translate3d(-50%, -50%, 0)
    scale(0);

  opacity: 0;

  pointer-events: none;

  transition:
    transform 0.4s ease-out,
    opacity 0.4s ease-out;
}


.btn-ripple:active::after {
  transform:
    translate3d(-50%, -50%, 0)
    scale(2);

  opacity: 1;

  transition:
    transform 0s,
    opacity 0s;
}


/* =========================================================
   PAGE TRANSITION
   ========================================================= */

.page-fade-enter {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}


.page-fade-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* =========================================================
   TEXT SHIMMER DISABLED
   Keeps text clear and instantly visible
   ========================================================= */

.text-shimmer {
  background: none;
  color: inherit;

  -webkit-text-fill-color: currentColor;

  animation: none;
}


/* =========================================================
   IMAGE ZOOM
   Desktop / Real Hover Only
   ========================================================= */

.img-zoom-hover {
  overflow: hidden;
}


.img-zoom-hover img {
  display: block;

  width: 100%;
  max-width: 100%;

  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


@media (hover: hover) and (pointer: fine) {

  .img-zoom-hover:hover img {
    transform: scale(1.03);
  }

}


/* =========================================================
   ICON ROTATION
   Desktop Only
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .icon-rotate-hover:hover i {
    animation: rotateIcon 0.4s ease-in-out;
  }

}


@keyframes rotateIcon {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   SKELETON LOADING DISABLED
   ========================================================= */

.skeleton-loading {
  background: none;
  animation: none;
}


/* =========================================================
   MOBILE SCROLL OPTIMIZATION
   ========================================================= */

@media (max-width: 768px) {

  html {
    scroll-behavior: smooth;

    /* Prevent horizontal overscroll */
    overscroll-behavior-x: none;
  }


  body {
    overflow-x: hidden;
    overflow-y: auto;

    /* Native mobile scrolling */
    -webkit-overflow-scrolling: touch;

    /* Prevent side bounce */
    overscroll-behavior-x: none;
  }


  /* Smaller reveal distance */

  .reveal {
    transform: translate3d(0, 12px, 0);
    transition-duration: 0.4s;
  }


  .reveal-left {
    transform: translate3d(-12px, 0, 0);
    transition-duration: 0.4s;
  }


  .reveal-right {
    transform: translate3d(12px, 0, 0);
    transition-duration: 0.4s;
  }


  /* Faster stagger */

  .delay-100 {
    transition-delay: 30ms;
  }

  .delay-200 {
    transition-delay: 60ms;
  }

  .delay-300 {
    transition-delay: 90ms;
  }

  .delay-400 {
    transition-delay: 120ms;
  }

  .delay-500 {
    transition-delay: 150ms;
  }

  .delay-600 {
    transition-delay: 180ms;
  }


  /* Slow decorative animations */

  .pulse-slow {
    animation-duration: 6s;
  }

  .pulse-glow {
    animation-duration: 5s;
  }

  .float-card-slow {
    animation-duration: 8s;
  }

  .float-card-medium {
    animation-duration: 7s;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .reveal {
    transform: translate3d(0, 10px, 0);
  }


  .reveal-left {
    transform: translate3d(-10px, 0, 0);
  }


  .reveal-right {
    transform: translate3d(10px, 0, 0);
  }


  /* Remove decorative continuous animations
     on smaller mobile screens */

  .pulse-slow,
  .pulse-glow,
  .float-card-slow,
  .float-card-medium {
    animation: none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }


  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }

}


/* =========================================================
   FINAL MOBILE OVERFLOW SAFETY
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/*
  IMPORTANT:
  If horizontal scrolling still appears after this CSS,
  the problem is likely caused by a specific element
  with fixed width, negative margin, position:absolute,
  large transform, or an oversized image/container.

  Common causes:
  - width: 100vw
  - fixed width larger than screen
  - margin-left / margin-right causing overflow
  - transform: translateX(...)
  - absolute positioned decorative elements
  - large box-shadow
  - unresponsive tables
*/