/* Quickcourt — premium intro: splash → onboarding → welcome. Motion via CSS/keyframes. */
:root{ --qc-o:#C73D0A; --qc-o2:#E2570E; }

#qc-intro{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  display:flex; flex-direction:column; color:#fff;
  background:
    radial-gradient(900px 600px at 12% -8%, #FF7A45 0%, transparent 55%),
    radial-gradient(800px 600px at 110% 12%, #FF4D6D 0%, transparent 50%),
    linear-gradient(160deg, #C73D0A 0%, #8C1D04 60%, #5B1003 100%);
  background-size:200% 200%; animation:qc-bg 18s ease-in-out infinite;
  transition:opacity .5s ease, transform .5s ease;
}
#qc-intro.qc-hide{ opacity:0; transform:scale(1.04); pointer-events:none; }
@keyframes qc-bg{ 0%,100%{background-position:0% 0%} 50%{background-position:100% 100%} }

/* floating soft orbs for depth */
#qc-intro::before, #qc-intro::after{
  content:""; position:absolute; border-radius:50%; filter:blur(40px); opacity:.35;
  background:radial-gradient(circle, #fff, transparent 70%);
}
#qc-intro::before{ width:280px;height:280px; top:-60px; right:-40px; animation:qc-float 9s ease-in-out infinite; }
#qc-intro::after{ width:220px;height:220px; bottom:8%; left:-50px; animation:qc-float 11s ease-in-out infinite reverse; }
@keyframes qc-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(26px)} }

/* ---- splash ---- */
.qc-splash{ margin:auto; text-align:center; }
.qc-mark{
  width:96px;height:96px;border-radius:26px;margin:0 auto 18px;
  display:grid;place-items:center;font-size:48px;font-weight:900;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px);
  box-shadow:0 18px 50px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.25);
  animation:qc-pop .7s cubic-bezier(.2,.8,.2,1) both;
}
.qc-splash h1{ font-size:30px;font-weight:900;letter-spacing:-.5px; animation:qc-up .6s .15s both; }
.qc-splash p{ opacity:.85;margin-top:6px;font-size:14px; animation:qc-up .6s .3s both; }
.qc-splash .qc-load{ width:42px;height:3px;border-radius:3px;margin:22px auto 0;background:rgba(255,255,255,.3);overflow:hidden; }
.qc-splash .qc-load i{ display:block;height:100%;width:40%;background:#fff;border-radius:3px;animation:qc-slide 1.1s ease-in-out infinite; }
@keyframes qc-pop{ 0%{transform:scale(.6) rotate(-8deg);opacity:0} 100%{transform:none;opacity:1} }
@keyframes qc-up{ 0%{transform:translateY(14px);opacity:0} 100%{transform:none;opacity:1} }
@keyframes qc-slide{ 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }

/* ---- onboarding ---- */
.qc-ob{ flex:1; display:flex; flex-direction:column; padding:28px 26px calc(26px + env(safe-area-inset-bottom)); }
.qc-ob-skip{ align-self:flex-end; color:rgba(255,255,255,.8); font-weight:700; font-size:14px; background:none;border:none;cursor:pointer; }
.qc-ob-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.qc-ob-emoji{ font-size:92px; line-height:1; margin-bottom:22px; animation:qc-float 4s ease-in-out infinite; }
.qc-ob-t{ font-size:32px; font-weight:900; letter-spacing:-.6px; line-height:1.1; }
.qc-ob-s{ font-size:16px; line-height:1.55; opacity:.9; margin-top:12px; max-width:340px; }
.qc-ob .qc-key{ animation:qc-up .5s both; }
.qc-dots{ display:flex; gap:8px; margin:26px 0 18px; }
.qc-dots i{ width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.4); transition:width .3s, background .3s; }
.qc-dots i.on{ width:26px; background:#fff; }
.qc-cta{
  width:100%; padding:16px; border:none; border-radius:16px; cursor:pointer;
  background:#fff; color:var(--qc-o); font-size:16px; font-weight:800;
  box-shadow:0 14px 30px rgba(0,0,0,.25); transition:transform .08s ease, filter .15s;
}
.qc-cta:active{ transform:translateY(2px) scale(.99); }
.qc-cta.ghost{ background:rgba(255,255,255,.14); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.3); }

/* ---- welcome / auth entry ---- */
.qc-welcome{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 26px calc(30px + env(safe-area-inset-bottom)); }
.qc-welcome .qc-mark{ margin:0 0 18px; width:64px;height:64px;border-radius:18px;font-size:32px; }
.qc-welcome h2{ font-size:30px;font-weight:900;letter-spacing:-.5px; animation:qc-up .5s both; }
.qc-welcome p{ opacity:.9; margin-top:8px; font-size:15px; animation:qc-up .5s .1s both; }
.qc-welcome .qc-actions{ margin-top:26px; display:flex; flex-direction:column; gap:11px; animation:qc-up .5s .2s both; }
.qc-foot-note{ text-align:center; font-size:12px; opacity:.75; margin-top:14px; }
.qc-foot-note a{ color:#fff; text-decoration:underline; }

/* ───────── app motion & polish ───────── */
@keyframes qc-view{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
#app.qc-enter{ animation:qc-view .42s cubic-bezier(.2,.8,.2,1) both; }

/* tactile press feedback (pure CSS — safe on every render) */
button, .rcard, .fchip, .health-pill, .card, .qc-cta{ transition:transform .09s ease, box-shadow .18s ease, filter .15s ease; }
button:active, .rcard:active, .fchip:active, .health-pill:active, .card:active{ transform:scale(.975); }
@media (hover:hover){ .rcard:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(17,24,39,.13); } }

/* order-tracking timeline motion */
.tstep.active .tdot{ animation:qc-pulse 1.7s ease-in-out infinite; }
@keyframes qc-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(199,61,10,.45)} 50%{box-shadow:0 0 0 9px rgba(199,61,10,0)} }
.tstep.done .tdot{ animation:qc-pop .4s cubic-bezier(.2,.8,.2,1) both; }

/* respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){ #app.qc-enter, .tstep .tdot, .qc-key, .qc-mark{ animation:none !important; } }