/* scene-text.css: phone only (portrait, with motion). The opening words sit on the window glass, then thin into the fog and reappear in the cloud.
   Everything is under html.mo, which js/mobile.js adds only for portrait phones without reduced motion. Nothing here reaches desktop. */
.gt{display:none}
html.mo .gt{display:block;position:absolute;left:var(--gx,195px);top:var(--gy,414px);width:var(--gw,195px);transform:translate(-50%,-50%);pointer-events:none;z-index:3;visibility:hidden}
html.mo .gt-t{position:relative;isolation:isolate;text-align:center;color:#25165C}
html.mo .gt-t::before{content:"";position:absolute;z-index:-1;inset:-18% -17% -20% -17%;background:radial-gradient(closest-side,rgba(240,236,250,.94) 0,rgba(240,236,250,.9) 55%,rgba(240,236,250,.5) 82%,rgba(240,236,250,0) 100%)}
html.mo .gt .h{font:800 calc(var(--gw,195px)*.118)/1.12 var(--f-d);letter-spacing:-.02em;text-wrap:balance;margin:0}
html.mo .gt .s{font:500 calc(var(--gw,195px)*.078)/1.4 var(--f-b);margin:.6em 0 0;color:#2C2060;text-wrap:balance}
/* the real headline and line stay in the page for screen readers and search; the glass copy is what the eye sees */
html.mo .hero-copy .ttl,html.mo .hero-copy .sub{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* no dark band over the bottom of the glass: the buttons sit on the plain wall */
html.mo .hero::after{display:none}
html.mo .hero-copy{gap:0}
/* the words in the cloud: same ink as the words on the glass, with a cloud-coloured halo so they sit in the sky */
html.mo .cloud .ttl.m{color:#25165C;text-shadow:0 0 14px rgb(244 241 253/.85),0 0 3px rgb(244 241 253/.6)}
html.mo .cloud .coord{color:#2C2060;text-shadow:0 0 10px rgb(244 241 253/.9),0 0 3px rgb(244 241 253/.7)}