/* ==========================================================================
   MACROS. — motion, sound UI, launch pricing, auth and newsletter
   Loaded after style.css. Everything here degrades under prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------- magnetic buttons + tilt --- */
.btn,.add,.cart-btn{transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn .lbl{transition:transform .25s var(--ease);display:inline-block;position:relative;z-index:2}
.p-card,.card{transform-style:preserve-3d;will-change:transform}

/* --------------------------------------------------------- click ripple --- */
.btn,.add,.chip,.tab,.cart-btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:1;transform:scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 62%);
  animation:rip .62s var(--ease) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ------------------------------------------------------ cursor follower --- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--volt);mix-blend-mode:difference}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(200,255,60,.55);
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.cur-ring.on{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(200,255,60,.09);border-color:var(--volt)}
@media (pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* ------------------------------------------------------ scroll progress --- */
.scroll-bar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--volt);z-index:995;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ------------------------------------------------------ page transition --- */
.veil{position:fixed;inset:0;z-index:9998;background:var(--ink);pointer-events:none;
  transform:translateY(100%);display:grid;place-items:center}
.veil-mark{display:flex;gap:8px;align-items:flex-end;opacity:0}
.veil-mark i{display:block;width:14px;border-radius:4px;background:var(--chalk)}
.veil-mark i:nth-child(1){height:20px;background:var(--ember)}
.veil-mark i:nth-child(2){height:34px}
.veil-mark i:nth-child(3){height:52px;background:var(--volt)}
body.page-out .veil{transform:translateY(0);transition:transform .5s var(--ease);pointer-events:auto}
body.page-out .veil-mark{opacity:1;transition:opacity .3s .22s}
body.page-in .veil{transform:translateY(-100%);transition:transform .6s var(--ease) .05s}

/* ------------------------------------------------- split-word headlines --- */
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w>span{display:inline-block;transform:translateY(110%);animation:wUp .8s var(--ease) forwards}
@keyframes wUp{to{transform:translateY(0)}}

/* ------------------------------------------------- confirmation overlay --- */
.confirm{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:24px;
  background:rgba(5,6,8,.82);backdrop-filter:blur(14px);opacity:0;transition:opacity .4s var(--ease)}
.confirm.on{opacity:1}
.confirm-card{position:relative;z-index:2;width:min(460px,100%);text-align:center;padding:44px 34px;
  border-radius:var(--r-xl);border:1px solid var(--stroke-2);background:rgba(16,18,22,.96);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);transform:scale(.9) translateY(20px);
  transition:transform .55s var(--ease)}
.confirm.on .confirm-card{transform:none}
.confirm h3{font-size:1.6rem;margin-bottom:10px}
.confirm .big{font-family:var(--head);font-size:1.15rem;color:var(--volt);margin-bottom:6px}
.confirm .sub{color:var(--ash);font-size:.9rem;margin-bottom:26px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:1}

.tickwrap{width:104px;height:104px;margin:0 auto 22px;display:block}
.tick-ring{fill:none;stroke:var(--volt);stroke-width:5;stroke-dasharray:327;stroke-dashoffset:327;
  transform:rotate(-90deg);transform-origin:60px 60px;animation:drawRing .7s var(--ease) .15s forwards}
.tick-path{fill:none;stroke:var(--volt);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:80;stroke-dashoffset:80;animation:drawTick .45s var(--ease) .65s forwards}
@keyframes drawRing{to{stroke-dashoffset:0}}
@keyframes drawTick{to{stroke-dashoffset:0}}

/* ------------------------------------------ launch pricing / strike-out --- */
.price .was{font-family:var(--mono);font-size:.82rem;color:var(--ash-2);text-decoration:line-through;
  text-decoration-color:var(--ember);text-decoration-thickness:2px;margin-right:8px;font-weight:400}
.price .now{color:var(--chalk)}
.save{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  padding:3px 8px;border-radius:100px;background:var(--ember);color:#fff;margin-left:8px;vertical-align:2px}
.p-tag.deal{background:var(--ember);color:#fff;border-color:var(--ember);font-weight:700}

/* ------------------------------------------------------- sound toggle ---- */
.snd{width:40px;height:40px;border-radius:50%;border:1px solid var(--stroke);background:var(--glass);
  cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease);flex-shrink:0;color:var(--ash)}
.snd:hover{border-color:var(--volt);color:var(--volt);transform:translateY(-2px)}
html[data-sound="on"] .snd{border-color:rgba(200,255,60,.45);color:var(--volt)}
.eq{display:flex;gap:2.5px;align-items:flex-end;height:13px}
.eq i{width:2.5px;background:currentColor;border-radius:2px;height:4px;transition:height .3s}
html[data-sound="on"] .eq i{animation:eq .9s ease-in-out infinite alternate}
html[data-sound="on"] .eq i:nth-child(2){animation-delay:.15s}
html[data-sound="on"] .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{to{height:13px}}

/* -------------------------------------------------------------- auth ----- */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.auth-wrap{min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 40px) 0 60px}
.auth{width:min(460px,92vw);position:relative}
.auth-card{position:relative;padding:38px 34px;border-radius:var(--r-xl);
  border:1px solid var(--stroke-2);background:rgba(16,18,22,.72);
  backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:0 40px 110px -34px rgba(0,0,0,.9)}
.auth-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a),transparent 0 62%,rgba(200,255,60,.8) 76%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinBorder 5s linear infinite;pointer-events:none}
@keyframes spinBorder{to{--a:360deg}}
.auth-head{text-align:center;margin-bottom:28px}
.auth-head img{height:32px;margin:0 auto 16px}
.auth-head h2{font-size:1.7rem;margin-bottom:8px}
.auth-head p{color:var(--ash);font-size:.92rem;margin:0}
.auth-switch{text-align:center;margin-top:22px;font-size:.9rem;color:var(--ash)}
.auth-switch a{color:var(--volt);text-decoration:underline;text-underline-offset:3px}
.auth-sep{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--ash-2);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.16em;font-family:var(--mono)}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--stroke)}

/* floating-label field */
.ff{position:relative;margin-bottom:20px}
.ff input,.ff select{width:100%;padding:22px 16px 9px;border-radius:var(--r-s);border:1px solid var(--stroke);
  background:rgba(255,255,255,.045);font-size:.98rem;transition:.3s var(--ease)}
.ff label{position:absolute;left:16px;top:15px;color:var(--ash);font-size:.95rem;pointer-events:none;
  transition:.25s var(--ease);text-transform:none;letter-spacing:0;margin:0}
.ff input:focus,.ff select:focus{outline:none;border-color:var(--volt);background:rgba(200,255,60,.05);
  box-shadow:0 0 0 4px rgba(200,255,60,.1)}
.ff input:focus+label,.ff input:not(:placeholder-shown)+label,.ff select+label{
  top:7px;font-size:.64rem;color:var(--volt);letter-spacing:.1em;text-transform:uppercase}
.ff select{padding-top:24px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 4px),calc(100% - 14px) calc(50% + 4px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.ff select option{background:var(--ink-2);color:var(--chalk)}
.ff input.bad{border-color:var(--ember);box-shadow:0 0 0 4px rgba(255,106,61,.12);animation:shake .4s}

/* -------------------------------------------------------- newsletter ----- */
.news{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(34px,5vw,60px);
  border:1px solid var(--stroke-2);background:rgba(255,255,255,.045);backdrop-filter:blur(var(--blur))}
.news::before{content:'';position:absolute;width:60%;aspect-ratio:1;border-radius:50%;top:-30%;right:-15%;
  background:radial-gradient(circle,rgba(200,255,60,.22),transparent 66%);pointer-events:none}
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;position:relative;z-index:2}
.news h2{margin-bottom:14px}
.news p{color:var(--ash)}
.news-form{display:flex;gap:10px;margin-top:24px}
.news-form .input{flex:1}
.news-perks{list-style:none;padding:0;margin:22px 0 0}
.news-perks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;color:var(--ash);font-size:.94rem}
.news-perks b{color:var(--chalk);font-family:var(--head);display:block;margin-bottom:2px}
.news-perks .n{font-family:var(--mono);color:var(--volt);font-size:.74rem;flex-shrink:0;
  border:1px solid rgba(200,255,60,.3);border-radius:8px;padding:4px 9px}
@media (max-width:860px){.news-grid{grid-template-columns:1fr}.news-form{flex-direction:column}}

/* ---------------------------------------------------- reduced motion ----- */
@media (prefers-reduced-motion:reduce){
  .cur-dot,.cur-ring,.veil,.scroll-bar,.confetti{display:none!important}
  .ripple,.w>span,.tick-ring,.tick-path,.eq i,.auth-card::before{animation:none!important}
  .w>span{transform:none}
  .tick-ring,.tick-path{stroke-dashoffset:0}
}