/*
 * Fullstacks visual layer
 *
 * This file intentionally sits after the compiled Nuxt stylesheet. It gives
 * the brand its own visual language without changing the app bundle, routes,
 * 3D scenes, analytics, or interaction code.
 */

:root {
  --color-dark-400: #0b0e12;
  --color-dark-500: #080a0d;
  --color-brand-rose-200: #ff6b35;
  --color-brand-blue: #6ee7d2;
  --color-brand-blue-200: #b7fff2;
  --color-brand-blue-300: #123c42;
  --color-brand-blue-500: #1d6b70;
  --color-brand-blue-600: #0f3b41;
  --font-serif: var(--font-sans-regular), ui-sans-serif, sans-serif;
}

body {
  background-color: #080a0d;
}

/* Remove the scraped bird scene. The replacement motion is the CSS-authored
 * falling-block field below. */
canvas[data-engine="three.js r179"] {
  opacity: 0 !important;
  pointer-events: none;
}

#fs-system-canvas {
  display: block;
  inset: 0;
  opacity: .95;
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

/* Make the hero read as a systems diagram rather than an editorial scene. */
.home-hero {
  position: relative !important;
  background:
    linear-gradient(90deg, rgba(110, 231, 210, .06) 1px, transparent 1px),
    linear-gradient(rgba(110, 231, 210, .06) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(255, 107, 53, .16), transparent 34%),
    #080a0d !important;
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.home-hero::before {
  background:
    linear-gradient(#ff6b35, #ff6b35) 11vw 26% / min(34vw, 430px) 28px no-repeat,
    linear-gradient(#6ee7d2, #6ee7d2) calc(11vw + 12px) calc(26% + 52px) / min(30vw, 380px) 28px no-repeat,
    linear-gradient(#f4f7f5, #f4f7f5) calc(11vw + 24px) calc(26% + 104px) / min(26vw, 330px) 28px no-repeat,
    linear-gradient(rgba(8, 10, 13, .28), rgba(8, 10, 13, .28)),
    linear-gradient(90deg, rgba(110, 231, 210, .05) 1px, transparent 1px),
    linear-gradient(rgba(110, 231, 210, .05) 1px, transparent 1px);
  content: "";
  inset: 0;
  opacity: .92;
  position: absolute;
  transform: none;
  z-index: 0;
}

.home-hero::after {
  background: linear-gradient(90deg, transparent, rgba(110, 231, 210, .7), transparent);
  content: "";
  height: 1px;
  left: 12vw;
  opacity: .8;
  position: absolute;
  right: 12vw;
  top: 58%;
  transform: rotate(-7deg);
  transform-origin: center;
  pointer-events: none;
}

.home-hero h1 {
  color: #f4f7f5;
  font-family: var(--font-sans-regular), ui-sans-serif, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.07em;
  text-transform: uppercase;
  transform: none !important;
}

.home-hero h1,
.home-hero h2,
.home-hero h2 span {
  font-family: var(--font-sans-regular), ui-sans-serif, sans-serif !important;
}

.home-hero h1 {
  font-size: clamp(4.8rem, 13.5vw, 18rem) !important;
}

.home-hero h1 .char {
  background: linear-gradient(180deg, #fff 5%, #6ee7d2 88%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent !important;
}

.home-hero h2 {
  margin-left: 0;
}

.home-hero h2 span {
  color: #ff6b35;
  font-family: var(--font-sans-regular), ui-sans-serif, sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.release-spirit img[alt="bird"] {
  opacity: 0 !important;
}

.release-spirit .wrapper::before {
  background:
    linear-gradient(#ff6b35, #ff6b35) 0 0 / 100% 22% no-repeat,
    linear-gradient(#6ee7d2, #6ee7d2) 18% 39% / 82% 22% no-repeat,
    linear-gradient(#f4f7f5, #f4f7f5) 36% 78% / 64% 22% no-repeat;
  content: "";
  height: 2rem;
  left: 1rem;
  position: absolute;
  top: 1.3rem;
  transform: skewX(-18deg);
  width: 3.4rem;
  z-index: 3;
}

/* Replace the bird marks with a compact three-layer stack mark. */
.text-icon-bird,
.text-icon-bird-blue,
.text-icon-bird-2 {
  background-image: none;
  height: 3rem;
  position: relative;
  width: 4.8rem;
}

.text-icon-bird::before,
.text-icon-bird-blue::before,
.text-icon-bird-2::before {
  background:
    linear-gradient(#ff6b35, #ff6b35) 0 0 / 100% 22% no-repeat,
    linear-gradient(#6ee7d2, #6ee7d2) 18% 39% / 82% 22% no-repeat,
    linear-gradient(#f4f7f5, #f4f7f5) 36% 78% / 64% 22% no-repeat;
  content: "";
  inset: 12% 8%;
  position: absolute;
  transform: skewX(-18deg);
}

.text-icon-bird-2 {
  height: 3.6rem;
  width: 3rem;
}

/* Keep the new treatment quiet for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .home-hero::after {
    transform: none;
  }
}