/**
 * Laser Divider - RAYGUN OS
 * The signature share-worthy moment
 * Orange/gold energy beam firing across the page
 */

/* ==========================================
   RAYGUN LASER DIVIDER SECTION
   ========================================== */

/* Dedicated section for raygun + laser divider */
.raygun-divider-section {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  overflow: visible;
  margin: 0;
  padding: 280px 0 0 0; /* MASSIVE top padding to cleanly separate from hero */
  /* Match hero background for seamless integration */
  background: var(--bg-secondary);
  /* Scroll offset to account for sticky header - shows full divider when scrolling to anchor */
  scroll-margin-top: 80px;
}

/* Raygun positioned on left side, facing right */
.raygun-container {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 20;
}

.raygun-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/* Fade in raygun once loaded (prevents flip flash) */
.raygun-image.loaded {
  opacity: 0.9;
}

/* Raygun charge-up glow (desktop only - JS skips on mobile) */
.raygun-image.charging {
  animation: raygunCharge 300ms ease-out forwards;
}

@keyframes raygunCharge {
  0% {
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 25px rgba(230, 126, 34, 1))
            drop-shadow(0 0 50px rgba(230, 126, 34, 0.6));
    transform: scale(1.08);
  }
}

[data-theme="dark"] .raygun-image.charging {
  animation: raygunChargeDark 300ms ease-out forwards;
}

@keyframes raygunChargeDark {
  0% {
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 25px rgba(255, 69, 0, 1))
            drop-shadow(0 0 50px rgba(255, 69, 0, 0.6));
    transform: scale(1.08);
  }
}

/* ==========================================
   LASER BEAM - FAN SHAPED WITH SPREAD
   ========================================== */

/* Laser beam as divider - shoots right from raygun */
.laser-beam-divider {
  position: absolute;
  left: 280px;
  right: 150px;
  top: 50%;
  transform: translateY(-50%) translateY(-3px);
  width: calc(100% - 430px);
  height: 100px;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

/* Fan beam with subtle spread - proven shape from gradient test */
.laser-beam-fan {
  opacity: 0;
  transform-origin: left center;
  /* Orange glow for light mode */
  filter: drop-shadow(0 0 8px rgba(230, 126, 34, 0.6))
          drop-shadow(0 0 16px rgba(230, 126, 34, 0.4));
  /* GPU acceleration */
  will-change: transform, opacity;
}

/* Dark mode glow - hot radioactive orange */
[data-theme="dark"] .laser-beam-fan {
  filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.6))
          drop-shadow(0 0 16px rgba(255, 69, 0, 0.4));
}

/* Fire animation - proven timing from Session 1 optimization */
.laser-beam-fan.firing {
  animation: laserFanFire 1000ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Visible state after firing */
.laser-beam-fan.visible {
  opacity: 0.9;
  transform: scaleX(1);
}

/* Retract animation */
.laser-beam-fan.retracting {
  animation: laserFanRetract 600ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes laserFanFire {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  10% {
    opacity: 0.95; /* Opacity flash for punch */
  }
  100% {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

@keyframes laserFanRetract {
  0% {
    opacity: 0.9;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* ==========================================
   BRAIN TARGET - RIGHT SIDE
   ========================================== */

/* Brain target positioned on right side where beam ends */
.brain-target-container {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 157px;
  height: 150px;
  pointer-events: none;
  z-index: 20;
}

/* Spectrum burst emanation on activation */
.brain-target-container::before,
.brain-target-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Orange spectrum burst - light mode */
.brain-target-container::before {
  background: radial-gradient(circle,
    rgba(230, 126, 34, 0.6) 0%,
    rgba(255, 179, 71, 0.5) 20%,
    rgba(218, 165, 32, 0.4) 40%,
    rgba(201, 169, 97, 0.3) 60%,
    rgba(230, 126, 34, 0.2) 80%,
    transparent 100%);
}

.brain-target-container::after {
  background: radial-gradient(circle,
    rgba(255, 140, 0, 0.5) 0%,
    rgba(218, 165, 32, 0.4) 30%,
    rgba(243, 156, 18, 0.3) 60%,
    transparent 100%);
}

/* Dark mode spectrum burst - hot radioactive */
[data-theme="dark"] .brain-target-container::before {
  background: radial-gradient(circle,
    rgba(255, 107, 53, 0.6) 0%,
    rgba(243, 156, 18, 0.5) 20%,
    rgba(244, 208, 63, 0.4) 40%,
    rgba(255, 140, 0, 0.3) 60%,
    rgba(255, 107, 53, 0.2) 80%,
    transparent 100%);
}

[data-theme="dark"] .brain-target-container::after {
  background: radial-gradient(circle,
    rgba(255, 69, 0, 0.5) 0%,
    rgba(243, 156, 18, 0.4) 30%,
    rgba(255, 140, 0, 0.3) 60%,
    transparent 100%);
}

/* Trigger burst on brain activation */
.brain-target-container.bursting::before {
  animation: spectrumBurst1 1200ms ease-out forwards;
}

.brain-target-container.bursting::after {
  animation: spectrumBurst2 1400ms ease-out 100ms forwards;
}

@keyframes spectrumBurst1 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  30% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.5);
  }
}

@keyframes spectrumBurst2 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  25% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2) rotate(180deg);
  }
}

/* Brain image target */
.brain-target {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: none;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}

/* Brain loaded state */
.brain-target.loaded {
  opacity: 1;
}

/* Brain activation - beam impact */
.brain-target.activated {
  animation: brainActivate 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Brain active state with breathing */
.brain-target.active {
  opacity: 1;
  transform: scale(1.18);
  animation: brainBreathe 4.5s ease-in-out infinite;
  transition: filter 0.6s ease-out;
}

/* Orange glow on activation (light mode) */
.brain-target.active {
  filter: drop-shadow(0 0 12px rgba(230, 126, 34, 0.8))
          drop-shadow(0 0 24px rgba(230, 126, 34, 0.6))
          drop-shadow(0 0 36px rgba(218, 165, 32, 0.4));
}

/* Red-orange glow on hover (brain notices you) */
.brain-target-container:hover .brain-target.active {
  filter: drop-shadow(0 0 20px rgba(239, 68, 68, 1))
          drop-shadow(0 0 40px rgba(220, 38, 38, 0.9))
          drop-shadow(0 0 60px rgba(185, 28, 28, 0.7));
  animation: brainBreatheIntense 3s ease-in-out infinite;
}

/* Dark mode glow - hot radioactive */
[data-theme="dark"] .brain-target.active {
  filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.8))
          drop-shadow(0 0 24px rgba(243, 156, 18, 0.6))
          drop-shadow(0 0 36px rgba(244, 208, 63, 0.4));
}

/* Dark mode hover - color shift to magenta */
[data-theme="dark"] .brain-target-container:hover .brain-target.active {
  filter: drop-shadow(0 0 20px rgba(236, 72, 153, 1))
          drop-shadow(0 0 40px rgba(219, 39, 119, 0.9))
          drop-shadow(0 0 60px rgba(157, 23, 77, 0.7));
}

/* Mario-style stepped growth animation */
@keyframes brainActivate {
  0% {
    transform: scale(1);
    filter: none;
  }
  20% {
    transform: scale(1.08);
  }
  25% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(1.15);
  }
  45% {
    transform: scale(1.12);
  }
  60% {
    transform: scale(1.22);
  }
  65% {
    transform: scale(1.18);
  }
  80% {
    transform: scale(1.24);
  }
  85% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1.18);
  }
}

/* Breathing animation - organic, living presence */
@keyframes brainBreathe {
  0%, 100% {
    transform: scale(1.16);
  }
  50% {
    transform: scale(1.22);
  }
}

/* Intensified breathing when brain notices you */
@keyframes brainBreatheIntense {
  0%, 100% {
    transform: scale(1.14);
  }
  50% {
    transform: scale(1.26);
  }
}

/* ==========================================
   SYNAPTIC BURST - Click Effect (Desktop)
   ========================================== */

/* Synaptic burst SVG overlay */
.synaptic-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0;
}

/* Individual synapse lines - hidden by default */
.synapse {
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}

/* Light mode synapse colors - orange energy */
.synapse {
  stroke: rgba(230, 126, 34, 1);
  filter: drop-shadow(0 0 8px rgba(230, 126, 34, 1));
}

/* Dark mode synapse colors - hot radioactive orange */
[data-theme="dark"] .synapse {
  stroke: rgba(255, 107, 53, 1);
  filter: drop-shadow(0 0 8px rgba(255, 107, 53, 1));
}

/* Burst animation - synapses fire outward */
@keyframes synapseFire {
  0% {
    opacity: 0;
    stroke-dashoffset: 90;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* Triggered state - synaptic burst active */
.brain-target-container.synaptic-firing .synaptic-burst {
  opacity: 1;
}

.brain-target-container.synaptic-firing .synapse {
  animation: synapseFire 800ms ease-out forwards;
}

/* Stagger synapse firing with delays */
.brain-target-container.synaptic-firing .synapse-1 { animation-delay: 0ms; }
.brain-target-container.synaptic-firing .synapse-2 { animation-delay: 50ms; }
.brain-target-container.synaptic-firing .synapse-3 { animation-delay: 100ms; }
.brain-target-container.synaptic-firing .synapse-4 { animation-delay: 150ms; }
.brain-target-container.synaptic-firing .synapse-5 { animation-delay: 200ms; }
.brain-target-container.synaptic-firing .synapse-6 { animation-delay: 250ms; }
.brain-target-container.synaptic-firing .synapse-7 { animation-delay: 300ms; }
.brain-target-container.synaptic-firing .synapse-8 { animation-delay: 350ms; }

/* Brain rapid breathing during synaptic burst */
.brain-target-container.synaptic-firing .brain-target.active {
  animation: brainBurst 1.5s ease-in-out 3 !important;
}

@keyframes brainBurst {
  0%, 100% {
    transform: scale(1.12);
  }
  50% {
    transform: scale(1.28);
  }
}

/* ==========================================
   RESPONSIVE - TABLET
   ========================================== */

@media (max-width: 1024px) {
  .raygun-container {
    width: 150px;
    height: 150px;
    left: 40px;
  }

  .brain-target-container {
    width: 60px;
    height: 60px;
    right: 40px;
  }

  .brain-target {
    font-size: 45px;
  }

  .laser-beam-divider {
    left: 190px;
    right: 100px;
    width: calc(100% - 290px);
  }
}

/* ==========================================
   RESPONSIVE - MOBILE
   ========================================== */

@media (max-width: 768px) {
  .raygun-divider-section {
    height: 60px;
    padding: 120px 0 0 0; /* More clearance from hero on mobile */
  }

  .raygun-container {
    width: 100px;
    height: 100px;
    left: 20px;
  }

  .brain-target-container {
    width: 80px;
    height: 77px;
    right: 20px;
  }

  .laser-beam-divider {
    left: 120px;
    right: 60px;
    width: calc(100% - 180px);
  }

  /* Disable beam glow on mobile - SVG polygon filters create artifacts on Chrome Android */
  .laser-beam-fan {
    filter: none !important;
  }

  /* Disable breathing animation on mobile - keep brain static after activation for performance */
  .brain-target.active {
    animation: none;
    transform: scale(1.18);
    filter: none !important;
  }

  [data-theme="dark"] .brain-target.active {
    filter: none !important;
  }

  /* No hover effects on mobile (touch doesn't have hover state) */
  .brain-target-container:hover .brain-target.active {
    animation: none;
    filter: none !important;
  }

  /* Hide synaptic burst SVG on mobile (desktop only effect) */
  .synaptic-burst {
    display: none;
  }
}

/* ==========================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .raygun-divider-section {
    display: none !important;
  }
}