/* depot — page styles. Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  /* ── Vehicle depot (profile): a hangar scene. The scene is game art and looks the same in both themes;
     .depot-in pins data-theme="dark", so the tokens of its texts, buttons and dossier resolve dark too. ── */
  .depot { padding: 0; overflow: hidden; }
  .depot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .depot-in { color: var(--text); background: #141615; }
  /* The bay's steel header. */
  .depot-head { align-items: center; margin: 0; padding: var(--sp-4) var(--sp-6);
    background: linear-gradient(180deg, #2a2c2a, #1b1d1c); border-bottom: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
  /* The hangar floor under the pad and the dossier: worn concrete, panel seams, light falloff. */
  .depot-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 440px; overflow: hidden;
    background:
      radial-gradient(ellipse 50% 60% at 33% 46%, rgba(255, 240, 200, .10), transparent 70%),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 160px),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 160px),
      radial-gradient(ellipse at 33% 45%, #4a4c47, #2c2e2b 60%, #161716); }
  .depot-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(0, 0, 0, .75); }
  .depot-body .hazard { position: absolute; left: 0; right: 0; top: 0; height: 10px; opacity: .55;
    background: repeating-linear-gradient(135deg, #e3b505 0 14px, #161616 14px 28px); }
  .hangar { position: relative; min-height: 440px; }
  .vent { position: absolute; width: 70px; height: 26px; border-radius: 4px; background: repeating-linear-gradient(90deg, #1b1c1b 0 4px, #3a3c38 4px 7px); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
  .vent.v1 { right: 22px; top: 34px; }
  .vent.v2 { left: 30px; bottom: 96px; width: 52px; }
  .cable { position: absolute; right: -40px; bottom: 30px; width: 220px; height: 120px; border: 4px solid #121312; border-color: #121312 transparent transparent transparent; border-radius: 50%; transform: rotate(-12deg); opacity: .8; }
  /* The landing pad. */
  .depot-pad { position: absolute; left: 46%; top: 44%; width: min(78%, 470px); aspect-ratio: 1.55; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(ellipse, #3b3d38 0%, #30322e 62%, #262824 63%, #2f312d 70%, transparent 71%); }
  .depot-pad .ring { position: absolute; border-radius: 50%; inset: 0; }
  .depot-pad .r1 { inset: 4%; border: 3px solid rgba(227, 181, 5, .55); }
  .depot-pad .r2 { inset: 12%; border: 2px dashed rgba(227, 181, 5, .35); animation: pad-spin 40s linear infinite; }
  .depot-pad .r3 { inset: 27%; border: 6px solid rgba(227, 181, 5, .22); }
  .depot-pad .emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 4.5rem; line-height: 1; color: rgba(227, 181, 5, .14); }
  .depot-pad .beacon { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #ff3b2a; box-shadow: 0 0 10px 3px rgba(255, 59, 42, .7); animation: beacon 1.6s ease-in-out infinite; }
  .depot-pad .b1 { left: 14%; top: 10%; }
  .depot-pad .b2 { right: 14%; top: 10%; animation-delay: .4s; }
  .depot-pad .b3 { left: 14%; bottom: 10%; animation-delay: .8s; }
  .depot-pad .b4 { right: 14%; bottom: 10%; animation-delay: 1.2s; }
  /* The vehicle on the pad. */
  .on-pad { position: absolute; left: 46%; top: 42%; width: min(58%, 360px); aspect-ratio: 200 / 120; transform: translate(-50%, -50%) rotate(-10deg);
    filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .65)); animation: roll-in .55s cubic-bezier(.2, .9, .25, 1) both; }
  .on-pad img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .on-pad .turret { transform-origin: 46% 50%; animation: sweep 7s ease-in-out .6s infinite; }
  /* A legendary vehicle you do not own yet. */
  .on-pad.locked img { filter: grayscale(.55) brightness(.6); }

  /* The selector under the pad: arrows either side of a steel name plate. */
  .selector { position: absolute; z-index: 1; left: 46%; bottom: var(--sp-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2); }
  .selector .plate { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 240px; padding: var(--sp-3) var(--sp-5); text-align: center;
    border-radius: var(--r-md); background: linear-gradient(180deg, #3a3b37, #232421); border: 1px solid rgba(0, 0, 0, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .55); }
  .selector .plate b { font: var(--fw-bold) var(--fs-h2) / 1 var(--font-display); letter-spacing: var(--ls-cta); text-transform: uppercase; white-space: nowrap; }
  .plate-meta { display: flex; align-items: center; gap: var(--sp-2); }

  /* The dossier: smoked glass over the hangar floor. */
  .dossier { z-index: 1; display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-6) var(--sp-5) var(--sp-5) 0; padding: var(--sp-5); }
  .dossier-tags { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 24px; }
  .dossier .legend .icon { color: var(--gold-text); }
  .dossier .blurb { color: var(--text-2); }
  .dossier .lore { padding-left: var(--sp-3); border-left: 2px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); font-style: italic; line-height: 1.55; }
  .dossier .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
  .dossier .specs .stat { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) var(--sp-3); }
  .dossier .specs dd { margin: 0; font-weight: var(--fw-semibold); }
  .dossier .equip { margin-top: auto; }

  /* Equip salute: the turret swings aside, fires one round (recoil, flash, smoke), the hull rocks, then it settles. */
  .on-pad .hull, .on-pad .turret { position: absolute; inset: 0; }
  .on-pad .muzzle, .on-pad .smoke { position: absolute; left: 98%; top: 50%; pointer-events: none; opacity: 0; }
  .on-pad .muzzle { width: 34%; aspect-ratio: 1.6; transform: translate(-30%, -50%) scale(.2); border-radius: 50%;
    background: radial-gradient(ellipse at 30% 50%, #fffbe0 0%, #ffd24a 28%, rgba(255, 120, 30, .85) 52%, rgba(255, 80, 20, 0) 72%); filter: blur(.5px); mix-blend-mode: screen; }
  .on-pad .smoke { width: 26%; aspect-ratio: 1; transform: translate(-20%, -50%) scale(.3); border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 200, 190, .55), rgba(140, 140, 130, .25) 55%, transparent 72%); }
  .on-pad .hull.salute { animation: salute-hull 1.7s cubic-bezier(.3, .7, .3, 1); }
  .on-pad .hull.salute .turret { animation: salute-turret 1.7s cubic-bezier(.45, 0, .25, 1); }
  .on-pad .hull.salute .muzzle { animation: salute-flash 1.7s linear; }
  .on-pad .hull.salute .smoke { animation: salute-smoke 1.7s ease-out; }
  @keyframes salute-turret {
    0% { transform: rotate(-14deg); }
    32%, 39% { transform: rotate(38deg); }
    42% { transform: rotate(38deg) translateX(-7%); }
    56% { transform: rotate(38deg) translateX(0); }
    70% { transform: rotate(38deg); }
    100% { transform: rotate(-14deg); }
  }
  @keyframes salute-hull {
    0%, 39% { transform: none; }
    43% { transform: translate(-1.5%, 1%) rotate(-1.5deg); }
    52% { transform: translate(.6%, -.4%) rotate(.6deg); }
    62%, 100% { transform: none; }
  }
  @keyframes salute-flash {
    0%, 39% { opacity: 0; transform: translate(-30%, -50%) scale(.2); }
    41% { opacity: 1; transform: translate(-30%, -50%) scale(1.1); }
    48% { opacity: .6; transform: translate(-25%, -50%) scale(.8); }
    54%, 100% { opacity: 0; transform: translate(-20%, -50%) scale(.5); }
  }
  @keyframes salute-smoke {
    0%, 41% { opacity: 0; transform: translate(-20%, -50%) scale(.3); }
    48% { opacity: .9; }
    100% { opacity: 0; transform: translate(60%, -80%) scale(2.2); }
  }
  @keyframes sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
  @keyframes pad-spin { to { transform: rotate(360deg); } }
  @keyframes beacon { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes roll-in { from { opacity: 0; transform: translate(-70%, -50%) rotate(-10deg) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg); } }
  @media (max-width: 860px) {
    .depot-head { padding: var(--sp-4) var(--sp-5); }
    .depot-body { grid-template-columns: 1fr; }
    .hangar { min-height: 340px; }
    .depot-pad, .on-pad, .selector { left: 50%; }
    .selector .plate { min-width: 0; width: min(52vw, 260px); }
    .selector .plate b { font-size: var(--fs-h3); }
    .dossier { margin: 0 var(--sp-3) var(--sp-3); }
  }
  @media (prefers-reduced-motion: reduce) {
    .on-pad, .on-pad .turret, .depot-pad .r2, .depot-pad .beacon, .on-pad .hull.salute, .on-pad .hull.salute .turret, .on-pad .hull.salute .smoke { animation: none; }
  }
  /* The Store's prestige garage (src/store.rs) is styled in store.css. */
  /* Equip salute, prestige styles (same rhythm as on the battlefield; fire at 40% of 1.7s). */
  .on-pad .muzzle.two, .on-pad .charge, .on-pad .pod, .on-pad .missile { position: absolute; pointer-events: none; opacity: 0; }
  /* Aurum Strider: top autocannon, then bottom (110ms later), the walker dipping on each round. */
  .on-pad .fs-burst .muzzle { top: 41.5%; width: 24%; background: radial-gradient(ellipse at 30% 50%, #fff 0%, #ffe680 26%, rgba(255, 184, 0, .85) 48%, rgba(255, 170, 0, 0) 70%); }
  .on-pad .fs-burst .muzzle.two { left: 98%; top: 58.5%; }
  .on-pad .hull.salute.fs-burst .muzzle.two { animation: salute-flash-2 1.7s linear; }
  .on-pad .hull.salute.fs-burst { animation: salute-stomp 1.7s ease-out; }
  @keyframes salute-flash-2 { 0%, 45.5% { opacity: 0; transform: translate(-30%, -50%) scale(.2); } 47.5% { opacity: 1; transform: translate(-30%, -50%) scale(1.1); } 54%, 100% { opacity: 0; transform: translate(-20%, -50%) scale(.5); } }
  @keyframes salute-stomp { 0%, 39% { translate: 0 0; } 42% { translate: -1% 1.4%; } 45% { translate: 0 0; } 48.5% { translate: -1% 1.4%; } 53%, 100% { translate: 0 0; } }
  /* Glacier NX-9: both cryo-cannons glow while the turret swings, then twin ice bolts leave together. */
  .on-pad .fs-cryo .charge { left: 55%; top: 37%; width: 44%; height: 26%; mix-blend-mode: screen;
    background: linear-gradient(90deg, rgba(95, 243, 255, 0), #5ff3ff 40%, #e9fdff) 0 0 / 100% 22% no-repeat, linear-gradient(90deg, rgba(95, 243, 255, 0), #5ff3ff 40%, #e9fdff) 0 100% / 100% 22% no-repeat;
    filter: drop-shadow(0 0 4px #5ff3ff) drop-shadow(0 0 12px rgba(95, 243, 255, .8)); }
  .on-pad .hull.salute.fs-cryo .charge { animation: salute-charge 1.7s ease-in; }
  @keyframes salute-charge { 0%, 8% { opacity: 0; } 25% { opacity: .4; } 38% { opacity: 1; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 20px #5ff3ff); } 41%, 100% { opacity: 0; } }
  .on-pad .fs-cryo .muzzle, .on-pad .fs-cryo .muzzle.two { width: 22%; background: radial-gradient(circle, #fff 0%, #b8fbff 24%, rgba(95, 243, 255, .85) 46%, rgba(95, 243, 255, 0) 70%); }
  .on-pad .fs-cryo .muzzle { top: 40.5%; }
  .on-pad .fs-cryo .muzzle.two { left: 98%; top: 59.5%; }
  .on-pad .hull.salute.fs-cryo .muzzle.two { animation: salute-flash 1.7s linear; }
  .on-pad .fs-cryo .smoke { background: radial-gradient(circle, rgba(225, 248, 255, .75), rgba(160, 220, 240, .25) 55%, transparent 72%); }
  /* Hellstorm: no main-gun shot; a ripple salvo of four missiles from the pods, alternating top and bottom. */
  .on-pad .hull.salute.fs-salvo .muzzle, .on-pad .hull.salute.fs-salvo .smoke { animation: none; }
  .on-pad .hull.salute.fs-salvo .turret { animation-name: salute-turret-still; }
  @keyframes salute-turret-still { 0% { transform: rotate(-14deg); } 32%, 70% { transform: rotate(38deg); } 100% { transform: rotate(-14deg); } }
  .on-pad .fs-salvo .pod { left: 12%; width: 26%; height: 26%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(ellipse at 40% 50%, #fff 0 10%, #ffd27a 24%, rgba(255, 120, 30, .85) 44%, rgba(255, 90, 20, 0) 70%); }
  .on-pad .fs-salvo .pod.top { top: 11%; }
  .on-pad .fs-salvo .pod.bottom { top: 63%; }
  .on-pad .hull.salute.fs-salvo .pod.top { animation: salute-pod-top 1.7s linear; }
  .on-pad .hull.salute.fs-salvo .pod.bottom { animation: salute-pod-bottom 1.7s linear; }
  @keyframes salute-pod-top { 0%, 39% { opacity: 0; } 40% { opacity: 1; } 44% { opacity: 0; } 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
  @keyframes salute-pod-bottom { 0%, 46% { opacity: 0; } 47% { opacity: 1; } 51% { opacity: 0; } 61% { opacity: 1; } 65%, 100% { opacity: 0; } }
  .on-pad .fs-salvo .missile { left: 32%; width: 9%; height: 3.5%; border-radius: 2px 6px 6px 2px; background: linear-gradient(90deg, #ffb02e 0 18%, #3a3c3e 18% 78%, #c8442c 78%); box-shadow: -6px 0 10px 2px rgba(255, 140, 30, .85), -26px 0 18px 4px rgba(190, 185, 175, .45); }
  .on-pad .fs-salvo .missile.m1, .on-pad .fs-salvo .missile.m3 { top: 22%; }
  .on-pad .fs-salvo .missile.m2, .on-pad .fs-salvo .missile.m4 { top: 74%; }
  .on-pad .hull.salute.fs-salvo .missile.m1 { animation: salute-missile-up 1.7s cubic-bezier(.5, 0, .8, .6); }
  .on-pad .hull.salute.fs-salvo .missile.m2 { animation: salute-missile-down 1.7s cubic-bezier(.5, 0, .8, .6); animation-delay: .12s; }
  .on-pad .hull.salute.fs-salvo .missile.m3 { animation: salute-missile-up 1.7s cubic-bezier(.5, 0, .8, .6); animation-delay: .24s; }
  .on-pad .hull.salute.fs-salvo .missile.m4 { animation: salute-missile-down 1.7s cubic-bezier(.5, 0, .8, .6); animation-delay: .36s; }
  @keyframes salute-missile-up { 0%, 39% { opacity: 0; transform: translate(0, 0); } 40% { opacity: 1; } 52% { transform: translate(150%, -160%) rotate(-12deg); } 72% { opacity: 1; transform: translate(900%, -90%) rotate(4deg); } 76%, 100% { opacity: 0; transform: translate(1000%, -60%); } }
  @keyframes salute-missile-down { 0%, 39% { opacity: 0; transform: translate(0, 0); } 40% { opacity: 1; } 52% { transform: translate(150%, 160%) rotate(12deg); } 72% { opacity: 1; transform: translate(900%, 90%) rotate(-4deg); } 76%, 100% { opacity: 0; transform: translate(1000%, 60%); } }
  @media (prefers-reduced-motion: reduce) {
    .on-pad .hull.salute.fs-burst, .on-pad .hull.salute.fs-cryo .charge, .on-pad .hull.salute.fs-salvo .missile { animation: none; }
  }
}