/* Section-sized storytelling, retaining the supplied artwork and block styling. */
html.home-sections{scroll-snap-type:y mandatory;scroll-padding-top:0}
.home-sections main{padding-top:0}
.home-sections .scene,.home-sections .scene.hero{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,560px) minmax(180px,340px);justify-content:center;align-content:center;align-items:center;gap:clamp(24px,5vw,90px);padding:110px 6vw 54px}
.home-sections .scene:nth-of-type(even){grid-template-columns:minmax(180px,340px) minmax(0,560px)}
.home-sections .scene:nth-of-type(even)>.card,.home-sections .scene:nth-of-type(even)>.portal{grid-column:2;grid-row:1}
.home-sections .scene .card,.home-sections .scene.hero .card,.home-sections .scene>.portal{display:block;grid-column:1;grid-row:1;width:100%;max-width:560px;margin:0;padding:26px 30px;z-index:2}
.home-sections .hero .card>p:not(.eyebrow){font-size:17px;margin:12px 0;max-width:none}
.home-sections .hero .sign{margin-bottom:16px;white-space:normal}
.home-sections .hero .actions{margin-top:18px;flex-wrap:wrap}
.home-sections .scene>.section-lion{position:relative;grid-column:2;grid-row:1;width:100%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 16px 12px #14243866);z-index:2}
.home-sections .scene:nth-of-type(even)>.section-lion{grid-column:1}
.section-lion img{position:absolute;width:100%;height:100%;object-fit:contain}
.home-sections .features,.home-sections .hero-lite,.home-sections .mascot-lite{display:none}
.home-sections .scene .lion{display:none}
.home-sections .portal .poster{max-height:190px;object-fit:cover;width:100%}
.home-sections footer.site{scroll-snap-align:start;position:relative;z-index:2}
.section-lion{animation-play-state:paused}
.is-section-current .section-lion{animation-play-state:running}
.section-lion[data-act="wave"]{animation:welcome-wave 3s ease-in-out infinite}
.section-lion[data-act="jump"]{animation:welcome-jump 2.8s ease-in-out infinite}
.section-lion[data-act="sway"]{animation:welcome-sway 4s ease-in-out infinite}
.section-lion[data-act="celebrate"]{animation:welcome-celebrate 4s ease-in-out infinite}
.section-lion[data-act="peek"]{animation:welcome-peek 4s ease-in-out infinite}
@keyframes welcome-wave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateY(-9px)}}
@keyframes welcome-jump{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-26px) rotate(3deg)}40%{transform:scale(1.04,.96)}}
@keyframes welcome-sway{0%,100%{transform:translateX(-9px) rotate(-3deg)}50%{transform:translateX(9px) rotate(3deg)}}
@keyframes welcome-celebrate{0%,70%,100%{transform:rotate(0)}20%{transform:translateY(-18px) rotate(-8deg)}40%{transform:translateY(-12px) rotate(8deg)}}
@keyframes welcome-peek{0%,100%{transform:translateY(5px) rotate(3deg)}50%{transform:translateY(-10px) rotate(-4deg)}}
.section-next{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);border:2px solid var(--outline);background:var(--paper);padding:5px 14px;font:700 13px var(--font-body);cursor:pointer}
.auth-layout .side,.auth-layout>.panel-head{display:none}
.auth-layout .panel-layout{display:block;max-width:1040px;margin:auto}
.auth-layout .content{padding:0;width:100%}
.auth-shell{display:grid;grid-template-columns:.85fr 1fr;max-width:1000px;margin:28px auto;overflow:hidden;border:4px solid var(--outline);background:var(--paper);box-shadow:9px 9px 0 #14243855}
.auth-story{padding:36px;background:linear-gradient(150deg,#163e55,#21644e);color:white;display:flex;flex-direction:column;justify-content:center;gap:20px}
.auth-story img{width:min(100%,230px);align-self:center;filter:drop-shadow(0 12px 10px #0004)}
.auth-story h2{font-size:34px}.auth-story p{color:#ecf8f1}
.auth-box{padding:38px;min-width:0}.auth-box h1{font-size:38px;margin-bottom:10px}
.auth-box form{display:grid;gap:8px}.auth-box input{width:100%;min-height:48px;padding:10px 12px;background:#fffdf7;border:2px solid #8b795d;font:inherit}
.auth-tabs{display:flex;gap:6px;margin-bottom:24px;border-bottom:2px solid #d2bd95;padding-bottom:12px}
.auth-tabs button,.auth-text-link{background:none;border:0;font:700 15px var(--font-body);color:#174f86;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.auth-tabs button{padding:8px 16px;text-decoration:none}.auth-tabs [aria-current=true]{background:#214e40;color:#fff}
.auth-password-label{display:flex;justify-content:space-between;align-items:center;gap:10px}
.auth-box .btn{width:100%;margin-top:10px}.auth-box .auth-google{background:#fff;color:#25384b;font-size:16px}
.auth-divider{display:flex;align-items:center;gap:12px;font-size:13px;color:#68573d;margin:20px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#c7b18b}
.auth-note{margin:14px 0 18px;font-size:15px;overflow-wrap:anywhere}.auth-note:empty{display:none}.auth-caption{font-size:13px;color:#675a45;margin-top:16px}
.ops #login:has(.auth-shell){max-width:1000px;background:none;border:0;padding:0;box-shadow:none}.ops .auth-shell{margin-top:30px}
.payment-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.payment-options label{padding:8px 10px;border:2px solid #b4a084;background:var(--paper)}
.provider-settings{display:grid;gap:15px;max-width:700px}.provider-settings input{width:100%;min-height:42px;padding:8px}.provider-settings small{display:block}.provider-settings fieldset{padding:18px;border:2px solid #baa481}
[hidden]{display:none!important}
@media(max-width:760px){html.home-sections{scroll-snap-type:y proximity}.home-sections .scene,.home-sections .scene.hero,.home-sections .scene:nth-of-type(even){grid-template-columns:1fr;gap:4px;padding:90px 5vw 56px;align-content:center}.home-sections .scene>.section-lion,.home-sections .scene:nth-of-type(even)>.section-lion{grid-column:1;grid-row:1;width:130px;justify-self:end;margin-bottom:2px}.home-sections .scene .card,.home-sections .scene>.portal,.home-sections .scene.hero .card,.home-sections .scene:nth-of-type(even)>.card,.home-sections .scene:nth-of-type(even)>.portal{grid-column:1;grid-row:2;padding:20px;max-width:none}.home-sections .scene .actions .btn{white-space:normal}.auth-shell{grid-template-columns:1fr;margin:10px}.auth-story{padding:20px;display:block}.auth-story img{display:none}.auth-story h2{font-size:26px}.auth-story p{margin:8px 0 0}.auth-box{padding:24px}.auth-box h1{font-size:32px}.auth-layout .panel-page{padding-left:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){.section-lion{animation:none!important}.home-sections{scroll-behavior:auto}}

.scene:not(.is-section-current)>.section-lion{animation-play-state:paused}
.provider-settings fieldset{display:grid;gap:8px}.provider-settings fieldset label:not(:first-of-type){margin-top:12px}.provider-settings select{min-height:42px;font:inherit;padding:8px;background:#fff}.ops .side .who>div{min-width:0}.ops .side .who b{overflow-wrap:anywhere}.ops .pcard code{overflow-wrap:anywhere}

/* Entrances. They start while a section is still sliding in (see js/home-sections.js), so a card that is already on
   screen never blinks out and back. The scroll-position class from the 3D script no longer drives any animation here. */
.home-sections .scene.is-active .card,.home-sections .scene.is-active .portal{animation:none}
.home-sections .scene.is-entering>.card,.home-sections .scene.is-entering>.portal{animation:pop .6s cubic-bezier(.2,.9,.3,1.15) both}
.home-sections .scene.is-entering>.section-lion img{animation:lion-arrive .75s cubic-bezier(.2,.9,.3,1.2) .12s both}
@keyframes lion-arrive{0%{opacity:0;transform:translateY(60px) scale(.6) rotate(-10deg)}55%{opacity:1;transform:translateY(-22px) scale(1.06) rotate(5deg)}78%{transform:translateY(5px) scale(.98,.95)}100%{opacity:1;transform:none}}
/* The lion cheers when the server address is copied. */
.section-lion.is-cheering img{animation:lion-cheer 1s cubic-bezier(.3,.8,.3,1) both!important}
@keyframes lion-cheer{0%{transform:none}30%{transform:translateY(-46px) rotate(-14deg) scale(1.08)}55%{transform:translateY(-30px) rotate(12deg) scale(1.08)}80%{transform:translateY(4px) scale(1.02,.94)}100%{transform:none}}
.section-next{transition:transform .15s,background-color .15s}
.section-next:hover{transform:translateX(-50%) translateY(-2px);background:var(--yellow)}
.section-next:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.home-sections .scene.is-entering>.card,.home-sections .scene.is-entering>.portal,.home-sections .scene.is-entering>.section-lion img,.section-lion.is-cheering img{animation:none!important}}
.connect-steps{margin:10px 0 14px;padding-left:22px;display:grid;gap:6px}.connect-steps li{line-height:1.45}
.provider-settings [data-connect-note],.provider-settings [data-settings-note]{min-height:22px;overflow-wrap:anywhere}

/* Auth status line: a clear box with an icon. Green for success, red for errors, blue while waiting. */
.auth-note[data-state]{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:2px solid;border-left-width:8px;font-weight:700;line-height:1.45}
.auth-note[data-state]::before{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;color:#fff;font:800 13px/1 var(--font-body)}
.auth-note[data-state=success]{background:#e7f6e3;border-color:#2e7d32;color:#1b5e20}
.auth-note[data-state=success]::before{content:'\2713';background:#2e7d32}
.auth-note[data-state=error]{background:#fdecec;border-color:#c62828;color:#8e1b1b}
.auth-note[data-state=error]::before{content:'!';background:#c62828}
.auth-note[data-state=info]{background:#eaf2fb;border-color:#4a76a8;color:#1f4570;font-weight:600}
.auth-note[data-state=info]::before{content:'i';background:#4a76a8;font-family:Georgia,serif;font-style:italic}
