/* ry-hero-video.css — the click-to-play / muted-autoplay hero film with the
   English | ภาษาไทย switch. Same component as the Custom Ice Baths hero
   (landing-custom-ice-baths.css), lifted out so other landing pages can use it
   without loading that page's stylesheet. Tokens only; the sound button takes
   the page CTA colour. Pair with ry-hero-video.js. */
.ry-hero-video{position:relative;background:var(--nav);padding:0}
/* Full bleed: edge to edge at a true 16:9, no height cap, because a cap plus
   cover would crop the burned-in captions along the bottom. */
/* Height matches the Portable Ice Baths hero (Carl, 19 Oct 2026): a true
   16:9 until that would be taller than 88vh, then capped. The film is
   anchored to its BOTTOM edge, so the cap trims sky and roofline from the
   top and never the burned-in captions along the bottom. */
.ibv{position:relative;width:100%;margin:0;height:min(56.25vw,88vh);overflow:hidden;background:var(--nav)}
.ibv-poster,.ibv-poster picture,.ibv-poster img,.ibv-video{position:absolute;inset:0;width:100%;height:100%;display:block}
.ibv-poster img,.ibv-video{object-fit:cover;object-position:50% 100%;background:var(--nav)}
/* Poster sits over the video until the first frame is actually playing, then fades. */
.ibv-video{z-index:0}
.ibv-poster{z-index:1;transition:opacity .5s ease}
.ibv-poster[hidden],.ibv-video[hidden]{display:none}
.ibv.is-playing .ibv-poster{opacity:0;pointer-events:none}
.ibv.is-playing .ibv-play{display:none}

/* Language pill — centred at the top, over the film (CD mockup). */
/* Language switch: over the video, bottom-centre, in a frosted panel so the
   label stays readable on any frame. Sound and pause sit in the bottom
   corners on desktop and move to the top corners on phones to clear it. */
.ibv-switch{position:absolute;left:50%;bottom:clamp(10px,2.2vw,24px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:color-mix(in srgb,var(--nav) 62%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 18px color-mix(in srgb,var(--heading) 30%,transparent)}
.ibv-switch[hidden]{display:none}
.ibv-switch-lbl{margin:0;padding-top:2px;color:var(--white);font:500 clamp(.72rem,1.2vw,.84rem)/1.2 var(--f);letter-spacing:.04em;text-align:center;white-space:nowrap}
.ibv-switch-lbl [lang="th"]{font-family:var(--f-th)}
.ibv-switch-lbl span[aria-hidden]{opacity:.55;margin:0 .35em}
.ibv-lang{display:flex;gap:4px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--nav) 70%,transparent)}
.ibv-lang button{appearance:none;border:0;cursor:pointer;min-height:40px;padding:0 clamp(14px,2vw,22px);border-radius:999px;background:transparent;color:var(--white);font:500 clamp(.82rem,1.6vw,.98rem)/1 var(--f);letter-spacing:.01em;transition:background .2s,color .2s}
.ibv-lang button[lang="th"]{font-family:var(--f-th)}
.ibv-lang button[aria-checked="true"]{background:var(--white);color:var(--heading)}
.ibv-lang button:not([aria-checked="true"]):hover{background:var(--on-dark-hover)}
.ibv-lang button:focus-visible,.ibv-play:focus-visible,.ibv-sound:focus-visible,.ibv-pause:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* Play — large, centred, unmistakable. */
.ibv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:clamp(64px,9vw,104px);height:clamp(64px,9vw,104px);border:0;border-radius:50%;cursor:pointer;background:var(--white);box-shadow:0 8px 30px color-mix(in srgb,var(--heading) 38%,transparent);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.ibv-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.ibv-play svg{width:38%;height:38%;margin-left:6%;fill:var(--heading)}
.ibv-play[hidden]{display:none}
/* Sound toggle: big, labelled, bottom-right. Red while muted (sound off) so it
   is the obvious thing to press; grey once sound is on. The brand palette has
   no red, so the hero scopes its own token (white on it is 5:1). */
.ibv{--ibv-red:var(--cta)}
.ibv-sound{position:absolute;right:clamp(10px,2.2vw,24px);bottom:clamp(10px,2.2vw,24px);z-index:3;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 clamp(14px,1.8vw,20px) 0 clamp(12px,1.5vw,16px);border:0;border-radius:999px;cursor:pointer;background:var(--ibv-red);color:var(--white);font:600 clamp(.82rem,1.5vw,.98rem)/1 var(--f);box-shadow:0 6px 22px color-mix(in srgb,var(--heading) 35%,transparent);transition:background .2s,color .2s,transform .2s}
.ibv-sound:hover{transform:scale(1.04)}
.ibv-sound svg{width:22px;height:22px;fill:currentColor;flex:none}
.ibv-sound .ibv-ico-on,.ibv-sound[aria-pressed="true"] .ibv-ico-off{display:none}
.ibv-sound[aria-pressed="true"] .ibv-ico-on{display:block}
.ibv-sound[aria-pressed="true"]{background:var(--muted);color:var(--white)}
.ibv[data-lang="th"] .ibv-sound{font-family:var(--f-th)}
.ibv-sound[hidden],.ibv-pause[hidden]{display:none}
/* Pause: small and quiet, bottom-left (WCAG 2.2.2, moving content needs a stop). */
.ibv-pause{position:absolute;left:clamp(10px,2.2vw,24px);bottom:clamp(10px,2.2vw,24px);z-index:3;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--nav) 70%,transparent);color:var(--white);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ibv-pause svg{width:20px;height:20px;fill:currentColor}
.ibv-pause .ibv-ico-play,.ibv.is-paused .ibv-pause .ibv-ico-pause{display:none}
.ibv.is-paused .ibv-pause .ibv-ico-play{display:block}
@media (max-width:600px){.ibv-sound{min-height:38px;gap:6px;top:10px;bottom:auto;right:10px}.ibv-sound svg{width:18px;height:18px}.ibv-pause{width:38px;height:38px;top:10px;bottom:auto;left:10px}.ibv-switch{bottom:8px;padding:6px 12px;gap:4px}.ibv-lang button{min-height:34px}}
@media (prefers-reduced-motion:reduce){.ibv-play,.ibv-lang button,.ibv-sound,.ibv-poster{transition:none}}