/* ============================================================
   Zaycev Studio — Motion System
   Shared tokens, keyframes and patterns for all pages.
   Load alongside homepage.css or nav.css.
   ============================================================ */

/* ---- Motion tokens ---- */
:root {
  --motion-fast:   160ms;
  --motion-base:   280ms;
  --motion-reveal: 600ms;
  --motion-page:   800ms;

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std:  ease-out;

  /* Distances */
  --motion-arrow:  5px;
  --motion-slide:  24px;
  --motion-reveal-y: 20px;
  --motion-img-scale: 1.02;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes zs-fade-up {
  from { opacity: 0; transform: translateY(var(--motion-reveal-y)); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes zs-fade-down {
  from { opacity: 0; transform: translateY(calc(var(--motion-reveal-y) * -0.6)); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   PAGE-LOAD SEQUENCE — homepage hero
   Applied to .hp-hero children automatically.
   animation-fill-mode: both keeps elements hidden pre-animation.
   ============================================================ */

/* Eyebrow / metadata — instant, fades in */
.hp .hp-hero-eyebrow {
  animation: zs-fade-in var(--motion-base) var(--ease-out) 0ms both;
}

/* H1 first line */
.hp .hp-h1-line1 {
  display: block;
  animation: zs-fade-up var(--motion-reveal) var(--ease-out) 80ms both;
}

/* H1 second line — slight delay after first */
.hp .hp-h1-right {
  animation: zs-fade-up var(--motion-reveal) var(--ease-out) 220ms both;
}

/* Supporting text + CTAs */
.hp .hp-hero-foot {
  animation: zs-fade-in var(--motion-reveal) var(--ease-out) 400ms both;
}

/* Proof line */
.hp .hp-hero-proof {
  animation: zs-fade-in var(--motion-base) var(--ease-out) 520ms both;
}

/* ============================================================
   SCROLL REVEAL — shared pattern
   .reveal is set to hidden in homepage.css.
   JS adds .visible via IntersectionObserver.
   ============================================================ */

/* Stagger delays — use on child elements within a reveal group */
.hp .reveal-d1 { transition-delay: 80ms; }
.hp .reveal-d2 { transition-delay: 160ms; }
.hp .reveal-d3 { transition-delay: 240ms; }
.hp .reveal-d4 { transition-delay: 320ms; }

/* ============================================================
   ARROW HOVER PATTERN
   Apply .arrow-link to any link with an SVG arrow child.
   ============================================================ */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--motion-fast) var(--ease-out);
}
.arrow-link svg {
  transition: transform var(--motion-fast) var(--ease-out);
  flex-shrink: 0;
}
.arrow-link:hover { gap: 10px; }
.arrow-link:hover svg { transform: translate(var(--motion-arrow), calc(var(--motion-arrow) * -1)); }

/* ============================================================
   IMAGE HOVER PATTERN
   Apply to containers — img inside gets scale on hover.
   ============================================================ */
.img-hover {
  overflow: hidden;
}
.img-hover img {
  transition: transform var(--motion-reveal) var(--ease-out);
  will-change: transform;
}
.img-hover:hover img { transform: scale(var(--motion-img-scale)); }

/* ============================================================
   PAGE ENTER
   Add .page-enter to <main> or top-level wrapper.
   JS removes it after a frame to trigger animation.
   ============================================================ */
.page-enter {
  animation: zs-fade-up var(--motion-base) var(--ease-out) 0ms both;
}

/* ============================================================
   SECTION TRANSITION — line draw
   Use .section-line as a decorative hr or border element.
   ============================================================ */
.section-line {
  display: block;
  height: 1px;
  background: var(--line, #D7D6D0);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--motion-reveal) var(--ease-out);
}
.section-line.visible { transform: scaleX(1); }

/* ============================================================
   NAV MICRO-INTERACTIONS
   ============================================================ */

/* Pill links — already scoped in nav.css, tokens here for reference */
.hp-nav-pill {
  transition:
    background  var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}

/* Dropdown */
.hp-dropdown-menu {
  transition: opacity var(--motion-fast) var(--ease-std);
}

/* Header CTA arrow */
.hp-cta-arrow {
  transition: transform var(--motion-fast) var(--ease-out);
}
.hp-header-cta:hover .hp-cta-arrow {
  transform: translate(var(--motion-arrow), calc(var(--motion-arrow) * -1));
}

/* Footer links */
.hp-footer-col a {
  transition: color var(--motion-fast) var(--ease-std);
}

/* ============================================================
   REDUCED MOTION
   All motion collapses to instant opacity when user prefers
   reduced motion. Layout never breaks.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Kill all CSS animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Reveal elements become immediately visible */
  .hp .reveal,
  .hp .hp-hero-eyebrow,
  .hp .hp-h1-line1,
  .hp .hp-h1-right,
  .hp .hp-hero-foot,
  .hp .hp-hero-proof {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Section line draws instantly */
  .section-line { transform: scaleX(1); }

  /* Image hover scale removed */
  .img-hover img,
  .hp-case-media img { transform: none !important; }
}