/* Member entry loading/transition overlay (Option A, running cat).
   Rules and values below are ported verbatim from the Richard-approved
   immutable design artifact
   (../../../docs/design-proposals/uiux-master-20260924/member-entry-loading-v1.html,
   design commit d91a2f45b30bf9fc5d826b54d367a5d260e12fe5, pinned by
   test/frontend/entry-loading-asset.test.js). Only two integration-safe
   renames were made so this file is safe to load alongside shell.css /
   myhub-v3.css in the same document without bleeding into them:
     1. the :root custom properties are scoped under .entry-loading-stage
        (as --el-* names) instead of :root, because shell.css already
        declares :root --paper/--ink/--muted/--line/--shadow with different
        values;
     2. every wrapper/container class the design defines itself (not the
        classes baked into the exact SVG markup) is prefixed
        "entry-loading-" -- .stage collided with an existing .stage rule in
        myhub-v3.css. The SVG-internal classes (.cat-svg, .cat-pose,
        .pose-1..4, .motion, .paw) are unchanged because they must match the
        exact SVG markup in entryLoadingCat.mjs byte-for-byte.
   No colors, sizes, timings, or geometry were changed. */
.entry-loading-stage{--el-cream:#FBF8F2;--el-paper:#FFFDF9;--el-ink:#142033;--el-navy:#062F4F;--el-maroon:#8B1E36;--el-maroon-soft:#A86A78;--el-gold:#E8B84A;--el-line:#E6DED5;--el-muted:#7C7A76;--el-shadow:0 16px 50px rgba(39,31,27,.10)}
.entry-loading-stage{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(220px 150px at 14% 3%,rgba(232,184,74,.10),transparent 72%),radial-gradient(260px 170px at 88% 6%,rgba(139,30,54,.07),transparent 72%),var(--el-cream);color:var(--el-ink);font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif}
.entry-loading-boot-brand{position:absolute;top:max(24px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-family:Georgia,"Noto Serif TC",serif;font-size:22px;letter-spacing:.01em;color:var(--el-navy);z-index:2}
.entry-loading-boot-brand:after{content:"";display:block;width:30px;height:2px;margin:9px auto 0;border-radius:2px;background:linear-gradient(90deg,var(--el-maroon),var(--el-gold))}
.entry-loading-state,.entry-loading-error{position:absolute;inset:0}
.entry-loading-state{display:grid;place-items:center;padding:32px 24px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.entry-loading-state[data-visible="true"]{opacity:1}
.entry-loading-core{width:min(310px,86vw);text-align:center;transform:translateY(8px)}
.entry-loading-animal-wrap{height:150px;display:grid;place-items:center;margin-bottom:14px}
.cat-svg{width:196px;height:120px;overflow:visible;filter:drop-shadow(0 10px 10px rgba(39,31,27,.06))}
.cat-pose{opacity:0;animation:entryLoadingPoseFlash .72s steps(1,end) infinite}
.pose-1{animation-delay:0s}.pose-2{animation-delay:-.18s}.pose-3{animation-delay:-.36s}.pose-4{animation-delay:-.54s}
.motion{animation:entryLoadingMotionPulse .72s ease-in-out infinite}
.entry-loading-copy{font-size:17px;font-weight:760;letter-spacing:.01em;margin:0;color:var(--el-ink)}
.entry-loading-subcopy{font-size:12px;color:var(--el-muted);margin:9px 0 0}
.entry-loading-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.entry-loading-dots span{width:7px;height:7px;border-radius:50%;background:rgba(139,30,54,.18);animation:entryLoadingDotPulse 1.05s ease-in-out infinite}
.entry-loading-dots span:nth-child(2){animation-delay:.16s}.entry-loading-dots span:nth-child(3){animation-delay:.32s}
.entry-loading-quiet-mark{position:absolute;left:0;right:0;bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));text-align:center;font-size:10px;letter-spacing:.14em;color:rgba(6,47,79,.45)}
.entry-loading-quiet-mark b{font-family:Georgia,serif;font-weight:400;letter-spacing:.06em}
.entry-loading-error{display:none;place-items:center;padding:32px 28px;background:var(--el-cream);z-index:4}
.entry-loading-error[data-visible="true"]{display:grid}
.entry-loading-error-card{width:min(340px,90vw);padding:26px 22px;background:var(--el-paper);border:1px solid var(--el-line);border-radius:18px;box-shadow:var(--el-shadow);text-align:center}
.entry-loading-error-icon{width:42px;height:42px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#FDE7EA;color:#B42338;font-weight:900}
.entry-loading-error-card h1{font-size:19px;margin:0 0 8px}
.entry-loading-error-card p{font-size:13px;line-height:1.6;color:var(--el-muted);margin:0 0 18px}
.entry-loading-error-card button{min-height:44px;border:0;border-radius:10px;padding:0 18px;background:var(--el-navy);color:#fff;font-weight:800}
@keyframes entryLoadingPoseFlash{0%,24.99%{opacity:1}25%,100%{opacity:0}}
@keyframes entryLoadingMotionPulse{0%,100%{opacity:.24;transform:translateX(5px)}50%{opacity:.72;transform:translateX(-5px)}}
@keyframes entryLoadingDotPulse{0%,100%{transform:scale(.82);background:rgba(139,30,54,.18)}50%{transform:scale(1.15);background:rgba(139,30,54,.62)}}
@media (prefers-reduced-motion:reduce){
  .entry-loading-stage *,.entry-loading-stage *::before,.entry-loading-stage *::after{scroll-behavior:auto!important;transition:none!important}
  .cat-pose,.motion,.entry-loading-dots span{animation:none!important}
  .cat-pose{opacity:0}
  .cat-pose.pose-2{opacity:1}
  .motion{opacity:.18}
  .entry-loading-dots span:nth-child(2){background:rgba(139,30,54,.50)}
}