/* MaamVerse premium form polish (V221) — shared by Make it myself, Request a Wish and the other forms.
   CSS only: no fonts, no images, no scripts. Every animation switches off with "reduce motion". */
@keyframes mvRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mvPop{0%{transform:scale(.975)}55%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes mvBump{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}
@keyframes mvShine{to{background-position:200% 0}}
@keyframes mvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes mvDrift{0%,100%{transform:translateX(-50%);opacity:.55}50%{transform:translateX(-48%);opacity:.9}}
@keyframes mvSweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.wrap{isolation:isolate;overflow-x:clip}
/* hero */
h1.pf-h1{position:relative;background-size:220% 100%;background-image:linear-gradient(90deg,#bcd9ff,#fff,#d9c8ff,#bcd9ff);animation:mvShine 9s linear infinite}
h1.pf-h1:before{content:"";position:absolute;left:50%;top:-34px;width:min(380px,78vw);height:150px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(130,140,255,.42),rgba(130,140,255,0));filter:blur(6px);z-index:-1;pointer-events:none;animation:mvDrift 10s ease-in-out infinite}

/* cards and steps come in softly */
form .card,.done.card{animation:mvRise .5s cubic-bezier(.2,.7,.2,1) both}
.sec{margin:0 0 22px;animation:mvRise .55s cubic-bezier(.2,.7,.2,1) both}
.sec:nth-child(2){animation-delay:.07s}.sec:nth-child(3){animation-delay:.14s}.sec:nth-child(4){animation-delay:.21s}.sec:nth-child(5){animation-delay:.28s}.sec:nth-child(6){animation-delay:.35s}
.sec:last-child{margin-bottom:6px}

/* section headers */
.sech{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.sech .ic{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:22px;line-height:1;background:linear-gradient(135deg,rgba(111,181,255,.3),rgba(143,111,255,.3));border:1px solid rgba(160,180,255,.38);box-shadow:0 8px 22px rgba(80,100,255,.25)}
.sech b,.sech h3{display:block;margin:0;font-size:16px;line-height:1.25;color:#fff;letter-spacing:.1px;text-transform:none}
.sech small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--mut,#9fb0d6);font-weight:400}
.sec[data-g=login] .ic,.sech[data-g=login] .ic{background:linear-gradient(135deg,rgba(255,210,122,.34),rgba(255,140,110,.26));border-color:rgba(255,210,122,.45)}
.sec[data-g=surprise] .ic,.sec[data-g=games] .ic,.sec[data-g=story] .ic,.sec[data-g=heart] .ic,.sech[data-g=surprise] .ic{background:linear-gradient(135deg,rgba(255,120,190,.32),rgba(143,111,255,.34));border-color:rgba(255,150,210,.45)}
.sec[data-g=media] .ic,.sech[data-g=media] .ic{background:linear-gradient(135deg,rgba(90,200,255,.32),rgba(80,120,255,.3))}
.sec[data-g=open] .ic,.sec[data-g=extras] .ic,.sech[data-g=days] .ic{background:linear-gradient(135deg,rgba(90,230,180,.3),rgba(70,160,255,.28));border-color:rgba(120,230,190,.42)}
.sec[data-g=base] .ic{background:linear-gradient(135deg,rgba(120,230,170,.3),rgba(60,180,140,.26))}

/* options: lift, glow, pop */
.opt{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.opt:hover{transform:translateY(-1px);border-color:rgba(160,180,255,.55)}
.opt.sel,.opt:has(input:checked){box-shadow:0 10px 30px rgba(70,110,255,.24)}
.opt.sel:not(.inc),.opt:has(input:checked){animation:mvPop .3s ease}
.opt.inc{border-color:rgba(255,210,122,.4)}
.opt.inc>.oh{flex-wrap:wrap}
.opt.inc>.oh>.pr{flex:0 0 100%;order:-1;margin:0 0 -2px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold,#ffd27a)}

/* login page picker with little previews */
.styles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;gap:10px!important}
.styles label{position:relative;padding:8px 8px 10px!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.styles label:hover{transform:translateY(-2px)}
.styles input:checked+label{box-shadow:0 12px 30px rgba(70,110,255,.3)}
.styles input:checked+label:after{content:"✓";position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2a7bff,#6a45e0);animation:mvPop .3s ease}
.lp{display:grid;place-items:center;width:100%;height:58px;margin:0 0 6px;border-radius:11px;font-size:26px;line-height:1;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.lp.lpm{width:46px;height:46px;margin:0;font-size:21px;flex:none}
.lp-classic{background:radial-gradient(circle at 50% 78%,rgba(255,190,90,.6),rgba(255,190,90,0) 62%),#10142e}
.lp-eyes{background:radial-gradient(circle at 50% 50%,rgba(120,110,255,.25),rgba(0,0,0,0) 65%),#080812}
.lp-moon{background:radial-gradient(circle at 70% 30%,rgba(190,210,255,.4),rgba(0,0,0,0) 55%),linear-gradient(160deg,#0f1b46,#2a1c5c)}
.lp-envelope{background:linear-gradient(160deg,#27365f,#1a2342)}
.lp-clean{background:linear-gradient(160deg,#eef3ff,#c9d6ff);color:#24305e;font-size:18px;letter-spacing:3px;font-weight:800}
.styles input:checked+label .lp>span{display:inline-block;animation:mvFloat 3s ease-in-out infinite}

/* story photo cards */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
@media(min-width:700px){.sgrid{grid-template-columns:repeat(3,1fr)}}
.spc{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.spc .pz{position:relative;display:grid;place-items:center;align-content:center;gap:2px;aspect-ratio:4/3;width:100%;padding:0;border-radius:14px;border:1.5px dashed rgba(130,170,255,.5);background:#0c1530;color:#cfe0ff;font:inherit;font-size:13px;cursor:pointer;overflow:hidden;transition:border-color .18s ease,transform .18s ease}
.spc .pz:hover{border-color:var(--ac,#6fb5ff);transform:translateY(-1px)}
.spc .pz .plus{font-size:28px;line-height:1;color:#8bb8ff}
.spc .pz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.spc.has .pz{border-style:solid;border-color:rgba(130,200,255,.6)}
.spc.has .pz .plus,.spc.has .pz .pl{display:none}
.spc .rm{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;font:inherit;font-size:14px;cursor:pointer;display:none}
.spc .rm:before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(0,0,0,.6);z-index:-1}
.spc.has .rm{display:grid;place-items:center;z-index:1}
.spc input[type=text]{min-height:42px;padding:8px 10px;font-size:14px}

/* totals tick up */
.bump{display:inline-block;animation:mvBump .38s ease}

/* main button shine */
.go{position:relative;overflow:hidden}
.go:not([disabled]):after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 65%);transform:translateX(-120%);animation:mvSweep 4s ease-in-out infinite;pointer-events:none}

/* dark autofill (no more white boxes) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:#eaf0ff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #0c1530 inset;box-shadow:0 0 0 1000px #0c1530 inset;border-color:rgba(130,170,255,.4);transition:background-color 99999s ease-out}

@media(prefers-reduced-motion:reduce){
  h1.pf-h1,h1.pf-h1:before,form .card,.done.card,.sec,.opt,.opt.sel:not(.inc),.opt:has(input:checked),.styles label,.styles input:checked+label:after,.styles input:checked+label .lp>span,.spc .pz,.bump,.go:not([disabled]):after{animation:none!important;transition:none!important}
  .opt:hover,.styles label:hover,.spc .pz:hover{transform:none}
}

/* V223: 7 steps — only the current step shows its name */
.steps.many .st:not(.on) span{display:none}.steps.many .st{padding:0 12px}
.lay>*{min-width:0}
.lay>.cw{width:100%}