/* ============================================================
   ANIBA SOLAR DOCTOR — ANIMATIONS
   Scroll reveals, hero motion, micro-interactions
   ============================================================ */

/* ---------- Scroll reveal (driven by IntersectionObserver) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in { opacity: 1; transform: none; }

/* Staggered children */
[data-stagger] > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .19s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .26s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .33s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .40s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .47s; }
[data-stagger].in > *:nth-child(8) { transition-delay: .54s; }

/* ---------- Keyframes ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes float-y-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes pulse-ring {
  0% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes drift {
  0% { transform: translate(0,0); }
  100% { transform: translate(40px, -30px); }
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes energy-flow {
  0% { stroke-dashoffset: 220; }
  100% { stroke-dashoffset: 0; }
}
@keyframes sun-glow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.06); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gauge-fill {
  from { stroke-dashoffset: var(--dash-full); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Hero motion elements ---------- */
.float { animation: float-y 6s var(--ease) infinite; }
.float-sm { animation: float-y-sm 5s var(--ease) infinite; }
.float-delay { animation-delay: -2.5s; }

.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(50px);
  pointer-events: none; z-index: 0;
}
.orb-green { background: radial-gradient(circle, rgba(23,177,105,.5), transparent 70%); animation: sun-glow 7s ease-in-out infinite; }
.orb-blue { background: radial-gradient(circle, rgba(29,111,192,.42), transparent 70%); animation: sun-glow 9s ease-in-out infinite; }

/* Particles */
.particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-400); opacity: .5;
  animation: float-y 8s ease-in-out infinite;
}

/* Grid backdrop */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,37,64,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 78%);
}
.grid-bg--dark {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* Hero headline word reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  animation: rise .9s var(--ease-out) forwards;
}
.hero .reveal-line:nth-child(1) > span { animation-delay: .1s; }
.hero .reveal-line:nth-child(2) > span { animation-delay: .22s; }
.hero .reveal-line:nth-child(3) > span { animation-delay: .34s; }

/* Marquee */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Image loading blur-up */
.img-load { position: relative; overflow: hidden; background: var(--gray-100); }
.img-load img { opacity: 0; transition: opacity .7s ease; }
.img-load img.loaded { opacity: 1; }
.img-load::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
}
.img-load.done::after { display: none; }

/* Count-up guard */
.counting { font-variant-numeric: tabular-nums; }

/* Progress line for process */
.reduced-motion-note { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none; }
  .hero-title .hl { opacity: 1 !important; transform: none !important; animation: none !important; }
}