/**
 * stn-market-conditions.css — the Market Conditions arrival overlay and chip.
 *
 * Design doc: docs/superpowers/specs/2026-08-27-market-conditions-site-overlay-design.md
 *
 * BRAND (STN Brand and Editorial Standards v1.2):
 *   §3      Blue #4AA3D5, the grey ramp, white. Amber #F59E0B on the storm
 *           flash only. NO green, NO red: those are product semantics and are
 *           banned in marketing layouts (§3.2), which this is.
 *   "Where energy comes from" — NO backdrop-filter anywhere in this file. Fog
 *           is a flat scrim (§6's sanctioned veiling device), never a blur.
 *   §5      Radii 6px on cards; pills are permitted for badges, which the chip
 *           is. Shadows subtle at rest, one step up on hover. Hover lifts 1px.
 *   §5.1    Easing is cubic-bezier(.22,.61,.36,1) EVERYWHERE in this file, and
 *           nothing overshoots. The overlay's 1.8s duration is the sanctioned
 *           exception (see the JS header); its easing is not. Bouncier easing
 *           remains the bird's alone.
 *
 * Every animated property is transform or opacity, so the whole effect stays on
 * the compositor and never triggers layout.
 */

:root {
  --stn-mc-blue: #4AA3D5;
  --stn-mc-blue-deep: #2A78A8;
  --stn-mc-cloud: #DDE4EC;
  --stn-mc-cloud-dim: #8FA0B4;
  --stn-mc-panel: #1D2530;
  --stn-mc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Overlay ───────────────────────────────────────────────────────────────
   pointer-events:none is load-bearing: the site is fully interactive from the
   first frame. This is decoration, never a gate. */

.stn-mc-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  transform-origin: var(--stn-mc-origin-x, 50%) var(--stn-mc-origin-y, 50%);
  animation: stn-mc-life var(--stn-mc-life, 1800ms) var(--stn-mc-ease) 1 both;
}

/* 21.111% = 380/1800 (fade in). 77.778% = 1400/1800 (start converging). */
@keyframes stn-mc-life {
  0%      { opacity: 0; transform: scale(1); }
  21.111% { opacity: 1; transform: scale(1); }
  77.778% { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(.965); }
}

.stn-mc-overlay > * {
  position: absolute;
  inset: 0;
}

/* ── tint: flat wash. `lift` brightens (white), `dim` darkens (dark panel). ── */
.stn-mc-tint { will-change: opacity; }

/* ── scrim: the brand's veiling device (§6). Flat, never blurred. ─────────── */
.stn-mc-scrim { will-change: opacity; }

/* ── sun: the badge's own glyph, scaled up, arcing across the top. ─────────
   Placed AFTER `.stn-mc-overlay > *` on purpose: that rule and this one have
   equal specificity, so source order is what lets `inset: auto` win back the
   corner positioning from its `inset: 0`. */
.stn-mc-sun {
  inset: auto;
  left: 0;
  top: var(--stn-mc-sun-top, 16%);
  width: var(--stn-mc-sun-size, 180px);
  height: var(--stn-mc-sun-size, 180px);
  margin-left: calc(var(--stn-mc-sun-size, 180px) * -0.5);
  margin-top: calc(var(--stn-mc-sun-size, 180px) * -0.5);
  animation: stn-mc-sun-arc var(--stn-mc-life, 1800ms) linear 1 both;
  will-change: transform;
}

.stn-mc-sun > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A shallow arc, not a straight slide: the apex at midpoint is what reads as
   the sun crossing the sky rather than a disc sliding along a rail. */
@keyframes stn-mc-sun-arc {
  0%   { transform: translate3d(-25vw, 0, 0); }
  50%  { transform: translate3d(50vw, calc(var(--stn-mc-sun-rise, 28px) * -1), 0); }
  100% { transform: translate3d(125vw, 0, 0); }
}

/* ── light: the "sun". A blue-white sweep, never a yellow disc (§3). ─────── */
.stn-mc-light {
  /* A narrow shaft, not a wash. The band spans ~32% of the layer rather than
     ~44%, and the layer is only modestly oversized: at -60% inset it measured
     2783px wide on an 800px viewport, which parked the bright core off-screen
     for most of the sweep and left behind an even veil that read as lost
     contrast rather than as light. */
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(74, 163, 213, calc(var(--stn-mc-light-strength, 1) * .20)) 44%,
    rgba(255, 255, 255, calc(var(--stn-mc-light-strength, 1) * .72)) 50%,
    rgba(74, 163, 213, calc(var(--stn-mc-light-strength, 1) * .20)) 56%,
    rgba(255, 255, 255, 0) 66%
  );
  inset: -18% -22%;
  animation: stn-mc-sweep var(--stn-mc-light-dur, 1800ms) var(--stn-mc-ease) 1 both;
  will-change: transform;
}

@keyframes stn-mc-sweep {
  from { transform: translate3d(-30%, -10%, 0); }
  to   { transform: translate3d(30%, 10%, 0); }
}

/* ── drift: soft grey masses crossing the viewport. Cloud and wind. ──────── */
.stn-mc-drift > span {
  position: absolute;
  left: 0;
  width: 62vw;
  height: 34vh;
  background: radial-gradient(
    ellipse at center,
    var(--stn-mc-cloud-dim) 0%,
    rgba(143, 160, 180, .55) 46%,
    rgba(143, 160, 180, 0) 72%
  );
  animation: stn-mc-drift-move var(--stn-mc-blob-dur, 2600ms) linear var(--stn-mc-blob-delay, 0ms) 1 both;
  will-change: transform;
}

/* Wind reads as speed, so its masses are flatter and longer. */
.stn-mc-drift > span.stn-mc-drift__streak {
  height: 12vh;
  width: 78vw;
  background: linear-gradient(
    90deg,
    rgba(143, 160, 180, 0) 0%,
    rgba(143, 160, 180, .70) 42%,
    rgba(221, 228, 236, .55) 58%,
    rgba(143, 160, 180, 0) 100%
  );
}

@keyframes stn-mc-drift-move {
  from { transform: translate3d(-70vw, 0, 0) scale(var(--stn-mc-blob-scale, 1)); }
  to   { transform: translate3d(105vw, 0, 0) scale(var(--stn-mc-blob-scale, 1)); }
}

/* ── precip: strokes on the badge's own rake angle, or flakes. One pass. ─── */
.stn-mc-precip {
  width: 100%;
  height: 100%;
}

.stn-mc-precip > * {
  animation: stn-mc-fall var(--stn-mc-life, 1800ms) linear 1 both;
  will-change: transform;
}

/* 112 user units carries a stroke from above the top edge to past the bottom;
   preserveAspectRatio="none" maps the 100-unit box onto the viewport, so this
   is "off the bottom" at every screen size. */
@keyframes stn-mc-fall {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--stn-mc-fall-drift, 0) * 1px), var(--stn-mc-fall-dist, 40px), 0); }
}

/* ── flash: one amber bloom. Thunderstorm only (§3's breaking-news flag). ── */
.stn-mc-flash {
  opacity: 0;
  animation: stn-mc-flash-once 220ms var(--stn-mc-flash-at, 900ms) 1 both;
  will-change: opacity;
}

@keyframes stn-mc-flash-once {
  0%   { opacity: 0; }
  22%  { opacity: var(--stn-mc-flash-alpha, .22); }
  100% { opacity: 0; }
}

/* ── Chip ──────────────────────────────────────────────────────────────────
   A pill (§5 permits pills for badges) on the brand's dark panel. The tile is
   NOT decorative: the forecast glyphs are drawn for a dark header and their
   greys run light, so on white they are near-invisible. Same reason the
   widget's composer puts its swatch grid on a dark tile. */

.stn-mc-chip {
  position: fixed;
  z-index: 999998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: var(--stn-mc-panel);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 2px 10px rgba(29, 37, 48, .22);
  text-decoration: none;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition:
    transform 180ms var(--stn-mc-ease),
    box-shadow 180ms var(--stn-mc-ease);
}

.stn-mc-chip[data-position="bottom-left"]  { bottom: 20px; left: 20px; }
.stn-mc-chip[data-position="bottom-right"] { bottom: 20px; right: 20px; }
.stn-mc-chip[data-position="top-left"]     { top: 20px; left: 20px; }
.stn-mc-chip[data-position="top-right"]    { top: 20px; right: 20px; }

/* §5: cards lift 1px on hover, one step up on the shadow. Nothing more. */
.stn-mc-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(29, 37, 48, .28);
}

.stn-mc-chip:focus-visible {
  outline: 2px solid var(--stn-mc-blue);
  outline-offset: 2px;
}

.stn-mc-chip__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.stn-mc-chip__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

/* §4's documented eyebrow: Open Sans 700, 12px, caps, +0.14em, blue. */
.stn-mc-chip__eyebrow {
  color: var(--stn-mc-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stn-mc-chip__label {
  overflow: hidden;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The handoff: one pulse, 320ms, inside §5.1's envelope. Scales to 1.04 and
   returns; it does not overshoot past its rest state. */
.stn-mc-chip.is-pulsing {
  animation: stn-mc-pulse 320ms var(--stn-mc-ease) 1 both;
}

@keyframes stn-mc-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(29, 37, 48, .22), 0 0 0 0 rgba(74, 163, 213, .55);
  }
  55% {
    transform: scale(1.04);
    box-shadow: 0 4px 18px rgba(29, 37, 48, .30), 0 0 0 12px rgba(74, 163, 213, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(29, 37, 48, .22), 0 0 0 0 rgba(74, 163, 213, 0);
  }
}

/* Reduced motion gets the information without the motion: a standing ring
   instead of a pulse. The JS already skips the overlay entirely. */
.stn-mc-chip.is-static-highlight {
  box-shadow: 0 2px 10px rgba(29, 37, 48, .22), 0 0 0 2px rgba(74, 163, 213, .55);
}

@media (max-width: 480px) {
  .stn-mc-chip { padding: 8px 14px 8px 10px; }
  .stn-mc-chip__label { font-size: 14px; }
  .stn-mc-chip[data-position="bottom-left"],
  .stn-mc-chip[data-position="bottom-right"] { bottom: 14px; }
  .stn-mc-chip[data-position="bottom-left"]  { left: 14px; }
  .stn-mc-chip[data-position="bottom-right"] { right: 14px; }
}

/* Belt and braces. The script already declines to build the overlay under
   reduced motion; this guarantees it even if markup arrives another way. */
@media (prefers-reduced-motion: reduce) {
  .stn-mc-overlay { display: none !important; }
  .stn-mc-chip,
  .stn-mc-chip.is-pulsing { animation: none !important; transition: none !important; }
  .stn-mc-chip:hover { transform: none; }
}