/* ─── Diagonal Spotlights ─── */
.spotlight {
  position: absolute;
  width: 750px;
  height: 750px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(90px);
  animation: spotlight-pulse 8s ease-in-out infinite, spotlight-color-shift 12s ease-in-out infinite;
}
.spotlight-tl {
  top: -150px;
  left: -150px;
  background: radial-gradient(ellipse at 20% 20%, rgba(6,79,189,0.7) 0%, rgba(6,79,189,0.25) 30%, rgba(249,211,71,0.1) 50%, transparent 70%);
}
.spotlight-br {
  bottom: -150px;
  right: -150px;
  background: radial-gradient(ellipse at 80% 80%, rgba(249,211,71,0.7) 0%, rgba(249,211,71,0.25) 30%, rgba(6,79,189,0.1) 50%, transparent 70%);
}
.spotlight-tl { animation-delay: 0s, 0s; }
.spotlight-br { animation-delay: 4s, 6s; }
@keyframes spotlight-pulse {
  0%, 100% { opacity: 0.4; filter: blur(90px); }
  50% { opacity: 0.7; filter: blur(110px); }
}
@keyframes spotlight-color-shift {
  0%, 100% { filter: blur(90px) hue-rotate(0deg); }
  33% { filter: blur(100px) hue-rotate(20deg); }
  66% { filter: blur(95px) hue-rotate(-12deg); }
}

/* ─── Fireflies (Kunang-Kunang) ─── */
.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
.firefly::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: inherit;
  filter: blur(8px);
  opacity: 0.6;
}
.firefly-yellow {
  background: radial-gradient(circle, #f9d347 0%, rgba(249,211,71,0) 70%);
  box-shadow: 0 0 12px 4px rgba(249,211,71,0.6), 0 0 24px 8px rgba(249,211,71,0.3);
}
.firefly-blue {
  background: radial-gradient(circle, #064fbd 0%, rgba(6,79,189,0) 70%);
  box-shadow: 0 0 12px 4px rgba(6,79,189,0.6), 0 0 24px 8px rgba(6,79,189,0.3);
}

/* Float paths */
@keyframes firefly-float-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(40px, -60px) scale(1.2); opacity: 0.8; }
  90%  { opacity: 1; }
  100% { transform: translate(-20px, -120px) scale(0.8); opacity: 0; }
}
@keyframes firefly-float-2 {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(-50px, -40px) scale(1.1); opacity: 0.7; }
  85%  { opacity: 1; }
  100% { transform: translate(30px, -100px) scale(0.9); opacity: 0; }
}
@keyframes firefly-float-3 {
  0%   { transform: translate(0, 0) scale(1.1); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(60px, 30px) scale(0.9); opacity: 0.9; }
  88%  { opacity: 1; }
  100% { transform: translate(-40px, -80px) scale(1); opacity: 0; }
}
@keyframes firefly-float-4 {
  0%   { transform: translate(0, 0) scale(0.9); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(-30px, 50px) scale(1.3); opacity: 0.6; }
  92%  { opacity: 1; }
  100% { transform: translate(50px, -60px) scale(0.7); opacity: 0; }
}
@keyframes firefly-float-5 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(20px, -90px) scale(1.1); opacity: 0.85; }
  90%  { opacity: 1; }
  100% { transform: translate(-60px, -30px) scale(0.85); opacity: 0; }
}
@keyframes firefly-float-6 {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  14%  { opacity: 1; }
  50%  { transform: translate(-45px, -55px) scale(1.2); opacity: 0.75; }
  86%  { opacity: 1; }
  100% { transform: translate(35px, -95px) scale(0.95); opacity: 0; }
}
@keyframes firefly-float-7 {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 0; }
  11%  { opacity: 1; }
  50%  { transform: translate(55px, -25px) scale(0.8); opacity: 0.9; }
  89%  { opacity: 1; }
  100% { transform: translate(-25px, -110px) scale(1.1); opacity: 0; }
}
@keyframes firefly-float-8 {
  0%   { transform: translate(0, 0) scale(0.85); opacity: 0; }
  9%   { opacity: 1; }
  50%  { transform: translate(-55px, -70px) scale(1.15); opacity: 0.65; }
  91%  { opacity: 1; }
  100% { transform: translate(45px, -45px) scale(0.75); opacity: 0; }
}

/* Per-firefly positioning + animation */
/* ─── Speaker 3D Tilt Cards ─── */
.speaker-stage {
  perspective: 1200px;
}
.speaker-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}
.speaker-card-3d .card-inner {
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  width: 100%;
}
.speaker-card-3d .card-inner > * {
  transform: translateZ(20px);
}
.speaker-card-3d .card-inner .speaker-avatar-wrap {
  transform: translateZ(30px);
  margin-left: auto;
  margin-right: auto;
}
.speaker-card-3d .card-inner {
  transform: translateX(0) !important;
}
.speaker-card-3d .card-inner .speaker-role-badge {
  transform: translateZ(25px);
}
.speaker-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #064fbd, #f9d347, #a8dcf3, #064fbd);
  animation: ring-spin 4s linear infinite;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}
.speaker-card-3d .speaker-glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,79,189,.12) 0%, transparent 70%);
  top: 10%; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
}
.speaker-card-3d:hover .speaker-glow {
  opacity: 1;
  transform: translateX(-50%) scale(1.3);
}

/* Staggered reveal */
.speaker-card-3d {
  opacity: 0;
  transform: translateY(40px) scale(.92);
  transition: opacity 0.7s cubic-bezier(.23,1,.32,1), transform 0.7s cubic-bezier(.23,1,.32,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.speaker-card-3d.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Floating per card */
@keyframes float-1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1)} }
@keyframes float-2 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1)} }
@keyframes float-3 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1)} }
@keyframes float-4 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-9px) scale(1)} }
.speaker-stage .speaker-card-3d:nth-child(1).revealed { animation: float-1 5s ease-in-out infinite; }
.speaker-stage .speaker-card-3d:nth-child(2).revealed { animation: float-2 6s ease-in-out infinite 0.5s; }
.speaker-stage .speaker-card-3d:nth-child(3).revealed { animation: float-3 5.5s ease-in-out infinite 1s; }
.speaker-stage .speaker-card-3d:nth-child(4).revealed { animation: float-4 5.2s ease-in-out infinite 1.5s; }

/* Social links slide up */
.speaker-social {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.speaker-card-3d:hover .speaker-social {
  opacity: 1;
  transform: translateY(0);
}

/* Quote decorative line */
.speaker-quote-line {
  width: 24px; height: 2px;
  background: linear-gradient(90deg, #f9d347, transparent);
  margin: 0 auto;
  transition: width 0.4s ease;
}
.speaker-card-3d:hover .speaker-quote-line {
  width: 48px;
}

/* Secret hover text glow */
.speaker-quote {
  transition: color 0.3s ease;
}
.speaker-card-3d:hover .speaker-quote {
  color: #064fbd;
}

@media (max-width: 768px) {
  .speaker-card-3d.revealed { animation: none; }
  .speaker-card-3d { transform: none !important; }
  .speaker-card-3d:hover { transform: translateY(-4px) !important; }

  #speakers {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  #speakers .spotlight {
    width: 400px;
    height: 400px;
    filter: blur(60px);
    opacity: 0.35;
  }
  .spotlight-tl {
    top: -100px;
    left: -100px;
  }
  .spotlight-br {
    bottom: -100px;
    right: -100px;
  }

  #speakers .firefly {
    width: 4px;
    height: 4px;
  }

  #speakers .text-center {
    margin-bottom: 2rem !important;
  }

  #speakers h2 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }

  #speakers .max-w-xl {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0 0.5rem;
  }

  .speaker-stage {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 100% !important;
    padding: 0 0.5rem;
  }

  .speaker-card-3d {
    padding: 1.25rem !important;
    border-radius: 1rem !important;
  }

  .speaker-card-3d .speaker-avatar-wrap {
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: 1rem !important;
  }

  .speaker-card-3d .speaker-avatar-wrap .w-28 {
    width: 5rem !important;
    height: 5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .speaker-card-3d h3 {
    font-size: 1rem !important;
  }

  .speaker-card-3d .speaker-quote {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  .speaker-social {
    opacity: 1 !important;
    transform: none !important;
  }

  .speaker-card-3d .card-inner > * {
    transform: none !important;
  }
  .speaker-card-3d .card-inner .speaker-avatar-wrap {
    transform: none !important;
  }
  .speaker-card-3d .card-inner .speaker-role-badge {
    transform: none !important;
  }
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {
  .speaker-stage {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 700px !important;
  }
}