/* ============================================
   DAMO Group — Animations
   ============================================ */

/* ── Hero text entrance ── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content .overline,
.page-hero__content .overline {
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

.hero__content h1,
.page-hero__content h1 {
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

.hero__content p,
.page-hero__content p {
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

.hero__content .btn,
.page-hero__content .btn {
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}

/* ── Floating particles background ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(5deg); }
  66% { transform: translateY(10px) rotate(-3deg); }
}

.particle {
  position: absolute;
  border-radius: var(--radius-full);
  opacity: 0.1;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

.particle--1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--accent-turquoise), transparent 70%);
  top: 10%;
  right: -5%;
  animation-delay: 0s;
}

.particle--2 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--accent-gold), transparent 70%);
  bottom: 20%;
  left: -3%;
  animation-delay: 2s;
}

.particle--3 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--accent-turquoise), transparent 70%);
  top: 50%;
  left: 40%;
  animation-delay: 4s;
}

/* ── DNA Helix (SVG animated lines) ── */
@keyframes dna-rotate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* ── Gradient border animation for cards ── */
@keyframes border-glow {
  0%, 100% { border-color: var(--border-glass); }
  50% { border-color: var(--border-gold); }
}

/* ── Pulse for map dots ── */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ── Counter number flip ── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Slide in from left ── */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Slide in from right ── */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Scale in ── */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Shimmer for loading/placeholder ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ── Staggered reveal for grids (60ms steps, unified easing) ── */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity var(--duration-reveal) var(--ease-out-premium),
              transform var(--duration-reveal) var(--ease-out-premium),
              filter var(--duration-reveal) var(--ease-out-premium);
}

.stagger-reveal.revealed > *:nth-child(1)  { transition-delay: 0ms; }
.stagger-reveal.revealed > *:nth-child(2)  { transition-delay: 60ms; }
.stagger-reveal.revealed > *:nth-child(3)  { transition-delay: 120ms; }
.stagger-reveal.revealed > *:nth-child(4)  { transition-delay: 180ms; }
.stagger-reveal.revealed > *:nth-child(5)  { transition-delay: 240ms; }
.stagger-reveal.revealed > *:nth-child(6)  { transition-delay: 300ms; }
.stagger-reveal.revealed > *:nth-child(7)  { transition-delay: 360ms; }
.stagger-reveal.revealed > *:nth-child(8)  { transition-delay: 420ms; }
.stagger-reveal.revealed > *:nth-child(9)  { transition-delay: 480ms; }
.stagger-reveal.revealed > *:nth-child(10) { transition-delay: 540ms; }
.stagger-reveal.revealed > *:nth-child(11) { transition-delay: 600ms; }
.stagger-reveal.revealed > *:nth-child(12) { transition-delay: 660ms; }

.stagger-reveal.revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

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

  /* Hide decorative motion entirely */
  .particle,
  .hero__bg .particle {
    display: none !important;
  }

  /* Lock hover transforms that rely on motion */
  .glass-card:hover,
  .entity-card:hover,
  .service-card:hover,
  .partner-card:hover {
    transform: none !important;
  }
}

/* ── Page load ── */
@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
body {
  animation: page-enter 0.6s ease forwards;
}

/* ── View Transitions API customization ── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.22, 1, 0.36, 1) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 380ms cubic-bezier(0.22, 1, 0.36, 1) both vt-fade-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ── Directional Reveals (unified motion tokens) ── */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(4px);
  transition: opacity var(--duration-reveal) var(--ease-out-premium),
              transform var(--duration-reveal) var(--ease-out-premium),
              filter var(--duration-reveal) var(--ease-out-premium);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(4px);
  transition: opacity var(--duration-reveal) var(--ease-out-premium),
              transform var(--duration-reveal) var(--ease-out-premium),
              filter var(--duration-reveal) var(--ease-out-premium);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* ── Scale reveal ── */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(4px);
  transition: opacity var(--duration-reveal) var(--ease-out-premium),
              transform var(--duration-reveal) var(--ease-out-premium),
              filter var(--duration-reveal) var(--ease-out-premium);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* ── Enhanced card hover glow ── */
@keyframes subtle-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 180, 216, 0); }
  50% { box-shadow: 0 0 20px rgba(0, 180, 216, 0.08); }
}
.glass-card:hover {
  animation: subtle-glow 2s ease infinite;
}

/* ── Logo hover ── */
.nav__logo:hover {
  transform: scale(1.03);
  transition: transform var(--transition-fast);
}

/* ── Scroll to top button ── */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: var(--gradient-gold);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 999;
  pointer-events: none;
  border: none;
  box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(212, 168, 83, 0.5);
}
.scroll-top svg {
  width: 22px;
  height: 22px;
}

/* ── Enhanced card hover glow (A3) ── */
.glass-card {
  transition: all var(--transition-base), box-shadow 0.4s ease;
}
.glass-card:hover {
  box-shadow: 0 8px 32px rgba(0, 180, 216, 0.08), var(--shadow-card-hover);
}

/* ── Logo carousel hover scale (A6) ── */
.logo-carousel__item {
  transition: all var(--transition-base), transform var(--transition-fast);
}
.logo-carousel__item:hover {
  transform: scale(1.12);
}

/* ── Entity card link arrow (A3) ── */
.entity-card__link .arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}
.entity-card:hover .entity-card__link .arrow {
  transform: translateX(4px);
}

/* ── Service card hover lift (A3) ── */
.service-card:hover {
  transform: translateY(-2px);
}