/* Foodera sign-in — brand hero (moving light, swoosh pattern, glass cards) + floating form card */
.lg { --hero-1: #0b1730; --hero-2: #5e8cc4; display: grid; grid-template-columns: 1.08fr 1fr; min-height: 100vh; min-height: 100dvh; background: var(--bg); }

/* ---------- Hero ---------- */
.lg-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(48px + env(safe-area-inset-top)) 56px calc(44px + env(safe-area-inset-bottom));
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--hero-2) 45%, transparent), transparent 62%),
    radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--hero-2) 26%, transparent), transparent 60%),
    linear-gradient(160deg, #13244a, var(--hero-1) 55%, #060d1d);
}
/* Repeating Foodera swoosh pattern */
.lg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='72' viewBox='0 0 120 72'%3E%3Cpath d='M12 30c14-16 30-16 48 6s34 22 48 6' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 120px 72px;
}
.lg.is-anim .lg-hero::after { animation: lg-pattern 70s linear infinite; }
@keyframes lg-pattern { from { background-position: 0 0; } to { background-position: 600px 360px; } }

/* Moving light */
.lg-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.lg-spot { position: absolute; width: 70vmax; height: 70vmax; left: -35vmax; top: -35vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 30%, transparent 62%); }
.lg-spot.b { width: 55vmax; height: 55vmax; left: -27vmax; top: -27vmax; opacity: .7;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-2) 45%, transparent) 0%, transparent 60%); }
.lg.is-anim .lg-spot.a { animation: lg-drift-a 22s ease-in-out infinite alternate; }
.lg.is-anim .lg-spot.b { animation: lg-drift-b 29s ease-in-out infinite alternate; }
@keyframes lg-drift-a { 0% { transform: translate(8vw, 6vh); } 33% { transform: translate(38vw, 30vh); } 66% { transform: translate(14vw, 70vh); } 100% { transform: translate(44vw, 88vh); } }
@keyframes lg-drift-b { 0% { transform: translate(46vw, 82vh); } 50% { transform: translate(6vw, 40vh); } 100% { transform: translate(36vw, 4vh); } }

/* Brand */
.lg-brand { display: inline-flex; color: #fff; align-self: flex-start; }
.lg-brand:hover { text-decoration: none; }
.lg-logo { display: inline-flex; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.lg-logo .logo { height: 54px; }
.lg.is-anim .lg-logo { animation: lg-float 7s ease-in-out infinite, lg-in .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes lg-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* Copy */
.lg-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
[dir="rtl"] .lg-eyebrow { letter-spacing: 0; font-size: 14px; }
.lg-eyebrow span { width: 44px; height: 2px; background: currentColor; opacity: .7; flex: none; }
.lg-hero h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; max-width: 640px; text-shadow: 0 6px 30px rgba(0,0,0,.25); }
.lg-hero h2 em { font-style: normal; color: color-mix(in srgb, var(--hero-2) 60%, #fff); }
.lg-text { color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.7; max-width: 560px; margin: 0; }
.lg.is-anim .lg-copy > * { animation: lg-in .9s cubic-bezier(.2,.7,.2,1) both; }
.lg.is-anim .lg-copy h2 { animation-delay: .12s; }
.lg.is-anim .lg-copy .lg-text { animation-delay: .24s; }

/* Glass cards */
.lg-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 680px; }
.lg-card { position: relative; overflow: hidden; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s, box-shadow .35s; }
.lg-card strong { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.lg-card strong .ic { width: 18px; height: 18px; color: color-mix(in srgb, var(--hero-2) 55%, #fff); }
.lg-card small { display: block; margin-top: 5px; color: rgba(255,255,255,.7); font-size: 12.5px; }
.lg-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%); }
.lg.is-anim .lg-card { animation: lg-in .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.35s + var(--i) * .12s); }
.lg.is-anim .lg-card::after { animation: lg-shine 7s ease-in-out infinite; animation-delay: calc(2s + var(--i) * .8s); }
.lg-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
@keyframes lg-shine { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
[dir="rtl"] .lg.is-anim .lg-card::after { animation-name: lg-shine-rtl; }
@keyframes lg-shine-rtl { 0%, 70% { transform: translateX(120%); } 85%, 100% { transform: translateX(-120%); } }

/* ---------- Form side ---------- */
.lg-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(84px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 70%), var(--bg); }
.lg-tools { position: absolute; top: calc(22px + env(safe-area-inset-top)); inset-inline-end: 24px; display: flex; gap: 8px; }
.lg-tools .icon-btn { height: 42px; border-radius: 999px; padding: 0 14px; box-shadow: var(--shadow); }
.lg-card-form { width: 100%; max-width: 460px; padding: 40px 38px; border-radius: 26px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(15, 27, 45, .12); backdrop-filter: blur(8px); }
.lg.is-anim .lg-card-form { animation: lg-rise .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lg-rise { from { transform: translateY(14px); } to { transform: none; } }
.lg-card-form h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.lg-secure { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--accent); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .lg-secure { letter-spacing: 0; font-size: 13.5px; }
.lg-secure .ic { width: 15px; height: 15px; }
.lg-lead { color: var(--muted); margin: 0 0 24px; }
.lg-card-form .alert { align-items: center; }
.lg-field { display: block; margin-bottom: 16px; }
.lg-field > span:first-child { display: block; font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.lg-field input { height: 52px; border-radius: 12px; font-size: 1rem; padding-inline: 16px; background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.lg-pass { position: relative; display: block; }
.lg-pass input { padding-inline-end: 50px; }
.lg-eye { position: absolute; top: 50%; inset-inline-end: 6px; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.lg-eye:hover, .lg-eye.is-on { color: var(--accent); background: var(--surface-2); }
.lg-check { margin: 4px 0 22px; color: var(--text-2); font-size: .92rem; align-items: center; }
.lg-check input { width: 19px; height: 19px; margin: 0; accent-color: var(--blue); flex: none; }

/* Sign-in button: travelling edge light, pulse ring, passing sheen, busy spinner */
.lg-submit-wrap { position: relative; isolation: isolate; }
.lg-submit { position: relative; width: 100%; height: 56px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 16.5px; font-weight: 700; color: #fff;
  background-color: var(--hero-1);
  background-image: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.18) 50%, transparent 62% 100%), linear-gradient(135deg, var(--hero-1), color-mix(in srgb, var(--hero-1) 65%, var(--hero-2)));
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(11, 23, 48, .22); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.lg-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--hero-2) 40%, transparent); }
.lg-submit:active { transform: translateY(0) scale(.99); }
.lg-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--hero-2) 55%, transparent); outline-offset: 3px; }
:root[data-theme="dark"] .lg-submit { background-color: var(--hero-2); background-image: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.22) 50%, transparent 62% 100%), linear-gradient(135deg, #4a78b0, var(--hero-2)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-submit { background-color: var(--hero-2); background-image: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.22) 50%, transparent 62% 100%), linear-gradient(135deg, #4a78b0, var(--hero-2)); } }
.lg-submit-wrap::before, .lg-submit-wrap::after { content: ""; position: absolute; pointer-events: none; }
@property --lg-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lg-submit-wrap::before { inset: -1.5px; z-index: 1; border-radius: 15.5px; padding: 1.5px; opacity: 0;
  background: conic-gradient(from var(--lg-a), transparent 0 62%, color-mix(in srgb, var(--hero-2) 60%, #fff) 80%, #fff 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lg-submit-wrap::after { inset: 0; z-index: -1; border-radius: 14px; border: 1.5px solid var(--hero-2); opacity: 0; }
.lg.is-anim .lg-submit-wrap::before { opacity: .9; animation: lg-orbit 4.5s linear infinite; }
.lg.is-anim .lg-submit-wrap::after { animation: lg-ripple 3.6s cubic-bezier(.2,.6,.3,1) 1s infinite; }
.lg.is-anim .lg-submit { animation: lg-sheen 6s ease-in-out 1.5s infinite; }
@keyframes lg-orbit { to { --lg-a: 360deg; } }
@keyframes lg-ripple { 0% { inset: 0; opacity: .7; border-radius: 14px; } 75%, 100% { inset: -9px; opacity: 0; border-radius: 22px; } }
@keyframes lg-sheen { 0%, 72% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
[dir="rtl"] .lg.is-anim .lg-submit { animation-name: lg-sheen-rtl; }
@keyframes lg-sheen-rtl { 0%, 72% { background-position: -60% 0, 0 0; } 100% { background-position: 160% 0, 0 0; } }
.lg-label, .lg-busy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.lg-arrow { display: inline-flex; transition: transform .25s; }
[dir="rtl"] .lg-arrow { transform: scaleX(-1); }
.lg-submit:hover .lg-arrow { transform: translateX(4px); }
[dir="rtl"] .lg-submit:hover .lg-arrow { transform: scaleX(-1) translateX(4px); }
.lg-busy { display: none; }
.lg-submit.is-busy { pointer-events: none; }
.lg-submit.is-busy .lg-label { display: none; }
.lg-submit.is-busy .lg-busy { display: inline-flex; }
.lg-submit-wrap:has(.is-busy)::before, .lg-submit-wrap:has(.is-busy)::after { animation: none !important; opacity: 0 !important; }
.lg-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: lg-rot .7s linear infinite; }
@keyframes lg-rot { to { transform: rotate(360deg); } }
.lg-install { width: 100%; height: 52px; margin-top: 12px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #39c08d, #2fa878); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.lg-install[hidden] { display: none; }
.lg-links { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; }
.lg-links a { display: inline-flex; align-items: center; gap: 5px; }
.lg-links .ic { width: 16px; height: 16px; }
.lg-foot { margin: 0; color: var(--muted); font-size: .8rem; }
.lg-mobile-brand { display: none; color: var(--text); }
.lg-mobile-brand .logo { height: 34px; }

@media (prefers-reduced-motion: reduce) { .lg * { animation: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .lg-hero { padding-inline: 40px; } .lg-feats { grid-template-columns: 1fr 1fr; } .lg-feats .lg-card:last-child { display: none; } }
@media (max-width: 960px) {
  .lg { grid-template-columns: 1fr; }
  .lg-hero { display: none; }
  .lg-panel { justify-content: flex-start; padding-top: calc(78px + env(safe-area-inset-top)); }
  .lg-mobile-brand { display: flex; width: fit-content; margin-bottom: 22px; }
  .lg-card-form { padding: 30px 22px; box-shadow: 0 16px 40px rgba(15, 27, 45, .1); }
}
@media (max-width: 420px) { .lg-panel { padding-inline: 14px; } .lg-card-form { border-radius: 22px; } .lg-tools { inset-inline-end: 14px; } }