.lean-app-preloader { --intro-duration: 2400ms; --intro-ink: #172b4c; position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px; background: var(--color-surface); opacity: 1; transition: opacity var(--duration-fade) ease-out; }
.lean-app-preloader[hidden] { display: none; }
.lean-app-preloader.is-leaving { opacity: 0; }
.lean-intro-brand { display: grid; place-items: center; }
.lean-intro-symbol { display: grid; width: 80px; height: 80px; place-items: center; }
.lean-intro-tiles { display: grid; grid-template-columns: repeat(3, 16px); gap: 3px; transform: rotate(-45deg); }
.lean-intro-tiles > i { --tile-back: var(--intro-ink); position: relative; display: block; width: 16px; height: 16px; transform-style: preserve-3d; }
.lean-intro-tiles > i::before, .lean-intro-tiles > i::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-control); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lean-intro-tiles > i::before { background: var(--color-primary-soft); }
.lean-intro-tiles > i::after { background: var(--tile-back); transform: rotateY(180deg); }
.lean-intro-tiles > i.x::after { transform: rotateX(180deg); }
.lean-intro-tiles > i:nth-child(3n+1), .lean-intro-tiles > i:nth-child(n+7) { --tile-back: var(--color-secondary); }
.lean-app-preloader.is-intro-running .lean-intro-tiles > i { animation: lean-intro-fold-y 3s cubic-bezier(.7, 0, .3, 1) infinite; animation-delay: calc(var(--o) * .09s); }
.lean-app-preloader.is-intro-running .lean-intro-tiles > i.x { animation-name: lean-intro-fold-x; }
@keyframes lean-intro-fold-y { 0%, 12% { transform: perspective(160px) rotateY(0); } 32%, 60% { transform: perspective(160px) rotateY(180deg); } 80%, 100% { transform: perspective(160px) rotateY(360deg); } }
@keyframes lean-intro-fold-x { 0%, 12% { transform: perspective(160px) rotateX(0); } 32%, 60% { transform: perspective(160px) rotateX(180deg); } 80%, 100% { transform: perspective(160px) rotateX(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lean-app-preloader { --intro-duration: 0ms; transition: none; }
  .lean-app-preloader.is-intro-running .lean-intro-tiles > i { animation: none; transform: perspective(160px) rotateY(180deg); }
  .lean-app-preloader.is-intro-running .lean-intro-tiles > i.x { animation: none; transform: perspective(160px) rotateX(180deg); }
}