/* =========================================================
   GOMMA WELL V13 — final polish for mobile hierarchy
   ========================================================= */

/* Prevent lingering ghost states during scene swaps */
.scene-copy,
.scene-product{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform-style:flat!important;
  will-change:opacity, transform;
}

.scene-copy,
.scene-product{
  visibility:hidden;
  pointer-events:none;
}
.scene-copy.active,
.scene-copy.exit,
.scene-product.active,
.scene-product.exit{
  visibility:visible;
}
.scene-copy.active,
.scene-product.active{
  pointer-events:auto;
  z-index:3;
}
.scene-copy.exit,
.scene-product.exit{
  z-index:1;
}

@media(max-width:1100px){
  .hero-neuro{width:28%!important;left:5%!important;bottom:5%!important}
  .hero-sleep{width:39%!important;left:30.5%!important;bottom:2.5%!important}
  .hero-energy{width:28%!important;right:5%!important;bottom:5%!important}
}

@media(max-width:720px){
  /* 1) Home hero trio more balanced */
  .hero-stage{height:500px!important}
  .hero-neuro{
    width:27%!important;
    left:4%!important;
    bottom:7%!important;
  }
  .hero-sleep{
    width:38%!important;
    left:31%!important;
    bottom:2%!important;
  }
  .hero-energy{
    width:27%!important;
    right:4%!important;
    bottom:7%!important;
  }

  /* 2) Product story: remove blur/ghost feeling and keep product centered */
  .scene-copy-wrap{
    top:98px!important;
    height:42%!important;
  }
  .scene-copy{
    opacity:0!important;
    transform:translateY(18px)!important;
    transition:opacity .20s ease, transform .26s cubic-bezier(.16,1,.3,1)!important;
  }
  .scene-copy.active{
    opacity:1!important;
    transform:none!important;
  }
  .scene-copy.exit{
    opacity:0!important;
    transform:translateY(-10px)!important;
  }

  .scene-stage{
    left:0!important;
    right:0!important;
    width:100%!important;
    height:40%!important;
    bottom:1.5%!important;
    overflow:visible!important;
  }
  .scene-product{
    opacity:0!important;
    translate:-50% 12px!important;
    scale:.96!important;
    transition:opacity .22s ease, translate .26s cubic-bezier(.16,1,.3,1), scale .26s cubic-bezier(.16,1,.3,1)!important;
  }
  .scene-product.active{
    opacity:1!important;
    translate:-50% 0!important;
    scale:1!important;
  }
  .scene-product.exit{
    opacity:0!important;
    translate:-50% 6px!important;
    scale:.98!important;
  }
  .scene-product[data-product-image="0"]{width:45vw!important;max-width:214px!important}
  .scene-product[data-product-image="1"]{width:46vw!important;max-width:220px!important}
  .scene-product[data-product-image="2"]{width:45vw!important;max-width:214px!important}
  .scene-badge{
    right:16px!important;
    bottom:88px!important;
    transform:scale(.78)!important;
  }

  /* 3) Routine card: show more of the bottle and reduce crowding */
  .routine-scene{
    min-height:560px!important;
    padding:24px 22px 34px!important;
  }
  .routine-copy h3{
    font-size:46px!important;
    margin-bottom:12px!important;
  }
  .routine-stage{
    height:282px!important;
    display:grid!important;
    place-items:end center!important;
  }
  .routine-stage img{
    height:82%!important;
    max-width:64%!important;
  }
  .routine-gel-a{left:9%!important;top:16%!important}
  .routine-gel-b{right:8%!important;bottom:18%!important}

  /* 4) Give breathing room to the fixed buy bar and kit CTA */
  .kit{
    gap:18px!important;
    padding-bottom:118px!important;
  }
  .kit-stage{
    height:455px!important;
  }
  .kit-copy{
    margin-top:-4px!important;
    padding-bottom:14px!important;
  }
  .mobile-buy{
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    min-height:64px!important;
  }
}