/**
 * SERVICEBIRD — Master Animation & Layered Vector Physics Engine (2027)
 */

/* ==========================================================================
   1. HERO BIRD INTERACTIVE STAGE & 3D PHYSICS
   ========================================================================== */
.hero-bird-interactive-stage {
  position: relative;
  width: 100%;
  max-width: 860px;
  height: 540px;
  margin: 10px auto 40px auto;
  perspective: 1200px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero-bird-interactive-stage {
    height: 420px;
  }
}

.bird-flight-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bird-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(0, 184, 122, 0.08) 45%, transparent 70%);
  filter: blur(25px);
  pointer-events: none;
  z-index: 1;
  animation: ambientGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes ambientGlowPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* Master Layered Bird Container */
.layered-bird-wrapper {
  position: relative;
  width: 100%;
  max-width: 660px;
  height: 100%;
  max-height: 520px;
  z-index: 4;
  cursor: grab;
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter 0.3s ease;
}

.layered-bird-wrapper:active {
  cursor: grabbing;
}

.servicebird-vector-art {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.12));
}

/* Barrel Roll Special Action */
.layered-bird-wrapper.bird-barrel-roll {
  animation: birdBarrelRollAction 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes birdBarrelRollAction {
  0% { transform: perspective(1000px) rotateY(0deg) rotateZ(0deg) scale(1); }
  50% { transform: perspective(1000px) rotateY(180deg) rotateZ(180deg) scale(1.18); }
  100% { transform: perspective(1000px) rotateY(360deg) rotateZ(360deg) scale(1); }
}

/* ==========================================================================
   2. LAYERED SVG KEYFRAME ANIMATIONS
   ========================================================================== */

/* Left Wing Flap */
.anim-left-wing {
  animation: leftWingFlapMotion 0.65s ease-in-out infinite alternate;
}

@keyframes leftWingFlapMotion {
  0% { transform: rotate(0deg) translateY(0px) scaleY(1); }
  100% { transform: rotate(-18deg) translateY(-22px) scaleY(0.9); }
}

/* Right Wing Flap */
.anim-right-wing {
  animation: rightWingFlapMotion 0.65s ease-in-out infinite alternate;
}

@keyframes rightWingFlapMotion {
  0% { transform: rotate(0deg) translateY(0px); }
  100% { transform: rotate(14deg) translateY(-18px); }
}

/* Hero Cape Flowing Wave */
.anim-cape-wave {
  animation: capeWaveMotion 2.2s ease-in-out infinite alternate;
  transform-origin: 220px 280px;
}

@keyframes capeWaveMotion {
  0% { transform: rotate(0deg) skewX(0deg); }
  50% { transform: rotate(-6deg) skewX(-4deg); }
  100% { transform: rotate(8deg) skewX(6deg); }
}

/* Tail Flutter */
.anim-tail-flutter {
  animation: tailFlutterMotion 1.4s ease-in-out infinite alternate;
  transform-origin: 260px 390px;
}

@keyframes tailFlutterMotion {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(8deg) scaleY(1.05); }
}

/* Feet Flight Bob */
.anim-feet-bob {
  animation: feetBobMotion 1.8s ease-in-out infinite alternate;
}

@keyframes feetBobMotion {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-6px); }
}

/* Satchel Sway */
.anim-satchel-sway {
  animation: satchelSwayMotion 2s ease-in-out infinite alternate;
}

@keyframes satchelSwayMotion {
  0% { transform: rotate(-4deg); }
  100% { transform: rotate(6deg); }
}

/* Clipboard Dynamic Tilt */
.anim-clipboard-tilt {
  animation: clipboardFloat 3s ease-in-out infinite alternate;
}

@keyframes clipboardFloat {
  0% { transform: translate(480px, 260px) rotate(6deg); }
  100% { transform: translate(480px, 252px) rotate(10deg); }
}

/* Eye Blink */
.anim-eye-blink {
  animation: eyeBlinkCycle 4.5s infinite;
  transform-origin: center;
}

@keyframes eyeBlinkCycle {
  0%, 94%, 98%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

/* Live Mic Indicator Light */
.anim-mic-live {
  animation: micLiveGlow 1.2s ease-in-out infinite alternate;
}

@keyframes micLiveGlow {
  0% { fill: #10B981; opacity: 0.7; }
  100% { fill: #34D399; opacity: 1; filter: drop-shadow(0 0 4px #10B981); }
}

/* Pulsing Headset Audio Rings */
.anim-audio-ring-1 {
  animation: audioRingPulse 1.6s ease-out infinite;
  transform-origin: 378px 244px;
}

.anim-audio-ring-2 {
  animation: audioRingPulse 1.6s ease-out 0.8s infinite;
  transform-origin: 378px 244px;
}

@keyframes audioRingPulse {
  0% { r: 6px; opacity: 0.9; stroke-width: 2px; }
  100% { r: 24px; opacity: 0; stroke-width: 0.5px; }
}

/* ==========================================================================
   3. FLOATING ORBITING SOLUTION BADGES (3D DEPTH)
   ========================================================================== */
.hero-orbiting-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.hero-orbit-badge {
  position: absolute;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid var(--border-main);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-orbit-badge:hover {
  transform: scale(1.12) translateY(-6px) !important;
  border-color: var(--brand-blue-vibrant);
  box-shadow: 0 18px 35px -5px rgba(37, 99, 235, 0.25);
  z-index: 10;
}

/* Positions around Bird */
.badge-health {
  top: 6%;
  left: 2%;
  animation: orbitFloat1 4.2s ease-in-out infinite alternate;
}

.badge-courts {
  top: 4%;
  right: 4%;
  animation: orbitFloat2 4.8s ease-in-out infinite alternate;
}

.badge-dwp {
  bottom: 22%;
  left: -2%;
  animation: orbitFloat3 4.5s ease-in-out infinite alternate;
}

.badge-send {
  bottom: 12%;
  right: 0%;
  animation: orbitFloat4 5.2s ease-in-out infinite alternate;
}

.badge-transport {
  top: 48%;
  left: -6%;
  animation: orbitFloat5 4.9s ease-in-out infinite alternate;
}

@media (max-width: 900px) {
  .badge-transport { display: none; }
  .badge-dwp { left: 2%; bottom: 8%; }
  .badge-send { right: 2%; bottom: 8%; }
}

@keyframes orbitFloat1 {
  0% { transform: translateY(0px) rotate(-2deg); }
  100% { transform: translateY(-14px) rotate(3deg); }
}
@keyframes orbitFloat2 {
  0% { transform: translateY(0px) rotate(3deg); }
  100% { transform: translateY(-16px) rotate(-3deg); }
}
@keyframes orbitFloat3 {
  0% { transform: translateY(0px) rotate(-3deg); }
  100% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes orbitFloat4 {
  0% { transform: translateY(0px) rotate(2deg); }
  100% { transform: translateY(-15px) rotate(-2deg); }
}
@keyframes orbitFloat5 {
  0% { transform: translateY(0px) rotate(-4deg); }
  100% { transform: translateY(-12px) rotate(4deg); }
}

.badge-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-icon-wrap.red { background: #FEE2E2; color: #EF4444; }
.badge-icon-wrap.purple { background: #F3E8FF; color: #9333EA; }
.badge-icon-wrap.blue { background: #DBEAFE; color: #2563EB; }
.badge-icon-wrap.green { background: #DCFCE7; color: #16A34A; }
.badge-icon-wrap.orange { background: #FFEDD5; color: #EA580C; }

.badge-label-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.25;
}

.badge-label-group strong {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  color: var(--text-heading);
}

.badge-label-group span {
  font-size: 0.6875rem;
  color: var(--text-subtle);
}

.badge-check-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   4. DYNAMIC SPEECH BUBBLE & TRACKPAD HINT
   ========================================================================== */
.bird-speech-bubble {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.9);
  background: #FFFFFF;
  border: 1.5px solid var(--brand-blue-vibrant);
  border-radius: var(--radius-full);
  padding: 8px 22px;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.bird-speech-bubble.pop-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0px) scale(1);
}

.bird-speech-bubble .speech-icon {
  font-size: 1rem;
  color: #F59E0B;
}

.bird-speech-bubble .speech-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--brand-blue-vibrant);
  white-space: nowrap;
}

/* Trackpad / Cursor Steering Hint */
.bird-trackpad-hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-blue-vibrant);
  background: rgba(239, 246, 255, 0.85);
  border: 1px dashed rgba(37, 99, 235, 0.35);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  z-index: 5;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 640px) {
  .bird-trackpad-hint {
    font-size: 0.6875rem;
    padding: 5px 12px;
    bottom: -32px;
  }
}

/* ==========================================================================
   5. STANDARD SCROLL REVEALS & BEACONS
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  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-right {
  opacity: 0;
  transform: translateX(40px);
  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-scale {
  opacity: 0;
  transform: scale(0.92);
  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-on-scroll.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }

/* Pulsing Beacons */
@keyframes pulseBeacon {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes pulseBeaconEmerald {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 184, 122, 0.6); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(0, 184, 122, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 184, 122, 0); }
}

@keyframes floatElement {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}