/* PATCH_ID: b2c_product_portal_transition_v2_20260709 */

/*
  Product Portal Transition V2
  - Product image floats out from card
  - Glass portal overlay
  - Product title editorial copy
  - SPA-first navigation, hard reload fallback
  - Detail page content enters smoothly
*/

/* leaving list page */
body.b2c-product-portal-leaving{
  cursor:progress;
}

body.b2c-product-portal-leaving .b2c-products-page{
  opacity:.52;
  filter:blur(4px);
  transform:translateY(2px) scale(.997);
  transition:
    opacity .32s ease,
    filter .32s ease,
    transform .42s cubic-bezier(.22,.8,.2,1);
}

body.b2c-product-portal-leaving .b2c-product-card-final:not(.b2c-product-portal-source),
body.b2c-product-portal-leaving .product-card:not(.b2c-product-portal-source){
  opacity:.42;
  transform:scale(.992);
  transition:
    opacity .26s ease,
    transform .34s cubic-bezier(.22,.8,.2,1);
}

.b2c-product-portal-source{
  position:relative;
  z-index:40;
  transform:translateY(-4px) scale(1.02) !important;
  box-shadow:0 28px 72px rgba(52,39,68,.18) !important;
  transition:
    transform .34s cubic-bezier(.22,.8,.2,1),
    box-shadow .34s ease !important;
}

/* source card body fades out while image floats */
body.b2c-product-portal-leaving .b2c-product-portal-source .b2c-product-body-final,
body.b2c-product-portal-leaving .b2c-product-portal-source .product-body,
body.b2c-product-portal-leaving .b2c-product-portal-source .card-body,
body.b2c-product-portal-leaving .b2c-product-portal-source .badge,
body.b2c-product-portal-leaving .b2c-product-portal-source .b2c-stock-badge-final,
body.b2c-product-portal-leaving .b2c-product-portal-source .b2c-product-title-final,
body.b2c-product-portal-leaving .b2c-product-portal-source .b2c-product-footer-final{
  opacity:0 !important;
  transform:translateY(12px) !important;
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.22,.8,.2,1) !important;
}

/* portal overlay */
.b2c-product-portal{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  overflow:hidden;

  background:
    radial-gradient(circle at 34% 42%, rgba(255,255,255,.68), rgba(255,255,255,.22) 36%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 74% 54%, rgba(255,226,241,.34), transparent 44%),
    radial-gradient(circle at 22% 58%, rgba(235,224,255,.30), transparent 42%),
    rgba(255,255,255,.44);

  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);

  opacity:0;
  transition:
    opacity .34s ease,
    backdrop-filter .34s ease,
    -webkit-backdrop-filter .34s ease;
}

.b2c-product-portal.is-on{
  opacity:1;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.b2c-product-portal.is-exit{
  opacity:0;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:
    opacity .44s ease,
    backdrop-filter .44s ease,
    -webkit-backdrop-filter .44s ease;
}

/* editorial copy */
.b2c-product-portal-copy{
  position:fixed;
  left:50%;
  top:50%;
  width:min(520px, 44vw);
  max-width:calc(100vw - 48px);
  transform:translate(8vw, -50%);
  z-index:99992;
  opacity:0;
  filter:blur(8px);
  transition:
    opacity .46s ease,
    transform .62s cubic-bezier(.18,.82,.2,1),
    filter .46s ease;
}

.b2c-product-portal.is-on .b2c-product-portal-copy{
  opacity:1;
  transform:translate(10vw, -50%);
  filter:blur(0);
}

.b2c-product-portal.is-landing .b2c-product-portal-copy{
  opacity:.18;
  transform:translate(12vw, -50%);
  filter:blur(5px);
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.22,.8,.2,1),
    filter .34s ease;
}

.b2c-product-portal-kicker{
  font-size:12px;
  font-weight:950;
  letter-spacing:.22em;
  color:rgba(88,72,102,.62);
  text-transform:uppercase;
  margin-bottom:12px;
}

.b2c-product-portal-title{
  font-size:clamp(28px, 4.2vw, 58px);
  line-height:.98;
  font-weight:950;
  letter-spacing:-.055em;
  color:#1f1727;
  max-width:100%;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-shadow:
    0 22px 60px rgba(49,35,65,.12),
    0 1px 0 rgba(255,255,255,.70);
}

.b2c-product-portal-line{
  margin-top:20px;
  width:min(300px, 62%);
  height:1px;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg, rgba(31,23,39,.35), rgba(31,23,39,0));
  transition:transform .54s cubic-bezier(.22,.8,.2,1) .18s;
}

.b2c-product-portal.is-on .b2c-product-portal-line{
  transform:scaleX(1);
}

/* soft diagonal beam */
.b2c-product-portal-beam{
  position:fixed;
  inset:-30%;
  z-index:99991;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 42%,
      rgba(255,255,255,.34) 48%,
      rgba(255,238,248,.20) 52%,
      transparent 60%,
      transparent 100%);
  opacity:0;
  transform:translateX(-18%) rotate(0.001deg);
}

.b2c-product-portal.is-on .b2c-product-portal-beam{
  animation:b2cProductPortalBeamV2 1.08s cubic-bezier(.22,.8,.2,1) .16s both;
}

@keyframes b2cProductPortalBeamV2{
  0%{opacity:0; transform:translateX(-22%);}
  26%{opacity:.8;}
  100%{opacity:0; transform:translateX(18%);}
}

/* floating product image */
.b2c-product-portal-float{
  position:fixed;
  z-index:99993;
  pointer-events:none;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 36px 98px rgba(44,33,58,.19),
    0 0 0 1px rgba(255,255,255,.66) inset;
  will-change:left,top,width,height,border-radius,opacity,transform;
  contain:layout paint style;
}

.b2c-product-portal-float::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 44%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.32), transparent 28%);
  opacity:.72;
}

.b2c-product-portal-float img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.003);
}

/* detail page entrance */
body.b2c-product-portal-entering main,
body.b2c-product-portal-entering .main{
  animation:b2cProductPortalPageInV2 .56s cubic-bezier(.22,.8,.2,1) both;
}

body.b2c-product-portal-entering .b2c-product-detail-info,
body.b2c-product-portal-entering .product-detail-info,
body.b2c-product-portal-entering .detail-info{
  animation:b2cProductPortalInfoInV2 .58s cubic-bezier(.22,.8,.2,1) .10s both;
}

body.b2c-product-portal-entering .b2c-product-detail-notice,
body.b2c-product-portal-entering .purchase-notice{
  animation:b2cProductPortalNoticeInV2 .54s cubic-bezier(.22,.8,.2,1) .22s both;
}

.b2c-product-portal-real-img-hidden{
  opacity:0 !important;
}

.b2c-product-portal-real-img-visible{
  opacity:1 !important;
  transition:opacity .34s ease !important;
}

@keyframes b2cProductPortalPageInV2{
  from{opacity:.78; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes b2cProductPortalInfoInV2{
  from{opacity:0; transform:translateX(24px);}
  to{opacity:1; transform:translateX(0);}
}

@keyframes b2cProductPortalNoticeInV2{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

@media(max-width:760px){
  body.b2c-product-portal-leaving .b2c-products-page{
    filter:blur(2.5px);
  }

  .b2c-product-portal-copy{
    left:50%;
    top:72%;
    width:calc(100vw - 40px);
    transform:translate(-50%, -50%) translateY(18px);
    text-align:center;
  }

  .b2c-product-portal.is-on .b2c-product-portal-copy{
    transform:translate(-50%, -50%) translateY(0);
  }

  .b2c-product-portal.is-landing .b2c-product-portal-copy{
    transform:translate(-50%, -50%) translateY(10px);
  }

  .b2c-product-portal-title{
    font-size:clamp(26px, 8vw, 42px);
    -webkit-line-clamp:2;
  }

  .b2c-product-portal-line{
    margin-left:auto;
    margin-right:auto;
    transform-origin:center;
    background:linear-gradient(90deg, rgba(31,23,39,0), rgba(31,23,39,.35), rgba(31,23,39,0));
  }
}

@media(prefers-reduced-motion: reduce){
  .b2c-product-portal,
  .b2c-product-portal *,
  .b2c-product-portal-float,
  body.b2c-product-portal-leaving .b2c-products-page,
  body.b2c-product-portal-entering main,
  body.b2c-product-portal-entering .main{
    animation:none !important;
    transition:none !important;
  }
}