/*
 * Influencer UX — storefront launcher pill + fullscreen challenge popup.
 * LOOK LOCKED (ported from the Shopify theme extension, see [[storefront-challenge-entry]]):
 * dark IUX navy fill + cyan->blue->purple gradient border + blue/purple glow + sweep glint
 * + smooth 3D tilt (desktop follows the cursor; touch = gentle ambient float; off under
 * reduced-motion). Do NOT revert to placeholder styling.
 */

.iux-pill{position:fixed;bottom:22px;z-index:2147483500;display:inline-flex;align-items:center;gap:9px;
  border:1.6px solid transparent;border-radius:14px;padding:14px 20px;cursor:pointer;overflow:hidden;
  font:700 15px/1 'Fredoka',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.2px;color:#fff;
  background:linear-gradient(135deg,#101a33,#0a1226) padding-box,
    linear-gradient(120deg,#5de0e6,#3a6df0 52%,#9b5de5) border-box;
  box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 26px rgba(58,109,240,.5),0 0 52px rgba(155,93,229,.38);
  transform-origin:center;transition:transform .18s ease-out,box-shadow .2s,opacity .22s ease}
/* Fades out after 3s of no activity (idle); any scroll/touch/move/tap brings it back. */
.iux-pill.iux-hide{opacity:0;pointer-events:none}
.iux-pill:hover{box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 34px rgba(58,109,240,.8),0 0 66px rgba(155,93,229,.55)}
.iux-pill .iux-spark{font-size:16px}
.iux-pill .iux-arrow{opacity:.85;transition:transform .15s}
.iux-pill:hover .iux-arrow{transform:translateX(3px)}
.iux-pill .iux-sweep{position:absolute;top:0;left:-60%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:iux-pill-sweep 3.4s ease-in-out infinite;pointer-events:none}
@keyframes iux-pill-sweep{0%{left:-60%}55%,100%{left:130%}}
/* Touch devices can't mouse-tilt -> a gentle ambient 3D float keeps it alive. */
@media (hover:none){.iux-pill{animation:iux-pill-float 7s ease-in-out infinite}}
@keyframes iux-pill-float{0%,100%{transform:perspective(660px) rotateX(0) rotateY(0)}
  25%{transform:perspective(660px) rotateX(4deg) rotateY(-5deg)}
  50%{transform:perspective(660px) rotateX(0) rotateY(4deg)}
  75%{transform:perspective(660px) rotateX(-3deg) rotateY(-2deg)}}
@media (prefers-reduced-motion:reduce){.iux-pill{animation:none;transition:none}.iux-pill .iux-sweep{animation:none}}

/* Cross-fade phrase (the pill alternates between the two lines). */
.iux-fade{position:relative;display:inline-block;min-width:8.5em;text-align:left}
.iux-fade .iux-a,.iux-fade .iux-b{transition:opacity .45s ease}
.iux-fade .iux-b{position:absolute;left:0;top:0;opacity:0}

/* Shared fullscreen popup: edge-to-edge on mobile, centered modal on desktop. */
#iux-overlay{position:fixed;inset:0;z-index:2147483600;display:none;
  background:rgba(0,0,0,.7);align-items:center;justify-content:center}
#iux-overlay.iux-open{display:flex}
#iux-box{position:relative;width:100%;height:100%;max-width:440px;max-height:880px;
  background:#07080c;overflow:hidden}
#iux-box iframe{border:0;width:100%;height:100%;display:block;background:#07080c}
#iux-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);
  right:calc(env(safe-area-inset-right,0px) + 10px);z-index:2;width:44px;height:44px;
  border:0;border-radius:50%;background:#e5342b;color:#fff;font-size:22px;line-height:1;
  font-family:system-ui,-apple-system,sans-serif;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
#iux-close:hover{background:#c52a22}
@media (min-width:601px){#iux-box{height:90vh;border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}#iux-box iframe{border-radius:20px}}
@media (max-width:600px){#iux-box{max-width:none;max-height:none;height:100vh;height:100dvh}}