/* Hypeman Studio motion kit: base + effect styles.
   Theme with the custom properties below. Everything is transform/opacity only and reduced-motion safe. */
:root {
  --kit-accent: #e8196c;
  --kit-accent-ink: #fff;
  --kit-accent-2: #ffd43b;
  --kit-ink: #1c1020;
  --kit-paper: #fffaf3;
  --kit-muted: #5e4b5a;
  --kit-line: rgb(28 16 32 / .14);
  --kit-radius: 18px;
  --kit-ease: cubic-bezier(.2, .8, .2, 1);
  --kit-ease-out: cubic-bezier(.16, 1, .3, 1);
  --kit-spring: cubic-bezier(.34, 1.56, .64, 1);
  --kit-dur: .8s;
  --kit-focus: var(--kit-ink);
  --kit-font-label: inherit;
  --kit-z: 60;
}

/* ---------- utilities ---------- */
.kit-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em; border: 2px solid var(--kit-ink); border-radius: 999px;
  background: var(--kit-accent); color: var(--kit-accent-ink); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: transform .25s var(--kit-spring), box-shadow .25s;
  box-shadow: 0 4px 0 var(--kit-ink);
}
.kit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--kit-ink); }
.kit-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--kit-ink); }
.kit-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.kit-btn--ghost { background: transparent; color: var(--kit-ink); }
.kit-btn:focus-visible, .kit-cart :focus-visible, .kit-quiz :focus-visible, .kit-wa:focus-visible,
.kit-ba__range:focus-visible + .kit-ba__ui .kit-ba__handle {
  outline: 3px solid var(--kit-focus); outline-offset: 3px;
}
html.kit-lock { overflow: hidden; }

/* ---------- reveal ---------- */
.kit-pending, .kit-in, .kit-in[data-reveal=stagger] > *, .kit-pending[data-reveal=stagger] > * {
  transition: opacity var(--kit-dur) var(--kit-ease-out), translate var(--kit-dur) var(--kit-ease-out),
    scale var(--kit-dur) var(--kit-ease-out), clip-path var(--kit-dur) var(--kit-ease-out);
  transition-delay: calc(var(--kit-delay, 0ms) + var(--i, 0) * var(--kit-stagger, 80ms));
}
.kit-js .kit-pending { opacity: 0; translate: 0 var(--kit-reveal-y, 32px); }
.kit-js .kit-pending[data-reveal=fade] { translate: none; }
.kit-js .kit-pending[data-reveal=scale] { translate: none; scale: .9; }
.kit-js .kit-pending[data-reveal=left] { translate: -48px 0; }
.kit-js .kit-pending[data-reveal=right] { translate: 48px 0; }
.kit-js .kit-pending[data-reveal=mask] { opacity: 1; translate: none; clip-path: inset(0 0 100% 0); }
.kit-in[data-reveal=mask] { clip-path: inset(0); }
.kit-js .kit-pending[data-reveal=stagger] { opacity: 1; translate: none; }
.kit-js .kit-pending[data-reveal=stagger] > * { opacity: 0; translate: 0 24px; }
@media print { .kit-pending, .kit-pending > * { opacity: 1 !important; translate: none !important; clip-path: none !important; } }

/* ---------- marquee ---------- */
[data-kit~=marquee] { display: flex; overflow: hidden; white-space: nowrap; gap: var(--kit-marquee-gap, 2rem); }
.kit-marquee { gap: 0; }
.kit-marquee__track { display: flex; width: max-content; }
.kit-marquee__group { display: flex; flex: none; align-items: center; gap: var(--kit-marquee-gap, 2rem); padding-inline-end: var(--kit-marquee-gap, 2rem); }
.kit-run .kit-marquee__track { animation: kit-marquee var(--kit-marquee-dur, 30s) linear infinite; }
.kit-marquee--rev .kit-marquee__track { animation-direction: reverse; }
.kit-run:hover .kit-marquee__track, .kit-run:focus-within .kit-marquee__track,
.kit-off .kit-marquee__track, .kit-paused .kit-marquee__track { animation-play-state: paused; }
@keyframes kit-marquee { to { transform: translate3d(var(--kit-shift, -50%), 0, 0); } }

/* ---------- sticker ---------- */
[data-kit~=sticker] {
  position: relative; display: grid; place-items: center; flex: none; aspect-ratio: 1;
  width: var(--kit-sticker-size, 9rem); border-radius: 50%; overflow: clip; /* rotating square ring never adds scroll overflow */
  background: var(--kit-sticker-bg, var(--kit-accent-2)); color: var(--kit-sticker-ink, var(--kit-ink));
}
.kit-sticker__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  animation: kit-spin var(--kit-spin-dur, 16s) linear infinite var(--kit-spin-dir, normal); }
.kit-sticker__ring text { font: 700 17px/1 var(--kit-font-label); letter-spacing: .08em; text-transform: uppercase; fill: currentColor; }
.kit-sticker.kit-off .kit-sticker__ring, .kit-paused .kit-sticker__ring { animation-play-state: paused; }
@keyframes kit-spin { to { rotate: 1turn; } }

/* ---------- float (CSS only) ---------- */
[data-kit~=float] { animation: kit-bob var(--float-dur, 5s) ease-in-out var(--float-delay, 0s) infinite alternate; }
[data-float=drift] { animation-name: kit-drift; }
[data-float=spin] { animation: kit-spin var(--float-dur, 24s) linear infinite; }
[data-float=wobble] { animation-name: kit-wobble; }
.kit-paused [data-kit~=float] { animation-play-state: paused; }
@keyframes kit-bob { from { translate: 0 0; rotate: calc(var(--float-rot, 4deg) * -1); } to { translate: 0 calc(var(--float-y, 16px) * -1); rotate: var(--float-rot, 4deg); } }
@keyframes kit-drift { 0% { translate: 0 0; } 50% { translate: var(--float-x, 12px) calc(var(--float-y, 16px) * -1); } 100% { translate: calc(var(--float-x, 12px) * -1) calc(var(--float-y, 16px) * -.5); } }
@keyframes kit-wobble { from { rotate: calc(var(--float-rot, 6deg) * -1); scale: 1; } to { rotate: var(--float-rot, 6deg); scale: 1.04; } }

/* ---------- kinetic ---------- */
.kit-js [data-kinetic=strike] del, .kit-js [data-kinetic=strike] s { text-decoration: none; }
[data-kinetic=strike] del, [data-kinetic=strike] s { position: relative; display: inline-block; color: inherit; }
[data-kinetic=strike] ins { display: inline-block; text-decoration: none; }
.kit-strike__line { position: absolute; left: -6%; top: 30%; width: 112%; height: 45%; overflow: visible; pointer-events: none; }
.kit-strike__line path { fill: none; stroke: var(--kit-strike, var(--kit-accent)); stroke-width: 3.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.kit-strike__line path + path { stroke-width: 2.2; opacity: .85; }
.kit-go .kit-strike__line path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--kit-ease) .05s; }
.kit-go .kit-strike__line path + path { transition-delay: .4s; transition-duration: .35s; }
.kit-strike.kit-go ins { animation: kit-stamp .7s var(--kit-spring) .8s both; }
@keyframes kit-stamp { 0% { scale: 1; rotate: 0deg; } 40% { scale: 1.14; rotate: -3deg; } 100% { scale: 1; rotate: 0deg; } }

[data-kinetic=highlight] {
  color: inherit; background: linear-gradient(var(--kit-highlight, var(--kit-accent-2)), var(--kit-highlight, var(--kit-accent-2))) no-repeat 0 88% / 100% 42%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .08em;
}
.kit-js .kit-hl { background-size: 0% 42%; transition: background-size .9s var(--kit-ease-out); }
.kit-js .kit-hl.kit-go { background-size: 100% 42%; }

.kit-w { display: inline-block; overflow: clip; overflow-clip-margin: .25em; vertical-align: top; padding-block: .04em; }
.kit-wi { display: inline-block; }
.kit-split-wait .kit-wi { translate: 0 115%; }
.kit-split-wait.kit-go .kit-wi { translate: none; transition: translate .9s var(--kit-ease-out); transition-delay: calc(var(--i) * var(--kit-split-step, 70ms)); }

.kit-rot { display: inline-grid; vertical-align: bottom; text-align: start; }
.kit-rot > span { grid-area: 1 / 1; opacity: 0; translate: 0 60%; transition: translate .55s var(--kit-spring), opacity .3s; }
.kit-rot > .is-on { opacity: 1; translate: none; }
.kit-rot > .is-out { opacity: 0; translate: 0 -60%; transition-timing-function: var(--kit-ease); }

/* ---------- tilt + magnetic ---------- */
.kit-tilt { transform: perspective(900px) rotateX(var(--kit-rx, 0)) rotateY(var(--kit-ry, 0)) scale(var(--kit-ts, 1));
  transition: transform .7s var(--kit-ease-out); transform-style: preserve-3d; }
.kit-tilt-on { --kit-ts: var(--kit-tilt-scale, 1.03); transition-duration: .15s; will-change: transform; }
.kit-tilt .kit-depth { transform: translateZ(var(--kit-depth, 40px)); }
.kit-glare { position: relative; }
.kit-glare::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--kit-gx, 50%) var(--kit-gy, 50%), rgb(255 255 255 / .55), transparent 55%);
  mix-blend-mode: soft-light; transition: opacity .4s; }
.kit-tilt-on.kit-glare::after { opacity: 1; }
.kit-mag { translate: var(--kit-mx, 0) var(--kit-my, 0); transition: translate .6s var(--kit-spring); }
.kit-mag-on { transition-duration: .15s; transition-timing-function: linear; }

/* ---------- counter ---------- */
[data-kit~=counter] { font-variant-numeric: tabular-nums; }
.kit-count { display: inline-block; }

/* ---------- before / after ---------- */
[data-kit~=before-after] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kit-ba { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; border-radius: var(--kit-radius); }
.kit-ba > * { grid-area: 1 / 1; }
.kit-ba > img { width: 100%; height: 100%; object-fit: cover; }
.kit-ba__after { clip-path: inset(0 0 0 var(--kit-ba, 50%)); }
.kit-ba__range { position: relative; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.kit-ba__ui { position: relative; z-index: 1; pointer-events: none; }
.kit-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--kit-ba, 50%); width: 4px; margin-left: -2px; background: var(--kit-paper); box-shadow: 0 0 0 1px var(--kit-line); }
.kit-ba__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px;
  translate: -50% -50%; border-radius: 50%; background: var(--kit-paper); color: var(--kit-ink); font: 700 22px/1 system-ui, sans-serif;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.kit-ba__tag { position: absolute; top: 1rem; left: 1rem; padding: .3em .8em; border-radius: 999px; background: var(--kit-ink); color: var(--kit-paper);
  font: 700 .8rem/1.2 var(--kit-font-label); letter-spacing: .06em; text-transform: uppercase; }
.kit-ba__tag--r { left: auto; right: 1rem; background: var(--kit-accent); color: var(--kit-accent-ink); }

/* ---------- quiz ---------- */
.kit-quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kit-quiz fieldset:focus { outline: none; }
.kit-quiz legend { padding: 0; margin-bottom: 1rem; font-weight: 800; font-size: 1.5em; line-height: 1.15; }
.kit-quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.kit-quiz__opt { position: relative; display: block; cursor: pointer; }
.kit-quiz__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kit-quiz__opt span { display: flex; align-items: center; gap: .6em; min-height: 56px; height: 100%; padding: .85em 1.1em; border: 2px solid var(--kit-ink);
  border-radius: var(--kit-radius); background: var(--kit-paper); color: var(--kit-ink); font-weight: 700;
  transition: transform .25s var(--kit-spring), background-color .2s, box-shadow .2s; }
.kit-quiz__opt span i { font-style: normal; font-size: 1.5em; }
.kit-quiz__opt:hover span { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 5px 0 var(--kit-ink); }
.kit-quiz__opt input:checked + span { background: var(--kit-accent); color: var(--kit-accent-ink); box-shadow: 0 4px 0 var(--kit-ink); }
.kit-quiz__opt input:focus-visible + span { outline: 3px solid var(--kit-focus); outline-offset: 3px; }
.kit-quiz__nav { display: grid; gap: .75rem; margin-top: 1.25rem; }
.kit-quiz__status { margin: 0; font: 700 .8rem/1 var(--kit-font-label); letter-spacing: .08em; text-transform: uppercase; }
.kit-quiz__bar { height: 6px; border-radius: 6px; background: var(--kit-line); overflow: hidden; }
.kit-quiz__bar i { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--kit-ease-out); }
.kit-quiz__btns { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.kit-quiz [hidden] { display: none !important; }
.kit-quiz__result:focus { outline: none; }
.kit-quiz [data-quiz-result]:not([hidden]) { animation: kit-pop .6s var(--kit-spring) both; }
@keyframes kit-pop { from { opacity: 0; scale: .9; } }

/* ---------- cart ---------- */
.kit-cart { width: min(440px, 100vw); max-width: 100vw; height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0;
  background: transparent; color: var(--kit-ink); overscroll-behavior: contain; }
.kit-cart::backdrop { background: rgb(10 5 15 / .5); }
.kit-cart__panel { display: flex; flex-direction: column; height: 100%; background: var(--kit-paper); border-left: 2px solid var(--kit-ink); }
.kit-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 2px solid var(--kit-ink); }
.kit-cart__head h2 { margin: 0; font-size: 1.5rem; }
.kit-cart__x { width: 48px; height: 48px; border: 2px solid var(--kit-ink); border-radius: 50%; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.kit-cart__list { flex: 1; overflow: auto; margin: 0; padding: .5rem 1.25rem; list-style: none; }
.kit-cart__item { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "img info qty" "img rm rm"; gap: .25rem .9rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--kit-line); }
.kit-cart__item > img, .kit-cart__dot { grid-area: img; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.kit-cart__dot { background: var(--c); border: 2px solid var(--kit-ink); }
.kit-cart__info { grid-area: info; min-width: 0; }
.kit-cart__info p { margin: 0; font-weight: 700; }
.kit-cart__info p + p { font-weight: 400; color: var(--kit-muted); }
.kit-cart__qty { grid-area: qty; display: flex; align-items: center; border: 2px solid var(--kit-ink); border-radius: 999px; }
.kit-cart__qty button { width: 44px; height: 44px; border: 0; background: none; color: inherit; font: inherit; font-size: 1.25rem; cursor: pointer; border-radius: 50%; }
.kit-cart__qty span { min-width: 1.5ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.kit-cart__rm { grid-area: rm; justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--kit-muted); font: inherit; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.kit-cart__empty { display: none; margin: auto; padding: 2rem; text-align: center; color: var(--kit-muted); }
.kit-cart.is-empty .kit-cart__empty { display: block; }
.kit-cart.is-empty .kit-cart__list, .kit-cart.is-empty .kit-cart__foot > a { display: none; }
.kit-cart__foot { display: grid; gap: .75rem; padding: 1.25rem; border-top: 2px solid var(--kit-ink); }
.kit-cart__sub { display: flex; justify-content: space-between; margin: 0; font-size: 1.15rem; }
.kit-cart__note { margin: 0; font-size: .85rem; color: var(--kit-muted); text-align: center; }
.kit-cart__wa { background: #0b7a3b; color: #fff; }
.kit-fly { position: fixed; z-index: calc(var(--kit-z) + 2); width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid var(--kit-ink); pointer-events: none; }
.kit-added { animation: kit-pop .5s var(--kit-spring); }

/* ---------- confetti / progress / whatsapp ---------- */
.kit-confetti { position: fixed; inset: 0; z-index: calc(var(--kit-z) + 3); width: 100%; height: 100%; pointer-events: none; }
.kit-progress { position: fixed; inset: 0 0 auto; z-index: calc(var(--kit-z) + 1); height: var(--kit-progress-h, 4px);
  background: var(--kit-progress, var(--kit-accent)); transform-origin: 0 50%; transform: scaleX(var(--kit-p, 0)); pointer-events: none; }
.kit-progress--css { animation: kit-grow linear both; animation-timeline: scroll(root); }
@keyframes kit-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kit-wa { display: inline-flex; align-items: center; gap: .55em; min-height: 52px; padding: .6em 1.2em .6em .8em; border-radius: 999px;
  background: #0b7a3b; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.kit-wa__icon { width: 30px; height: 30px; flex: none; }
.kit-wa--float { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--kit-z);
  animation: kit-pop .6s var(--kit-spring) 1.2s both; transition: transform .25s var(--kit-spring); }
.kit-wa--float:hover { transform: translateY(-3px) scale(1.04); }
@media (max-width: 640px) {
  .kit-wa--float { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .kit-wa--float .kit-wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- reduced motion: static, fully visible fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-kit~=float], .kit-sticker__ring, .kit-marquee__track, .kit-wa--float, .kit-added,
  .kit-strike.kit-go ins, .kit-quiz [data-quiz-result]:not([hidden]) { animation: none !important; }
  .kit-marquee__group { flex: auto; flex-wrap: wrap; justify-content: center; row-gap: .5rem; white-space: normal; }
  .kit-marquee__group ~ .kit-marquee__group { display: none; }
  .kit-marquee__track { width: 100%; }
  .kit-tilt, .kit-mag, .kit-hl, .kit-rot > span, .kit-quiz__bar i, .kit-btn, .kit-quiz__opt span, .kit-go .kit-strike__line path { transition: none !important; }
  .kit-pending, .kit-pending > * { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
}