/* Palette matches the existing AdmitLayer public website release. */
:root{color-scheme:dark;--navy:#082747;--teal:#00c8ed;--ink:#f3f5fa;--muted:#99aac5;--line:#233049;--paper:#090f1e}
body{background:#090f1e}.header{background:#c5d2de;border-color:#9bafc2;position:relative;isolation:isolate}.header:before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);background:#c5d2de;z-index:-1;border-bottom:1px solid #9bafc2}
nav{color:#253e59}.nav-portal{border-color:#849fb4}nav a:hover{color:#00576a}
.lead,.hero-foot{color:var(--muted)}.button,.product .button{background:#00c8ed;color:#04111e}.button:hover,.product .button:hover{background:#64dff5}
.product-section{background:#101827;border-block:1px solid var(--line)}.product{background:#111a2a;border-color:var(--line)}
.product-logo{background:#c5d2de}.product-section .eyebrow,.features li:before,.coming-symbol{color:#00c8ed}.product-type,.coming p,.coming-tag,.product-links,.product-copy>p,.features{color:#99aac5}
.preview-top{background:#192237;border-color:#2c3b55}.product-preview>img{border-color:#2c3b55}.coming{border-color:#33415c}
.portal-section{background:#171f32}.portal-row{background:#111a2a;border-color:var(--line)}.section-heading>p,.preview-bottom{color:var(--muted)}
footer{border-color:var(--line)}footer .brand{background:#c5d2de;border-radius:5px;padding:4px 10px}
.skip{background:#111a2a;color:#f3f5fa}.dot{background:#00c8ed}
.network-art{height:auto;min-width:0;background:radial-gradient(ellipse at 54% 44%,#12304788,transparent 68%);overflow:visible;transform:none}
.connection-scene{width:100%;height:auto;display:block;overflow:visible}.connection-caption{display:flex;align-items:center;justify-content:center;gap:7px;font-size:8px;letter-spacing:1.3px;color:#99aac5;flex-wrap:wrap}
.connection-caption .dot{margin-right:0}.replay-motion{margin-left:10px;border:1px solid #33415c;border-radius:4px;background:#111a2a;color:#b6c9e0;font:inherit;letter-spacing:0;padding:7px 10px;cursor:pointer}.replay-motion:hover{border-color:#00c8ed;color:#00c8ed}.replay-motion:focus-visible{outline:2px solid #00c8ed;outline-offset:4px}
.connection-wire{stroke-dasharray:100;stroke-dashoffset:0}.security-key{opacity:1;transform:translate(-30px,40px)}.key-turn{transform-box:view-box;transform-origin:270px 146px}.secure-check{transform-box:fill-box;transform-origin:center}.lock-shackle{transform-box:view-box;transform-origin:286px 134px}
@media(prefers-reduced-motion:no-preference){
.is-connecting .connection-wire{animation:connect-wire 1.3s ease-in-out both}
.is-connecting .screen-connected{animation:connect-light 1s ease both}
.is-connecting .network-branches,.is-connecting .network-lights{animation:connect-light 1s 1s ease both}
.is-connecting .security-key{animation:insert-key 10s ease-in-out infinite}.is-connecting .key-turn{animation:turn-in-lock 10s ease-in-out infinite}
.is-connecting .lock-shackle{animation:close-lock 10s ease-in-out infinite}
.is-connecting .secure-check{animation:secure-cycle 10s ease-in-out infinite}
.product,.portal-row{transition:border-color .25s,box-shadow .25s}.product:hover,.portal-row:hover{border-color:#00c8ed66;box-shadow:0 12px 35px #0002}
.button span,.text-link span,.nav-portal span{display:inline-block;transition:transform .2s}.button:hover span,.nav-portal:hover span{transform:translate(2px,-2px)}.text-link:hover span{transform:translateX(4px)}
@keyframes connect-wire{from{stroke-dashoffset:100;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes connect-light{from{opacity:.15}to{opacity:1}}
/* The key tip lands exactly on the keyhole at (270,146).
   Its inner group rotates around the shaft, independently of insertion. */
@keyframes insert-key{
0%,16%{opacity:1;transform:translate(-60px,0)}
35%,74%{opacity:1;transform:translate(0,0)}
87%{opacity:1;transform:translate(-60px,0)}
100%{opacity:1;transform:translate(-30px,40px)}
}
@keyframes turn-in-lock{
0%,40%{transform:scaleY(1)}
48%{transform:scaleY(.25)}
56%,63%{transform:scaleY(-1)}
68%{transform:scaleY(.25)}
74%,100%{transform:scaleY(1)}
}
@keyframes close-lock{
0%,53%{transform:translateY(-9px) rotate(32deg)}
63%{transform:translateY(-3px) rotate(0deg)}
68%,100%{transform:translateY(0) rotate(0deg)}
}
@keyframes secure-cycle{0%,75%{opacity:0;transform:scale(.6)}80%,100%{opacity:1;transform:scale(1)}}
}
@media(max-width:760px){.network-art{height:auto;margin-top:10px}.connection-caption{font-size:7px;letter-spacing:.9px}.replay-motion{padding:9px 12px}footer .brand{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}



/* Explicit playback remains available when the OS requests reduced motion. */
@media(prefers-reduced-motion:reduce){
.network-art.motion-enabled .security-key{animation:insert-key 10s ease-in-out infinite!important}
.network-art.motion-enabled .key-turn{animation:turn-in-lock 10s ease-in-out infinite!important}
.network-art.motion-enabled .lock-shackle{animation:close-lock 10s ease-in-out infinite!important}
.network-art.motion-enabled .secure-check{animation:secure-cycle 10s ease-in-out infinite!important}
}
.network-art.is-paused .security-key,.network-art.is-paused .key-turn,.network-art.is-paused .lock-shackle,.network-art.is-paused .secure-check,.network-art.is-paused .connection-wire,.network-art.is-paused .screen-connected,.network-art.is-paused .network-branches,.network-art.is-paused .network-lights{animation-play-state:paused!important}
.motion-build{font-size:8px;letter-spacing:.5px;color:#99aac5;text-align:center;margin:12px 0 0}
@keyframes connect-wire{from{stroke-dashoffset:100;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes connect-light{from{opacity:.15}to{opacity:1}}
/* The key tip lands exactly on the keyhole at (270,146).
   Its inner group rotates around the shaft, independently of insertion. */
@keyframes insert-key{
0%,16%{opacity:1;transform:translate(-60px,0)}
35%,74%{opacity:1;transform:translate(0,0)}
87%{opacity:1;transform:translate(-60px,0)}
100%{opacity:1;transform:translate(-30px,40px)}
}
@keyframes turn-in-lock{
0%,40%{transform:scaleY(1)}
48%{transform:scaleY(.25)}
56%,63%{transform:scaleY(-1)}
68%{transform:scaleY(.25)}
74%,100%{transform:scaleY(1)}
}
@keyframes close-lock{
0%,53%{transform:translateY(-9px) rotate(32deg)}
63%{transform:translateY(-3px) rotate(0deg)}
68%,100%{transform:translateY(0) rotate(0deg)}
}
@keyframes secure-cycle{0%,75%{opacity:0;transform:scale(.6)}80%,100%{opacity:1;transform:scale(1)}}


/* Position and rotation are controlled by the animation timeline, not CSS keyframes. */
.network-art .security-key,.network-art .key-turn,.network-art .lock-shackle,.network-art .secure-check{animation:none!important}
.network-art .security-key{transform-box:view-box;transform-origin:0 0}
.network-art .key-turn{transform-box:view-box;transform-origin:270px 146px}
.network-art .lock-shackle{transform-box:view-box;transform-origin:286px 134px}

/* Foreground introduction: the site stays usable and visitors can skip it. */
.lock-intro[hidden]{display:none}
.lock-intro{position:fixed;inset:0;z-index:100;pointer-events:none;--intro-opacity:1}
.lock-intro:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#11243bf5,#090f1ee8);opacity:var(--intro-opacity)}
.lock-intro>svg{position:fixed;overflow:visible;filter:drop-shadow(0 18px 55px #0008)}
.lock-intro .security-key,.lock-intro .key-turn,.lock-intro .lock-shackle,.lock-intro .secure-check{animation:none!important}
.lock-intro .security-key{transform-box:view-box;transform-origin:0 0}
.lock-intro .key-turn{transform-box:view-box;transform-origin:270px 146px}
.lock-intro .lock-shackle{transform-box:view-box;transform-origin:286px 134px}
.intro-status{position:absolute;bottom:12%;left:5%;width:90%;text-align:center;font-size:clamp(15px,2vw,22px);color:#d7e6ef;letter-spacing:1px;opacity:var(--intro-opacity)}
.skip-intro{position:absolute;right:24px;top:24px;pointer-events:auto;padding:12px 18px;border:1px solid #99aac5;background:#111a2a;color:#f3f5fa;border-radius:5px;cursor:pointer}
.skip-intro:focus-visible{outline:3px solid #00c8ed;outline-offset:4px}
@media(max-width:760px){.intro-status{bottom:18%}.skip-intro{right:15px;top:15px}}