/* A shared, quiet bottom toolbar for Zamar's hosted video. */
.native-control-row,.cinema-screen-hero .native-control-row{display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:center;gap:12px}
.native-transport,.cinema-screen-hero .native-transport{grid-column:2;display:flex;align-items:center;justify-content:center;gap:10px;width:auto}
.native-utilities,.cinema-screen-hero .native-utilities{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.native-volume,.cinema-screen-hero .native-volume{display:flex;position:relative;right:auto;bottom:auto;z-index:5;margin:0;pointer-events:auto}
.native-control-row button,.cinema-screen-hero .native-control-row button{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:7px;border:0;box-shadow:none;background:transparent;color:#fff;pointer-events:auto;border-radius:50%}
.native-control-row button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.native-control-row svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cinema-screen-hero .native-control-row [data-native=toggle],.cinema-screen-hero .native-control-row [data-native=toggle]:hover{width:36px;height:36px;background:transparent;color:#fff}
.cinema-screen-hero .native-control-row [data-native=toggle] svg{width:26px;height:26px}
.cinema-screen-hero .native-controls{inset:auto 0 0;display:block;padding:70px 3% 16px;background:linear-gradient(transparent,#0009);pointer-events:auto;transform:none}
.cinema-screen-hero .native-timeline{display:flex;margin-bottom:8px}
.native-seek{border:0;box-shadow:none;cursor:pointer;touch-action:pan-y;height:4px;padding:0}
.native-seek::-webkit-slider-thumb{border:0;box-shadow:none}
.native-timeline{min-height:20px}
.cinema-hero-overlay>div{bottom:112px}
.cinema-screen-hero .native-video:fullscreen .native-controls{inset:auto 0 0;padding:80px 4% 24px}
.cinema-screen-hero .native-video:fullscreen .native-caption{display:block;margin-bottom:20px}
.cinema-screen-hero .native-video:fullscreen video{object-fit:contain}
.native-video:fullscreen .native-close{display:none}
.cinema-screen-hero .native-video.is-paused .native-controls{opacity:1}
.cinema-screen-hero:has(.native-video.controls-idle:not(.is-paused):not(:focus-within)) .cinema-hero-overlay{opacity:0}
@media(max-width:767px){
 .native-control-row,.cinema-screen-hero .native-control-row{grid-template-columns:1fr auto;gap:6px}
 .native-transport,.cinema-screen-hero .native-transport{grid-column:1;justify-content:flex-start;gap:4px}
 .native-utilities,.cinema-screen-hero .native-utilities{grid-column:2;gap:2px}
 .cinema-screen-hero .native-controls{padding:40px 12px 8px}
 .cinema-hero-overlay>div{bottom:98px;left:12px}
 .cinema-hero-overlay strong{font-size:18px}
 .cinema-hero-overlay span{font-size:12px}
 .native-elapsed,.native-remaining{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.native-controls,.cinema-hero-overlay{transition:none}}
.native-control-row svg.fill{fill:currentColor;stroke:none}

/* Keep the logo independent of the fading title and playback controls. */
.cinema-screen-hero .cinema-hero-overlay>img{display:none}
.cinema-screen-hero .native-watermark{display:block;right:3%;top:6%;width:82px;height:auto;opacity:1;z-index:2;pointer-events:none}
@media(max-width:767px){.cinema-screen-hero .native-watermark{width:60px}}


/* A central signature, followed by the quiet corner watermark. */
.native-video .native-watermark,.video-brand-watermark{opacity:0;transform:none;clip-path:none}
.video-brand-watermark{position:absolute;right:3%;top:6%;width:82px;height:auto;z-index:2;pointer-events:none}
.zamar-video-screen{position:relative}
.native-video .video-brand-intro,.zamar-video .video-brand-intro{position:absolute;left:50%;top:50%;width:clamp(150px,32%,420px);height:auto;max-width:55%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 20px #0005)}
.video-brand-started .video-brand-intro{animation:zamar-brand-intro 4.6s ease-in-out both}
.video-brand-started .native-watermark,.video-brand-started .video-brand-watermark{animation:zamar-brand-corner 1.2s ease-in-out 4.5s both}
@keyframes zamar-brand-intro{0%{opacity:0}28%,65%{opacity:1}100%{opacity:0}}
@keyframes zamar-brand-corner{from{opacity:0}to{opacity:1}}
@media(max-width:767px){.video-brand-watermark{width:60px}}
@media(prefers-reduced-motion:reduce){.video-brand-started .video-brand-intro{animation:none;opacity:0}.video-brand-started .native-watermark,.video-brand-started .video-brand-watermark{animation:none;opacity:1}}

/* Introduce the title together with the corner signature, then retain hover behavior. */
.cinema-screen-hero .cinema-hero-overlay>div{opacity:0;transition:opacity 1.2s ease-in-out}
.cinema-screen-hero:has(.video-brand-ready) .cinema-hero-overlay>div{opacity:1}
.cinema-screen-hero:has(.video-brand-ready):not(:has(.controls-idle)) .cinema-hero-overlay{opacity:1}
.native-video:not(.video-brand-ready) .native-caption{opacity:0}
.native-video .native-caption{transition:opacity 1.2s ease-in-out}
@media(prefers-reduced-motion:reduce){.cinema-screen-hero .cinema-hero-overlay>div,.native-video .native-caption{transition:none}}

/* Title and controls share the same idle visibility; the watermark stays independent. */
.cinema-screen-hero:has(.video-brand-ready) .cinema-hero-overlay,
.cinema-screen-hero .video-brand-ready .native-controls{opacity:1;transition:opacity .25s ease,transform .25s ease}
.cinema-screen-hero:has(.video-brand-ready.controls-idle:not(.is-paused):not(:focus-within)) .cinema-hero-overlay,
.cinema-screen-hero .video-brand-ready.controls-idle:not(.is-paused):not(:focus-within) .native-controls{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cinema-screen-hero:has(.video-brand-ready) .cinema-hero-overlay,.cinema-screen-hero .video-brand-ready .native-controls{transition:none}}

/* Pointer exit hides both layers immediately, using the same gentle fade. */
.cinema-screen-hero:has(.native-video.pointer-outside) .cinema-hero-overlay,
.cinema-screen-hero .native-video.pointer-outside .native-controls,
.native-video.pointer-outside .native-controls{opacity:0!important;pointer-events:none!important;transition:opacity .25s ease,transform .25s ease}
@media(prefers-reduced-motion:reduce){.native-video.pointer-outside .native-controls,.cinema-screen-hero:has(.native-video.pointer-outside) .cinema-hero-overlay{transition:none}}

/* Fullscreen keeps the inline title hierarchy and a single aligned control rail. */
.native-video:fullscreen .native-controls{display:block;place-items:normal;box-sizing:border-box;inset:auto 0 0;width:100%;max-width:none;padding:100px clamp(24px,4vw,80px) max(24px,env(safe-area-inset-bottom));transform:none;background:linear-gradient(transparent,#0009);text-align:left}
.native-video:fullscreen .native-caption{display:block;width:100%;max-width:900px;margin:0 0 28px;text-align:left}
.native-video:fullscreen .native-caption p{font-size:clamp(28px,3vw,52px);line-height:1.1;font-weight:600;letter-spacing:-1px;color:#fff}
.native-video:fullscreen .native-caption strong{font-size:clamp(18px,1.7vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.3px;color:#ffffffb8;margin-top:5px}
.native-video:fullscreen .native-watermark{display:block;top:5%;right:4%;width:clamp(100px,8vw,160px);height:auto}
.native-video:fullscreen .native-timeline{display:flex;width:100%;gap:14px;margin:0 0 12px}
.native-video:fullscreen .native-seek{flex:1;width:100%;min-width:0}
.native-video:fullscreen .native-control-row{display:grid;width:100%;grid-template-columns:1fr auto 1fr;gap:16px}
.native-video:fullscreen .native-transport{grid-column:2;gap:14px;justify-content:center}
.native-video:fullscreen .native-utilities{grid-column:3;gap:10px;justify-content:flex-end}
.native-video:fullscreen .native-control-row button{width:40px;height:40px;min-width:40px}
.native-video:fullscreen .native-elapsed,.native-video:fullscreen .native-remaining{font-size:12px}
@media(max-height:500px){.native-video:fullscreen .native-controls{padding:45px 24px 12px}.native-video:fullscreen .native-caption{margin-bottom:14px}.native-video:fullscreen .native-caption p{font-size:26px}.native-video:fullscreen .native-caption strong{font-size:16px}.native-video:fullscreen .native-watermark{width:96px}}
@media(max-width:480px){.native-video:fullscreen .native-control-row{grid-template-columns:1fr auto}.native-video:fullscreen .native-transport{grid-column:1;gap:4px;justify-content:flex-start}.native-video:fullscreen .native-utilities{grid-column:2;gap:2px}.native-video:fullscreen .native-control-row button{width:32px;min-width:32px}}