/* animations.css — ElaCloud motion system
   ALL animation and transition rules live here.
   Default state = no motion. Triggered states applied by JS / prefers-reduced-motion query. */

/* ── Default states — visible but static (no motion) ── */

body {
  opacity: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.site-header {
  transition: none;
}

/* Orbs: visible by default (CSS-only fade-in) */
.orb {
  opacity: 0;
}

/* ── Keyframes ── */

@keyframes float-1 {
  0%   { transform: translate(0px,  0px)  scale(1);    }
  33%  { transform: translate(18px, -22px) scale(1.04); }
  66%  { transform: translate(-12px, 14px) scale(0.97); }
  100% { transform: translate(0px,  0px)  scale(1);    }
}

@keyframes float-2 {
  0%   { transform: translate(0px,  0px)  scale(1);    }
  40%  { transform: translate(-20px, 16px) scale(1.05); }
  75%  { transform: translate(10px, -10px) scale(0.96); }
  100% { transform: translate(0px,  0px)  scale(1);    }
}

@keyframes float-3 {
  0%   { transform: translate(0px,  0px)  scale(1);    }
  50%  { transform: translate(14px, -18px) scale(1.06); }
  100% { transform: translate(0px,  0px)  scale(1);    }
}

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

@keyframes gradient-line-in {
  from { width: 0; opacity: 0; }
  to   { width: 200px; opacity: 0.7; }
}

/* ── All motion — gated by prefers-reduced-motion ── */

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: opacity var(--duration-slow) var(--ease-out);
  }

  .reveal {
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
  }

  .site-header {
    transition:
      background-color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      backdrop-filter var(--duration-base) var(--ease-out),
      -webkit-backdrop-filter var(--duration-base) var(--ease-out);
  }

  a {
    transition: color var(--duration-fast) var(--ease-out);
  }

  /* Orb fade-in after body loads, then float */
  body.is-loaded .orb--1 {
    animation:
      orb-in 1.2s var(--ease-out) 0.2s forwards,
      float-1 14s ease-in-out 1.4s infinite;
  }

  body.is-loaded .orb--2 {
    animation:
      orb-in 1.2s var(--ease-out) 0.4s forwards,
      float-2 18s ease-in-out 1.6s infinite;
  }

  body.is-loaded .orb--3 {
    animation:
      orb-in 1.2s var(--ease-out) 0.6s forwards,
      float-3 11s ease-in-out 1.8s infinite;
  }

  .hero__gradient-line {
    animation: gradient-line-in 0.8s var(--ease-out) 0.5s both;
  }
}

/* ── Triggered states ── */

body.is-loaded {
  opacity: 1;
}

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

/* Orbs visible when reduced-motion is set (no animation, just display) */
@media (prefers-reduced-motion: reduce) {
  .orb--1 { opacity: 0.6; }
  .orb--2 { opacity: 0.5; }
  .orb--3 { opacity: 0.4; }
  body     { opacity: 1; }
  .reveal  { opacity: 1; transform: none; }
}

/* Values section visible immediately on mobile (part of content peek, no animation delay).
   Uses !important to override the base .reveal rule and prevent mobile Safari timing issues
   where deferred style computation can cause the section to remain hidden until scroll. */
@media (max-width: 768px) {
  .values.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}