/* Auny's AI Hub: .dev void and phosphor as the base, .com orange, teal and cream as accents. */
@font-face{font-family:Inter;font-weight:600 800;font-style:normal;font-display:swap;src:url(/fonts/inter.woff2) format("woff2")}
@font-face{font-family:Caveat;font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/caveat.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format("woff2")}
:root{
  --void:#050806;--panel:#0A100C;--hair:#14261B;--body:#9DBFAC;--phosphor:#3DF07A;
  --orange:#FD8D0C;--teal:#5CC8BB;--cream:#FAF5EE;
  --expo:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--void);color:var(--cream)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#hub{position:fixed;inset:0;width:100%;height:100%;display:block}
main{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
.tag{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--body);display:flex;align-items:center;gap:10px;animation:fade 1s .2s both}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--phosphor);box-shadow:0 0 0 0 rgba(61,240,122,.6);animation:ping 2.4s ease-out infinite}
.stage{position:relative;align-self:center;justify-self:center;text-align:center;padding:clamp(28px,6vw,64px) clamp(8px,4vw,56px);max-width:100%}
.stage::before{content:"";position:absolute;inset:-12% -6%;z-index:-1;background:radial-gradient(closest-side,rgba(5,8,6,.74) 45%,rgba(5,8,6,0));pointer-events:none}
h1{font-weight:800;font-size:clamp(52px,15.5vw,148px);line-height:.95;letter-spacing:-.045em;color:var(--cream);text-wrap:balance}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .1em;margin:-.04em .1em -.1em -.02em}
.w:last-child{margin-right:-.02em}
.w>span{display:inline-block;animation:rise 1.1s var(--expo) both}
.w:nth-child(1)>span{animation-delay:.15s}
.w:nth-child(2)>span{animation-delay:.25s}
.w:nth-child(3)>span{animation-delay:.35s}
.g{color:var(--phosphor)}
.rule{display:block;height:3px;width:min(220px,46%);margin:clamp(18px,3vw,30px) auto 0;background:linear-gradient(90deg,var(--phosphor),var(--orange));border-radius:2px;transform-origin:left;animation:draw 1.1s .9s var(--expo) both}
.soon{margin-top:clamp(10px,2vw,18px);font-family:Caveat,"Segoe Script",cursive;font-weight:600;font-size:clamp(34px,8vw,68px);line-height:1.1;color:var(--orange);transform:rotate(-2.5deg);animation:pull 1.3s 1.2s var(--expo) both}
.dots i{font-style:normal;animation:blink 1.8s infinite both}
.dots i:nth-child(2){animation-delay:.25s}
.dots i:nth-child(3){animation-delay:.5s}
footer{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font:500 12px/1 var(--mono);letter-spacing:.06em;animation:fade 1s 1.8s both}
footer a{color:var(--body);text-decoration:none;padding:12px 6px;border-bottom:1px solid var(--hair);transition:color .2s,border-color .2s}
footer a:hover{color:var(--phosphor);border-color:var(--phosphor)}
footer a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
@keyframes rise{from{transform:translateY(115%)}to{transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:none}}
@keyframes pull{from{opacity:0;filter:blur(14px);letter-spacing:.14em}to{opacity:1;filter:blur(0);letter-spacing:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,60%,100%{opacity:1}30%{opacity:.18}}
@keyframes ping{70%,100%{box-shadow:0 0 0 12px rgba(61,240,122,0)}}
@media (min-width:768px){main{padding:28px 40px}.tag,footer{font-size:13px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}