/* File: labs/assets/css/base.css */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Faint grid backdrop, same as the main site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 114, 109, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 114, 109, .02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.62), transparent 75%);
  z-index: -3;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: var(--red-soft); color: var(--navy); }

.orb {
  position: fixed;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(130px);
  opacity: .08;
  pointer-events: none;
  z-index: -2;
}
.orb-red { background: var(--red); top: -20vw; right: -11vw; }
.orb-deep-blue { background: var(--blue-deep); bottom: -30vw; left: -20vw; opacity: .18; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse {
  50% { opacity: .45; transform: scale(.75); }
}