/* T215 — iPhone Safari system-inset visual blend.
   Remote Web Inspector confirmed the bottom pocket is browser chrome outside
   the page DOM. Keep the proven native fixed room scene (no JS jitter) and
   visually blend the last part of the photographic viewport into the exact
   Safari/page navy tint before the browser-controlled area begins.
   Scope: /hotel, touch WebKit, <=720px only. */

@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .hx-hotel-lower-scene::after {
      content: "" !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: 100vw !important;
      height: 100vh !important;
      transform: translate(-50%, -50%) !important;
      -webkit-transform: translate(-50%, -50%) !important;
      pointer-events: none !important;
      background-image:
        linear-gradient(
          180deg,
          transparent 0%,
          transparent 77%,
          rgba(3,17,29,.10) 83%,
          rgba(3,17,29,.28) 88%,
          rgba(3,17,29,.58) 94%,
          #03111d 100%
        ),
        linear-gradient(
          180deg,
          rgba(2,12,22,.30) 0%,
          rgba(2,12,22,.42) 42%,
          rgba(2,12,22,.54) 100%
        ) !important;
      background-color: transparent !important;
    }
  }
}


/* T219 — tiny first-screen polish from the proven T215 baseline.
   Only two changes: a very soft top Safari-to-photo blend and a 6px hero lift.
   No card sizing, typography, room layout, lower-scene, or scroll behavior is changed. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .hx-hero::before {
      background-image:
        linear-gradient(
          180deg,
          rgba(3,17,29,.38) 0%,
          rgba(3,17,29,.24) 8%,
          rgba(3,17,29,.14) 17%,
          rgba(2,10,17,.24) 30%,
          rgba(2,10,17,.68) 54%,
          rgba(2,10,17,.96) 100%
        ),
        url('assets/hero-hotel-room-luxury.webp') !important;
      background-position: center center !important;
      background-size: cover !important;
      filter: saturate(.92) contrast(1.02) !important;
      transform: scale(1.01) !important;
    }

    .hotel-experience .hx-hero-content {
      padding: 106px 0 82px !important;
    }
  }
}


/* T220 — seamless hero-to-room-scene crossfade on iPhone Safari.
   Fade the hero photograph itself instead of fading to a flat navy block, so
   the fixed lower room scene is gradually revealed underneath with no hard
   horizontal seam. Scope: Safari mobile hotel page only. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .hx-hero {
      background: transparent !important;
      isolation: isolate !important;
    }

    .hotel-experience .hx-hero::before {
      -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 70%,
        rgba(0,0,0,.96) 76%,
        rgba(0,0,0,.82) 82%,
        rgba(0,0,0,.58) 88%,
        rgba(0,0,0,.30) 94%,
        transparent 100%
      ) !important;
      mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 70%,
        rgba(0,0,0,.96) 76%,
        rgba(0,0,0,.82) 82%,
        rgba(0,0,0,.58) 88%,
        rgba(0,0,0,.30) 94%,
        transparent 100%
      ) !important;
      -webkit-mask-repeat: no-repeat !important;
      mask-repeat: no-repeat !important;
      -webkit-mask-size: 100% 100% !important;
      mask-size: 100% 100% !important;
    }

    /* Remove the old opaque navy ending. Keep only a very light readability
       veil while the underlying room photograph takes over. */
    .hotel-experience .hx-hero::after {
      height: 220px !important;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(3,17,29,.04) 34%,
        rgba(3,17,29,.10) 62%,
        rgba(3,17,29,.16) 100%
      ) !important;
      pointer-events: none !important;
    }

    /* Let the start of the room section remain optically transparent so the
       fixed scene continues naturally behind the section heading. */
    .hotel-experience .hx-rooms-section {
      background: transparent !important;
    }

    .hotel-experience .hx-rooms-section::before {
      background: linear-gradient(
        180deg,
        rgba(3,17,29,.08) 0%,
        rgba(3,17,29,.03) 9%,
        transparent 22%,
        transparent 92%,
        rgba(2,12,22,.30) 100%
      ) !important;
    }
  }
}