/* ════════════════════════════════════════════════════════════════
   Codeploy — Page load + transition animations (v2)
   ──────────────────────────────────────────────────────────────── */

/* ── Page boot: prevent flash, then fade body in ──
   NOTE: do NOT apply `transform:` or `filter:` on body — both create a
   containing block and break `position: fixed` on .nav (header would scroll
   with the page). Keep this animation to opacity only. */
html.cp-anim body {
  opacity: 0;
  animation: cp-page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards;
}
html.cp-anim.cp-leaving body {
  animation: cp-page-out 0.32s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes cp-page-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes cp-page-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Refined reveal: subtle blur + Y + scale ── */
html.cp-anim body.v2 .reveal {
  opacity: 0 !important;
  transform: translateY(14px);
  filter: blur(8px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: none !important;
}
html.cp-anim body.v2 .reveal.in,
html.cp-anim body.v2 .reveal.cp-boot {
  opacity: 1 !important;
  transform: none;
  filter: blur(0);
}

/* Above-the-fold (.reveal already in viewport on load) — cascade with delays */
html.cp-anim body.v2 .reveal.cp-boot      { transition-delay: 0.05s; }
html.cp-anim body.v2 .reveal.cp-boot.d1   { transition-delay: 0.13s; }
html.cp-anim body.v2 .reveal.cp-boot.d2   { transition-delay: 0.21s; }
html.cp-anim body.v2 .reveal.cp-boot.d3   { transition-delay: 0.29s; }
html.cp-anim body.v2 .reveal.cp-boot.d4   { transition-delay: 0.37s; }
html.cp-anim body.v2 .reveal.cp-boot.d5   { transition-delay: 0.45s; }

/* Hero code panel — slide in from the side */
html.cp-anim body.v2 .hero__visual.reveal {
  transform: translateY(14px) scale(0.985);
}
html.cp-anim body.v2 .hero__visual.reveal.cp-boot,
html.cp-anim body.v2 .hero__visual.reveal.in {
  transform: none;
}

/* Nav — fade in along with page (no drop, header stays fixed) */
html.cp-anim .nav {
  animation: cp-nav-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cp-nav-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Clients — gentle stagger on each tile (overrides .reveal cascade for grid effect) */
html.cp-anim body.v2 .clients-grid .client {
  transition-property: opacity, transform, filter, background;
}
html.cp-anim body.v2 .clients-grid .client:nth-child(1) { transition-delay: 0.00s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(2) { transition-delay: 0.05s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(3) { transition-delay: 0.10s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(4) { transition-delay: 0.15s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(5) { transition-delay: 0.20s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(6) { transition-delay: 0.05s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(7) { transition-delay: 0.10s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(8) { transition-delay: 0.15s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(9) { transition-delay: 0.20s; }
html.cp-anim body.v2 .clients-grid .client:nth-child(10){ transition-delay: 0.25s; }

/* Service / product / project / process — give children inside grid a per-cell stagger */
html.cp-anim body.v2 .services-grid > .reveal,
html.cp-anim body.v2 .products-grid > .reveal,
html.cp-anim body.v2 .projects-grid > .reveal,
html.cp-anim body.v2 .process-grid  > .reveal,
html.cp-anim body.v2 .about-stats   > .about-stat {
  will-change: opacity, transform, filter;
}

/* About stats: counter-style mini fade-in */
html.cp-anim body.v2 .about-stats .about-stat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.cp-anim body.v2 .about-stats.in .about-stat,
html.cp-anim body.v2 .about-stats .about-stat.in { opacity: 1; transform: none; }
html.cp-anim body.v2 .about-stats .about-stat:nth-child(1) { transition-delay: 0.00s; }
html.cp-anim body.v2 .about-stats .about-stat:nth-child(2) { transition-delay: 0.08s; }
html.cp-anim body.v2 .about-stats .about-stat:nth-child(3) { transition-delay: 0.16s; }
html.cp-anim body.v2 .about-stats .about-stat:nth-child(4) { transition-delay: 0.24s; }

/* ── View Transitions API (Chrome 111+) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: cp-vt-out 0.28s cubic-bezier(0.65, 0, 0.35, 1) both;
}
::view-transition-new(root) {
  animation: cp-vt-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cp-vt-out {
  to { opacity: 0; transform: translateY(-6px); filter: blur(4px); }
}
@keyframes cp-vt-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Preserve nav across pages with a named view-transition (smooth chrome) */
.nav { view-transition-name: cp-nav; }
::view-transition-old(cp-nav),
::view-transition-new(cp-nav) {
  animation-duration: 0.32s;
}

/* ── Smooth scroll for anchors ── */
html { scroll-behavior: smooth; }

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html.cp-anim body,
  html.cp-anim body.v2 .reveal,
  html.cp-anim body.v2 .about-stats .about-stat,
  html.cp-anim .nav {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}