/* ============ Landing / pre-login shell + intro (spec 2026-09-19-landing-intro-design.md) ============
   Loaded after styles.css and theme.css. The shell styles #login (sign in, forgot password,
   registration, staff sign-up, emailed verify/reset links) so every pre-login screen shares the
   landing look. The intro overlay's classes are all li-* so they never meet the app's .card,
   .scene or global button rules. */

.lp {
  --lp-navy: #1b2a42; --lp-deep: #121c2e; --lp-glow: #2c4166;
  --lp-gold: #f2d27a; --lp-gold-hi: #f7e3a3; --lp-gold-lo: #d8b64a;
  --lp-ink: #ffffff; --lp-soft: #c9d3e2; --lp-card-ink: #1e2a3a; --lp-link: #4a6fa5;
  position: relative; min-height: 100vh; box-sizing: border-box; overflow: hidden;
  display: grid; place-items: center; padding: 40px 20px;
  background: radial-gradient(ellipse at 38% 45%, var(--lp-glow) 0%, var(--lp-navy) 50%, var(--lp-deep) 100%);
  color: var(--lp-ink);
}

/* faint twinkling gold stars (dots are added by landing-intro.js) */
.lp-sky, .li-sky { position: absolute; inset: 0; pointer-events: none; }
.lp-sky i, .li-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--lp-gold-hi, #f7e3a3);
  opacity: .15; animation: lp-twinkle 3s ease-in-out infinite; }
@keyframes lp-twinkle { 0%, 100% { opacity: .12; transform: scale(.8); } 50% { opacity: .75; transform: scale(1.3); } }

.lp-grid { position: relative; z-index: 1; width: min(1040px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 36px 64px; align-items: center; }
.lp-kick { font-weight: 700; font-size: 12px; letter-spacing: .16em; color: var(--lp-gold); }
.lp-tag { margin: 14px 0 0; font-weight: 800; font-size: clamp(28px, 3.7vw, 46px); line-height: 1.1;
  letter-spacing: -.01em; color: var(--lp-ink); text-wrap: balance; }
.lp-tag em { font-style: normal; background: linear-gradient(90deg, var(--lp-gold-hi), var(--lp-gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

.lp-cardcol { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* the logo sits on a white tile so every pastel square keeps its original shade (user 2026-09-19) */
.lp-logo { position: relative; z-index: 2; width: 84px; padding: 11px; margin-bottom: -24px; box-sizing: border-box;
  background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(242, 210, 122, .65), 0 0 34px rgba(242, 210, 122, .4), 0 12px 24px rgba(0, 0, 0, .4); }
.lp-mark { display: block; width: 100%; height: auto; }

.lp .login-card { display: block; width: 100%; grid-template-columns: none; overflow: visible;
  background: #fff; color: var(--lp-card-ink); border-radius: 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.lp .login-form { padding: 42px 28px 26px; gap: 12px; }
.lp .login-form h1 { text-align: center; font-size: 22px; color: var(--lp-card-ink); }
.lp #login-form > h1 + .muted { text-align: center; line-height: 1.45; margin: 0 0 4px; }
.lp .login-form .lp-link { text-align: center; margin: 0; }
.lp .login-form a { color: var(--lp-link); font-weight: 600; }
.lp .login-form input:not([type="checkbox"]):not([type="radio"]) { background: #f9fafc; }
.lp .login-form input:not([type="checkbox"]):not([type="radio"]):focus { background: #fff; }

/* Long forms (supplier registration, staff sign-up): one column, the tagline becomes a compact
   header and the card widens so the fields have room. Same backdrop, logo and card. */
.lp:has(#prelogin-panel:not([hidden]) :is(#rg-submit, #ss-submit)) { place-items: start center; }
.lp:has(#prelogin-panel:not([hidden]) :is(#rg-submit, #ss-submit)) .lp-grid { grid-template-columns: minmax(0, 1fr); width: min(600px, 100%); gap: 22px; }
.lp:has(#prelogin-panel:not([hidden]) :is(#rg-submit, #ss-submit)) .lp-brand { text-align: center; }
.lp:has(#prelogin-panel:not([hidden]) :is(#rg-submit, #ss-submit)) .lp-tag { font-size: clamp(20px, 2.6vw, 26px); }
.lp:has(#prelogin-panel:not([hidden]) :is(#rg-submit, #ss-submit)) .lp-tag br { display: none; }
.lp:has(#prelogin-panel:not([hidden]) :is(#rg-submit, #ss-submit)) .login-form { padding: 44px 32px 28px; }
.lp #prelogin-title { text-align: center; }

@media (max-width: 760px) {
  .lp { place-items: start center; padding: 28px 16px; }
  .lp-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; width: min(440px, 100%); }
  .lp-brand { text-align: center; }
  .lp-tag { font-size: clamp(22px, 7vw, 30px); }
  .lp .login-form { padding: 40px 20px 22px; }
}

/* ---- the hand-over from the intro: the page stays hidden under the overlay, then fades in ---- */
.lp.lp-intro .lp-brand, .lp.lp-intro .login-card { opacity: 0; }
.lp.lp-logo-wait .lp-logo { visibility: hidden; }      /* the flying logo lands here, then this one shows */
.lp.lp-reveal .lp-brand { animation: lp-up .9s cubic-bezier(.25, .9, .3, 1) .15s both; }
.lp.lp-reveal .login-card { animation: lp-up 1s cubic-bezier(.25, .9, .3, 1) both; }
.lp.lp-reveal #login-form > * { animation: lp-up .6s ease-out both; }
.lp.lp-reveal #login-form > :nth-child(1) { animation-delay: .25s; } .lp.lp-reveal #login-form > :nth-child(2) { animation-delay: .34s; }
.lp.lp-reveal #login-form > :nth-child(3) { animation-delay: .43s; } .lp.lp-reveal #login-form > :nth-child(4) { animation-delay: .52s; }
.lp.lp-reveal #login-form > :nth-child(5) { animation-delay: .61s; } .lp.lp-reveal #login-form > :nth-child(n+6) { animation-delay: .7s; }
@keyframes lp-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ================= intro overlay ================= */
.li-overlay { position: fixed; inset: 0; z-index: 2000; overflow: hidden; color: #fff;
  font-family: Inter, 'Segoe UI', system-ui, sans-serif; }
/* the backdrop is its own layer so it can fade while the flying logo stays solid */
.li-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 45% 50%, #2c4166 0%, #1b2a42 50%, #121c2e 100%); }
.li-stage { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; }
.li-chip { position: absolute; left: 0; top: 0; z-index: 5; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  offset-rotate: 0deg; offset-distance: 0px;
  offset-anchor: 50% 25px; }   /* bubble centre on the path, so bubbles, dashed ring and gold line align (user 2026-09-19) */
.li-bub { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--c1), var(--c2)); border: 1px solid rgba(255, 255, 255, .25);
  outline: 2px solid transparent; outline-offset: 3px; transition: box-shadow .35s ease, outline-color .35s ease;
  box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 55%, transparent), 0 10px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45); }
.li-bub.lit { outline-color: rgba(247, 227, 163, .95);
  box-shadow: 0 0 28px rgba(247, 227, 163, .75), 0 10px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45); }
.li-bub svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.li-chip span { font-size: 10px; font-weight: 700; color: #e8edf5; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.li-dust { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: #f7e3a3; box-shadow: 0 0 8px #f2d27a; }
.li-logo { position: absolute; left: 385px; top: 184px; width: 130px; height: 152px; z-index: 6; }
.li-logo svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.li-logo rect { transform-box: fill-box; transform-origin: center; }
.li-tile { position: absolute; inset: -17px; background: #fff; border-radius: 22px; opacity: 0;
  box-shadow: 0 0 0 1px rgba(242, 210, 122, .65), 0 0 44px rgba(242, 210, 122, .45), 0 16px 30px rgba(0, 0, 0, .42); }
.li-halo { position: absolute; left: 300px; top: 110px; width: 300px; height: 300px; border-radius: 50%; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(242, 210, 122, .32), rgba(242, 210, 122, 0) 62%); }
.li-ring { position: absolute; left: 280px; top: 90px; width: 340px; height: 340px; border-radius: 50%; z-index: 2; opacity: 0;
  border: 1px dashed rgba(242, 210, 122, .3); box-sizing: border-box; }
.li-journey { position: absolute; left: 0; top: 0; width: 960px; height: 540px; z-index: 4; pointer-events: none; overflow: visible; }
.li-journey path { fill: none; stroke: url(#li-gold); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: url(#li-glow); }
.li-spark { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; z-index: 5; pointer-events: none; opacity: 0;
  offset-anchor: center; offset-rotate: 0deg; background: #fffbe8;
  box-shadow: 0 0 10px 4px rgba(247, 227, 163, .85), 0 0 26px 8px rgba(242, 210, 122, .45); }
/* centred on the LOGO (stage x=450), not on the stage (x=480): the logo sits at the ring's
   centre and cannot move, so the text lines up under it (user 2026-09-22) */
.li-endcard { position: absolute; left: 0; right: 60px; top: 380px; z-index: 6; text-align: center; opacity: 0; pointer-events: none; }
.li-endcard .k { font-weight: 700; font-size: 12px; letter-spacing: .2em; color: #f2d27a; }
.li-endcard .t { font-weight: 800; font-size: 30px; margin-top: 6px; letter-spacing: -.01em; }
.li-endcard .s { font-size: 13px; color: #c9d3e2; margin-top: 8px; letter-spacing: .06em; }
.li-overlay button.li-ctl { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9;
  background: rgba(255, 255, 255, .1); color: #e8edf5; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px; padding: 7px 16px; font: 600 13px Inter, 'Segoe UI', sans-serif; cursor: pointer; }
.li-overlay button.li-ctl:hover { background: rgba(255, 255, 255, .18); }
.li-overlay button.li-ctl:focus-visible { outline: 2px solid #f2d27a; outline-offset: 2px; }
.li-overlay .li-skip { right: 18px; }
.li-overlay .li-sound { left: 18px; }