/* Living-world sign-in stage (owner t8398/t8472, build tfLW1). The world is the approved S1/S2 film set: a still from
   film frame 0 plus short silent clips cut from the approved films (blinks, a wave, the fireworks reaction). Film bytes
   are unchanged; these are new derived files. Fireworks canvases (fireworks.js) stay on top (z 3), tap halves z 1. */
html.lw-on:not(.signed-in):not(.guest-play) #gate > .gate-scene > picture{display:none!important}
html.lw-on #gate .lw-stage{position:relative;display:block;width:100%;line-height:0;overflow:hidden;background:#070d24}
html.lw-on #gate .lw-side{position:absolute;inset:0;background:#070d24 url(world-side.jpg?v=0f5c0d41) center/cover no-repeat;display:none}
html.lw-on #gate .lw-side::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(7,13,36,0) 30%,rgba(7,13,36,.55) 100%)}
html.lw-on #gate .lw-col{position:relative;margin:0 auto;width:100%;aspect-ratio:720/1248;overflow:hidden}
html.lw-on #gate .lw-col > img.lw-base,
html.lw-on #gate .lw-col > video.lw-clip,
html.lw-on #gate .lw-col > canvas.lw-hold{position:absolute;left:0;top:0;width:100%!important;height:auto!important;max-height:none!important;display:block;margin:0;border-radius:0!important;object-fit:fill;pointer-events:none}
html.lw-on #gate .lw-col > video.lw-clip{opacity:0;transition:opacity .12s linear}
html.lw-on #gate .lw-col > video.lw-clip.lw-show{opacity:1}
html.lw-on #gate .lw-col > canvas.lw-hold{opacity:0;transition:opacity .6s ease}
html.lw-on #gate .lw-col > canvas.lw-hold.lw-show{opacity:1;transition:none}
/* the approved film plays in the same window, same size, same place: no cut away */
html.lw-on #gate .gate-scene .lw-col > video.goc-skit-film{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:fill!important;background:transparent!important;margin:0!important;border-radius:0!important}
html.lw-on #gate .lw-col > .gate-hear{z-index:1}
/* fireworks light on the faces (reflection), only while the show is near */
html.lw-on #gate .lw-glint{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--lw-c,rgba(255,226,140,.55)),rgba(255,226,140,0))}
html.lw-on #gate .lw-glint.lw-flash{animation:lw-glint .7s ease-out}
@keyframes lw-glint{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
html.lw-on #gate .lw-cap{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);max-width:92%;z-index:2;line-height:1.25;font:700 clamp(13px,3.6vw,17px)/1.25 "Atkinson Hyperlegible",system-ui,sans-serif;color:#fff8e6!important;-webkit-text-fill-color:#fff8e6!important;background:rgba(7,13,36,.86);border:1px solid rgba(255,214,106,.55);border-radius:12px;padding:6px 14px;text-align:center;width:max-content;opacity:0;transition:opacity .25s;pointer-events:none;white-space:normal}
html.lw-on #gate .lw-cap.lw-show{opacity:1}
html.lw-on #gate .lw-cap b{color:#ffd76a!important;-webkit-text-fill-color:#ffd76a!important;white-space:nowrap}
html.lw-on #gate .lw-cap small{color:#e6edf5!important;-webkit-text-fill-color:#e6edf5!important;display:block;font-weight:400;font-size:.78em;opacity:.85;margin-top:2px}
/* wide screens (laptop, phone landscape): the world column fills the screen height, the same night sky fills the sides */
@media (min-aspect-ratio:1/1){
  html.lw-on #gate .lw-stage{height:min(calc(100svh - 120px),980px)}
  html.lw-on #gate .lw-side{display:block}
  html.lw-on #gate .lw-col{height:100%;width:auto;box-shadow:0 0 60px 30px rgba(7,13,36,.7)}
  html.lw-on #gate .lw-cap{font-size:clamp(12px,1.6vh,17px)}
}
/* phone landscape: the world fills the screen height (the skit bar and sign-in sit just below) */
@media (min-aspect-ratio:1/1) and (max-height:560px){html.lw-on #gate .lw-stage{height:calc(100svh - 16px)}}
@media (prefers-reduced-motion:reduce){html.lw-on #gate .lw-glint{display:none}}