.hero-section {
  --hero-grid-line-color: rgba(255, 255, 255, 0.035);
  --hero-glow-color: rgba(255, 255, 255, 0.055);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.light .hero-section {
  --hero-grid-line-color: rgba(0, 0, 0, 0.03);
  --hero-glow-color: rgba(0, 0, 0, 0.055);
}

.hero-section > :not(.hero-grid-canvas):not(.hero-bg-layer):not(.hero-ambient):not(.floating-shapes) {
  position: relative;
  z-index: 2;
}

.hero-grid-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  contain: layout paint size;
}

.hero-title {
  white-space: normal;
}

.hero-title-line {
  display: inline-block;
}

.hero-typewriter-cursor {
  display: inline-block;
  margin-left: 0.08em;
  color: var(--accent-primary);
  line-height: 1;
}

.hero-title-complete .hero-typewriter-cursor {
  animation: heroCursorBlink 0.72s steps(1, end) infinite;
}

@keyframes heroCursorBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.hero-subtitle {
  min-height: calc(1em * 1.75 * 3);
  overflow: hidden;
}

.hero-subtitle-text {
  display: inline-block;
  will-change: opacity, transform;
}

.hero-subtitle.is-leaving .hero-subtitle-text {
  animation: heroSubtitleLeave 0.5s ease both;
}

.hero-subtitle.is-entering .hero-subtitle-text {
  animation: heroSubtitleEnter 0.5s ease both;
}

@keyframes heroSubtitleLeave {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -14px, 0); }
}

@keyframes heroSubtitleEnter {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero-enhancements-ready .floating-shapes {
  will-change: transform;
  animation: heroFloatingShapesDrift 18s ease-in-out infinite alternate;
}

@keyframes heroFloatingShapesDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(0, -10px, 0) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-complete .hero-typewriter-cursor,
  .hero-subtitle.is-leaving .hero-subtitle-text,
  .hero-subtitle.is-entering .hero-subtitle-text,
  .hero-enhancements-ready .floating-shapes {
    animation: none;
  }
  .hero-typewriter-cursor { display: none; }
  .hero-subtitle-text { opacity: 1; transform: none; }
  .hero-grid-canvas { opacity: 0.55; }
}