/* MarineOS root-fix-199: smartphone render/compositor stability.
 * Scope: public homepage only. No booking, tenant, data, routing or business logic changes.
 * Strategy: promote only elements that are actively moving; release compositor hints when idle. */

/* Keep animated layers self-contained and prevent back-face repaint artifacts. */
.mos-home .mos-cinematic-hero .mos-hero-slide.is-current,
.mos-home .mos-cinematic-hero .mos-hero-slide.is-incoming,
.mos-home.mos-luxury-motion-ready .mos-feature-title.mos-from-left:not(.is-visible),
.mos-home.mos-luxury-motion-ready .mos-feature-title.mos-from-right:not(.is-visible),
.mos-home.mos-luxury-motion-ready :where(.mos-card,.mos-catch-card,.mos-event-card,.mos-luxury-card):not(.mos-luxury-visible){
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* GPU hints are temporary. Once reveal/crossfade is complete, return ownership to the browser. */
.mos-home .mos-feature-title.is-visible,
.mos-home :where(.mos-card,.mos-catch-card,.mos-event-card,.mos-luxury-card).mos-luxury-visible,
.mos-home .mos-cinematic-hero .mos-hero-slide.is-standby{
  will-change:auto!important;
}

/* root-fix-200: do not force the fixed contact dock into its own GPU layer.
   Mobile WebKit decides compositing; paint containment on a fixed surface can flash during viewport changes. */
.mos-home .mos-floating-actions{
  -webkit-backface-visibility:visible;
  backface-visibility:visible;
  transform:none;
  contain:layout style;
  will-change:auto;
}

@media screen and (max-width:782px){
  /* Mobile Safari/Chrome can flicker when blur/filter and transform animate on the same surface.
     Keep the same slide/fade design, but remove the transient blur pass on phones/tablets. */
  .mos-home.mos-luxury-motion-ready .mos-feature-title.mos-from-left:not(.is-visible),
  .mos-home.mos-luxury-motion-ready .mos-feature-title.mos-from-right:not(.is-visible),
  .mos-home .mos-feature-title.is-visible{
    filter:none!important;
  }

  /* Feature cards already use an almost opaque glass surface. Removing backdrop-filter on touch-sized
     viewports preserves the visible design while avoiding a large full-card live blur layer. */
  .mos-home .mos-feature-title{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* root-fix-202: root-fix-199's comment said moving glass cards were de-blurred on mobile,
     but the actual selector only covered feature-title. Published theme CSS still applies
     --mos-glass to .mos-card/.mos-catch-card/.mos-event-card/.mos-luxury-card/.mos-sub-card.
     Keep their gradient/border/shadow appearance, but remove the live backdrop sampling layer. */
  .mos-home :where(.mos-card,.mos-catch-card,.mos-event-card,.mos-luxury-card,.mos-sub-card){
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* Hero images do not Ken-Burns animate on mobile; do not reserve GPU transform layers for them. */
  .mos-home .mos-cinematic-hero .mos-hero-image{
    will-change:auto!important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* Cross-fade needs only opacity compositing during the short transition. */
  .mos-home .mos-cinematic-hero .mos-hero-slide.is-incoming{
    will-change:opacity!important;
  }
  .mos-home .mos-cinematic-hero .mos-hero-slide.is-current:not(.is-outgoing){
    will-change:auto!important;
  }

  /* Modal blur is expensive on iOS while the software keyboard/viewport resizes. */
  .mos-home .mos-booking-result-modal,
  .mos-home .mos-contact-sheet{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mos-home .mos-floating-actions{transform:none;contain:layout style}
  .mos-home *{will-change:auto!important}
}

/* root-fix-200: the original homepage ambience used two full-viewport fixed pseudo layers.
 * One of them continuously transformed for mosAura. On iOS visual-viewport changes this forces
 * a very large fixed surface to be recomposited together with the hero and fixed CTA.
 * Preserve the same ambient colors/grid in the first viewport, but do not keep a moving fixed layer on mobile. */
@media screen and (max-width:782px){
  .mos-home::before,
  .mos-home::after{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    height:100vh!important;
    height:100svh!important;
    transform:none!important;
    animation:none!important;
    will-change:auto!important;
  }

  /* Hero cross-fade remains, but the slides container and images are not forcibly promoted. */
  .mos-home .mos-cinematic-hero .mos-hero-slides{
    transform:none!important;
    contain:layout!important;
  }
  .mos-home .mos-cinematic-hero .mos-hero-slide,
  .mos-home .mos-cinematic-hero .mos-hero-image{
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
  }
}

/* root-fix-205: the official reveal must run once. Only after transform/opacity completes do we
 * release compositor hints. This prevents periodic re-reveal without cancelling the initial motion. */
@media screen and (max-width:782px){
  .mos-home .mos-feature-title.mos-reveal-settled,
  .mos-home :where(.mos-card,.mos-catch-card,.mos-event-card,.mos-luxury-card).mos-card-reveal-settled{
    transform:none!important;
    filter:none!important;
    will-change:auto!important;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
  }
  .mos-home .mos-feature-title.mos-reveal-settled{transition-property:box-shadow,border-color!important;}
  .mos-home :where(.mos-card,.mos-catch-card,.mos-event-card,.mos-luxury-card).mos-card-reveal-settled:not(:active){transition-property:box-shadow,border-color!important;}
}

/* root-fix-204 — mobile feature-title alphabet overflow fail-safe.
 * The JS engine enlarges each heading to the largest size that really fits. This conservative
 * CSS baseline guarantees that long English labels never paint outside the card even before
 * fonts/JS have finished loading. Inline fitted font-size wins after measurement. */
@media screen and (max-width:782px){
  .mos-home .mos-feature-title .mos-en{
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    overflow:visible!important;
    font-size:clamp(18px,5.5vw,26px)!important;
    line-height:1!important;
    transform-origin:left center!important;
  }
  .mos-home .mos-feature-title.mos-align-right .mos-en{transform-origin:right center!important;}
}