/* =========================================================
   v5 motion layer: page transitions, Lenis, progress line
   ========================================================= */

/* Smooth cross-fade between pages (View Transitions API, no JS).
   Header and the background photo stay put; only the content fades. */
@view-transition{ navigation:auto; }
.site-header{ view-transition-name:site-header; }
.bg-field{ view-transition-name:bg-field; }
::view-transition-old(root){ animation:vtOut .35s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:vtIn .55s cubic-bezier(.16,1,.3,1) .08s both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-12px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(18px); } }

/* Lenis (recommended base styles) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* reading progress line */
.v5-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1001; pointer-events:none;
  background:linear-gradient(90deg, var(--primary,#1c6c8f), #8eb5c6, #e2eef4);
  box-shadow:0 0 10px rgba(142,181,198,.7);
  transform:scaleX(0); transform-origin:0 50%;
}

/* 3D scroll scenes: v5-fx.js scrubs each block from its starting pose (0) to rest (1) by writing the
   individual translate / rotate / scale / opacity properties on the block itself. These stack with the
   block's own hover 'transform', so hover effects keep working, and at rest the properties are empty.
   The GPU layer (will-change) exists only while a block is within about a screen of the viewport. */
.v5-stage{ perspective:1400px; }
.v5s.v5-live{ will-change:translate, rotate, scale, opacity; backface-visibility:hidden; }

/* pointer tilt (desktop): leans the hovered card towards the mouse. v5-fx.js writes one inline transform
   per frame (tilt + hover lift), and during that the card's own transform transition is off, so the card
   follows a single easing instead of chasing it through a second one. */
.v5-tilt{ position:relative; }
.v5-tilt.is-tilting{ transition-property:box-shadow, border-color, background-color, color !important; will-change:transform; }
.v5-glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(226,238,244,.16), rgba(226,238,244,0) 55%);
  opacity:0; transition:opacity .4s ease; mix-blend-mode:screen;
}
.v5-tilt.is-lit .v5-glare{ opacity:1; }

/* testimonials: the scrolling track clips its children, so give the cards room
   to lift and lean on hover without their corners being cut off */
.tm-track{ padding:18px 14px 26px; margin:-18px -14px -16px; scroll-padding-inline:14px; }

/* while a block floats in, its own CSS transitions are paused (they fight the animation) */
.v5-moving{ transition:none !important; }

/* ---------- Phones: light mode ----------
   float-ins are CSS animations (transform + opacity only → graphics thread) */
.v5p:not(.v5-play){
  opacity:var(--so,0);
  transform:perspective(1000px) translate3d(var(--sx,0px), var(--sy,24px), 0) rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg)) scale(var(--ss,1));
}
.v5p.v5-play{ animation:v5float 1.7s cubic-bezier(.22,1,.36,1) var(--sd,0s) both; transition:none !important; }
@keyframes v5float{
  from{ opacity:var(--so,0); transform:perspective(1000px) translate3d(var(--sx,0px), var(--sy,24px), 0) rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg)) scale(var(--ss,1)); }
  to{ opacity:1; transform:perspective(1000px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1); }
}
/* endless loops pause while off screen */
.v5-off *{ animation-play-state:paused !important; }
/* a live blur behind the fixed header is redrawn on every scroll frame (on a bar that is already 92% opaque,
   so the blur is barely visible): a solid bar looks the same and costs nothing while scrolling */
.site-header.solid{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,26,56,.96); }
.mobile-nav{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* phones: show the back-to-top button too, stacked above the WhatsApp button */
@media (max-width:640px){
  .back-to-top{ display:flex; }
}

/* phones: footer Quick Links and Popular Links side by side */
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr 1fr !important; column-gap:18px; }
  .footer-grid > *:not(:nth-child(2)):not(:nth-child(3)){ grid-column:1 / -1; }
  .footer-grid .footer-links a{ line-height:1.35; }
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  .v5-progress{ display:none; }
}