/* ============================================================
   Tutor People — Cinematic Polish Layer
   1. View Transitions API — native cross-document page morphs
   2. Scroll-driven animations — pure CSS animation-timeline
   All effects are progressively enhanced (@supports gated) and
   fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ===== 1. Cross-document View Transitions (MPA) =====
   One line opts the whole site into silky page-to-page morphs
   in supporting browsers (Chrome/Edge 126+). Others fall back
   to instant navigation — zero cost. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: tpc-vt-leave 0.3s cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: tpc-vt-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes tpc-vt-leave {
  to {
    opacity: 0;
    transform: translateY(-14px) scale(0.985);
    filter: blur(4px);
  }
}

@keyframes tpc-vt-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.99);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ===== 2. Scroll-driven animations (pure CSS, no JS) ===== */

/* Reading progress bar pinned to the very top of the viewport */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: 100001;
      pointer-events: none;
      background: linear-gradient(90deg, #22d3ee, #818cf8, #22d3ee);
      box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: tpc-scroll-progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes tpc-scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Elements rise, sharpen and fade in as they enter the viewport.
   Each element tracks its own view() timeline, so grids get a
   natural cascade for free — buttery on mobile, zero JS. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card-grid .card,
    .card-grid > .card-block,
    .cta-band,
    .tpc-page-nav a,
    .page h2,
    .page table,
    .service-card,
    .pricing-card,
    .team-card,
    .stat-card,
    .testimonial-card,
    .feature-card,
    .blog-card {
      animation: tpc-scroll-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Cards inside linked blocks shouldn't double-animate */
    .card-grid > .card-block .card {
      animation: none;
    }

    /* Hero leads gently settle as they scroll out of view */
    .hero h1,
    .hero .lead {
      animation: tpc-scroll-settle linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes tpc-scroll-rise {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes tpc-scroll-settle {
  to {
    opacity: 0.25;
    transform: translateY(-18px);
    filter: blur(2px);
  }
}