/* ===================================================================
 * MOTION — scroll-driven animations + grain overlay
 * Cinematográfico DENTRO das seções; cortes secos ENTRE seções.
 * Tudo aqui usa CSS animation-timeline (Chrome/Edge 115+, Safari 26+).
 * Browsers sem suporte caem em estado final visível (sem motion).
 * Respeita prefers-reduced-motion.
 * =================================================================== */

/* === SUPPORT QUERIES ============================================ */
/* Por padrão, elementos animáveis começam invisíveis APENAS se o
   browser suportar animation-timeline. Em browsers sem suporte, eles
   ficam no estado final (visíveis e estáveis). */
@supports (animation-timeline: view()) {

  /* ============================================================
   * REVEAL UTILITIES — nomes curtos, aplicar via classe ou ::view
   * ============================================================ */

  /* Fade + sobe — uso geral (parágrafos, eyebrows, lead) */
  .m-fade-up {
    opacity: 0;
    transform: translateY(28px);
    animation: mFadeUp linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes mFadeUp {
    to { opacity: 1; transform: none; }
  }

  /* Fade + zoom-out leve — para imagens/posters cinematográficos */
  .m-zoom-out {
    opacity: 0;
    transform: scale(1.08);
    animation: mZoomOut linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes mZoomOut {
    to { opacity: 1; transform: scale(1); }
  }

  /* Slide horizontal — para cards em cases/partners */
  .m-slide-up {
    opacity: 0;
    transform: translateY(48px);
    animation: mSlideUp linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  @keyframes mSlideUp {
    to { opacity: 1; transform: none; }
  }

  /* Mask wipe — para títulos editoriais */
  .m-mask {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: mMask linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  @keyframes mMask {
    to { opacity: 1; clip-path: inset(0 0 0 0); }
  }

  /* Stagger — quando o pai é .m-stagger, filhos com .m-stagger-item
     se revelam em cascata pelo próprio offset no viewport */
  .m-stagger > .m-stagger-item {
    opacity: 0;
    transform: translateY(24px);
    animation: mFadeUp linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  /* ============================================================
   * COUNTER REVEAL — para números (Metrics)
   * ============================================================ */
  .m-counter {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    animation: mCounter linear forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  @keyframes mCounter {
    to { opacity: 1; transform: none; }
  }

  /* ============================================================
   * BINARY — código se montando conforme scroll progride
   * Cada .binary-line tem sua própria timeline pelo offset
   * ============================================================ */
  .m-line-build {
    opacity: 0;
    transform: translateX(-12px);
    animation: mLineBuild linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes mLineBuild {
    to { opacity: 1; transform: none; }
  }

  /* ============================================================
   * PARALLAX SUTIL — translateY com scroll inverso
   * ============================================================ */
  .m-parallax-up {
    animation: mParallaxUp linear;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes mParallaxUp {
    from { transform: translateY(40px); }
    to   { transform: translateY(-40px); }
  }

  .m-parallax-down {
    animation: mParallaxDown linear;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes mParallaxDown {
    from { transform: translateY(-30px); }
    to   { transform: translateY(30px); }
  }

  /* ============================================================
   * UNIVERSITY POSTER — scale-in cinematográfico
   * ============================================================ */
  .m-poster-in {
    transform: scale(1.12);
    transform-origin: 50% 50%;
    animation: mPosterIn linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes mPosterIn {
    to { transform: scale(1); }
  }

  /* ============================================================
   * MANIFESTO WORD-BY-WORD — refinar o existente
   * (Mantém compatibilidade — classes já existentes continuam funcionando)
   * ============================================================ */
}

/* === REDUCED MOTION ============================================== */
@media (prefers-reduced-motion: reduce) {
  .m-fade-up,
  .m-zoom-out,
  .m-slide-up,
  .m-mask,
  .m-stagger > .m-stagger-item,
  .m-counter,
  .m-line-build,
  .m-poster-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .m-parallax-up,
  .m-parallax-down {
    animation: none !important;
    transform: none !important;
  }
}

/* ===================================================================
 * GRAIN / NOISE OVERLAY — atmosfera para seções escuras
 * Aplicar com classe .has-grain no container escuro.
 * Usa SVG inline turbulence — peso ínfimo, GPU-accelerated.
 * =================================================================== */
.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; }

/* ===================================================================
 * SECTION REVEAL — títulos de seção em todas as páginas
 * Aplicar .m-section-title em h1/h2 de seções (não-hero).
 * Eyebrow + título + lead se revelam em cascata pelo scroll.
 * =================================================================== */
@supports (animation-timeline: view()) {
  .m-section-head {
    /* Container que dispara cascata */
  }
  .m-section-head .eyebrow,
  .m-section-head h1,
  .m-section-head h2,
  .m-section-head .lead,
  .m-section-head p {
    opacity: 0;
    transform: translateY(20px);
    animation: mFadeUp linear forwards;
    animation-timeline: view();
  }
  .m-section-head .eyebrow {
    animation-range: entry 0% entry 50%;
  }
  .m-section-head h1,
  .m-section-head h2 {
    animation-range: entry 5% entry 60%;
  }
  .m-section-head .lead,
  .m-section-head p {
    animation-range: entry 10% entry 70%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-section-head .eyebrow,
  .m-section-head h1,
  .m-section-head h2,
  .m-section-head .lead,
  .m-section-head p {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}