/* Animated Aluna Schrift AI logo (inc/logo.php) */
.lg-svg { display: block; overflow: visible; }
.logo .lg-svg { grid-area: 1 / 1; width: auto; height: 70px; transition: opacity .35s, height .35s var(--ease, ease); }
.logo .lg-svg.logo-on-light { opacity: 0; }
.is-scrolled .logo .lg-svg.logo-on-dark, .solid-header .logo .lg-svg.logo-on-dark, .nav-open .logo .lg-svg.logo-on-dark { opacity: 0; }
.is-scrolled .logo .lg-svg.logo-on-light, .solid-header .logo .lg-svg.logo-on-light, .nav-open .logo .lg-svg.logo-on-light { opacity: 1; }
.is-scrolled .logo .lg-svg { height: 54px; }
.logo-footer .lg-svg { height: 96px; width: auto; }

.lg-ai .ai-tr { stroke-dasharray: 1; stroke-dashoffset: 1; animation: aiTrace 6s ease-in-out infinite; }
.lg-ai .ai-tr:nth-child(2) { animation-delay: .15s; }
.lg-ai .ai-tr:nth-child(3) { animation-delay: .3s; }
.lg-ai .ai-ends circle { transform-box: fill-box; transform-origin: center; animation: aiBlink 2.2s ease-in-out infinite; }
.lg-ai .ai-e2 { animation-delay: .7s !important; }
.lg-ai .ai-e3 { animation-delay: 1.4s !important; }
.lg-ai .ai-node, .lg-ai .ai-glow { transform-box: fill-box; transform-origin: center; }
.lg-ai .ai-node { animation: aiNode 2.2s ease-in-out infinite; }
.lg-ai .ai-glow { animation: aiGlow 2.2s ease-in-out infinite; }
.lg-ai .ai-smile { stroke-dasharray: 1; stroke-dashoffset: 0; animation: aiSmile 6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes aiTrace { 0% { stroke-dashoffset: 1; } 18%, 100% { stroke-dashoffset: 0; } }
@keyframes aiBlink { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes aiNode { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes aiGlow { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes aiSmile { 0%, 8% { stroke-dashoffset: 1; } 28%, 100% { stroke-dashoffset: 0; } }

/* Generation screen: the AI node works faster while the figure is created */
.aai-gp-logo { width: min(240px, 66%); margin: 0 0 14px; }
.aai-gp-logo .lg-svg { width: 100%; height: auto; }
.aai-gp-logo .ai-tr, .aai-gp-logo .ai-smile { animation-duration: 3s; }
.aai-gp-logo .ai-node, .aai-gp-logo .ai-glow, .aai-gp-logo .ai-ends circle { animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
	.lg-svg * { animation: none !important; }
	.lg-ai .ai-tr { stroke-dashoffset: 0; }
	.lg-ai .ai-pulses { display: none; }
}

@media (max-width: 720px) { .logo .lg-svg { height: 56px; } .is-scrolled .logo .lg-svg { height: 46px; } }


/* aFig logo v4 (inc/logo.php): header crossfade, footer, generation screen and animation */
.logo.logo-v4 { display: inline-grid; align-items: center; }
.logo-v4 .lf-svg { grid-area: 1 / 1; width: auto; height: 52px; overflow: visible; transition: opacity .35s, height .35s var(--ease, ease); }
.logo-v4 .lf-svg.logo-on-light { opacity: 0; }
.is-scrolled .logo-v4 .logo-on-dark, .solid-header .logo-v4 .logo-on-dark, .nav-open .logo-v4 .logo-on-dark { opacity: 0; }
.is-scrolled .logo-v4 .logo-on-light, .solid-header .logo-v4 .logo-on-light, .nav-open .logo-v4 .logo-on-light { opacity: 1; }
.is-scrolled .logo-v4 .lf-svg { height: 46px; }
.logo-footer.logo-v4 .lf-svg { height: 92px; }
@media (max-width: 720px) { .logo-v4 .lf-svg { height: 42px; } }
.lf-svg .lf-tag { font: 600 44px var(--body, Roboto, Arial, sans-serif); }
.lf-svg .lf-smile { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lfPaint 1.5s cubic-bezier(.55, .05, .35, 1) .35s forwards; }
.lf-svg .lf-dot { transform-box: fill-box; transform-origin: center; animation: lfDrop 6s ease-in-out 2.6s infinite; }
.lf-svg .lf-shine { transform: translateX(-500px) skewX(-18deg); animation: lfShine 8s ease-in-out 3s infinite; }
@keyframes lfPaint { to { stroke-dashoffset: 0; } }
@keyframes lfDrop { 0%, 82%, 100% { transform: translateY(0) scale(1); } 88% { transform: translateY(-18px) scale(1.08, .92); } 94% { transform: translateY(0) scale(1.12, .86); } }
@keyframes lfShine { 0%, 70% { transform: translateX(-500px) skewX(-18deg); } 100% { transform: translateX(2200px) skewX(-18deg); } }
.aai-gp-logo .lf-svg, .aai-op-logo .lf-svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .lf-svg * { animation: none !important; } .lf-svg .lf-smile { stroke-dashoffset: 0; } .lf-svg .lf-shine { display: none; } }
