* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }

body {
    font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #fff;
    background: linear-gradient(160deg, #9a0aa8 0%, #8b009b 45%, #5e0c9e 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

.landing__full { display: none; }

.split { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.split__art { position: relative; width: 100%; aspect-ratio: 940 / 941; overflow: hidden; flex-shrink: 0; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }

.split__art img { position: absolute; top: 0; left: 0; width: 177.87%; height: auto; max-width: none; }

.split__content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(14px, 2.5vh, 24px); padding: 8px 24px 48px; }

.split__content h1 { font-weight: 800; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 12ch; text-wrap: balance; }

.split__content p { font-weight: 500; font-size: clamp(1.05rem, 4.2vw, 1.5rem); }

.progress { width: min(320px, 80%); height: 14px; margin-top: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); overflow: hidden; }

.progress span { display: block; height: 100%; width: 58%; border-radius: inherit; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); animation: progress 3.2s ease-in-out infinite alternate; }

.gear { width: 36px; height: 36px; color: #e3b8ee; animation: spin 6s linear infinite; }

.split__content small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.9; }

@keyframes progress { from { width: 45%; } to { width: 70%; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .progress span, .gear { animation: none; } }

@media (orientation: landscape) {
    .split { flex-direction: row; align-items: stretch; }
    .split__art { width: auto; height: 100vh; height: 100dvh; -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%); mask-image: linear-gradient(to right, #000 80%, transparent 100%); }
    .split__content { padding: 32px 40px; }
    .split__content h1 { font-size: clamp(2rem, 4.5vw, 4rem); }
    .split__content p { font-size: clamp(1rem, 1.8vw, 1.6rem); }
}

.stage { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max(100vw, 177.68vh); width: max(100vw, 177.68dvh); aspect-ratio: 1672 / 941; container-type: inline-size; }

.stage > img { display: block; width: 100%; height: 100%; }

.d-progress { position: absolute; left: 66.99%; top: 63.02%; width: 24.34%; height: 3.4%; padding: 0.42cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 1.2cqw rgba(255, 190, 255, 0.25); overflow: hidden; }

.d-progress__fill { position: relative; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, #f3d9ff 0%, #ffffff 60%, #ffffff 100%); box-shadow: 0 0 1cqw rgba(255, 255, 255, 0.85); overflow: hidden; animation: fill 5s cubic-bezier(.65, 0, .35, 1) infinite; }

.d-progress__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(214, 120, 255, 0.55) 50%, transparent 70%); transform: translateX(-100%); animation: shine 1.6s ease-in-out infinite; }

.d-gear { position: absolute; left: 77.87%; top: 70.2%; width: 2.63%; aspect-ratio: 1; color: #e9c2f2; filter: drop-shadow(0 0 0.6cqw rgba(255, 200, 255, 0.55)); animation: gear 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }

.d-gear svg { display: block; width: 100%; height: 100%; }

@keyframes fill { 0% { width: 18%; } 45%, 60% { width: 62%; } 90% { width: 88%; } 100% { width: 18%; } }

@keyframes shine { to { transform: translateX(100%); } }

@keyframes gear { 0% { transform: rotate(0deg) scale(1); } 40% { transform: rotate(180deg) scale(1.08); } 50% { transform: rotate(180deg) scale(1); } 90% { transform: rotate(360deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }

@media (prefers-reduced-motion: reduce) { .d-progress__fill, .d-progress__fill::after, .d-gear { animation: none; } .d-progress__fill { width: 58%; } }

@media (min-aspect-ratio: 17/10) and (min-width: 900px) {
    body { overflow: hidden; }
    .split { display: none; }
    .landing__full { display: block; position: fixed; inset: 0; overflow: hidden; }
}