/* =========================================================
   v122 — mobile scroll stabilization + fullscreen ship scenes
   Desktop is unchanged.
   ========================================================= */

@media (max-width: 820px){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.home-page,
  body.home-page main,
  .home-page .home-project-showcase{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }

  /* Avoid mobile browser viewport changes stretching sticky sections. */
  .home-page .home-project-scene,
  .home-page .home-project-sticky{
    box-sizing:border-box!important;
  }

  /* CHALLENGER + ALICE:
     each becomes a clean full-screen scroll scene. */
  .home-page .mid-switch-scroll{
    position:relative!important;
    width:100%!important;
    height:205svh!important;
    min-height:0!important;
    margin:0!important;
    overflow:visible!important;
    background:#05090c!important;
  }

  .home-page .mid-switch-scroll .home-project-sticky{
    position:sticky!important;
    top:0!important;
    width:100%!important;
    height:100svh!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    display:block!important;
    background:#05090c!important;
    transform:translateZ(0)!important;
    contain:paint!important;
  }

  /* The image uses the WHOLE viewport.
     No reserved band below the ship anymore. */
  .home-page .mid-switch-scroll .home-project-scene-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#05090c!important;
  }

  .home-page .mid-switch-scroll .home-project-scene-effect{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background:
      linear-gradient(180deg,
        rgba(2,5,7,.12) 0%,
        rgba(2,5,7,.02) 36%,
        rgba(2,5,7,.04) 60%,
        rgba(2,5,7,.78) 100%)!important;
    pointer-events:none!important;
  }

  /* Large edge-to-edge ship.
     Preserve the complete 16:9 photo (no destructive crop).
     Horizontal movement is controlled by JS. */
  .home-page .mid-switch-scroll .scroll-frame{
    position:absolute!important;
    inset:auto!important;
    left:50%!important;
    top:50%!important;
    width:116vw!important;
    height:100svh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#05090c!important;
    transform:
      translate3d(calc(-50% + var(--ship-pan-x, 0vw)), -50%, 0)
      scale(var(--ship-pan-scale, 1))!important;
    transform-origin:center center!important;
    will-change:transform,opacity!important;
    backface-visibility:hidden!important;
  }

  /* The text floats over the bottom of the full-screen ship,
     rather than shrinking the image area. */
  .home-page .mid-switch-scroll .home-project-scene-content{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:max(14px, env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    padding:13px 14px 14px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:8px 14px!important;
    align-items:end!important;
    background:rgba(4,10,14,.72)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:12px!important;
    box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
    backdrop-filter:blur(8px) saturate(115%)!important;
    -webkit-backdrop-filter:blur(8px) saturate(115%)!important;
    z-index:6!important;
  }

  .home-page .mid-switch-scroll .scene-titleblock{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
  }

  .home-page .mid-switch-scroll .scene-titleblock span{
    display:block!important;
    margin-bottom:3px!important;
    font-size:7px!important;
    letter-spacing:.12em!important;
    color:rgba(255,255,255,.48)!important;
  }

  .home-page .mid-switch-scroll .scene-titleblock strong{
    display:block!important;
    font-size:20px!important;
    line-height:1.05!important;
    font-weight:400!important;
    color:#fff!important;
  }

  .home-page .mid-switch-scroll .home-project-scene-content p{
    grid-column:1/-1!important;
    grid-row:2!important;
    max-width:none!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.72)!important;
  }

  .home-page .mid-switch-scroll .scene-link{
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    justify-self:end!important;
    margin:0!important;
    padding:5px 0!important;
    font-size:7px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Hide giant background project names on phone — they were one
     of the elements visually "sliding apart". */
  .home-page .mid-switch-scroll .home-project-projectname{
    display:none!important;
  }

  /* Keep the moving light inside the full-screen scene. */
  .home-page .mid-switch-scroll .scroll-light-sweep{
    top:-12%!important;
    bottom:-12%!important;
    left:-110%!important;
    width:320%!important;
    overflow:hidden!important;
  }

  /* ALICE II:
     user previously requested no long sticky pause here.
     It is still one full phone screen, but scrolls away normally. */
  .home-page .aliceii-motion-scene{
    position:relative!important;
    width:100%!important;
    height:100svh!important;
    min-height:620px!important;
    overflow:hidden!important;
    background:#071016!important;
  }

  .home-page .aliceii-motion-scene .home-project-sticky{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .home-page .aliceii-motion-scene .home-project-scene-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:70px 6px 150px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  .home-page .aliceii-motion-scene .home-project-scene-media img{
    width:98vw!important;
    max-width:none!important;
    height:auto!important;
    max-height:calc(100svh - 225px)!important;
    margin:auto!important;
    padding:8px!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:10px!important;
  }

  .home-page .aliceii-motion-scene .home-project-scene-effect{
    inset:0!important;
    background:linear-gradient(180deg,rgba(4,9,12,.05),transparent 50%,rgba(4,9,12,.62))!important;
  }

  .home-page .aliceii-motion-scene .home-project-projectname{
    display:none!important;
  }

  .home-page .aliceii-motion-scene .home-project-scene-content{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:max(14px, env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-height:0!important;
    padding:13px 14px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 14px!important;
    border-radius:12px!important;
    background:rgba(4,10,14,.76)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }

  .home-page .aliceii-motion-scene .home-project-scene-content p{
    grid-column:1/-1!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .home-page .aliceii-motion-scene .scene-titleblock strong{
    font-size:20px!important;
  }

  .home-page .aliceii-motion-scene .scene-link{
    justify-self:end!important;
    align-self:end!important;
    font-size:7px!important;
  }

  /* Stable mobile spacing for the surrounding homepage sections. */
  .home-page .home-project-showcase-head{
    width:calc(100% - 28px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .home-page .home-shop,
  .home-page .home-manifesto,
  .home-page .site-footer{
    overflow-x:clip!important;
  }
}

@media (max-width: 480px){
  .home-page .mid-switch-scroll{
    height:210svh!important;
  }

  .home-page .mid-switch-scroll .scroll-frame{
    width:120vw!important;
  }

  .home-page .mid-switch-scroll .home-project-scene-content{
    left:10px!important;
    right:10px!important;
    bottom:max(10px, env(safe-area-inset-bottom))!important;
  }

  .home-page .aliceii-motion-scene .home-project-scene-content{
    left:10px!important;
    right:10px!important;
    bottom:max(10px, env(safe-area-inset-bottom))!important;
  }
}