/* ==========================================================================
   CYANAQ Systems — animation system
   Content is always visible unless JavaScript has confirmed it can reveal it
   (html.js-reveal is added by js/animations.js).
   ========================================================================== */

@view-transition { navigation: auto; }

@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.4; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow-drift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
@keyframes card-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes gradient-pan { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate-rev { to { transform: rotate(-360deg); } }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes halo-breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- Scroll reveal ---------- */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js-reveal [data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
html.js-reveal [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
html.js-reveal [data-reveal="scale"] { transform: scale(0.94); }
html.js-reveal [data-reveal="fade"]  { transform: none; }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero entrance (CSS-only so it never depends on JS timing) ---------- */
html.js .hero__title .line { overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
html.js .hero__title .line > span { display: inline-block; animation: line-up 1.1s var(--ease-out) both; animation-delay: calc(0.15s + var(--i, 0) * 0.13s); }
html.js .hero__pill,
html.js .hero__lead,
html.js .hero__actions,
html.js .hero__points { animation: fade-up 1s var(--ease-out) both; }
html.js .hero__pill { animation-delay: 0.05s; }
html.js .hero__lead { animation-delay: 0.55s; }
html.js .hero__actions { animation-delay: 0.7s; }
html.js .hero__points { animation-delay: 0.85s; }
html.js .hero-art { animation: fade-up 1.4s var(--ease-out) 0.3s both; }
html.js .hero__scroll { animation: fade-up 1s var(--ease-out) 1.2s both; }

.hero .gradient-text,
.cta-band .gradient-text { animation: gradient-pan 9s linear infinite; }

/* ---------- Hero artwork motion ---------- */
.hero-art__halo { animation: halo-breathe 7s ease-in-out infinite; }
.hero-art__orb { animation: orb-breathe 8s ease-in-out infinite; }
.hero-art__ring--1 { animation: rotate 46s linear infinite; }
.hero-art__ring--2 { animation: rotate-rev 62s linear infinite; }
.hero-art__ring--3 { animation: rotate 90s linear infinite; }
.float-card--a { animation: float-y 7s ease-in-out infinite; }
.float-card--b { animation: float-y 8.5s ease-in-out -2s infinite; }
.float-card--c { animation: float-y 9s ease-in-out -4s infinite; }

/* ---------- Page entrance ---------- */
.page-hero .breadcrumb,
.page-hero h1,
.page-hero .lead,
.page-hero__actions,
.page-hero__art { animation: fade-up 0.9s var(--ease-out) both; }
.page-hero .breadcrumb { animation-delay: 0s; }
.page-hero h1 { animation-delay: 0.08s; }
.page-hero .lead { animation-delay: 0.18s; }
.page-hero__actions { animation-delay: 0.28s; }
.page-hero__art { animation-delay: 0.2s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__canvas { display: none; }
  @view-transition { navigation: none; }
}