/* Timeline (mirrors the reference site's GSAP sequence):
   0.00s  letters rise, 0.2s each, 0.05s stagger  -> done ~0.65s
   1.65s  panels drop, 0.5s each, 0.1s stagger    -> done ~3.05s
   2.15s  overlay name fades
   3.15s  overlay hidden, login button fades in */
:root { --step: .05s; --rise: .2s; --panels-start: 1.65s; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; color: #000; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.name { margin: 0; line-height: 1; font-family: Anton, Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: clamp(56px, 20vw, 200px); text-transform: uppercase; text-align: center; }

/* --- preloader overlay --- */
.preloader { position: fixed; inset: 0; z-index: 10; display: flex; pointer-events: none; animation: hide .01s linear forwards; animation-delay: calc(var(--panels-start) + 1.5s); }
.panel { height: 100%; width: 10%; background: #000; animation: drop .5s ease-in-out forwards; animation-delay: calc(var(--panels-start) + var(--p) * .1s); }
.name-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; overflow: hidden; color: #fff; animation: fadeout .5s ease-in-out forwards; animation-delay: calc(var(--panels-start) + .5s); }
.name-overlay span { display: inline-block; transform: translateY(100%); animation: rise var(--rise) ease-in-out forwards; animation-delay: calc(var(--i) * var(--step)); }

/* --- the site underneath --- */
.site { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login { position: absolute; z-index: 20; left: 50%; top: calc(50% + clamp(56px, 20vw, 200px) / 2 + 28px); transform: translateX(-50%); opacity: 0; font-weight: 600; font-size: 18px; line-height: 1; color: #fff; background: #000; text-decoration: none; padding: 14px 40px; border-radius: 6px; animation: fadein .4s ease-out forwards; animation-delay: calc(var(--panels-start) + 1.5s); }
.login:hover { background: #222; }

@keyframes rise { to { transform: translateY(0); } }
@keyframes drop { to { transform: translateY(100%); } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes hide { to { visibility: hidden; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .login { animation: none; opacity: 1; }
}