/**
 * @file login_art.css
 * The drawn left half of the login pages (login_art.php). Its colours follow --la-accent.
 */

.la-art {
    --la-accent: var(--lp-akzent, #3b82f6);
    --la-hi: color-mix(in srgb, var(--la-accent) 45%, #fff);
    --la-glow: color-mix(in srgb, var(--la-accent) 40%, transparent);
    --la-p1: color-mix(in srgb, var(--la-accent) 44%, #1c222c);
    --la-p2: color-mix(in srgb, var(--la-accent) 12%, #11151c);
    --la-ink: #f1f5f9;
    --la-spark: #fbbf24;
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    padding: 34px 44px 44px; color: var(--la-ink);
    background: radial-gradient(700px 500px at 80% 10%, var(--la-glow), transparent 60%),
                linear-gradient(150deg, var(--la-p1), var(--la-p2) 75%);
}
.la-art.la-night { --la-hi: #a5b4fc; --la-glow: rgba(129, 140, 248, .3); --la-p1: #2b3550; --la-p2: #12161f; }

.la-brand {
    position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
}
.la-art a.la-brand, .la-art a.la-brand:hover { color: #fff; text-decoration: none; }
.la-brand i {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
    background: rgba(255, 255, 255, .12); color: var(--la-hi); font-size: 17px;
}
.la-brand em { font-style: normal; color: var(--la-hi); }

.la-scene { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.la-scene svg { width: min(400px, 80%); max-height: 100%; overflow: visible; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .3)); }
.la-quote { position: relative; z-index: 2; }
.la-slogan { margin: 0 0 8px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.la-slogan span { color: var(--la-hi); }
.la-line { margin: 0; font-size: 15px; line-height: 1.5; opacity: .8; }

/* Scene parts: lines draw themselves, then fills fade in and small things move. */
.la-ink { fill: none; stroke: var(--la-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.la-draw > * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: la-draw 1.6s cubic-bezier(.2, .7, .2, 1) forwards; }
.la-draw > :nth-child(2) { animation-delay: .25s; }
.la-draw > :nth-child(3) { animation-delay: .5s; }
.la-draw > :nth-child(4) { animation-delay: .75s; }
.la-draw > :nth-child(5) { animation-delay: 1s; }
.la-draw > :nth-child(6) { animation-delay: 1.2s; }
.la-draw > :nth-child(n+7) { animation-delay: 1.4s; }
.la-fill { opacity: 0; animation: la-fade .8s ease 1.9s forwards; }
.la-hi-fill { fill: var(--la-hi); }
.la-hi-stroke { fill: none; stroke: var(--la-hi); stroke-linecap: round; stroke-linejoin: round; }
.la-accent-fill { fill: var(--la-accent); }
.la-stars path { fill: var(--la-spark); transform-box: fill-box; transform-origin: center; animation: la-twinkle 2.2s ease-in-out infinite; }
.la-stars path:nth-child(2) { animation-delay: .7s; }
.la-stars path:nth-child(3) { animation-delay: 1.4s; }
.la-receipt { animation: la-print 3.2s ease-in-out 2s infinite; }
.la-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: la-flicker 1.1s ease-in-out infinite alternate; }
.la-orbit { transform-origin: 210px 210px; animation: la-spin 18s linear infinite; }
.la-orbit.la-rev { animation-direction: reverse; animation-duration: 26s; }
.la-pulse { transform-box: fill-box; transform-origin: center; animation: la-pulse 2.4s ease-in-out infinite; }
.la-tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: la-draw .6s ease forwards; }
.la-tick:nth-of-type(1) { animation-delay: 2.1s; }
.la-tick:nth-of-type(2) { animation-delay: 2.6s; }
.la-tick:nth-of-type(3) { animation-delay: 3.1s; }
.la-wifi path { opacity: 0; animation: la-blink 2.4s ease-in-out infinite; }
.la-wifi path:nth-child(2) { animation-delay: .3s; }
.la-wifi path:nth-child(3) { animation-delay: .6s; }

/* Floating bubbles, coins or hearts, filled in by login_art.js. */
.la-floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.la-fl { position: absolute; bottom: -60px; opacity: 0; animation: la-rise var(--t) linear var(--d) infinite; }
.la-fl.la-bubble {
    border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .1) 30%, transparent 55%),
                conic-gradient(from 40deg, var(--la-glow), rgba(255, 255, 255, .15), var(--la-glow));
}
.la-fl.la-coin { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 70%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.la-fl.la-heart { color: var(--la-hi); }

@keyframes la-draw { to { stroke-dashoffset: 0; } }
@keyframes la-fade { to { opacity: 1; } }
@keyframes la-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6) rotate(25deg); } }
@keyframes la-rise {
    0% { transform: translateY(0) scale(var(--s)); opacity: 0; }
    10% { opacity: .75; }
    100% { transform: translate(var(--dx), -110vh) scale(var(--s)) rotate(var(--r, 0deg)); opacity: 0; }
}
@keyframes la-print { 0%, 15% { transform: translateY(0); } 55%, 80% { transform: translateY(26px); } 100% { transform: translateY(0); } }
@keyframes la-flicker { from { transform: scale(1, 1) skewX(0); } to { transform: scale(.9, 1.12) skewX(4deg); } }
@keyframes la-spin { to { transform: rotate(360deg); } }
@keyframes la-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes la-blink { 0%, 100% { opacity: 0; } 40%, 70% { opacity: 1; } }

/* On a phone the panel shrinks to a strip: brand left, the drawing small on the right. */
@media (max-width: 760px) {
    /* Solid and pinned to the top: iOS Safari's glass toolbar blurs whatever scrolls beneath it,
       so the form never passes under it, and the strip clears the status bar itself. */
    .la-art {
        position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; align-items: center;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background-color: var(--la-p2);
    }
    .la-brand { align-self: center; font-size: 17px; }
    .la-scene { flex: 0 0 auto; margin-left: auto; }
    .la-scene svg { width: 72px; height: 72px; filter: none; }
    .la-scene .la-ink { stroke-width: 9; }
    .la-quote { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .la-art *, .la-art *::before { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
    .la-floaters { display: none; }
}