:root{color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif;background:#03090f;color:#eef5fa;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column}::selection{background:#a1dfff;color:#07121c}
.scene{position:fixed;inset:0;overflow:hidden;z-index:-2;background:#03090f}.space{position:absolute;inset:-2%;background:url('assets/space.jpg') center center/cover no-repeat;animation:drift 28s ease-in-out infinite alternate;will-change:transform}.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,4,8,.12),transparent 23%,rgba(0,5,10,.12) 65%,rgba(0,4,8,.28))}canvas{width:100%;height:100%;position:absolute;inset:0;opacity:.65}
header,footer{display:flex;align-items:center;justify-content:space-between;margin:0 5.1%;font-size:10px;font-weight:400;letter-spacing:.25em;color:#97a9b7;z-index:2}header{height:105px;flex-shrink:0}header>span:first-child{letter-spacing:.37em}.status{display:flex;align-items:center;gap:11px}.status b{width:4px;height:4px;background:#bde9ff;border-radius:50%;box-shadow:0 0 12px #7acbff}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:70px 24px 45px}.identity{width:min(1110px,80vw);animation:arrive 1.8s ease both}.logo{display:block;width:100%;height:auto;filter:drop-shadow(0 1px 0 #dcefff88) drop-shadow(0 3px 2px #000b)}.light{height:2px;margin:36px auto 0;width:92%;position:relative}.light:after{content:"";position:absolute;inset:-28px 15%;background:radial-gradient(ellipse,#72c7ff33,transparent 65%);animation:line-reveal 3.2s 1.35s cubic-bezier(.12,.75,.15,1) both}.light span{position:absolute;width:120px;height:5px;left:calc(50% - 60px);top:-2px;background:radial-gradient(ellipse,#fff 0%,#b2e6ff 20%,#51baff22 60%,transparent 75%);box-shadow:0 0 20px #8ad4ff88;animation:spark 3.6s 1.1s ease-out both}
.message{margin-top:65px;animation:arrive 1.8s .25s ease both}h1{font-size:clamp(22px,2.8vw,43px);line-height:1.5;letter-spacing:.22em;font-weight:350;text-transform:uppercase;margin:0 0 22px;padding-left:.22em;text-shadow:0 2px 20px #83bdde22}p{color:#bdc9d4;font-size:clamp(15px,1.45vw,21px);font-weight:300;line-height:1.8;margin:0}.mobile-break{display:none}.divider{display:flex;align-items:center;justify-content:center;gap:28px;margin:37px auto 27px;width:min(440px,70vw)}.divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#a8c6d980)}.divider span:last-child{transform:rotate(180deg)}.divider i{width:5px;height:23px;transform:skew(-38deg);background:#d7f0ff;box-shadow:0 0 12px #81cfff,4px 0 0 #6bb0e044}.contact{display:inline-flex;align-items:center;gap:12px;color:#e4edf5;text-decoration:none;font-size:clamp(17px,1.5vw,22px);letter-spacing:.16em;padding:12px 16px;transition:color .25s,text-shadow .25s}.contact svg{height:14px;width:14px;stroke:currentColor;stroke-width:1.2;opacity:0;transform:translate(-5px,5px);transition:opacity .25s,transform .25s}.contact:hover{color:#bfeaff;text-shadow:0 0 20px #6ccaffaa}.contact:hover svg,.contact:focus-visible svg{opacity:1;transform:none}a:focus-visible,button:focus-visible{outline:1px solid #bdeaff;outline-offset:6px;border-radius:2px}
footer{min-height:85px;color:#7f939f}button{font:inherit;letter-spacing:.18em;color:#a0b2bf;background:none;border:0;padding:12px 0 12px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}button:hover{color:white}.motion-icon{font-size:13px;letter-spacing:0}.frame{position:fixed;inset:27px 24px;pointer-events:none;z-index:-1}.frame i{position:absolute;width:105px;height:38px;border-top:1px solid #8199a34d;top:0;left:0;transform:skew(-40deg);border-left:1px solid #8199a34d}.frame i:nth-child(2){left:auto;right:0;transform:scaleX(-1) skew(-40deg)}.frame i:nth-child(3){top:auto;bottom:0;transform:scaleY(-1) skew(-40deg)}.frame i:nth-child(4){left:auto;right:0;top:auto;bottom:0;transform:scale(-1) skew(-40deg)}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.035) translateY(6px)}}@keyframes breathe{from{opacity:.55;transform:scaleX(.8)}to{opacity:1;transform:scaleX(1.15)}}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
body.paused .space,body.paused .light:before,body.paused .light:after,body.paused .light span{animation-play-state:paused!important}
@media(min-width:1600px){main{padding-top:90px}.message{margin-top:75px}}
@media(max-width:600px){header,footer{margin:0 8%;font-size:8px;letter-spacing:.15em}header{height:80px}.status{gap:7px}.frame{inset:18px 16px}.frame i{width:45px;height:25px}.space{background-position:54% center}.shade{background:linear-gradient(180deg,transparent,rgba(1,7,13,.25) 25%,rgba(1,7,13,.15) 75%,transparent)}main{padding:70px 20px 55px;justify-content:center}.identity{width:91vw}.light{margin-top:27px;width:100%}.message{margin-top:49px;width:100%}h1{font-size:clamp(19px,5vw,28px);letter-spacing:.14em;white-space:nowrap;margin-bottom:18px}p{font-size:15px;line-height:1.85}.mobile-break{display:block}.divider{margin-top:29px;margin-bottom:18px;gap:22px;width:65vw}.contact{font-size:17px;letter-spacing:.11em}.contact svg{opacity:.65;width:12px}footer{min-height:72px}.motion-label{font-size:8px}}
@media(max-height:650px) and (min-width:601px){header{height:65px}main{padding:25px 24px}.identity{width:min(790px,75vw)}.light{margin-top:20px}.message{margin-top:30px}h1{font-size:28px;margin-bottom:12px}.divider{margin:20px auto 10px}footer{min-height:55px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.identity,.message{opacity:1}canvas{display:none}}

/* A point of light opens into a beam; the easing continuously slows the expansion. */
.light:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#5a9bc966,#d6f3ff,#5a9bc966,transparent);box-shadow:0 0 12px #75caff55;transform-origin:center;animation:line-reveal 3.2s 1.35s cubic-bezier(.12,.75,.15,1) both}
@keyframes line-reveal{from{transform:scaleX(0);opacity:0}8%{opacity:1}to{transform:scaleX(1);opacity:1}}
@keyframes spark{0%{opacity:0;transform:scale(.035,1)}7%{opacity:1;transform:scale(.12,2.8);filter:brightness(2.8)}18%{opacity:1;transform:scale(.34,1.6);filter:brightness(1.8)}65%{opacity:.85;transform:scale(.9,1);filter:brightness(1)}100%{opacity:.75;transform:scale(1,1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.light:before,.light:after,.light span{animation:none!important;transform:none;opacity:1}}
