/* Mobile only. Match ClearLink #flow / #cabinet-banner: full photo, sticky travel, floating edge words. */

@media (max-width: 1100px) {
  :root {
    --pin-travel: clamp(100px, 24svh, 200px) !important;
    --pin-travel-tall: clamp(120px, 28svh, 240px) !important;
    --edge-pin-sticky-h: 100svh !important;
    --edge-scroll-travel: clamp(108px, 24vh, 320px) !important;
    --flow-object-position: 50% center !important;
    --cabinet-object-position: 50% center !important;
    --edge-travel: min(40vw, 440px) !important;
  }

  html body #flow.edge-pin,
  html body #flow.bento-tile.edge-pin,
  html body #cabinet-banner.edge-pin,
  html body #cabinet-banner.bento-tile.edge-pin,
  html body #cabinet-banner.bento-tile.edge-pin--tall {
    position: relative !important;
    width: 100% !important;
    height: calc(100svh + var(--pin-travel)) !important;
    min-height: calc(100svh + var(--pin-travel)) !important;
    max-height: none !important;
    overflow: visible !important;
    background: #000 !important;
    aspect-ratio: auto !important;
  }

  html body #cabinet-banner.edge-pin--tall,
  html body #cabinet-banner.bento-tile.edge-pin--tall {
    height: calc(100svh + var(--pin-travel-tall)) !important;
    min-height: calc(100svh + var(--pin-travel-tall)) !important;
  }

  html body #flow .edge-pin__sticky,
  html body #flow .edge-pin__sticky.photo-band,
  html body #flow .edge-pin__sticky.photo-band.edge-scene,
  html body #cabinet-banner .edge-pin__sticky,
  html body #cabinet-banner .edge-pin__sticky.photo-band,
  html body #cabinet-banner .edge-pin__sticky.photo-band.edge-scene {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #050505 !important;
  }

  html body #flow.edge-scene--photo,
  html body #flow .edge-scene--photo,
  html body #cabinet-banner.edge-scene--photo,
  html body #cabinet-banner .edge-scene--photo {
    overflow: hidden !important;
    --edge-rise: clamp(28px, 5vh, 64px) !important;
    --edge-split-rise: clamp(36px, 6.5vh, 80px) !important;
    --edge-split-x-left: clamp(-88px, -7vw, -36px) !important;
    --edge-split-x-right: clamp(36px, 7vw, 96px) !important;
    --edge-split-tilt-left: -2.4deg !important;
    --edge-split-tilt-right: 2.4deg !important;
    --edge-shift-left: min(38vw, var(--edge-travel), 400px) !important;
    --edge-shift-right: min(38vw, var(--edge-travel), 400px) !important;
    --edge-scroll-travel: clamp(108px, 24vh, 320px) !important;
    --edge-descend: clamp(28px, 5vh, 64px) !important;
  }

  html body #flow .edge-scene__media,
  html body #cabinet-banner .edge-scene__media {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: #050505 !important;
  }

  html body #flow .edge-scene__media .section-bg,
  html body #cabinet-banner .edge-scene__media .section-bg,
  html body #flow .section-bg,
  html body #cabinet-banner .section-bg {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    width: 100% !important;
    height: 112% !important;
    min-width: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% center !important;
    transform: translate3d(0, calc(-50% + var(--photo-pan-y, 0px)), 0) !important;
    -webkit-transform: translate3d(0, calc(-50% + var(--photo-pan-y, 0px)), 0) !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  html body #flow .edge-scene__frame,
  html body #flow .edge-pin__sticky.photo-band .edge-scene__frame,
  html body #flow .edge-pin__sticky.photo-band .edge-scene__frame--display,
  html body #cabinet-banner .edge-scene__frame,
  html body #cabinet-banner .edge-pin__sticky.photo-band .edge-scene__frame,
  html body #cabinet-banner .edge-pin__sticky.photo-band .edge-scene__frame--display {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    overflow: hidden !important;
    padding-top: clamp(72px, 20vh, 156px) !important;
    padding-bottom: 0 !important;
    padding-inline: 16px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  html body #flow .edge-pair,
  html body #cabinet-banner .edge-pair {
    width: 100% !important;
    max-width: 1320px !important;
    height: 100% !important;
    align-content: start !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    gap: clamp(0px, 0.35vw, 7px) !important;
    padding-block: 0 !important;
    transform: translate3d(0, calc(var(--edge-scroll-y, 0) * var(--edge-scroll-travel)), 0) !important;
  }

  html body #flow .edge-word,
  html body #cabinet-banner .edge-word {
    font-size: clamp(32px, 15vw, 80px) !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    opacity: var(--edge-opacity, 0) !important;
    filter: none !important;
  }

  html body #flow .edge-scene__frame--display .edge-word,
  html body #cabinet-banner .edge-scene__frame--display .edge-word {
    font-size: clamp(34px, 16vw, 88px) !important;
    line-height: 0.84 !important;
  }

  html body #flow .edge-scene--photo .edge-word--left,
  html body #cabinet-banner .edge-scene--photo .edge-word--left {
    justify-self: start !important;
    margin-inline: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    transform: translate3d(
      calc(
        var(--edge-enter-x, calc(1 - var(--edge-in, 0))) * var(--edge-shift-left) * -1
        + var(--edge-out, 0) * var(--edge-split-x-left)
      ),
      calc(
        (1 - var(--edge-in, 0)) * var(--edge-rise) * -1
        + var(--edge-out, 0) * var(--edge-split-rise) * -1.08
      ),
      0
    )
    rotate(calc(var(--edge-out, 0) * var(--edge-split-tilt-left))) !important;
  }

  html body #flow .edge-scene--photo .edge-word--right,
  html body #cabinet-banner .edge-scene--photo .edge-word--right {
    justify-self: end !important;
    margin-inline: 0 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    transform: translate3d(
      calc(
        var(--edge-enter-x, calc(1 - var(--edge-in, 0))) * var(--edge-shift-right)
        + var(--edge-out, 0) * var(--edge-split-x-right)
      ),
      calc(
        (1 - var(--edge-in, 0)) * var(--edge-rise)
        + var(--edge-out, 0) * var(--edge-split-rise) * 1.08
      ),
      0
    )
    rotate(calc(var(--edge-out, 0) * var(--edge-split-tilt-right))) !important;
  }
}