/* SH1 Motion Kit — estilos de suporte para os efeitos em sh1-motion.js */

/* 1) Preloader ------------------------------------------------------ */
.sh1-preloader {
  --sh1-clip: 0%;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14171c;
  clip-path: inset(0 0 var(--sh1-clip) 0);
}
.sh1-preloader-mark {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
  text-align: center;
}
.sh1-preloader-bar {
  width: 220px;
  height: 2px;
  background: #2a2e38;
  overflow: hidden;
  border-radius: 99px;
}
.sh1-preloader-bar > i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #4A6DEF, #9B5FC5, #FA9D4D);
}
@media (prefers-reduced-motion: reduce) {
  .sh1-preloader { display: none; }
}

/* 2) Cursor personalizado -------------------------------------------- */
.sh1-cursor-dot, .sh1-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99998;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.sh1-cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
}
.sh1-cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.5);
  transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease;
}
.sh1-cursor-ring.is-active {
  width: 52px; height: 52px;
  border-color: transparent;
  background: rgba(74,109,239,.18);
}
@media (hover: none), (pointer: coarse) {
  .sh1-cursor-dot, .sh1-cursor-ring { display: none; }
}

/* 3) sh1-split / sh1-scale-img / sh1-reveal -------------------------- */
/* (GSAP controla o estado inicial via JS; nada a declarar aqui) */
.sh1-scale-img, .sh1-scale-img img { overflow: hidden; }

/* 4) Botão magnético -------------------------------------------------- */
.sh1-magnetic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sh1-magnetic-fill {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: linear-gradient(135deg, #4A6DEF, #9B5FC5, #FA9D4D);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  z-index: -1;
  pointer-events: none;
}
.sh1-magnetic:hover .sh1-magnetic-fill {
  transform: translate(-50%, -50%) scale(40);
}

/* 5) Voltar ao topo ---------------------------------------------------- */
.sh1-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px; height: 48px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  cursor: pointer;
}
.sh1-totop.is-active { opacity: 1; visibility: visible; transform: none; }
.sh1-totop svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh1-totop path {
  fill: none;
  stroke: url(#sh1-totop-gradient);
  stroke-width: 4;
}
.sh1-totop circle { fill: #1b1f27; }
.sh1-totop .arrow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .sh1-magnetic-fill { transition: none; }
  .sh1-totop { transition: none; }
}