/* Landing "effect" components (index.html + about.html). All classes here are namespaced
   (aibtn-*, genload-*, scanfx-*, topfx-*) so the pasted example code can't collide with the
   site's existing .loader / .wrapper / .line / .dot / .star rules. */

/* ============================================================================
   "Our values" AI button (about.html hero) — from Uiverse-style Ask-AI button.
   ========================================================================== */
.aibtn-wrapper {
  --accent-1: #5fa;
  --accent-2: #67ff7b;
  --accent-3: #fbff00;
  --accent-4: #a6ffe466;
  --light-1: #fff5d628;
  --light-2: #8eff6128;
  --duration: 3s;
  --transition: 0.5s;

  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: max-content;
  text-decoration: none;
}

.aibtn-l1,
.aibtn-l2 {
  pointer-events: none;
  position: absolute;
  top: -20px;
  left: -30px;
  width: 100px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--light-1);
  filter: blur(24px);
  z-index: 1;
  transition: opacity var(--transition) ease, top var(--transition) ease, left var(--transition) ease;
  opacity: 0.4;
}
.aibtn-l2 {
  top: auto;
  bottom: -20px;
  left: auto;
  right: -20px;
  width: 80px;
  height: 40px;
  background-color: var(--light-2);
  transition-duration: calc(var(--transition) * 2);
  z-index: -1;
  opacity: 0.25;
}

.aibtn-bg {
  position: absolute;
  z-index: -1;
  fill: none;
  transition: filter var(--transition) ease;
}
.aibtn-lbg { stroke: #fff1; stroke-width: 0.5; }
.aibtn-line { stroke: none; stroke-width: 0; stroke-dasharray: 16 56; transition: stroke var(--transition) ease-in-out; }
.aibtn-dot { fill: #555; opacity: 0.3; transition: fill var(--transition) ease; }

.aibtn {
  width: max-content;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 48px;
  border-radius: 7px;
  background-color: #000;
  background-image: linear-gradient(to bottom, #fff1, transparent);
  color: #ddd;
  border: 1px solid #333;
  font-size: 16px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: all var(--transition) ease;
  box-shadow:
    0 0 30px -12px var(--light-1),
    inset -1px -1px 1px 1px #000,
    inset -2px -2px 2px 1px #fff2,
    inset 1px 1px 1px 1px #000,
    inset 2px 2px 2px 1px #fff2;
}
.aibtn-t1 { position: absolute; opacity: 1; transition: opacity 0.4s ease; }
.aibtn-t2 { position: absolute; opacity: 0; transition: opacity 0.4s ease; }

/* HOVER */
.aibtn:hover { color: #fff; border: 1px solid #555; text-shadow: 0 0 10px var(--light-1); }
.aibtn-wrapper:has(.aibtn:hover) .aibtn-dot { fill: #bbb; }
.aibtn-wrapper:has(.aibtn:hover) .aibtn-l1,
.aibtn-wrapper:has(.aibtn:hover) .aibtn-l2 { opacity: 0.7; }
.aibtn-wrapper:has(.aibtn:hover) .aibtn-l1 { top: -30px; left: -40px; }
.aibtn-wrapper:has(.aibtn:hover) .aibtn-l2 { bottom: -30px; right: -30px; }

/* ACTIVE */
.aibtn:active {
  box-shadow:
    0 0 10px var(--light-1),
    inset -1px -1px 1px 1px #000,
    inset -2px -2px 2px 1px #fff2,
    inset 1px 1px 1px 1px #000,
    inset 2px 2px 2px 1px #fff2;
}
.aibtn-wrapper:has(.aibtn:active) .aibtn-l1,
.aibtn-wrapper:has(.aibtn:active) .aibtn-l2 { opacity: 1; }

/* FOCUS (also triggered on hover for the "thinking" state) */
.aibtn:focus,
.aibtn-wrapper:hover .aibtn {
  background-color: #1a1a1e;
  border-color: var(--accent-2);
  animation: aibtn-pulse var(--duration) ease-in-out infinite;
}
.aibtn:focus .aibtn-t1,
.aibtn-wrapper:hover .aibtn-t1 { opacity: 0; }
.aibtn:focus .aibtn-t2,
.aibtn-wrapper:hover .aibtn-t2 { opacity: 1; animation: aibtn-ptext var(--duration) ease-in-out infinite; }
.aibtn-wrapper:has(.aibtn:focus) .aibtn-dot,
.aibtn-wrapper:hover .aibtn-dot { animation: aibtn-dotopac calc(var(--duration) * 0.5) linear infinite; fill: var(--accent-1); }
.aibtn-wrapper:has(.aibtn:focus) .aibtn-dot:nth-child(odd),
.aibtn-wrapper:hover .aibtn-dot:nth-child(odd) { animation-delay: calc(var(--duration) * 0.1); }
.aibtn-wrapper:has(.aibtn:focus) .aibtn-line,
.aibtn-wrapper:hover .aibtn-line { animation: aibtn-dash var(--duration) ease-out infinite; }
.aibtn-wrapper:has(.aibtn:focus) .aibtn-line:nth-child(odd),
.aibtn-wrapper:hover .aibtn-line:nth-child(odd) { animation-direction: normal; animation-delay: calc(var(--duration) * 0.1); }
.aibtn-wrapper:has(.aibtn:focus) .aibtn-bg,
.aibtn-wrapper:hover .aibtn-bg { filter: drop-shadow(0px 0px 4px var(--accent-3)); }

@keyframes aibtn-ptext { 0%,100% { text-shadow: 0 0 2px #0000; } 50% { text-shadow: 0 0 32px var(--accent-3); } }
@keyframes aibtn-dotopac { 0%,100% { opacity: 0.1; } 20% { opacity: 1; } }
@keyframes aibtn-pulse {
  0%,100% {
    box-shadow: 0 0 20px var(--light-2), inset -1px -1px 1px 1px #000, inset -2px -2px 2px 1px #fff2, inset 1px 1px 1px 1px #000, inset 2px 2px 2px 1px #fff2;
    border-color: #0000;
  }
  50% { box-shadow: 0 0 60px 0px var(--light-1), inset -1px -1px 1px 1px #000, inset -2px -2px 2px 1px #fff2, inset 1px 1px 1px 1px #000, inset 2px 2px 2px 1px #fff2; }
  85% { border-color: var(--accent-2); }
}
@keyframes aibtn-dash {
  0% { stroke-width: 0; stroke-dashoffset: 10; stroke: var(--accent-4); }
  50% { stroke-width: 0.5; stroke-dashoffset: 88; stroke: var(--accent-2); }
  100% { stroke-width: 0; stroke-dashoffset: 166; stroke: var(--accent-4); }
}
@media (prefers-reduced-motion: reduce) {
  .aibtn, .aibtn-t2, .aibtn-dot, .aibtn-line { animation: none !important; }
}

/* ============================================================================
   #3 "Scan" text effect (index.html tech title) — slower (4s) red scan sweep.
   ========================================================================== */
.scanfx {
  position: relative;
  display: inline-block;
  color: rgb(242, 255, 240);
  font-style: italic;
}
.scanfx > span { display: inline-block; animation: scanfx-cut 5.5s infinite; }
.scanfx::after, .scanfx::before {
  position: absolute; content: ""; width: 100%; left: 0; border-radius: 4px;
  animation: scanfx-scan 5.5s infinite;
}
/* tech heading: centered, near the top of the section, with a big gap before the tech slider */
.lp-tech .container { padding-top: .5rem; text-align: center; }
/* selector kept at 3 classes so it beats `body.has-lp-bg .lp-section h2 {margin-bottom}` (0,2,2) */
.lp-tech .container .scanfx { display: table; margin: 0 auto clamp(4rem, 10vh, 8rem); text-align: center; }
.scanfx::after { height: 6px; background-color: #ff828291; top: 0; filter: blur(10px); z-index: 0; }
.scanfx::before { height: 5px; background-color: #ff8282; top: 0; z-index: 1; filter: opacity(.9); }
@keyframes scanfx-scan { 0% { top: 0; } 25% { top: 88%; } 50% { top: 0; } 75% { top: 88%; } }
@keyframes scanfx-cut {
  0% { clip-path: inset(0 0 0 0); } 25% { clip-path: inset(100% 0 0 0); }
  50% { clip-path: inset(0 0 100% 0); } 75% { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .scanfx > span { animation: none !important; }
  .scanfx::before, .scanfx::after { display: none; }
}

/* ============================================================================
   #5 Topics loader (about topics heading) — glowing letters + spinning ring +
   stars. Slower spin (3.6s), slower letters that don't fully vanish (min .3).
   ========================================================================== */
.topfx-wrapper {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: max-content; min-height: 100px;
  margin: 1.5rem auto 3.75rem;
  font-family: "Inter", sans-serif; font-size: 1.05em; font-weight: 600; color: #fff;
  user-select: none;
}
.topfx-ring {
  position: absolute; top: 50%; left: 50%; width: 100px; height: 100px;
  margin: -50px 0 0 -50px; border-radius: 50%; background-color: transparent;
  animation: topfx-rotate 3.6s linear infinite; z-index: 0; opacity: .9;
}
@keyframes topfx-rotate {
  0%   { transform: rotate(90deg);  box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #fff5 inset, 0 60px 60px 0 #f001 inset; }
  50%  { transform: rotate(270deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 10px 0 #fa09 inset, 0 40px 60px 0 #f002 inset; }
  100% { transform: rotate(450deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #fff5 inset, 0 60px 60px 0 #f001 inset; }
}
.topfx-letter {
  display: inline-block; opacity: .35; transform: translateY(0);
  animation: topfx-letter-anim 3.4s infinite; z-index: 1; filter: blur(2px); margin: .28em;
  font-size: clamp(17px, 2.3vw, 24px);
}
.topfx-letter:nth-child(1)  { animation-delay: 0s;   }
.topfx-letter:nth-child(2)  { animation-delay: .15s; }
.topfx-letter:nth-child(3)  { animation-delay: .3s;  }
.topfx-letter:nth-child(4)  { animation-delay: .45s; }
.topfx-letter:nth-child(5)  { animation-delay: .6s;  }
.topfx-letter:nth-child(6)  { animation-delay: .75s; }
.topfx-letter:nth-child(7)  { animation-delay: .9s;  }
.topfx-letter:nth-child(8)  { animation-delay: 1.05s;}
.topfx-letter:nth-child(9)  { animation-delay: 1.2s; }
.topfx-letter:nth-child(10) { animation-delay: 1.35s;}
.topfx-letter:nth-child(11) { animation-delay: 1.5s; }
.topfx-letter:nth-child(12) { animation-delay: 1.65s;}
.topfx-letter:nth-child(13) { animation-delay: 1.8s; }
@keyframes topfx-letter-anim {
  0%, 100% { opacity: .3;  transform: translateY(0); filter: blur(2px); }
  20%      { opacity: 1;   transform: scale(1.18) translateY(-1px); filter: blur(0); text-shadow: 0 0 2px #fff, 0 0 6px #000; }
  55%      { opacity: .55; transform: translateY(0); filter: blur(2px); }
}
.topfx-star {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: #fff;
  transform: translate(20px, 30px); animation: topfx-blur 3s infinite;
  box-shadow: 0 0 8px 0 #fff; filter: blur(4px); opacity: .2; z-index: 0;
}
.topfx-star:nth-of-type(2) { transform: translate(56px, -6px);  scale: 1.05; animation-delay: .5s; }
.topfx-star:nth-of-type(3) { transform: translate(-26px, 6px);  scale: 1.4;  animation-delay: .5s; }
.topfx-star:nth-of-type(4) { transform: translate(-50px, -40px);scale: .95;  animation-delay: .7s; }
.topfx-star:nth-of-type(5) { transform: translate(32px, -46px); scale: 1.3;  animation-delay: .35s;}
.topfx-star:nth-of-type(6) { transform: translate(82px, -16px); scale: 1;    animation-delay: .9s; }
.topfx-star:nth-of-type(7) { transform: translate(-92px, 16px); scale: 1;    animation-delay: .95s;}
@keyframes topfx-blur { 0%, 100% { opacity: .2; filter: blur(4px); } 50% { opacity: .3; filter: blur(1px); } }
@media (prefers-reduced-motion: reduce) {
  .topfx-ring, .topfx-letter, .topfx-star { animation: none !important; }
  .topfx-letter { opacity: 1; filter: none; }
}

/* ============================================================================
   #2 "Generating" loader section (index.html) — circular gradient spinner with
   pulsing letters + a tagline.
   ========================================================================== */
.genload-section .container { display: flex; flex-direction: column; align-items: center; }
.genload-wrapper {
  position: relative; display: inline-flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  max-width: 92vw; min-height: 200px; padding: 24px 10px;
  margin: 0 auto;
  font-family: "Inter", sans-serif; font-weight: 600; color: #fff;
  font-size: clamp(22px, 3.4vw, 40px);
  user-select: none;
}
/* Spinner sits centred BEHIND the sentence; the letters spill freely past it. */
.genload-ring {
  position: absolute; top: 50%; left: 50%; width: 180px; height: 180px;
  margin: -90px 0 0 -90px; border-radius: 50%; background-color: transparent;
  animation: genload-rotate 3.6s linear infinite; z-index: 0;
}
@keyframes genload-rotate {
  0%   { transform: rotate(90deg);  box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset; }
  50%  { transform: rotate(270deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 10px 0 #d60a47 inset, 0 40px 60px 0 #311e80 inset; }
  100% { transform: rotate(450deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset; }
}
.genload-letter {
  display: inline-block; opacity: .5; transform: translateY(0);
  animation: genload-letter-anim 2.4s infinite; z-index: 1; white-space: pre;
}
.genload-letter:nth-of-type(1)  { animation-delay: 0s;   }
.genload-letter:nth-of-type(2)  { animation-delay: .06s; }
.genload-letter:nth-of-type(3)  { animation-delay: .12s; }
.genload-letter:nth-of-type(4)  { animation-delay: .18s; }
.genload-letter:nth-of-type(5)  { animation-delay: .24s; }
.genload-letter:nth-of-type(6)  { animation-delay: .3s;  }
.genload-letter:nth-of-type(7)  { animation-delay: .36s; }
.genload-letter:nth-of-type(8)  { animation-delay: .42s; }
.genload-letter:nth-of-type(9)  { animation-delay: .48s; }
.genload-letter:nth-of-type(10) { animation-delay: .54s; }
.genload-letter:nth-of-type(11) { animation-delay: .6s;  }
.genload-letter:nth-of-type(12) { animation-delay: .66s; }
.genload-letter:nth-of-type(13) { animation-delay: .72s; }
.genload-letter:nth-of-type(14) { animation-delay: .78s; }
.genload-letter:nth-of-type(15) { animation-delay: .84s; }
.genload-letter:nth-of-type(16) { animation-delay: .9s;  }
.genload-letter:nth-of-type(17) { animation-delay: .96s; }
.genload-letter:nth-of-type(18) { animation-delay: 1.02s;}
.genload-letter:nth-of-type(19) { animation-delay: 1.08s;}
.genload-letter:nth-of-type(20) { animation-delay: 1.14s;}
.genload-letter:nth-of-type(21) { animation-delay: 1.2s; }
.genload-letter:nth-of-type(22) { animation-delay: 1.26s;}
.genload-letter:nth-of-type(23) { animation-delay: 1.32s;}
.genload-letter:nth-of-type(24) { animation-delay: 1.38s;}
.genload-letter:nth-of-type(25) { animation-delay: 1.44s;}
.genload-letter:nth-of-type(26) { animation-delay: 1.5s; }
.genload-letter:nth-of-type(27) { animation-delay: 1.56s;}
.genload-letter:nth-of-type(28) { animation-delay: 1.62s;}
.genload-letter:nth-of-type(29) { animation-delay: 1.68s;}
.genload-letter:nth-of-type(30) { animation-delay: 1.74s;}
@keyframes genload-letter-anim {
  0%, 100% { opacity: .5; transform: translateY(0); }
  20%      { opacity: 1;  transform: scale(1.12); text-shadow: 0 0 10px rgba(173,95,255,.5); }
  45%      { opacity: .72; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .genload-ring, .genload-letter { animation: none !important; }
  .genload-letter { opacity: 1; }
}

/* ============================================================================
   #1 Pinned slider (.sf-slider-section — #simple-feature, #visual). The section is
   tall (JS sets height = one viewport per slide); an inner sticky panel pins to the
   viewport so the page appears to stand still while one slide cross-fades into the
   next — it never scrolls away until you've stepped through the slides. JS maps
   scroll progress -> active slide (native scroll, no wheel hijack). Runs on every
   width incl. mobile; reduced-motion falls back to plain stacked reading.
   ========================================================================== */
.sf-slider-section { position: relative; padding: 0; }
.sf-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.sf-viewport { position: relative; width: 100%; height: 100%; }
.sf-slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1), visibility .7s;
}
.sf-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.sf-slide .container { width: 100%; max-height: 90vh; overflow: auto; }

/* default (#simple-feature): slide rises + fades in */
.sf-slider-section:not(.sf-fx-zoom) .sf-slide { transform: translateY(44px) scale(.99); }
.sf-slider-section:not(.sf-fx-zoom) .sf-slide.is-active { transform: none; }

/* readable slides that fit exactly on screen — wide container, tight padding */
#simple-feature .container     { width: min(1600px, 95vw) !important; max-width: none !important; }
#simple-feature .sf-content    { padding: clamp(8px, 1.2vw, 20px) clamp(6px, 1vw, 18px); }
#simple-feature .sf-content h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem) !important; }
#simple-feature .sf-content p  { font-size: clamp(1.2rem, 1.7vw, 1.55rem) !important; line-height: 1.62; }
#simple-feature .sf-row        { grid-template-columns: 0.4fr 0.6fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
#simple-feature .sf-row.reverse{ grid-template-columns: 0.6fr 0.4fr; }
/* smaller images that stay fully on screen (no off-screen bleed) */
#simple-feature .sf-media     { max-height: 60vh; }
#simple-feature .sf-media img { max-height: 60vh; width: 100%; height: auto; object-fit: contain; }

/* icon media for the AI-data-security slide */
.sf-media--icon { display: flex; align-items: center; justify-content: center; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.sf-media--icon i { font-size: clamp(120px, 15vw, 230px); color: #7dd6f7; filter: drop-shadow(0 0 34px rgba(125,214,247,.45)); }

/* zoom variant (#visual): text shrinks + fades out, grows + fades in */
.sf-fx-zoom .sf-slide { text-align: center; transform: scale(.62); }
.sf-fx-zoom .sf-slide.is-active { transform: scale(1); }
.sf-fx-zoom .sf-slide .container { max-width: min(1000px, 92vw); margin: 0 auto; max-height: 90vh; overflow: hidden; }
.sf-fx-zoom .visual-heading { font-size: clamp(2.6rem, 6.5vw, 4.6rem) !important; line-height: 1.1; margin: 0; }
.sf-fx-zoom .visual-slide-text { font-size: clamp(2.4rem, 6vw, 4.6rem) !important; line-height: 1.3; font-weight: 500; color: rgb(238, 242, 255); margin: 0; }
.sf-fx-zoom .visual-slide-text.visual-text--sm { font-size: clamp(1.6rem, 3.6vw, 2.7rem) !important; line-height: 1.4; }

/* progress dots — not used on these sliders */
.sf-dots { display: none; }

/* mobile: keep the pin; stack the row + shrink media/type */
@media (max-width: 900px) {
  #simple-feature .sf-row,
  #simple-feature .sf-row.reverse { grid-template-columns: 1fr; gap: clamp(14px, 4vw, 24px); }
  #simple-feature .sf-content h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; text-align: center; }
  #simple-feature .sf-content p  { font-size: clamp(.95rem, 4vw, 1.1rem) !important; line-height: 1.5; }
  #simple-feature .sf-media { max-height: 34vh; }
  #simple-feature .sf-media img { max-height: 34vh; width: auto; margin-inline: auto; object-fit: contain; }
  .sf-media--icon i { font-size: clamp(90px, 24vw, 140px); }
  .sf-fx-zoom .visual-heading { font-size: clamp(2rem, 8.5vw, 3rem) !important; }
  .sf-fx-zoom .visual-slide-text { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
  .warpfx { width: 150px; height: 150px; }
  /* push the slide down on mobile so the heading/images clear the fixed navbar. margin-top
     offsets the whole absolute slide (inset:0) while keeping it centered — NOT padding-top +
     flex-start, which top-aligned the content and clipped the heading under the navbar. */
  .sf-slide { margin-top: 10%; }
}

/* reduced-motion: no pin — plain stacked reading */
@media (prefers-reduced-motion: reduce) {
  .sf-slider-section { height: auto !important; }
  .sf-pin { position: static; height: auto; display: block; }
  .sf-viewport { height: auto; }
  .sf-slide { position: static; inset: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; padding: 2.5rem 0; }
  .sf-slide .container { max-height: none; overflow: visible; }
  .sf-dots { display: none; }
}

/* ============================================================================
   Warp loader (#visual intro) — Uiverse.io by risabbir, namespaced warpfx-*
   ========================================================================== */
.warpfx { position: relative; width: 190px; height: 190px; margin: clamp(28px, 7vh, 70px) auto; }
.warpfx-ring {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,255,255,0.15) 30%, transparent 70%);
  animation: warpfx-pulse 2.2s ease-out infinite; opacity: 0;
  box-shadow: 0 0 12px #00d1ff66, 0 0 24px #00d1ff33;
  border: 2px solid rgba(0,255,255,0.2);
}
.warpfx-ring:nth-child(1) { animation-delay: 0s; }
.warpfx-ring:nth-child(2) { animation-delay: .4s; }
.warpfx-ring:nth-child(3) { animation-delay: .8s; }
.warpfx-ring:nth-child(4) { animation-delay: 1.2s; }
@keyframes warpfx-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1.1); opacity: 0.15; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.warpfx-core {
  position: absolute; top: 50%; left: 50%; width: 24px; height: 24px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at center, #00e5ff, #0099cc);
  box-shadow: 0 0 25px #00e5ff, 0 0 60px #00e5ff88, 0 0 100px #00e5ff33;
  animation: warpfx-core-pulse 1.6s ease-in-out infinite;
}
@keyframes warpfx-core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.2); }
}

/* ============================================================================
   Fire/triangle mask loader (contact sections) — Uiverse.io by andrew-manzyk,
   namespaced fireloader-* (own mask id so it can't collide with the site).
   ========================================================================== */
.fireloader {
  --color-one: #ffbf48; --color-two: #be4a1d; --color-three: #ffbf4780;
  --color-four: #bf4a1d80; --color-five: #ffbf4740;
  --time-animation: 2s; --size: 1;
  position: relative; width: 100px; height: 100px; border-radius: 50%; transform: scale(var(--size));
  box-shadow: 0 0 25px 0 var(--color-three), 0 20px 50px 0 var(--color-four);
  animation: fireloader-colorize calc(var(--time-animation) * 3) ease-in-out infinite;
}
.fireloader::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px;
  border-radius: 50%; border-top: solid 1px var(--color-one); border-bottom: solid 1px var(--color-two);
  background: linear-gradient(180deg, var(--color-five), var(--color-four));
  box-shadow: inset 0 10px 10px 0 var(--color-three), inset 0 -10px 10px 0 var(--color-four);
}
.fireloader .fireloader-box {
  width: 100px; height: 100px;
  background: linear-gradient(180deg, var(--color-one) 30%, var(--color-two) 70%);
  mask: url(#fireloader-clip); -webkit-mask: url(#fireloader-clip);
}
.fireloader svg { position: absolute; }
.fireloader svg #fireloader-clip { filter: contrast(15); animation: fireloader-roundness calc(var(--time-animation) / 2) linear infinite; }
.fireloader svg #fireloader-clip polygon { filter: blur(7px); }
.fireloader svg #fireloader-clip polygon:nth-child(1) { transform-origin: 75% 25%; transform: rotate(90deg); }
.fireloader svg #fireloader-clip polygon:nth-child(2) { transform-origin: 50% 50%; animation: fireloader-rotation var(--time-animation) linear infinite reverse; }
.fireloader svg #fireloader-clip polygon:nth-child(3) { transform-origin: 50% 60%; animation: fireloader-rotation var(--time-animation) linear infinite; animation-delay: calc(var(--time-animation) / -3); }
.fireloader svg #fireloader-clip polygon:nth-child(4) { transform-origin: 40% 40%; animation: fireloader-rotation var(--time-animation) linear infinite reverse; }
.fireloader svg #fireloader-clip polygon:nth-child(5) { transform-origin: 40% 40%; animation: fireloader-rotation var(--time-animation) linear infinite reverse; animation-delay: calc(var(--time-animation) / -2); }
.fireloader svg #fireloader-clip polygon:nth-child(6) { transform-origin: 60% 40%; animation: fireloader-rotation var(--time-animation) linear infinite; }
.fireloader svg #fireloader-clip polygon:nth-child(7) { transform-origin: 60% 40%; animation: fireloader-rotation var(--time-animation) linear infinite; animation-delay: calc(var(--time-animation) / -1.5); }
@keyframes fireloader-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fireloader-roundness { 0% { filter: contrast(15); } 20% { filter: contrast(3); } 40% { filter: contrast(3); } 60% { filter: contrast(15); } 100% { filter: contrast(15); } }
@keyframes fireloader-colorize { 0% { filter: hue-rotate(0deg); } 20% { filter: hue-rotate(-30deg); } 40% { filter: hue-rotate(-60deg); } 60% { filter: hue-rotate(-90deg); } 80% { filter: hue-rotate(-45deg); } 100% { filter: hue-rotate(0deg); } }

/* ============================================================================
   Gooey "problem → solution" ball (#visual heading slide) — Uiverse.io by
   prikshit_1236, namespaced pb-* + own filter id. Sits between the two lines.
   ========================================================================== */
.visual-heading-slide { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.2vh, 14px); }
.pb-ball {
  border-radius: 50%;
  background-image:
    radial-gradient(circle at bottom center, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 20%, transparent 60%),
    radial-gradient(rgba(255,255,255,.12) .8px, transparent .8px),
    radial-gradient(rgba(255,255,255,.06) .5px, transparent .5px),
    linear-gradient(180deg, #a67dff 0%, #7a45ff 45%, #5d24ff 100%);
  background-size: 100% 100%, 4px 4px, 7px 7px, 100% 100%;
  background-position: center, 0 0, 2px 2px, center;
  box-shadow: inset 0 2px 10px rgba(255,255,255,.22);
}
.pb-ball-1 {
  position: relative; width: 56px; height: 56px; margin: clamp(28px, 6vh, 56px) auto;
  filter: url("#pb-gooey-liquid"); overflow: visible;
  box-shadow: 0 0 0 6px rgba(125,71,255,.12), 0 10px 30px rgba(98,43,255,.35), inset 0 2px 10px rgba(255,255,255,.22);
  animation: pb-pulse 3s infinite ease-in-out;
}
.pb-ball-2 { position: absolute; top: calc(50% - 21px); left: calc(50% - 21px); width: 42px; height: 42px; animation: pb-orbit-left 2.8s infinite ease-in-out; }
.pb-ball-3 { position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px; animation: pb-orbit-right 3.5s infinite ease-in-out; }
@keyframes pb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes pb-orbit-left { 0%, 100% { transform: translateX(-70px) scale(.85); } 50% { transform: translateX(70px) scale(1.05); } }
@keyframes pb-orbit-right { 0%, 100% { transform: translateY(60px) scale(1.05); } 50% { transform: translateY(-60px) scale(.8); } }

/* heading slide (#visual): wider content (less side margin), slightly smaller lines */
.sf-fx-zoom .sf-slide .visual-heading-slide { max-width: min(1400px, 95vw); }
.sf-fx-zoom .visual-heading { font-size: clamp(1.9rem, 4.3vw, 3.2rem) !important; }

/* modern bulleted list (#visual "scattered ..." slide) */
.visual-list { list-style: none; margin: 0 auto; padding: 0; display: inline-flex; flex-direction: column; gap: clamp(16px, 2.6vh, 30px); text-align: left; }
.visual-list li { position: relative; padding-left: 1.5em; font-size: clamp(1.7rem, 4.6vw, 3.3rem); font-weight: 500; color: rgb(238, 242, 255); line-height: 1.2; }
.visual-list li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: .58em; height: .58em;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, #7dd6f7, #3a9fd6);
  border-radius: 3px; box-shadow: 0 0 12px rgba(125, 214, 247, .6);
}

/* "Zanim wdrożysz AI" loader slide: text above the rings */
.visual-loader-slide { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 5vh, 46px); }

/* "W Main Intelligence wiemy…" brand slide: our logo above the text */
.visual-brand-slide { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.5vh, 36px); }
.visual-brand-logo { width: clamp(130px, 19vw, 255px); height: auto; display: block; }

/* ============================================================================
   Concentric rings loader (#visual) — Uiverse.io by harman-kanda, namespaced plfx
   ========================================================================== */
.plfx { width: clamp(96px, 13vw, 128px); height: clamp(96px, 13vw, 128px); }
.plfx circle { transform-box: fill-box; transform-origin: 50% 50%; }
.plfx__ring1 { animation: plfx-ring1 5s 0s ease-in-out infinite; }
.plfx__ring2 { animation: plfx-ring2 5s .05s ease-in-out infinite; }
.plfx__ring3 { animation: plfx-ring3 5s .1s ease-in-out infinite; }
.plfx__ring4 { animation: plfx-ring4 5s .15s ease-in-out infinite; }
.plfx__ring5 { animation: plfx-ring5 5s .2s ease-in-out infinite; }
.plfx__ring6 { animation: plfx-ring6 5s .25s ease-in-out infinite; }
@keyframes plfx-ring1 { from { stroke-dashoffset: -376.237129776; transform: rotate(-.25turn); animation-timing-function: ease-in; } 23% { stroke-dashoffset: -94.247778; transform: rotate(1turn); animation-timing-function: ease-out; } 46%, 50% { stroke-dashoffset: -376.237129776; transform: rotate(2.25turn); animation-timing-function: ease-in; } 73% { stroke-dashoffset: -94.247778; transform: rotate(3.5turn); animation-timing-function: ease-out; } 96%, to { stroke-dashoffset: -376.237129776; transform: rotate(4.75turn); } }
@keyframes plfx-ring2 { from { stroke-dashoffset: -329.207488554; transform: rotate(-.25turn); animation-timing-function: ease-in; } 23% { stroke-dashoffset: -82.46680575; transform: rotate(1turn); animation-timing-function: ease-out; } 46%, 50% { stroke-dashoffset: -329.207488554; transform: rotate(2.25turn); animation-timing-function: ease-in; } 73% { stroke-dashoffset: -82.46680575; transform: rotate(3.5turn); animation-timing-function: ease-out; } 96%, to { stroke-dashoffset: -329.207488554; transform: rotate(4.75turn); } }
@keyframes plfx-ring3 { from { stroke-dashoffset: -288.4484661616; transform: rotate(-.25turn); animation-timing-function: ease-in; } 23% { stroke-dashoffset: -72.2566298; transform: rotate(1turn); animation-timing-function: ease-out; } 46%, 50% { stroke-dashoffset: -288.4484661616; transform: rotate(2.25turn); animation-timing-function: ease-in; } 73% { stroke-dashoffset: -72.2566298; transform: rotate(3.5turn); animation-timing-function: ease-out; } 96%, to { stroke-dashoffset: -288.4484661616; transform: rotate(4.75turn); } }
@keyframes plfx-ring4 { from { stroke-dashoffset: -253.9600625988; transform: rotate(-.25turn); animation-timing-function: ease-in; } 23% { stroke-dashoffset: -63.61725015; transform: rotate(1turn); animation-timing-function: ease-out; } 46%, 50% { stroke-dashoffset: -253.9600625988; transform: rotate(2.25turn); animation-timing-function: ease-in; } 73% { stroke-dashoffset: -63.61725015; transform: rotate(3.5turn); animation-timing-function: ease-out; } 96%, to { stroke-dashoffset: -253.9600625988; transform: rotate(4.75turn); } }
@keyframes plfx-ring5 { from { stroke-dashoffset: -225.7422778656; transform: rotate(-.25turn); animation-timing-function: ease-in; } 23% { stroke-dashoffset: -56.5486668; transform: rotate(1turn); animation-timing-function: ease-out; } 46%, 50% { stroke-dashoffset: -225.7422778656; transform: rotate(2.25turn); animation-timing-function: ease-in; } 73% { stroke-dashoffset: -56.5486668; transform: rotate(3.5turn); animation-timing-function: ease-out; } 96%, to { stroke-dashoffset: -225.7422778656; transform: rotate(4.75turn); } }
@keyframes plfx-ring6 { from { stroke-dashoffset: -203.795111962; transform: rotate(-.25turn); animation-timing-function: ease-in; } 23% { stroke-dashoffset: -51.05087975; transform: rotate(1turn); animation-timing-function: ease-out; } 46%, 50% { stroke-dashoffset: -203.795111962; transform: rotate(2.25turn); animation-timing-function: ease-in; } 73% { stroke-dashoffset: -51.05087975; transform: rotate(3.5turn); animation-timing-function: ease-out; } 96%, to { stroke-dashoffset: -203.795111962; transform: rotate(4.75turn); } }

/* ============================================================================
   Matrix digits loader (#simple-feature slide 3 — replaces the shield icon).
   Namespaced aiml-* + own keyframes so .digit/.glow can't collide.
   ========================================================================== */
.aiml-loader { width: clamp(140px, 16vw, 180px); aspect-ratio: 3 / 4; margin: 0 auto; position: relative; perspective: 800px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aiml-digit { color: #00ff88; font-family: monospace; font-size: clamp(22px, 2.2vw, 30px); text-align: center; text-shadow: 0 0 6px #00ff88; animation: aiml-fall 2s infinite, aiml-flicker .5s infinite; opacity: 0; }
.aiml-digit:nth-child(1) { animation-delay: .1s; }
.aiml-digit:nth-child(2) { animation-delay: .3s; }
.aiml-digit:nth-child(3) { animation-delay: .5s; }
.aiml-digit:nth-child(4) { animation-delay: .7s; }
.aiml-digit:nth-child(5) { animation-delay: .9s; }
.aiml-digit:nth-child(6) { animation-delay: 1.1s; }
.aiml-digit:nth-child(7) { animation-delay: 1.3s; }
.aiml-digit:nth-child(8) { animation-delay: 1.5s; }
.aiml-glow { position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,255,136,.12) 0%, transparent 70%); animation: aiml-pulse 2s infinite; }
@keyframes aiml-fall { 0% { transform: translateY(-50px) rotateX(90deg); opacity: 0; } 20%, 80% { transform: translateY(0) rotateX(0deg); opacity: .8; } 100% { transform: translateY(50px) rotateX(-90deg); opacity: 0; } }
@keyframes aiml-flicker { 0%, 19%, 21%, 100% { opacity: .8; } 20% { opacity: .2; } }
@keyframes aiml-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .aiml-digit { animation: none; opacity: .8; } .aiml-glow { animation: none; } }