/* ============================================================
   AWGroup LP — HERO E (cast diagonal reveal — test variant)
   cropped cast photos slide in from the left, alternating up/down
   ============================================================ */

.hero--e{flex-direction:column;justify-content:center;align-items:center;text-align:center;
  color:var(--ink);overflow:hidden;
  background:
    radial-gradient(110% 70% at 50% 6%,#FFE6F4 0%,transparent 58%),
    radial-gradient(90% 60% at 100% 100%,#DCEEFF 0%,transparent 55%),
    linear-gradient(160deg,#FFF2F8,#F2ECFF 55%,#E8F5FF);}
.hero--e .brand{color:var(--ink);text-shadow:none;}
.hero--e .brand b{color:var(--rose);}
.hero--e .hero__tag{color:var(--rose-deep);border-color:var(--pink-soft);background:rgba(255,255,255,.7);}
.hero--e .hero__scroll{color:var(--ink-faint);}
.hero--e .hero__scroll::after{background:linear-gradient(var(--ink-faint),transparent);}

.heroe__head{position:relative;z-index:3;margin-top:18px;}
.hero--e .hero__kicker{color:var(--rose-deep);text-shadow:none;justify-content:center;}
.hero--e .hero__kicker .dotline{background:var(--rose);}
.hero--e .hero__title{color:var(--ink);text-shadow:none;font-size:clamp(30px,9.5vw,46px);}
.hero--e .hero__title .em{background:var(--rose-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;}

.heroe__sub{position:relative;z-index:3;margin-top:14px;font-family:var(--f-disp);font-weight:700;
  font-size:14px;color:var(--ink-soft);}
.heroe__sub::before{content:"♡ ";color:var(--rose);}

/* the parallelogram slash lineup */
.castrow{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  height:clamp(300px,52vh,400px);margin:20px auto 4px;overflow:hidden;}
/* each slash = a PARALLELOGRAM: full height (flat top & bottom), slanted sides */
.castcard{position:absolute;top:0;bottom:0;height:100%;width:40%;overflow:hidden;
  --slant:30%;
  clip-path:polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  box-shadow:0 16px 30px -16px rgba(120,40,90,.5);background:#fff;}
.castcard image-slot{width:100%;height:100%;display:block;}

/* parallel "/////" slashes — interlocking, flush top & bottom, same slant */
.c1{left:-2%; z-index:1;}
.c2{left:14%; z-index:2;}
.c3{left:30%; z-index:3;}
.c4{left:46%; z-index:4;}
.c5{left:62%; z-index:5;}

/* entrance: slide up from below, staggered. clip-path gives the slant,
   so the animation only translates/fades (no rotate). A JS timer adds
   .castdone to PIN the final state even if the paint clock never advances. */
.castcard{opacity:0;transform:translate(-46px,30px);}
.hero--e.played .castcard{animation:castInE .6s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:var(--d,0s);}
.hero--e.castdone .castcard{opacity:1 !important;transform:none !important;animation:none !important;}
@keyframes castInE{
  from{opacity:0;transform:translate(-46px,30px);}
  to{opacity:1;transform:translate(0,0);}
}
.c1{--d:0s;} .c2{--d:.13s;} .c3{--d:.26s;} .c4{--d:.39s;} .c5{--d:.52s;}

@media (prefers-reduced-motion:reduce){
  .castcard{opacity:1;transform:none;}
  .hero--e.played .castcard{animation:none !important;}
}