.page-intro { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: var(--surface); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 360ms var(--motion-ease), visibility 360ms; }
.page-intro[hidden] { display: none; }
html[data-entry="loading"] .page-intro { opacity: 1; visibility: visible; animation: entry-safety 200ms 2200ms forwards; }
.entry-lockup { display: grid; justify-items: center; gap: 24px; padding: 24px; text-align: center; }
.entry-symbol { width: 80px; height: 80px; border-radius: var(--mobile-radius-surface); }
.entry-wordmark { color: var(--brand-primary); font: 900 28px/1.2 "Bodoni 72", "Didot", "Times New Roman", serif; }
.entry-line { width: 120px; height: 2px; background: var(--border); overflow: hidden; }
.entry-line::after { content: ""; display: block; width: 100%; height: 100%; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; }
.entry-caption { color: var(--secondary-foreground); font-size: 13px; }
html[data-entry="loading"] .entry-symbol { animation: entry-symbol-in 600ms var(--motion-ease) both; }
html[data-entry="loading"] .entry-line::after { animation: entry-line-in 1800ms var(--motion-ease) both; }
@keyframes entry-symbol-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes entry-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes entry-safety { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .page-intro { display: none; transition: none; } }