/* PAPAN SSD LTD — animations.css */

/* Core scroll reveal */
.animate {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 760ms var(--ease-spring),
    transform 760ms var(--ease-spring),
    filter 760ms var(--ease-spring),
    clip-path 900ms var(--ease-spring);
  will-change: opacity, transform;
}

.animate.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Reveal directions */
.fade-up {
  transform: translate3d(0, 32px, 0);
}

.fade-down {
  transform: translate3d(0, -32px, 0);
}

.fade-left {
  transform: translate3d(40px, 0, 0);
}

.fade-right {
  transform: translate3d(-40px, 0, 0);
}

.zoom-in {
  transform: scale(.94);
}

.zoom-out {
  transform: scale(1.06);
}

.blur-in {
  filter: blur(12px);
}

.reveal-mask {
  clip-path: inset(0 0 100% 0);
}

.reveal-line {
  clip-path: inset(0 100% 0 0);
}

.fade-up.active,
.fade-down.active,
.fade-left.active,
.fade-right.active,
.zoom-in.active,
.zoom-out.active {
  transform: translate3d(0, 0, 0) scale(1);
}

.blur-in.active {
  filter: blur(0);
}

/* Stagger delays */
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }
.delay-6 { transition-delay: .48s; }
.delay-7 { transition-delay: .56s; }
.delay-8 { transition-delay: .64s; }

/* Engineering scanner */
.engineering-scan {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.engineering-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateX(-135%);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(41, 170, 225, .05) 28%,
      rgba(41, 170, 225, .26) 48%,
      rgba(255, 255, 255, .28) 54%,
      rgba(41, 170, 225, .10) 68%,
      transparent 100%
    );
  animation: scan-line 5.2s var(--ease-soft) infinite;
  pointer-events: none;
}

/* Technical sweep accent */
.line-sweep {
  position: relative;
  overflow: hidden;
}

.line-sweep::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74px;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  transition: transform 900ms var(--ease-spring);
}

.line-sweep.active::before,
.line-sweep:hover::before {
  transform: scaleX(1);
}

/* Premium button shine */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 46%;
  transform: translateX(-140%) skewX(-18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .58),
      transparent
    );
  transition: transform 760ms var(--ease-soft);
  pointer-events: none;
}

.btn-shine:hover::after {
  transform: translateX(265%) skewX(-18deg);
}

/* Floating engineering elements */
.float-slow {
  animation: float-slow 7s ease-in-out infinite;
}

.float-medium {
  animation: float-slow 5.2s ease-in-out infinite;
}

.float-soft {
  animation: float-soft 8.5s ease-in-out infinite;
}

.float-reverse {
  animation: float-reverse 8s ease-in-out infinite;
}

/* Water ripple accent */
.water-ripple {
  position: relative;
  isolation: isolate;
}

.water-ripple::before,
.water-ripple::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border: 1px solid rgba(41, 170, 225, .34);
  border-radius: inherit;
  opacity: 0;
  animation: water-ripple 2.8s ease-out infinite;
}

.water-ripple::after {
  animation-delay: .9s;
}

/* Water droplet accent */
.water-drop {
  position: relative;
}

.water-drop::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 9px;
  height: 13px;
  border-radius: 60% 60% 60% 0;
  background: var(--color-sky-blue);
  transform: rotate(-45deg);
  opacity: .76;
  animation: drop-float 2.8s ease-in-out infinite;
}

/* Image hover motion */
.image-zoom {
  overflow: hidden;
}

.image-zoom img {
  transform: scale(1);
  transition: transform 950ms var(--ease-soft);
  will-change: transform;
}

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

/* Icon/card micro motion */
.icon-lift {
  transition:
    transform var(--duration) var(--ease-soft),
    box-shadow var(--duration) var(--ease-soft);
}

.icon-lift:hover {
  transform: translateY(-5px) rotate(-1deg);
}

/* Stats and counters */
.counter-pulse {
  animation: counter-pulse 2.2s ease-in-out infinite;
}

.stat-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.98);
  transition:
    opacity 700ms var(--ease-spring),
    transform 700ms var(--ease-spring);
}

.stat-reveal.active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Background pattern motion */
.pattern-drift {
  animation: pattern-drift 26s linear infinite;
}

.pattern-drift-slow {
  animation: pattern-drift 42s linear infinite;
}

.ring-rotate {
  animation: ring-rotate 30s linear infinite;
}

.ring-rotate-reverse {
  animation: ring-rotate-reverse 38s linear infinite;
}

/* Premium hover depth */
.hover-lift {
  transition:
    transform var(--duration) var(--ease-soft),
    box-shadow var(--duration) var(--ease-soft),
    border-color var(--duration) var(--ease-soft);
}

.hover-lift:hover {
  transform: translate3d(0, -7px, 0);
}

/* Used for cards that should feel technical but calm */
.engineering-pulse {
  position: relative;
  isolation: isolate;
}

.engineering-pulse::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(41, 170, 225, .34),
      rgba(21, 71, 124, .08),
      rgba(41, 170, 225, .24)
    );
  opacity: 0;
  transition: opacity var(--duration) var(--ease-soft);
}

.engineering-pulse:hover::before {
  opacity: 1;
}

/* Keyframes */
@keyframes scan-line {
  0% {
    transform: translateX(-135%);
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  56% {
    opacity: 1;
  }

  100% {
    transform: translateX(135%);
    opacity: 0;
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

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

@keyframes float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -9px, 0) rotate(.8deg);
  }
}

@keyframes float-reverse {
  0%,
  100% {
    transform: translate3d(0, -8px, 0);
  }

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

@keyframes water-ripple {
  0% {
    transform: scale(.96);
    opacity: .52;
  }

  70% {
    opacity: .12;
  }

  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes drop-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-45deg);
    opacity: .42;
  }

  45% {
    transform: translate3d(0, -9px, 0) rotate(-45deg);
    opacity: 1;
  }
}

@keyframes counter-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(41, 170, 225, .24);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(41, 170, 225, 0);
  }
}

@keyframes pattern-drift {
  to {
    background-position: 280px 170px;
  }
}

@keyframes ring-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ring-rotate-reverse {
  to {
    transform: rotate(-360deg);
  }
}

/* Touch devices: reduce hover-heavy motion */
@media (hover: none) {
  .btn-shine::after,
  .engineering-scan::after {
    animation-duration: 7s;
  }

  .image-zoom:hover img,
  .icon-lift:hover,
  .hover-lift:hover {
    transform: none;
  }
}

/* Smaller screens: softer motion */
@media (max-width: 760px) {
  .animate {
    transform: translate3d(0, 22px, 0);
    transition-duration: 620ms;
  }

  .fade-left,
  .fade-right {
    transform: translate3d(0, 22px, 0);
  }

  .float-slow,
  .float-medium,
  .float-soft,
  .float-reverse,
  .pattern-drift,
  .pattern-drift-slow,
  .ring-rotate,
  .ring-rotate-reverse {
    animation-duration: 18s;
  }
}

/* Accessibility and performance safety */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .animate,
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .zoom-in,
  .zoom-out,
  .blur-in,
  .reveal-mask,
  .reveal-line,
  .stat-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

[data-tilt],
[data-magnetic] {
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-soft);
  will-change: transform;
}

[data-glow] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-glow]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(
      circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(41, 170, 225, .18),
      transparent 34%
    );
  transition: opacity var(--duration) var(--ease-soft);
  pointer-events: none;
}

[data-glow]:hover::after {
  opacity: 1;
}