/* ======================================================
   VITAL VIBES — animations.css v4.0
   All animation systems · IntersectionObserver driven
   ====================================================== */

/* ── Keyframes ── */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scrollLine {
  0%   { top: -100%; }
  100% { top: 100%; }
}

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes charReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Scroll Reveal (IntersectionObserver driven) ── */

.anim-fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1),
              transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.anim-fade-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1),
              transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.anim-fade-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1),
              transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.anim-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
              transform 1s cubic-bezier(0.16,1,0.3,1);
}

/* Active state (class added by JS) */
.anim-fade-up.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-scale-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.05s; }
[data-delay="2"] { transition-delay: 0.15s; }
[data-delay="3"] { transition-delay: 0.25s; }
[data-delay="4"] { transition-delay: 0.35s; }
[data-delay="5"] { transition-delay: 0.45s; }
[data-delay="6"] { transition-delay: 0.55s; }

/* ── Image Clip-Path Reveal ── */
.img-reveal-wrap {
  position: relative;
  overflow: hidden;
}
.img-reveal-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface-alt, #EDEAE3);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 1.5s cubic-bezier(0.77,0,0.175,1);
  z-index: 1;
}
.img-reveal-wrap.is-visible::after { transform: scaleX(0); transform-origin: right; }

/* ── Section Rule Line Draw ── */
.section-rule {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(0.16,1,0.3,1);
}
.section-rule.is-visible { transform: scaleX(1); }

/* ── Heading Line Draw (underline reveal) ── */
.heading-line {
  position: relative;
  display: inline-block;
}
.heading-line::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: var(--gold, #C9A96E);
  transition: width 1s .3s cubic-bezier(0.16,1,0.3,1);
}
.heading-line.is-visible::after { width: 100%; }

/* ── Hero H1 Line Reveal (replaces char stagger) ── */
/* .h1-line / .h1-line__inner are in main.css */

/* ── Link underline draw ── */
.link-draw {
  position: relative;
}
.link-draw::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .4s cubic-bezier(0.16,1,0.3,1);
}
.link-draw:hover::after { width: 100%; }

/* ── Icon pop ── */
.icon-pop {
  display: inline-block;
  transition: transform .3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.icon-pop:hover { transform: scale(1.2); }

/* ── Float-in for floating CTA ── */
.float-cta { animation: floatIn .6s cubic-bezier(0.16,1,0.3,1) 3s forwards; }

/* ── Spec table row stagger ── */
.spec-row {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .5s, transform .5s cubic-bezier(0.16,1,0.3,1);
}
.spec-row.is-visible { opacity: 1; transform: none; }
.spec-row:nth-child(2) { transition-delay: .1s; }
.spec-row:nth-child(3) { transition-delay: .2s; }
.spec-row:nth-child(4) { transition-delay: .3s; }
.spec-row:nth-child(5) { transition-delay: .4s; }

/* ── WAVE accent color variables ── */
.wave-1 { --wave-accent: #C9A96E; }
.wave-2 { --wave-accent: #8DB5A0; }
.wave-3 { --wave-accent: #B8A090; }
.wave-4 { --wave-accent: #9AAFA8; }
.wave-5 { --wave-accent: #C4A882; }
.wave-6 { --wave-accent: #A09DC4; }

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-fade-left, .anim-fade-right, .anim-scale-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .img-reveal-wrap::after { display: none; }
  .h1-line__inner { transform: translateY(0) !important; }
  .section-rule { transform: scaleX(1); }
  .heading-line::after { width: 100%; }
}