/* ============================================================
   Flou — Premium animations
   - Custom easing curves
   - Respect prefers-reduced-motion
   - Discrete, intentional motion (8–24px translates, 400–700ms)
   ============================================================ */

:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart, the workhorse */
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);     /* material standard */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);/* gentle overshoot, sparingly */
  --dur-fast:     280ms;
  --dur-base:     520ms;
  --dur-slow:     720ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Hero text: word-by-word rise+fade ----------------------- */
.hero-tagline,
.hero-title .word,
.hero-desc,
.hero-actions {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise var(--dur-base) var(--ease-premium) forwards;
}
.hero-tagline { animation-delay: 80ms; }
.hero-title   { /* container */ }
.hero-title .word { display: inline-block; }
.hero-title .word:nth-child(1)  { animation-delay: 180ms; }
.hero-title .word:nth-child(2)  { animation-delay: 230ms; }
.hero-title .word:nth-child(3)  { animation-delay: 280ms; }
.hero-title .word:nth-child(4)  { animation-delay: 330ms; }
.hero-title .word:nth-child(5)  { animation-delay: 380ms; }
.hero-title .word:nth-child(6)  { animation-delay: 430ms; }
.hero-title .word:nth-child(7)  { animation-delay: 480ms; }
.hero-title .word:nth-child(8)  { animation-delay: 530ms; }
.hero-title .word:nth-child(9)  { animation-delay: 580ms; }
.hero-title .word:nth-child(10) { animation-delay: 630ms; }
.hero-title .word:nth-child(11) { animation-delay: 680ms; }
.hero-title .word:nth-child(12) { animation-delay: 730ms; }
.hero-desc        { animation-delay: 780ms; }
.hero-actions     { animation-delay: 880ms; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Accent words: coral underline draws under each */
.hero-title .accent,
.section-title .accent {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-slow) var(--ease-premium);
  padding-bottom: 2px;
}
.hero-title .accent { animation-delay: 1100ms; }
.hero .hero-title .accent {
  animation: accent-underline-draw var(--dur-slow) var(--ease-premium) 1100ms forwards;
}
@keyframes accent-underline-draw {
  to { background-size: 100% 2px; }
}
/* For section accents — drawn when section title comes into view */
.section-title.in-view .accent,
.in-view .section-title .accent {
  background-size: 100% 2px;
}

/* Hero marquee: fade in + ramp up speed instead of jerky start */
.hero-marquee-wrap {
  opacity: 0;
  animation: marquee-fade-in 900ms var(--ease-premium) 1000ms forwards;
}
@keyframes marquee-fade-in {
  to { opacity: 1; }
}
/* Run continuously from page load (no delay) so refresh always lands
   mid-flow — the wrapper fades in over the moving track instead of
   waiting for it to start. */
.hero-marquee {
  animation: hero-marquee var(--marquee-duration, 40s) linear infinite;
}

/* --- Generic on-scroll reveal ------------------------------- */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium);
  will-change: opacity, transform;
}
.animate-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: child elements rise in sequence ------------------- */
.stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium);
}
.stagger.in-view > *           { opacity: 1; transform: translateY(0); }
.stagger.in-view > *:nth-child(1)  { transition-delay: 0ms; }
.stagger.in-view > *:nth-child(2)  { transition-delay: 70ms; }
.stagger.in-view > *:nth-child(3)  { transition-delay: 140ms; }
.stagger.in-view > *:nth-child(4)  { transition-delay: 210ms; }
.stagger.in-view > *:nth-child(5)  { transition-delay: 280ms; }
.stagger.in-view > *:nth-child(6)  { transition-delay: 350ms; }
.stagger.in-view > *:nth-child(7)  { transition-delay: 420ms; }
.stagger.in-view > *:nth-child(8)  { transition-delay: 490ms; }

/* --- Buttons: sweep fill on hover --------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium); }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-premium);
  z-index: -1;
  opacity: 0.08;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 80ms; }

/* --- Video card hover: refined lift, image zoom, play pulse - */
.video-card {
  transition: transform var(--dur-base) var(--ease-premium),
              box-shadow var(--dur-base) var(--ease-premium);
  will-change: transform;
}
.video-card img {
  transition: transform var(--dur-slow) var(--ease-premium),
              filter var(--dur-base) var(--ease-premium);
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-cinematic, 0 30px 60px -20px rgba(0,0,0,0.45));
}
.video-card:hover img {
  transform: scale(1.04);
  filter: brightness(1.03);
}
.video-card .play-btn {
  transition: transform var(--dur-base) var(--ease-spring),
              opacity var(--dur-fast) var(--ease-premium);
  transform: scale(0.85);
  opacity: 0.85;
}
.video-card:hover .play-btn {
  transform: scale(1);
  opacity: 1;
}

/* --- FAQ accordion: smooth height + chevron rotate ---------- */
.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-premium),
              opacity var(--dur-fast) var(--ease-premium),
              padding var(--dur-base) var(--ease-premium);
  opacity: 0;
  overflow: hidden;
}
.faq-item .faq-a > * {
  min-height: 0;
  overflow: hidden;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-toggle {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-premium);
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

/* --- Tabs: indicator slide --------------------------------- */
.tabs {
  position: relative;
}
.tabs button {
  transition: color var(--dur-fast) var(--ease-premium);
}
.service-card {
  animation: card-enter var(--dur-base) var(--ease-premium);
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Lightbox: backdrop fade + content scale --------------- */
.lightbox {
  animation: lightbox-fade var(--dur-fast) var(--ease-premium);
}
.lightbox-frame {
  animation: lightbox-pop var(--dur-base) var(--ease-premium);
}
@keyframes lightbox-fade {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; }
}
@keyframes lightbox-pop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Page transitions -------------------------------------- */
.page-enter {
  animation: page-enter var(--dur-base) var(--ease-premium);
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Header: subtle shadow on scroll already handled -------- */
.header { transition: background-color var(--dur-fast) var(--ease-premium),
                      box-shadow var(--dur-fast) var(--ease-premium),
                      backdrop-filter var(--dur-fast) var(--ease-premium); }

/* --- Form chips/inputs ------------------------------------- */
.chip { transition: background-color var(--dur-fast) var(--ease-premium),
                    color var(--dur-fast) var(--ease-premium),
                    border-color var(--dur-fast) var(--ease-premium),
                    transform var(--dur-fast) var(--ease-premium); }
.chip:hover { transform: translateY(-1px); }
input, select, textarea { transition: border-color var(--dur-fast) var(--ease-premium),
                                       box-shadow var(--dur-fast) var(--ease-premium); }

/* --- Magnetic CTA helper (set via JS data attr) ------------ */
.btn-magnetic { transition: transform var(--dur-fast) var(--ease-premium); }

/* ============================================================
   Site-wide reveals — every section animates on scroll
   These are auto-applied via [data-reveal] attributes injected
   in the JSX, but also fall back to bare element selectors so
   nothing is left static.
   ============================================================ */

/* Headers (eyebrow + title + subtitle) reveal as a triplet */
.section .eyebrow,
.section .section-title,
.section .section-subtitle,
.section-cta,
.footer-cta,
.page-hero > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium);
}
.section.in-view .eyebrow,
.section.in-view .section-title,
.section.in-view .section-subtitle,
.section-cta.in-view,
.footer-cta.in-view,
.page-hero.in-view > * { opacity: 1; transform: translateY(0); }
.section.in-view .eyebrow         { transition-delay: 0ms; }
.section.in-view .section-title   { transition-delay: 80ms; }
.section.in-view .section-subtitle{ transition-delay: 160ms; }
.page-hero.in-view > *:nth-child(1) { transition-delay: 0ms; }
.page-hero.in-view > *:nth-child(2) { transition-delay: 80ms; }
.page-hero.in-view > *:nth-child(3) { transition-delay: 160ms; }

/* Stats: each cell rises with stagger */
.stats .stat-cell { opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.stats.in-view .stat-cell { opacity: 1; transform: translateY(0); }
.stats.in-view .stat-cell:nth-child(5) { transition-delay: 0ms; }
.stats.in-view .stat-cell:nth-child(6) { transition-delay: 120ms; }
.stats.in-view .stat-cell:nth-child(7) { transition-delay: 240ms; }
.stats .corner-plus { opacity: 0; transition: opacity var(--dur-slow) var(--ease-premium) 400ms; }
.stats.in-view .corner-plus { opacity: 1; }

/* Process steps */
.process-grid .process-step { opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.process-grid.in-view .process-step { opacity: 1; transform: translateY(0); }
.process-grid.in-view .process-step:nth-child(1) { transition-delay: 0ms; }
.process-grid.in-view .process-step:nth-child(2) { transition-delay: 100ms; }
.process-grid.in-view .process-step:nth-child(3) { transition-delay: 200ms; }
.process-grid.in-view .process-step:nth-child(4) { transition-delay: 300ms; }

/* Comparison cards: slide in from sides */
.compare-row .compare-card.others { opacity: 0; transform: translateX(-24px);
  transition: opacity var(--dur-slow) var(--ease-premium),
              transform var(--dur-slow) var(--ease-premium); }
.compare-row .compare-card.flou   { opacity: 0; transform: translateX(24px);
  transition: opacity var(--dur-slow) var(--ease-premium),
              transform var(--dur-slow) var(--ease-premium) 100ms; }
.compare-row.in-view .compare-card { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .compare-row .compare-card { transform: none !important; }
}
/* Then each row inside cards staggers in */
.compare-card .compare-item { opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-premium),
              transform var(--dur-fast) var(--ease-premium); }
.compare-row.in-view .compare-item { opacity: 1; transform: translateY(0); }
.compare-row.in-view .compare-item:nth-child(2) { transition-delay: 200ms; }
.compare-row.in-view .compare-item:nth-child(3) { transition-delay: 250ms; }
.compare-row.in-view .compare-item:nth-child(4) { transition-delay: 300ms; }
.compare-row.in-view .compare-item:nth-child(5) { transition-delay: 350ms; }
.compare-row.in-view .compare-item:nth-child(6) { transition-delay: 400ms; }
.compare-row.in-view .compare-item:nth-child(7) { transition-delay: 450ms; }
.compare-row.in-view .compare-item:nth-child(8) { transition-delay: 500ms; }
.compare-row.in-view .compare-item:nth-child(9) { transition-delay: 550ms; }
.compare-row.in-view .compare-item:nth-child(10){ transition-delay: 600ms; }
.compare-row.in-view .compare-item:nth-child(11){ transition-delay: 650ms; }

/* Benefits: each line rises */
.benefits-list .benefit { opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.benefits-list.in-view .benefit { opacity: 1; transform: translateY(0); }
.benefits-list.in-view .benefit:nth-child(1) { transition-delay: 0ms; }
.benefits-list.in-view .benefit:nth-child(2) { transition-delay: 90ms; }
.benefits-list.in-view .benefit:nth-child(3) { transition-delay: 180ms; }
.benefits-list.in-view .benefit:nth-child(4) { transition-delay: 270ms; }
.benefits-list.in-view .benefit:nth-child(5) { transition-delay: 360ms; }

/* Logo cloud: cells fade-pop in a wave */
.logo-cloud .logo-cell { opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.logo-cloud.in-view .logo-cell { opacity: 1; transform: translateY(0) scale(1); }
.logo-cloud.in-view .logo-cell:nth-child(1)  { transition-delay: 0ms; }
.logo-cloud.in-view .logo-cell:nth-child(2)  { transition-delay: 50ms; }
.logo-cloud.in-view .logo-cell:nth-child(3)  { transition-delay: 100ms; }
.logo-cloud.in-view .logo-cell:nth-child(4)  { transition-delay: 150ms; }
.logo-cloud.in-view .logo-cell:nth-child(5)  { transition-delay: 200ms; }
.logo-cloud.in-view .logo-cell:nth-child(6)  { transition-delay: 250ms; }
.logo-cloud.in-view .logo-cell:nth-child(7)  { transition-delay: 300ms; }
.logo-cloud.in-view .logo-cell:nth-child(8)  { transition-delay: 350ms; }
.logo-cloud.in-view .logo-cell:nth-child(9)  { transition-delay: 400ms; }
.logo-cloud.in-view .logo-cell:nth-child(10) { transition-delay: 450ms; }

/* Logo cells: subtle hover lift */
.logo-cell { transition: transform var(--dur-fast) var(--ease-premium),
                         box-shadow var(--dur-fast) var(--ease-premium); }
.logo-cell:hover { transform: translateY(-2px); }

/* Portfolio grid cards stagger in (already had .stagger but reinforce) */
.portfolio-grid .video-card { opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium),
              box-shadow var(--dur-base) var(--ease-premium); }
.portfolio-grid.in-view .video-card,
.portfolio-grid.stagger.in-view .video-card { opacity: 1; transform: translateY(0); }
.portfolio-grid.in-view .video-card:nth-child(1)  { transition-delay: 0ms; }
.portfolio-grid.in-view .video-card:nth-child(2)  { transition-delay: 60ms; }
.portfolio-grid.in-view .video-card:nth-child(3)  { transition-delay: 120ms; }
.portfolio-grid.in-view .video-card:nth-child(4)  { transition-delay: 180ms; }
.portfolio-grid.in-view .video-card:nth-child(5)  { transition-delay: 240ms; }
.portfolio-grid.in-view .video-card:nth-child(6)  { transition-delay: 300ms; }
.portfolio-grid.in-view .video-card:nth-child(7)  { transition-delay: 360ms; }
.portfolio-grid.in-view .video-card:nth-child(8)  { transition-delay: 420ms; }

/* FAQ items reveal */
.faq-list .faq-item { opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.faq-list.in-view .faq-item { opacity: 1; transform: translateY(0); }
.faq-list.in-view .faq-item:nth-child(1) { transition-delay: 0ms; }
.faq-list.in-view .faq-item:nth-child(2) { transition-delay: 80ms; }
.faq-list.in-view .faq-item:nth-child(3) { transition-delay: 160ms; }
.faq-list.in-view .faq-item:nth-child(4) { transition-delay: 240ms; }
.faq-list.in-view .faq-item:nth-child(5) { transition-delay: 320ms; }

/* Service tabs + card */
.tabs { opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.tabs.in-view, .in-view .tabs { opacity: 1; transform: translateY(0); }

/* Footer columns stagger */
.footer-grid > * { opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.footer-grid.in-view > * { opacity: 1; transform: translateY(0); }
.footer-grid.in-view > *:nth-child(1) { transition-delay: 0ms; }
.footer-grid.in-view > *:nth-child(2) { transition-delay: 80ms; }
.footer-grid.in-view > *:nth-child(3) { transition-delay: 160ms; }
.footer-grid.in-view > *:nth-child(4) { transition-delay: 240ms; }

/* Contact form: chips and fields reveal */
.contact-form { opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-premium),
              transform var(--dur-slow) var(--ease-premium); }
.contact-form.in-view { opacity: 1; transform: translateY(0); }
.contact-aside .contact-info-card { opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.contact-aside.in-view .contact-info-card { opacity: 1; transform: translateY(0); }
.contact-aside.in-view .contact-info-card:nth-child(1) { transition-delay: 80ms; }
.contact-aside.in-view .contact-info-card:nth-child(2) { transition-delay: 180ms; }
.contact-aside.in-view .contact-info-card:nth-child(3) { transition-delay: 280ms; }

/* Filter bar (portfolio page) */
.filter-bar { opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium); }
.filter-bar.in-view { opacity: 1; transform: translateY(0); }

/* Marquee thumbs: no per-item rise (would conflict with the running track).
   Track itself fades in via .hero-marquee-wrap. */
@keyframes thumb-rise {
  from { opacity: 0; transform: translateY(20px) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}

/* Subtle parallax-y feel: section dark gets a soft accent glow that pulses */
.section.dark { position: relative; overflow: hidden; }
.section.dark::before {
  content: ""; position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,85,51,0.10), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: glow-drift 12s var(--ease-soft) infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(0,0); }
  to   { transform: translate(-80px, 60px); }
}

/* Eyebrow dot: subtle pulse to draw the eye */
.eyebrow::before {
  animation: dot-pulse 2.4s var(--ease-soft) infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241,85,51,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(241,85,51,0); }
}

/* ============================================================
   Cross-document page transitions (View Transitions API)
   Asymmetric: old leaves quickly (140ms ease-in), new arrives gently
   (260ms ease-out) with a small 60ms delay so they don't blend.
   Subtle 6px lift — feels directional without being heavy.
   Chrome 126+, Edge 126+, Safari 18.2+. Firefox: no-op (graceful).
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* Match the page bg so there's no flash of black/white during the
   transition window. */
::view-transition-group(root) {
  background-color: var(--background);
}

@keyframes flou-page-out {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes flou-page-in {
  from { opacity: 0; transform: translateY(6px);  }
  to   { opacity: 1; transform: translateY(0);    }
}

::view-transition-old(root) {
  animation: flou-page-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: flou-page-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 60ms;
}

/* Header & Footer persist across pages — no flicker, feel like SPA. */
.header-wrap { view-transition-name: flou-header; }
.footer      { view-transition-name: flou-footer; }

/* Persist by skipping the cross-fade; if the size differs (e.g. header
   .scrolled state) we let it snap rather than morph, which avoids
   mid-transition jank. */
::view-transition-old(flou-header),
::view-transition-new(flou-header),
::view-transition-old(flou-footer),
::view-transition-new(flou-footer) {
  animation: none;
  mix-blend-mode: normal;
}

/* Reduced motion: snap, do not animate. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none; }
}