/* ==========================================================================
   Digicêuticos Demo & Immersive Utilities (Scroll-driven & Parallax)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll Reveal Animations (Disparadas via IntersectionObserver)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-up {
  transform: translate3d(0, 40px, 0);
}

.reveal-down {
  transform: translate3d(0, -40px, 0);
}

.reveal-left {
  transform: translate3d(-40px, 0, 0);
}

.reveal-right {
  transform: translate3d(40px, 0, 0);
}

.reveal-scale {
  transform: scale3d(0.92, 0.92, 1);
}

/* Estado ativo do Scroll Reveal */
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* Delays escalonados para grids de cards */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* --------------------------------------------------------------------------
   2. Parallax & Floating Elements (3D Leve e Hardware Accelerated)
   -------------------------------------------------------------------------- */
@keyframes floatSlow {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -18px, 0) rotate(3deg);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 15px, 0) rotate(-3deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0.8;
    transform: scale3d(1.08, 1.08, 1);
  }
}

@keyframes gridDrift {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 80px 80px, 80px 80px;
  }
}

@keyframes cornerDriftA {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  50% {
    transform: translate3d(36px, 28px, 0) scale3d(1.06, 1.06, 1);
  }
}

@keyframes cornerDriftB {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  50% {
    transform: translate3d(-34px, 32px, 0) scale3d(1.08, 1.08, 1);
  }
}

@keyframes cornerDriftC {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  50% {
    transform: translate3d(34px, -30px, 0) scale3d(1.05, 1.05, 1);
  }
}

@keyframes cornerDriftD {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  50% {
    transform: translate3d(-30px, -34px, 0) scale3d(1.07, 1.07, 1);
  }
}

.floating-element-1 {
  animation: cornerDriftA 28s ease-in-out infinite;
}

.floating-element-2 {
  animation: cornerDriftB 32s ease-in-out infinite;
}

.floating-element-3 {
  animation: cornerDriftC 30s ease-in-out infinite;
}

.floating-element-4 {
  animation: cornerDriftD 34s ease-in-out infinite;
}

.pulse-glow-bg {
  animation: pulseGlow 5s ease-in-out infinite alternate;
}

/* Parallax Container e Grid 3D de Fundo */
.parallax-grid-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(rgba(15, 121, 204, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 121, 204, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridDrift 30s linear infinite;
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
}

.parallax-shape {
  position: fixed;
  width: clamp(540px, 56vw, 980px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.78;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

.corner-glow-top-left {
  top: -34vmin;
  left: -32vmin;
  background: radial-gradient(circle at 35% 35%, rgba(56, 189, 248, 0.32) 0%, rgba(15, 121, 204, 0.18) 38%, transparent 72%);
}

.corner-glow-top-right {
  top: -32vmin;
  right: -30vmin;
  background: radial-gradient(circle at 65% 35%, rgba(140, 197, 65, 0.28) 0%, rgba(56, 189, 248, 0.16) 40%, transparent 74%);
}

.corner-glow-bottom-left {
  bottom: -36vmin;
  left: -30vmin;
  background: radial-gradient(circle at 35% 65%, rgba(241, 175, 5, 0.24) 0%, rgba(140, 197, 65, 0.14) 42%, transparent 76%);
}

.corner-glow-bottom-right {
  right: -34vmin;
  bottom: -38vmin;
  background: radial-gradient(circle at 68% 68%, rgba(4, 39, 138, 0.22) 0%, rgba(15, 121, 204, 0.14) 42%, transparent 76%);
}

@media (prefers-reduced-motion: reduce) {
  .parallax-grid-bg,
  .floating-element-1,
  .floating-element-2,
  .floating-element-3,
  .floating-element-4 {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. Efeitos de Microinteração e Brilho em Botões (Shine Sweep)
   -------------------------------------------------------------------------- */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 35%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.btn-shine:hover::after {
  left: 130%;
}