:root{color-scheme:dark;--cyan:#7aeeeb;--night:#030c16}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--night)}
body{overflow:hidden;font-family:"Segoe UI",Arial,sans-serif}
.universe{position:relative;isolation:isolate;width:100%;height:100%;height:100svh;overflow:hidden;background:#030c16}
.art{position:absolute;inset:0;background:url("assets/connection.webp") center center/cover no-repeat;animation:awakening 2.8s ease-out both,drift 22s ease-in-out 2.8s infinite alternate;will-change:transform}
.interaction{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.interaction:focus{outline:none}.interaction:focus-visible{outline:1px solid #7aeeeb66;outline-offset:-12px}
.click-glow{position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(circle,rgba(255,249,229,.85) 0%,rgba(255,222,172,.45) 7%,rgba(255,184,111,.18) 23%,rgba(111,228,229,.08) 42%,transparent 67%);opacity:0;transform:scale(.65);pointer-events:none}
.atmosphere{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,9,17,.5),transparent 45%,rgba(2,9,17,.08) 75%,#030c16 100%),radial-gradient(ellipse at 50% 16%,rgba(21,92,112,.12),transparent 50%)}
.atmosphere::before{content:"";position:absolute;inset:18% -15% -8%;background:radial-gradient(ellipse at 33% 62%,#2bb8c21a,transparent 42%),radial-gradient(ellipse at 72% 48%,#e9ad6710,transparent 35%);opacity:.35;animation:light-tide 19s ease-in-out infinite;pointer-events:none}
#field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 53%,transparent 24%,rgba(2,7,14,.25) 68%,rgba(2,7,14,.7) 100%);pointer-events:none}
.identity{position:absolute;z-index:2;top:14%;width:100%;text-align:center;animation:arrive 2.2s cubic-bezier(.2,.6,.3,1) both;pointer-events:none}
.emblem{width:39px;height:39px;color:#99e6e7;opacity:.7;margin-bottom:25px;filter:drop-shadow(0 0 14px #35c8d54d)}
h1{font-size:clamp(54px,6.6vw,112px);font-weight:300;line-height:1.15;letter-spacing:-.055em;margin:0;color:#e9f4f4;text-shadow:0 2px 36px #78e5e51a}
h1 span{color:#8bdddf;font-weight:350}
.signature{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:29px;opacity:.7}
.signature i{display:block;width:51px;height:1px;background:linear-gradient(90deg,transparent,#66d7db66)}
.signature i:last-child{transform:rotate(180deg)}
.signature b{width:4px;height:4px;background:#99f0e5;transform:rotate(45deg);box-shadow:0 0 12px #89fff4}
.contact{position:absolute;left:var(--contact-x,49.3%);top:var(--contact-y,54%);width:min(36vw,500px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.65;animation:awakening 3.5s ease-out both}
.orbital{width:100%;height:100%;color:#74e7ed;animation:orbit 75s linear infinite}
.spark{position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#fff7df;box-shadow:0 0 18px 5px #fff1ce88,0 0 65px 20px #ffb87530;animation:glow 5s ease-in-out infinite}
.pulse{position:absolute;inset:28%;border:1px solid #9bdedc;border-radius:50%;opacity:0;animation:pulse 8s ease-out infinite}
.pulse-two{animation-delay:4s}
/* Same image coordinates and transform as the hands, including background drift. */
.circuits{position:absolute;left:var(--art-left,0px);top:var(--art-top,0px);width:var(--art-width,100%);height:var(--art-height,100%);overflow:visible;stroke:#61b6c4;stroke-width:.7;opacity:.2;pointer-events:none;animation:awakening 4s both}
.circuit-terminals{fill:#06202c;stroke:#a7eaed}
.circuits .signal{stroke:#b5ffff;stroke-width:1.4;stroke-dasharray:35 700;animation:transmit var(--signal-duration,4s) linear infinite;animation-delay:var(--signal-delay,0s);filter:drop-shadow(0 0 4px #73faff)}
/* Each line has its own speed and starting phase. */
.signal-left-top{--signal-duration:4s;--signal-delay:-1.1s}
.signal-left-middle{--signal-duration:5.3s;--signal-delay:-3.2s}
.signal-left-bottom{--signal-duration:6.7s;--signal-delay:-4.8s}
.signal-right-top{--signal-duration:4.6s;--signal-delay:-2.7s}
.signal-right-middle{--signal-duration:5.9s;--signal-delay:-.8s}
.signal-right-bottom{--signal-duration:7.4s;--signal-delay:-5.5s}
.edge{position:absolute;width:23px;height:23px;border-color:#81cdd02b;border-style:solid;pointer-events:none}
.edge-tl{top:32px;left:32px;border-width:1px 0 0 1px}.edge-tr{top:32px;right:32px;border-width:1px 1px 0 0}.edge-bl{bottom:32px;left:32px;border-width:0 0 1px 1px}.edge-br{bottom:32px;right:32px;border-width:0 1px 1px 0}
.horizon{position:absolute;bottom:37px;left:50%;width:100px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#73d8d643,transparent)}
.horizon span{position:absolute;left:48px;top:-1px;width:3px;height:3px;background:#93e3d6;border-radius:50%;box-shadow:0 0 9px #91f8e6;animation:glow 5s ease-in-out infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(.55);opacity:0}15%{opacity:.22}100%{transform:scale(2.2);opacity:0}}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes transmit{from{stroke-dashoffset:735}to{stroke-dashoffset:0}}
@keyframes arrive{from{opacity:0;transform:translateY(18px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes awakening{from{opacity:0}to{opacity:1}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes light-tide{0%,100%{opacity:.25;transform:translate3d(-2%,1%,0) scale(.98)}50%{opacity:.8;transform:translate3d(2%,-2%,0) scale(1.04)}}
@media(min-aspect-ratio:2/1){.identity{top:9%}.emblem{margin-bottom:12px;width:30px;height:30px}h1{font-size:clamp(54px,6vw,96px)}.signature{margin-top:18px}}
@media(max-width:900px) and (max-aspect-ratio:4/5){
  .art{background-image:url("assets/connection-mobile.webp");background-size:cover;background-position:50% 65%;animation:awakening 2.8s both;will-change:auto}
  .identity{top:clamp(40px,10svh,110px);padding:0 20px}
  .emblem{width:32px;height:32px;margin-bottom:20px}
  h1{font-size:clamp(37px,11.7vw,90px);letter-spacing:-.055em}
  .signature{margin-top:22px}
  .contact{width:min(92vw,56svh);opacity:.85}
  .spark{box-shadow:0 0 16px 6px #fff1ce99,0 0 56px 20px #ffb87535}
  .vignette{background:radial-gradient(ellipse at 50% 60%,transparent 30%,rgba(2,7,14,.16) 75%,rgba(2,7,14,.4) 100%)}
  .atmosphere{background:linear-gradient(180deg,rgba(3,12,22,.2),transparent 38%,transparent 86%,#030c16 100%)}
  .atmosphere::after{content:"";position:absolute;inset:25% 0 0;background:radial-gradient(ellipse at 50% 54%,#217e8d16,transparent 65%);animation:glow 7s ease-in-out infinite}
  .edge-tl,.edge-tr{top:max(22px,env(safe-area-inset-top))}
  .edge-bl,.edge-br{bottom:max(22px,env(safe-area-inset-bottom))}
  .edge-tl,.edge-bl{left:22px}.edge-tr,.edge-br{right:22px}
  .horizon{bottom:max(27px,env(safe-area-inset-bottom))}
}
@media(max-height:500px) and (min-aspect-ratio:4/5){
  .identity{top:7%}.emblem{width:24px;height:24px;margin-bottom:8px}
  h1{font-size:clamp(36px,7vw,62px)}.signature{margin-top:10px}
  .edge{width:16px;height:16px}.horizon{bottom:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.pulse{display:none}.art,.contact,.identity{opacity:1}}