/* Portrait video with a slim glass surround and an unframed close control. */

.axelo-watch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.axelo-watch svg { width: 15px; height: 15px; flex: none; }
html.axelo-video-open { overflow: hidden; }

/* ---------- Shell ---------- */

.axelo-video-dialog {
  --frame: 5px;                 /* glass bezel around the film */
  --outer-r: 25px;
  --inner-r: calc(var(--outer-r) - var(--frame));
  --close: 44px;
  --gap: 16px;                   /* slab to close button */
  --edge: 24px;                  /* slab to viewport */
  --ratio: 0.45996;              /* 1080 / 2348 */
  /* Viewport margins and the glass surround. */
  --film-chrome: 58px;
  /* horizontal chrome: edge*2 + frame*2 + (close + gap)*2 (shell is balanced) */
  --film-side: 178px;
  --film-max: 420px;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: fit-content;
  height: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  /* Left padding mirrors the close column so the slab stays centred. */
  padding: 0 0 0 calc(var(--close) + var(--gap));
  border: 0;
  background: transparent;
  color: #fff;
  color-scheme: dark;
  overflow: visible;
}
.axelo-video-dialog[open] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
}
.axelo-video-dialog::backdrop {
  background:
    radial-gradient(ellipse 60% 70% at 50% 46%, rgba(4, 9, 22, 0.64), rgba(1, 2, 6, 0.86) 100%);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
}

/* The narrow transparent edge picks up the page without a bulky bezel. */
.axelo-video-glass {
  position: relative;
  flex: none;
  padding: var(--frame);
  border-radius: var(--outer-r);
  background: rgba(185, 207, 238, 0.045);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(220, 233, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 28px 100px rgba(0, 0, 0, 0.5);
}

/* ---------- Film ---------- */

.axelo-video-stage {
  position: relative;
  width: min(
    var(--film-max),
    calc((100vh - var(--film-chrome)) * var(--ratio)),
    calc(100vw - var(--film-side))
  );
  width: min(
    var(--film-max),
    calc((100dvh - var(--film-chrome)) * var(--ratio)),
    calc(100vw - var(--film-side))
  );
  min-width: 0;
}
.axelo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 2348;
  object-fit: contain;
  border-radius: var(--inner-r);
  background: #02030a;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.6);
}
.axelo-video-status {
  position: absolute;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(6, 9, 16, 0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e8f1fc;
  font-size: 12.5px;
  line-height: 1.4;
  width: max-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}
.axelo-video-status[hidden] { display: none; }

/* An unframed X with a full touch target. */
.axelo-video-close {
  order: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--close);
  height: var(--close);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: rgba(235, 241, 250, 0.74);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.axelo-video-close svg { display: block; width: 24px; height: 24px; }
.axelo-video-close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.axelo-video-close:active { transform: scale(0.9); }
.axelo-video-close:focus-visible { outline: 2px solid #8ad9ff; outline-offset: 3px; }

/* ---------- Motion ---------- */

.axelo-video-dialog[open] .axelo-video-glass,
.axelo-video-dialog[open] .axelo-video-close {
  animation: axelo-video-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.axelo-video-dialog[open] .axelo-video-close { animation-delay: 0.06s; }
.axelo-video-dialog[open]::backdrop { animation: axelo-video-fade 0.3s ease-out backwards; }
@keyframes axelo-video-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
  to { opacity: 1; transform: none; }
}
@keyframes axelo-video-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Phones put the close control above the film, away from video controls. */
@media (max-width: 699px) {
  .axelo-video-dialog {
    --frame: 4px;
    --outer-r: 24px;
    --gap: 8px;
    --edge: 12px;
    --film-chrome: 84px;
    --film-side: 32px;
    padding: 0;
  }
  .axelo-video-dialog[open] { flex-direction: column; align-items: flex-end; }
  .axelo-video-close { order: 0; margin-right: -8px; }
}
@media (max-height: 600px) {
  .axelo-video-dialog {
    --frame: 4px;
    --outer-r: 20px;
    --edge: 12px;
    --film-chrome: 32px;
  }
  .axelo-video-status { bottom: 54px; font-size: 12px; }
}
@media (max-height: 600px) and (max-width: 699px) {
  .axelo-video-dialog { --film-chrome: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .axelo-video-dialog[open] .axelo-video-glass,
  .axelo-video-dialog[open] .axelo-video-close,
  .axelo-video-dialog[open]::backdrop { animation: none; }
  .axelo-video-close { transition: none; }
  .axelo-video-close:active { transform: none; }
}