/*
  motion.css — Animations, transitions, entrance sequences
  Signature motion: ghost nav materialises on hover to top edge
  + scroll reveal with clip-path wipe on headings
  + parallax layer on hero image
*/

/* =====================================================
   PAGE ENTRANCE — staggered hero sequence
   ===================================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wipeRight {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

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

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Announcement bar */
.announcement-bar {
  animation: fadeIn 0.4s ease both;
}

/* Ghost nav — slides down on show */
.ghost-nav {
  /* transform is handled in brand.css + JS */
}

/* Hero elements — staggered entrance */
.hero__eyebrow {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.hero__headline {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s both;
}

.hero__deck {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

.hero__byline {
  opacity: 0;
  animation: fadeUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.65s both;
}

.hero__image-wrap {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}

/* =====================================================
   WORDMARK / LOGO ENTRANCE
   ===================================================== */

.brand-wordmark {
  opacity: 0;
  animation: fadeIn 0.6s ease 0.1s both;
}

/* =====================================================
   SCROLL REVEAL — via IntersectionObserver
   .reveal transitions defined in components.css
   Additional heading wipe variant
   ===================================================== */

.reveal-heading {
  overflow: hidden;
}

.reveal-heading .inner-text {
  display: block;
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-heading.is-visible .inner-text {
  transform: translateY(0);
}

/* =====================================================
   ARTICLE SECTION — number bg subtle pulse
   ===================================================== */

.article-section__number-bg {
  animation: fadeIn 1s ease 1.5s both;
}

/* =====================================================
   CTA SECTION — entrance
   ===================================================== */

.cta-section__heading,
.cta-section__body,
.cta-btn-main {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cta-section.is-visible .cta-section__heading {
  opacity: 1;
  transform: translateY(0);
}

.cta-section.is-visible .cta-section__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.cta-section.is-visible .cta-btn-main {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* =====================================================
   PRODUCT REVEAL — image slides in
   ===================================================== */

.product-reveal__image-wrap {
  opacity: 0;
  transform: translateX(-3rem);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-reveal__image-wrap.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================================
   REVIEW ITEMS — stagger
   ===================================================== */

.review-item {
  opacity: 0;
  transform: translateX(-1.5rem);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.review-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================================
   HOVER STATES (all interactive elements)
   ===================================================== */

/* Images scale on hover (see .img-wrap in components.css) */

/* Article section heading underline draw */
.article-section__heading {
  position: relative;
  display: inline-block;
}

/* =====================================================
   CONNECTOR QUOTE — fade up with delay
   ===================================================== */

.connector-section p {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.connector-section.is-visible p {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   INTRO BAND text
   ===================================================== */

.intro-band p {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.intro-band.is-visible p {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   ACCESSIBILITY — respects prefers-reduced-motion
   (also defined in tokens.css as a catch-all)
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__headline,
  .hero__deck,
  .hero__byline,
  .hero__image-wrap,
  .brand-wordmark,
  .announcement-bar,
  .article-section__number-bg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal,
  .reveal-clip,
  .reveal-heading .inner-text,
  .product-reveal__image-wrap,
  .review-item,
  .connector-section p,
  .intro-band p,
  .cta-section__heading,
  .cta-section__body,
  .cta-btn-main {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}