:root { color-scheme: dark; }
[x-cloak] { display: none !important; }

html { scroll-padding-top: 6rem; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,212,255,0.08), transparent 60%),
    radial-gradient(900px 500px at 0% 20%, rgba(0,153,255,0.05), transparent 55%),
    #0A0A0F;
}

/* Glass panel */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass:hover { border-color: rgba(0,212,255,0.35); }

/* Cyan glow text */
.glow { text-shadow: 0 0 30px rgba(0,212,255,0.45); }

/* Animated grid backdrop */
.grid-bg {
  background-image:
    linear-gradient(rgba(0,212,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
}

/* Hero video layering */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background: center/cover no-repeat;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; pointer-events: none;
}
.hero-tint {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, rgba(10,10,15,0.80), rgba(10,10,15,0.45) 45%, rgba(10,10,15,0.70));
}

/* Console / log animation */
.console-line { opacity: 0; transform: translateY(6px); }
.console-line.in { opacity: 1; transform: none; transition: all .35s ease; }

/* Gradient hairline */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.6), transparent);
}

/* Reveal default state (JS-driven; visible if JS off) */
.reveal-ready [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .reveal-ready [data-reveal] { opacity: 1 !important; }
  html { scroll-behavior: auto; }
}

/* Bento tilt */
.tilt { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.tilt:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: marquee 28s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }