.preloader {
    --preloader-ease: cubic-bezier(0.2, 0, 0, 1);
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    box-sizing: border-box;
    padding: clamp(24px, 4vw, 48px);
    overflow: hidden;
    background: #211c18;
    color: #fff8ec;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    transition: opacity 400ms cubic-bezier(0.3, 0, 1, 1), transform 400ms cubic-bezier(0.3, 0, 1, 1);
}

html.preloader-active,
.preloader-active body { overflow: hidden; }

.preloader-active .preloader { display: flex; flex-direction: column; justify-content: space-between; }
.preloader-active.preloader-pending .preloader { display: none; }
.preloader-pending body > :not(#preloader) { opacity: 0; pointer-events: none; }
.preloader.preloader--leaving { opacity: 0; transform: translateY(-24px); pointer-events: none; }

.preloader__signature { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preloader__brand { font-size: 24px; font-weight: 900; letter-spacing: -.065em; }
.preloader__specialty, .preloader__caption, .preloader__timeline { font-size: 9px; font-weight: 500; letter-spacing: .18em; }
.preloader__specialty { color: #c7bcb0; }

.preloader__scene { display: grid; justify-items: center; gap: 20px; padding: 24px 0; text-align: center; }
.preloader__portrait { position: relative; width: 96px; height: 96px; animation: preloader-enter 500ms var(--preloader-ease) both; }
.preloader__portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.preloader__frame {
    position: absolute;
    inset: -12px;
    color: #ff9525;
    background:
        linear-gradient(currentColor, currentColor) left top / 12px 1px,
        linear-gradient(currentColor, currentColor) left top / 1px 12px,
        linear-gradient(currentColor, currentColor) right top / 12px 1px,
        linear-gradient(currentColor, currentColor) right top / 1px 12px,
        linear-gradient(currentColor, currentColor) left bottom / 12px 1px,
        linear-gradient(currentColor, currentColor) left bottom / 1px 12px,
        linear-gradient(currentColor, currentColor) right bottom / 12px 1px,
        linear-gradient(currentColor, currentColor) right bottom / 1px 12px;
    background-repeat: no-repeat;
    animation: preloader-focus 1600ms cubic-bezier(.37, 0, .63, 1) infinite;
}
.preloader__headline { margin: 0; font-size: clamp(48px, 8vw, 104px); font-weight: 800; line-height: .95; letter-spacing: -.065em; animation: preloader-enter 560ms var(--preloader-ease) 60ms both; }
.preloader__headline em { color: #ff9525; font-style: normal; }
.preloader__caption { margin-top: 4px; color: #c7bcb0; animation: preloader-enter 440ms var(--preloader-ease) 120ms both; }

.preloader__status { width: min(100%, 560px); align-self: center; }
.preloader__readout { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.preloader__title { margin: 0; font-size: 12px; font-weight: 500; color: #c7bcb0; }
.preloader__percentage { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.preloader__track { height: 3px; overflow: hidden; background: #fff8ec26; }
.preloader__fill { width: 100%; height: 100%; background: #ff9525; transform: scaleX(0); transform-origin: left; }
.preloader__timeline { display: flex; justify-content: space-between; margin-top: 12px; color: #c7bcb0; font-size: 8px; }
.preloader--ready .preloader__frame { animation: none; opacity: 1; }

@keyframes preloader-focus {
    0%, 100% { opacity: .4; transform: scale(1); }
    50% { opacity: .9; transform: scale(.96); }
}
@keyframes preloader-enter {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-height: 620px) {
    .preloader { padding: 20px 24px; }
    .preloader__scene { gap: 16px; padding: 20px 0; }
    .preloader__portrait { width: 60px; height: 60px; }
    .preloader__headline { font-size: clamp(32px, 10vh, 64px); }
    .preloader__caption { display: none; }
}
@media (max-height: 400px) {
    .preloader__scene { grid-template-columns: 64px auto; gap: 28px; align-items: center; align-self: center; text-align: left; }
    .preloader__headline br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .preloader { transition: none; }
    .preloader__portrait, .preloader__frame, .preloader__headline, .preloader__caption { animation: none; }
}