
/* =========================================================
   GOMMA WELL V10 — product integrity first
   - PNGs remain untouched
   - no clip-path, masks, 3D transforms or filters on product images
   - depth is built around the product with independent CSS layers
   ========================================================= */

/* Keep transparent product assets intact */
.hero-product,
.scene-product,
.kit-product,
.routine-stage,
.product-stage,
.product-side-visual,
.modal-visual{isolation:isolate}
.hero-product img,
.scene-product img,
.kit-product img,
.routine-stage img,
.product-pack,
.product-side-visual img,
.modal-visual img{
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  filter:none!important;
  transform:none!important;
  backface-visibility:visible!important;
  image-rendering:auto!important;
}
.hero-product,.scene-product,.kit-product{overflow:visible!important;filter:none!important;transform-style:flat!important;will-change:auto!important}
.hero-stage,.scene-stage,.kit-stage,.product-stage{transform-style:flat!important;perspective:none!important}

/* Launch mode: keep future cart code but remove premature purchase UI */
.launch-mode .cart-open,.launch-mode .cart,.launch-mode .modal{display:none!important}
.launch-mode .header-actions{margin-left:auto}

/* Hero composition */
.hero{grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);gap:28px}
.hero-stage{height:620px;position:relative;transform:none!important}
.hero-stage::before{
  content:"";position:absolute;left:13%;right:13%;bottom:2%;height:11%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(3,0,8,.48),rgba(3,0,8,.12) 50%,transparent 74%);
  filter:blur(16px);z-index:0;pointer-events:none
}
.hero-stage::after{
  content:"";position:absolute;inset:8% 7% 6%;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(190,104,255,.25),rgba(255,8,112,.11) 35%,transparent 69%);
  filter:blur(18px);z-index:0;pointer-events:none
}
.hero-product{position:absolute!important;bottom:4%!important;height:auto!important;opacity:1!important;z-index:2;animation:v10Float 6.5s ease-in-out infinite}
.hero-product::before{content:"";position:absolute;inset:17% 8% 11%;border-radius:50%;filter:blur(28px);opacity:.42;z-index:-1}
.hero-product::after{content:"";position:absolute;left:14%;right:14%;bottom:-1%;height:7%;border-radius:50%;background:rgba(0,0,0,.30);filter:blur(12px);z-index:-1}
.hero-neuro{width:35%!important;left:4%!important;--rot:-5deg;animation-delay:-1.5s}
.hero-sleep{width:46%!important;left:27%!important;z-index:4;--rot:0deg}
.hero-energy{width:35%!important;right:1%!important;--rot:5deg;animation-delay:-3.1s}
.hero-neuro::before{background:radial-gradient(circle,rgba(255,42,91,.72),transparent 69%)}
.hero-sleep::before{background:radial-gradient(circle,rgba(152,74,255,.70),transparent 69%)}
.hero-energy::before{background:radial-gradient(circle,rgba(145,230,0,.58),transparent 69%)}
.hero-product img{width:100%!important;height:auto!important}
@keyframes v10Float{0%,100%{translate:0 0;rotate:var(--rot)}50%{translate:0 -8px;rotate:var(--rot)}}
.hero-light{opacity:.45;filter:blur(22px)}
.orbit{opacity:.55}

/* Product storytelling: copy and product never collide */
.product-story{height:300vh}
.product-sticky{overflow:hidden}
.scene-copy-wrap{top:50%;width:42%;max-width:590px}
.scene-copy h2{line-height:.88;letter-spacing:-.065em}
.scene-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scene-actions .button{width:100%;display:flex;align-items:center;justify-content:center;text-align:center}
.scene-stage{top:10%;bottom:6%;height:auto;width:53%;right:0;display:grid;place-items:end center;overflow:visible}
.scene-stage::before{content:"";position:absolute;left:15%;right:15%;bottom:1%;height:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.30),transparent 72%);filter:blur(14px)}
.scene-product{position:absolute!important;inset:auto!important;bottom:1%!important;left:50%!important;width:auto!important;height:min(74vh,690px)!important;opacity:0!important;translate:-50% 24px!important;rotate:0deg!important;scale:.96;transition:opacity .42s ease,translate .52s cubic-bezier(.16,1,.3,1),scale .52s cubic-bezier(.16,1,.3,1)!important}
.scene-product.active{opacity:1!important;translate:-50% 0!important;scale:1}
.scene-product.exit{opacity:0!important;translate:-50% -18px!important;scale:.98}
.scene-product img{height:100%!important;width:auto!important;max-width:100%!important}
.scene-product::before{content:"";position:absolute;inset:20% 6% 10%;border-radius:50%;filter:blur(30px);z-index:-1;opacity:.48}
.scene-product[data-product-image="0"]::before{background:radial-gradient(circle,rgba(255,36,93,.78),transparent 68%)}
.scene-product[data-product-image="1"]::before{background:radial-gradient(circle,rgba(167,82,255,.72),transparent 68%)}
.scene-product[data-product-image="2"]::before{background:radial-gradient(circle,rgba(116,205,0,.64),transparent 68%)}
.scene-badge{bottom:4%;right:4%}

/* Routine */
.routine-stage{overflow:visible}
.routine-stage::after{content:"";position:absolute;left:25%;right:25%;bottom:3%;height:8%;border-radius:50%;background:radial-gradient(ellipse,rgba(38,0,53,.25),transparent 72%);filter:blur(12px)}
.routine-stage img{height:88%!important;width:auto!important;max-width:84%!important;position:relative;z-index:2;animation:v10Routine 6s ease-in-out infinite}
@keyframes v10Routine{50%{translate:0 -7px}}

/* Kit: full jars, controlled overlap */
.kit-stage{height:590px;overflow:visible}
.kit-stage::before{content:"";position:absolute;left:10%;right:10%;bottom:1%;height:10%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.34),transparent 72%);filter:blur(15px)}
.kit-product{position:absolute!important;bottom:2%!important;height:auto!important;opacity:1!important;filter:none!important;overflow:visible!important;animation:v10KitFloat 6.4s ease-in-out infinite}
.kit-product img{width:100%!important;height:auto!important}
.kit-neuro{width:32%!important;left:5%!important;--kitrot:-4deg;animation-delay:-1.6s}
.kit-sleep{width:43%!important;left:29%!important;z-index:4;--kitrot:0deg}
.kit-energy{width:32%!important;right:3%!important;--kitrot:4deg;animation-delay:-3.2s}
@keyframes v10KitFloat{0%,100%{translate:0 0;rotate:var(--kitrot)}50%{translate:0 -7px;rotate:var(--kitrot)}}

/* Compact launch CTA */
.mobile-buy{min-height:66px;padding:6px 7px 6px 16px!important}
.mobile-buy strong{font-size:12px!important;letter-spacing:.02em}
.mobile-buy>b{padding:10px 17px!important}

/* Dedicated product pages */
.product-hero .hero-shell{align-items:center}
.product-stage{min-height:640px;overflow:visible}
.product-stage::after{content:"";position:absolute;left:17%;right:17%;bottom:4%;height:8%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.31),transparent 72%);filter:blur(14px)}
.product-pack{position:relative!important;z-index:2;height:min(78vh,720px)!important;width:auto!important;max-width:90%!important;animation:v10Landing 6.2s ease-in-out infinite}
@keyframes v10Landing{50%{translate:0 -8px}}
.product-side-visual{overflow:hidden}
.product-side-visual img{height:82%!important;width:auto!important;max-width:76%!important;position:relative;z-index:2}
.product-side-visual::after{content:"";position:absolute;left:20%;right:20%;bottom:8%;height:7%;border-radius:50%;background:rgba(0,0,0,.24);filter:blur(12px)}
.product-copy h1{white-space:nowrap}
.product-detail-section .product-page-grid{align-items:stretch}
.product-detail-section .product-side-visual{min-height:600px}

/* Consumer-facing sections */
.info-card,.story-step{transition:transform .22s,box-shadow .22s}
.info-card:hover,.story-step:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(36,19,45,.08)}
.cta-band{overflow:hidden;position:relative}
.cta-band::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-150px;background:rgba(145,230,0,.16);filter:blur(6px)}
.cta-band>*{position:relative;z-index:1}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-stage{height:560px}
  .scene-stage{width:50%}
}

@media(max-width:720px){
  .hero{padding:48px 20px 38px;gap:8px}
  .hero-copy{z-index:5}
  .hero-stage{height:430px;margin-top:4px}
  .hero-stage::before{left:3%;right:3%;bottom:0;height:11%}
  .hero-stage::after{inset:4% -3% 0}
  .hero-neuro{width:36%!important;left:1%!important;bottom:4%!important}
  .hero-sleep{width:52%!important;left:24%!important;bottom:1%!important}
  .hero-energy{width:36%!important;right:0!important;bottom:4%!important}
  .gel-hero-a{left:5%;top:12%}.gel-hero-b{right:1%;top:24%}.gel-hero-c{right:2%;bottom:9%}

  .product-story{height:300vh}
  .product-sticky{height:100svh;min-height:680px}
  .scene-rail{top:74px}
  .scene-copy-wrap{left:20px;right:20px;top:106px;width:auto;transform:none;max-width:none;height:44%;overflow:visible}
  .scene-copy{padding:0;top:0}
  .scene-copy h2{font-size:clamp(48px,14vw,63px);line-height:.88;margin:0 0 14px;word-break:normal;overflow-wrap:normal}
  .scene-copy>p:not(.eyebrow){font-size:14px;line-height:1.45;max-width:95%}
  .chips{margin:12px 0 10px}
  .price{margin:9px 0 12px;align-items:end;gap:10px}
  .price small{font-size:11px}.price strong{font-size:34px}.price>span{font-size:11px}
  .scene-actions{grid-template-columns:1fr 1fr;gap:8px}
  .scene-actions .button{min-height:54px;padding:12px 11px;font-size:13px;line-height:1.15}
  .scene-stage{left:0;right:0;top:auto;bottom:2%;width:100%;height:45%;display:grid;place-items:end center}
  .scene-product{height:100%!important;max-width:88vw!important;bottom:0!important}
  .scene-product img{height:100%!important;width:auto!important;max-width:88vw!important}
  .scene-badge{right:18px;bottom:4%;transform:scale(.86);transform-origin:right bottom}
  .scene-gel-a{left:6%;top:4%}.scene-gel-b{right:4%;bottom:7%}.scene-gel-c{right:4%;top:8%}

  .kit-stage{height:390px}
  .kit-neuro{width:34%!important;left:3%!important}.kit-sleep{width:45%!important;left:28%!important}.kit-energy{width:34%!important;right:1%!important}

  .routine-stage img{height:92%!important;max-width:72%!important}

  .product-hero{padding:36px 20px 48px}
  .product-hero .hero-shell{display:flex;flex-direction:column;gap:12px;min-height:auto}
  .product-copy{width:100%}
  .product-copy h1{font-size:clamp(52px,15vw,74px);white-space:normal;line-height:.9}
  .product-copy .reveal-lines span{white-space:nowrap}
  .product-subtitle{font-size:16px;margin-bottom:20px}
  .product-badges{margin-bottom:17px}
  .product-price-box{margin:12px 0 18px;gap:12px}
  .product-price-box strong{font-size:46px}
  .product-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .product-stage{min-height:410px;width:100%}
  .product-pack{height:400px!important;max-width:82vw!important;width:auto!important}
  .product-ring.ring-a{width:360px;height:360px}.product-ring.ring-b{width:250px;height:250px}
  .product-side-visual{min-height:430px!important}
  .product-side-visual img{height:78%!important;max-width:72%!important}
  .visual-caption{left:18px;right:18px;bottom:18px}

  .mobile-buy{left:14px;right:14px;bottom:10px;min-height:66px}
}

@media(prefers-reduced-motion:reduce){
  .hero-product,.kit-product,.routine-stage img,.product-pack{animation:none!important}
}
