/*!
 * PAG Motion — styles for the animation and image-effect classes
 * ---------------------------------------------------------------------------
 * 1. Brand tokens        2. Start states (so nothing flashes before GSAP runs)
 * 3. Text splitting      4. Image effects        5. Pointer effects
 * 6. Layout helpers      7. Accessibility and reduced motion
 *
 * Every animation class is listed in ANIMATION-GUIDE.md.
 */

/* =====================================================================
   1. BRAND TOKENS
   ===================================================================== */
:root{
  --pag-primary:#2168AB;
  --pag-secondary:#CF021A;
  --pag-ink:#0F1B2D;
  --pag-muted:#4E5D73;
  --pag-line:rgba(15,27,45,.14);
  --pag-white:#fff;

  --pag-font-heading:'Red Hat Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pag-font-body:'Neue Montreal', 'Red Hat Display', system-ui, sans-serif;
  --pag-font-display:'Costaline', 'Red Hat Display', Georgia, serif;

  --pag-ease-out:cubic-bezier(.2,.7,.2,1);
  --pag-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --pag-dur:.6s;
}

/* =====================================================================
   2. START STATES
   Applied only while the engine is running (html.pag-motion-on), so with
   JavaScript off, in the Elementor editor, or with reduced motion, content
   is simply visible.
   ===================================================================== */
.pag-motion-on :is(.pag-fade,.pag-fade-up,.pag-fade-down,.pag-fade-left,.pag-fade-right,
  .pag-zoom-in,.pag-zoom-out,.pag-rotate-in,.pag-flip-in,.pag-blur-in):not(.pag-skip):not(.pag-ready){
  opacity:0;
}
.pag-motion-on :is(.pag-mask-up,.pag-img-reveal):not(.pag-skip):not(.pag-ready){clip-path:inset(100% 0 0 0)}
.pag-motion-on .pag-mask-left:not(.pag-skip):not(.pag-ready){clip-path:inset(0 100% 0 0)}
.pag-motion-on .pag-stagger:not(.pag-skip):not(.pag-ready) > *{opacity:0}
/* .pag-ready means GSAP has taken the element over and holds its start state inline */
/* the engine sets .pag-skip when an animation is turned off for this screen size */
.pag-skip{opacity:1 !important; clip-path:none !important}

/* =====================================================================
   3. TEXT SPLITTING (pag-text-words / -chars / -lines)
   ===================================================================== */
.pag-line{display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.16em; margin-bottom:-.16em}
.pag-line-i{display:inline-block; will-change:transform}
.pag-text-chars .pag-line{padding-bottom:.2em; margin-bottom:-.2em}

/* =====================================================================
   4. IMAGE EFFECTS
   Put the class on the wrapper (in Elementor: the Image widget).
   ===================================================================== */
.pag-img{position:relative; overflow:hidden; display:block}
.pag-img img,.pag-img-inner{display:block; width:100%; height:auto}

/* hover zoom */
.pag-img-zoom{overflow:hidden}
.pag-img-zoom img{transition:transform .8s var(--pag-ease-out)}
.pag-img-zoom:hover img,.pag-img-zoom:focus-within img{transform:scale(1.07)}
.pag-img-zoom-out img{transform:scale(1.08); transition:transform .8s var(--pag-ease-out)}
.pag-img-zoom-out:hover img{transform:scale(1)}

/* grayscale to colour */
.pag-gray img{filter:grayscale(1); transition:filter .6s ease, transform .8s var(--pag-ease-out)}
.pag-gray:hover img,.pag-gray:focus-within img{filter:grayscale(0)}

/* overlay that slides up on hover: put the caption in .pag-img-overlay */
.pag-img-overlay-wrap{position:relative; overflow:hidden}
.pag-img-overlay{position:absolute; inset:auto 0 0 0; padding:22px 24px; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(8,22,48,.86));
  transform:translateY(24%); opacity:0; transition:transform .55s var(--pag-ease-out), opacity .45s}
.pag-img-overlay-wrap:hover .pag-img-overlay,
.pag-img-overlay-wrap:focus-within .pag-img-overlay{transform:none; opacity:1}

/* shine sweep */
.pag-img-shine{position:relative; overflow:hidden}
.pag-img-shine::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  transform:skewX(-18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:left .8s var(--pag-ease-out)}
.pag-img-shine:hover::after{left:130%}

/* soft wobble on hover (an SVG filter would be heavier, this stays on the GPU) */
@keyframes pag-wobble{
  0%{transform:scale(1.04) skewX(0deg)}
  30%{transform:scale(1.05) skewX(.8deg)}
  60%{transform:scale(1.05) skewX(-.8deg)}
  100%{transform:scale(1.04) skewX(0deg)}
}
.pag-img-distort{overflow:hidden}
.pag-img-distort img{transition:transform .6s var(--pag-ease-out)}
.pag-img-distort:hover img{animation:pag-wobble 2.4s ease-in-out infinite}

/* masked reveal wrapper (works with pag-img-reveal on the same element) */
.pag-img-reveal{overflow:hidden}
.pag-img-parallax{overflow:hidden}
.pag-img-parallax img{will-change:transform}

/* before / after compare */
.pag-compare{position:relative; overflow:hidden; --pag-compare:50%}
.pag-compare img{display:block; width:100%; height:auto}
.pag-compare img:nth-of-type(2){position:absolute; inset:0; height:100%; object-fit:cover;
  clip-path:inset(0 0 0 var(--pag-compare))}
.pag-compare-handle{position:absolute; top:0; bottom:0; left:var(--pag-compare); width:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.2); cursor:ew-resize}
.pag-compare-handle::after{content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pag-compare-handle:focus-visible{outline:2px solid var(--pag-primary); outline-offset:2px}

/* =====================================================================
   5. POINTER EFFECTS
   ===================================================================== */
.pag-magnetic{display:inline-flex}
.pag-magnetic > *{will-change:transform}
.pag-tilt{will-change:transform}
.pag-tilt-glare{position:relative; isolation:isolate}
.pag-tilt-glare::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .4s; border-radius:inherit;
  background:radial-gradient(circle at var(--pag-mx,50%) var(--pag-my,50%), rgba(255,255,255,.3), transparent 50%)}
.pag-tilt-glare:hover::after{opacity:1}
.pag-spotlight{position:relative; isolation:isolate}
.pag-spotlight::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .5s;
  background:radial-gradient(420px circle at var(--pag-mx,50%) var(--pag-my,50%), rgba(33,104,171,.22), transparent 65%)}
.pag-spotlight:hover::before{opacity:1}
.pag-follow{will-change:transform}

/* =====================================================================
   6. LAYOUT HELPERS
   ===================================================================== */
/* horizontal scroll section: .pag-hscroll > .pag-hscroll-track > panels */
.pag-hscroll{overflow:hidden}
.pag-hscroll .pag-hscroll-track{display:flex; flex-wrap:nowrap; will-change:transform}
.pag-hscroll .pag-hscroll-track > *{flex:0 0 auto}
.pag-hscroll-native .pag-hscroll-track{overflow-x:auto; scroll-snap-type:x mandatory; transform:none !important}
.pag-hscroll-native .pag-hscroll-track > *{scroll-snap-align:start}

/* scroll progress bar: give it a fixed position in Elementor or use this */
.pag-progress{position:fixed; top:0; left:0; width:100%; height:3px; z-index:9999; transform-origin:left center;
  background:linear-gradient(90deg, var(--pag-secondary), var(--pag-primary))}

/* smooth scrolling needs the page to stay scrollable */
html.pag-smooth{scroll-behavior:auto}
html.pag-smooth body{overscroll-behavior-y:none}

/* =====================================================================
   7. ACCESSIBILITY / REDUCED MOTION
   ===================================================================== */
.pag-motion-off :is(.pag-fade,.pag-fade-up,.pag-fade-down,.pag-fade-left,.pag-fade-right,
  .pag-zoom-in,.pag-zoom-out,.pag-rotate-in,.pag-flip-in,.pag-blur-in,.pag-stagger > *){opacity:1 !important}
.pag-motion-off :is(.pag-mask-up,.pag-mask-left,.pag-img-reveal){clip-path:none !important}
@media (prefers-reduced-motion:reduce){
  .pag-img-zoom img,.pag-gray img,.pag-img-distort img,.pag-img-shine::after{transition:none}
  .pag-img-distort:hover img{animation:none}
  .pag-img-overlay{transform:none; opacity:1}
}
/* keyboard users get the same hover treatments */
.pag-img-zoom:focus-within img{transform:scale(1.07)}