/* thrivetruwellness.com desktop/large home — video intro draft */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:#030407;color:#F2EDE4;min-height:100%;height:100%}
body{overflow:hidden}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:20;background:#F2EDE4;color:#030407;padding:8px 12px}

.stage{
  position:relative;
  width:100%;
  height:100svh;
  min-height:100vh;
  background:#030407;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.intro-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#030407;
  z-index:1;
}
html.no-intro .intro-video,
html.intro-hold .intro-video{/* keep video visible as frozen frame */}
.settle-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;display:none;background:#030407;
}
html.no-intro .settle-poster{display:block;z-index:2}
html.no-intro .intro-video,
html.no-intro .cine-ctrl{display:none!important}

/* Mute / Skip — cover the controls baked into the recording */
.cine-ctrl{
  display:flex;align-items:center;gap:10px;
  position:absolute;z-index:5;
  right:max(20px, env(safe-area-inset-right, 0px));
  bottom:max(32px, env(safe-area-inset-bottom, 0px));
}
.cine-ctrl[hidden]{display:none!important}
.cine-skip,.cine-sound{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 14px;
  background:rgba(1,2,3,.92);
  border:1px solid rgba(242,237,228,.32);
  color:rgba(242,237,228,.88);
  font:500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.cine-sound{padding:0 12px 0 10px}
.cine-sound svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cine-sound .spk{fill:currentColor;stroke:none}
.cine-sound .off{display:none}
.cine-sound.is-muted{border-color:#CDB48A;color:#CDB48A}
.cine-sound.is-muted .on{display:none}
.cine-sound.is-muted .off{display:inline}
.cine-sound:hover,.cine-skip:hover{border-color:#CDB48A;color:#F2EDE4}
.cine-sound:focus-visible,.cine-skip:focus-visible{outline:2px solid #CDB48A;outline-offset:3px}

/* After hold: keep Mute (video may still have audible headroom if user unmutes); hide Skip */
html.intro-hold #cineSkip{display:none}

@media (max-width:700px){
  .cine-ctrl{bottom:max(12px, env(safe-area-inset-bottom, 0px)); right:max(12px, env(safe-area-inset-right, 0px)); gap:8px}
  .cine-skip,.cine-sound{height:32px;font-size:11px;letter-spacing:.16em;padding:0 10px}
}

/* Post-music: logo keeps glowing + shimmering (seamless 4s mp4 loop over the held frame) */
.glow-loop{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:transparent;z-index:2;opacity:0;pointer-events:none;
  transition:opacity .7s ease;
}
html.glow-on .glow-loop{opacity:1}
html.no-intro .glow-loop{display:none}
/* Mobile: portrait cut; keep logo centred if aspect differs */
html.is-mobile .intro-video,html.is-mobile .glow-loop{object-position:50% 50%}

/* Once glow loop is on, hide frozen intro under it so only the pulsing plate is visible */
html.glow-on .intro-video{opacity:0; transition:opacity .35s ease}
html.glow-on .glow-loop{
  opacity:1;
  animation: glow-pulse 2.5s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{ filter:brightness(1) saturate(1); }
  50%{ filter:brightness(1.05) saturate(1.04); }
}