/* Mobile reliability layer.
   The homepage's text morph is deliberately identical on every device. This
   file only lowers popup chrome cost; it must never disable or replace the
   shared SVG threshold morph. */
@media (hover: none), (max-width: 767px) {
  /* ⚠ THE SIX MORPH STAGES ARE DELIBERATELY ABSENT FROM THE TWO RULES BELOW.
     DO NOT ADD THEM BACK. (2026-08-27, found on Mena's physical iPhone.)

     This file used to put `isolation: isolate` on .hvo-morph/.hvo-tm/.hvo-pm/
     .hvo-hm/.hvo-sm and `will-change: opacity` on each of their two text
     layers, for "stable composited text layers". `.hvo-am` was the only morph
     stage missing from both lists, and that omission was the entire reason
     Mena kept saying the Audience morph was right and every other one was
     wrong.

     Why: the goo comes from the STAGE carrying url(#threshold) over BOTH of
     its text layers at once, so the filter can merge them into one blob.
     `will-change: opacity` promotes each layer to its own GPU surface, and
     once the layers live on separate surfaces the parent filter can no longer
     merge them. Each one is simply blurred and cross-faded. On a real iPhone
     that turns the gooey morph into a plain grey blur; .hvo-am, having no
     such promotion, kept the real morph.

     This does NOT reproduce in Playwright chromium or webkit at any viewport
     or user agent, because desktop rasterisers still merge the layers. Four
     emulated profiles reported the stages as identical while the physical
     device showed two completely different animations. Captured on the device
     through iPhone Mirroring on the a263a0d8 preview.

     The header of this file already said it "must never disable or replace
     the shared SVG threshold morph". These two rules were doing exactly that.
     The mlplayer goos and the services CARD cross-fade keep the treatment:
     they are ordinary opacity cross-fades, not threshold merges. */
  /* NOTHING THRESHOLD-FILTERED MAY BE PROMOTED. The rules that used to live
     here are gone entirely (2026-08-27, second pass, confirmed on the device).

     The first pass removed only the six headline stages and kept these three,
     on the reasoning that they were "ordinary opacity cross-fades, not
     threshold merges". That was simply wrong, and Mena caught it on the phone:
     the services card morph was still the old flat cross-fade.

       .hvo-sstack-headlines  carries filter:url(#threshold) during a card
                              cross-fade (services-stack.css:40)
       .mlp_title_goo         carries filter:url(#threshold) while .is-morphing
                              (mlplayer.css)
       .mlp_lang_goo          carries filter:url(#threshold-tight) while
                              .is-morphing (mlplayer.css)

     Every one of them is a threshold merge across stacked layers, which is
     exactly the thing `will-change: opacity` breaks: promoting each layer to
     its own GPU surface stops the parent filter merging them, so the goo
     degrades to a plain cross-fade. On real iOS only; no desktop engine shows
     it. Measured on the device before this edit: wrap isolation `isolate`,
     layer will-change `opacity`.

     If a future session needs composited-text stability on iPhone, it must not
     be bought by promoting a filtered element's children. */

  .hvo-popup-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 12, 16, 0.62);
  }

  .hvo-popup_x {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.7);
  }

  .hvo-popup,
  .hvo-popup-backdrop {
    transition-duration: 240ms !important;
  }

  .button_wrapper.is-hero {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .button_wrapper.is-hero > [data-hero-button] {
    min-width: 0;
  }

  .button_wrapper.is-hero .button,
  .button_wrapper.is-hero .button-arrow {
    font-size: clamp(0.75rem, 3.3vw, 0.875rem);
  }

  .button_wrapper.is-hero .button {
    padding-inline: 0.875rem;
  }

  .button_wrapper.is-hero .button-arrow_wrap {
    padding-left: 0.625rem;
  }
}

/* ── Hero buttons relocated below the player (touch only) ────────────────
   Pairs with mobile-reliability.js, which moves .button_wrapper.is-hero to sit
   directly after #hero-mlplayer because the two are not siblings and CSS alone
   cannot reorder across that gap. Mena 2026-08-28: "on mobile i think we
   should move the 2 buttons underneath the video player."

   Everything here only gives the wrapper back what it lost by leaving
   .vertical-center: horizontal padding and centring. Pointer-gated to match
   the script exactly, so the two halves can never disagree. */
@media (hover: none), (pointer: coarse) {
  .button_wrapper.is-hero.is-below-player {
    display: flex;
    justify-content: center;
    padding-inline: 1.25rem;
    margin-top: 1.5rem;
  }

  /* The gap that used to sit between the subline and the buttons. With the
     buttons gone it is dead height above the player. */
  [data-hero-spacer-orphaned] {
    height: 0;
  }
}