/* EA3SPAIN orbital background and glass surfaces: visual layer only. */
html { background: #020914; }

body {
  background: #020914 url("../img/ea3spain-earth-orbit-3840x2160.png") left 100% / 110% auto fixed !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: -20;
  inset: 0;
  pointer-events: none;
  background: #020914 url("../img/ea3spain-earth-orbit-3840x2160.png") left 100% / 110% auto no-repeat;
}

.fixed.inset-0.-z-10 { background: transparent !important; pointer-events: none; }
.fixed.inset-0.-z-10 > div { display: none !important; }

.card-glossy {
  background: rgba(5, 27, 56, 0.81) !important;
  border-color: rgba(163, 214, 255, 0.23) !important;
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
}

.card-glossy:hover { background: rgba(7, 34, 68, 0.84) !important; }

@media (max-width: 767px) {
  body { background-attachment: scroll !important; }
  body::before { background-position: 57% center; }
}

/* Adjust 3: preserve the two-level blue glass hierarchy. */
.card-glossy { background: rgba(5, 27, 56, 0.77) !important; }
.card-glossy:hover { background: rgba(7, 34, 68, 0.80) !important; }

.dash-table-panel,
.table-glossy thead,
.sdr-ea3-panel,
.ea3-network-status-block,
.ea3-bridge-row,
.ea3-last-qso,
.ea3-last-qso-metrics div,
.ea3-weekly-block,
.ea3-live-activity,
.ea3-live-pulse {
  background: rgba(20, 70, 118, 0.58) !important;
  border-color: rgba(163, 214, 255, 0.20) !important;
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
}

/* Single global orbital background: never tile or scroll with page content. */
body {
  isolation: isolate;
  background: transparent !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-attachment: initial !important;
}

body::before {
  z-index: -1;
  background-color: #020914;
  background-image: url("../img/ea3spain-earth-orbit-3840x2160.png");
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: cover;
  background-attachment: fixed;
}

@media (max-width: 767px) {
  body { background: transparent !important; background-image: none !important; background-attachment: initial !important; }
  body::before { background-position: left 100%; background-size: cover; background-repeat: no-repeat; }
}

/* Mobile-only stacking: keep one viewport-fixed orbital layer visible through scroll. */
@media (max-width: 767px) {
  body::before {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    z-index: 0;
    background-image: url("../img/ea3spain-earth-orbit-3840x2160.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left 100%;
    pointer-events: none;
  }
  body > .container {
    position: relative;
    z-index: 1;
  }
}

/* Mobile final: dedicated viewport background, independent of body pseudo-elements. */
.ea3spain-earth-bg { display: none; }
@media (max-width: 767px) {
  body::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
  .ea3spain-earth-bg {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    z-index: 0;
    pointer-events: none;
    background-image: url("../img/ea3spain-earth-orbit-3840x2160.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  body > .container {
    position: relative;
    z-index: 1;
  }
}

/* Adjust 4: lighter glass and raised orbital framing. */
.card-glossy { background: rgba(5, 27, 56, 0.73) !important; }
.dash-table-panel,
.table-glossy thead,
.sdr-ea3-panel,
.ea3-network-status-block,
.ea3-bridge-row,
.ea3-last-qso,
.ea3-last-qso-metrics div,
.ea3-weekly-block,
.ea3-live-activity,
.ea3-live-pulse { background: rgba(20, 70, 118, 0.54) !important; }
body::before { background-position: left 100%; background-size: 135% auto; }
@media (max-width: 767px) {
  .ea3spain-earth-bg { background-position: left 100%; background-size: auto 135%; }
}

/* Reframe: 110% scale, leftward and high orbital composition. */
body::before { background-position: 15% 100%; background-size: 110% auto; }
@media (max-width: 767px) {
  .ea3spain-earth-bg { background-position: 15% 100%; background-size: auto 110%; }
}

/* Adjust 5: lighter two-tier glass and further left orbital frame. */
.card-glossy { background: rgba(5, 27, 56, 0.69) !important; }
.dash-table-panel,
.table-glossy thead,
.sdr-ea3-panel,
.ea3-network-status-block,
.ea3-bridge-row,
.ea3-last-qso,
.ea3-last-qso-metrics div,
.ea3-weekly-block,
.ea3-live-activity,
.ea3-live-pulse { background: rgba(20, 70, 118, 0.50) !important; }
body::before { background-position: 30% 100%; }
@media (max-width: 767px) {
  .ea3spain-earth-bg { background-position: 30% 100%; }
}

/* Transparency-only adjustment. */
.card-glossy { background: rgba(5, 27, 56, 0.65) !important; }
.dash-table-panel,
.table-glossy thead,
.sdr-ea3-panel,
.ea3-network-status-block,
.ea3-bridge-row,
.ea3-last-qso,
.ea3-last-qso-metrics div,
.ea3-weekly-block,
.ea3-live-activity,
.ea3-live-pulse { background: rgba(20, 70, 118, 0) !important; }

/* Portrait-only orbital lift. */
@media (max-width: 767px) and (orientation: portrait) {
  .ea3spain-earth-bg { background-position: 30% 115%; }
}

/* Desktop-only orbital shift. */
@media (min-width: 768px) {
  body::before { background-position: 45% 105%; }
}