/* Case-study theater: play badge on the phone thumbnail and the modal video player. */

/* Phone trigger */
.phone__card{position:relative}
.phone__play{position:absolute;left:var(--tp-x,.6em);top:var(--tp-y,.55em);width:var(--tp-w,calc(100% - 1.2em));aspect-ratio:16 / 9;display:grid;place-items:center;pointer-events:none;transition:opacity var(--dur) var(--ease-out)}
.phone__play svg{width:24%;min-width:26px;max-width:56px;height:auto;color:var(--pink);filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--night) 45%,transparent));transition:transform var(--dur-fast) var(--ease-out)}
.phone__play-tri{fill:var(--ink)}
html.case-live .phone__play{visibility:var(--case-vis,hidden)}
html.case-live .case:not(.is-final) .phone__play{opacity:0;visibility:hidden}
.case__watch{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:0;border-radius:13%/6.2%;background:none;color:inherit;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.case__phone:has(.case__watch:hover) .phone__play svg{transform:scale(1.06)}

/* Dialog */
.theater{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:var(--pad);color:var(--white);touch-action:none;outline:none}
.theater[hidden]{display:none}
.theater :focus-visible{outline:2px solid var(--pink);outline-offset:3px}
html.is-theater,html.is-theater body{overflow:hidden}
.theater__backdrop{position:absolute;inset:0;background:var(--night);opacity:.96}
.theater__frame{position:relative;width:min(100%,1280px,calc((100svh - 2 * var(--pad)) * 16 / 9));aspect-ratio:16 / 9;border-radius:var(--radius-card);overflow:hidden;background:var(--night);transform-origin:0 0;box-shadow:0 40px 80px -30px color-mix(in srgb,var(--blue-deep) 55%,transparent)}
.theater__video{display:block;width:100%;height:100%;object-fit:contain;background:var(--night)}
.theater__close{position:absolute;top:max(12px,calc(var(--pad) / 2));right:max(12px,calc(var(--pad) / 2));width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-pill);background:var(--on-dark-line);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out)}
.theater__close svg{width:22px;height:22px}

/* Control bar */
.theater__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:clamp(4px,1vw,12px);padding:clamp(28px,5%,56px) clamp(8px,2%,20px) clamp(6px,1.6%,14px);background:linear-gradient(transparent,color-mix(in srgb,var(--night) 75%,transparent));transition:opacity var(--dur-fast) var(--ease-out)}
.theater__btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-pill);background:none;cursor:pointer}
.theater__btn svg{width:24px;height:24px}
.theater__i-pause,.theater__i-muted,.theater__i-fsx,.theater.is-playing .theater__i-play,.theater.is-muted .theater__i-vol,.theater.is-fs .theater__i-fs{display:none}
.theater.is-playing .theater__i-pause,.theater.is-muted .theater__i-muted,.theater.is-fs .theater__i-fsx{display:block}
.theater__track{position:relative;flex:1;min-width:48px;height:28px;cursor:pointer;touch-action:none}
.theater__track::before,.theater__buf,.theater__fill{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:var(--radius-pill);transform-origin:0 50%}
.theater__track::before{background:var(--on-dark-line)}
.theater__buf{background:var(--on-dark-line);transform:scaleX(0)}
.theater__fill{background:var(--pink);transform:scaleX(0)}
.theater__knob{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:var(--radius-pill);background:var(--pink);transform:scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.theater__track:hover .theater__knob,.theater__track:focus-visible .theater__knob,.theater.is-seeking .theater__knob{transform:scale(1)}
.theater__time{flex:none;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--on-dark-dim);white-space:nowrap}
.theater.is-idle{cursor:none}
.theater.is-idle .theater__bar,.theater.is-idle .theater__close{opacity:0}

/* Error state */
.theater__error{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6rem;padding:var(--pad);text-align:center;background:color-mix(in srgb,var(--night) 82%,transparent);font-size:var(--fs-body)}
.theater__error[hidden]{display:none}
.theater__error p{margin:0}
.theater__error a{color:var(--pink);border-bottom:1px solid currentColor;text-decoration:none}
.theater.has-error .theater__bar{display:none}

/* Full screen keeps the custom controls (Fullscreen API on the frame) */
.theater__frame:fullscreen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0}
.theater__frame:-webkit-full-screen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0}

@media (max-width:600px){
  .theater__btn{width:38px;height:38px}
  .theater__btn svg{width:22px;height:22px}
  .theater__time{font-size:var(--fs-meta)}
}