/* ==================================================================
   STUDIO SEVEN — MOTION LAYER
   Loaded AFTER site.css so it can refine without rewriting anything.
   Self-contained: remove the motion.css + motion.js tags to revert.

   Principles:
   - Short distances, quick durations. Motion should feel like the page
     settling, not like a slideshow.
   - One easing curve everywhere, so the whole site moves with one hand.
   - Never hijack the scroll. The user's input is never taken over.
   - Everything decorative is switched off under prefers-reduced-motion.
   ================================================================== */

:root {
  /* one curve, used everywhere */
  --e-out:   cubic-bezier(.22, .61, .36, 1);
  --e-soft:  cubic-bezier(.4, 0, .2, 1);
  --e-press: cubic-bezier(.2, .9, .3, 1);

  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 620ms;

  --stagger: 55ms;
}

/* ==================================================================
   1. SCROLL REVEAL — refined
   Was: 40px of travel over 1s. That reads as sluggish.
   Now: short travel, quicker, with a slight blur lift on entry.
   ================================================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--t-slow) var(--e-out),
    transform var(--t-slow) var(--e-out),
    filter var(--t-slow) var(--e-out);
  will-change: opacity, transform;
}
.reveal.on {
  opacity: 1;
  transform: none;
  filter: none;
}
.reveal.on { will-change: auto; }

/* Children of a revealed container come in one after another. */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--t-slow) var(--e-out),
    transform var(--t-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
[data-stagger].on > * { opacity: 1; transform: none; }

/* ==================================================================
   2. INTERACTIVE STATES
   Every clickable thing should acknowledge the cursor and the press.
   ================================================================== */
.cta-v2-btn,
.audit-pitch-cta,
.hero-v5-form button,
.nav-v4-contact,
.svc-btn-primary,
.svc-btn-secondary,
.tab-media-tab,
.dot-carousel-dot,
.who-tab,
.blog-card,
.show-card,
.sec-card,
.process-v2-step {
  transition:
    transform var(--t-base) var(--e-press),
    box-shadow var(--t-base) var(--e-out),
    background-color var(--t-base) var(--e-out),
    border-color var(--t-base) var(--e-out),
    color var(--t-base) var(--e-out),
    opacity var(--t-base) var(--e-out);
}

/* pill buttons: lift on hover, press in on click */
.cta-v2-btn:hover,
.hero-v5-form button:hover,
.nav-v4-contact:hover,
.svc-btn-primary:hover { transform: translateY(-2px); }

.cta-v2-btn:active,
.audit-pitch-cta:active,
.hero-v5-form button:active,
.nav-v4-contact:active,
.svc-btn-primary:active,
.svc-btn-secondary:active { transform: translateY(0) scale(.975); }

.tab-media-tab:active,
.dot-carousel-dot:active,
.who-tab:active { transform: scale(.94); }

/* arrow nudge on text CTAs */
.audit-pitch-cta span,
.cta-v2-btn span,
.who-panel-link span,
.svc-detail-cta span,
.blog-card-link span {
  display: inline-block;
  transition: transform var(--t-base) var(--e-out);
}
.audit-pitch-cta:hover span,
.cta-v2-btn:hover span,
.who-panel-link:hover span,
.svc-detail-cta:hover span,
.blog-card:hover .blog-card-link span { transform: translateX(4px); }

/* ==================================================================
   3. FOCUS — visible for keyboards, invisible for mice
   ================================================================== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #6f5fd1;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==================================================================
   4. NAV — condenses once you start scrolling
   ================================================================== */
.nav-v4 {
  transition:
    transform var(--t-base) var(--e-out),
    box-shadow var(--t-base) var(--e-out),
    backdrop-filter var(--t-base) var(--e-out);
}
.nav-v4.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, .06); }
/* hide on scroll-down, bring back on scroll-up — gives content the screen */
.nav-v4.is-hidden { transform: translateY(-120%); }

.nav-v4-pill a,
.dropdown-inner a { transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out); }

/* ==================================================================
   5. MEDIA — settles in rather than popping in
   ================================================================== */
.audit-pitch-video,
.tab-media-frame,
.dot-carousel-frame,
.show-card img,
.blog-card-media img {
  transition: transform var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
}
.reveal .audit-pitch-videoel,
.reveal .tab-media-img,
.reveal .dot-slide {
  transition: transform 900ms var(--e-out), opacity 450ms var(--e-out);
}
.reveal:not(.on) .audit-pitch-videoel { transform: scale(1.045); }
.reveal.on .audit-pitch-videoel { transform: scale(1); }

/* card hover — one consistent lift across every card type */
.show-card:hover img,
.blog-card:hover .blog-card-media img { transform: scale(1.025); }
.show-card,
.blog-card { overflow: hidden; }

/* ==================================================================
   6. CROSS-DOCUMENT VIEW TRANSITIONS
   Native page-to-page crossfade with the nav pinned in place, so
   moving between pages feels like one application rather than a
   sequence of reloads. Chromium 126+, Safari 18.2+, Firefox 144+.
   Everywhere else this rule is ignored and navigation is normal.
   ================================================================== */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: s7FadeOut 180ms var(--e-soft) both; }
  ::view-transition-new(root) { animation: s7FadeIn  260ms var(--e-out) both; }
  /* the nav does not crossfade — it stays put across the navigation */
  .nav-v4 { view-transition-name: s7nav; }
}
@keyframes s7FadeOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes s7FadeIn  { from { opacity: 0; transform: translateY(8px);  } }

/* ==================================================================
   7. SCROLL-DRIVEN PARALLAX  (progressive enhancement)
   ~84% support and not yet Baseline, so the finished state is the
   default and this only layers on where the browser can do it
   natively — no JS, no scroll listeners, no jank.
   ================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .audit-pitch-video--sq-760 .audit-pitch-videoel,
    .audit-pitch-video--r32 .audit-pitch-videoel {
      animation: s7Drift linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 62%;
    }
    @keyframes s7Drift {
      from { transform: translateY(14px) scale(1.03); }
      to   { transform: translateY(0)    scale(1);    }
    }
  }
}

/* ==================================================================
   8. SMOOTH IN-PAGE SCROLLING
   Anchor jumps ease instead of teleporting. Offset accounts for the
   fixed nav so headings don't end up underneath it.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id], article[id] { scroll-margin-top: 96px; }

/* ==================================================================
   9. REDUCED MOTION — everything decorative switched off
   We claim WCAG-conscious builds, so this has to actually work.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nav-v4.is-hidden { transform: none !important; }
  .ticker-row,
  .systems-v2-track,
  .hero-v5-brands-row { animation: none !important; }
}