/* =====================================================================
   GOATS motion layer — intro, reveals, tilt, magnetic buttons, confetti
   ===================================================================== */
:root{--pink:#ff5fa2;--sun:#ffd400;--ease:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.7,0,.2,1);--spring:cubic-bezier(.3,1.6,.5,1)}
.tool{height:auto}
.btn{transition:transform .15s,background .2s,opacity .2s,translate .35s var(--ease)}

/* ---------- intro ---------- */
.intro{display:none}
.anim .intro{position:fixed;inset:0;z-index:300;background:#0a0a0a;display:grid;place-items:center;pointer-events:none;animation:introOut .75s var(--ease-io) 1s forwards}
.intro-inner{display:grid;justify-items:center;gap:16px}
.intro img{width:min(240px,56vw);animation:introLogo .9s var(--ease) both}
.intro span{font:600 11px/1 Poppins,sans-serif;letter-spacing:.42em;color:#9d9d99;animation:introTag 1s var(--ease) .2s both}
.intro i{display:block;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--hl),var(--pink),var(--sun));transform-origin:0 50%;animation:introBar .9s var(--ease-io) .1s both}
@keyframes introLogo{from{opacity:0;transform:translateY(26px) scale(.9);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes introTag{from{opacity:0;letter-spacing:1.1em}to{opacity:1}}
@keyframes introBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes introOut{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--hl),var(--pink),var(--sun));pointer-events:none}
[dir=rtl] .progress{transform-origin:100% 50%}

/* ---------- cursor ring (mouse only) ---------- */
.cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;z-index:400;display:grid;place-items:center;mix-blend-mode:difference;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,opacity .3s}
.cursor span{font:700 9px/1 Poppins,sans-serif;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .2s}
.cursor.on{opacity:1}
.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:#fff}
.cursor.label{width:74px;height:74px;margin:-37px 0 0 -37px;background:#fff}
.cursor.label span{opacity:1;color:#000}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- hero ---------- */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--cx,72%) var(--cy,35%),rgba(139,123,255,.16),transparent 62%);transition:background .2s}
.hero .wrap{z-index:1}
.hero h1 .w{display:inline-block}
.anim .hero h1 .w{animation:wordIn .9s var(--ease) both;animation-delay:calc(var(--base,1.05s) + var(--i) * 80ms)}
@keyframes wordIn{from{opacity:0;transform:translateY(.55em) rotate(7deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.anim .hero .eyebrow,.anim .hero .lead,.anim .hero-ctas,.anim .hero-points{animation:fadeUp .9s var(--ease) both}
.hero .eyebrow{animation-delay:.95s}.hero .lead{animation-delay:1.45s}.hero-ctas{animation-delay:1.6s}.hero-points{animation-delay:1.75s}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes photoIn{from{opacity:0;clip-path:inset(14% 14% 14% 14% round 28px);transform:scale(1.08) rotate(2deg)}to{opacity:1;clip-path:inset(-60px -60px -60px -60px round 28px);transform:none}}
@keyframes float{50%{transform:translateY(-10px) rotate(-2deg)}}
.hl{background:linear-gradient(90deg,#fff 0%,var(--hl) 25%,var(--pink) 50%,#fff 75%,var(--hl) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-300% 0}}

/* spinning sticker badge */
.spin-badge{position:absolute;top:-36px;inset-inline-start:-36px;width:122px;height:122px;display:grid;place-items:center;z-index:3;background:#0a0a0a;border-radius:50%;border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.5);translate:calc(var(--mx,0) * -20px) calc(var(--my,0) * -20px);transition:translate .4s var(--ease)}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.spin-badge text{font:700 10.4px Poppins,sans-serif;letter-spacing:.2em;fill:#fff}
.spin-badge b{font-size:36px;line-height:1;animation:wobble 2.6s ease-in-out infinite}
@keyframes spin{to{rotate:360deg}}
@keyframes wobble{0%,100%{rotate:0deg}50%{rotate:-14deg;scale:1.12}}

/* ---------- crossing tapes marquee ---------- */
.tapes{position:relative;height:170px;overflow:hidden;margin-block:6px}
.tapes .marquee{position:absolute;left:-8%;right:-8%;top:50%;border:0;padding:15px 0}
.tapes .m1{background:var(--hl);color:#0a0a0a;transform:translateY(-50%) rotate(-3.5deg);z-index:2;box-shadow:0 12px 40px rgba(139,123,255,.35)}
.tapes .m2{background:#f4f4f2;color:#0a0a0a;transform:translateY(-50%) rotate(3deg)}
.tapes .m2 .track{animation-direction:reverse;animation-duration:55s}
.tapes .track i{color:#0a0a0a}
.tapes:hover .track{animation-play-state:paused}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;translate:0 36px;scale:.96;filter:blur(6px);transition:opacity .9s var(--ease),translate .9s var(--ease),scale .9s var(--ease),filter .9s var(--ease),transform .3s var(--ease),border-color .2s;transition-delay:var(--d,0ms)}
.rv.in{opacity:1;translate:0 0;scale:1;filter:none}
.sec-head h2{background:linear-gradient(90deg,var(--hl),var(--pink)) no-repeat 0 100%/0 3px;padding-bottom:6px;transition:background-size 1s var(--ease) .3s}
[dir=rtl] .sec-head h2{background-position:100% 100%}
.sec-head.seen h2,.sec-head:not(.rv) h2{background-size:72px 3px}

/* ---------- tilt + glare cards (mouse only) ---------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .45s var(--ease),border-color .2s;will-change:transform;position:relative}
.tilt.hovering{--ty:-6px;transition:transform .1s linear,border-color .2s}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity .3s}
.tilt.hovering::after{opacity:1}
.work-grid figure,.look-grid figure{position:relative}

/* ---------- buttons: shine sweep ---------- */
.btn-primary::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(139,123,255,.45) 48%,rgba(255,95,162,.35) 55%,transparent 70%);translate:-130% 0;transition:translate .8s var(--ease)}
.btn-primary:hover::after{translate:130% 0}
.btn.wa::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}

/* ---------- studio micro-interactions ---------- */
.stage-svg.swap > *{animation:swapIn .55s var(--ease) both}
@keyframes swapIn{from{opacity:0;transform:scale(.93) translateY(12px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.layer.pop{animation:popIn .6s var(--spring) both}
@keyframes popIn{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
.tabs button.on,.chip.on,.sizes button.on,.style-seg button.on,.ptype button.on,.sw.on{animation:tapPop .4s var(--spring)}
@keyframes tapPop{from{scale:.88}to{scale:1}}
.idea,.ptype button,.sw,.chip,.sizes button{transition:transform .2s var(--ease),border-color .2s,background .2s}
.idea:hover,.ptype button:hover{transform:translateY(-3px) rotate(-1deg)}
.sw:hover{transform:scale(1.15)}

/* ---------- cart feedback ---------- */
.icon-btn.wiggle{animation:wiggle .7s var(--ease)}
@keyframes wiggle{20%{rotate:-16deg;scale:1.18}40%{rotate:12deg}60%{rotate:-8deg}80%{rotate:4deg}100%{rotate:0deg;scale:1}}
.badge.bump{animation:bump .6s var(--spring)}
@keyframes bump{from{scale:.3}to{scale:1}}
.fly{position:fixed;z-index:260;pointer-events:none;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);object-fit:cover}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:280}
.toast.show{animation:toastIn .55s var(--spring)}
@keyframes toastIn{from{scale:.7}to{scale:1}}
.anim .fab-wa{animation:fabIn .8s var(--spring) 2.2s both}
.fab-wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);animation:ping 2.4s ease-out 3s infinite;pointer-events:none}
@keyframes fabIn{from{scale:0;rotate:-40deg}to{scale:1;rotate:0deg}}
@keyframes ping{from{opacity:.8;scale:1}to{opacity:0;scale:1.6}}

/* ---------- checkout: transfer screenshot + done state ---------- */
.shot{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--hl);border-radius:14px;padding:12px;cursor:pointer;background:rgba(139,123,255,.06);transition:background .2s,border-color .2s}
.shot:hover{background:rgba(139,123,255,.12)}
.shot.done{border-style:solid;border-color:#2ecc71;background:rgba(46,204,113,.08)}
.shot img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none}
.shot img:not([hidden]) + .shot-ic{display:none}
.shot-ic{font-size:26px;flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:10px;background:var(--card2)}
.shot-txt{display:grid;gap:2px;min-width:0}
.shot-txt b{font-size:14px}
.shot-txt small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.shot.shake{animation:shake .5s}
@keyframes shake{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}
#coStatus:empty{display:none}
.co-done{display:grid;gap:10px;animation:fadeUp .6s var(--ease) both}
.done-head{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.4)}
.done-head h4{margin:0 0 2px;font-size:16px}
.done-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#2ecc71;color:#04200f;font-weight:800;font-size:20px;animation:popIn .6s var(--spring) both}
.co-done .btn.wa{animation:pulseWa 1.8s ease-in-out 1s infinite}
@keyframes pulseWa{50%{box-shadow:0 0 0 8px rgba(37,211,102,.18)}}

@media (max-width:640px){
  .spin-badge{width:92px;height:92px;top:-22px;inset-inline-start:6px}
  .spin-badge text{font-size:10px}
  .spin-badge b{font-size:28px}
  .tapes{height:130px}
  .tapes .marquee{padding:11px 0}
  .tapes .track{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  .intro,.cursor{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;translate:none;scale:1;filter:none}
}