/* Stage lighting footage player, embedded in the PSI page.
   Everything lives under .lwl-root via native CSS nesting, so nothing leaks into
   the site and the site's h1/p/button/input rules (specificity 0,0,1) lose to us. */
.lwl-root {
  --bg: #08090b;
  --line: rgba(255, 255, 255, .12);
  --white: #f4f3fa;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 42%, #15161a 0%, #0c0d10 49%, #08090b 100%);
  color: var(--white);
  line-height: 1.4;

  *, *::before, *::after { box-sizing: border-box; }
  &::before {
    content: ""; position: absolute; z-index: -1; width: 70vw; height: 70vw; left: 15vw; top: 8vh;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .035), transparent 65%); pointer-events: none;
  }

  .lwl-app {
    /* keep intro + 16:9 frame + controls inside one screen: ~210px is intro + controls + bottom gap,
       --lwl-lead is the host header/breadcrumb above us (set in lighting.js) */
    max-width: min(1440px, calc(max(400px, 100svh - 210px - var(--lwl-lead, 0px)) * 1.7778 + 10vw));
    margin: 0 auto; padding: 0 5vw 30px;
  }

  .lwl-intro { padding: 26px 0 16px; }
  .lwl-eyebrow { font: 12px var(--mono); letter-spacing: .22em; color: #b9bbc8; text-transform: uppercase; }
  .lwl-intro h1 { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -.045em; margin: 8px 0 0; line-height: 1.15; color: var(--white); }
  .lwl-intro p { font-size: 15px; color: #b9bbc8; margin: 8px 0 0; }

  .lwl-viewer {
    position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; isolation: isolate;
    background: #06070b; border: 1px solid rgba(255, 255, 255, .13); border-radius: 5px;
    box-shadow: 0 26px 90px #0009;
  }
  .lwl-viewer::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid #ffffff0d; }
  .lwl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #06070b; transform: scale(1.12); }
  .lwl-video::-webkit-media-controls { display: none !important; }
  .lwl-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #05060b60, transparent 25%); }
  .lwl-label { position: absolute; z-index: 2; top: 17px; left: 18px; display: flex; align-items: center; gap: 8px; font: 12px var(--mono); letter-spacing: .15em; color: #fff; text-shadow: 0 1px 10px #000; }
  .lwl-status { position: absolute; z-index: 3; bottom: 18px; left: 18px; margin: 0; padding: 8px 12px; background: #080910cf; border-radius: 4px; font-size: 14px; }
  .lwl-status:empty { display: none; }

  .lwl-center {
    position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; padding: 0;
    border-radius: 50%; background: #08091070; border: 1px solid #ffffff80; display: grid; place-items: center; cursor: pointer;
    backdrop-filter: blur(10px); transition: .2s;
    svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
    &:hover { transform: translate(-50%, -50%) scale(1.08); background: #ffffff26; }
  }
  .lwl-viewer.playing .lwl-center { opacity: 0; }
  .lwl-viewer.playing:hover .lwl-center, .lwl-viewer.paused .lwl-center { opacity: 1; }

  .lwl-player { display: flex; align-items: center; gap: 13px; padding-top: 17px; }
  .lwl-round {
    width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; border: 1px solid #ffffff44; background: #ffffff0b;
    display: grid; place-items: center; cursor: pointer; transition: .2s;
    svg { width: 13px; height: 13px; fill: #fff; }
    &:hover { background: #ffffff1b; border-color: #fff; }
  }
  .lwl-time { font: 12px var(--mono); color: #b9bbc8; white-space: nowrap; min-width: 77px; }
  .lwl-seek {
    appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 24px; margin: 0; padding: 0; border: 0; outline: none; cursor: pointer;
    background: linear-gradient(90deg, #f4f3fa var(--progress, 0%), #ffffff2b var(--progress, 0%)) center / 100% 3px no-repeat;
    &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #ffffff80; }
    &::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #ffffff80; }
    &:disabled { opacity: .4; cursor: wait; }
  }
  .lwl-sound { display: flex; align-items: center; gap: 9px; color: #c4c6d0; font-size: 14px; white-space: nowrap; }
  .lwl-bars { height: 24px; display: flex; align-items: center; gap: 3px; margin-left: 2px; }
  .lwl-bars i {
    display: block; width: 2px; height: 20px; border-radius: 3px; background: linear-gradient(#fff, #8a8c9a);
    opacity: .35; transform: scaleY(.2); transition: transform .12s, opacity .12s;
  }
  .lwl-hint {
    position: absolute; z-index: 3; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
    background: #08090bcf; color: #e6e7ee; border: 1px solid #ffffff33; border-radius: 20px; font-size: 13px; backdrop-filter: blur(8px); transition: .2s;
    svg { width: 15px; height: 15px; fill: currentColor; }
    &:hover { border-color: #fff; color: #fff; }
    &[hidden] { display: none; }
  }

  .lwl-chapters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
    button {
      display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; cursor: pointer; border-radius: 18px;
      background: none; border: 1px solid var(--line); color: #b9bbc8; font-size: 13px; transition: .2s;
      b { font: 12px var(--mono); letter-spacing: .06em; color: #8f91a0; }
      &:hover { border-color: #ffffff80; color: #fff; }
      &.on { border-color: #fff; color: #fff; b { color: #fff; } }
    }
  }

  .lwl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
  .lwl-btn {
    display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border-radius: 22px; border: 1px solid #ffffff55;
    color: var(--white); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: .2s;
    &:hover { background: #ffffff1b; border-color: #fff; color: #fff; }
  }
  .lwl-btn-main { background: var(--white); border-color: var(--white); color: var(--bg); &:hover { background: #fff; color: var(--bg); } }

  .lwl-spec {
    margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
    h2 { margin: 0 0 22px; font: 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #b9bbc8; }
    ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; }
    li { margin: 0; padding: 0; list-style: none; }
    span { font: 12px var(--mono); letter-spacing: .1em; color: #8f91a0; }
    h3 { margin: 8px 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--white); }
    p { margin: 0; font-size: 14px; line-height: 1.6; color: #b9bbc8; }
  }

  .lwl-toast {
    position: fixed; z-index: 5; left: 50%; top: 90px; transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
    background: #15161aef; color: #ddd; border: 1px solid var(--line); padding: 10px 14px; border-radius: 5px; font-size: 14px; transition: .2s;
    &.show { opacity: 1; transform: translate(-50%, 0); }
  }

  button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
  .lwl-center:focus-visible { opacity: 1 !important; }

  @media (max-width: 760px) {
    .lwl-app { max-width: none; padding: 0 18px 22px; }
    .lwl-intro h1 { font-size: 27px; }
    .lwl-label { top: 11px; left: 11px; letter-spacing: 0; }
    .lwl-center { width: 48px; height: 48px; }
    .lwl-player { gap: 9px; padding-top: 14px; flex-wrap: wrap; }
    .lwl-seek { order: 3; flex-basis: 100%; }
    .lwl-sound { margin-left: auto; }
    .lwl-bars { display: none; }
    .lwl-hint { right: 11px; bottom: 11px; }
    .lwl-spec ol { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}