/* Desk overlay — brand-slot flyover, brief in every card, RSS label retired.
   Loaded after the station bundle; it only adds behaviour, never rebuilds the page. */

:root {
  --desk-ease: cubic-bezier(.66, 0, .22, 1);
  --desk-ink: #f2ede2;
  --desk-dim: #93aebc;
  --desk-rule: rgba(242, 237, 226, .16);
}

/* ---------- the plane now lives in the logo slot ---------- */

.on-air-brand .brand { position: relative; }

.logo-plane {
  position: absolute;
  left: -40px;
  top: 10px;
  width: 125px;
  height: 40px;
  z-index: 1;                 /* behind the masthead type, in the logo slot */
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}

.on-air-brand .mns-logo {
  transition: opacity .32s var(--desk-ease),
              transform .85s var(--desk-ease),
              filter .32s var(--desk-ease);
}

/* plane enters: the mark dissolves into a soft afterglow */
.on-air-brand.is-flying .mns-logo {
  opacity: 0;
  transform: rotate(12deg) scale(.86);
  filter: blur(1.5px);
}

/* the wordmark swaps to the flight, and stays above the silhouette */
.brand-wordmark {
  position: relative;
  z-index: 3;
}

.brand-wordmark .normal-wordmark {
  transition: opacity .28s var(--desk-ease), transform .45s var(--desk-ease);
}

.on-air-brand.is-flying .brand-wordmark .normal-wordmark {
  opacity: 0;
  transform: translateY(-6px);
}

.brand-wordmark .flight-wordmark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--desk-ease) .12s, transform .5s var(--desk-ease) .12s;
  pointer-events: none;
}

.on-air-brand.is-flying .brand-wordmark .flight-wordmark {
  opacity: 1;
  transform: translateY(0);
}

.brand-wordmark .flight-wordmark .callsign {
  font-family: "Desk Condensed", system-ui, sans-serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--desk-ink);
}

.brand-wordmark .flight-wordmark .route {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--desk-dim);
}

/* the crossing itself, same motion language as the footer radar */
@keyframes desk-logo-cross {
  0%   { transform: translate3d(0, 2px, 0) scale(.62) rotate(-1deg); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate3d(96px, -4px, 0) scale(.62) rotate(-1deg); opacity: 0; }
}

@keyframes desk-logo-cross-left {
  0%   { transform: translate3d(0, 2px, 0) scale(-.62, .62) rotate(1deg); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate3d(-96px, -4px, 0) scale(-.62, .62) rotate(1deg); opacity: 0; }
}

.on-air-brand.is-flying .logo-plane {
  animation: desk-logo-cross 2.5s linear both;
}

.on-air-brand.is-flying.from-right .logo-plane {
  left: auto;
  right: -46px;
  animation-name: desk-logo-cross-left;
}

/* a hairline wake under the brand while the plane is overhead */
.on-air-brand .brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--desk-rule), transparent);
  transition: width .4s var(--desk-ease);
}

.on-air-brand.is-flying .brand::after { width: 100%; }

/* ---------- brief under every headline ---------- */

.desk-brief {
  margin: 10px 0 0;
  max-width: 62ch;
  font-family: "Desk UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.52;
  color: rgba(242, 237, 226, .82);
  border-left: 2px solid rgba(242, 237, 226, .18);
  padding-left: 12px;
}

.photo-card-copy .card-eyebrow .desk-lane {
  color: var(--desk-dim);
  letter-spacing: .14em;
}

/* ---------- reduced motion: no travel, just a state change ---------- */

@media (prefers-reduced-motion: reduce) {
  .on-air-brand.is-flying .logo-plane {
    animation: none;
    opacity: 1;
    left: 148px;
    right: auto;
  }
  .brand-wordmark .flight-wordmark {
    transition-duration: .01s;
  }
}