/* SeafoodMeNow V348 — final mobile cinematic scroll authority.
   Permanent fix for the iPhone/Android symptom where the opening hero scrolls
   away like a normal image and the remainder of the cinematic section is blank.
   Root cause: hidden X overflow on html/body creates an unintended Y scroll
   container, which prevents the stage from sticking to the viewport. */
@media (max-width:720px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  html,html body{
    overflow-x:clip!important;
    overflow-y:visible!important;
    max-width:100%!important;
  }
  html body .pk-cinema{
    position:relative!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
    height:324svh!important;
    min-height:0!important;
    background:#02182a!important;
  }
  @supports(height:100dvh){html body .pk-cinema{height:324dvh!important}}
  html body .pk-cinema-stage,
  html body .pk-cinema:not(.entry-done) .pk-cinema-stage,
  html body .pk-cinema.entry-done .pk-cinema-stage{
    position:sticky!important;
    position:-webkit-sticky!important;
    top:var(--pc-header-h,76px)!important;
    height:calc(100svh - var(--pc-header-h,76px))!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
    background:#02182a!important;
    isolation:isolate!important;
  }
  @supports(height:100dvh){
    html body .pk-cinema-stage,
    html body .pk-cinema:not(.entry-done) .pk-cinema-stage,
    html body .pk-cinema.entry-done .pk-cinema-stage{height:calc(100dvh - var(--pc-header-h,76px))!important}
  }

  /* Entry hero and cinematic share the exact same sticky viewport. */
  html body .pk-cinema:not(.entry-done) #pkEntryHero{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }

  /* After handoff the film + copy remain inside the sticky stage for the whole
     cinematic track. Nothing in this layout is allowed to become a normal-flow
     full-page image before the section finishes. */
  html body .pk-cinema.entry-done .pk-cinema-stage{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:56.25vw auto minmax(8px,1fr) auto 38px!important;
    align-content:stretch!important;
  }
  html body .pk-cinema.entry-done .pk-cinema-film{
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    min-height:56.25vw!important;
    max-height:56.25vw!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    background:#031c30!important;
    z-index:1!important;
  }
  html body .pk-cinema.entry-done .pk-cinema-copy,
  html body .pk-cinema.entry-done .pk-cinema[data-layout] .pk-cinema-copy{
    position:relative!important;
    grid-column:1!important;
    grid-row:2!important;
    align-self:start!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    z-index:16!important;
  }
  html body .pk-cinema.entry-done .pk-cinema-bottom{
    position:relative!important;
    grid-column:1!important;
    grid-row:5!important;
    align-self:center!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    margin:0 16px!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:18!important;
  }

  /* Safe painted state while Safari is obtaining a seekable MP4 range. */
  html body .pk-cinema.entry-done:not(.scroll-media-ready) .pk-cinema-poster,
  html body .pk-cinema.smn-v347-mobile-fallback .pk-cinema-poster,
  html body .pk-cinema.smn-v348-media-fallback .pk-cinema-poster{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:2!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  html body .pk-cinema.entry-done:not(.scroll-media-ready) .pk-cinema-scroll-video,
  html body .pk-cinema.smn-v347-mobile-fallback .pk-cinema-scroll-video,
  html body .pk-cinema.smn-v348-media-fallback .pk-cinema-scroll-video{
    opacity:0!important;
  }
  html body .pk-cinema.scroll-media-ready:not(.smn-v348-media-fallback) .pk-cinema-scroll-video{
    opacity:1!important;
    visibility:visible!important;
  }

  /* Avoid stale hidden-copy state left by the entry overlay. */
  html body .pk-cinema.entry-done .pk-cinema-copy,
  html body .pk-cinema.entry-done .pk-cinema-benefits,
  html body .pk-cinema.entry-done .pk-cinema-bottom{pointer-events:auto!important}
}

/* Accessibility remains explicit: if the user has Reduce Motion enabled, do
   not create a 3.24-screen sticky animation track. Show the story compactly and
   move directly into Shop, with no blank spacer. */
@media (max-width:720px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  html,html body{overflow-x:clip!important;overflow-y:visible!important}
  html body .pk-cinema{height:auto!important;min-height:0!important;overflow:visible!important;background:#02182a!important}
  html body .pk-cinema-stage{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;display:block!important}
  html body #pkEntryHero{position:relative!important;inset:auto!important;width:100%!important;height:calc(100svh - var(--pc-header-h,76px))!important;min-height:640px!important;visibility:visible!important;opacity:1!important}
  html body .pk-cinema-film,html body .pk-cinema-copy,html body .pk-cinema-benefits,html body .pk-cinema-side,html body .pk-cinema-bottom,html body .pk-cinema-scrollcue{display:none!important}
}

/* Specificity guard against legacy V331 reduced-motion conflicts. */
@media (max-width:720px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  html body .pk-cinema.reduced-cinema,
  html body .pk-cinema.reduced-cinema.entry-done,
  html body .pk-cinema.reduced-cinema:not(.entry-done){height:auto!important;min-height:0!important;overflow:visible!important}
  html body .pk-cinema.reduced-cinema .pk-cinema-stage,
  html body .pk-cinema.reduced-cinema.entry-done .pk-cinema-stage,
  html body .pk-cinema.reduced-cinema:not(.entry-done) .pk-cinema-stage{
    position:relative!important;top:auto!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important;overflow:visible!important
  }
  html body .pk-cinema.reduced-cinema #pkEntryHero,
  html body .pk-cinema.reduced-cinema:not(.entry-done) #pkEntryHero,
  html body .pk-cinema.reduced-cinema.entry-done #pkEntryHero{
    display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;inset:auto!important;width:100%!important;height:calc(100svh - var(--pc-header-h,76px))!important;min-height:640px!important;max-height:none!important;pointer-events:auto!important
  }
  html body .pk-cinema.reduced-cinema .pk-cinema-film,
  html body .pk-cinema.reduced-cinema .pk-cinema-copy,
  html body .pk-cinema.reduced-cinema .pk-cinema-benefits,
  html body .pk-cinema.reduced-cinema .pk-cinema-side,
  html body .pk-cinema.reduced-cinema .pk-cinema-bottom,
  html body .pk-cinema.reduced-cinema .pk-cinema-scrollcue{display:none!important}
}

/* Real IMG fallback avoids any WebKit/background-image blanking while the MP4
   is not yet seekable. It is never the primary renderer once video is ready. */
.pk-cinema-poster-image{display:none}
@media (max-width:720px) and (orientation:portrait){
  html body .pk-cinema .pk-cinema-poster-image{
    display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center center!important;z-index:2!important;opacity:1!important;visibility:visible!important;
    pointer-events:none!important;transition:opacity .12s linear!important
  }
  html body .pk-cinema.scroll-media-ready:not(.smn-v347-mobile-fallback):not(.smn-v348-media-fallback) .pk-cinema-poster-image{
    opacity:0!important;visibility:hidden!important
  }
  html body .pk-cinema.smn-v347-mobile-fallback .pk-cinema-poster-image,
  html body .pk-cinema.smn-v348-media-fallback .pk-cinema-poster-image,
  html body .pk-cinema.entry-done:not(.scroll-media-ready) .pk-cinema-poster-image{
    opacity:1!important;visibility:visible!important
  }
}
@media (max-width:720px) and (orientation:portrait){
  html body .pk-cinema .pk-cinema-poster-image{z-index:4!important}
  html body .pk-cinema .pk-cinema-scroll-video{z-index:5!important}
  html body .pk-cinema .pk-cinema-video{z-index:6!important}
}