/* styles/sections/campaign-hero.css
 * The centred landing hero on /ship-faster/, /idea-to-feature/ and /scale-product-thinking/:
 * the artwork slot (terminal, brain distortion or word cloud), the h1, the bold lead, the deck
 * and the actions. Measures are the pre-swap pixel widths (26ch, 49ch at the old sizes).
 * Below 768px the page's own query keeps the pre-swap compact padding and artwork sizes. */
@layer sections {
  .hero {
    padding-block: var(--space-48) var(--space-64);
  }

  .hero h1 {
    max-width: 757px;
    margin-inline: auto;
  }

  /* The pre-swap h1 was 36px below 900 and 48px from 900: the h1 role, then the h2 role's size. */
  @media (width >= 900px) {
    .hero h1.t-h1 {
      font-size: var(--t-h2-size);
      letter-spacing: var(--t-h2-ls);
    }
  }

  .hero .subtitle {
    max-width: 524px;
    margin: var(--space-24) auto 0;
    color: var(--ink-muted);
  }

  .hero .subtitle-bold {
    max-width: 543px;
    margin-top: var(--space-48);
    font-weight: 700;
  }

  .hero .subtitle-bold + .subtitle {
    margin-top: var(--space-8);
  }

  .hero .cta-pair {
    justify-content: center;
    margin-top: var(--space-32);
  }

  /* Artwork slot: the terminal (#termynal, agent-terminal.css) and the word cloud share it. */
  .hero-terminal {
    width: 100%;
    max-width: 800px;
    margin: 0 auto var(--space-32);
  }

  /* /idea-to-feature/: the brain-distortion WebGL canvas over its still (js/brain-distortion.js). */
  #brainDistortionContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(620px, 80%);
    max-height: 400px;
    margin: 0 auto var(--space-32);
    overflow: hidden;
  }

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

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

  /* /scale-product-thinking/: the word cloud; js/main.js adds .visible to each pill in turn. */
  .word-cloud-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    max-height: 400px;
    margin: 0 auto;
    overflow: hidden;
    perspective: 1000px;
  }

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

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

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

  .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-3 {
    top: 10%;
    right: 8%;
    transform: translateY(5px) scale(0.75);
  }

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

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

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

  .pill-4.visible,
  .pill-7.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);
  }

  /* Page-local queries kept from css/hero.css and css/responsive.css (768 and 480). */
  @media (width <= 768px) {
    #brainDistortionContainer,
    .word-cloud-container {
      max-height: 320px;
    }

    .word-cloud-pill {
      max-height: 40px;
    }

    .pill-1 {
      top: 3%;
    }

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

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

    .pill-4 {
      right: 2%;
    }

    .pill-5 {
      bottom: 3%;
    }

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

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

  @media (width <= 767px) {
    .hero {
      padding-block: var(--space-32) var(--space-48);
    }
  }

  /* /ship-faster/'s pair (Sign Up and the CLI copy button) wrapped to one per row below 394px
     before the swap, where its 346px of buttons no longer fit; it still does. */
  @media (width < 394px) {
    .hero .cta-pair:has(.btn-cli) {
      flex-direction: column;
      row-gap: var(--space-16);
    }
  }

  @media (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%;
    }

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