/* =============================================================================
   JUJCO — animations.css
   A self-contained, dependency-free motion library.

   HOW TO USE
   ----------
   1) Scroll / entrance reveal (auto, once visible):
      <div data-anim="fade-up"> ... </div>
      Variants: fade-in | fade-out | fade-up | fade-down | fade-left | fade-right
                slide-up | slide-down | slide-left | slide-right
                scale-in | scale-out | zoom-in | zoom-out | rotate-in | flip-in
                bounce-in | pop-in | elastic-in | blur-in | skew-in | fold-in
                drop-in | rise-up | float-in | expand | compress
      Optional modifiers:
        data-anim-delay="0.2"   (seconds)
        data-anim-duration="0.8"
        data-anim-ease="ease-out" | any cubic-bezier(...)
        data-anim-once="false"   (replay every time it enters view; default true)

   2) Split typography (letters / words / lines animate in with a stagger):
      <h2 data-split="chars" data-split-stagger="40">Hello</h2>
      data-split: chars | words | lines
      The library wraps each unit in a span and applies a wave/fade by default.
      Add data-split-effect="slide|scale|rotate|flip|blur|glow" to change style.

   3) Typewriter:  <p data-type="We fix HVAC fast." data-type-speed="55"></p>
   4) Counters:    <span data-count-to="150" data-count-suffix="$"></span>
   5) Mouse tilt:  <div data-tilt data-tilt-max="12"></div>
   6) Spotlight:   <section data-spotlight></section>  (radial glow follows cursor)
   7) Marquee:     <div data-marquee> ... </div>        (duplicates content, loops)
   8) Parallax:    <img data-parallax-speed="0.2" src="..."> (scroll-linked drift)

   All motion is disabled automatically when the visitor has
   `prefers-reduced-motion: reduce` (content appears instantly).

   OUT OF SCOPE FOR A PURE-CSS/JS BUILD (need WebGL / Three.js / Lottie):
   true 3D scenes, shader/liquid/cloth/soft-body physics, volumetric light,
   Lottie/Rive playback, video scrubbing. CSS approximations are provided where
   reasonable (e.g. perspective tilt, gradient/aurora backgrounds).
   ========================================================================== */

/* ---------- Timing & easing tokens ---------------------------------------- */
:root {
  --anim-duration: 0.8s;
  --anim-delay: 0s;
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --anim-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --anim-ease-elastic: cubic-bezier(0.5, 1.6, 0.4, 0.9);
  --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glow-color: var(--superman-red);
}

/* =============================================================================
   1) ENTRANCE / EXIT  (scroll reveal via [data-anim])
   ========================================================================== */
.js [data-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--anim-duration) var(--anim-ease) var(--anim-delay),
    transform var(--anim-duration) var(--anim-ease) var(--anim-delay),
    filter var(--anim-duration) var(--anim-ease) var(--anim-delay);
}

.js [data-anim].in {
  opacity: 1;
  transform: none;
  filter: none;
}

.js [data-anim="fade-up"] {
  transform: translateY(64px) scale(0.92);
}

.js [data-anim="fade-down"] {
  transform: translateY(-64px) scale(0.92);
}

.js [data-anim="fade-left"] {
  transform: translateX(-90px) scale(0.95);
}

.js [data-anim="fade-right"] {
  transform: translateX(90px) scale(0.95);
}

.js [data-anim="fade-in"] {
  transform: none;
}

.js [data-anim="fade-out"] {
  transform: none;
  opacity: 0;
}

.js [data-anim="slide-up"] {
  transform: translateY(100%);
}

.js [data-anim="slide-down"] {
  transform: translateY(-100%);
}

.js [data-anim="slide-left"] {
  transform: translateX(-100%);
}

.js [data-anim="slide-right"] {
  transform: translateX(100%);
}

.js [data-anim="scale-in"] {
  transform: scale(0.6);
}

.js [data-anim="scale-out"] {
  transform: scale(1.35);
}

.js [data-anim="zoom-in"] {
  transform: scale(0.4);
}

.js [data-anim="zoom-out"] {
  transform: scale(1.6);
}

.js [data-anim="rotate-in"] {
  transform: rotate(-25deg) scale(0.8);
}

.js [data-anim="flip-in"] {
  transform: perspective(800px) rotateX(90deg);
  transform-origin: top;
}

.js [data-anim="bounce-in"] {
  transform: translateY(60px) scale(0.8);
}

.js [data-anim="pop-in"] {
  transform: scale(0.3);
}

.js [data-anim="elastic-in"] {
  transform: scale(0.5);
}

.js [data-anim="blur-in"] {
  filter: blur(14px);
  transform: translateY(18px);
}

.js [data-anim="skew-in"] {
  transform: skewX(18deg) translateY(20px);
}

.js [data-anim="fold-in"] {
  transform: perspective(900px) rotateX(-80deg);
  transform-origin: top;
  opacity: 0;
}

.js [data-anim="drop-in"] {
  transform: translateY(-90px);
}

.js [data-anim="rise-up"] {
  transform: translateY(50px);
}

.js [data-anim="float-in"] {
  transform: translateY(30px);
}

.js [data-anim="expand"] {
  transform: scale(0.85);
}

.js [data-anim="compress"] {
  transform: scale(1.1);
}

/* ---- Dramatic, visually-DISTINCT entrances (added for real variety) -------- */
.js [data-anim="spin-in"] {
  transform: rotate(380deg) scale(0.2);
}

.js [data-anim="zoom-spin"] {
  transform: rotate(180deg) scale(0.2);
}

.js [data-anim="swing-in"] {
  transform: rotate(-15deg) translateY(50px) scale(0.9);
  transform-origin: top left;
}

.js [data-anim="jelly-in"] {
  transform: scale(1.28);
}

.js [data-anim="drop-rotate"] {
  transform: translateY(-90px) rotate(22deg);
}

.js [data-anim="rise-rotate"] {
  transform: translateY(60px) rotate(-14deg);
}

.js [data-anim="blur-zoom"] {
  filter: blur(16px);
  transform: scale(1.35);
}

.js [data-anim="skew-drop"] {
  transform: skewY(12deg) translateY(40px);
}

.js [data-anim="flip-left"] {
  transform: perspective(900px) rotateY(90deg);
  transform-origin: left center;
}

.js [data-anim="flip-right"] {
  transform: perspective(900px) rotateY(-90deg);
  transform-origin: right center;
}

.js [data-anim="neon-in"] {
  filter: brightness(2.2) drop-shadow(0 0 0 var(--glow-color));
  transform: translateY(20px);
}

.js [data-anim="jitter"] {
  transform: translateX(-6px);
}

.js [data-anim="shake"] {
  transform: translateX(6px) rotate(2deg);
}

.js [data-anim="wave"] {
  transform: translateY(26px) rotate(-4deg);
}

.js [data-anim="glow"] {
  filter: brightness(1.6) drop-shadow(0 0 8px var(--glow-color));
  transform: translateY(14px);
}

/* Cards get a touch of 3D depth so the wrapper itself feels alive on hover */
.js [data-anim].cs_service_card,
.js [data-anim].cs_post,
.js [data-anim].cs_team,
.js [data-anim].cs_project,
.js [data-anim].cs_card {
  transform-style: preserve-3d;
}

/* =============================================================================
   2) SPLIT TYPOGRAPHY  (letters / words / lines)
   ========================================================================== */
.anim-unit {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
  line-height: 1.2;
}

/* The word wrapper keeps a word's letters together so the browser wraps at
   spaces, never mid-word (fixes letters spilling onto the next line on phones). */
.anim-word {
  display: inline-block;
  white-space: nowrap;
}

.anim-line {
  display: block;
}

.anim-char {
  display: inline-block;
  white-space: nowrap;
}

/* unit entrance variants (applied by JS as animation-name) */
@keyframes unitFade {
  to {
    opacity: 1;
  }
}

@keyframes unitSlide {
  from {
    transform: translateY(0.9em);
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes unitScale {
  from {
    transform: scale(0.2);
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes unitRotate {
  from {
    transform: rotate(-40deg) scale(0.4);
  }

  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

@keyframes unitFlip {
  from {
    transform: rotateX(90deg);
  }

  to {
    transform: rotateX(0);
    opacity: 1;
  }
}

@keyframes unitBlur {
  from {
    filter: blur(10px);
    transform: translateY(8px);
  }

  to {
    filter: blur(0);
    transform: none;
    opacity: 1;
  }
}

@keyframes unitGlow {
  from {
    opacity: 0;
    text-shadow: 0 0 0 var(--glow-color);
  }

  to {
    opacity: 1;
    text-shadow: 0 0 18px var(--glow-color);
  }
}

@keyframes unitBounce {
  0% {
    opacity: 0;
    transform: translateY(1.1em) scale(0.6);
  }

  60% {
    opacity: 1;
    transform: translateY(-0.25em) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* --------------------------------------------------- extra premium keyframes */
@keyframes charScramble {
  0% {
    opacity: 0;
    transform: translateY(-1em) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes wordMorph {
  0% {
    opacity: 0;
    transform: scale(0.7) rotateX(-20deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotateX(0);
  }
}

@keyframes glassLift {
  0% {
    opacity: 0;
    transform: translateY(40px) perspective(1000px) rotateX(12deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) perspective(1000px) rotateX(0);
  }
}

@keyframes floatDrift {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  25% {
    transform: translateY(-8px) rotate(2deg);
  }

  75% {
    transform: translateY(8px) rotate(-2deg);
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* live (looping) character effects triggered via data-anim-live */
@keyframes charWave {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.32em);
  }
}

@keyframes charJitter {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(1px, -1px);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(1px, 1px);
  }
}

@keyframes charShake {

  0%,
  100% {
    transform: translateX(0) rotate(0);
  }

  20% {
    transform: translateX(-3px) rotate(-4deg);
  }

  40% {
    transform: translateX(3px) rotate(4deg);
  }

  60% {
    transform: translateX(-2px) rotate(-2deg);
  }

  80% {
    transform: translateX(2px) rotate(2deg);
  }
}

@keyframes charGlow {
  from {
    text-shadow: 0 0 0 var(--glow-color);
  }

  to {
    text-shadow: 0 0 16px var(--glow-color);
  }
}

@keyframes charFlip {
  0% {
    transform: rotateY(0);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

[data-anim-live="wave"] .anim-unit {
  animation: charWave 1.6s var(--anim-ease-in-out) infinite;
}

[data-anim-live="jitter"] .anim-unit {
  animation: charJitter 0.35s steps(2) infinite;
}

[data-anim-live="shake"] .anim-unit {
  animation: charShake 0.5s var(--anim-ease-in-out) infinite;
}

[data-anim-live="glow"] .anim-unit {
  animation: charGlow 1.2s ease-in-out infinite alternate;
}

[data-anim-live="flip"] .anim-unit {
  animation: charFlip 3s linear infinite;
}

/* =============================================================================
   3) REVEAL EFFECTS  (mask / wipe / curtain / clip / circle / diamond / blind)
   ========================================================================== */
.reveal-mask {
  -webkit-mask-image: linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0);
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 1s var(--anim-ease);
  transition: mask-size 1s var(--anim-ease);
}

.reveal-mask.in {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--anim-ease);
}

.reveal-wipe.in {
  clip-path: inset(0 0 0 0);
}

.reveal-curtain {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1s var(--anim-ease);
}

.reveal-curtain.in {
  clip-path: inset(0 0 0 0);
}

.reveal-circle {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1s var(--anim-ease-out);
}

.reveal-circle.in {
  clip-path: circle(75% at 50% 50%);
}

.reveal-diamond {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 0.9s var(--anim-ease);
}

.reveal-diamond.in {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.reveal-blind {
  -webkit-mask-image: repeating-linear-gradient(#000 0 8px, transparent 8px 14px);
  mask-image: repeating-linear-gradient(#000 0 8px, transparent 8px 14px);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  transition: -webkit-mask-size 0.9s var(--anim-ease);
  transition: mask-size 0.9s var(--anim-ease);
}

.reveal-blind.in {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.reveal-window {
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.9s var(--anim-ease);
}

.reveal-window.in {
  clip-path: inset(0 0 0 0);
}

/* =============================================================================
   4) GLOW & 5) COLOR
   ========================================================================== */
@keyframes neonPulse {

  0%,
  100% {
    text-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color);
  }

  50% {
    text-shadow: 0 0 12px var(--glow-color), 0 0 28px var(--glow-color);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 27, 29, 0.5);
  }

  50% {
    box-shadow: 0 0 22px 6px rgba(239, 27, 29, 0.35);
  }
}

@keyframes electric {

  0%,
  100% {
    box-shadow: 0 0 8px var(--glow-color);
  }

  50% {
    box-shadow: 0 0 22px 4px var(--glow-color);
  }
}

@keyframes bloom {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.35) drop-shadow(0 0 14px var(--glow-color));
  }
}

@keyframes hueRotate {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes rainbow {
  0% {
    color: var(--superman-red);
  }

  25% {
    color: var(--superman-gold);
  }

  50% {
    color: var(--superman-blue);
  }

  75% {
    color: var(--accent-secondary);
  }

  100% {
    color: var(--superman-red);
  }
}

@keyframes colorFlash {

  0%,
  100% {
    color: inherit;
  }

  50% {
    color: var(--glow-color);
  }
}

@keyframes colorPulse {

  0%,
  100% {
    color: inherit;
  }

  50% {
    color: var(--glow-color);
  }
}

.glow-neon {
  animation: neonPulse 2.4s ease-in-out infinite;
}

.glow-pulse {
  animation: pulseGlow 2s ease-in-out infinite;
}

.glow-electric {
  animation: electric 1.8s ease-in-out infinite;
}

.glow-bloom {
  animation: bloom 3s ease-in-out infinite;
}

.color-hue {
  animation: hueRotate 8s linear infinite;
}

.color-rainbow {
  animation: rainbow 6s linear infinite;
}

.color-flash {
  animation: colorFlash 1.4s steps(1) infinite;
}

.color-pulse {
  animation: colorPulse 2.2s ease-in-out infinite;
}

/* gradient shift for text/bg using background-clip */
.gradient-shift {
  background: linear-gradient(90deg, var(--superman-red), var(--superman-gold), var(--superman-blue), var(--accent-secondary), var(--superman-red));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 8s linear infinite;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
  .gradient-shift {
    -webkit-text-fill-color: initial;
    color: var(--superman-red);
    background: none;
    animation: none;
  }
}

@keyframes gradShift {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 300% 50%;
  }
}

/* =============================================================================
   6) DECORATIONS  (underline / highlight / marker / strike / border draw)
   ========================================================================== */
.deco-underline {
  position: relative;
  display: inline-block;
}

.deco-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--superman-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--anim-ease);
}

.deco-underline:hover::after,
.deco-underline.in::after {
  transform: scaleX(1);
}

.deco-underline-expand::after {
  transform: scaleX(0);
  transform-origin: center;
}

.deco-underline-expand:hover::after,
.deco-underline-expand.in::after {
  transform: scaleX(1);
}

.deco-highlight {
  background-image: linear-gradient(#ffd27f, #ffd27f);
  background-repeat: no-repeat;
  background-size: 0% 40%;
  background-position: 0 85%;
  transition: background-size 0.6s var(--anim-ease);
}

.deco-highlight:hover,
.deco-highlight.in {
  background-size: 100% 40%;
}

.deco-marker {
  background: linear-gradient(transparent 60%, rgba(239, 27, 29, 0.35) 60%);
}

.deco-strike {
  position: relative;
}

.deco-strike::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--anim-ease);
}

.deco-strike.in::after,
.deco-strike:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.deco-borderdraw {
  position: relative;
}

.deco-borderdraw::before,
.deco-borderdraw::after {
  content: "";
  position: absolute;
  background: var(--superman-red);
}

.deco-borderdraw::before {
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  transition: width 0.4s var(--anim-ease);
}

.deco-borderdraw::after {
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  transition: width 0.4s 0.4s var(--anim-ease);
}

.deco-borderdraw.in::before,
.deco-borderdraw:hover::before {
  width: 100%;
}

.deco-borderdraw.in::after,
.deco-borderdraw:hover::after {
  width: 100%;
}

/* =============================================================================
   7) UI — BUTTONS
   ========================================================================== */
.btn-anim {
  position: relative;
  overflow: hidden;
}

/* hover fill */
.btn-fill {
  position: relative;
  z-index: 0;
}

.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--superman-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--anim-ease);
}

.btn-fill:hover::before {
  transform: scaleX(1);
}

/* ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.6);
  animation: rippleOut 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleOut {
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* pulse / glow / scale / wiggle / shine / border */
@keyframes btnPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes btnWiggle {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-4deg);
  }

  75% {
    transform: rotate(4deg);
  }
}

@keyframes btnShine {
  0% {
    left: -120%;
  }

  100% {
    left: 130%;
  }
}

.btn-pulse:hover {
  animation: btnPulse 0.8s var(--anim-ease-in-out) infinite;
}

.btn-glow:hover {
  animation: electric 1.6s ease-in-out infinite;
}

.btn-scale:hover {
  transform: scale(1.06);
  transition: transform 0.25s var(--anim-ease);
}

.btn-wiggle:hover {
  animation: btnWiggle 0.5s var(--anim-ease-in-out) infinite;
}

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
}

.btn-shine:hover::after {
  animation: btnShine 0.9s var(--anim-ease);
}

.btn-border {
  position: relative;
}

.btn-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--glow-color);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.1);
  transition: all 0.35s var(--anim-ease);
}

.btn-border:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* loading spinner (button) */
.btn-loading {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}

.btn-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =============================================================================
   8) UI — CARDS / ICONS / MENU / FORMS
   ========================================================================== */
.card-lift {
  transition: transform 0.35s var(--anim-ease), box-shadow 0.35s var(--anim-ease);
}

.card-lift:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

.card-tilt {
  transition: transform 0.2s var(--anim-ease);
  transform-style: preserve-3d;
}

.card-flip {
  perspective: 1000px;
}

.card-flip>.card-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--anim-ease);
}

.card-flip:hover>.card-flip-inner {
  transform: rotateY(180deg);
}

.card-flip .card-flip-front,
.card-flip .card-flip-back {
  backface-visibility: hidden;
}

.card-flip .card-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.card-expand {
  transition: transform 0.4s var(--anim-ease);
}

.card-expand:hover {
  transform: scale(1.04);
}

@keyframes iconBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes iconRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

@keyframes iconWiggle {

  0%,
  100% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-12deg);
  }

  60% {
    transform: rotate(12deg);
  }
}

.icon-bounce {
  animation: iconBounce 1.8s var(--anim-ease-in-out) infinite;
}

.icon-rotate {
  animation: iconRotate 4s linear infinite;
}

.icon-pulse {
  animation: iconPulse 1.6s ease-in-out infinite;
}

.icon-wiggle:hover {
  animation: iconWiggle 0.6s var(--anim-ease-in-out);
}

.icon-morph {
  transition: border-radius 0.5s var(--anim-ease), background 0.5s var(--anim-ease);
}

.icon-morph:hover {
  border-radius: 40% 60% 55% 45%;
  background: var(--superman-red);
}

/* nav */
.nav-slide {
  transition: transform 0.4s var(--anim-ease);
}

.nav-push {
  transition: margin 0.4s var(--anim-ease);
}

.hamburger {
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  position: absolute;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: all 0.35s var(--anim-ease);
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 9px;
}

.hamburger span:nth-child(3) {
  top: 18px;
}

.hamburger.is-open span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

.sticky-reveal {
  transition: transform 0.4s var(--anim-ease);
}

.sticky-reveal.hide {
  transform: translateY(-100%);
}

/* forms */
.field-float {
  position: relative;
}

.field-float label {
  position: absolute;
  left: 14px;
  top: 14px;
  transition: all 0.2s var(--anim-ease);
  pointer-events: none;
  color: #888;
}

.field-float input:focus+label,
.field-float input:not(:placeholder-shown)+label,
.field-float textarea:focus+label,
.field-float textarea:not(:placeholder-shown)+label {
  top: -9px;
  left: 10px;
  font-size: 12px;
  background: #fff;
  padding: 0 4px;
  color: var(--glow-color);
}

@keyframes successCheck {
  from {
    stroke-dashoffset: 30;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.success-check path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

.success-check.show path {
  animation: successCheck 0.5s var(--anim-ease) forwards;
}

@keyframes errorShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.field-error {
  animation: errorShake 0.4s var(--anim-ease);
  border-color: #e03c3c !important;
}

@keyframes validPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.5);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(46, 160, 67, 0.25);
  }
}

.field-valid {
  animation: validPulse 1s ease-in-out;
  border-color: #2ea043 !important;
}

.field-progress {
  height: 4px;
  background: #eee;
  overflow: hidden;
}

.field-progress>i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--superman-red);
  transition: width 0.4s var(--anim-ease);
}

/* =============================================================================
   9) IMAGE — entrance + hover
   ========================================================================== */
.img-fade {
  opacity: 0;
  transition: opacity 0.8s var(--anim-ease);
}

.img-fade.in {
  opacity: 1;
}

.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.6s var(--anim-ease);
}

.img-zoom:hover img {
  transform: scale(1.12);
}

.img-tilt:hover {
  transform: perspective(800px) rotateY(8deg);
  transition: transform 0.4s var(--anim-ease);
}

.img-lift:hover {
  transform: translateY(-10px);
  transition: transform 0.4s var(--anim-ease);
}

.img-shadow:hover {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.4s var(--anim-ease);
}

.img-glow:hover {
  filter: drop-shadow(0 0 16px var(--superman-red));
  transition: filter 0.4s var(--anim-ease);
}

.img-blur {
  filter: blur(6px);
  transition: filter 0.5s var(--anim-ease);
}

.img-blur:hover {
  filter: blur(0);
}

.img-saturate:hover {
  filter: saturate(1.6);
  transition: filter 0.4s var(--anim-ease);
}

.img-bright:hover {
  filter: brightness(1.2);
  transition: filter 0.4s var(--anim-ease);
}

.img-swap {
  position: relative;
}

.img-swap .img-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--anim-ease);
}

.img-swap:hover .img-back {
  opacity: 1;
}

.img-overlay {
  position: relative;
  overflow: hidden;
}

.img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--superman-red);
  opacity: 0;
  transition: opacity 0.5s var(--anim-ease);
}

.img-overlay:hover::after {
  opacity: 0.28;
}

/* image reveal variants reuse reveal-* above (clip/mask/circle) */

/* =============================================================================
   10) BACKGROUND MOTION
   ========================================================================== */
.bg-gradient-flow {
  background: linear-gradient(-45deg, var(--superman-red), var(--superman-gold), var(--superman-blue), var(--accent-secondary));
  background-size: 400% 400%;
  animation: gradFlow 14s ease infinite;
}

@keyframes gradFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bg-aurora {
  position: relative;
  overflow: hidden;
}

.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}

.bg-aurora::before {
  background: var(--superman-blue);
  top: -10%;
  left: -10%;
  animation: floatA 12s ease-in-out infinite;
}

.bg-aurora::after {
  background: var(--superman-red);
  bottom: -10%;
  right: -10%;
  animation: floatB 14s ease-in-out infinite;
}

@keyframes floatA {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(40px, 30px);
  }
}

@keyframes floatB {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-40px, -30px);
  }
}

.bg-mesh {
  background-color: #001D3A;
  background-image:
    radial-gradient(at 20% 20%, rgba(0, 61, 122, 0.5) 0, transparent 50%),
    radial-gradient(at 80% 30%, rgba(239, 27, 29, 0.45) 0, transparent 50%),
    radial-gradient(at 50% 80%, rgba(212, 160, 23, 0.45) 0, transparent 50%);
  background-size: 200% 200%;
  animation: gradFlow 18s ease infinite;
}

.bg-blob::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: var(--superman-red);
  opacity: 0.25;
  filter: blur(10px);
  animation: blobMorph 12s ease-in-out infinite;
}

@keyframes blobMorph {

  0%,
  100% {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    transform: rotate(0);
  }

  50% {
    border-radius: 60% 40% 33% 67% / 58% 63% 37% 42%;
    transform: rotate(180deg);
  }
}

.bg-wave {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bg-wave svg {
  width: 200%;
  height: 100%;
  animation: waveSlide 10s linear infinite;
}

@keyframes waveSlide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.bg-stars,
.bg-dots {
  position: relative;
}

.bg-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: drift 30s linear infinite;
}

@keyframes drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 200px 200px;
  }
}

.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noiseShift 0.6s steps(3) infinite;
}

@keyframes noiseShift {
  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(-3px, 2px);
  }

  66% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* infinite marquee (also wired by JS for duplication) */
.marquee {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  width: max-content;
  animation: marqueeX 24s linear infinite;
  will-change: transform;
}

.marquee__track {
  display: inline-flex;
  flex-shrink: 0;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes marqueeX {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* scrolling service band (continuous motion) */
.cs_marquee_band {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  background: linear-gradient(-45deg, var(--superman-red), var(--superman-red), var(--superman-gold), var(--superman-blue), var(--accent-secondary), var(--superman-red));
  background-size: 400% 400%;
  animation: gradFlow 16s ease infinite;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.cs_marquee_band .marquee__track {
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
}

.cs_marquee_band .marquee__track>span {
  padding: 0 6px;
  white-space: nowrap;
}

.cs_marquee_band .cs_mq_sep {
  padding: 0 14px;
  opacity: 0.7;
}

/* =============================================================================
   11) LOADING
   ========================================================================== */
.loader-spin {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(0, 51, 160, 0.2);
  border-top-color: var(--glow-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader-bar {
  height: 4px;
  width: 100%;
  background: rgba(0, 51, 160, 0.2);
  overflow: hidden;
}

.loader-bar>i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--superman-red);
  animation: barMove 1.2s var(--anim-ease-in-out) infinite;
}

@keyframes barMove {
  0% {
    margin-left: -40%;
  }

  100% {
    margin-left: 100%;
  }
}

.loader-dots {
  display: inline-flex;
  gap: 6px;
}

.loader-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--superman-red);
  animation: dotBounce 1s var(--anim-ease-in-out) infinite;
}

.loader-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.loader-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dotBounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }

  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes shimmer {
  from {
    background-position: -400px 0;
  }

  to {
    background-position: 400px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* =============================================================================
   12) MICROINTERACTIONS
   ========================================================================== */
.mi-hover {
  transition: transform 0.2s var(--anim-ease), color 0.2s var(--anim-ease);
}

.mi-hover:hover {
  transform: translateY(-3px);
  color: var(--glow-color);
}

.mi-focus:focus {
  outline: 2px solid var(--glow-color);
  outline-offset: 2px;
}

.mi-active:active {
  transform: scale(0.96);
}

.mi-press {
  transition: transform 0.1s var(--anim-ease);
}

.mi-press:active {
  transform: scale(0.92);
}

.switch-ui {
  width: 46px;
  height: 26px;
  border-radius: 20px;
  background: #ccc;
  position: relative;
  cursor: pointer;
  transition: background 0.3s var(--anim-ease);
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s var(--anim-ease);
}

.switch-ui.on {
  background: var(--superman-red);
}

.switch-ui.on::after {
  transform: translateX(20px);
}

.check-ui {
  width: 22px;
  height: 22px;
  border: 2px solid #bbb;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.25s var(--anim-ease);
}

.check-ui.on {
  background: var(--superman-red);
  border-color: var(--glow-color);
}

.check-ui.on::after {
  content: "✓";
  color: #fff;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  animation: popIn 0.3s var(--anim-ease-spring);
}

@keyframes popIn {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.radio-ui {
  width: 22px;
  height: 22px;
  border: 2px solid #bbb;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.25s var(--anim-ease);
}

.radio-ui.on {
  border-color: var(--glow-color);
}

.radio-ui.on::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--superman-red);
  animation: popIn 0.3s var(--anim-ease-spring);
}

.toast {
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s var(--anim-ease);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.modal {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s var(--anim-ease);
  pointer-events: none;
}

.modal.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.tooltip {
  position: relative;
}

.tooltip .tip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  transition: all 0.25s var(--anim-ease);
  pointer-events: none;
}

.tooltip:hover .tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =============================================================================
   12.5) SCROLL PROGRESS BAR + DYNAMIC OUT-STATE
   ========================================================================== */
.jujco-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 10000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--superman-red), var(--superman-gold), var(--superman-blue), var(--accent-secondary), var(--superman-red));
  background-size: 300% 100%;
  animation: jujcoProgressHue 6s linear infinite;
  transition: transform 0.08s linear;
}

@keyframes jujcoProgressHue {
  to {
    background-position: 300% 0;
  }
}

/* Distinct EXIT states — each effect leaves view with its OWN motion, never a
   uniform copy of the entrance. This is what makes scroll up/down feel alive
   instead of "the same thing in reverse". */
.js [data-anim].out {
  opacity: 0 !important;
  transition: opacity .55s ease, transform .55s var(--anim-ease), filter .55s ease;
}

.js [data-anim="fade-up"].out,
.js [data-anim="float-in"].out,
.js [data-anim="rise-up"].out,
.js [data-anim="bounce-in"].out,
.js [data-anim="drop-in"].out {
  transform: translateY(-40px) scale(.94) !important;
}

.js [data-anim="fade-down"].out {
  transform: translateY(40px) scale(.94) !important;
}

.js [data-anim="fade-left"].out {
  transform: translateX(60px) !important;
}

.js [data-anim="fade-right"].out {
  transform: translateX(-60px) !important;
}

.js [data-anim="slide-up"].out,
.js [data-anim="slide-down"].out {
  transform: translateY(40%) !important;
}

.js [data-anim="slide-left"].out {
  transform: translateX(40%) !important;
}

.js [data-anim="slide-right"].out {
  transform: translateX(-40%) !important;
}

.js [data-anim="scale-in"].out,
.js [data-anim="pop-in"].out,
.js [data-anim="expand"].out {
  transform: scale(1.18) !important;
}

.js [data-anim="scale-out"].out,
.js [data-anim="compress"].out {
  transform: scale(.78) !important;
}

.js [data-anim="zoom-in"].out,
.js [data-anim="zoom-out"].out,
.js [data-anim="blur-zoom"].out {
  transform: scale(.6) !important;
  filter: blur(10px) !important;
}

.js [data-anim="rotate-in"].out {
  transform: rotate(18deg) scale(.9) !important;
}

.js [data-anim="flip-in"].out,
.js [data-anim="flip-left"].out,
.js [data-anim="flip-right"].out {
  transform: perspective(800px) rotateX(-75deg) !important;
  transform-origin: bottom;
}

.js [data-anim="blur-in"].out {
  filter: blur(12px) !important;
  transform: translateY(18px) !important;
}

.js [data-anim="skew-in"].out,
.js [data-anim="skew-drop"].out {
  transform: skewX(-16deg) translateY(16px) !important;
}

.js [data-anim="fold-in"].out {
  transform: perspective(900px) rotateX(78deg) !important;
  transform-origin: bottom;
}

.js [data-anim="spin-in"].out,
.js [data-anim="zoom-spin"].out {
  transform: rotate(-200deg) scale(.7) !important;
}

.js [data-anim="swing-in"].out {
  transform: rotate(14deg) translateY(40px) !important;
  transform-origin: top right;
}

.js [data-anim="jelly-in"].out {
  transform: scale(.7) !important;
}

.js [data-anim="drop-rotate"].out {
  transform: translateY(70px) rotate(-20deg) !important;
}

.js [data-anim="rise-rotate"].out {
  transform: translateY(-60px) rotate(16deg) !important;
}

.js [data-anim="neon-in"].out,
.js [data-anim="glow"].out {
  filter: brightness(1) drop-shadow(0 0 0 transparent) !important;
  transform: translateY(-16px) !important;
}

.js [data-anim="jitter"].out {
  transform: translateX(8px) !important;
}

.js [data-anim="shake"].out {
  transform: translateX(-8px) rotate(-2deg) !important;
}

.js [data-anim="wave"].out {
  transform: translateY(-24px) rotate(4deg) !important;
}

/* Split text also gets its own gentle exit so headings re-animate (letters
   re-drop in) every time they re-enter the viewport — different from the entry
   choreography, which keeps the page feeling alive on scroll up/down. */
.js [data-split].out .anim-unit {
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  transition: opacity .4s ease, transform .4s var(--anim-ease);
}

/* Continuous (looping) text — e.g. glowing stat counters — must stay visible
   even when scrolled out; do not hide it on .out. */
.js [data-anim-live].out .anim-unit {
  opacity: 1 !important;
  transform: none !important;
}

/* Responsive timing: tighten durations on small screens so reveals feel snappy
   rather than sluggish on phones (and avoid long waits on limited hardware). */
@media (max-width: 767px) {
  :root {
    --anim-duration: 0.6s;
    --anim-delay: 0s;
  }

  .jujco-scroll-progress {
    height: 3px;
  }

  /* Safety net: never allow a sideways scrollbar from transforms. `clip`
     (not `hidden`) avoids breaking position:sticky / fixed headers. */
  body {
    overflow-x: clip;
  }

  /* Neutralise any horizontal motion so nothing slides off the narrow
     viewport. Sideways effects become gentle vertical rises instead. */
  .js [data-anim="slide-left"],
  .js [data-anim="slide-right"] {
    transform: translateY(36px);
  }

  .js [data-anim="fade-left"],
  .js [data-anim="fade-right"] {
    transform: translateY(28px);
  }

  .js [data-anim="flip-left"],
  .js [data-anim="flip-right"] {
    transform: perspective(800px) rotateX(70deg);
    transform-origin: top;
  }

  /* Softer vertical travel + smaller scale jumps on small screens */
  .js [data-anim="slide-up"],
  .js [data-anim="slide-down"] {
    transform: translateY(48px);
  }

  .js [data-anim="scale-in"],
  .js [data-anim="zoom-in"] {
    transform: scale(0.82);
  }

  .js [data-anim="pop-in"],
  .js [data-anim="elastic-in"] {
    transform: scale(0.7);
  }

  /* Match the exit states so they also stay on-screen */
  .js [data-anim="fade-left"].out,
  .js [data-anim="fade-right"].out {
    transform: translateY(-28px) !important;
  }

  .js [data-anim="slide-left"].out,
  .js [data-anim="slide-right"].out {
    transform: translateY(-30%) !important;
  }

  .js [data-anim="flip-left"].out,
  .js [data-anim="flip-right"].out {
    transform: perspective(800px) rotateX(-70deg) !important;
    transform-origin: bottom;
  }

  /* Magnetic pull is pointless on touch — keep buttons steady */
  .cs_btn,
  .cs_emergency_btn {
    transform: none !important;
  }
}

/* =============================================================================
   13) PREMIUM EFFECTS (glass, 3D tilt, extra keyframes)
   ========================================================================== */
.glassmorphism {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glassmorphism::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--anim-ease);
}

.glassmorphism:hover::before {
  opacity: 1;
}

/* 3D tilt container – apply to inner wrapper of cards/tiles */
.tilt-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.tilt-3d>* {
  transition: transform 0.15s var(--anim-ease);
  will-change: transform;
}

.tilt-3d:hover>*,
.tilt-3d:focus-within>* {
  transform: rotateY(8deg) rotateX(-6deg) translateZ(12px);
}

/* Extra premium keyframes */
@keyframes charScramble {
  0% {
    opacity: 0;
    transform: translateY(-1em) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes wordMorph {
  0% {
    opacity: 0;
    transform: scale(0.7) rotateX(-20deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotateX(0);
  }
}

@keyframes glassLift {
  0% {
    opacity: 0;
    transform: translateY(40px) perspective(1000px) rotateX(12deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) perspective(1000px) rotateX(0);
  }
}

@keyframes floatDrift {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  25% {
    transform: translateY(-8px) rotate(2deg);
  }

  75% {
    transform: translateY(8px) rotate(-2deg);
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* =============================================================================
   14) MODERN PREMIUM EFFECTS  (target existing site classes — no markup edits)
   ========================================================================== */
/* Smooth, modern scrolling */
html {
  scroll-behavior: smooth;
}

/* Gradient-shift text for the hero "badge". ONLY the gradient flows — no
   transform — because the hero is a slick slider and a transform on this child
   fights the slider's transform on the slide, causing a hover stutter. */
.cs_hero_mini_title {
  background: linear-gradient(90deg, var(--superman-red), var(--superman-gold), var(--superman-blue), var(--accent-secondary), var(--superman-red));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: jujcoProgressHue 8s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
  .cs_hero_mini_title {
    -webkit-text-fill-color: initial;
    color: var(--superman-red);
    background: none;
    animation: none;
  }
}

/* ---- Buttons: shine sweep + glow on hover (movement handled by magnetic JS) */
.cs_btn.cs_style_1 {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.cs_emergency_btn {
  overflow: hidden;
  will-change: transform;
}

.cs_btn.cs_style_1::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}

.cs_btn.cs_style_1:hover::after {
  left: 130%;
}

.cs_btn.cs_style_1:hover {
  box-shadow: 0 12px 32px rgba(239, 27, 29, 0.35);
}

/* ---- Emergency call button: glass + pulsing glow icon (draws the eye) */
.cs_emergency_btn {
  background: rgba(255, 106, 0, 0.88);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}

.cs_emergency_icon {
  animation: pulseGlow 2.2s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
}

/* ---- Team / image cards: hover overlay reveal + subtle lift (wrapper only,
   so it never clashes with the per-image reveal transform). */
.cs_team_member_thumb {
  position: relative;
  overflow: hidden;
}

.cs_team_member_thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 51, 160, 0.35), rgba(0, 61, 122, 0.25));
  opacity: 0;
  transition: opacity .45s var(--anim-ease);
}

.cs_team_member_thumb:hover::after {
  opacity: 1;
}

.cs_team_member_thumb:hover {
  transform: translateY(-6px) scale(1.03);
  transition: transform .4s var(--anim-ease);
}

/* Opt-in animated gradient text utility */
.cs_gradient_text {
  background: linear-gradient(90deg, var(--superman-red), var(--superman-gold), var(--superman-blue), var(--accent-secondary), var(--superman-red));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: jujcoProgressHue 8s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
  .cs_gradient_text {
    -webkit-text-fill-color: initial;
    color: var(--superman-red);
    background: none;
    animation: none;
  }
}

/* ---- Always-on service marquee (perpetual, pausable on hover) ---- */
.jujco-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 18px 0;
  border-top: 2px solid #ff5a00;
  border-bottom: 2px solid #ff5a00;
  background: #00102e !important;
  color: #ffffff !important;
  z-index: 5;
}

.jujco-marquee__track {
  display: inline-block;
  white-space: nowrap;
  animation: jujcoMarquee 26s linear infinite;
  will-change: transform;
}

.jujco-marquee:hover .jujco-marquee__track {
  animation-play-state: paused;
}

.jujco-marquee__item {
  display: inline-block;
  padding: 0 26px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-transform: uppercase;
}

.jujco-marquee__item::after {
  content: "\271b";
  margin-left: 26px;
  -webkit-text-fill-color: #ff5a00 !important;
  color: #ff5a00 !important;
  opacity: 1;
}

@keyframes jujcoMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---- Subtle always-on ambient aurora behind the whole site (safe: fixed,
   behind content, never covers it, reduced-motion disables it) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(239, 27, 29, 0.10), transparent 60%),
    radial-gradient(34% 34% at 82% 28%, rgba(0, 61, 122, 0.10), transparent 60%),
    radial-gradient(40% 40% at 50% 82%, rgba(255, 199, 38, 0.10), transparent 60%);
  background-size: 200% 200%;
  animation: jujcoAurora 20s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes jujcoAurora {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 100% 100%;
  }
}

/* =============================================================================
   15) PAGE TRANSITIONS — creative fast transitions for non-preloader pages
   ========================================================================== */
/* Page transition overlay — applied to non-preload links */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--superman-red), var(--superman-blue));
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition-overlay.active {
  opacity: 0.85;
}

/* Wipe from left transition */
.transition-wipe-left {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: wipeLeft 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes wipeLeft {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Wipe from right transition */
.transition-wipe-right {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation: wipeRight 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes wipeRight {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Expand circle transition */
.transition-expand-circle {
  clip-path: circle(0% at 50% 50%);
  animation: expandCircle 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes expandCircle {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
  }
}

/* Diagonal wipe transition */
.transition-diagonal-wipe {
  clip-path: polygon(0 0, 0 0, 0 100%);
  animation: diagonalWipe 0.85s cubic-bezier(0.4, 0.2, 0.2, 1) forwards;
}

@keyframes diagonalWipe {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
}

/* Fade + blur transition */
.transition-fade-blur {
  animation: fadeBlurIn 0.7s ease-out forwards;
}

@keyframes fadeBlurIn {
  0% {
    opacity: 0;
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* Slide from top transition */
.transition-slide-down {
  animation: slideDownIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slideDownIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =============================================================================
   16) ACCESSIBILITY — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* Honour the preference: no transforms / large motion / loops,
     but keep a gentle opacity fade as the "reduced alternative". */
  .js [data-anim],
  .js .img-fade {
    transform: none !important;
    filter: none !important;
    opacity: 0 !important;
    transition: opacity 0.45s ease !important;
  }

  .js [data-anim].in,
  .js .img-fade.in {
    opacity: 1 !important;
  }

  .js [data-anim].out {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .anim-unit {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-mask,
  .reveal-wipe,
  .reveal-curtain,
  .reveal-circle,
  .reveal-diamond,
  .reveal-blind,
  .reveal-window {
    -webkit-mask: none !important;
    mask: none !important;
    clip-path: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile-safe page transitions (prevent clip-path overflow/stuttering on small screens) */
@media (max-width: 768px) {
  .page-transition-overlay {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .page-transition-overlay.active {
    opacity: 0.75 !important;
  }

  /* Disable clip-path animations on mobile — use simple opacity fade instead */
  .transition-wipe-left,
  .transition-wipe-right,
  .transition-expand-circle,
  .transition-diagonal-wipe {
    clip-path: none !important;
    animation: none !important;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .transition-wipe-left.active,
  .transition-wipe-right.active,
  .transition-expand-circle.active,
  .transition-diagonal-wipe.active {
    opacity: 1 !important;
  }

  /* Ensure slide-down animation doesn't cause jank */
  .transition-slide-down {
    transform: translateY(-100%) !important;
    animation: slideDownInMobile 0.5s ease-out forwards !important;
  }

  @keyframes slideDownInMobile {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Prevent horizontal scrollbar from transition overlay */
  body.page-transitioning {
    overflow-x: hidden;
  }
}

/* =============================================================================
   Screen-Size Responsive Stabilization (All Screens)
   ========================================================================== */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

@media (max-width: 991px) {

  .js [data-anim="fade-left"],
  .js [data-anim="slide-left"] {
    transform: translateY(24px) scale(0.96) !important;
  }

  .js [data-anim="fade-right"],
  .js [data-anim="slide-right"] {
    transform: translateY(24px) scale(0.96) !important;
  }

  .js [data-anim="spin-in"],
  .js [data-anim="zoom-spin"],
  .js [data-anim="swing-in"] {
    transform: translateY(20px) scale(0.95) !important;
  }

  .anim-word,
  .anim-unit,
  .jujco-word,
  .jujco-char {
    will-change: auto !important;
  }
}