/* ════════════════════════════════════════════════
   Welcome Cards — first-visit iridescent onboarding overlay
   Design tokens (--neon-green, --iris-violet, --font-mono, …) live in
   main.css :root (post PATCH-01.1 hoist). Included on index.php only.
   ════════════════════════════════════════════════ */
.wc{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.wc[hidden]{display:none}
.wc__backdrop{position:absolute;inset:0;background:rgba(3,7,5,.78);backdrop-filter:blur(7px);opacity:0;transition:opacity .3s}
.wc.is-on .wc__backdrop{opacity:1}

.wc__card{position:relative;width:min(350px,92vw);
  background:
    linear-gradient(115deg, rgba(255,120,220,.16), rgba(120,240,255,.16) 28%, rgba(140,255,170,.16) 52%, rgba(180,140,255,.18) 76%, rgba(255,200,120,.14)),
    linear-gradient(180deg,#fdfefd,#f2f9f4);
  background-size:320% 320%, 100% 100%;
  animation:wc-holo-drift 9s ease-in-out infinite alternate, wc-holo-glow 8s linear infinite;
  border:1px solid rgba(160,107,255,.45);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  padding:26px 26px 22px;opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 44px rgba(160,107,255,.35);
  overflow:hidden}
@keyframes wc-holo-drift{from{background-position:0% 0%,0 0}to{background-position:100% 100%,0 0}}
@keyframes wc-holo-glow{
  0%,100%{box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 44px rgba(57,255,20,.35)}
  33%{box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 44px rgba(0,245,255,.4)}
  66%{box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 44px rgba(160,107,255,.45)}}
/* specular sheen sweeping across the foil */
.wc__card::after{content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;transform:rotate(22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  animation:wc-sheen 4.5s ease-in-out infinite}
@keyframes wc-sheen{0%,55%{left:-70%}90%,100%{left:130%}}
.wc.is-on .wc__card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wc__backdrop,.wc__card{transition:none}
  .wc__card,.wc__card::after{animation:none}
  .wc__step{animation:none !important}
}

.wc__close{position:absolute;top:10px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;color:rgba(6,20,10,.45);cursor:pointer;font-size:16px;transition:color .15s}
.wc__close:hover{color:#06140a}
.wc__close:focus-visible,.wc__btn:focus-visible,.wc__cta:focus-visible{outline:2px solid #007a86;outline-offset:2px}

.wc__step{display:none;animation:wc-in .3s cubic-bezier(.2,.8,.2,1)}
.wc__step.is-current{display:block}
@keyframes wc-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wc__step[data-dir="back"]{animation-name:wc-in-back}
@keyframes wc-in-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.wc__art{display:grid;place-items:center;height:130px;margin-bottom:16px}
.wc__art svg{width:120px;height:120px;overflow:visible;animation:wc-hue 7s ease-in-out infinite alternate}
@keyframes wc-hue{from{filter:hue-rotate(-30deg)}to{filter:hue-rotate(35deg)}}
.wc__eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px;
  background:linear-gradient(90deg,#c227a8,#007a86 40%,#0e8a00 70%,#7b3ff2);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wc-eyebrow 6s linear infinite}
@keyframes wc-eyebrow{to{background-position:200% 0}}
.wc__title{font-family:var(--font-display);font-size:24px;line-height:1.15;margin-bottom:10px;color:#06140a}
.wc__title em{font-style:normal;background:linear-gradient(100deg,#0e8a00,#008a99 45%,#7b3ff2 85%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wc-eyebrow 5s linear infinite}
.wc__body{font-size:14px;line-height:1.6;color:rgba(6,20,10,.72)}
.wc__body b{color:#06140a;font-weight:600}

.wc__ctas{display:flex;gap:8px;margin-top:16px}
.wc__cta{flex:1;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 8px;text-decoration:none;border:1px solid;transition:box-shadow .2s}
.wc__cta--green{color:#0e6d00;border-color:#0e8a00;background:rgba(57,255,20,.12)}
.wc__cta--green:hover{box-shadow:0 0 16px rgba(57,255,20,.5)}
.wc__cta--cyan{color:#00606b;border-color:#008a99;background:rgba(0,245,255,.1)}
.wc__cta--cyan:hover{box-shadow:0 0 16px rgba(0,245,255,.5)}

.wc__foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid rgba(14,138,0,.18)}
.wc__dots{display:flex;gap:7px}
.wc__dot{width:8px;height:8px;transform:rotate(45deg);background:transparent;border:1px solid rgba(6,20,10,.35);transition:background .2s,border-color .2s,box-shadow .2s}
.wc__dot.is-here{border-color:transparent;background:linear-gradient(135deg,#39ff14,#00f5ff,#a06bff);animation:wc-dot 4s linear infinite;box-shadow:0 0 10px rgba(0,245,255,.8)}
@keyframes wc-dot{0%,100%{box-shadow:0 0 10px rgba(57,255,20,.9)}33%{box-shadow:0 0 10px rgba(0,245,255,.9)}66%{box-shadow:0 0 10px rgba(160,107,255,.9)}}
.wc__nav{display:flex;gap:8px}
.wc__btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;cursor:pointer;border:1px solid;background:transparent;transition:box-shadow .2s,opacity .2s}
.wc__btn--back{color:rgba(6,20,10,.55);border-color:rgba(6,20,10,.25)}
.wc__btn--back:hover{color:#06140a}
.wc__btn--back[disabled]{opacity:.35;cursor:default}
.wc__btn--next{color:#04110a;border-color:transparent;
  background:linear-gradient(110deg,#39ff14,#00f5ff 40%,#a06bff 75%,#39ff14);
  background-size:250% 100%;animation:wc-foil-btn 3.5s linear infinite;
  box-shadow:0 0 16px rgba(0,245,255,.45);font-weight:700}
@keyframes wc-foil-btn{to{background-position:250% 0}}
.wc__btn--next:hover{box-shadow:0 0 28px rgba(160,107,255,.7)}
@media (prefers-reduced-motion:reduce){.wc__btn--next,.wc__dot.is-here,.wc__eyebrow,.wc__title em,.wc__art svg{animation:none}}

/* tiny SVG animation accents */
.wc__pulse-ring{transform-origin:center;animation:wc-ring 2.2s ease-out infinite}
@keyframes wc-ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.wc__runner-bob{animation:wc-bob 1s ease-in-out infinite}
@keyframes wc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wc__flash{animation:wc-flash 1.6s ease-in-out infinite}
@keyframes wc-flash{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wc__pulse-ring,.wc__runner-bob,.wc__flash{animation:none}}