/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg-deep);
  isolation: isolate;
}

/* ---------- Stage: WebGL canvas + a CSS fallback that works without it ---------- */

.hero__stage { position: absolute; inset: 0; z-index: 0; }

.hero__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 52% at 66% 48%, rgba(71, 123, 255, 0.26), transparent 70%),
    radial-gradient(36% 46% at 86% 0%, rgba(124, 92, 255, 0.34), transparent 72%),
    radial-gradient(46% 38% at 82% 100%, rgba(124, 92, 255, 0.18), transparent 70%),
    var(--bg-deep);
}
/* a single faceted shard so the fallback still has a focal point */
.hero__fallback::before {
  content: '';
  position: absolute;
  left: 52%; top: 18%;
  width: min(30vw, 26rem);
  aspect-ratio: 0.7;
  background:
    linear-gradient(120deg, rgba(143, 176, 255, 0.9), rgba(71, 123, 255, 0.55) 40%, rgba(124, 92, 255, 0.35) 70%, rgba(255, 154, 99, 0.5));
  clip-path: polygon(52% 0, 100% 42%, 56% 100%, 0 40%);
  filter: drop-shadow(0 0 60px rgba(71, 123, 255, 0.45));
  opacity: 0.85;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease 0.1s;
}
.hero.has-3d .hero__canvas { opacity: 1; }
.hero.has-3d .hero__fallback::before { opacity: 0; transition: opacity 1s; }

/* keeps the headline legible and melts the hero into the next section */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.78) 0%, rgba(3, 4, 10, 0.42) 32%, transparent 58%),
    linear-gradient(0deg, var(--bg) 0%, transparent 18%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.55) 0%, transparent 16%);
}

/* ---------- Copy ---------- */

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 8rem max(var(--gutter), 6.5vw);
}

.hero__title {
  max-width: 14em;
  font-family: var(--serif);
  font-weight: 330;
  font-size: clamp(3rem, 5.6vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.hero__title .line { display: block; overflow: hidden; padding: 0 0.12em 0.14em 0; margin-bottom: -0.14em; }
.hero__title .line > span { display: block; }

.js .hero__title .line > span {
  transform: translateY(112%) rotate(2deg);
  transform-origin: 0 100%;
  transition: transform 1.5s var(--ease-out) calc(0.15s + var(--i, 0) * 0.13s);
}
.js .hero__title .line:nth-child(2) > span { --i: 1; }
.js .hero__title .line:nth-child(3) > span { --i: 2; }
.hero.is-ready .hero__title .line > span { transform: none; }

.glow {
  font-style: italic;
  font-weight: 300;
  padding-right: 0.06em;
  background: linear-gradient(100deg, #b4cbff 0%, #5b8aff 30%, #477bff 52%, #9a76ff 78%, #b4cbff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(71, 123, 255, 0.5));
  animation: glow-shift 9s ease-in-out infinite alternate;
}
@keyframes glow-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.hero__lead {
  max-width: 30rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.65;
  color: rgba(245, 247, 255, 0.7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.4rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

.js [data-hero-in] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 1.2s var(--ease) var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s);
}
.hero.is-ready [data-hero-in] { opacity: 1; transform: none; }

/* ---------- Bottom bar ---------- */

.hero__bar {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(1.25rem, 2.6vw, 2.2rem);
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.hero__tag {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 52rem;
  width: 100%;
  margin-inline: auto;
}
.hero__tag span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.hero__tag span:last-child { background: linear-gradient(270deg, transparent, var(--line-strong)); }
.hero__tag b {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 247, 255, 0.85);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll i { position: relative; width: 2.6rem; height: 1px; background: var(--line-strong); overflow: hidden; }
.hero__scroll i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--text);
  transform: translateX(-100%);
  animation: scroll-run 2.6s var(--ease-io) infinite;
}
@keyframes scroll-run { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (min-width: 1320px) { .hero__scroll { visibility: hidden; } }

/* ---------- Tablet & mobile ---------- */

@media (max-width: 860px) {
  .hero__inner {
    justify-content: flex-end;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 7rem;
  }
  .hero__title { font-size: clamp(2.9rem, 12.4vw, 5rem); }
  .hero__shade {
    background:
      linear-gradient(0deg, rgba(3, 4, 10, 0.94) 0%, rgba(3, 4, 10, 0.72) 34%, transparent 62%),
      linear-gradient(180deg, rgba(3, 4, 10, 0.5) 0%, transparent 14%),
      linear-gradient(0deg, var(--bg) 0%, transparent 10%);
  }
  .hero__bar { grid-template-columns: 1fr auto; }
  .hero__tag { display: none; }
}
@media (max-width: 480px) {
  .hero__actions { gap: 0.8rem 1.8rem; }
  .hero__actions .btn { width: 100%; }
}