/* The welcome screen (welcome.js). Approved by Bill 2026-10-29: the values are the final ones from the approved handoff's
   welcome.css, with its overridden and unused rules removed (2026-10-29; frozen-frame screenshots and computed styles
   compared before and after). Bill's later changes: background 20% faster (15.2 s to 12.16 s per leg); the screen fills
   the whole window. Do not change a value without Bill. */

/* The full-screen modal <dialog> over the app: resets the browser's dialog box and the app's global rules (ui.css). */
dialog#fg-welcome{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#052b85;overflow:auto;font-size:16px;line-height:normal}
#fg-welcome{font-family:'Segoe UI',Arial,sans-serif;color:#fff}
#fg-welcome::backdrop{background:#052b85}
#fg-welcome *{box-sizing:border-box}

/* 16:9 at desktop sizes, and never shorter than the window. */
#fg-welcome .screen{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:16 / 9;min-height:100%;background:#052b85;display:flex;flex-direction:column}
#fg-welcome .gradient{position:absolute;inset:-35%;z-index:-2;background:radial-gradient(ellipse at 18% 20%,#21daf2 0%,#089de1 18%,transparent 42%),radial-gradient(ellipse at 80% 72%,#08b8ef 0%,#0879e4 25%,transparent 49%),radial-gradient(ellipse at 30% 88%,#066af2 0%,transparent 42%),linear-gradient(125deg,#0645b4,#060b67 62%,#123eb7);animation:fg-drift 12.16s ease-in-out infinite alternate;transform:scale(1.04)}
#fg-welcome .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0016472b,transparent 30%,#00124430)}
#fg-welcome main{position:relative;flex:1;min-height:0;text-align:center;padding:32px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#fg-welcome .arrival{width:100%;padding-top:135px}

/* Logo: fades in and grows at the centre, holds, then glides up and shrinks to 75%. */
#fg-welcome .flier-logo{display:block;position:absolute;left:50%;top:50%;width:200px;max-width:55%;height:auto;margin:0;transform:translate(-50%,-50%);opacity:0;animation:fg-logo-sequence 3.4s cubic-bezier(.22,1,.36,1) forwards}

/* Greeting, revealed letter by letter (welcome.js sets --i per letter), then the tagline. */
#fg-welcome h2{display:block;min-height:1.2em;font-size:clamp(36px,6vw,58px);font-weight:300;line-height:1.12;letter-spacing:-1px;margin:0 0 5.1px;text-shadow:0 2px 5px rgba(0,15,55,.38)}
#fg-welcome h2 .letter{display:inline-block;white-space:pre;opacity:0;filter:blur(3px);transform:translateY(4px);animation:fg-letter .85s ease-out forwards;animation-delay:calc(3.4s + var(--i) * .075s)}
/* Letters are grouped per word so a long name wraps between words, never inside one. */
#fg-welcome .fg-word{display:inline-block;white-space:nowrap}
/* A greeting changed by Switch user shows at once: the entrance never replays. */
#fg-welcome h2.fg-still .letter{animation:none;opacity:1;filter:none;transform:none}
#fg-welcome .eyebrow{font-size:12px;letter-spacing:4px;margin-bottom:30px;opacity:0;animation:fg-work-reveal .85s ease-out forwards;animation-delay:var(--fg-tag,6.025s)}
#fg-welcome h2,#fg-welcome .eyebrow{color:#fff!important;-webkit-text-fill-color:#fff}

/* The launch button and Switch user fade and rise in together (welcome.js sets --fg-tag and --fg-act from the
   greeting's length; the defaults are the approved "Welcome back, Laura." timing). */
#fg-welcome .actions{opacity:0;transform:translateY(7px);animation:fg-actions 1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--fg-act,6.95s)}
#fg-welcome .choices{padding-bottom:23.9px}
#fg-welcome button{font-family:inherit;font-size:14px;border-radius:7px}
#fg-welcome .cursor-interaction{cursor:pointer}
#fg-welcome .choices .primary,#fg-welcome .switch{color:#fff!important;-webkit-text-fill-color:#fff}
/* Translucent glass button with a slow glow that grows stronger and faster on hover or keyboard focus. */
#fg-welcome .choices .primary{position:relative;isolation:isolate;overflow:hidden;min-width:0;font-size:12.8px;font-weight:400;padding:12px 21.6px;border-radius:5.6px;background:rgba(7,63,148,.14);border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s}
#fg-welcome .choices .primary::before{content:"";position:absolute;inset:-100%;z-index:-1;background:radial-gradient(ellipse at 30% 45%,rgba(87,224,255,.24),transparent 42%),radial-gradient(ellipse at 75% 70%,rgba(122,169,255,.15),transparent 40%);animation:fg-button-drift 10s ease-in-out infinite alternate;pointer-events:none;transition:opacity .35s;opacity:.6666667}
#fg-welcome .choices .primary:hover,#fg-welcome .choices .primary:focus-visible{background:rgba(7,63,148,.18);border-color:rgba(255,255,255,.55);box-shadow:0 0 22px rgba(60,202,255,.225),inset 0 1px 0 rgba(255,255,255,.15)}
#fg-welcome .choices .primary:hover::before,#fg-welcome .choices .primary:focus-visible::before{opacity:1;animation-duration:7s}
/* Switch user: half opacity at rest, full on hover or keyboard focus. */
#fg-welcome .switch{display:block;margin:9px auto 0;background:transparent;border:1px solid transparent;padding:9px 15px}
#fg-welcome .switch:hover{text-decoration:underline}
#fg-welcome .choices .switch{opacity:.5;transition:opacity .25s}
#fg-welcome .choices .switch:hover,#fg-welcome .choices .switch:focus-visible{opacity:1}

@keyframes fg-drift{0%{transform:translate(-4%,-3%) rotate(-5deg) scale(1.04)}50%{transform:translate(4%,3%) rotate(5deg) scale(1.12)}100%{transform:translate(-1%,5%) rotate(-2deg) scale(1.06)}}
@keyframes fg-button-drift{from{transform:translate(-12%,-8%) rotate(-8deg)}to{transform:translate(12%,8%) rotate(8deg)}}
@keyframes fg-logo-sequence{0%{opacity:0;transform:translate(-50%,-50%) scale(.84)}35.294%{opacity:1;transform:translate(-50%,-50%) scale(1)}64.706%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,calc(-50% - 123.25px)) scale(.75)}}
@keyframes fg-letter{to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes fg-work-reveal{from{opacity:0;transform:translateY(5px);letter-spacing:5px}to{opacity:1;transform:translateY(0);letter-spacing:4px}}
@keyframes fg-actions{to{opacity:1;transform:translateY(0)}}

/* Full HD and up. */
@media(min-width:1400px){
#fg-welcome .arrival{padding-top:220px}
#fg-welcome .flier-logo{width:300px}
#fg-welcome h2{font-size:72px;margin-bottom:6.8px}
#fg-welcome .eyebrow{font-size:15px;margin-bottom:40px}
#fg-welcome .choices{padding-bottom:29.95px}
#fg-welcome .choices .primary{font-size:16px;padding:15.2px 27.2px}
#fg-welcome .choices .switch{font-size:16px;margin-top:11.25px}
@keyframes fg-logo-sequence{0%{opacity:0;transform:translate(-50%,-50%) scale(.84)}35.294%{opacity:1;transform:translate(-50%,-50%) scale(1)}64.706%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,calc(-50% - 153px)) scale(.75)}}
}
/* Narrow windows: taller rather than clipped. */
@media(max-width:700px){
#fg-welcome .screen{aspect-ratio:auto;min-height:max(620px,100%)}
#fg-welcome .arrival{padding-top:140px}
}
@media(max-width:420px){
#fg-welcome .flier-logo{width:170px}
#fg-welcome .choices .primary{font-size:11.2px;padding:11.2px 14.4px}
}

/* Reduced motion: the resting layout at once, no background or button motion. */
@media(prefers-reduced-motion:reduce){
#fg-welcome .gradient,#fg-welcome .choices .primary::before,#fg-welcome .flier-logo,#fg-welcome .eyebrow,#fg-welcome .actions,#fg-welcome h2 .letter{animation:none!important}
#fg-welcome .eyebrow,#fg-welcome .actions,#fg-welcome h2 .letter{opacity:1;transform:none;filter:none}
#fg-welcome .flier-logo{opacity:1;transform:translate(-50%,calc(-50% - 123.25px)) scale(.75)}
}
@media(prefers-reduced-motion:reduce) and (min-width:1400px){#fg-welcome .flier-logo{transform:translate(-50%,calc(-50% - 153px)) scale(.75)}}