/* css/hero.css — hero, terminal (termynal), brain-distortion, word cloud, hero-split */

/* Hero Section */
.hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.hero.hero-home {
  padding-bottom: 0;
}

.hero-home .social-proof-section {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  max-width: none;
  width: calc(100% + (var(--space-lg) * 2));
  margin-left: calc(var(--space-lg) * -1);
  margin-right: calc(var(--space-lg) * -1);
}

/* Hero Terminal */
.hero-terminal {
  margin: 0 auto var(--space-xl);
  max-width: 800px;
  width: 100%;
}

#brainDistortionContainer {
  width: min(620px, 80%);
  margin: 0 auto var(--space-xl);
  max-height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#brainDistortionContainer canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

#brainDistortionContainer img {
  width: 100%;
  height: auto;
  display: block;
}

/* Word Cloud Container */
.word-cloud-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 400px;
  margin: 0 auto;
  perspective: 1000px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-cloud-bg {
  width: 100%;
  display: block;
}

.word-cloud-pill {
  position: absolute;
  opacity: 0;
  max-height: 60px;
  width: auto;
  height: auto;
  transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
  pointer-events: none;
  object-fit: contain;
  transform-style: preserve-3d;
  will-change: transform;
}

.word-cloud-pill.visible {
  opacity: 1;
}

/* Pill positioning */
.pill-1 {
  top: 5%;
  left: 50%;
  transform: translateX(-50%) translateY(5px) scale(0.75);
}

.pill-1.visible {
  transform: translateX(-50%) translateY(0) scale(1);
}

.pill-2 {
  top: 10%;
  left: 8%;
  transform: translateY(5px) scale(0.75);
}

.pill-2.visible {
  transform: translateY(0) scale(1);
}

.pill-3 {
  top: 10%;
  right: 8%;
  transform: translateY(5px) scale(0.75);
}

.pill-3.visible {
  transform: translateY(0) scale(1);
}

.pill-4 {
  top: 50%;
  right: 3%;
  transform: translateY(calc(-50% + 5px)) scale(0.75);
}

.pill-4.visible {
  transform: translateY(-50%) scale(1);
}

.pill-5 {
  bottom: 5%;
  left: 30%;
  transform: translateX(-50%) translateY(-5px) scale(0.75);
}

.pill-5.visible {
  transform: translateX(-50%) translateY(0) scale(1);
}

.pill-6 {
  bottom: 10%;
  right: 8%;
  transform: translateY(-5px) scale(0.75);
}

.pill-6.visible {
  transform: translateY(0) scale(1);
}

.pill-7 {
  top: 50%;
  left: 3%;
  transform: translateY(calc(-50% + 5px)) scale(0.75);
}

.pill-7.visible {
  transform: translateY(-50%) scale(1);
}

@media (max-width: 768px) {
  .word-cloud-pill {
    max-height: 40px;
  }

  .pill-1 {
    top: 3%;
    left: 50%;
  }

  .pill-2 {
    top: 8%;
    left: 5%;
  }

  .pill-3 {
    top: 8%;
    right: 5%;
  }

  .pill-4 {
    top: 50%;
    right: 2%;
  }

  .pill-5 {
    bottom: 3%;
    left: 30%;
  }

  .pill-6 {
    bottom: 8%;
    right: 5%;
  }

  .pill-7 {
    top: 50%;
    left: 2%;
  }

  /* Hero container mobile max-heights */
  .word-cloud-container {
    max-height: 320px;
  }

  #brainDistortionContainer {
    max-height: 320px;
  }

  .hero-chat-wrapper {
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .word-cloud-pill {
    max-height: 35px;
  }

  .pill-1,
  .pill-4,
  .pill-7 {
    display: none;
  }

  .pill-2 {
    top: 6%;
    left: 3%;
  }

  .pill-3 {
    top: 6%;
    right: 3%;
  }

  .pill-5 {
    bottom: 2%;
    left: 30%;
  }

  .pill-6 {
    bottom: 6%;
    right: 3%;
  }
}

#termynal[data-termynal],
#termynal.termynal {
  --color-bg: #0f1115;
  --color-text: #e4e7ec;
  --color-text-subtle: #7a8599;
  background: #0f1115;
  color: #e4e7ec;
  text-align: left;
  height: 400px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 800px !important;
  border-radius: 0.75rem;
  padding: var(--space-lg);
  padding-top: calc(var(--space-xl));
  box-shadow: var(--shadow-medium);
  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
}

#termynal[data-termynal] [data-ty],
#termynal.termynal [data-ty] {
  color: #e4e7ec;
  text-align: left;
}

#termynal[data-termynal] [data-ty="input"],
#termynal.termynal [data-ty="input"] {
  color: #4ade80;
}

/* AI-executed commands (no prompt) - different color to show they're autonomous */
#termynal[data-termynal] [data-ty="input"][data-ty-prompt=""],
#termynal.termynal [data-ty="input"][data-ty-prompt=""] {
  color: #fb923c;
}

/* System error messages - gray to differentiate from regular output */
#termynal[data-termynal] .terminal-error,
#termynal.termynal .terminal-error {
  color: #7a8599 !important;
}

#termynal[data-termynal] [data-ty]:not([data-ty="input"]):not([data-ty="progress"]):not([data-ty=""]),
#termynal.termynal [data-ty]:not([data-ty="input"]):not([data-ty="progress"]):not([data-ty=""]) {
  color: #e4e7ec;
}

#termynal[data-termynal] [data-ty]::before,
#termynal.termynal [data-ty]::before {
  color: #7a8599;
}

@media (max-width: 768px) {

  #termynal[data-termynal],
  #termynal.termynal {
    padding: var(--space-md);
    padding-top: calc(var(--space-xl));
    font-size: 0.875rem;
    height: 320px !important;
    max-height: 320px !important;
  }
}

.hero-split {
  display: block;
}

.hero-split-br {
  display: none;
}

@media (min-width: 1136px) {
  .hero-split-br {
    display: inline;
  }
}

@media (min-width: 1136px) {
  .hero-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    row-gap: var(--space-2xl);
    column-gap: var(--space-xl);
    align-items: center;
  }

  .hero-split .hero-split-text {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }

  .hero-split .hero-split-text h1 {
    margin-left: auto;
    margin-right: 0;
    margin-top: -12px;
  }

  .hero-split .hero-chat-wrapper {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }

  .hero-split .hero-split-footer {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .hero-split .hero-split-footer .subtitle {
    margin-top: 0;
  }

  .hero-split .hero-split-footer .button-group {
    margin-top: var(--space-md);
  }
}

.hero-chat-wrapper {
  position: relative;
  max-width: 1256px;
  width: 100%;
  margin: 0 auto var(--space-xl);
  max-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-top-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.typed-text-overlay {
  position: absolute;
  top: 30.5%;
  left: 9.5%;
  transform: translateY(-50%);
  font-size: clamp(12px, 3.5vw, 36px);
  font-family: sans-serif;
  font-weight: normal;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85%;
  pointer-events: none;
}

.typed-text-overlay .typed-cursor {
  color: #007AFF;
}

@media (min-width: 768px) {
  .typed-text-overlay {
    font-size: clamp(22px, 3vw, 36px);
    max-width: 85%;
  }
}

@media (min-width: 1024px) {
  .typed-text-overlay {
    font-size: clamp(28px, 1.5vw, 36px);
    max-width: 85%;
  }
}

.hero .button-group {
  margin-top: var(--space-xl);
}

.hero-content {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.hero-text {
  text-align: center;
}

.hero-text .button-group {
  justify-content: center;
}

.hero-image img {
  width: 100%;
  height: auto;
  background-color: transparent;
  border-radius: 0.5rem;
}