/* Custom styles for Boeing 787-9 Vietnam Airlines interactive website - Ultra Smooth 60FPS */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --vna-teal-dark: #004d4f;
  --vna-teal-medium: #005f63;
  --vna-teal-light: #008286;
  --vna-gold: #c59b27;
  --vna-gold-light: #dfb94c;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #0b0f19;
  color: #f8fafc;
  overflow-x: hidden;
  position: relative;
}

/* Hardware accelerated background */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 20%, rgba(0, 95, 99, 0.15), transparent 70%),
              radial-gradient(circle at 80% 80%, rgba(197, 155, 39, 0.08), transparent 60%),
              #070b14;
  z-index: -2;
  pointer-events: none;
  transform: translateZ(0);
}

/* Glow effects for interactive elements */
.glow-teal {
  box-shadow: 0 0 20px rgba(0, 130, 134, 0.45);
}

.glow-gold {
  box-shadow: 0 0 20px rgba(197, 155, 39, 0.55);
}

/* Aircraft hotspots pulsing animation - Hardware Accelerated */
@keyframes pulse-ring {
  0% {
    transform: scale(0.6) translateZ(0);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: scale(2.4) translateZ(0);
    opacity: 0;
  }
}

.hotspot {
  transform: translateZ(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.hotspot:hover {
  transform: scale(1.25) translateZ(0);
}

.hotspot.active-hotspot {
  transform: scale(1.3) translateZ(0);
}

.hotspot-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--vna-gold);
  animation: pulse-ring 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #070b14;
}

::-webkit-scrollbar-thumb {
  background: var(--vna-teal-medium);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vna-teal-light);
}

/* Smooth Card Crossfade Transition */
.card-content-wrap {
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: opacity, transform;
}

.card-fade-out {
  opacity: 0;
  transform: translateY(6px);
}

.card-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth Tab Transitions */
.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Quick Filter Pills for Components */
.comp-pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.comp-pill:hover {
  transform: translateY(-2px);
}

.comp-pill.active {
  background: linear-gradient(135deg, #008286, #005f63);
  color: #ffffff;
  border-color: #dfb94c;
  box-shadow: 0 4px 14px rgba(0, 130, 134, 0.4);
  transform: translateY(-2px);
}

/* =========================================================
   FLIGHT CONTROLS & DYNAMICS LAB STYLES
   ========================================================= */

/* Cockpit Bezel Panels */
.cockpit-bezel {
  background: linear-gradient(145deg, #111827, #0b0f19);
  border: 1px solid #1f2937;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.03), 0 15px 35px rgba(0, 0, 0, 0.7);
}

.cockpit-screen {
  background-color: #030712;
  border: 1px solid #1f2937;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9);
}

/* B787 Landing Gear Annunciator Lights */
.annunciator-light {
  transition: all 0.2s ease-in-out;
}

.light-down-green {
  background-color: #10b981;
  color: #064e3b;
  box-shadow: 0 0 14px #10b981, inset 0 0 4px #a7f3d0;
  border-color: #34d399;
}

.light-transit-amber {
  background-color: #f59e0b;
  color: #78350f;
  box-shadow: 0 0 16px #f59e0b, inset 0 0 4px #fde68a;
  border-color: #fbbf24;
  animation: amber-blink 0.4s infinite alternate;
}

.light-extinguished {
  background-color: #1e293b;
  color: #475569;
  border-color: #334155;
  box-shadow: none;
}

@keyframes amber-blink {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

/* Landing Gear Dynamic Kinematic Schematic */
.gear-door-left, .gear-door-right {
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-gear-assembly {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wing Flap Fowler Surface Movement */
.flap-surface-elem {
  transform-origin: 435px 145px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Wing Spoilers Deflection Plate */
.spoiler-surface-elem {
  transform-origin: 360px 125px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rudder Deflection Plate */
.rudder-surface-elem {
  transform-origin: 220px 220px;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}