/*
  Handheld Composition v2

  This file intentionally overrides only the <= 760px composition from
  style-handheld-flow-v1.css. Desktop behavior remains untouched.

  QA baseline: iPhone SE class viewport, 375 x 667.
  Origin: centered identity + subtitle + domain entry row; footer shows contact only.
  Focused: reset-only top control, strong particle hero, domain row below hero,
  translucent independently scrollable copy/cards, footer shows name + contact.
*/

@media (max-width: 760px) {
  :root {
    --mobile-origin-nav-height: 60px;
    --mobile-origin-nav-top: clamp(360px, 58svh, 500px);
    --mobile-focus-nav-top: clamp(305px, 47svh, 420px);
    --mobile-focus-content-top: calc(var(--mobile-focus-nav-top) + var(--mobile-origin-nav-height) - 8px);
    --mobile-content-surface: rgba(8, 8, 8, .88);
    --mobile-hero-x: -22vw;
    --mobile-hero-y: -18.5svh;
    --mobile-hero-scale: 1.19;
  }

  /* Origin composition: the identity and all three domain entries read as one center cluster. */
  .brand-center {
    top: 43%;
  }

  body.is-origin #particle-canvas {
    transform: translate3d(0, -1svh, 0) scale(1.02);
  }

  .origin-fields {
    top: 0;
    height: var(--mobile-origin-nav-height);
    transform: translate3d(0, var(--mobile-origin-nav-top), 0) !important;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Focused composition: keep the top free except for the reset button. */
  body.is-transitioning .origin-fields,
  body.is-focused .origin-fields {
    transform: translate3d(0, var(--mobile-focus-nav-top), 0) !important;
    background:
      linear-gradient(
        to bottom,
        rgba(8, 8, 8, 0) 0%,
        rgba(8, 8, 8, .22) 30%,
        rgba(8, 8, 8, .58) 78%,
        rgba(8, 8, 8, .72) 100%
      );
    border-bottom-color: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  /*
    Each source shape has a different visual center and occupied area.
    The handheld controller adds one of the is-handheld-shape-* body classes,
    allowing independent Hero calibration without changing desktop shape data.
  */
  body.is-handheld-shape-1 {
    --mobile-hero-x: -22vw;
    --mobile-hero-y: -18.5svh;
    --mobile-hero-scale: 1.19;
  }

  body.is-handheld-shape-2 {
    --mobile-hero-x: -21vw;
    --mobile-hero-y: -17svh;
    --mobile-hero-scale: 1.16;
  }

  body.is-handheld-shape-3 {
    --mobile-hero-x: -23vw;
    --mobile-hero-y: -21svh;
    --mobile-hero-scale: 1.26;
  }

  body.is-transitioning #particle-canvas,
  body.is-focused #particle-canvas {
    transform: translate3d(var(--mobile-hero-x), var(--mobile-hero-y), 0) scale(var(--mobile-hero-scale));
    transform-origin: 50% 38%;
  }

  body.is-transitioning .field-trigger span,
  body.is-focused .field-trigger span {
    font-size: clamp(21px, 6.4vw, 26px);
  }

  /* The focused copy/cards surface overlaps the particle field instead of hard-cutting it. */
  .mobile-content-viewport {
    top: var(--mobile-focus-content-top);
    background:
      linear-gradient(
        to bottom,
        rgba(8, 8, 8, .30) 0%,
        rgba(8, 8, 8, .62) 38px,
        rgba(8, 8, 8, .82) 94px,
        var(--mobile-content-surface) 160px,
        rgba(8, 8, 8, .94) 100%
      );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mobile-content-scroll {
    padding-top: 18px;
    background: transparent;
  }

  .mobile-content-viewport::before {
    height: 40px;
    background:
      linear-gradient(
        to bottom,
        rgba(8, 8, 8, .54) 0%,
        rgba(8, 8, 8, .26) 48%,
        transparent 100%
      );
  }

  .mobile-content-viewport::after {
    height: 34px;
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 8, .96) 0%,
        rgba(8, 8, 8, .58) 45%,
        transparent 100%
      );
  }

  /* Origin footer: reserve the bar for the contact action only. */
  .global-name {
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility 0s linear 0s;
  }

  body.is-origin:not(.is-transitioning):not(.is-contact-open) .global-name {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }

  body.is-origin:not(.is-transitioning):not(.is-contact-open) .global-info {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* The expanded bottom sheet always restores the complete identity block. */
  body.is-contact-open .global-name {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  @media (max-height: 667px) {
    :root {
      --mobile-origin-nav-height: 58px;
      --mobile-origin-nav-top: 382px;
      --mobile-focus-nav-top: 312px;
      --mobile-focus-content-top: 362px;
      --mobile-hero-x: -82px;
      --mobile-hero-y: -118px;
      --mobile-hero-scale: 1.19;
    }

    .brand-center {
      top: 42.5%;
    }

    body.is-handheld-shape-1 {
      --mobile-hero-x: -82px;
      --mobile-hero-y: -118px;
      --mobile-hero-scale: 1.19;
    }

    body.is-handheld-shape-2 {
      --mobile-hero-x: -80px;
      --mobile-hero-y: -110px;
      --mobile-hero-scale: 1.16;
    }

    body.is-handheld-shape-3 {
      --mobile-hero-x: -86px;
      --mobile-hero-y: -136px;
      --mobile-hero-scale: 1.26;
    }

    .mobile-content-scroll {
      padding-top: 15px;
    }

    .focus-description {
      margin-top: 10px;
    }

    .focus-cta-group {
      margin-top: 10px;
    }

    .featured-evidence {
      margin-top: 13px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .origin-fields,
    #particle-canvas,
    .global-name {
      transition-duration: .01ms !important;
    }
  }
}