:root { color-scheme: dark; background: #020d09; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }
body { background: #020d09; color: #f4f1df; }
.seal-stage { position: relative; isolation: isolate; display: grid; place-items: center; width: 100vw; height: 100svh; overflow: hidden; background: #02110c; }
.nebula { position: absolute; inset: -3%; background: url('public/nebula-kampf-landscape.png') center/cover no-repeat; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.nebula-back { z-index: -4; animation: cloud-drift 52s linear infinite alternate; }
.nebula-front { z-index: -3; opacity: .13; background: radial-gradient(ellipse at 25% 45%, rgba(38,190,121,.32), transparent 42%), radial-gradient(ellipse at 78% 58%, rgba(26,151,101,.26), transparent 38%); animation: cloud-breathe 68s linear infinite alternate; }
.vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 48%, transparent 0 22%, rgba(0,8,5,.15) 45%, rgba(0,5,3,.76) 100%); }
.particles { position: absolute; inset: 0; pointer-events: none; }
.particles i { position: absolute; display: block; border-radius: 50%; background: #fffde5; box-shadow: 0 0 5px 1px rgba(255,248,196,.88), 0 0 12px rgba(149,255,208,.4); animation: star-float 10s ease-in-out infinite; will-change: transform, opacity; }
.crest { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(16px, 3.4vw, 52px); padding: 2rem; }
.crest h1 { --mx: 0px; --my: 0px; margin: 0; transform: translate3d(var(--mx), var(--my), 0); color: #f0ecd8; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(4.7rem, 15vw, 14.5rem); font-weight: 400; line-height: .8; letter-spacing: .075em; text-indent: .075em; white-space: nowrap; text-shadow: 0 2px 1px rgba(255,255,255,.16), 0 5px 18px rgba(0,0,0,.9), 0 0 46px rgba(216,255,226,.13); will-change: transform; }
.crest-line { width: clamp(28px, 7vw, 110px); height: 1px; opacity: .72; background: linear-gradient(90deg, transparent, #d7d2b8); box-shadow: 0 0 8px rgba(239,232,192,.3); }
.crest-line-right { transform: rotate(180deg); }
@keyframes cloud-drift { from { transform: translate3d(-1.1%, -.6%, 0) scale(1.045); } to { transform: translate3d(1.1%, .6%, 0) scale(1.065); } }
@keyframes cloud-breathe { from { transform: translate3d(.7%, -.4%, 0) scale(1.01); } to { transform: translate3d(-.7%, .4%, 0) scale(1.035); } }
@keyframes star-float { 0%,100% { transform: translate3d(0,4px,0) scale(.7); opacity: .3; } 50% { transform: translate3d(5px,-10px,0) scale(1.35); opacity: 1; } }
@media (max-width: 640px) { .crest { gap: 11px; padding: 1rem; } .crest h1 { font-size: clamp(3.8rem, 22vw, 7rem); letter-spacing: .035em; text-indent: .035em; } .crest-line { width: 18px; } }
@media (prefers-reduced-motion: reduce) { .nebula, .particles i { animation: none; } .crest h1 { transform: none !important; } }