/* ═══════════════════════════════════════════════════════════════
   Aero v2 — polish layer. Load AFTER the skin's own styles.
   CSS only: no markup changes, so any page using the Aero class
   names (index.html, embed.html) picks it up with one <link>.
   ═══════════════════════════════════════════════════════════════ */

.aero { --a-led: #7dffb0; }
.aero[data-theme="lime"] { --a-led: #a8f7ff; }
.aero[data-theme="berry"] { --a-led: #fff3a0; }

/* ── 1. Translucent glass shell: whatever sits behind shows through, blurred ── */
.aero:not(:fullscreen) {
  background:
    radial-gradient(ellipse at 50% 108%, rgb(0 20 70 / .38), rgb(0 20 70 / 0) 55%),
    linear-gradient(color-mix(in srgb, var(--a-shell-0) 86%, transparent) 0%,
                    color-mix(in srgb, var(--a-shell-1) 86%, transparent) 13%,
                    color-mix(in srgb, var(--a-shell-2) 94%, transparent) 56%,
                    color-mix(in srgb, var(--a-shell-3) 97%, transparent) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 34px 70px var(--a-shadow), 0 8px 18px rgb(0 30 90 / .22),
              inset 0 0 0 1.5px rgb(255 255 255 / .9), inset 0 3px 0 #fff,
              inset 0 -10px 22px var(--a-deep), inset 0 -2px 0 rgb(255 255 255 / .35);
}

/* ── 2. Gloss: top highlight plus two diagonal light streaks ── */
.aero:not(:fullscreen)::before {
  left: 0; right: 0; top: 0; bottom: 0; height: auto; border-radius: inherit;
  background:
    radial-gradient(140% 52% at 50% -12%, rgb(255 255 255 / .9), rgb(255 255 255 / .28) 42%, rgb(255 255 255 / 0) 58%),
    linear-gradient(112deg, rgb(255 255 255 / 0) 6%, rgb(255 255 255 / .36) 12%, rgb(255 255 255 / 0) 20%,
                            rgb(255 255 255 / 0) 24%, rgb(255 255 255 / .24) 26.5%, rgb(255 255 255 / 0) 29%);
}

/* ── 3. Engraved AERO plaque and status light on the top rim ── */
.aero:not(:fullscreen) .a-bezel::before {
  content: "AERO"; position: absolute; z-index: 2; left: 50%; top: calc(-1 * var(--pad) + 5px); translate: -50% 0;
  display: grid; place-items: center; height: 22px; padding: 0 18px 0 22px; border-radius: 11px; pointer-events: none;
  font: 400 12px/1 Audiowide, "Trebuchet MS", sans-serif; letter-spacing: .44em;
  color: var(--a-bezel-1); text-shadow: 0 1px 0 rgb(255 255 255 / .95);
  background: linear-gradient(rgb(0 40 120 / .12), rgb(255 255 255 / .4));
  box-shadow: inset 0 1px 2px rgb(0 40 120 / .35), 0 1px 0 rgb(255 255 255 / .95);
}
.aero:not(:fullscreen) .a-bezel::after {
  content: ""; position: absolute; z-index: 2; right: 22px; top: calc(-1 * var(--pad) + 12px); width: 9px; height: 9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, var(--a-led) 55%); box-shadow: 0 0 9px 2px var(--a-led);
  transition: opacity .3s;
}
.aero:has(.a-play[data-paused]) .a-bezel::after { opacity: .4; box-shadow: none; }

/* ── 4. Recessed tray behind the controls ── */
.aero:not(:fullscreen) .a-deck { position: relative; isolation: isolate; }
.aero:not(:fullscreen) .a-deck::before {
  content: ""; position: absolute; z-index: -1; inset: -7px -12px -6px; pointer-events: none;
  border-radius: 30px 30px 64px 64px / 30px 30px 50px 50px;
  background: linear-gradient(rgb(0 30 90 / .26), rgb(0 30 90 / .08) 60%, rgb(255 255 255 / .06));
  box-shadow: inset 0 3px 8px rgb(0 20 70 / .42), inset 0 -1px 0 rgb(255 255 255 / .35), 0 1px 0 rgb(255 255 255 / .45);
}

/* ── 5. Orbs sit in polished chrome rings ── */
.aero .a-orb, .aero .a-bigplay {
  border: 3px solid transparent;
  background:
    radial-gradient(circle at 50% 118%, var(--a-orb-1) 0%, var(--a-orb-2) 40%, var(--a-orb-3) 76%) padding-box,
    linear-gradient(160deg, #ffffff 0%, #dfe9f5 30%, #8fa2bb 52%, #f2f6fb 70%, #a7b6ca 100%) border-box;
  box-shadow: inset 0 2px 5px rgb(255 255 255 / .55), inset 0 -4px 7px var(--a-orb-deep),
              0 3px 8px var(--a-shadow), 0 0 0 1px rgb(0 30 80 / .4);
}
.aero .a-orb--play {
  box-shadow: inset 0 2px 5px rgb(255 255 255 / .55), inset 0 -5px 9px var(--a-orb-deep),
              0 4px 10px var(--a-shadow), 0 0 0 1px rgb(0 30 80 / .4), 0 0 18px 2px rgb(140 210 255 / .5);
}
.aero .a-bigplay {
  border-width: 5px;
  box-shadow: inset 0 3px 8px rgb(255 255 255 / .55), inset 0 -6px 12px var(--a-orb-deep),
              0 10px 26px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 30 80 / .4), 0 0 26px 4px rgb(140 210 255 / .45);
}

/* ── 6. LCD readout: pixel texture, glow, and an equaliser ── */
.aero .a-lcd {
  height: 30px; border-radius: 15px;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 0%, rgb(120 200 255 / .25), rgb(120 200 255 / 0) 60%),
    linear-gradient(var(--a-lcd-0), var(--a-lcd-1));
  box-shadow: inset 0 3px 7px rgb(0 0 0 / .7), inset 0 -1px 0 rgb(255 255 255 / .2), 0 1px 0 rgb(255 255 255 / .85);
}
.aero .a-lcd media-time-group { order: 1; text-shadow: 0 0 8px var(--a-lcd-sub); }
.aero .a-lcd .a-chapter { order: 3; text-shadow: 0 0 6px var(--a-lcd-sub); }
.aero .a-lcd::after {
  content: ""; order: 2; flex: none; margin-left: auto; width: 58px; height: 14px;
  background-image: linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub)), linear-gradient(var(--a-lcd-ink), var(--a-lcd-sub));
  background-repeat: no-repeat;
  background-position: 0px 100%, 5px 100%, 10px 100%, 15px 100%, 20px 100%, 25px 100%, 30px 100%, 35px 100%, 40px 100%, 45px 100%, 50px 100%, 55px 100%;
  background-size: 3px 6px, 3px 12px, 3px 11px, 3px 5px, 3px 8px, 3px 12px, 3px 10px, 3px 13px, 3px 12px, 3px 4px, 3px 12px, 3px 3px;
  filter: drop-shadow(0 0 3px var(--a-lcd-sub));
  animation: a-eq .9s steps(1) infinite;
}
@keyframes a-eq {
  0%   { background-size: 3px 6px, 3px 12px, 3px 11px, 3px 5px, 3px 8px, 3px 12px, 3px 10px, 3px 13px, 3px 12px, 3px 4px, 3px 12px, 3px 3px; }
  25%  { background-size: 3px 10px, 3px 11px, 3px 10px, 3px 10px, 3px 11px, 3px 12px, 3px 6px, 3px 5px, 3px 11px, 3px 10px, 3px 13px, 3px 12px; }
  50%  { background-size: 3px 13px, 3px 3px, 3px 11px, 3px 4px, 3px 11px, 3px 6px, 3px 9px, 3px 8px, 3px 11px, 3px 7px, 3px 12px, 3px 5px; }
  75%  { background-size: 3px 13px, 3px 10px, 3px 14px, 3px 7px, 3px 7px, 3px 6px, 3px 4px, 3px 4px, 3px 7px, 3px 11px, 3px 8px, 3px 7px; }
}
.aero:has(.a-play[data-paused]) .a-lcd::after { animation: none; background-size: 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px, 3px 2px; }
@container (max-width: 480px) { .aero .a-lcd::after { display: none; } }

/* ── 7. The tube: liquid with rising bubbles and a glossy front edge ── */
.aero .a-track { top: 4px; height: 20px; border-radius: 10px; }
.aero .a-ch .a-track { clip-path: inset(0 calc(100% - var(--media-slider-chapter-end) + 1.5px) 0 calc(var(--media-slider-chapter-start) + 1.5px) round 10px); }
.aero .a-fill {
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / .95) 0 1.5px, rgb(255 255 255 / .35) 2.3px, rgb(255 255 255 / 0) 2.9px) 0 0 / 37px 20px,
    radial-gradient(circle at 60% 70%, rgb(255 255 255 / .85) 0 1px, rgb(255 255 255 / .3) 1.7px, rgb(255 255 255 / 0) 2.2px) 13px 3px / 29px 20px,
    radial-gradient(circle at 50% 20%, rgb(255 255 255 / .75) 0 .9px, rgb(255 255 255 / .25) 1.5px, rgb(255 255 255 / 0) 2px) 7px 9px / 19px 20px,
    linear-gradient(var(--a-fill-0), var(--a-fill-1) 42%, var(--a-fill-2));
  box-shadow: inset 0 2px 2px rgb(255 255 255 / .8), inset -4px 0 5px rgb(255 255 255 / .55), 0 0 12px color-mix(in srgb, var(--a-fill-1) 70%, transparent);
  animation: a-rise 2.4s linear infinite;
}
@keyframes a-rise { to { background-position: 0 -20px, 13px -17px, 7px -11px, 0 0; } }
.aero:has(.a-play[data-paused]) .a-fill { animation-play-state: paused; }
.aero .a-fill::after {
  content: ""; position: absolute; right: 1px; top: 2px; bottom: 2px; width: 8px; border-radius: 50%;
  background: radial-gradient(ellipse at 30% 40%, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 75%);
}
.aero .a-seek::after { top: 6px; height: 6px; }
.aero .a-thumb { width: 28px; height: 28px; background: radial-gradient(circle at 35% 28%, #fff 0 16%, #eef7ff 38%, #a9cdf2 78%, #7fb0e3 100%); }

/* ── Fullscreen dock gets the same glass ── */
.aero:fullscreen .a-deck {
  background:
    linear-gradient(112deg, rgb(255 255 255 / 0) 6%, rgb(255 255 255 / .3) 12%, rgb(255 255 255 / 0) 20%),
    linear-gradient(color-mix(in srgb, var(--a-shell-0) 80%, transparent) 0%, color-mix(in srgb, var(--a-shell-1) 76%, transparent) 20%,
                    color-mix(in srgb, var(--a-shell-2) 84%, transparent) 62%, color-mix(in srgb, var(--a-shell-3) 92%, transparent) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}

/* ── Compact: the plaque would sit on the screen, so it goes ── */
@container (max-width: 560px) {
  .aero:not(:fullscreen) .a-bezel::before, .aero:not(:fullscreen) .a-bezel::after { display: none; }
  .aero:not(:fullscreen) .a-deck::before { inset: -5px -6px -4px; border-radius: 22px 22px 34px 34px; }
}

/* ── Preferences ── */
@media (prefers-reduced-motion: reduce) {
  .aero .a-lcd::after, .aero .a-fill { animation: none !important; }
}
@media (prefers-contrast: more) {
  .aero:not(:fullscreen) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .aero .a-bezel::before, .aero .a-lcd::after { display: none; }
  .aero .a-fill { background: var(--a-fill-1); animation: none; }
}
@media (forced-colors: active) {
  .aero .a-bezel::before, .aero .a-bezel::after, .aero .a-lcd::after, .aero .a-deck::before { display: none; }
}