/* ============================================
   KUANTEK TEKNOLOJI - ANIMATIONS
   Scroll-reveal, hover effects, micro-animations
   ============================================ */

/* ── Reveal animations (triggered by IntersectionObserver) ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children */
.stagger-children.visible > * {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerIn 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}

.stagger-children.visible > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { animation-delay: 0.12s; }
.stagger-children.visible > *:nth-child(3) { animation-delay: 0.19s; }
.stagger-children.visible > *:nth-child(4) { animation-delay: 0.26s; }
.stagger-children.visible > *:nth-child(5) { animation-delay: 0.33s; }
.stagger-children.visible > *:nth-child(6) { animation-delay: 0.40s; }

@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hero entrance animations ───────────────── */
.hero-content {
  animation: heroFadeIn 1s cubic-bezier(0.4,0,0.2,1) 0.3s both;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  animation: heroFadeIn 0.8s cubic-bezier(0.4,0,0.2,1) 0.4s both;
}

.hero h1 {
  animation: heroFadeIn 0.8s cubic-bezier(0.4,0,0.2,1) 0.5s both;
}

.hero-description {
  animation: heroFadeIn 0.8s cubic-bezier(0.4,0,0.2,1) 0.65s both;
}

.hero-buttons {
  animation: heroFadeIn 0.8s cubic-bezier(0.4,0,0.2,1) 0.8s both;
}

/* Float product entrance */
.hero-float-product {
  animation: productFloat 1.2s cubic-bezier(0.4,0,0.2,1) both;
}

.float-item-1 { animation-delay: 0.6s; }
.float-item-2 { animation-delay: 0.8s; }
.float-item-3 { animation-delay: 1s; }

@keyframes productFloat {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Parallax-like float on scroll ──────────── */
.hero-network line {
  animation: networkPulse 8s ease-in-out infinite alternate;
}

.hero-network line:nth-child(2n) {
  animation-delay: 1s;
}

.hero-network line:nth-child(3n) {
  animation-delay: 2s;
}

@keyframes networkPulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.hero-network circle {
  animation: nodePulse 4s ease-in-out infinite alternate;
}

.hero-network circle:nth-child(2n) {
  animation-delay: 0.5s;
}

.hero-network circle:nth-child(3n) {
  animation-delay: 1.5s;
}

@keyframes nodePulse {
  0% { r: 4; opacity: 0.5; }
  50% { r: 8; opacity: 1; }
  100% { r: 5; opacity: 0.6; }
}

/* ── Card micro-interactions ────────────────── */
.product-card,
.tech-card,
.service-card,
.sector-card,
.contact-card {
  will-change: transform;
}

/* Subtle shine on hover */
.product-card::after,
.tech-card::after,
.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
}

.product-card:hover::after,
.tech-card:hover::after,
.service-card:hover::after {
  left: 100%;
}

/* ── Button animations ──────────────────────── */
.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.5s ease, height 0.5s ease;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

/* ── Section label animation ────────────────── */
.section-label {
  position: relative;
  display: inline-block;
}

.section-label::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  transform-origin: left;
}

.visible .section-label::before,
.reveal.visible .section-label::before {
  transform: scaleX(1);
}

/* ── AXIOMA card special animation ──────────── */
.axioma-card {
  transition: all var(--transition-base);
}

.axioma-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Smooth link hover states ───────────────── */
.footer-links a {
  display: inline-block;
}

/* ── Screen reader skip link ────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

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

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

  .stagger-children > * {
    opacity: 1;
    transform: none;
  }

  .hero-float-product {
    animation: none;
    opacity: 1;
  }
}