/* YouTube video with our cover and controls (public/js/otv.js). */
.otv { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0b1220; isolation: isolate; }
.otv__frame { position: absolute; left: 0; right: 0; top: -60px; height: calc(100% + 120px); pointer-events: none; }
.otv__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.otv[data-state="armed"] .otv__frame { pointer-events: auto; }
.otv__plain { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the cover hides YouTube's own start, pause and end screens */
.otv__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .5s ease, opacity .2s ease; }
.otv__toggle { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.otv__toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(71, 145, 255, .8); border-radius: inherit; }
.otv__play { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 40px rgba(10, 37, 64, .3); transition: transform .2s ease; }
.otv__play svg { width: 30px; height: 30px; margin-left: 4px; fill: #0a2540; }
.otv__spin { display: none; width: 44px; height: 44px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); animation: otv-spin .9s linear infinite; }
.otv:hover .otv__cover { transform: scale(1.02); }
.otv:hover .otv__play { transform: scale(1.08); }
.otv[data-state="loading"] .otv__play { display: none; }
.otv[data-state="loading"] .otv__spin { display: block; }
.otv[data-state="playing"] .otv__cover, .otv[data-state="playing"] .otv__play { opacity: 0; }
.otv[data-state="armed"] .otv__toggle { pointer-events: none; }
.otv[data-state="fallback"] .otv__cover, .otv[data-state="fallback"] .otv__toggle { display: none; }

/* a 16px strip catches the pointer; the visible line thickens on hover and while dragging */
.otv__seek { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 16px; cursor: pointer; touch-action: none; outline: none; }
/* a neutral grey track shows on light and dark pictures alike */
.otv__line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(128, 128, 128, .45); transition: height .15s ease; }
.otv__seek:hover .otv__line, .otv__seek:focus-visible .otv__line, .otv.is-seeking .otv__line { height: 8px; }
.otv__seek:focus-visible .otv__line { box-shadow: 0 0 0 2px rgba(71, 145, 255, .8); }
.otv__hover { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: rgba(128, 128, 128, .5); }
.otv__fill { position: relative; width: 0; height: 100%; background: #4791ff; transition: width .2s linear; }
.otv.is-seeking .otv__fill { transition: none; }
.otv__tip { position: absolute; bottom: 16px; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.otv__sound { position: absolute; right: 12px; bottom: 20px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease; }
.otv__sound:hover { background: rgba(0, 0, 0, .75); }
.otv__sound:focus-visible { outline: 2px solid #4791ff; outline-offset: 2px; }
.otv__sound svg { width: 17px; height: 17px; }

@keyframes otv-spin { to { transform: rotate(360deg); } }
@media (max-width: 575px) {
    .otv { border-radius: 8px; }
    .otv__play { width: 60px; height: 60px; }
    .otv__play svg { width: 24px; height: 24px; margin-left: 3px; }
}
@media (prefers-reduced-motion: reduce) {
    .otv__cover, .otv__play, .otv__line, .otv__fill { transition: none; }
    .otv:hover .otv__cover, .otv:hover .otv__play { transform: none; }
}