/* Performance overrides - loaded after components.css / layout.css so they win
   on equal specificity. Two layers:

   1. Always on. Things that cost GPU time on every scroll frame and look the
      same without it.
   2. html.m3-lite (js/perf-boost.js: Ajustes > Rendimiento, or picked
      automatically on devices that struggle). Trades the glass look for speed. */

/* --- 1. Always on --------------------------------------------------------- */

/* backdrop-filter re-samples and blurs whatever is behind the element on every
   frame it moves - and it moves whenever the page scrolls. These sit on the
   plain page background (or are >=75% opaque), where blurring shows nothing,
   yet a list had one per card: 48 launch cards, 182 stages, 24 astronauts x3. */
/* Global zero-blur and zero heavy filters for maximum 60fps rendering performance */
*,
*::before,
*::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-filter: none !important;
  filter: none !important;
}

img.m3-invert-on-dark,
.m3-icon-invert-dark {
  -webkit-filter: invert(1) !important;
  filter: invert(1) !important;
}

/* translateZ(0) + backface-visibility gave every card its own GPU texture. */
.m3-card,
.m3-launch-card,
.m3-rocket-card,
.m3-astronaut-card,
.m3-event-card {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* Rendimiento fluido sin saltos de layout ni pantallas negras (CLS = 0) */
.m3-launch-card,
.m3-rocket-card,
.m3-astronaut-card,
.m3-event-card {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

.m3-launch-card .m3-card-img-wrap,
.m3-rocket-card .m3-card-img-wrap {
  aspect-ratio: 16 / 9;
  min-height: 180px;
  background: #0f1523;
}

/* Ocultar píldoras de clima no deseadas */
.m3-card-weather-chip,
.m3-weather-chip,
.m3-detail-weather-pill,
[class*="weather-chip"],
[class*="weather-pill"] {
  display: none !important;
}

/* Evitar solapamiento de badges en el mapa de lanzamiento sobre móvil */
@media (max-width: 640px) {
  .m3-pad-heading-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 8px 12px 4px 12px !important;
    z-index: 2 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    max-width: calc(100% - 24px) !important;
  }
  .m3-pad-legend-badge {
    display: none !important;
  }
}

#m3-view-container {
  contain: layout style;
}

/* contain:layout turns this element into the containing block for any
   position:fixed descendant (same effect as transform/filter) - the Recap's
   full-screen story viewer (#m3-stories-viewer, position:fixed;inset:0) sizes
   itself against THIS box instead of the viewport, collapses to its own
   height (0, since the viewer is its only content and is now out of normal
   flow) and renders invisible instead of covering the screen. Dropping
   containment while that overlay is mounted restores the viewport as the
   containing block, same as before this file existed. */
#m3-view-container:has(#m3-stories-viewer) {
  contain: none;
}

html, body {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px), (hover: none) {
  .m3-card,
  .m3-launch-card,
  .m3-rocket-card,
  .m3-astronaut-card,
  .m3-event-card,
  .m3-top-app-bar,
  .m3-top-app-bar.scrolled,
  .m3-dock,
  .m3-window-widget,
  .m3-detail-back-bar,
  .m3-pure-liquid-glass,
  .m3-dock-search-pill,
  .m3-dock-search-results {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .m3-card,
  .m3-launch-card,
  .m3-rocket-card,
  .m3-astronaut-card,
  .m3-event-card {
    background: #111726 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  }
  .m3-dock {
    background: #111726 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  }
  .m3-top-app-bar,
  .m3-top-app-bar.scrolled {
    background: #0e121c !important;
  }
}

/* The countdown digits animate through their inner strips, not this box. */
.m3-countdown-box-val {
  will-change: auto;
}

/* --- 2. Lite mode --------------------------------------------------------- */

/* No backdrop blur anywhere. */
html.m3-lite *,
html.m3-lite *::before,
html.m3-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The panels that relied on the blur to stay readable get a solid background. */
html.m3-lite .m3-dock,
html.m3-lite .m3-top-app-bar.scrolled .m3-app-bar-inner {
  background: rgba(16, 21, 34, 0.97);
}

html.m3-lite .m3-dialog,
html.m3-lite .m3-settings-dialog,
html.m3-lite .m3-astronaut-detail-card,
html.m3-lite .m3-recap-banner,
html.m3-lite .m3-pure-liquid-glass {
  background: rgba(18, 23, 34, 0.98) !important;
}

html.m3-lite .m3-countdown-box,
html.m3-lite .m3-rocket-overlay-card,
html.m3-lite .m3-map-layer-toggle,
html.m3-lite .m3-map-trajectory-pill {
  background: rgba(12, 16, 26, 0.9);
}

html.m3-lite .m3-hero-meta-pill,
html.m3-lite .m3-hero-operator-badge,
html.m3-lite .m3-btn-glass {
  background: rgba(10, 14, 24, 0.6);
}

/* Big soft shadows are expensive to rasterise and invisible on the dark page. */
html.m3-lite .m3-card,
html.m3-lite .m3-launch-card,
html.m3-lite .m3-rocket-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Decorative loops that repaint forever (the LIVE dot is kept). */
html.m3-lite .m3-beacon-pulse,
html.m3-lite .m3-beacon-beam,
html.m3-lite .m3-pulse-icon,
html.m3-lite .m3-story-orbit-satellite {
  animation: none !important;
}

/* --- Toast shown when the device is switched to lite automatically ------- */

.m3-perf-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3000;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(18, 24, 38, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--sys-color-on-surface, #e2e2e9);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}