/*
  Title:      Zen HQ sign-in splash (Panda Home)
  File:       app/static/hq_splash.css
  Version:    1.3.1
  Date:       2026-10-07
  Sections:   1 tokens and base, 2 top bar, 3 stage and artwork, 4 artwork parts and motion, 5 left words, 6 sign-in card,
              7 Mae, 8 band and footer, 9 eye button and Caps Lock note, 10 tablets and phones, 11 reduced motion
  Depends on: Google Fonts Cormorant Garamond, Figtree, Pinyon Script, Noto Serif SC (subset; loaded in hq_login.html)
  Used by:    templates/hq_login.html (with the artwork partial hq_panda_art.html) only. The signed-in screens keep hq_style.css.
  Purpose:    The same front door as Zen Booking, Zen Desk and Zen Ledger (black and gold, words left, card centre, Mae right,
              the ivory band below), here with the Panda Home artwork. Zen HQ's strict CSP allows no inline style, so every
              style of the page and of its inline SVG lives here.
  Revisions:  1.3.1 2026-10-07 Claude Code: the small "Demo" badge (.demo-badge) for a demo instance (Zentelle).
              1.3.0 2026-10-07 Claude Code: (owner and his wife) the lantern is removed: it landed in odd spots when the window
              was resized (rules .lpos/.lantern/.lglow and their keyframes archived in templates/archive/hq_lantern_snippet.html;
              idea for later: from the top header's gold line on the left, only if it stays put at every width). The coin is
              now solid (no hole) and a warmer yellow-gold (in hq_panda_art.html 1.3.0); its motion is unchanged.
              1.2.0 2026-10-07 Claude Code: (owner's wife) now and then a gold coin with a square hole drifts down, turning slowly so
              it flashes (.coin/.cdrift/.cspin/.cglint; one element, two drops in a 67 s cycle, about 31 and 36 s apart: never two
              on screen; right of the card beyond the petals, on phones just right of the panda's head). (Owner) the lantern could
              not be seen: it now hangs from the hall's right upper eave (.lpos), 1.3x, warmer glow; on phones a little further in
              and the side shading lighter. Coin hidden under reduced motion.
              1.1.0 2026-10-07 Claude Code: gentle touches (owner and his wife: "surprise us, tasteful, not a circus"): the
              panda blinks now and then (31 s cycle, gaps 6.6–9.3 s) and winks one eye with a lifted smile (83 s cycle, 38 and 45 s
              apart); a blossom petal drifts down now and then (two petals, 31 and 37 s, out of step: two on screen at most); a small
              red paper lantern on the left lower eave sways ±2° with a faint glow. Pure CSS; all of it off under reduced motion
              (petals hidden, eyes open).
              1.0.1 2026-10-07 Claude Code: the bamboo sways a little more (leaves ±5–6°, 6/7.5/9 s staggered; each grove bends
              about 1° from its roots, 8 and 9.5 s, out of step), still under reduced motion (owner); the panda mark in the top bar a little bigger (46 px, phones 38 px) to balance the
              wordmark, as Zen Desk and Zen Booking (owner).
              1.0.0 2026-10-07 Claude Code: first version (owner: a striking splash in the family of the other apps, pandas).
*/

/* ---------- 1. tokens and base ---------- */
:root{--k:#1D1913;--gold:#B08A3E;--gold-l:#E9CF8F;--paper:#F3EEE3;--line:#D6CAB4;--mu:#6A5F50;
  --foil:linear-gradient(115deg,#8C6A2F 0%,#E9CF8F 42%,#A57C35 70%,#D9B872 100%);
  --zh:"Noto Serif SC","Songti SC","STSong","SimSun",serif}
*{box-sizing:border-box}
body.splash{margin:0;background:var(--k);color:#F6E6B4;font:16px/1.55 "Figtree",system-ui,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
.splash .zh{font-family:var(--zh)}

/* ---------- 2. top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,48px)}
.top .brand{display:flex;align-items:center;gap:12px;font:600 30px "Cormorant Garamond",Georgia,serif;color:#F6E6B4;text-decoration:none;letter-spacing:.02em}
.top .brand img{width:46px;height:46px}
.top .brand small{display:block;font:500 11px "Figtree",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l);opacity:.8}
.top .brand small .zh{letter-spacing:.2em}
.top .note{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);opacity:.8}

/* ---------- 3. stage and artwork ---------- */
.stage{position:relative;overflow:hidden;min-height:calc(100vh - 96px);display:grid;align-items:center;padding:10px 16px 0}
.stage .art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max(1200px,90vw);height:auto;opacity:.92;pointer-events:none}
.fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(29,25,19,.94) 0,rgba(29,25,19,.5) 28%,rgba(29,25,19,0) 46%,rgba(29,25,19,0) 54%,rgba(29,25,19,.5) 72%,rgba(29,25,19,.94) 100%),
             linear-gradient(180deg,rgba(29,25,19,.6) 0,rgba(29,25,19,0) 45%)}
.grid{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px) minmax(0,1fr);
  gap:clamp(18px,3vw,40px);align-items:center;padding-bottom:clamp(250px,18vw,330px)}

/* ---------- 4. artwork parts and motion ---------- */
.art .st{fill:none;stroke:url(#pstalk);stroke-linecap:round}
.art .nd{stroke:#F3DDA0;stroke-width:1.6;stroke-linecap:round;opacity:.55}
.art .lf{fill:url(#pg);stroke:#8C6A2F;stroke-width:.6;opacity:.9}
.art .vn{stroke:#6E5428;stroke-width:.8;opacity:.6;fill:none}
.art .grove{opacity:.85}
.art .seal{font:600 19px var(--zh);fill:#FBEFD0}
.art .sun-glow{transform-origin:600px 392px;animation:hq-breathe 7s ease-in-out infinite}
.art .sun-disc{transform-origin:600px 392px;animation:hq-breathe-disc 7s ease-in-out infinite}
.art .sun-rays{transform-origin:600px 392px;animation:hq-turn 240s linear infinite}
.art .sway{transform-origin:0 0;animation:hq-sway 6s ease-in-out infinite}
.art .grove{transform-box:fill-box;transform-origin:50% 100%;animation:hq-grove 8s ease-in-out infinite}
.art g[transform] > .grove{animation-duration:9.5s;animation-delay:-3.5s}
.art .sway.s2{animation-duration:7.5s;animation-delay:-2.5s}
.art .sway.s3{animation-duration:9s;animation-delay:-4s}
@keyframes hq-breathe{0%,100%{opacity:.72;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes hq-breathe-disc{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes hq-turn{to{transform:rotate(360deg)}}
@keyframes hq-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes hq-grove{0%,100%{transform:rotate(-0.9deg)}50%{transform:rotate(1.1deg)}}
/* the gentle touches (owner and his wife, 2026-10-07): a blink now and then, a rarer wink with a lifted smile, one blossom
   petal drifting down now and then (two at most) (the lantern was removed in 1.3.0). Long cycles with uneven gaps so it
   never feels mechanical: blinks 8.3, 6.8, 9.3, 6.6 s apart (31 s cycle); winks 38 and 45 s apart (83 s cycle); petals every
   31 and 37 s, out of step. */
.art .eyes,.art .wink{transform-box:fill-box;transform-origin:50% 50%}
.art .eyes{animation:hq-blink 31s linear infinite}
.art .wink{animation:hq-wink 83s ease-in-out infinite}
.art .smile{animation:hq-smile 83s linear infinite}
.art .smile-w{opacity:0;animation:hq-smile-w 83s linear infinite}
.art .petal{opacity:0}
.art .p1{animation:hq-petal1 31s linear 3s infinite}
.art .p2{animation:hq-petal2 37s linear 19s infinite}
.art .pdrift{animation:hq-drift 4.2s ease-in-out infinite}
.art .p2 .pdrift{animation-duration:5.1s;animation-delay:-1.7s}
@keyframes hq-blink{0%,4%,4.55%,30.8%,31.35%,52.7%,53.25%,82.7%,83.25%,100%{transform:scaleY(1)}4.25%,31.05%,52.95%,82.95%{transform:scaleY(.1)}}
@keyframes hq-wink{0%,14%,15.2%,60%,61.2%,100%{transform:scaleY(1)}14.25%,14.9%,60.25%,60.9%{transform:scaleY(.08)}}
@keyframes hq-smile{0%,14.05%,15.2%,60.05%,61.2%,100%{opacity:1}14.25%,14.95%,60.25%,60.95%{opacity:0}}
@keyframes hq-smile-w{0%,14.05%,15.2%,60.05%,61.2%,100%{opacity:0}14.25%,14.95%,60.25%,60.95%{opacity:1}}
@keyframes hq-petal1{0%{opacity:0;transform:translate(800px,120px)}4%{opacity:.9}34%{opacity:.85}38%{opacity:0;transform:translate(700px,546px)}38.01%,100%{opacity:0;transform:translate(700px,546px)}}
@keyframes hq-petal2{0%{opacity:0;transform:translate(410px,160px)}4%{opacity:.9}31%{opacity:.85}34%{opacity:0;transform:translate(490px,546px)}34.01%,100%{opacity:0;transform:translate(490px,546px)}}
@keyframes hq-drift{0%,100%{transform:translateX(-16px) rotate(-30deg) scaleX(1)}25%{transform:translateX(0) rotate(2deg) scaleX(.55)}50%{transform:translateX(16px) rotate(35deg) scaleX(1)}75%{transform:translateX(0) rotate(2deg) scaleX(.6)}}
/* the gold coin (owner's wife, 2026-10-07): a solid round coin (no hole since 1.3.0) drifts down now and then, turning slowly so it
   flashes; one element, two drops in a 67 s cycle (about 31 and 36 s apart, the first 9 s after the page opens), so never two on
   screen. Its path keeps clear of the petals (x 700-800 and 410-490) and of the sign-in card and the words: on the right beyond
   the petals on wide screens, just right of the panda's head (left of petal 1) on narrow ones. */
.art .coin{opacity:0;animation:hq-coin 67s linear 9s infinite}
.art .cdrift{animation:hq-cdrift 5.6s ease-in-out infinite}
.art .cspin{transform-box:fill-box;transform-origin:50% 50%;animation:hq-cspin 3.2s linear infinite}
.art .cglint{animation:hq-cglint 3.2s linear infinite}
@media (max-width:700px){.art .coin{animation-name:hq-coin-ph}
  .fade{background:linear-gradient(90deg,rgba(29,25,19,.62) 0,rgba(29,25,19,.25) 22%,rgba(29,25,19,0) 40%,rgba(29,25,19,0) 60%,rgba(29,25,19,.25) 78%,rgba(29,25,19,.62) 100%),
    linear-gradient(180deg,rgba(29,25,19,.6) 0,rgba(29,25,19,0) 45%)}}
@keyframes hq-coin{0%{opacity:0;transform:translate(915px,250px)}1.5%{opacity:1}13.5%{opacity:1}15%{opacity:0;transform:translate(915px,540px)}15.01%,46%{opacity:0;transform:translate(945px,270px)}47.5%{opacity:1}59.5%{opacity:1}61%{opacity:0;transform:translate(945px,540px)}61.01%,100%{opacity:0;transform:translate(915px,250px)}}
@keyframes hq-coin-ph{0%{opacity:0;transform:translate(690px,296px)}1.5%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:translate(690px,382px)}9.01%,46%{opacity:0;transform:translate(696px,300px)}47.5%{opacity:1}53.5%{opacity:1}55%{opacity:0;transform:translate(696px,382px)}55.01%,100%{opacity:0;transform:translate(690px,296px)}}
@keyframes hq-cdrift{0%,100%{transform:translateX(-8px) rotate(-12deg)}50%{transform:translateX(8px) rotate(10deg)}}
@keyframes hq-cspin{0%,100%{transform:scaleX(1)}12.5%,87.5%{transform:scaleX(.7)}25%,75%{transform:scaleX(.06)}37.5%,62.5%{transform:scaleX(-.7)}50%{transform:scaleX(-1)}}
@keyframes hq-cglint{0%,50%,100%{opacity:1}10%,40%,60%,90%{opacity:.15}}

/* ---------- 5. left words ---------- */
.left .eyebrow{margin:0 0 10px;font:600 20px var(--zh);letter-spacing:.18em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.left .eyebrow span{font:500 12px "Figtree",sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l);-webkit-text-fill-color:var(--gold-l);margin-left:8px;opacity:.85}
.left h1{font:500 clamp(40px,5vw,68px)/1.03 "Cormorant Garamond",Georgia,serif;margin:0 0 14px;color:#FFF4D2}
.left h1 em{font-style:italic;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.left p{margin:0 0 18px;max-width:30ch;color:#EFE3C2}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.facts li{display:flex;gap:12px;align-items:baseline;color:#EFE3C2}
.facts b{font:600 24px "Cormorant Garamond",Georgia,serif;min-width:70px;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 6. sign-in card ---------- */
.card{background:rgba(250,247,240,.97);color:var(--k);border-radius:16px;padding:28px 26px 24px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(233,207,143,.55);position:relative}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:var(--foil)}
.card h2{font:600 32px "Cormorant Garamond",Georgia,serif;margin:0 0 2px;text-align:center;line-height:1.1}
.card .sub{margin:0 0 18px;text-align:center;color:var(--mu);font-size:14px}
.card .sub .zh{display:block;margin-top:2px;letter-spacing:.2em;color:#7A5A22}
.card label{display:grid;gap:5px;font-weight:600;font-size:14px;margin-bottom:12px}
.card label>span{display:block}
.card label .zh{font-weight:500;color:var(--mu);font-size:.85em;margin-left:6px}
.card input{font:inherit;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--k)}
.card input:focus{outline:2px solid var(--gold);outline-offset:1px}
.card button[type=submit]{width:100%;height:48px;border:1px solid #9C7A3A;border-radius:10px;background:var(--foil);color:var(--k);font:600 16px "Figtree",sans-serif;cursor:pointer;margin-top:4px}
.card .err{background:#F6DCD6;color:#9B3A2E;border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 12px}
.card .ok{background:#E3EFD9;color:#2F5A1F;border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 12px}
.card .forgot{margin:12px 0 0;text-align:center;font-size:14px}.card .forgot a{color:#7A5A22}
.card .fine{margin:14px 0 0;text-align:center;font-size:12px;color:var(--mu)}

/* ---------- 7. Mae ---------- */
.right{display:grid;justify-items:center;text-align:center}
.right img{width:min(320px,100%);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.right .q{font:500 italic 21px/1.3 "Cormorant Garamond",Georgia,serif;color:#FFF4D2;margin:8px 0 0;max-width:19ch}
.right .sig{font:400 38px "Pinyon Script",cursive;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}

/* ---------- 8. band and footer ---------- */
.band{position:relative;z-index:3;background:var(--paper);color:var(--k);padding:40px 16px}
.band-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.band h3{font:600 23px "Cormorant Garamond",Georgia,serif;margin:0 0 6px}
.band h3 .zh{font:500 14px var(--zh);color:var(--mu);margin-left:6px;letter-spacing:.1em}
.band p{margin:0;color:var(--mu);font-size:15px}
.band .k{width:44px;height:3px;background:var(--foil);margin-bottom:12px}
footer{text-align:center;font-size:13px;color:#CBB98F;padding:18px 16px}

/* ---------- 9. eye button and Caps Lock note (hq_pw.js; same as hq_style.css section 10) ---------- */
.pw-wrap{position:relative;display:block}.pw-wrap input{width:100%;padding-right:46px!important}
.pw-wrap .pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:8px;color:#6A5F50;cursor:pointer;padding:0}
.pw-wrap .pw-eye:hover{color:#1D1913}.pw-wrap .pw-eye:focus-visible{outline:2px solid #B08A3E;outline-offset:1px}
.pw-caps{display:block;margin:4px 0 0;font-size:13px;font-weight:600;color:#8A5A12}.pw-caps[hidden]{display:none}

/* ---------- 10. tablets and phones ---------- */
@media (max-width:980px){.grid{grid-template-columns:1fr;padding-bottom:260px}.left{text-align:center}.left p{margin-left:auto;margin-right:auto}
  .facts{justify-content:center}.right{order:-1}.right img{width:230px}.band-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.band-in{grid-template-columns:1fr}.top .note{display:none}.top .brand{font-size:26px}.top .brand img{width:38px;height:38px}
  .stage .art{width:1100px}.grid{padding-bottom:240px}}

/* ---------- 11. reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.art .sun-glow,.art .sun-disc,.art .sun-rays,.art .sway,.art .grove,.art .eyes,.art .wink,.art .smile,.art .smile-w,
  .art .petal,.art .pdrift,.art .coin,.art .cdrift,.art .cspin,.art .cglint{animation:none}.art .petal,.art .coin{display:none}}

/* Demo badge (Zentelle demo; hq_brand.DEMO): beside the name in the header */
.demo-badge{display:inline-block; align-self:center; margin-left:8px; padding:3px 7px; border:1px solid #B08D57; border-radius:2px;
  color:#E9CF8F; font:600 11px/1 "Figtree",sans-serif; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; vertical-align:middle}