.site-intro{display:none;position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;isolation:isolate;cursor:default;user-select:none;-webkit-user-select:none}
html.intro-active{overflow:hidden}
.intro-active .site-intro{display:block}
.intro-panel{position:absolute;top:0;height:100%;background:#090c10;transition:transform .9s cubic-bezier(.76,0,.24,1);will-change:transform}
.intro-panel-left{left:-70vh;width:calc(52% + 70vh + 2px);transform:skewX(-18deg);transform-origin:right center}
.intro-panel-right{left:52%;width:calc(48% + 70vh);transform:skewX(-18deg);transform-origin:left center}
.intro-atmosphere{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 52% 48%,#33404a25,transparent 55%);transition:opacity .3s}
.intro-ghost{position:absolute;left:-4vw;top:50%;transform:translateY(-51%) skewX(-10deg);font:900 clamp(260px,45vw,900px)/.9 Arial,sans-serif;color:transparent;-webkit-text-stroke:1px #ffffff07;letter-spacing:-.12em}
.intro-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(25% - 1px),#ffffff05 25%,transparent calc(25% + 1px),transparent calc(75% - 1px),#ffffff05 75%,transparent calc(75% + 1px));opacity:0}
.intro-speed{position:absolute;width:65vw;height:1px;background:linear-gradient(90deg,transparent,#e71d36,transparent);left:-70%;transform:rotate(-18deg);opacity:0}
.intro-speed-one{top:32%}.intro-speed-two{top:68%}.intro-speed-three{top:75%;width:40vw;background:linear-gradient(90deg,transparent,#ffffff55,transparent)}
.intro-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px/1.5 Arial,sans-serif;letter-spacing:.16em;color:#b0b8c0}
.intro-meta-top{position:absolute;inset:36px 4vw auto;opacity:0}.intro-meta-top>span:first-child{color:#f1f3f5;font-weight:700}
.intro-center{position:absolute;top:48%;left:50%;width:min(68vw,900px);transform:translate(-50%,-50%);transition:opacity .3s,transform .55s cubic-bezier(.6,0,.2,1)}
.intro-wordmark{position:relative;aspect-ratio:1999/368;filter:drop-shadow(0 12px 35px #0008)}
.intro-logo-piece{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.intro-logo-piece img{width:100%;height:100%;filter:brightness(0) invert(1)}
.intro-logo-piece-1{clip-path:polygon(0 0,30% 0,24% 100%,0 100%)}
.intro-logo-piece-2{clip-path:polygon(29.8% 0,64% 0,58% 100%,23.8% 100%)}
.intro-logo-piece-3{clip-path:polygon(63.8% 0,100% 0,100% 100%,57.8% 100%)}
.intro-logo-glint{position:absolute;inset:0;mask:url('./logzaweb-logo.svg') center/contain no-repeat;-webkit-mask:url('./logzaweb-logo.svg') center/contain no-repeat;background:linear-gradient(110deg,transparent 35%,#ff304a 47%,#fff 50%,#ff304a 53%,transparent 65%);background-size:300% 100%;background-position:150% 0;opacity:0}
.intro-categories{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:35px;font:11px/1.5 Arial,sans-serif;letter-spacing:.3em;color:#9aa7b1;opacity:0}
.intro-categories i{display:block;width:18px;height:2px;background:#e91e39;transform:rotate(-45deg)}
.intro-cut{position:absolute;left:52%;top:50%;height:150vh;width:2px;background:#ef233c;box-shadow:0 0 22px #ff163f70;transform:translate(-50%,-50%) rotate(18deg) scaleY(0);opacity:0;pointer-events:none}
.intro-bottom{position:absolute;bottom:36px;left:4vw;right:4vw;opacity:0;transition:opacity .25s,transform .4s}
.intro-loading-label{display:flex;justify-content:space-between;align-items:center;font:10px Arial,sans-serif;letter-spacing:.25em;color:#c8d0d5;margin-bottom:16px}
.intro-dots{display:flex;gap:5px}.intro-dots i{width:3px;height:3px;background:#ed243e}
.intro-rail{height:1px;background:#ffffff1c;margin-bottom:19px;overflow:hidden}.intro-rail span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#9d0d26,#ff304a);transform:scaleX(0);transform-origin:left}
.intro-bottom .intro-meta{font-family:var(--font);font-size:10px;letter-spacing:.12em}
.intro-running .intro-meta-top,.intro-running .intro-bottom{animation:intro-fade .5s .15s both}
.intro-running .intro-grid{animation:intro-fade 1.6s both}
.intro-running .intro-speed-one{animation:intro-speed .8s .05s ease-out both}.intro-running .intro-speed-two{animation:intro-speed .9s .2s ease-out both}.intro-running .intro-speed-three{animation:intro-speed .8s .32s ease-out both}
.intro-running .intro-logo-piece-1{animation:intro-assemble-left 1s .18s cubic-bezier(.16,1,.3,1) both}
.intro-running .intro-logo-piece-2{animation:intro-assemble-center 1s .3s cubic-bezier(.16,1,.3,1) both}
.intro-running .intro-logo-piece-3{animation:intro-assemble-right 1s .4s cubic-bezier(.16,1,.3,1) both}
.intro-running .intro-logo-glint{animation:intro-glint .9s 1.15s ease-out both}
.intro-running .intro-categories{animation:intro-label .6s .85s both}
.intro-running .intro-rail span{animation:intro-charge 2.2s cubic-bezier(.3,.1,.2,1) both}
.intro-running .intro-dots i{animation:intro-dot .65s infinite alternate}.intro-running .intro-dots i:nth-child(2){animation-delay:.16s}.intro-running .intro-dots i:nth-child(3){animation-delay:.32s}
.intro-revealing .intro-panel-left{transform:translateX(-105%) skewX(-18deg)}
.intro-revealing .intro-panel-right{transform:translateX(105%) skewX(-18deg)}
.intro-revealing .intro-center{opacity:0;transform:translate(-50%,-55%) scale(1.035)}
.intro-revealing .intro-atmosphere{opacity:0}
.intro-revealing .intro-meta-top,.intro-revealing .intro-bottom{animation:none;opacity:0;transform:translateY(10px)}
.intro-revealing .intro-cut{animation:intro-cut .85s cubic-bezier(.6,0,.2,1) both}
.intro-active:not(.intro-revealing) .hero-image{animation-play-state:paused}
.intro-active:not(.intro-revealing) .hero::after{animation-play-state:paused}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@keyframes intro-speed{0%{left:-70%;opacity:0}20%{opacity:1}100%{left:130%;opacity:0}}
@keyframes intro-assemble-left{from{opacity:0;transform:translate(-110px,24px)}to{opacity:1;transform:translate(0,0)}}
@keyframes intro-assemble-center{from{opacity:0;transform:translate(0,35px) scale(.96)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes intro-assemble-right{from{opacity:0;transform:translate(110px,-24px)}to{opacity:1;transform:translate(0,0)}}
@keyframes intro-label{from{opacity:0;transform:translateY(12px);letter-spacing:.6em}to{opacity:1;transform:translateY(0);letter-spacing:.3em}}
@keyframes intro-glint{0%{opacity:0;background-position:150% 0}20%{opacity:1}90%{opacity:1}100%{opacity:0;background-position:-50% 0}}
@keyframes intro-charge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-dot{from{opacity:.15}to{opacity:1}}
@keyframes intro-cut{0%{opacity:1;transform:translate(-50%,-50%) rotate(18deg) scaleY(0)}30%{opacity:1;transform:translate(-50%,-50%) rotate(18deg) scaleY(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(18deg) scaleY(1)}}
@media(max-width:760px){.intro-center{width:88vw}.intro-meta-top{inset:25px 6vw auto;font-size:8px}.intro-bottom{bottom:28px;left:6vw;right:6vw}.intro-categories{font-size:8px;gap:12px;margin-top:22px;letter-spacing:.2em}.intro-categories i{width:10px}.intro-ghost{font-size:95vw;left:-10vw}.intro-bottom .intro-meta{font-size:9px}.intro-speed{width:100vw}.intro-loading-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){html.intro-active{overflow:visible}.intro-active .site-intro{display:none}}