/* Home hub extras: sky, dogs, care card, reactions, confetti, entrances. Loaded after common.css. */

/* ---------- sky ---------- */
.strip{background:linear-gradient(#EAF4FF,var(--surface) 72%); transition:background 1s}
.strip[data-sky="dawn"]{background:linear-gradient(#FFD9D0,#FFF3E8 72%)}
.strip[data-sky="dusk"]{background:linear-gradient(#F7B7A3,#FFE9D6 72%)}
.strip[data-sky="night"]{background:linear-gradient(#16231A,#2B4720 85%)}
.sky{position:absolute; inset:0 0 40px; overflow:hidden; pointer-events:none; z-index:0}
.sky .sun,.sky .moon{position:absolute; width:44px; height:44px; opacity:0; transition:opacity 1s}
.sky .sun{left:var(--sx,50%); top:var(--sy,20px); transform:translateX(-50%)}
.sky .moon{left:var(--mx,50%); top:var(--my,20px); transform:translateX(-50%)}
.strip[data-sky="dawn"] .sun,.strip[data-sky="day"] .sun,.strip[data-sky="dusk"] .sun{opacity:1}
.strip[data-sky="night"] .moon{opacity:1}
.sky .sun svg,.sky .moon svg{width:100%; height:100%; display:block}
.sky .rays{transform-origin:0 0; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sky .cloud{position:absolute; width:78px; opacity:.85; animation:drift 90s linear infinite; transition:opacity 1s}
.sky .cloud svg{display:block; width:100%}
.sky .c1{top:18px; animation-delay:-10s} .sky .c2{top:50px; width:56px; animation-duration:120s; animation-delay:-70s} .sky .c3{top:8px; width:64px; animation-duration:150s; animation-delay:-120s}
@keyframes drift{from{left:-90px} to{left:100%}}
.strip[data-sky="night"] .cloud{opacity:.08}
.strip[data-sky="dusk"] .cloud,.strip[data-sky="dawn"] .cloud{opacity:.6}
.sky .stars{position:absolute; inset:0; opacity:0; transition:opacity 1s}
.strip[data-sky="night"] .sky .stars{opacity:1}
.sky .stars i{position:absolute; width:var(--s); height:var(--s); border-radius:50%; background:#FFF6D8; animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.7)} 50%{opacity:1; transform:scale(1.2)}}
.strip[data-sky="night"] .ground{background:linear-gradient(#2F4A22,#1E3309); border-top-color:#1E3309}

/* ---------- people say hi ---------- */
.person{cursor:pointer}
.person.hi .say{opacity:1; transform:translateX(-50%)}
.person:first-child.hi .say,.person:last-child.hi .say{transform:none}
.person.hop .av{animation:hop .6s ease-out}
@keyframes hop{0%{transform:translateY(0)} 30%{transform:translateY(-12px) rotate(-3deg)} 55%{transform:translateY(0)} 75%{transform:translateY(-5px) rotate(2deg)} 100%{transform:translateY(0)}}
.spark{position:absolute; width:14px; height:14px; z-index:3; pointer-events:none; background:var(--c,#E23260);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C4 15 3 10 6.5 7.5 9 5.8 11.3 7 12 9 12.7 7 15 5.8 17.5 7.5 21 10 20 15 12 21Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C4 15 3 10 6.5 7.5 9 5.8 11.3 7 12 9 12.7 7 15 5.8 17.5 7.5 21 10 20 15 12 21Z'/></svg>") center/contain no-repeat;
  animation:rise-heart 1.4s ease-out forwards}
@keyframes rise-heart{0%{opacity:0; transform:translate(0,6px) scale(.5)} 20%{opacity:1} 100%{opacity:0; transform:translate(var(--dx,0),-46px) scale(1.15)}}

/* ---------- dogs ---------- */
.dog{background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent}
.dog:focus-visible{outline:3px solid #F2678E; outline-offset:4px; border-radius:12px}
.dog .fl,.dog .fl svg{display:block}
.dog:hover,.dog:hover .fl,.dog:hover svg,.dog.paused,.dog.paused .fl,.dog.paused svg,.dog.asleep,.dog.asleep .fl,.dog.asleep svg{animation-play-state:paused}
.dog.asleep svg{animation:none}
.dog:hover .nm,.dog.paused .nm{transform:translateX(-50%) scale(1.08)}
.dog .nm{transition:transform .15s}
.dog .need{display:none; position:absolute; top:-20px; left:50%; width:22px; height:22px; margin-left:-11px; padding:3px; border-radius:50%; background:#fff; border:1.5px solid var(--blush); box-shadow:0 2px 6px rgba(30,51,9,.15); place-items:center; animation:float 1.6s ease-in-out infinite; z-index:2}
.dog .need.on{display:grid}
.dog .need svg{width:100%; height:100%; display:block}
.ground-hint{position:absolute; right:14px; top:10px; z-index:2; font:500 10px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); opacity:.85; pointer-events:none}
.strip[data-sky="night"] .ground-hint{color:#C8D9B8}

.dg .m-zz,.dg .m-sad{display:none}
.dg.mood-zz .m-open,.dg.mood-zz .m-smile,.dg.mood-sad .m-open,.dg.mood-sad .m-smile{display:none}
.dg.mood-zz .m-zz,.dg.mood-sad .m-sad{display:inline}
.dg .d-tail{transform-box:view-box; transform-origin:17px 38px; animation:wag 1.1s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(11deg)}}
.dg.mood-sad .d-tail{animation:none; transform:rotate(22deg)}
.dg.mood-zz .d-tail{animation:none}
.dg .d-zzz{opacity:0}
.dg.mood-zz .d-zzz{opacity:1; animation:zzz 3s ease-in-out infinite}
@keyframes zzz{0%,100%{transform:translate(0,2px); opacity:.2} 50%{transform:translate(2px,-3px); opacity:1}}
.dg .d-head{transform-box:view-box; transform-origin:68px 44px}
.dg .blink{transform-box:fill-box; transform-origin:center}

/* ---------- the care card ---------- */
.dogcard{position:fixed; z-index:30; width:272px; max-width:calc(100% - 16px); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:14px 14px 12px; box-shadow:0 14px 34px rgba(30,51,9,.22); animation:cardpop .22s ease-out; color:var(--ink,#3C3C3C)}
@keyframes cardpop{from{opacity:0; transform:translateY(8px) scale(.96)}}
.dc-x{position:absolute; right:8px; top:6px; width:28px; height:28px; border-radius:50%; border:0; background:var(--mist); color:var(--green); font-size:18px; line-height:1; cursor:pointer}
.dc-x:hover{background:var(--blush)}
.dc-top{display:flex; gap:10px; align-items:center; padding-right:26px}
.dc-top h3{font-family:var(--font-display,'DM Serif Display',serif); font-size:24px; line-height:1; color:var(--green); margin:0}
.dc-breed{font:500 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:3px 0 6px}
.dc-say{font-size:13px; line-height:1.3; min-height:2.6em; margin:0}
.dc-dog{position:relative; width:112px; flex:none; background:var(--blush); border-radius:16px; padding:6px 2px 2px; overflow:hidden}
.dc-dog svg{display:block; width:100%; height:auto}
.dc-meters{display:grid; gap:7px; margin:10px 0}
.mt{display:flex; align-items:center; gap:7px}
.mt-i{width:17px; height:17px; flex:none} .mt-i svg{display:block; width:100%; height:100%}
.mt-l{font-size:12px; font-weight:700; width:46px; color:var(--green)}
.mt-b{flex:1; height:10px; border-radius:99px; background:var(--mist); overflow:hidden; display:block}
.mt-b i{display:block; height:100%; border-radius:99px; transition:width .5s ease}
.mt-n{font:500 11px var(--font-mono); width:24px; text-align:right; color:var(--muted)}
.dc-acts{display:flex; gap:8px}
.dc-acts .btn{flex:1; justify-content:center; padding-left:6px; padding-right:6px}
.dc-hint{font-size:10.5px; color:var(--muted); margin:9px 0 0; line-height:1.3}

.dc-fx{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.dc-fx .k{position:absolute; top:-8px; width:7px; height:7px; border-radius:50%; background:#B07A45; animation:kib .9s ease-in forwards}
.dc-fx .k1{left:52%} .dc-fx .k2{left:62%; animation-delay:.18s; background:#C99560} .dc-fx .k3{left:72%; animation-delay:.36s}
@keyframes kib{to{transform:translateY(62px); opacity:0}}
.dc-fx .ball{position:absolute; left:6px; bottom:6px; width:16px; height:16px; border-radius:50%; background:linear-gradient(90deg,transparent 42%,#fff 42% 58%,transparent 58%),#F2678E; animation:ball 1.3s ease-in-out forwards}
@keyframes ball{0%{transform:translate(0,0)} 25%{transform:translate(28px,-34px)} 50%{transform:translate(58px,0)} 75%{transform:translate(78px,-22px)} 100%{transform:translate(92px,0)}}
.dc-fx .h{position:absolute; top:34%; width:16px; height:16px; background:#E23260;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C4 15 3 10 6.5 7.5 9 5.8 11.3 7 12 9 12.7 7 15 5.8 17.5 7.5 21 10 20 15 12 21Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C4 15 3 10 6.5 7.5 9 5.8 11.3 7 12 9 12.7 7 15 5.8 17.5 7.5 21 10 20 15 12 21Z'/></svg>") center/contain no-repeat;
  animation:rise-heart 1.3s ease-out forwards}
.dc-fx .h1{left:30%} .dc-fx .h2{left:55%; animation-delay:.2s; background:#F2678E} .dc-fx .h3{left:75%; animation-delay:.4s}
.dc-dog.fx-eat .d-head{animation:munch .28s ease-in-out 5}
@keyframes munch{50%{transform:translateY(3px) rotate(2deg)}}
.dc-dog.fx-play svg{animation:jump .45s ease-out 3}
@keyframes jump{40%{transform:translateY(-12px) rotate(-2deg)}}
.dc-dog.fx-love svg{animation:snug .5s ease-in-out 2}
.dc-dog.fx-love .d-tail{animation-duration:.22s}
@keyframes snug{50%{transform:scale(1.05) rotate(2deg)}}
.dc-dog.fx-no svg{animation:nope .5s ease-in-out}
@keyframes nope{20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}}

/* ---------- confetti ---------- */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:999; overflow:hidden}
.confetti i{position:absolute; top:-20px; border-radius:2px; animation:conf 2.4s ease-in forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(var(--dx),105vh) rotate(var(--r))}}

/* ---------- entrances, hover, pulses ---------- */
.pc,.card.olive,.sec-h,.strip{animation:rise .55s ease-out backwards}
@keyframes rise{from{opacity:0; transform:translateY(14px)}}
.pc:nth-child(2){animation-delay:.08s} .pc:nth-child(3){animation-delay:.16s} .pc:nth-child(4){animation-delay:.24s} .pc:nth-child(5){animation-delay:.32s}
.card.olive{animation-delay:.05s} .strip{animation-delay:.12s}
.person{animation:pop .5s cubic-bezier(.3,1.6,.5,1) backwards}
.person:nth-child(1){animation-delay:.2s} .person:nth-child(2){animation-delay:.26s} .person:nth-child(3){animation-delay:.32s} .person:nth-child(4){animation-delay:.38s} .person:nth-child(5){animation-delay:.44s} .person:nth-child(6){animation-delay:.5s} .person:nth-child(7){animation-delay:.56s} .person:nth-child(8){animation-delay:.62s} .person:nth-child(9){animation-delay:.68s} .person:nth-child(10){animation-delay:.74s}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.8)}}
.pc{transition:transform .2s ease, box-shadow .2s ease}
.pc:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(30,51,9,.12)}
.pc .dot.live,.pc .dot.work,.pc .dot.needs{animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(132,154,40,.55)} 70%,100%{box-shadow:0 0 0 7px rgba(132,154,40,0)}}
.pc .st .tag{animation:needpulse 2s ease-in-out infinite}
@keyframes needpulse{50%{transform:scale(1.07)}}
.card.olive .face{animation:float 4s ease-in-out infinite}
.typing{stroke-dasharray:60; animation:typing 3.2s steps(14) infinite}
.typing.b{animation-delay:-1s} .typing.c{animation-delay:-2s}
@keyframes typing{0%{stroke-dashoffset:60} 55%,85%{stroke-dashoffset:0} 100%{stroke-dashoffset:-60}}

@media (prefers-reduced-motion: reduce){
  .dog .need{animation:none}
  .strip{transition:none}
}