:root {
  --t1: 1600ms;
  --t2: 800ms;
  --t3: 800ms;
  --shade: 0.38;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: #fff; }

.stage { position: fixed; inset: 0; overflow: hidden; display: grid; place-items: center; }
.bg { position: absolute; inset: 0; background-image: url('images/atlazs-hero.jpg'); background-size: cover; background-position: center; opacity: 0; }
.shade { position: absolute; inset: 0; background: rgba(0,0,0,0); pointer-events: none; }
.headline { position: relative; margin: 0; padding: .5rem 1rem; color: #fff; font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; letter-spacing: .02em; text-align: center; text-shadow: 0 2px 16px rgba(0,0,0,.35); opacity: 0; transform: translateY(10px); }

body.ready .bg { animation: bgFade var(--t1) ease forwards; }
body.ready .shade { animation: shadeIn var(--t2) ease forwards; animation-delay: var(--t1); }
body.ready .headline { animation: textUp var(--t3) ease forwards; animation-delay: calc(var(--t1) + var(--t2) - 120ms); }

@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shadeIn { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,var(--shade)); } }
@keyframes textUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .bg, .shade, .headline { animation: none !important; }
  .bg { opacity: 1; }
  .shade { background: rgba(0,0,0,var(--shade)); }
  .headline { opacity: 1; transform: none; }
}