/* ── Promo feature banner — a rotating spotlight card sitting just below
   the sponsor #promo-strip at the top-middle of the map. Own file, own
   component: nothing here touches promo-strip's own rules in adspace.css.

   Bigger on desktop (more open space to work with), more compact on
   mobile — see the max-width:768px override at the bottom. ── */

#promo-feature-banner {
  position: absolute;
  z-index: 480; /* just under #promo-strip/#match-countdown's 500, above the map */
  top: 86px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 420px;
  max-width: calc(100vw - 32px);
  /* Solid fallback first, then a 90%-opacity version (10% see-through) for
     browsers that support color-mix — same theme variable either way, so
     it still tracks light/dark theme correctly. */
  background: var(--bg-card);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  padding: 18px 26px 14px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* --vortex-total-ms is set inline by the JS to match the tile vortex's
     own total duration exactly, so the frame and the content always
     start and finish fading together rather than one lagging the other. */
  transition: opacity 0.35s ease, transform 0.35s ease,
              background-color var(--vortex-total-ms, 3s) ease,
              border-color var(--vortex-total-ms, 3s) ease,
              box-shadow var(--vortex-total-ms, 3s) ease;
}

#promo-feature-banner.promo-feature-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

/* The card frame itself — hidden during the empty gap between one card's
   vortex-out finishing and the next one's vortex-in starting, so there's
   no floating empty box sitting on the map with nothing inside it. Only
   the chrome fades; the container's position/size don't move, so nothing
   jumps when content reappears. */
#promo-feature-banner.promo-feature-chrome-hidden {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

#promo-feature-banner:hover {
  border-color: var(--accent);
}

.promo-feature-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 64px;
  justify-content: center;
}

/* Positioning context for the tile overlay — no padding/border of its own,
   so a tile's (left, top) computed in JS lines up exactly with the real
   content sitting at (0, 0) inside it. `perspective` gives the vortex's
   rotateX/rotateY tilts an actual vanishing point to tumble around. */
.promo-feature-stage {
  position: relative;
  perspective: 900px;
}

.promo-feature-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.54rem; /* was 0.68rem — reduced 20% */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 3px 12px;
}

.promo-feature-headline {
  font-size: 0.71rem; /* was 1.02rem — reduced 30% */
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.promo-feature-headline strong {
  font-weight: 800;
}

.promo-feature-hint {
  font-size: 0.56rem; /* was 0.7rem — reduced 20% */
  font-style: italic;
  color: var(--text-secondary);
}

/* ── Shatter tile overlay — built and torn down by the JS on every card
   change. Sits directly over .promo-feature-body (which is hidden, not
   removed, while tiles are on screen) at pixel-identical coordinates. ── */

.promo-feature-tiles {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.promo-feature-tile {
  position: absolute;
  overflow: hidden;
  will-change: transform, opacity;
}

/* Each tile holds a full-size clone of the card, pulled back by its own
   cell offset — a sprite-crop, so the tile shows exactly its own slice. */
.promo-feature-tile-inner {
  position: absolute;
}

/* Exit — transitions to the inline `transform`/`opacity` the JS sets right
   after adding this class (each tile's own vortex-collapse target: pulled
   toward the card's center, spinning, tumbling in 3D, scaled to nothing).
   620ms below must match TILE_ANIM_MS in promo-feature-banner.js. */
.promo-feature-tile.tile-exit {
  transition: transform 620ms cubic-bezier(.55, 0, .85, .35),
              opacity 520ms ease-in;
}

/* Enter — JS adds 'tile-enter-start' with an inline transform identical in
   shape to the exit target (tile begins already collapsed into the
   vortex), with no transition so it snaps there instantly. A frame later
   it swaps to 'tile-enter-end' and clears the inline transform/opacity,
   falling back to this class's resting values — so the browser actually
   animates the release outward to normal position.
   620ms below must match TILE_ANIM_MS in promo-feature-banner.js. */
.promo-feature-tile.tile-enter-start {
  transition: none;
}

.promo-feature-tile.tile-enter-end {
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1),
              opacity 460ms ease-out;
  transform: translate(0, 0) rotate(0deg) rotateX(0) rotateY(0) scale(1);
  opacity: 1;
}

body.light-theme #promo-feature-banner {
  background: var(--bg-card);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  border-color: var(--border);
}

/* Without this, the rule above (body.light-theme #promo-feature-banner)
   actually out-specifies #promo-feature-banner.promo-feature-chrome-hidden
   on its own — both have 1 id + 1 class, but the light-theme rule also
   carries a type selector (`body`), which wins that tie. The practical
   effect was the chrome fade working correctly in dark mode but never
   actually going transparent in light mode. This rule matches that same
   id+class+type shape (with chrome-hidden added as a second class) so it
   always wins over the plain light-theme rule above, in both themes. */
body.light-theme #promo-feature-banner.promo-feature-chrome-hidden {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── Mobile — the original span (left:60px, matching the side-cards'
   inset, out to right:12px near the screen edge) was the full available
   room, but the banner filling all of it read too wide. Now it only
   takes 80% of that same span, centered within it — so both edges pull
   in symmetrically rather than the banner just being left-aligned and
   shorter. ── */
@media (max-width: 768px) {
  #promo-feature-banner {
    top: 68px;
    left: calc(60px + (100vw - 72px) * 0.1);  /* 60px inset + half of the 20% trimmed off */
    width: calc((100vw - 72px) * 0.8);          /* 80% of the original 60px→(100vw-12px) span */
    right: auto;
    transform: translateY(-8px);
    max-width: none;
    padding: 13px 18px 10px;
    border-radius: 13px;
  }

  #promo-feature-banner.promo-feature-visible {
    transform: translateY(0);
  }

  .promo-feature-body {
    min-height: 52px;
    gap: 4px;
  }

  .promo-feature-eyebrow {
    font-size: 0.48rem; /* was 0.6rem — reduced 20% */
    padding: 2px 9px;
  }

  .promo-feature-headline {
    font-size: 0.57rem; /* was 0.82rem — reduced 30% */
    line-height: 1.35;
  }

  .promo-feature-hint {
    font-size: 0.5rem; /* was 0.62rem — reduced 20% */
  }
}