/* ===================================================================
   ARTLINE — "find your workshop" experience  (dark, brand-tied)
   =================================================================== */
.quiz{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(58,50,137,.35),rgba(9,7,20,.82));
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.quiz.is-open{opacity:1;pointer-events:auto}
.quiz[hidden]{display:none}

.quiz-panel{
  position:relative;
  width:min(860px,94vw);
  height:min(740px,94vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(90% 60% at 85% 0%,rgba(103,205,212,.10),transparent 60%),
    radial-gradient(90% 60% at 10% 100%,rgba(238,38,78,.12),transparent 60%),
    #221d44;
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  box-shadow:0 50px 130px rgba(0,0,0,.6);
  transform:translateY(22px) scale(.965);
  transition:transform .34s cubic-bezier(.2,.75,.2,1);
}
.quiz.is-open .quiz-panel{transform:none}

/* faint drifting stars, echoing the hero */
.quiz-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 25%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.4px 1.4px at 72% 18%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.6px 1.6px at 42% 72%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 88% 62%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.3px 1.3px at 12% 82%,rgba(255,255,255,.5),transparent);
  animation:qz-stars 9s ease-in-out infinite alternate;
}
@keyframes qz-stars{from{transform:translateY(0)}to{transform:translateY(-8px)}}

.quiz-x{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:6;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.08);transition:background .16s ease,transform .16s ease;
}
.quiz-x svg{width:18px;height:18px}
.quiz-x:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}

.quiz-bar{height:3px;background:rgba(255,255,255,.08);flex:0 0 auto;position:relative;overflow:hidden}
.quiz-bar i{
  display:block;height:100%;width:4%;
  background:linear-gradient(90deg,var(--teal),var(--pink));
  transition:width .55s cubic-bezier(.4,0,.15,1);
}
.quiz-bar i::after{
  content:"";position:absolute;inset:0;width:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:qz-shimmer 2.4s linear infinite;
}
@keyframes qz-shimmer{from{transform:translateX(-70px)}to{transform:translateX(940px)}}

.quiz-stage{position:relative;flex:1;min-height:0}

/* ---------- screens ---------- */
.quiz-screen{
  position:absolute;inset:0;margin-inline:auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:18px;padding:clamp(20px,3.2vw,34px);
  overflow-y:auto;text-align:center;
  transition:opacity .3s ease, transform .34s cubic-bezier(.3,.7,.2,1), filter .3s ease;
}
.quiz-screen.enter-fwd {opacity:0;transform:translateX(-54px) scale(.98)}
.quiz-screen.enter-back{opacity:0;transform:translateX(54px)  scale(.98)}
.quiz-screen.leave-fwd {opacity:0;transform:translateX(54px)  scale(.96);filter:blur(3px)}
.quiz-screen.leave-back{opacity:0;transform:translateX(-54px) scale(.96);filter:blur(3px)}

.quiz-screen h2{
  font-family:var(--font-display);font-weight:900;color:#fff;
  font-size:max(1.5rem,2.5vw);line-height:.8em;letter-spacing:-.01em;
}

/* ---------- buttons ---------- */
.qz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 30px;border-radius:999px;font-weight:700;font-size:clamp(13px,.9vw,1.35rem);
  transition:transform .15s ease,box-shadow .22s ease,background .2s ease;
}
.qz-btn svg{width:18px;height:18px}
.qz-btn-primary{background:var(--pink);color:#fff;box-shadow:0 14px 34px rgba(238,38,78,.36)}
.qz-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(238,38,78,.46)}
.qz-btn-primary:active{transform:scale(.97)}
.qz-btn-primary:disabled{opacity:.6;transform:none}
.qz-btn-ghost{background:rgba(255,255,255,.07);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.qz-btn-ghost:hover{background:rgba(255,255,255,.14)}
.qz-back{
  display:inline-flex;align-items:center;gap:5px;
  color:rgba(255,255,255,.55);font-weight:600;font-size:max(.9rem,.9vw);padding:8px 10px;
  transition:color .15s ease;
}
.qz-back svg{width:15px;height:15px;transform:scaleX(-1)}
.qz-back:hover{color:#fff}
.qz-nav{margin-top:4px;min-height:1px}

/* ---------- intro ---------- */
.qz-intro{gap:22px;max-width:460px}
.qz-orbit{width:74px;height:74px;display:grid;place-items:center;animation:qz-float 4s ease-in-out infinite}
.qz-orbit img{width:100%;height:auto;filter:drop-shadow(0 0 22px rgba(238,38,78,.5))}
@keyframes qz-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.qz-intro p{color:var(--muted);font-size:max(1.05rem,.9vw)}

/* ---------- question ---------- */
.qz-q{gap:24px;width:100%;max-width:620px}
.qz-steps{display:flex;gap:7px;justify-content:center}
.qz-steps i{width:22px;height:4px;border-radius:3px;background:rgba(255,255,255,.14);transition:.3s}
.qz-steps i.done{background:var(--teal)}
.qz-steps i.now{background:var(--pink);width:30px}

.qz-q h2{opacity:0;transform:translateY(10px);animation:qz-rise .5s .05s forwards}
@keyframes qz-rise{to{opacity:1;transform:none}}

.qz-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;
}
.qz-tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:22px 12px;border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1.6px solid rgba(255,255,255,.1);
  color:#fff;
  animation:qz-tile-in .42s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i) * 45ms + .12s);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
@keyframes qz-tile-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.qz-tile:hover{transform:translateY(-4px);border-color:rgba(103,205,212,.6);background:rgba(255,255,255,.07)}
.qz-tile:hover .qz-ic{color:var(--pink);transform:scale(1.08)}
.qz-tile:active{transform:scale(.97)}
.qz-tile.is-sel{
  border-color:var(--pink);
  background:rgba(238,38,78,.16);
  box-shadow:0 0 0 3px rgba(238,38,78,.18),0 14px 36px rgba(238,38,78,.22);
}
.qz-tile.is-sel .qz-ic{color:var(--pink)}
.qz-tile.just-picked{animation:qz-pop .42s ease}
@keyframes qz-pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
/* ripple */
.qz-tile.just-picked::after{
  content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;border-radius:50%;
  background:rgba(238,38,78,.35);animation:qz-ripple .55s ease-out forwards;
}
@keyframes qz-ripple{to{width:300px;height:300px;opacity:0}}

.qz-ic{color:rgba(255,255,255,.92);transition:color .18s ease,transform .18s ease}
.qz-ic svg{width:30px;height:30px;display:block}
.qz-lb{font-weight:700;font-size:max(.94rem,.9vw);line-height:1.25}
.qz-tick{
  position:absolute;inset-block-start:8px;inset-inline-start:8px;
  width:22px;height:22px;border-radius:50%;background:var(--pink);color:#fff;
  display:grid;place-items:center;opacity:0;transform:scale(.4) rotate(-20deg);
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,1.6,.4,1);
}
.qz-tick svg{width:13px;height:13px;stroke-width:2.6}
.qz-tile.is-sel .qz-tick{opacity:1;transform:none}

/* ---------- results (no scroll, side by side) ---------- */
.quiz-screen:has(.qz-result){padding-block:clamp(12px,1.8vw,20px)}
.qz-result{gap:8px;width:100%;max-width:720px;justify-content:center}
.qz-result-head{display:flex;flex-direction:column;gap:4px;align-items:center}
.qz-tagline{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--teal);font-weight:700;font-size:max(.7rem,.8vw);letter-spacing:.06em;
}
.qz-tagline svg{width:15px;height:15px;animation:qz-spin 7s linear infinite}
@keyframes qz-spin{to{transform:rotate(360deg)}}
.qz-result-head h2{font-size:max(1.05rem,1.5vw)}

.qz-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.qz-pick{
  position:relative;text-align:start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:9px 10px 11px;
  display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(22px) scale(.95);
  animation:qz-reveal .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--i) * 150ms + .2s);
}
@keyframes qz-reveal{to{opacity:1;transform:none}}
.qz-pick:first-child{border-color:rgba(238,38,78,.4);box-shadow:0 0 0 1px rgba(238,38,78,.25)}
.qz-pick-rank{
  align-self:flex-start;
  font-size:max(.6rem,.68vw);font-weight:800;letter-spacing:.03em;
  color:#fff;background:var(--pink);padding:3px 9px;border-radius:999px;
}
.qz-pick:nth-child(2) .qz-pick-rank{background:rgba(255,255,255,.14);color:#e9e7f7}
.qz-pick-media{border-radius:11px;overflow:hidden;height:clamp(78px,10vh,112px);background:#181530}
.qz-pick-media img{width:100%;height:100%;object-fit:cover;display:block}
.qz-pick h3{
  font-family:var(--font-display);font-weight:800;color:#fff;
  font-size:max(.84rem,.78vw);line-height:1.2;
}
.qz-pick-why{color:var(--teal);font-weight:600;font-size:max(.72rem,.74vw);line-height:1.35}
.qz-pick-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin-top:1px;
}
.qz-pick-meta li{
  font-size:max(.6rem,.66vw);font-weight:600;color:#e9e7f7;
  background:rgba(255,255,255,.08);padding:3px 8px;border-radius:999px;
}
.qz-pick-link{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:5px;
  color:var(--pink);font-weight:800;font-size:max(.74rem,.78vw);
}
.qz-pick-link svg{width:14px;height:14px}
.qz-pick-link:hover{text-decoration:underline}

.qz-hand{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:100%;max-width:560px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.12);
}
.qz-hand-h{color:#fff;font-weight:800;font-size:max(.9rem,.84vw)}
.qz-hand-p{color:var(--muted);font-size:max(.76rem,.78vw);line-height:1.35}
.qz-hand .qz-btn{margin-top:5px}
.qz-hand .qz-back{margin-top:0}

/* ---------- lead ---------- */
.qz-lead{gap:12px;width:100%;max-width:600px}
.qz-lead h2{font-size:max(1.3rem,2.5vw)}
.qz-lead-mini{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;
  color:var(--muted);font-size:max(.86rem,.9vw);font-weight:600;
}
.qz-lead-mini span{color:#fff;background:rgba(255,255,255,.07);padding:4px 11px;border-radius:999px}
.qz-lead-mini i{opacity:.5}
.qz-lead-sub{color:var(--muted);font-size:max(.9rem,.9vw)}
.qz-form{
  display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;
  width:100%;text-align:start;
}
.qz-fld-wide,.qz-form .qz-consent,.qz-form .qz-btn,.qz-form-status{grid-column:1 / -1}

/* floating-label field */
.qz-fld{position:relative}
.qz-fld input,.qz-fld textarea{
  width:100%;padding:14px 14px 12px;border-radius:12px;font-family:inherit;font-size:max(1rem,.9vw);
  background:rgba(255,255,255,.06);border:1.6px solid rgba(255,255,255,.14);color:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.qz-fld textarea{line-height:1.4;resize:vertical;min-height:52px}
.qz-fld input:focus,.qz-fld textarea:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.09)}
.qz-fld-lb{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;
  color:rgba(255,255,255,.5);font-weight:600;font-size:max(1rem,.9vw);
  pointer-events:none;transition:transform .15s ease,color .15s ease,background .15s ease,padding .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,font-size .15s ease;
}
.qz-fld input:focus ~ .qz-fld-lb,
.qz-fld input:not(:placeholder-shown) ~ .qz-fld-lb,
.qz-fld textarea:focus ~ .qz-fld-lb,
.qz-fld textarea:not(:placeholder-shown) ~ .qz-fld-lb{
  inset-block-start:-8px;inset-inline-start:10px;
  font-size:max(.7rem,0.78vw);font-weight:700;color:var(--teal);
  background:#221d44;padding:1px 6px;border-radius:5px;
}

.qz-form .qz-consent{
  display:flex;flex-direction:row;align-items:flex-start;gap:9px;
  font-weight:500;font-size:max(.78rem,.9vw);line-height:1.45;color:var(--muted);
  cursor:pointer;margin-top:2px;
}
.qz-form .qz-consent input{
  flex:0 0 auto;width:17px;height:17px;margin-top:1px;padding:0;
  accent-color:var(--pink);cursor:pointer;
}
.qz-form .qz-consent-optional{margin-top:-2px;opacity:.9}
.qz-form .qz-btn{margin-top:4px;align-self:stretch}
.qz-form-status{color:var(--teal);font-weight:600;font-size:max(.9rem,.9vw);text-align:center;min-height:1.1em}

/* ---------- success ---------- */
.qz-done{gap:16px;max-width:400px}
.qz-done-heart{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:rgba(238,38,78,.14);color:var(--pink);
  animation:qz-beat 1.6s ease-in-out infinite;
}
.qz-done-heart svg{width:38px;height:38px;fill:var(--pink);stroke:var(--pink)}
@keyframes qz-beat{0%,100%{transform:scale(1)}18%{transform:scale(1.14)}34%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- catalog card flash ---------- */
.workshop-card.ws-flash{outline:3px solid var(--pink);outline-offset:5px;animation:ws-flash 2.2s ease}
@keyframes ws-flash{
  0%,100%{box-shadow:0 14px 44px rgba(41,38,76,.12)}
  15%,60%{box-shadow:0 0 0 6px rgba(238,38,78,.22),0 20px 50px rgba(238,38,78,.25)}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .qz-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .quiz{padding:0}
  .quiz-panel{width:100vw;height:100vh;height:100dvh;border-radius:0;border:0}
  .quiz-screen{justify-content:flex-start;padding-top:64px}
  .qz-intro,.qz-done{justify-content:center;flex:1}
  .qz-tile{padding:18px 8px;gap:9px}
  .qz-ic svg{width:26px;height:26px}
  .qz-picks{gap:12px}
  .qz-pick{padding:12px}
  .qz-pick-media{aspect-ratio:16/9}
  .qz-pick h3{font-size:max(.94rem,1.04vw)}
  .qz-pick-why{font-size:max(.8rem,0.89vw)}
  .qz-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .quiz,.quiz-panel,.quiz-screen,.qz-tile,.qz-btn,.qz-pick{transition:none!important;animation:none!important}
  .quiz-screen.enter-fwd,.quiz-screen.enter-back,
  .quiz-screen.leave-fwd,.quiz-screen.leave-back{transform:none;filter:none}
  .qz-tile,.qz-pick,.qz-q h2{opacity:1;transform:none}
  .quiz-panel::before,.qz-orbit,.qz-done-heart,.qz-tagline svg,.quiz-bar i::after{animation:none}
  .workshop-card.ws-flash{animation:none}
}

/* inner screen blocks are vertical stacks (their own gap + max-width) */
.qz-intro,.qz-q,.qz-result,.qz-lead,.qz-done{
  display:flex;flex-direction:column;align-items:center;
}