/* Claed3D.com — deep-space aesthetic statement */
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300;font-display:swap;
  src:url("/vendor/fonts/space-grotesk-300.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("/vendor/fonts/space-grotesk-400.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("/vendor/fonts/space-grotesk-500.woff2") format("woff2");
}

:root{
  --void:#04050a; --abyss:#0b1024;
  --violet:#6d4aff; --blue:#4aa8ff; --white:#eaf2ff; --warm:#ffe6b0;
  --haze:#8a93b8;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--void);color:var(--white);font-family:var(--sans);
  overflow:hidden;position:fixed;inset:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}

/* cinematic vignette + subtle top/bottom fade over the canvas */
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 46%, transparent 46%, rgba(2,3,8,.34) 74%, rgba(1,2,6,.72) 100%),
    linear-gradient(to bottom, rgba(4,5,12,.30) 0%, transparent 22%, transparent 74%, rgba(3,4,10,.55) 100%);
}

/* identity overlay */
.overlay{
  position:fixed;inset:0;z-index:2;display:grid;place-items:center;
  pointer-events:none;text-align:center;padding:6vh 6vw;
}
.wordmark{
  font-weight:300;text-transform:uppercase;
  font-size:clamp(2.7rem,12vw,9rem);line-height:1;letter-spacing:.30em;
  /* the last-letter tracking optically centers uppercase */
  padding-left:.30em;
  background:linear-gradient(105deg,#ffffff 6%,#a9d4ff 40%,#c3b0ff 74%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 42px rgba(120,165,255,.55)) drop-shadow(0 0 12px rgba(200,215,255,.45)) drop-shadow(0 0 2px rgba(255,255,255,.5));
  will-change:opacity,letter-spacing,filter;
  animation:wordmark-in 1.9s cubic-bezier(.16,.8,.24,1) both;
}
.tagline{
  margin-top:1.7em;font-weight:400;text-transform:uppercase;
  font-size:clamp(.62rem,2.1vw,.92rem);letter-spacing:.52em;padding-left:.52em;
  color:var(--haze);
  animation:tagline-in 1.4s ease 1.05s both;
}

@keyframes wordmark-in{
  from{opacity:0;letter-spacing:.62em;padding-left:.62em;filter:blur(16px);transform:translateY(12px)}
  to{opacity:1;letter-spacing:.30em;padding-left:.30em;filter:blur(0);transform:none}
}
@keyframes tagline-in{from{opacity:0;transform:translateY(8px)}to{opacity:.9;transform:none}}

/* footer */
.footer{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:clamp(1rem,2.4vw,1.7rem) clamp(1.1rem,4vw,2.6rem);
  font-size:.72rem;letter-spacing:.14em;color:var(--haze);
  pointer-events:none;
  animation:tagline-in 1.2s ease 1.5s both;
}
.footer .mail{
  pointer-events:auto;color:#b9cdff;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease;
}
.footer .mail:hover{color:var(--white);border-bottom-color:rgba(160,190,255,.6)}
.footer .mail:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
.footer .hint{text-transform:uppercase;letter-spacing:.24em;opacity:.62;font-size:.66rem}

/* loader */
.loader{
  position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:var(--void);
  transition:opacity .9s ease,visibility .9s;
}
.loader span{
  width:9px;height:9px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 22px var(--blue);animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
body.ready .loader{opacity:0;visibility:hidden}

/* graceful fallback when WebGL is unavailable / errors */
body.nogl #scene{display:none}
body.nogl{
  background:
    radial-gradient(60% 55% at 72% 26%, rgba(109,74,255,.20), transparent 60%),
    radial-gradient(55% 60% at 22% 74%, rgba(74,168,255,.18), transparent 62%),
    radial-gradient(140% 120% at 50% 40%, #0b1024 0%, #04050a 62%);
}
body.nogl .loader{opacity:0;visibility:hidden}

@media (max-width:560px){
  .footer{flex-direction:column;gap:.5rem;text-align:center}
  .footer .hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wordmark,.tagline,.footer,.loader{animation:none}
  .wordmark{opacity:1;filter:drop-shadow(0 0 30px rgba(90,140,255,.32))}
  .tagline{opacity:.9}
  body.ready .loader{opacity:0;visibility:hidden}
}