/* ==========================================================================
   ODEN-STEEL COMPONENT / PROJECT LAUNCH
   --------------------------------------------------------------------------
   Root → Container → Intro → Actions → Glow → Responsive → Utilities
   ========================================================================== */

@import url("../../css/components/button.css");

/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

.project-launch {
  position: relative;
  margin-top: var(--space-launch-gap-faq);
  padding: var(--space-launch-section-y) 0 var(--space-launch-section-bottom);
  background:
    radial-gradient(
      circle at 50% 0%,
      var(--color-launch-glow),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      var(--color-launch-bg-start),
      var(--color-launch-bg-end)
    );
  overflow: hidden;
  color: var(--color-white);
}

.project-launch.is-launch-animated {
  background: linear-gradient(
    180deg,
    var(--color-launch-bg-start),
    var(--color-launch-bg-end)
  );
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.project-launch__container {
  position: relative;
  z-index: 1;
  width: min(100% - var(--space-6xl), var(--container-project-launch));
  margin: 0 auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.project-launch__eyebrow {
  margin: 0 0 var(--space-launch-intro-eyebrow);
  color: var(--color-gold);
  font-size: var(--fs-launch-eyebrow);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.project-launch__title {
  margin: 0;
  font-size: var(--fs-launch-title);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  letter-spacing: -0.06em;
  overflow-wrap: var(--text-wrap-display);
}

.project-launch__lead {
  max-width: var(--space-launch-lead-max);
  margin: var(--space-launch-lead-top) auto 0;
  color: var(--color-launch-lead);
  font-size: var(--fs-launch-lead);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.project-launch__actions {
  margin-top: var(--space-launch-actions-top);
}

.project-launch .btn.btn--gold {
  transition:
    transform var(--duration-launch-cta) ease,
    box-shadow var(--duration-launch-cta) ease,
    border-color var(--duration-launch-cta) ease,
    background-color var(--duration-launch-cta) ease;
}

@media (hover: hover) {
  .project-launch .btn.btn--gold:hover {
    transform: translateY(-2px);
    border-color: var(--color-gold-border-strong);
    box-shadow: var(--shadow-btn-gold-hover);
  }

  .project-launch .btn.btn--gold:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn-gold-active);
  }
}

/* --------------------------------------------------------------------------
   Glow
   -------------------------------------------------------------------------- */

.project-launch__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 0%,
    var(--color-launch-glow-solid),
    transparent 42%
  );
  opacity: 0.08;
}

/* --------------------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .project-launch {
    padding: var(--space-launch-section-y-tablet-top) 0
      var(--space-launch-section-y-tablet-bottom);
  }

  .project-launch__container {
    width: calc(100% - var(--space-4xl));
    max-width: var(--container-project-launch-tablet);
  }

  .project-launch__eyebrow {
    font-size: var(--fs-launch-eyebrow);
  }

  .project-launch__title {
    font-size: var(--fs-launch-title-tablet);
  }

  .project-launch__lead {
    max-width: var(--space-launch-lead-max-tablet);
    font-size: var(--fs-launch-lead-tablet);
    line-height: 1.7;
  }

  .project-launch .btn.btn--gold.btn--xl {
    min-height: var(--btn-height-lg);
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-lg);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .project-launch {
    margin-top: 0;
    padding: var(--space-launch-section-y-mobile-top) 0
      calc(
        var(--space-launch-section-y-mobile-bottom) +
          env(safe-area-inset-bottom, 0px)
      );
  }

  .project-launch__container {
    width: calc(100% - var(--space-2xl));
  }

  .project-launch__eyebrow {
    font-size: var(--fs-launch-eyebrow-mobile);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.3em;
  }

  .project-launch__title {
    font-size: var(--fs-launch-title-mobile);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-display);
    letter-spacing: -0.04em;
    text-align: center;
    overflow-wrap: var(--text-wrap-display);
  }

  .project-launch__lead {
    max-width: 100%;
    margin-top: var(--space-launch-lead-top-mobile);
    font-size: var(--fs-launch-lead-mobile);
    line-height: 1.75;
  }

  .project-launch__actions {
    width: 100%;
    margin-top: var(--space-launch-actions-top-mobile);
  }

  .project-launch .btn.btn--gold.btn--xl {
    width: 100%;
    max-width: var(--space-launch-cta-max-mobile);
    min-height: var(--btn-height-mobile);
    margin: 0 auto;
    padding: var(--btn-padding-mobile);
    font-size: var(--btn-font-mobile);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Landscape
   -------------------------------------------------------------------------- */

@media (max-width: 767px) and (max-height: 700px) {
  .project-launch {
    margin-top: 0;
    padding: var(--space-launch-section-y-landscape-top) 0
      calc(
        var(--space-launch-section-y-landscape) +
          env(safe-area-inset-bottom, 0px)
      );
  }

  .project-launch__title {
    font-size: var(--fs-launch-title-landscape);
  }

  .project-launch__lead {
    font-size: var(--fs-launch-lead-landscape);
  }

  .project-launch__actions {
    margin-top: var(--space-launch-actions-top-landscape);
  }
}

/* --------------------------------------------------------------------------
   Utilities — Pre-reveal + Touch + Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .project-launch:not(.is-launch-ready) .project-launch__eyebrow,
  .project-launch:not(.is-launch-ready) .project-launch__title,
  .project-launch:not(.is-launch-ready) .project-launch__lead,
  .project-launch:not(.is-launch-ready) .project-launch__actions {
    opacity: 0;
  }
}

@media (hover: none) {
  .project-launch .btn.btn--gold:hover {
    transform: none;
    box-shadow: var(--shadow-btn-gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-launch:not(.is-launch-ready) .project-launch__eyebrow,
  .project-launch:not(.is-launch-ready) .project-launch__title,
  .project-launch:not(.is-launch-ready) .project-launch__lead,
  .project-launch:not(.is-launch-ready) .project-launch__actions {
    opacity: 1;
  }

  .project-launch.is-launch-animated {
    background:
      radial-gradient(
        circle at 50% 0%,
        var(--color-launch-glow),
        transparent 42%
      ),
      linear-gradient(
        180deg,
        var(--color-launch-bg-start),
        var(--color-launch-bg-end)
      );
  }
}