/* =============================================================================
   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) 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;
  }
}