/* Final 03 — Liquid Glass motion for ROTOR (web translation of Apple's glass motion model).
   Glass never fades: it MATERIALIZES by ramping lensing (backdrop blur + saturation + tint + rim + shadow) via --lg-lens.
   Size is material: bigger glass = thicker glass (deeper shadow, stronger lens) via --lg-thick.
   Springs are ROTOR-calm (no visible overshoot); every curve is replaced under Reduce Motion. */
@property --lg-lens{syntax:'<number>';inherits:true;initial-value:1}
@property --lg-thick{syntax:'<number>';inherits:true;initial-value:1}
:root{--lgS-e:cubic-bezier(.22,.61,.36,1);--lgS-d:.6s;--lgM-e:cubic-bezier(.22,.61,.36,1);--lgM-d:.55s}

/* ---- title: the overlay itself never fades (it holds glass); its vignette lives on ::before and fades instead */
#launchTitle{transition:none!important;background:none!important;isolation:isolate}
#launchTitle.lt-leaving{opacity:1!important}
#launchTitle::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 85% at 50% 45%,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.88) 100%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5));
  transition:opacity .9s var(--lgS-e)}
#launchTitle.lt-leaving::before{opacity:0}
#launchTitle :is(.lt-word,.lt-tag,.lt-line,.lt-foot){transition:opacity .7s var(--lgS-e),transform .9s var(--lgS-e)}
#launchTitle.lt-leaving :is(.lt-word,.lt-tag,.lt-line,.lt-foot){opacity:0;transform:translateY(-6px)}
#launchTitle.lt-leaving .lt-play{opacity:0;transition:opacity .6s var(--lgS-e)}

/* ---- glass buttons and windows: material driven by --lg-lens */
#launchTitle :is(.lt-btn:not(.lt-play),.lt-win),#worldsPanel{--lg-lens:1}
#launchTitle .lt-btn:not(.lt-play){
  background:linear-gradient(180deg,rgba(255,255,255,calc(.09*var(--lg-lens))),rgba(255,255,255,calc(.02*var(--lg-lens)))),rgba(6,19,15,calc(.62*var(--lg-lens)));
  backdrop-filter:blur(calc(14px*var(--lg-lens))) saturate(calc(1 + .2*var(--lg-lens)));-webkit-backdrop-filter:blur(calc(14px*var(--lg-lens))) saturate(calc(1 + .2*var(--lg-lens)));
  border-color:rgba(240,246,242,calc(.16*var(--lg-lens)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.14*var(--lg-lens))),0 calc(18px*var(--lg-lens)) calc(40px*var(--lg-lens)) rgba(0,0,0,calc(.45*var(--lg-lens)));
  color:rgba(240,246,242,clamp(0,calc(var(--lg-lens)*1.6 - .6),1));
  transition:--lg-lens var(--lgS-d) var(--lgS-e) var(--lg-delay,0s),border-color .6s,transform .6s var(--lgS-e)}
#launchTitle .lt-btn.lt-worlds{
  background:linear-gradient(160deg,rgba(255,255,255,calc(.12*var(--lg-lens))),rgba(255,255,255,calc(.02*var(--lg-lens))) 45%,rgba(4,60,255,calc(.28*var(--lg-lens)))),rgba(6,19,15,calc(.62*var(--lg-lens)));
  border-color:rgba(111,155,255,calc(.5*var(--lg-lens)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.2*var(--lg-lens))),0 calc(22px*var(--lg-lens)) calc(60px*var(--lg-lens)) calc(-20px*var(--lg-lens)) rgba(4,60,255,calc(.75*var(--lg-lens)))}
#launchTitle .lt-btn.lt-worlds small{color:rgba(182,201,193,clamp(0,calc(var(--lg-lens)*1.6 - .6),1))}
#launchTitle .lt-win{transition:--lg-lens var(--lgS-d) var(--lgS-e) var(--lg-delay,0s),border-color .6s,box-shadow .6s,transform .6s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(160deg,rgba(255,255,255,calc(.10*var(--lg-lens))),rgba(255,255,255,calc(.03*var(--lg-lens))) 40%,rgba(4,60,255,calc(.12*var(--lg-lens))));border-color:rgba(255,255,255,calc(.16*var(--lg-lens)))}
#launchTitle .lt-win > *{opacity:clamp(0,calc(var(--lg-lens)*2 - 1),1)}
#launchTitle.lt-leaving :is(.lt-btn:not(.lt-play),.lt-win),#launchTitle.lg-pre :is(.lt-btn:not(.lt-play),.lt-win){--lg-lens:0}
#launchTitle.lg-pre :is(.lt-word,.lt-tag,.lt-line,.lt-foot,.lt-play){opacity:0}

/* ---- the morphing selection lens: one glass capsule that travels between menu buttons */
#launchTitle nav{position:relative;isolation:isolate}
#launchTitle nav > .lt-btn{position:relative;z-index:1}
#launchTitle .lg-lens{position:absolute;left:-7px;right:-7px;top:0;height:0;z-index:0;pointer-events:none;border-radius:20px;--lg-lens:0;
  transform:translate3d(0,var(--lg-y,0px),0);
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,calc(.20*var(--lg-lens))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(.10*var(--lg-lens))),rgba(4,60,255,calc(.16*var(--lg-lens))));
  border:1px solid rgba(255,255,255,calc(.28*var(--lg-lens)));
  backdrop-filter:blur(calc(4px*var(--lg-thick)*var(--lg-lens))) saturate(calc(1 + .35*var(--lg-lens)));-webkit-backdrop-filter:blur(calc(4px*var(--lg-thick)*var(--lg-lens))) saturate(calc(1 + .35*var(--lg-lens)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.35*var(--lg-lens))),0 calc(14px*var(--lg-thick)) calc(38px*var(--lg-thick)) calc(-8px*var(--lg-thick)) rgba(4,60,255,calc(.55*var(--lg-lens)));
  transition:transform var(--lgM-d) var(--lgM-e),height var(--lgM-d) var(--lgM-e),--lg-thick var(--lgM-d) var(--lgM-e),--lg-lens var(--lgS-d) var(--lgS-e)}
#launchTitle .lg-lens.on{--lg-lens:1}

/* ---- the in-game WORLDS panel materializes instead of fading */
#worldsPanel{--lg-lens:0;opacity:1!important;transform:scale(calc(.975 + .025*var(--lg-lens)))!important;
  background:rgba(0,0,0,calc(.86*var(--lg-lens)))!important;
  backdrop-filter:blur(calc(22px*var(--lg-lens))) saturate(calc(1 + .2*var(--lg-lens)))!important;-webkit-backdrop-filter:blur(calc(22px*var(--lg-lens))) saturate(calc(1 + .2*var(--lg-lens)))!important;
  border-color:rgba(240,246,242,calc(.16*var(--lg-lens)))!important;
  box-shadow:0 calc(40px*var(--lg-lens)) calc(120px*var(--lg-lens)) rgba(0,0,0,calc(.8*var(--lg-lens))),0 0 0 1px rgba(4,60,255,calc(.25*var(--lg-lens))),inset 0 1px 0 rgba(255,255,255,calc(.12*var(--lg-lens)))!important;
  transition:--lg-lens .8s var(--lgS-e)!important}
#worldsPanel.in{--lg-lens:1}
#worldsPanel > *{opacity:clamp(0,calc(var(--lg-lens)*2 - 1),1)}

@media (prefers-reduced-motion:reduce){
  #launchTitle :is(.lt-btn,.lt-win,.lg-lens,.lt-word,.lt-tag,.lt-line,.lt-foot),#launchTitle::before,#worldsPanel{transition-duration:.01s!important;transition-delay:0s!important}
  #launchTitle .lg-lens{transition:--lg-lens .2s linear!important}
  #worldsPanel{transform:none!important}
}
#launchTitle .lt-btn.lt-play{transition:opacity .7s var(--lgS-e) var(--lg-delay,0s),transform .6s var(--lgS-e),background .5s}

/* Final 03 layout fix: with WORLDS added the menu grew and the glass windows covered Settings / How to play.
   Settings + How to play now share a row, and the windows flow below the menu (never overlap it). */
#launchTitle .lt-stage{gap:clamp(12px,2.2vh,26px)}
#launchTitle nav{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;width:min(380px,100%)}
#launchTitle nav > .lt-play,#launchTitle nav > .lt-worlds{grid-column:1 / -1}
#launchTitle nav > #ltSettings,#launchTitle nav > #ltHow{font-size:17px;padding:14px 10px;letter-spacing:.16em}
#launchTitle .lt-windows{position:static!important;margin-top:clamp(4px,1.4vh,14px)}
#launchTitle .lt-win{width:min(230px,calc(33vw - 24px))}
#launchTitle .lg-lens{left:0;right:auto;width:0;transform:translate3d(var(--lg-x,0px),var(--lg-y,0px),0);transition:transform var(--lgM-d) var(--lgM-e),height var(--lgM-d) var(--lgM-e),width var(--lgM-d) var(--lgM-e),--lg-thick var(--lgM-d) var(--lgM-e),--lg-lens var(--lgS-d) var(--lgS-e)}
@media (max-height:820px){#launchTitle .lt-word{font-size:clamp(56px,11vh,120px)}#launchTitle .lt-win-pane{aspect-ratio:16/8}}

#launchTitle.lg-snap,#launchTitle.lg-snap *,#launchTitle.lg-snap::before{transition:none!important}