/* ============================================================
   critical.css — Above-the-fold, minimal, anti-FOUC
   zidCreative v4.0 "Immersive Tech"
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#070b14;
  color:#e5e7eb;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ========== ANTI-FOUC ========== */
html:not(.tw-ready) body{opacity:0}
html.tw-ready body{opacity:1;transition:opacity .35s ease}

/* Page enter animation */
.page-loading{opacity:0;animation:pageFadeIn .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pageFadeIn{to{opacity:1}}

/* ========== SCROLL PROGRESS ========== */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  width:0;height:3px;
  background:linear-gradient(90deg,
    var(--theme-accent, #38bdf8),
    var(--theme-primary, #0ea5e9),
    var(--theme-accent, #67e8f9));
  background-size:200% 100%;
  animation:progressGlow 3s ease infinite;
  z-index:9999;
  transition:width .08s linear;
  box-shadow:0 0 12px var(--theme-glow, rgba(14,165,233,.5));
}
@keyframes progressGlow{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}