/* OLEA 6.3.4 – original 3D OLI, transparent video companion.
   Scoped to .oli3d. No old blinking masks, sticker transforms, card or WEEE FX. */
#oli.oli3d{
  --oli3d-size:174px;position:fixed;right:16px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
  z-index:145;display:block;width:var(--oli3d-size);height:var(--oli3d-size);
  background:none;border:0;box-shadow:none;transform:none!important;opacity:1;
  pointer-events:none;transition:opacity .2s ease;contain:layout style;
}
#oli.oli3d .oli3d-launch{
  position:absolute;inset:0;display:block;padding:0;margin:0;width:100%;height:100%;
  border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer;pointer-events:auto;
  color:var(--gold2,#f0d48f);touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#oli.oli3d .oli3d-launch:focus-visible{outline:1px solid var(--gold2,#f0d48f);outline-offset:-10px;border-radius:18px}
#oli.oli3d .oli3d-stage{position:absolute;inset:0;display:block;pointer-events:none;isolation:isolate}
#oli.oli3d .oli3d-poster,#oli.oli3d .oli3d-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:transparent;border:0;pointer-events:none;animation:none!important;transform:none!important;filter:none!important}
#oli.oli3d .oli3d-canvas{opacity:0}
#oli.oli3d.has-frame .oli3d-canvas{opacity:1}
#oli.oli3d.has-frame .oli3d-poster{opacity:0}
#oli.oli3d .oli3d-source{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0}
#oli.oli3d .oli3d-name{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0 6px;color:#ead39a;letter-spacing:.18em;font:600 9px/1.3 var(--sans,system-ui);opacity:.83;text-shadow:0 2px 5px #071018;pointer-events:none}
#oli.oli3d .oli3d-pause{position:absolute;right:4px;bottom:3px;z-index:4;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(224,197,135,.22);border-radius:50%;color:#ead6a4;background:rgba(6,15,22,.76);font:12px/1 system-ui;pointer-events:auto;cursor:pointer;opacity:.7;touch-action:manipulation;transition:opacity .16s ease}
#oli.oli3d .oli3d-pause:hover,#oli.oli3d .oli3d-pause:focus-visible{opacity:1;outline:1px solid rgba(240,212,143,.65);outline-offset:2px}
#oli.oli3d .oli3d-pause .play-icon{display:none}
#oli.oli3d .oli3d-pause[data-paused=true] .play-icon{display:inline}
#oli.oli3d .oli3d-pause[data-paused=true] .pause-icon{display:none}
#oli.oli3d .oli3d-hello{position:absolute;right:8px;bottom:calc(var(--oli3d-size) - 9px);width:202px;max-width:calc(100vw - 40px);padding:13px 16px;background:rgba(7,16,24,.96);border:1px solid rgba(211,163,66,.32);border-radius:13px 13px 2px 13px;box-shadow:0 10px 32px rgba(0,0,0,.2);color:#f1ebdc;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none}
#oli.oli3d .oli3d-hello strong{display:block;font:400 26px/1.1 var(--serif,Georgia);color:#f0d48f;margin-bottom:5px}
#oli.oli3d .oli3d-hello span{display:block;font:12px/1.5 var(--sans,system-ui);color:#d1d9da}
#oli.oli3d .oli3d-hello.is-visible{visibility:visible;opacity:1;transform:none}
#oli.oli3d.open .oli3d-hello{display:none}
#oli.oli3d .oli-bubble{position:absolute!important;right:8px!important;bottom:calc(var(--oli3d-size) - 8px)!important;width:min(310px,calc(100vw - 32px))!important;max-height:calc(100dvh - var(--oli3d-size) - 40px);overflow-y:auto;padding:23px;border-radius:12px 12px 3px 12px;pointer-events:auto;z-index:6}
#oli.oli3d .oli-actions button,#oli.oli3d .oli-actions a{min-height:42px}
#oli.oli3d .oli-close{min-width:32px;min-height:32px}
#oli.oli3d.oli3d-obscured{opacity:0!important;visibility:hidden;pointer-events:none!important}
#oli.oli3d.oli3d-obscured *{pointer-events:none!important}
/* The dive's wide source is fitted, not cropped; feathering is baked into its water matte. */
#oli.oli3d[data-rendered-state=dive] .oli3d-stage{inset:auto;right:calc(var(--oli3d-size)*-.198);bottom:calc(var(--oli3d-size)*.047);width:calc(var(--oli3d-size)*1.505);height:calc(var(--oli3d-size)*1.505)}
@media(max-width:740px){
  #oli.oli3d{--oli3d-size:116px;right:max(6px,env(safe-area-inset-right))!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
  #oli.oli3d .oli3d-name{font-size:8px;bottom:0}
  #oli.oli3d .oli3d-pause{right:-1px;bottom:-1px;width:30px;height:30px;font-size:11px;opacity:.82}
  #oli.oli3d .oli3d-hello{width:auto;right:12px;padding:9px 13px}
  #oli.oli3d .oli3d-hello strong{font-size:23px;margin:0}
  #oli.oli3d .oli3d-hello span{display:none}
  #oli.oli3d .oli-bubble{right:3px!important;max-height:calc(100dvh - var(--oli3d-size) - 50px)}
}
@media(max-height:450px){#oli.oli3d{--oli3d-size:92px}#oli.oli3d .oli-bubble{max-height:calc(100dvh - 116px)}}
@media(prefers-reduced-motion:reduce){#oli.oli3d,#oli.oli3d *{transition:none!important;animation:none!important}}

/* A separate screen-space overlay, NOT cropped by the OLI stage.
   Transparent holes stay transparent; every click/scroll passes through. */
.oli3d-water-screen{position:fixed!important;inset:0!important;display:block;width:100vw;height:100dvh;max-width:none;max-height:none;z-index:146;pointer-events:none!important;background:transparent!important;border:0;opacity:1;user-select:none;touch-action:auto;contain:strict}
@media(prefers-reduced-motion:reduce){.oli3d-water-screen{display:none!important}}

/* OLEA 6.3.2 — low peek mode + fast-scroll reaction bubble. */
#oli.oli3d .oli3d-reaction{
  position:absolute;right:8px;bottom:calc(var(--oli3d-size) - 8px);z-index:8;
  width:max-content;max-width:min(260px,calc(100vw - 30px));padding:10px 14px;
  border:1px solid rgba(211,163,66,.34);border-radius:13px 13px 2px 13px;
  background:rgba(7,16,24,.96);box-shadow:0 10px 30px rgba(0,0,0,.2);
  color:#f0d48f;font:400 18px/1.2 var(--serif,Georgia);letter-spacing:.01em;
  opacity:0;visibility:hidden;transform:translateY(5px) scale(.98);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;pointer-events:none;
}
#oli.oli3d .oli3d-reaction.is-visible{opacity:1;visibility:visible;transform:none}
#oli.oli3d.open .oli3d-reaction{display:none}
#oli.oli3d[data-state=peekIn] .oli3d-name,#oli.oli3d[data-state=peek] .oli3d-name,#oli.oli3d[data-state=peekOut] .oli3d-name,
#oli.oli3d[data-state=peekIn] .oli3d-pause,#oli.oli3d[data-state=peek] .oli3d-pause,#oli.oli3d[data-state=peekOut] .oli3d-pause{opacity:0;pointer-events:none}
@media(max-width:740px){
  #oli.oli3d .oli3d-reaction{right:7px;bottom:calc(var(--oli3d-size) - 2px);max-width:205px;padding:8px 11px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){#oli.oli3d .oli3d-reaction{display:none!important}}