/* PATCH_ID: b2c_login_hero_diagonal_v3_stage2_css_20260710 */

/* =========================================================
   PAGE AND HERO CONTAINER
   ========================================================= */

.auth-layout{
  overflow:visible !important;
}

.auth-layout > .login-art.b2c-login-hero-v3{
  position:relative !important;
  z-index:2;
  min-height:600px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:38px !important;
  background:transparent !important;
  box-shadow:none !important;
  isolation:isolate;
}

/*
 * 实际粉色底座独立存在。
 * 商品图可以超出底座，但不会破坏圆角背景。
 */
.b2c-login-v3-base{
  position:absolute;
  z-index:0;
  inset:54px 0 0;
  overflow:hidden;
  border:1px solid rgba(224,205,232,.72);
  border-radius:38px;
  background:
    radial-gradient(
      circle at 76% 22%,
      rgba(255,255,255,.62),
      transparent 31%
    ),
    radial-gradient(
      circle at 20% 82%,
      rgba(229,199,242,.30),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #f7effc 0%,
      #f5e9f8 50%,
      #f8edf5 100%
    );
  box-shadow:
    0 31px 78px rgba(74,48,85,.13),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.b2c-login-v3-base::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.31),
      transparent 34%
    );
}

/* =========================================================
   BACKGROUND GRID AND DECORATION
   ========================================================= */

.b2c-login-v3-grid{
  position:absolute;
  z-index:1;
  inset:78px 24px 20px;
  overflow:hidden;
  border-radius:30px;
  pointer-events:none;
  opacity:.56;
}

.b2c-login-v3-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(119,82,139,.20),
      rgba(119,82,139,.20)
    ),
    linear-gradient(
      90deg,
      rgba(119,82,139,.20),
      rgba(119,82,139,.20)
    );
  background-repeat:repeat;
  background-size:14px 1.4px,1.4px 14px;
  background-position:44px 38px;
  mask-image:
    radial-gradient(
      ellipse at 50% 43%,
      rgba(0,0,0,.65),
      transparent 74%
    );
}

.b2c-login-v3-orbit{
  position:absolute;
  z-index:2;
  top:86px;
  left:50%;
  width:440px;
  height:440px;
  pointer-events:none;
  opacity:.36;
  transform:translateX(-50%);
}

.b2c-login-v3-orbit::before,
.b2c-login-v3-orbit::after{
  content:"";
  position:absolute;
  border:1px solid rgba(145,104,170,.32);
  border-radius:50%;
}

.b2c-login-v3-orbit::before{
  inset:22px;
  transform:rotate(-13deg) scaleY(.72);
}

.b2c-login-v3-orbit::after{
  inset:74px 34px;
  transform:rotate(18deg) scaleY(.58);
}

/* =========================================================
   DIAGONAL 3D STAGE
   ========================================================= */

.b2c-login-v3-stage{
  position:absolute;
  z-index:5;
  top:-44px;
  left:50%;
  width:min(92%,600px);
  height:430px;
  pointer-events:none;
  perspective:1500px;
  transform:translateX(-50%);
}

.b2c-login-v3-stack{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:
    b2cLoginV3Float 7.8s
    ease-in-out infinite;
}

/*
 * 每一层使用同一张商品图。
 * 从左后方到右前方形成连续斜向空间层。
 */
.b2c-login-v3-layer{
  position:absolute;
  top:50%;
  left:50%;
  width:250px;
  height:250px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.68);
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(247,239,251,.78)
    );
  box-shadow:
    0 22px 60px rgba(44,27,55,.16),
    inset 0 1px 0 rgba(255,255,255,.96);
  transform-origin:center;
  transition:
    transform 1.05s cubic-bezier(.22,.82,.2,1),
    opacity .85s ease,
    filter .85s ease;
  will-change:transform,opacity,filter;
}

.b2c-login-v3-layer img{
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:block;
  padding:9px;
  object-fit:contain;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,.99),
      rgba(246,237,249,.82)
    );
  user-select:none;
  -webkit-user-drag:none;
}

/* 最后方 */
.b2c-login-v3-layer[data-layer="0"]{
  z-index:1;
  opacity:.10;
  filter:
    blur(5px)
    saturate(.72);
  transform:
    translate3d(-232px,-138px,-500px)
    rotateY(-29deg)
    rotateZ(-10deg)
    scale(.74);
}

/* 后方第2层 */
.b2c-login-v3-layer[data-layer="1"]{
  z-index:2;
  opacity:.17;
  filter:
    blur(4px)
    saturate(.78);
  transform:
    translate3d(-188px,-108px,-405px)
    rotateY(-25deg)
    rotateZ(-8deg)
    scale(.79);
}

/* 后方第3层 */
.b2c-login-v3-layer[data-layer="2"]{
  z-index:3;
  opacity:.27;
  filter:
    blur(3px)
    saturate(.84);
  transform:
    translate3d(-143px,-78px,-310px)
    rotateY(-21deg)
    rotateZ(-6deg)
    scale(.84);
}

/* 后方第4层 */
.b2c-login-v3-layer[data-layer="3"]{
  z-index:4;
  opacity:.41;
  filter:
    blur(2px)
    saturate(.90);
  transform:
    translate3d(-98px,-49px,-220px)
    rotateY(-17deg)
    rotateZ(-4deg)
    scale(.89);
}

/* 后方第5层 */
.b2c-login-v3-layer[data-layer="4"]{
  z-index:5;
  opacity:.59;
  filter:
    blur(1px)
    saturate(.96);
  transform:
    translate3d(-53px,-21px,-130px)
    rotateY(-13deg)
    rotateZ(-2deg)
    scale(.94);
}

/* 中前层 */
.b2c-login-v3-layer[data-layer="5"]{
  z-index:6;
  opacity:.78;
  filter:
    blur(.3px)
    saturate(1);
  transform:
    translate3d(-8px,7px,-50px)
    rotateY(-9deg)
    rotateZ(0deg)
    scale(.98);
}

/* 主商品图 */
.b2c-login-v3-layer[data-layer="6"]{
  z-index:7;
  opacity:1;
  filter:
    blur(0)
    saturate(1.06)
    contrast(1.025);
  transform:
    translate3d(42px,37px,35px)
    rotateY(-6deg)
    rotateZ(2deg)
    scale(1.04);
  border-color:rgba(255,255,255,.98);
  box-shadow:
    0 17px 25px rgba(53,31,65,.14),
    0 43px 85px rgba(48,28,60,.27),
    0 0 0 1px rgba(203,174,219,.25),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* 主图底部漂浮投影 */
.b2c-login-v3-shadow{
  position:absolute;
  z-index:0;
  top:330px;
  left:56%;
  width:260px;
  height:54px;
  border-radius:50%;
  background:rgba(78,47,91,.24);
  filter:blur(24px);
  opacity:.62;
  transform:
    translateX(-50%)
    rotate(-7deg);
}

/* =========================================================
   SWITCH ANIMATION
   ========================================================= */

.b2c-login-v3-stack.is-leaving
.b2c-login-v3-layer{
  opacity:0 !important;
  filter:
    blur(12px)
    saturate(.62) !important;
  transform:
    translate3d(148px,72px,-270px)
    rotateY(-20deg)
    rotateZ(9deg)
    scale(.87) !important;
}

.b2c-login-v3-stack.is-entering
.b2c-login-v3-layer{
  opacity:0;
  filter:
    blur(12px)
    saturate(.68);
  transform:
    translate3d(-156px,-86px,-290px)
    rotateY(-29deg)
    rotateZ(-12deg)
    scale(.84);
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="0"]{
  transition-delay:0ms;
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="1"]{
  transition-delay:45ms;
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="2"]{
  transition-delay:90ms;
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="3"]{
  transition-delay:135ms;
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="4"]{
  transition-delay:180ms;
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="5"]{
  transition-delay:225ms;
}

.b2c-login-v3-stack.is-ready
.b2c-login-v3-layer[data-layer="6"]{
  transition-delay:270ms;
}

@keyframes b2cLoginV3Float{
  0%,
  100%{
    transform:
      translate3d(0,0,0)
      rotateX(0deg);
  }

  50%{
    transform:
      translate3d(0,-9px,0)
      rotateX(1.1deg);
  }
}

/* =========================================================
   COPY / TYPOGRAPHY
   ========================================================= */

.b2c-login-v3-copy{
  position:absolute;
  z-index:8;
  right:38px;
  bottom:34px;
  left:38px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  pointer-events:none;
}

.b2c-login-v3-pill{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  margin-bottom:12px;
  padding:0 13px;
  border:1px solid rgba(180,139,207,.48);
  border-radius:999px;
  background:rgba(242,226,251,.82);
  color:#79549b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  backdrop-filter:blur(10px);
}

.b2c-login-v3-title{
  max-width:510px;
  margin:0;
  color:#1e1b24;
  font-size:clamp(43px,4vw,65px);
  font-weight:950;
  line-height:.91;
  letter-spacing:-.052em;
}

.b2c-login-v3-description{
  max-width:510px;
  margin:13px 0 0;
  color:#514951;
  font-size:15px;
  line-height:1.48;
}

/* 淡淡的大号背景字 */
.b2c-login-v3-watermark{
  position:absolute;
  z-index:1;
  top:116px;
  right:18px;
  color:rgba(106,68,125,.055);
  font-size:92px;
  font-weight:950;
  line-height:.8;
  letter-spacing:-.075em;
  pointer-events:none;
  transform:rotate(90deg);
  transform-origin:center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1150px){
  .auth-layout > .login-art.b2c-login-hero-v3{
    min-height:560px !important;
  }

  .b2c-login-v3-stage{
    top:-25px;
    height:390px;
  }

  .b2c-login-v3-layer{
    width:220px;
    height:220px;
  }

  .b2c-login-v3-shadow{
    top:300px;
    width:220px;
  }

  .b2c-login-v3-title{
    font-size:48px;
  }
}

@media(max-width:850px){
  .auth-layout > .login-art.b2c-login-hero-v3{
    min-height:510px !important;
  }

  .b2c-login-v3-base{
    inset:38px 0 0;
    border-radius:30px;
  }

  .b2c-login-v3-stage{
    top:-24px;
    width:100%;
    height:335px;
    transform:
      translateX(-50%)
      scale(.83);
  }

  .b2c-login-v3-copy{
    right:25px;
    bottom:26px;
    left:25px;
  }

  .b2c-login-v3-title{
    max-width:430px;
    font-size:41px;
  }

  .b2c-login-v3-description{
    max-width:430px;
    font-size:13px;
  }
}

@media(max-width:620px){
  .auth-layout > .login-art.b2c-login-hero-v3{
    min-height:460px !important;
  }

  .b2c-login-v3-base{
    inset:28px 0 0;
    border-radius:27px;
  }

  .b2c-login-v3-stage{
    top:-39px;
    left:47%;
    height:300px;
    transform:
      translateX(-50%)
      scale(.69);
  }

  .b2c-login-v3-copy{
    right:21px;
    bottom:22px;
    left:21px;
  }

  .b2c-login-v3-title{
    font-size:36px;
  }

  .b2c-login-v3-description{
    margin-top:10px;
    font-size:12px;
  }

  .b2c-login-v3-pill{
    min-height:28px;
    margin-bottom:10px;
    font-size:9px;
  }

  .b2c-login-v3-watermark{
    display:none;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  .b2c-login-v3-stack{
    animation:none !important;
  }

  .b2c-login-v3-layer{
    transition:none !important;
  }
}