/* ============================================
   Raslans Marketing — Floating Background Elements
   Random marketing & programming themed particles
   ============================================ */

/* ── Container ── */
.bg-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-particles__item {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  /* Black semi-transparent for visibility on any background */
  color: rgba(0, 0, 0, 0.12);
  font-size: 1.4rem;
}

/* ── Float Animations (different paths) ── */
@keyframes bgFloat1 {
  0%   { opacity: 0; transform: translateY(100vh) rotate(0deg) scale(0.6); }
  8%   { opacity: 1; }
  50%  { transform: translateY(40vh) rotate(180deg) scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10vh) rotate(360deg) scale(0.6); }
}

@keyframes bgFloat2 {
  0%   { opacity: 0; transform: translateY(100vh) translateX(-40px) rotate(0deg); }
  8%   { opacity: 1; }
  50%  { transform: translateY(50vh) translateX(50px) rotate(120deg); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10vh) translateX(-25px) rotate(300deg); }
}

@keyframes bgFloat3 {
  0%   { opacity: 0; transform: translateY(100vh) translateX(25px) rotate(0deg) scale(0.7); }
  8%   { opacity: 1; }
  50%  { transform: translateY(45vh) translateX(-40px) rotate(90deg) scale(1.1); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10vh) translateX(20px) rotate(270deg) scale(0.7); }
}

@keyframes bgFloat4 {
  0%   { opacity: 0; transform: translateY(100vh) translateX(-20px) rotate(45deg) scale(0.8); }
  8%   { opacity: 1; }
  50%  { transform: translateY(55vh) translateX(30px) rotate(200deg) scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10vh) translateX(-15px) rotate(405deg) scale(0.8); }
}

@keyframes bgDrift {
  0%   { opacity: 0; transform: translateX(-5vw) translateY(0) rotate(0deg); }
  8%   { opacity: 1; }
  50%  { transform: translateX(5vw) translateY(-50vh) rotate(180deg); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-3vw) translateY(-100vh) rotate(360deg); }
}

/* ── Hero Continuous Animation (Ken Burns) ── */
.hero__slide.active .hero__slide-bg {
  animation: heroZoomPan 12s ease-in-out infinite;
}

@keyframes heroZoomPan {
  0%   { transform: scale(1) translate(0, 0); }
  25%  { transform: scale(1.06) translate(-0.5%, -0.5%); }
  50%  { transform: scale(1.03) translate(0.3%, -0.3%); }
  75%  { transform: scale(1.07) translate(-0.3%, 0.2%); }
  100% { transform: scale(1) translate(0, 0); }
}

.hero__slide.active .hero__slide-content {
  animation: heroContentBreath 8s ease-in-out infinite;
}

@keyframes heroContentBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Hero Slide Transition Effects ── */

/* Base slide state */
.hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: none;
  pointer-events: none;
}

/* Active slide entrance — dramatic zoom + fade + blur reveal */
.hero__slide.active {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  animation: slideEnter 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideEnter {
  0% {
    opacity: 0;
    transform: scale(1.15);
    filter: blur(12px) brightness(1.5);
  }
  30% {
    opacity: 0.7;
    filter: blur(6px) brightness(1.2);
  }
  60% {
    transform: scale(1.03);
    filter: blur(2px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

/* Leaving slide — dramatic zoom out + fade + blur */
.hero__slide.leaving {
  z-index: 2;
  pointer-events: none;
  animation: slideLeave 1.2s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes slideLeave {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
  40% {
    opacity: 0.6;
    transform: scale(0.92);
    filter: blur(4px) brightness(0.7);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(15px) brightness(0.4);
  }
}

/* Content entrance on active slide */
.hero__slide.active .hero__text {
  animation: contentReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

@keyframes contentReveal {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    filter: blur(8px);
  }
  40% {
    opacity: 0.8;
    transform: translateY(15px) scale(0.97);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Leaving content */
.hero__slide.leaving .hero__text {
  animation: contentLeave 0.8s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes contentLeave {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
    filter: blur(5px);
  }
}

/* ── Glow flash during transition ── */
.hero__slide.active .hero__slide-glow {
  animation: glowFlash 1.4s ease-out forwards;
}

@keyframes glowFlash {
  0%   { opacity: 0.6; transform: scale(1.8); }
  30%  { opacity: 0.3; }
  100% { opacity: 0; transform: scale(2.5); }
}

/* ── Parallax elements pulse on transition ── */
.hero__slide.active .hero__parallax-circle {
  animation: morphBlob 15s ease-in-out infinite, particleBurst 1.5s ease-out forwards;
}

@keyframes particleBurst {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 0.12; transform: scale(1.3); }
  100% { opacity: 0.06; transform: scale(1); }
}

.hero__slide.active .hero__parallax-grid {
  animation: gridReveal 2s ease-out forwards;
}

@keyframes gridReveal {
  0%   { opacity: 0; transform: scale(0.8) rotate(-5deg); }
  50%  { opacity: 0.08; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 0.04; transform: scale(1) rotate(0deg); }
}

/* ── Progress bar sync with 12s interval ── */
.hero__progress-fill {
  transition: none;
}

.hero__progress-bar.active .hero__progress-fill {
  animation: progressFill 12s linear forwards;
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: 100%; }
}

.hero__progress-bar.completed .hero__progress-fill {
  width: 100%;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .bg-particles { display: none; }
  .hero__slide.active .hero__slide-bg,
  .hero__slide.active .hero__slide-content { animation: none; }
  .hero__slide.active { animation: fadeIn 0.5s ease forwards; }
  .hero__slide.leaving { animation: fadeOut 0.5s ease forwards; }
  @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
}