/**
 * BookFels V3 — Milestone A.1.3
 * Genesis Mobile Golden Middle
 *
 * Goal:
 * - preserve the stronger, more atmospheric Sentinel composition from A.1
 * - keep all three frozen strategic headlines readable in the first mobile view
 * - retain the A.1.2 runtime dashboard, readiness bars and sparkle activity
 * - change no headline wording
 */

@media (max-width: 680px) {
  .bf-hero {
    min-height: auto;
    padding-top: clamp(432px, 112vw, 484px);
    padding-bottom: 108px;
  }

  .bf-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(2, 7, 16, .01) 0%,
        rgba(2, 7, 16, .04) 27%,
        rgba(2, 7, 16, .24) 42%,
        rgba(2, 7, 16, .78) 55%,
        #020710 66%,
        #020710 100%
      );
  }

  .bf-hero__first-design {
    height: clamp(456px, 124vw, 520px) !important;
    bottom: auto;
  }

  .bf-genesis-activity-media,
  .bf-genesis-activity-field,
  .bf-hero__star-canvas,
  .bf-hero__network {
    height: clamp(520px, 138vw, 586px) !important;
    bottom: auto;
  }

  .bf-hero__first-design img {
    object-fit: cover;
    object-position: center top;
    opacity: 1;
    filter:
      saturate(.96)
      contrast(1.045)
      brightness(.91);
  }

  .bf-genesis-activity-media img {
    object-position: 68% top;
  }

  .bf-hero__star-canvas {
    opacity: .5;
  }

  .bf-hero__network {
    opacity: .17;
  }

  .bf-hero__layout {
    gap: 30px;
  }

  .bf-hero__content {
    position: relative;
    z-index: 4;
    display: grid;
    gap: 15px;
    max-width: none;
    padding: 0;
    margin-top: -38px;
  }

  /*
   * Golden middle:
   * first-design atmosphere remains dominant,
   * but phase and compact brand context bridge directly into the headlines.
   */
  .bf-genesis-phase {
    order: 1;
    width: fit-content;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgba(125, 235, 255, .16);
    border-radius: 999px;
    background: rgba(4, 13, 25, .72);
    box-shadow:
      0 12px 34px rgba(0, 0, 0, .28),
      inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: .5rem;
  }

  .bf-hero__brand {
    order: 2;
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 10px 13px;
    margin: 0;
    border: 1px solid rgba(121, 168, 255, .12);
    border-radius: 17px;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, .055),
        rgba(255, 255, 255, .014)
      ),
      rgba(4, 13, 25, .76);
    box-shadow:
      0 16px 44px rgba(0, 0, 0, .32),
      inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px) saturate(112%);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
  }

  .bf-hero__brand-mark {
    width: 40px;
    height: 40px;
  }

  .bf-hero__brand-copy {
    min-width: 0;
    gap: 1px;
  }

  .bf-hero__brand-name {
    font-size: .96rem;
  }

  .bf-hero__brand-meta {
    font-size: .5rem;
    letter-spacing: .13em;
  }

  .bf-hero__leitmotif {
    margin-top: 2px;
    font-size: .58rem;
  }

  .bf-hero__headline {
    order: 3;
    max-width: 100%;
    margin: 5px 0 0;
    font-size: clamp(1.94rem, 8.2vw, 2.24rem);
    line-height: 1;
    letter-spacing: -.047em;
    text-wrap: balance;
  }

  .bf-hero__headline-visual {
    gap: .18em;
  }

  .bf-hero__headline-line {
    min-height: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .bf-hero__headline-line--accent {
    max-width: 100%;
    font-size: .9em;
    line-height: 1.04;
  }

  .bf-hero__statement {
    order: 4;
    margin: 4px 0 0;
    font-size: .92rem;
    line-height: 1.62;
  }

  .bf-genesis-inline-strip {
    order: 5;
  }

  .bf-hero__actions {
    order: 6;
  }

  .bf-trust-network {
    order: 7;
  }

  .bf-genesis-hero__visual {
    order: 8;
    min-height: auto;
    display: grid;
    gap: 13px;
  }

  .bf-genesis-sentinel-label {
    order: 1;
    margin: 0;
  }

  .bf-genesis-runtime-card {
    order: 2;
  }

  .bf-genesis-orbit {
    display: none;
  }
}

@media (max-width: 430px) {
  .bf-hero {
    padding-top: clamp(418px, 111vw, 456px);
  }

  .bf-hero__first-design {
    height: clamp(442px, 122vw, 486px) !important;
  }

  .bf-genesis-activity-media,
  .bf-genesis-activity-field,
  .bf-hero__star-canvas,
  .bf-hero__network {
    height: clamp(502px, 137vw, 552px) !important;
  }

  .bf-hero__content {
    margin-top: -34px;
  }

  .bf-hero__headline {
    font-size: clamp(1.84rem, 8.05vw, 2.06rem);
  }
}

@media (max-width: 380px) {
  .bf-hero {
    padding-top: 404px;
  }

  .bf-hero__first-design {
    height: 432px !important;
  }

  .bf-genesis-activity-media,
  .bf-genesis-activity-field,
  .bf-hero__star-canvas,
  .bf-hero__network {
    height: 492px !important;
  }

  .bf-hero__content {
    margin-top: -28px;
  }

  .bf-hero__headline {
    font-size: 1.72rem;
  }

  .bf-hero__brand {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-inline: 11px;
  }

  .bf-hero__brand-mark {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 360px) {
  .bf-hero {
    padding-top: 392px;
  }

  .bf-hero__first-design {
    height: 420px !important;
  }

  .bf-genesis-activity-media,
  .bf-genesis-activity-field,
  .bf-hero__star-canvas,
  .bf-hero__network {
    height: 480px !important;
  }

  .bf-hero__headline {
    font-size: 1.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-hero__headline-line,
  .bf-genesis-phase,
  .bf-hero__brand {
    animation: none !important;
    transition: none !important;
  }
}

@supports not (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {
  .bf-genesis-phase,
  .bf-hero__brand {
    background: rgba(4, 13, 25, .96);
  }
}