/* Mobile defaults and explicit overrides; no selectors match Desktop. */
@media (max-width: 767px) {
  html[data-mobile-header-experiment] .mobile-header::before {
    content: none;
    display: none;
  }

  html[data-mobile-header-experiment] .mobile-header {
    isolation: auto;
    background: transparent;
  }

  html[data-mobile-header-experiment] .mobile-menu-icon { display: none; }

  html[data-mobile-header-experiment] .mobile-brand > span,
  html[data-mobile-header-experiment] .mobile-experiment-menu-label {
    position: relative;
    top: -5px;
    overflow: hidden;
  }

  html[data-mobile-header-experiment] .mobile-header[data-mobile-state="works"] {
    animation: mobile-header-enter 520ms cubic-bezier(.25, .45, .25, 1);
  }

  html[data-mobile-header-experiment] .mobile-opener-controls > .mobile-menu-toggle {
    animation: mobile-header-enter 520ms cubic-bezier(.25, .45, .25, 1);
  }

  .mobile-experiment-header-text { display: block; }

  html[data-mobile-header-experiment] .mobile-header[data-mobile-state="works"] .mobile-experiment-header-text {
    animation: mobile-experiment-header-down 850ms cubic-bezier(.16, 1, .3, 1) 320ms both;
  }

  html[data-mobile-header-experiment] .mobile-brand > span:nth-child(2) > .mobile-experiment-header-text {
    animation-delay: 390ms;
  }

  html[data-mobile-header-experiment] .mobile-header[data-mobile-state="works"] .mobile-experiment-menu-label > .mobile-experiment-header-text {
    animation-delay: 410ms;
  }

  html[data-mobile-header-experiment] .mobile-opener-controls .mobile-experiment-header-text {
    animation: mobile-experiment-opener-menu-down 850ms cubic-bezier(.16, 1, .3, 1) 410ms both;
  }

  /* WAAPI coordinates delayed reveal and live-control handoff only in Header experiments. */
  html[data-mobile-header-managed="true"] .mobile-header,
  html[data-mobile-header-managed="true"] .mobile-menu-toggle,
  html[data-mobile-header-managed="true"] .mobile-experiment-header-text {
    animation: none !important;
  }

  html[data-mobile-header-managed="true"] .mobile-header[data-mobile-header-leaving="true"] {
    display: block;
    visibility: visible;
    pointer-events: none;
  }

  html[data-mobile-header-managed="true"] .mobile-header[data-mobile-header-leaving="true"] .mobile-brand {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  html[data-mobile-header-managed="true"] .mobile-header[data-mobile-header-leaving="true"] .mobile-menu {
    visibility: hidden;
  }

  @keyframes mobile-experiment-header-down {
    from { transform: translate3d(0, -115%, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
  }

  @keyframes mobile-experiment-opener-menu-down {
    from { transform: translate3d(0, -115%, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
  }

  html[data-mobile-header-experiment] .mobile-experiment-menu-label {
    justify-self: end;
    font-family: "Flex Sans GB", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: .04em;
  }

  /* Blend the complete sticky/absolute host, not a child inside its stacking context. */
  html[data-mobile-header-experiment="blend"][data-mobile-experiment-menu-open="false"] .mobile-header,
  html[data-mobile-header-experiment="blend"][data-mobile-experiment-menu-open="false"] .mobile-opener-controls {
    color: #fff;
    mix-blend-mode: difference;
  }

  html[data-mobile-header-experiment="blend"][data-mobile-experiment-menu-open="false"] .mobile-menu-toggle {
    color: #fff;
  }

  /* The existing menu panel stops blending while open; the header itself stays transparent. */
  html[data-mobile-header-experiment] .mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100dvh - 62px - env(safe-area-inset-top));
    overflow-y: auto;
    color: #111;
    background: #fff;
  }

  html[data-mobile-header-experiment] .mobile-header--dark .mobile-menu {
    color: #f4f4f4;
    background: #000;
  }

  html[data-mobile-header-experiment] .mobile-opener-controls .mobile-menu {
    color: #111;
    background: #fff;
  }

  /* Image anchors retain their layout; the complete image moves without any mask. */
  html[data-mobile-motion="on"] [data-mobile-motion="image"][data-mobile-motion-ready="true"] > img {
    transform: translate3d(0, 48px, 0) scale(.985);
    opacity: .7;
  }

  html[data-mobile-motion="on"] [data-mobile-motion="image"][data-mobile-motion-ready="true"][data-mobile-motion-state="entered"] > img {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    transition: transform 1150ms cubic-bezier(.16, 1, .3, 1), opacity 1150ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--mobile-image-delay, 0ms);
  }

  /* Only text is clipped. Original outer typography and block spacing stay intact. */
  html[data-mobile-motion] [data-mobile-motion="text"] { overflow: hidden; }
  /* Light numerals extend above their tight line box; keep the reveal clear of the ink. */
  html[data-mobile-motion] .mobile-opener__number[data-mobile-motion="text"] {
    padding-block: .4em;
    margin-block: -.4em;
  }
  .mobile-experiment-text-body { display: block; }

  html[data-mobile-motion="on"] [data-mobile-motion="text"] > .mobile-experiment-text-body {
    transform: translate3d(0, 115%, 0);
    opacity: 0;
  }

  html[data-mobile-motion="on"] [data-mobile-motion="text"][data-mobile-motion-state="entered"] > .mobile-experiment-text-body {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 850ms cubic-bezier(.16, 1, .3, 1) var(--mobile-motion-delay, 0ms), opacity 850ms cubic-bezier(.16, 1, .3, 1) var(--mobile-motion-delay, 0ms);
  }

  html[data-mobile-motion="on"] [data-mobile-motion-running="true"] > img,
  html[data-mobile-motion="on"] [data-mobile-motion-running="true"] > .mobile-experiment-text-body {
    will-change: transform, opacity;
  }

  /* Disable the old whole-copy entrance only in text mode; don't stack transforms. */
  html[data-mobile-motion-text="true"] .mobile-opener .mobile-opener__copy {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html[data-mobile-header-experiment] .mobile-header[data-mobile-state="works"],
  html[data-mobile-header-experiment] .mobile-opener-controls > .mobile-menu-toggle {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html[data-mobile-header-experiment] .mobile-experiment-header-text {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  html [data-mobile-motion] > img,
  html [data-mobile-motion] > .mobile-experiment-text-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}