/**
 * Staggered screen transitions: content children slide at different delays/offsets.
 * Root wrapper stays stationary; each [data-pt-child] animates independently.
 */

/* View Transitions API fallback (Chromium cross-document) */
@keyframes wnf-vt-out { to { transform: translate3d(-100vw, 0, 0); } }
@keyframes wnf-vt-in  { from { transform: translate3d(100vw, 0, 0); } to { transform: translate3d(0, 0, 0); } }
::view-transition-old(root) { animation: wnf-vt-out 0.52s cubic-bezier(0.22, 0.85, 0.32, 1) both; }
::view-transition-new(root) { animation: wnf-vt-in  0.55s cubic-bezier(0.22, 0.85, 0.32, 1) both; }

/* PT root: positional wrapper only (no translate) */
#wnfPtRoot.wnf-pt-root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* Don't clip horizontally - staggered children use ±120vw transforms.
   Vertical: keep page from growing a scrollbar during the motion. */
html.pt-pending-enter,
html.pt-exiting {
  overflow-x: visible !important;
  overflow-y: hidden !important;
}
html.pt-pending-enter body,
html.pt-exiting body,
html.pt-pending-enter #wnfPtRoot *,
html.pt-exiting #wnfPtRoot * {
  overflow: visible !important;
}

/* Enter: pt-slide-flow is still toggled in JS for hooks; vertical lock is html.pt-motion-lock
   (pending-enter is removed before stagger, so do not rely on body overflow:visible during enter). */
html.pt-motion-lock {
  overflow-x: visible !important;
  overflow-y: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
}
html.pt-motion-lock body {
  overflow-x: visible !important;
  overflow-y: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
}
body.pt-exiting {
  overflow: visible !important;
}
/* Scroll containers that should keep layout */
html.pt-pending-enter #wnfPtRoot .dwLog,
html.pt-exiting #wnfPtRoot .dwLog,
html.pt-pending-enter #wnfPtRoot [data-keep-overflow],
html.pt-exiting #wnfPtRoot [data-keep-overflow] {
  overflow: auto !important;
}
body.pt-exiting { pointer-events: none; }

/* Stagger slides whole blocks inside .s0-wrap - .s0-swipeStage is normally overflow:hidden
   for the two-pane track; during PT that clips off-screen transforms → visible slice only */
/* Enter only: exit must keep stage clipped or the 2nd swipe pane (handoff) appears on the right */
#wnfPtRoot.pt-app .s0-swipeStage {
  overflow: visible !important;
}
body.pt-exiting .s0-swipeStage {
  overflow: hidden !important;
}

/* Let transformed children extend past the viewport edge (body is overflow:hidden on index) */
#wnfPtRoot.pt-app,
body.pt-exiting #wnfPtRoot {
  overflow: visible !important;
}

/* === Staggered child animation === */

#wnfPtRoot [data-pt-child] {
  will-change: transform, opacity;
}

/* Pending enter - children parked off-screen right, with vertical + rotation perturbation */
html.pt-pending-enter #wnfPtRoot [data-pt-child] {
  transform: translate3d(120vw, calc(var(--pt-y, 0) * 1px), 0) rotate(var(--pt-rot, 0deg));
  opacity: 0.96;
}

/* Enter active - staggered return to baseline */
#wnfPtRoot.pt-app.pt-enter-ready [data-pt-child] {
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
  transition:
    transform 0.6s cubic-bezier(0.22, 0.85, 0.32, 1),
    opacity 0.36s ease;
  transition-delay: calc(var(--pt-i, 0) * 50ms);
}

/* Exit - staggered slide left with perturbation */
body.pt-exiting #wnfPtRoot [data-pt-child] {
  transform: translate3d(-120vw, calc(var(--pt-y, 0) * 1px), 0) rotate(var(--pt-rot, 0deg));
  opacity: 0.96;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.85, 0.32, 1),
    opacity 0.34s ease;
  transition-delay: calc(var(--pt-i, 0) * 45ms);
}

/* Reduced-motion mode toggle (pt-rm): collapse delays so it still feels staggered but quicker */
html.pt-rm #wnfPtRoot [data-pt-child] {
  transition-duration: 0.22s, 0.16s !important;
  transition-delay: calc(var(--pt-i, 0) * 20ms) !important;
}

/* === Home button fade === */

.homeBtn.pt-fade-out {
  opacity: 0;
  transform: scale(0.92) translateX(-8px);
  pointer-events: none;
  transition:
    opacity 0.28s ease-out,
    transform 0.32s cubic-bezier(0.22, 0.85, 0.32, 1);
}

.homeBtn.pt-fade-in-start {
  opacity: 0;
  transform: scale(0.92) translateX(-8px);
  pointer-events: none;
}
.homeBtn.pt-fade-in-start.pt-fade-in-active {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
  transition:
    opacity 0.34s ease-out 0.18s,
    transform 0.42s cubic-bezier(0.22, 0.85, 0.32, 1) 0.18s;
}

/* On mobile, home button is on the right - flip the drift direction */
@media (max-width: 979px) {
  .homeBtn.pt-fade-out,
  .homeBtn.pt-fade-in-start {
    transform: scale(0.92) translateX(8px);
  }
  .homeBtn.pt-fade-in-start.pt-fade-in-active {
    transform: scale(1) translateX(0);
  }
}

/* === Static chrome: nav, theme, bgCanvas - never slide === */
/* (homeBtn EXCLUDED here - it has its own fade animation) */
.themeToggle,
.servicesBtn, .casesBtn, .blogBtn, .pricingBtn, .tgBtn,
#bgCanvas {
  transform: none !important;
}

/* =========================================================================
   Mobile collapsible nav (≤740px). Desktop is untouched: every rule is gated
   behind the media query, so above 740px the rail shows exactly as before.
   The toggle + scrim are injected by page-transitions.js; html.wnf-mnav marks
   that JS ran, html.wnf-mnav-open marks the expanded state.
   ========================================================================= */
.wnf-navToggle, .wnf-navScrim { display: none; }

@media (max-width: 740px) {
  html.wnf-mnav .wnf-navToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(var(--pad, 16px) + env(safe-area-inset-top, 0px) + 36px);
    left: calc(var(--pad, 16px) + 18px);
    right: auto;
    width: 48px;
    height: 48px;
    z-index: 600;
    border-radius: 14px;
    border: 1px solid rgba(var(--k-rgb, 0,0,0), 0.14);
    background: rgba(var(--w-rgb, 255,255,255), 0.55);
    color: rgba(var(--k-rgb, 0,0,0), 1);
    box-shadow: 0 3px 14px rgba(var(--k-rgb, 0,0,0), 0.10), inset 0 1px 0 rgba(var(--w-rgb, 255,255,255), 0.7);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease-out;
  }
  body.theme-dark .wnf-navToggle {
    background: rgba(var(--w-rgb, 255,255,255), 0.16);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(var(--k-rgb, 0,0,0), 0.1);
  }
  html.wnf-mnav .wnf-navToggle:active { transform: scale(0.95); }
  html.wnf-mnav .wnf-navToggle:focus-visible { outline: 2px solid var(--r, #F92357); outline-offset: 3px; }

  .wnf-navToggle .wnf-navBars { position: relative; width: 20px; height: 14px; }
  .wnf-navToggle .wnf-navBars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2.4px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.26s cubic-bezier(0.22,0.85,0.32,1), opacity 0.2s ease;
  }
  .wnf-navToggle .wnf-navBars span:nth-child(1) { top: 0; }
  .wnf-navToggle .wnf-navBars span:nth-child(2) { top: 5.8px; }
  .wnf-navToggle .wnf-navBars span:nth-child(3) { top: 11.6px; }
  html.wnf-mnav-open .wnf-navToggle .wnf-navBars span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
  html.wnf-mnav-open .wnf-navToggle .wnf-navBars span:nth-child(2) { opacity: 0; }
  html.wnf-mnav-open .wnf-navToggle .wnf-navBars span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

  /* Dim scrim behind the open menu (tap to close) */
  html.wnf-mnav .wnf-navScrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 559;
    background: rgba(0,0,0,0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
  }
  html.wnf-mnav-open .wnf-navScrim { opacity: 1; visibility: visible; }

  /* Collapsed by default: remove the rail buttons from the layout. display:none is
     used (not opacity) so nothing — running transitions, !important, JS — can keep
     them on screen; this is the override-proof state. */
  html.wnf-mnav .homeBtn,
  html.wnf-mnav .servicesBtn,
  html.wnf-mnav .casesBtn,
  html.wnf-mnav .blogBtn,
  html.wnf-mnav .pricingBtn,
  html.wnf-mnav .tgBtn { display: none !important; }

  /* Open: bring them back and play a staggered slide-in. CSS animations sit above
     !important in the cascade, so the keyframe transform beats the page's
     "transform:none !important" static-chrome rule for the duration of the reveal. */
  html.wnf-mnav-open .homeBtn,
  html.wnf-mnav-open .servicesBtn,
  html.wnf-mnav-open .casesBtn,
  html.wnf-mnav-open .blogBtn,
  html.wnf-mnav-open .pricingBtn,
  html.wnf-mnav-open .tgBtn {
    display: flex !important;
    animation: wnfNavItemIn 0.30s cubic-bezier(0.22,0.85,0.32,1) both;
  }
  html.wnf-mnav-open .homeBtn { animation-delay: 0.02s; }
  html.wnf-mnav-open .servicesBtn { animation-delay: 0.05s; }
  html.wnf-mnav-open .casesBtn { animation-delay: 0.08s; }
  html.wnf-mnav-open .blogBtn { animation-delay: 0.11s; }
  html.wnf-mnav-open .pricingBtn { animation-delay: 0.14s; }
  html.wnf-mnav-open .tgBtn { animation-delay: 0.17s; }

  /* A page's own button stays hidden even when the menu opens (higher specificity
     via the attribute selector beats the display:flex open rule). */
  html.wnf-mnav .homeBtn[aria-current="page"],
  html.wnf-mnav .servicesBtn[aria-current="page"],
  html.wnf-mnav .casesBtn[aria-current="page"],
  html.wnf-mnav .blogBtn[aria-current="page"],
  html.wnf-mnav .pricingBtn[aria-current="page"] { display: none !important; }
}

@keyframes wnfNavItemIn {
  from { opacity: 0; transform: translateX(16px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* OS “reduce motion”: shorter transitions, no stagger — same palette */
@media (prefers-reduced-motion: reduce) {
  #wnfPtRoot [data-pt-child] {
    transition-duration: 0.14s, 0.12s !important;
    transition-delay: 0ms !important;
  }
  html.pt-pending-enter #wnfPtRoot [data-pt-child] {
    transition: none !important;
  }
  .homeBtn.pt-fade-out,
  .homeBtn.pt-fade-in-start,
  .homeBtn.pt-fade-in-start.pt-fade-in-active {
    transition-duration: 0.16s !important;
  }
}