/* ============================================================
   AWGroup LP — 魅力1 / CONCEPT  (3 switchable reveal variants)
   A: LINE RISE   B: CURTAIN WIPE   C: FOCUS PULL
   Same verbatim copy; only the reveal mechanic + accents differ.
   Reveal is scroll-triggered (.charm gets .seen).
   ============================================================ */

/* ---- switcher ---- */
.cswitch{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:6px;
  margin:34px auto 0;}
.cswitch__lbl{font-family:var(--f-serif);font-style:italic;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rose-ink);margin-right:4px;}
.cswitch button{width:30px;height:30px;border-radius:50%;border:1.6px solid var(--pink-soft);
  background:#fff;color:var(--rose-ink);font-family:var(--f-disp);font-weight:900;font-size:13px;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease;}
.cswitch button.on{background:var(--rose-grad);color:#fff;border-color:transparent;
  transform:scale(1.12);box-shadow:0 6px 14px -5px rgba(216,30,114,.6);}

/* ---- shared shell ---- */
.charm{position:relative;z-index:2;max-width:460px;margin:10px auto 0;
  padding:46px 20px 8px;text-align:left;overflow:hidden;}
.charm__head{position:absolute;top:6px;left:10px;z-index:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.charm__mark{font-family:var(--f-disp);font-weight:900;font-size:clamp(46px,15vw,76px);
  letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.6px rgba(216,30,114,.16);
  transform:rotate(-5deg);transform-origin:left center;}
.charm__mark span{-webkit-text-stroke-color:rgba(95,160,210,.22);font-style:italic;margin-left:.04em;}
.charm__eyebrow{margin-top:2px;margin-left:6px;font-family:var(--f-serif);font-style:italic;font-weight:600;
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:rgba(216,30,114,.34);
  transform:rotate(-5deg);transform-origin:left center;}

/* progress rail on the left */
.charm__rail{position:absolute;left:14px;top:130px;bottom:96px;width:2px;border-radius:2px;z-index:1;
  background:rgba(216,30,114,.1);overflow:hidden;}
.charm__rail i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(var(--rose),var(--lav,#C79BF2));transition:height 1.4s ease .15s;}
.charm.seen .charm__rail i{height:100%;}

.charm__body{position:relative;z-index:2;padding-left:18px;}
.charm__p{font-family:var(--f-disp);font-weight:700;font-size:clamp(14px,4.1vw,16.5px);
  line-height:1.95;color:var(--ink);margin:0;}
.cl{display:block;}
.charm__em{display:inline-block;font-weight:900;font-size:1.18em;color:var(--rose-deep);
  position:relative;white-space:nowrap;}
.charm__lead{margin:24px 0 0;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(14px,4.1vw,16.5px);line-height:1.7;color:var(--ink-soft);}
.charm__leadbig{font-size:1.12em;color:var(--rose-ink);font-weight:900;}

/* =====================================================
   scroll prompts — 3 designs (data-sv 1 | 2 | 3)
   ===================================================== */
.cscroll{position:relative;margin:30px auto 4px;width:fit-content;text-align:center;}
.cscroll__switch{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:16px;}
.cscroll__lbl{font-family:var(--f-serif);font-style:italic;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rose-ink);margin-right:3px;}
.cscroll__switch button{width:24px;height:24px;border-radius:50%;border:1.4px solid var(--pink-soft);
  background:#fff;color:var(--rose-ink);font-family:var(--f-disp);font-weight:900;font-size:11px;cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;}
.cscroll__switch button.on{background:var(--rose-grad);color:#fff;border-color:transparent;
  transform:scale(1.12);box-shadow:0 5px 12px -4px rgba(216,30,114,.6);}

.csv{display:none;flex-direction:column;align-items:center;gap:10px;}
.cscroll[data-sv="1"] .csv1{display:flex;}
.cscroll[data-sv="2"] .csv2{display:flex;}
.cscroll[data-sv="3"] .csv3{display:flex;}
.csv__label{font-family:var(--f-disp);font-weight:900;font-size:11px;letter-spacing:.22em;
  color:var(--rose-ink);}

/* S1 — mouse + travelling wheel */
.csv1__mouse{position:relative;width:30px;height:48px;border-radius:16px;
  border:2.4px solid var(--rose);box-shadow:0 8px 18px -10px rgba(216,30,114,.5);}
.csv1__mouse i{position:absolute;left:50%;top:9px;width:4px;height:9px;border-radius:3px;
  background:var(--rose);transform:translateX(-50%);animation:wheelDrop 1.7s ease-in-out infinite;}
@keyframes wheelDrop{0%{opacity:0;transform:translateX(-50%) translateY(-4px);}
  30%{opacity:1;}70%{opacity:1;transform:translateX(-50%) translateY(12px);}100%{opacity:0;transform:translateX(-50%) translateY(16px);}}

/* S2 — chevron cascade on a soft line */
.csv2__chev{position:relative;display:flex;flex-direction:column;align-items:center;gap:-2px;height:34px;}
.csv2__chev i{width:15px;height:15px;border-right:3px solid var(--aqua);border-bottom:3px solid var(--aqua);
  transform:rotate(45deg);margin-top:-7px;border-radius:2px;opacity:.3;
  animation:chevWave 1.5s ease-in-out infinite;}
.csv2 .csv__label{color:var(--aqua-deep);}
.csv2__chev i:nth-child(1){animation-delay:0s;}
.csv2__chev i:nth-child(2){animation-delay:.18s;}
.csv2__chev i:nth-child(3){animation-delay:.36s;}
@keyframes chevWave{0%,100%{opacity:.25;}50%{opacity:1;}}

/* S3 — glowing drop falling down a track */
.csv3__track{position:relative;width:2px;height:54px;border-radius:2px;
  background:linear-gradient(var(--rose),rgba(216,30,114,0));overflow:visible;}
.csv3__track i{position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,var(--rose) 70%);
  box-shadow:0 0 12px 2px rgba(255,79,148,.7);transform:translateX(-50%);
  animation:dropFall 1.8s cubic-bezier(.5,0,.7,1) infinite;}
@keyframes dropFall{0%{top:-2px;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{top:52px;opacity:0;}}

.charm__arrow{display:none;}

/* =====================================================
   A — LINE RISE : each line floats up in sequence
   ===================================================== */
.charm[data-cv="a"] .cl{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .62s cubic-bezier(.2,.7,.2,1);}
.charm[data-cv="a"].seen .cl{opacity:1;transform:none;}
.charm[data-cv="a"] .charm__em{
  background:linear-gradient(transparent 56%,rgba(255,179,212,.7) 56%);padding:0 .1em;}
.charm[data-cv="a"].seen .charm__em{animation:emPop .6s cubic-bezier(.2,.8,.3,1.3) var(--emd,1.5s) both;}
@keyframes emPop{0%{transform:scale(1);}40%{transform:scale(1.16);}100%{transform:scale(1);}}

/* =====================================================
   B — CURTAIN WIPE : each line revealed by a L→R wipe
   ===================================================== */
.charm[data-cv="b"] .cl{position:relative;opacity:0;
  -webkit-mask:linear-gradient(90deg,#000 0 0) no-repeat;mask:linear-gradient(90deg,#000 0 0) no-repeat;
  -webkit-mask-size:0% 100%;mask-size:0% 100%;
  transition:opacity .2s ease, -webkit-mask-size .6s ease, mask-size .6s ease;}
.charm[data-cv="b"].seen .cl{opacity:1;-webkit-mask-size:100% 100%;mask-size:100% 100%;}
.charm[data-cv="b"] .charm__em{display:inline-block;font-weight:900;font-size:1.18em;color:var(--rose-deep);
  background:linear-gradient(transparent 56%,rgba(255,179,212,.7) 56%);padding:0 .1em;
  -webkit-mask:none;mask:none;}
.charm[data-cv="b"].seen .charm__em{animation:emPop .6s cubic-bezier(.2,.8,.3,1.3) var(--emd,1.5s) both;}
.charm[data-cv="b"] .charm__leadbig{position:relative;}
.charm[data-cv="b"].seen .charm__leadbig::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-2px;
  height:8px;border-radius:4px;background:rgba(149,200,238,.6);z-index:-1;
  animation:wipeBar .7s ease 1.4s both;}
@keyframes wipeBar{from{transform:scaleX(0);transform-origin:left;}to{transform:scaleX(1);}}

/* =====================================================
   C — FOCUS PULL : each line blurs in + slight scale
   ===================================================== */
.charm[data-cv="c"] .cl{opacity:0;filter:blur(8px);transform:scale(.97);
  transition:opacity .55s ease,filter .6s ease,transform .6s ease;}
.charm[data-cv="c"].seen .cl{opacity:1;filter:blur(0);transform:none;}
.charm[data-cv="c"] .charm__em{font-size:1.34em;
  background:linear-gradient(120deg,#FF8FC0,#D81E72 60%,#C79BF2);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 10px rgba(216,30,114,.3));}
.charm[data-cv="c"].seen .charm__em{animation:emZoom .7s cubic-bezier(.2,.8,.3,1.2) var(--emd,1.5s) both;}
@keyframes emZoom{0%{transform:scale(.6);opacity:0;filter:blur(6px);}100%{transform:scale(1);opacity:1;filter:blur(0);}}

/* staggered delays (shared across variants) */
.charm .cl:nth-child(1){transition-delay:.05s;}
.charm .cl:nth-child(2){transition-delay:.20s;}
.charm .cl:nth-child(3){transition-delay:.35s;}
.charm .cl:nth-child(4){transition-delay:.50s;}
.charm .cl:nth-child(5){transition-delay:.65s;}
.charm .cl:nth-child(6){transition-delay:.80s;}
.charm .cl:nth-child(7){transition-delay:.95s;}
.charm .cl:nth-child(8){transition-delay:1.10s;}
.charm__lead .cl:nth-child(1){transition-delay:1.30s;}
.charm__lead .cl:nth-child(2){transition-delay:1.45s;}

@media (prefers-reduced-motion:reduce){
  .charm .cl{opacity:1!important;transform:none!important;filter:none!important;
    -webkit-mask:none!important;mask:none!important;}
  .charm__rail i,.charm[data-cv="a"].seen .charm__em,.charm[data-cv="c"].seen .charm__em,
  .csv1__mouse i,.csv2__chev i,.csv3__track i{animation:none;}
}