/* ==========================================================================
   ASRON — Animations
   Keyframes, scroll-reveal states, aurora backgrounds, decorative motion.
   All reveal classes are driven by assets/js/animations.js via
   IntersectionObserver adding .is-inview.
   ========================================================================== */

/* ----- Keyframes ----- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

@keyframes ping {
  from { transform: scale(0.5); opacity: 1; }
  to   { transform: scale(1.4); opacity: 0; }
}

@keyframes aurora-drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(6%, -8%) rotate(12deg) scale(1.12); }
  66%  { transform: translate(-7%, 5%) rotate(-10deg) scale(0.94); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes loader-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.05); }
}

@keyframes loader-slide {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

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

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* ----- Aurora background layers ----- */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aurora__blob {
  position: absolute;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  animation: aurora-drift 22s ease-in-out infinite;
  will-change: transform;
}

.aurora__blob--1 { top: -18rem; left: -10rem; background: radial-gradient(circle, rgba(54, 87, 255, 0.75), transparent 65%); }
.aurora__blob--2 { top: -8rem; right: -14rem; background: radial-gradient(circle, rgba(106, 43, 255, 0.65), transparent 65%); animation-delay: -8s; animation-duration: 26s; }
.aurora__blob--3 { bottom: -22rem; left: 30%; background: radial-gradient(circle, rgba(0, 212, 255, 0.4), transparent 65%); animation-delay: -14s; animation-duration: 30s; }

[data-theme="light"] .aurora__blob { opacity: 0.22; }

/* Dotted grid overlay used behind heroes */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(122, 148, 255, 0.14) 1px, transparent 1px);
  background-size: 2rem 2rem;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
}

/* Animated gradient text (used in hero headline word) */
.grad-animate {
  background: var(--grad-aurora);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-shift 6s ease-in-out infinite;
}

/* Typing caret */
.type-caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: caret-blink 0.9s step-end infinite;
}

/* Slow-rotating decorative ring (SVG) */
.deco-ring {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  animation: spin-slow 40s linear infinite;
}

/* SVG line-draw — JS adds .is-inview */
.draw-path {
  stroke-dasharray: var(--dash, 600);
  stroke-dashoffset: var(--dash, 600);
}

.is-inview .draw-path,
.draw-path.is-inview {
  animation: draw-line 1.8s var(--ease-out) forwards;
}

/* ==========================================================================
   Scroll-reveal system
   Usage: data-reveal="up|down|left|right|scale|blur" + optional
   data-reveal-delay="1..8" (multiples of 80ms)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
  transition-delay: calc(var(--rd, 0) * 80ms);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(2.5rem); }
[data-reveal="down"]  { transform: translateY(-2.5rem); }
[data-reveal="left"]  { transform: translateX(3rem); }
[data-reveal="right"] { transform: translateX(-3rem); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="blur"]  { filter: blur(12px); transform: translateY(1rem); }

[data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children: parent gets data-reveal-stagger, children animate */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-reveal-stagger].is-inview > * {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger].is-inview > :nth-child(1)  { transition-delay: 0.05s; }
[data-reveal-stagger].is-inview > :nth-child(2)  { transition-delay: 0.13s; }
[data-reveal-stagger].is-inview > :nth-child(3)  { transition-delay: 0.21s; }
[data-reveal-stagger].is-inview > :nth-child(4)  { transition-delay: 0.29s; }
[data-reveal-stagger].is-inview > :nth-child(5)  { transition-delay: 0.37s; }
[data-reveal-stagger].is-inview > :nth-child(6)  { transition-delay: 0.45s; }
[data-reveal-stagger].is-inview > :nth-child(7)  { transition-delay: 0.53s; }
[data-reveal-stagger].is-inview > :nth-child(8)  { transition-delay: 0.61s; }
[data-reveal-stagger].is-inview > :nth-child(9)  { transition-delay: 0.69s; }
[data-reveal-stagger].is-inview > :nth-child(10) { transition-delay: 0.77s; }
[data-reveal-stagger].is-inview > :nth-child(11) { transition-delay: 0.85s; }
[data-reveal-stagger].is-inview > :nth-child(12) { transition-delay: 0.93s; }

/* 3D tilt cards — JS drives --rx / --ry */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
}

/* Magnetic buttons — JS drives --tx / --ty */
[data-magnetic] {
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform 0.25s var(--ease-out);
}

/* Mouse-parallax layers — JS drives --px / --py, depth via data attribute */
[data-parallax] {
  transform: translate3d(calc(var(--px, 0) * var(--depth, 1)),
                         calc(var(--py, 0) * var(--depth, 1)), 0);
  will-change: transform;
}

/* Page-transition fade */
body { animation: page-in 0.6s ease both; }

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.is-leaving { opacity: 0; transition: opacity 0.3s ease; }

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

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}