/* ===================================================================
 * MOTION — PREMIUM EDITORIAL SYSTEM (Cross-Browser)
 * Uses IntersectionObserver (.reveal → .in) + Lenis Smooth Scroll.
 * GPU-accelerated CSS transitions only (transform + opacity + filter).
 * Inspired by: Apple.com, Stripe, Linear, Vercel — cinematic reveals.
 * =================================================================== */

/* ============================================================
 * 1. CORE REVEAL — dramatic slide-up with blur dissipation
 * ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  filter: blur(4px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* Staggered delays */
.reveal[data-delay="1"] { transition-delay: 120ms; }
.reveal[data-delay="2"] { transition-delay: 240ms; }
.reveal[data-delay="3"] { transition-delay: 360ms; }
.reveal[data-delay="4"] { transition-delay: 480ms; }
.reveal[data-delay="5"] { transition-delay: 600ms; }

/* ============================================================
 * 2. SECTION HEAD — choreographed text entrance
 * Eyebrow slides from left, H2 lifts up, Lead fades in
 * ============================================================ */
.m-section-head .eyebrow {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.m-section-head h2,
.m-section-head h1 {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(3px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.m-section-head .lead,
.m-section-head > p {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* Activated states */
.m-section-head.in .eyebrow,
.in .m-section-head .eyebrow {
  opacity: 1;
  transform: none;
}
.m-section-head.in h2,
.m-section-head.in h1,
.in .m-section-head h2,
.in .m-section-head h1 {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}
.m-section-head.in .lead,
.m-section-head.in > p,
.in .m-section-head .lead,
.in .m-section-head > p {
  opacity: 1;
  transform: none;
}

/* ============================================================
 * 3. STAGGER — children cascade in with bounce
 * ============================================================ */
.m-stagger > .m-stagger-item {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.m-stagger > .m-stagger-item:nth-child(1) { transition-delay: 0.06s; }
.m-stagger > .m-stagger-item:nth-child(2) { transition-delay: 0.15s; }
.m-stagger > .m-stagger-item:nth-child(3) { transition-delay: 0.24s; }
.m-stagger > .m-stagger-item:nth-child(4) { transition-delay: 0.33s; }
.m-stagger > .m-stagger-item:nth-child(5) { transition-delay: 0.42s; }
.m-stagger > .m-stagger-item:nth-child(6) { transition-delay: 0.51s; }

.m-stagger.in > .m-stagger-item,
.in .m-stagger > .m-stagger-item {
  opacity: 1;
  transform: none;
}

/* ============================================================
 * 4. HERO — choreographed entrance (no blur, clean slide-up)
 * ============================================================ */
.hero-left > * {
  opacity: 0;
  transform: translateY(40px);
  animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-left > *:nth-child(1) { animation-delay: 0.1s; }
.hero-left > *:nth-child(2) { animation-delay: 0.25s; }
.hero-left > *:nth-child(3) { animation-delay: 0.4s; }
.hero-left > *:nth-child(4) { animation-delay: 0.55s; }
.hero-left > *:nth-child(5) { animation-delay: 0.7s; }

@keyframes heroEntrance {
  to { opacity: 1; transform: none; }
}

/* Hero headline words — staggered word reveal */
.hero-headline .word {
  opacity: 0;
  transform: translateY(24px);
  animation: wordReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.08s + 0.15s);
}
@keyframes wordReveal {
  to { opacity: 1; transform: none; }
}

/* Hero right — org cards with overshoot */
.org-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  animation: cardEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.org-card:nth-child(1) { animation-delay: 0.35s; }
.org-card:nth-child(2) { animation-delay: 0.5s; }
.org-card:nth-child(3) { animation-delay: 0.65s; }

@keyframes cardEntrance {
  to { opacity: 1; transform: none; }
}

/* ============================================================
 * 5. SERVICE CARDS — scroll-driven 3D perspective per card
 *    Transform is set by JS scroll listener. CSS handles
 *    transform-origin and hover after reveal completes (.in).
 * ============================================================ */
.service-card.svc-reveal {
  transform-origin: center top;
  will-change: transform, opacity;
  /* Initial opacity set by JS; fallback for no-JS */
  opacity: 0;
}
.service-card.svc-reveal.in {
  opacity: 1;
  transform: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}
.service-card.svc-reveal.in:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 48px -12px rgba(105, 17, 223, 0.15);
}

/* ============================================================
 * 6. CASE ROWS — slide from left with clip reveal
 * ============================================================ */
.case-row.m-stagger-item {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.in .case-row.m-stagger-item,
.cases-section.in .case-row.m-stagger-item {
  opacity: 1;
  transform: none;
}

/* ============================================================
 * 7. METRICS — counter zoom-in with blur
 * ============================================================ */
.metric {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  filter: blur(3px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.6s ease;
}
.metric:nth-child(1) { transition-delay: 0s; }
.metric:nth-child(2) { transition-delay: 0.12s; }
.metric:nth-child(3) { transition-delay: 0.24s; }
.metric:nth-child(4) { transition-delay: 0.36s; }

.in .metric,
.metrics.in .metric {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* ============================================================
 * 8. UNIVERSITY VIDEO — dramatic scale reveal
 * ============================================================ */
.uni-video {
  opacity: 0;
  transform: scale(0.85);
  filter: blur(4px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s ease;
}
.in .uni-video,
.university-home.in .uni-video {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* ============================================================
 * 9. PARTNERS — accordion fade-in (opacity only, no transform
 *    to avoid interfering with child flex-grow transitions)
 * ============================================================ */
.partners-accordion {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.in .partners-accordion,
.partners-accordion.in,
.partners-section.in .partners-accordion {
  opacity: 1;
}

/* ============================================================
 * 10. BINARY SHOWCASE — 3D perspective unfold
 * ============================================================ */
.binary-showcase-inner {
  opacity: 0;
  transform: perspective(900px) rotateX(8deg) translateY(50px) scale(0.94);
  filter: blur(2px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s ease;
  transform-origin: center top;
}
.in .binary-showcase-inner,
.binary-showcase.in .binary-showcase-inner {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
  filter: blur(0px);
}

/* ============================================================
 * 11. FEATURES GRID — 3D container scroll
 * ============================================================ */
.features-grid {
  opacity: 0;
  transform: perspective(1000px) rotateX(6deg) scale(0.92);
  filter: blur(2px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s ease;
  transform-origin: center top;
}
.in .features-grid,
.features.in .features-grid {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) scale(1);
  filter: blur(0px);
}

.feature {
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.in .feature,
.features.in .feature {
  opacity: 1;
  transform: none;
}
.feature:nth-child(1) { transition-delay: 0.08s; }
.feature:nth-child(2) { transition-delay: 0.18s; }
.feature:nth-child(3) { transition-delay: 0.28s; }
.feature:nth-child(4) { transition-delay: 0.38s; }

/* ============================================================
 * 12. CRED BAR — fade + slide
 * ============================================================ */
.cred-bar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cred-bar.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
 * 13. MANIFESTO — text reveal with blur dissipation
 * ============================================================ */
.manifesto-text {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(4px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s ease;
}
.in .manifesto-text,
.manifesto.in .manifesto-text {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* ============================================================
 * 14. HOVER MICRO-INTERACTIONS
 * Proven to increase engagement (Contentsquare 2024)
 * ============================================================ */

/* Service cards: lift + shadow on hover */
.service-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* Org cards: subtle scale on hover */
.org-card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* Case rows: slide-right accent on hover */
.case-row {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
}
.case-row:hover {
  transform: translateX(8px);
  background: var(--surface-hover, rgba(0,0,0,0.02));
}

/* Feature cards: lift + shadow */
.feature {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}

/* CTA buttons: scale feedback */
.btn-accent:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(105, 17, 223, 0.25);
}
.btn-ghost:hover {
  transform: translateY(-2px);
}

/* ============================================================
 * 15. SCROLL PROGRESS BAR
 * ============================================================ */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-hi), var(--accent));
  z-index: 10000;
  pointer-events: none;
  transition: none;
}

/* === REDUCED MOTION ============================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .m-section-head .eyebrow,
  .m-section-head h2,
  .m-section-head h1,
  .m-section-head .lead,
  .m-section-head > p,
  .m-stagger > .m-stagger-item,
  .hero-left > *,
  .hero-headline .word,
  .org-card,
  .service-card.svc-reveal,
  .case-row.m-stagger-item,
  .metric,
  .uni-video,
  .partners-accordion,
  .binary-showcase-inner,
  .features-grid,
  .feature,
  .cred-bar,
  .manifesto-text {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================
 * GRAIN / NOISE OVERLAY
 * =================================================================== */
.has-grain {
  position: relative;
  isolation: isolate;
}
.has-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.has-grain > * {
  position: relative;
  z-index: 2;
}
.has-grain.grain-strong::after { opacity: 0.10; }
.has-grain.grain-subtle::after { opacity: 0.035; }