/* Anser Rossii Dashboard Styles */

/* Import base instrument styles */
@import url('./instruments/base/base-instrument.css');

/* Import individual instrument styles */
@import url('./instruments/altitude/altitude.css');
@import url('./instruments/airspeed/airspeed.css');
@import url('./instruments/pfd/pfd.css');
@import url('./instruments/propulsion/propulsion.css');
@import url('./instruments/hydrogen/hydrogen.css');
@import url('./instruments/battery/battery.css');
@import url('./instruments/groundspeed/groundspeed.css');
@import url('./instruments/vsi/vsi.css');
@import url('./instruments/airmap/airmap.css');

/* CSS Variables for Dashboard - Enhanced Spacing */
:root {
  /* Enhanced panel sizing for better content visibility */
  --panel-radius-x: 1200px;
  --panel-radius-y: 160px;
  --panel-height: clamp(280px, 32vh, 360px);

  /* Optimized instrument sizes */
  --pfd-diameter: clamp(130px, min(17vw, 25vh), 190px);
  --tape-height: clamp(140px, 20vw, 240px);
  --tape-width: clamp(65px, 7vw, 85px);
  --hsi-size: clamp(80px, 10vh, 120px);
  --widget-size: clamp(80px, 10vw, 110px);

  /* Enhanced spacing system with more internal padding */
  --instrument-padding: clamp(10px, 1.5vw, 16px);
  --grid-gap: clamp(8px, 1vw, 12px);
  --panel-padding: clamp(20px, 2.5vw, 32px);

  /* Navigation row height */
  --nav-row-height: clamp(40px, 5vh, 50px);

  /* Visual elements */
  --bezel: rgb(255 255 255 / 7%);
  --panel-bg: linear-gradient(180deg, rgb(5 5 16 / 90%), rgb(0 0 0 / 95%));
  --panel-noise: radial-gradient(
      rgb(255 255 255 / 1.5%),
      rgb(255 255 255 / 1.5%)
    )
    0 0/2px 2px;
  --edge-light: rgb(255 255 255 / 18%);
  --accent-soft: rgb(255 107 0 / 25%);
  --accent-strong: rgb(255 107 0 / 60%);
  --h2-wave-amp: 12px; /* base wave height */
  --tilt-x: 0; /* for micro parallax */
  --tilt-y: 0;
}

/* Dashboard Container */
.dashboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--panel-height);
  padding: 0;
  background: transparent;
  z-index: 100;

  /* Default visible state (no animation) */
  transform: translateY(0);
  opacity: 1;
}

/* Once animation completes, dashboard stays in place */
.dashboard.animation-complete {
  transform: translateY(0);
  opacity: 1;
}

/* Flying state - continuous vibration for stable flight (hover, cruise, max altitude) */
.dashboard.animation-complete.flying {
  animation: subtle-shake 1.1s ease-in-out infinite;
  transform: translateY(0); /* Base position for shake */
}

/* Takeoff impact - one-time shake */
.dashboard.animation-complete.takeoff-impact {
  animation: takeoff-shake 0.8s ease-out forwards;
  transform: translateY(0); /* Maintain base position */
}

/* Landing impact - one-time shake with more vertical movement */
.dashboard.animation-complete.landing-impact {
  animation: landing-shake 0.9s ease-out forwards;
  transform: translateY(0); /* Maintain base position */
}

/* No vibration during climb/descent for smooth vertical movement */
.dashboard.animation-complete.climbing,
.dashboard.animation-complete.descending {
  animation: none;
  transform: translateY(0); /* Maintain base position */
}

/* Prevent text selection on dashboard */
.dashboard,
.dashboard * {
  user-select: none;
}

/* Allow selection for screen reader only content */
.dashboard .sr-only {
  user-select: text;
}

/* Ripple Effect */
@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgb(255 255 255 / 50%);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

/* Additional dashboard styles */
.dashboard.ready {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dashboard-shell {
  /* Simplified positioning - removed absolute */
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative; /* Added for pseudo-element positioning */
}

/* Orange cockpit line effect - gives authentic cockpit feeling */
.dashboard-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; /* Position at top of dashboard */
  width: min(1380px, 92vw); /* Slightly smaller than panel */
  height: 160px; /* Match the panel's curve height */
  background: transparent;

  /* Create curved top border matching panel curve */
  border-top: 2px solid var(--accent);
  border-top-left-radius: 1200px 160px;
  border-top-right-radius: 1200px 160px;

  /* Gradient mask to fade edges */
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 10%,
    black 90%,
    transparent
  );

  /* Glow effect with subtle blur */
  filter: blur(0.5px) drop-shadow(0 0 8px rgb(255 107 0 / 50%))
    drop-shadow(0 0 20px rgb(255 149 0 / 30%));
  opacity: 0.54; /* 54% opacity for subtlety */
  pointer-events: none;
  z-index: 10; /* Above panel surface but below instruments */
}

.panel-surface {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(1400px, 94vw);
  height: 100%;

  /* Panel surface background - visible through transparent instruments
     Two-layer gradient:
     1. Radial: subtle white highlight at top (8% opacity fading to transparent)
     2. Linear: main dark gradient from blue-black (5 5 16) to pure black (0 0 0) */
  background:
    radial-gradient(
      180% 60% at 50% -10%,
      rgb(255 255 255 / 8%),
      transparent 40%
    ),
    linear-gradient(180deg, rgb(5 5 16 / 92%), rgb(0 0 0 / 96%));
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-top-left-radius: 1200px 160px;
  border-top-right-radius: 1200px 160px;
  box-shadow:
    0 -24px 60px rgb(255 107 0 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 6%),
    inset 0 -40px 80px rgb(0 0 0 / 50%);
  overflow: hidden;
  mask-image: radial-gradient(
    110% 120% at 50% 0%,
    #000 55%,
    transparent 100%
  ); /* Re-enabled for proper clipping */

  min-height: 280px;
  max-height: 90vh;
}

.panel-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 60% at 50% 0%,
    rgb(255 255 255 / 5%),
    transparent 60%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.panel-surface::after {
  /* boot sweep */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 12%),
    transparent
  );
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.panel-surface.boot::after {
  animation: boot-sweep 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes boot-sweep {
  0% {
    transform: translateX(-120%) skewX(-20deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(120%) skewX(-20deg);
    opacity: 0;
  }
}

.top-sheen {
  position: absolute;
  top: 4px;
  left: 10%;
  right: 10%;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 18%),
    rgb(255 255 255 / 2%)
  );
  filter: blur(0.5px);
  opacity: 0.35;
  pointer-events: none;
}

@keyframes subtle-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-0.6px);
  }

  75% {
    transform: translateX(0.6px);
  }
}

/* Takeoff/Landing impact shake - stronger one-time shake */
@keyframes takeoff-shake {
  0% {
    transform: translateY(0) translateX(0);
  }

  15% {
    transform: translateY(-2px) translateX(-1px);
  }

  30% {
    transform: translateY(1.5px) translateX(1.5px);
  }

  45% {
    transform: translateY(-1px) translateX(-0.5px);
  }

  60% {
    transform: translateY(0.5px) translateX(0.5px);
  }

  75% {
    transform: translateY(-0.3px) translateX(-0.3px);
  }

  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes landing-shake {
  0% {
    transform: translateY(0) translateX(0);
  }

  10% {
    transform: translateY(2.5px) translateX(-1px);
  }

  25% {
    transform: translateY(-1.5px) translateX(1px);
  }

  40% {
    transform: translateY(1px) translateX(-0.5px);
  }

  55% {
    transform: translateY(-0.5px) translateX(0.3px);
  }

  70% {
    transform: translateY(0.3px) translateX(-0.2px);
  }

  85% {
    transform: translateY(-0.2px) translateX(0.1px);
  }

  100% {
    transform: translateY(0) translateX(0);
  }
}

/* Ambient liquid orbs */
.ambient .orb {
  position: absolute;
  width: min(280px, 22vw);
  height: min(280px, 22vw);
  filter: blur(40px);
  opacity: 0.25;
  background:
    radial-gradient(circle at 40% 40%, rgb(0 255 255 / 35%), transparent 60%),
    radial-gradient(circle at 60% 60%, rgb(255 107 0 / 35%), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.ambient .left {
  bottom: 8%;
  left: 6%;
}

.ambient .right {
  bottom: 10%;
  right: 8%;
}

/* Ripple modernized */
.ripple {
  background: radial-gradient(
    circle at center,
    rgb(255 107 0 / 35%),
    rgb(255 255 255 / 40%) 60%,
    transparent 60%
  );
  filter: blur(0.5px);
}

/* Flying state: underglow pulse - only after animation complete */
.dashboard.animation-complete.flying .panel-surface {
  box-shadow:
    0 -24px 60px rgb(255 107 0 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 6%),
    inset 0 -40px 80px rgb(0 0 0 / 55%);
}

/* Flying state: increased orb opacity - DISABLED to prevent duplicate glow */

/* .dashboard.animation-complete.flying .ambient .orb {
  opacity: 0.33;
} */

/* Instrument grid base */
.instrument-grid {
  position: absolute;
  inset: 2px;
  display: grid;
  gap: var(--grid-gap);
  place-items: center center;
  box-sizing: border-box;
  contain: layout;
  overflow: visible; /* Allow navigation to show fully */
}

/* Desktop 9-column grid layout with new distribution */
@media (width > 1024px) {
  .instrument-grid {
    grid-template-columns: 2.5fr 15fr 10fr 10fr 25fr 7.5fr 12.5fr 15fr 2.5fr;
    grid-template-rows: 11fr 24fr 24fr 24fr 17fr; /* R1: 11fr, R2-R4: 24fr each, R5: 17fr */
    grid-template-areas:
      '. . . . . . . . .' /* R1: Empty top row */
      '. . engine engine pfd altitude airspeed . .' /* R2 */
      '. range battery hydrogen pfd altitude groundspeed airmap .' /* R3 */
      '. range battery hydrogen pfd altitude vsi airmap .' /* R4 */
      'nav nav nav nav nav nav nav nav nav'; /* R5 */

    padding: 0; /* No padding to ensure grid fits exactly */
    box-sizing: border-box;
  }
}

/* Tablet Layout (768px - 1024px) */
@media (width <= 1024px) and (width >= 768px) {
  .instrument-grid {
    grid-template-columns: 10fr 10fr 25fr 7.5fr 12.5fr; /* C3-C7 only */
    grid-template-rows: 11fr 22.66fr 22.66fr 22.68fr 21fr; /* R1: 11fr, R2-R4: adjusted, R5: 21fr */
    grid-template-areas:
      '. . . . .' /* R1: Empty */
      '. . pfd altitude airspeed' /* R2 */
      'battery hydrogen pfd altitude groundspeed' /* R3 */
      'battery hydrogen pfd altitude vsi' /* R4 */
      'nav nav nav nav nav'; /* R5 */
  }

  /* Hide instruments that don't fit in tablet layout */
  .range-dest,
  .engine-status,
  .minimap,
  .compass-hsi {
    display: none;
  }
}

/* Mobile Layout (< 768px) */
@media (width <= 767px) {
  .instrument-grid {
    grid-template-columns: 10fr 25fr 7.5fr; /* C4-C6 only */
    grid-template-rows: 11fr 24.66fr 24.66fr 24.68fr; /* No R5 */
    grid-template-areas:
      '. . .'
      '. pfd altitude'
      'battery pfd altitude'
      'hydrogen pfd altitude';
  }

  /* Hide columns not in mobile layout */
  .col-1,
  .col-2,
  .col-3,
  .col-7,
  .col-8,
  .col-9,
  .range-dest,
  .engine-status,
  .compass-hsi,
  .airspeed-bar,
  .groundspeed-wheel,
  .vsi,
  .minimap {
    display: none;
  }
}

/* Hide dashboard on very small viewports */
@media (height <= 650px) {
  .dashboard {
    display: none;
  }
}

/* Scrollbar styling for overflow cases */
.panel-surface::-webkit-scrollbar {
  width: 6px;
}

.panel-surface::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 5%);
}

.panel-surface::-webkit-scrollbar-thumb {
  background: rgb(255 107 0 / 30%);
  border-radius: 3px;
}

/* Reduced motion: tone down */
@media (prefers-reduced-motion: reduce) {
  .panel-surface.boot::after,
  .capsule .wave,
  .pill .fill::after,
  .bubble,
  .dashboard.animation-complete.flying,
  .dashboard.animation-complete.flying .instrument {
    animation: none;
  }

  .panel-surface.boot::after {
    opacity: 0;
  }
}

@media print {
  .dashboard {
    display: none;
  }
}