/* academy-auto-player.css */

.aap-shell{
  --aap-bg-url:none;
  --aap-max:1100px;
  --aap-radius:18px;

  --aap-window-w:78%;
  --aap-window-h:62%;

  --aap-overlay-intensity:0.75;
  --aap-overlay-speed:1;

  width:100%;
  max-width:var(--aap-max);
  margin:0 auto;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.aap-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--aap-radius);
  overflow:hidden;
  background:#0b0f1a;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.aap-bg{
  position:absolute;
  inset:0;
  background-image:var(--aap-bg-url);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.02);
}

/* Centered window */
.aap-window{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--aap-window-w);
  height:var(--aap-window-h);
  transform:translate(-50%,-50%);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}

.aap-video{
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

.aap-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 240ms ease;
}

.aap-overlay.is-on{
  opacity:var(--aap-overlay-intensity);
  background:
    radial-gradient(circle at center, rgba(180,140,255,0.10) 0%, rgba(0,0,0,0) 55%),
    repeating-radial-gradient(circle at center,
      rgba(190,120,255,0.22) 0px,
      rgba(190,120,255,0.22) 2px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 18px
    ),
    conic-gradient(
      from 0deg,
      rgba(150,90,255,0.0),
      rgba(150,90,255,0.22),
      rgba(150,90,255,0.0),
      rgba(150,90,255,0.18),
      rgba(150,90,255,0.0)
    );
  mix-blend-mode:screen;
  animation:aapHypnoSpin calc(8s / var(--aap-overlay-speed)) linear infinite;
  filter:blur(.4px) saturate(1.2);
}

@keyframes aapHypnoSpin{
  from{ transform:rotate(0deg) scale(1.02); }
  to{ transform:rotate(360deg) scale(1.02); }
}

/* UI docked below stage */
.aap-ui{
  margin-top:12px;
  padding:12px 12px 14px;
  border-radius:14px;
  background:rgba(10,12,20,.82);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  color:#e9e9ff;
}

.aap-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.aap-titleMain{
  font-weight:700;
  font-size:16px;
  letter-spacing:.2px;
}

.aap-titleSub{
  opacity:.85;
  font-size:12px;
}

.aap-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.aap-btn{
  appearance:none;
  border:1px solid rgba(190,160,255,.35);
  background:rgba(30,18,55,.35);
  color:#f2ecff;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
}

.aap-btn:hover{ background:rgba(55,25,95,.45); }
.aap-btn:active{ transform:translateY(1px); }

.aap-row2{
  margin-top:10px;
  justify-content:flex-start;
}

.aap-label{
  font-size:12px;
  opacity:.85;
}

.aap-select{
  min-width:280px;
  max-width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(190,160,255,.25);
  background:rgba(0,0,0,.25);
  color:#f2ecff;
}

.aap-range{ width:160px; }

.aap-hint{
  margin-top:10px;
  font-size:12px;
  opacity:.78;
}

.aap-shell.is-fullscreen .aap-ui{ display:none; }
.aap-shell.is-fullscreen .aap-stage{
  border-radius:0;
  width:100vw;
  height:100vh;
  aspect-ratio:auto;
}

@media (max-width:700px){
  .aap-shell{ --aap-window-w:92%; --aap-window-h:62%; }
  .aap-select{ min-width:220px; }
  .aap-range{ width:140px; }
}

/* ================================
   Video window transparency states
   ================================ */

/* Default: idle */
.aap-window{
  opacity:0.15;
  transition:
    opacity 420ms ease,
    box-shadow 420ms ease,
    background-color 420ms ease;
}

/* When media is active (audio or video) */
.aap-shell.is-active .aap-window{
  opacity:1;
}

/* Paused state */
.aap-shell.is-paused .aap-window{
  opacity:0.35;
}

/* Optional: lighter glass feel when idle */
.aap-shell:not(.is-active) .aap-window{
  background:rgba(0,0,0,0.25);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}