/* ============================================
   BYTENOTECHH — Animations (Pro Redesign)
   ============================================ */

/* === Keyframes === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-25px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(25px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,166,255,0.25); }
  50% { box-shadow: 0 0 40px rgba(0,166,255,0.45); }
}

@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* === Scroll Animation Classes === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.animate-left {
  transform: translateX(-25px);
}

.animate-on-scroll.animate-left.animated {
  transform: translateX(0);
}

.animate-on-scroll.animate-right {
  transform: translateX(25px);
}

.animate-on-scroll.animate-right.animated {
  transform: translateX(0);
}

.animate-on-scroll.animate-scale {
  transform: scale(0.95);
}

.animate-on-scroll.animate-scale.animated {
  transform: scale(1);
}

/* Stagger delays for grid children */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }
.stagger-9 { transition-delay: 0.45s; }

/* === Page Loader — Cinematic B Emblem Animation === */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at center, #0c1038 0%, #05081c 65%, #030014 100%);
  overflow: hidden;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
  pointer-events: auto;
}

[data-theme="light"] .page-loader {
  background: radial-gradient(circle at center, #E6F0FA 0%, #F1F5F9 65%, #FFFFFF 100%);
}

.page-loader.loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ambient glow pulsing in center */
.page-loader-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 210, 255, 0.25) 0%, rgba(15, 27, 153, 0.15) 45%, transparent 70%);
  border-radius: 50%;
  filter: blur(24px);
  animation: loaderGlowPulse 2s ease-in-out infinite alternate;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.page-loader.docking .page-loader-glow {
  opacity: 0;
}

@keyframes loaderGlowPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}

/* B-Logo Wrapper (initially slides in from left to center, then flies to navbar) */
.page-loader-b-wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 143px;
  margin-left: -65px;
  margin-top: -71.5px;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderEntranceFromLeft 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: left, top, width, height, transform, opacity;
}

@media (max-width: 768px) {
  .page-loader-b-wrapper {
    width: 100px;
    height: 110px;
    margin-left: -50px;
    margin-top: -55px;
  }
}

@keyframes loaderEntranceFromLeft {
  0% {
    transform: translate3d(-50vw, 0, 0) scale(0.9);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  85% {
    transform: translate3d(8px, 0, 0) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

.loader-b-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(0, 166, 255, 0.45));
}

/* The string path that draws the B emblem */
.loader-b-ribbon {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: drawRibbonString 0.9s cubic-bezier(0.35, 0, 0.25, 1) 0.05s forwards;
}

@keyframes drawRibbonString {
  0% {
    stroke-dashoffset: 2400;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Shadow loop */
#loader-shadow-curve {
  opacity: 0;
  animation: fadeInShadow 0.6s ease-out 0.4s forwards;
}

@keyframes fadeInShadow {
  to { opacity: 0.3; }
}

/* 4 Colored dots that pop when B is formed */
.loader-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: dotPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards;
}

#loader-dot-pink   { animation-delay: 0.7s; }
#loader-dot-blue   { animation-delay: 0.78s; }
#loader-dot-purple { animation-delay: 0.86s; }
#loader-dot-cyan   { animation-delay: 0.94s; }

@keyframes dotPopIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* === Section Badge Reveal === */
@keyframes badgeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.9);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

.animate-on-scroll .section-badge,
.animate-on-scroll.section-header .section-badge {
  opacity: 0;
}

.animate-on-scroll.animated .section-badge,
.animate-on-scroll.section-header.animated .section-badge {
  animation: badgeSlideIn 0.7s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}