:root{color-scheme:dark;--blue:#0066ff;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
html,body{min-height:100%;font-family:Arial,Helvetica,sans-serif}
.hero{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh;overflow:hidden;padding:64px 24px}
.scene,.equipment,.shade,.light{position:absolute;inset:0;pointer-events:none}
.scene{z-index:-1;overflow:hidden}
.equipment{inset:-18px;background:url('background.jpg') 50% 50%/cover no-repeat;filter:blur(5px);transform:scale(1.025)}
.shade{background:radial-gradient(ellipse at 50% 44%,rgba(0,0,0,.24),rgba(0,0,0,.58) 72%,rgba(0,0,0,.78)),linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.48))}
.light{inset:-50%;opacity:0;background:linear-gradient(110deg,transparent 39%,rgba(168,198,228,.09) 49%,transparent 59%);transform:translateX(-32%)}
.identity{width:min(100%,1060px);text-align:center;padding-bottom:3vh}
.brand{margin:0;width:100%;font-size:inherit;mix-blend-mode:screen}
.brand-crop{display:block;position:relative;width:100%;aspect-ratio:860/108;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 83%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 83%,transparent)}
.brand img{display:block;position:absolute;width:100%;height:auto;top:-28%;left:0;mask-image:linear-gradient(to right,transparent,#000 6%,#000 93%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 93%,transparent)}
.accent{height:2px;width:72px;margin:36px auto 28px;background:var(--blue);box-shadow:0 0 14px #0066ff38;transform-origin:center}
.tagline{margin:0;color:#e5e9ee;font-size:clamp(18px,2.05vw,27px);font-weight:400;line-height:1.65;letter-spacing:.055em;text-shadow:0 2px 14px #000}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.intro .scene,.intro .brand,.intro .accent,.intro .tagline{opacity:0}
.intro.ready .scene{animation:appear 2.6s .3s both}
.intro.ready .brand{animation:brand-in 1.8s 1.5s var(--ease) both}
.intro.ready .accent{animation:line-in 1.2s 2.65s var(--ease) both}
.intro.ready .tagline{animation:text-in 1.5s 3.05s var(--ease) both}
.intro.ready .light{animation:metal-light 10s 4.6s ease-in-out 1 both}
@keyframes appear{from{opacity:0}to{opacity:1}}
@keyframes brand-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes line-in{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes text-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes metal-light{0%{opacity:0;transform:translateX(-32%)}35%,65%{opacity:1}100%{opacity:0;transform:translateX(32%)}}
@media(max-width:600px){.hero{padding:48px 12px}.identity{padding-bottom:6svh}.equipment{background-position:56% center;filter:blur(4px)}.accent{width:48px;margin:28px auto 24px}.tagline{font-size:18px;letter-spacing:.025em;line-height:1.7}}
@media(max-height:450px) and (orientation:landscape){.hero{padding:28px 24px}.identity{max-width:650px;padding:0}.accent{margin:18px auto 14px}.tagline{font-size:17px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.intro .scene,.intro .brand,.intro .accent,.intro .tagline{opacity:1!important;animation:none!important;transform:none!important}.light{display:none}}