/* ---------- layers ---------- */
#sky, #grass-front { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#sky { z-index: 0; }
.stage { z-index: 1; }
#yard { position: fixed; inset: 0; z-index: 2; pointer-events: none; --k: 1; }
#grass-front { z-index: 3; }
.top, .bar { z-index: 5; }

.top__right { display: grid; justify-items: end; gap: 2px; text-align: right; }
.env { font-variant-numeric: tabular-nums; }
#wind-arrow { display: inline-block; font-style: normal; transition: transform .6s; }

/* cards and the detail page keep their own dark text whatever the sky does */
.card, .detail { color: #16130f; }

/* ---------- legibility over sky (header) and grass (footer) ---------- */
body { transition: background-color 1s; }
.top { text-shadow: 0 1px 10px rgba(255, 255, 255, .55); }
/* the subtitle and the Jakarta line follow the name: a softer ink on a light sky, a softer cream on a dark one */
.sub, .env { color: rgba(22, 19, 15, .68); }

body.sky-dark .top { color: #f1eee6; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
body.sky-dark .hint { color: rgba(241, 238, 230, .72); }
body.sky-dark .sub, body.sky-dark .env { color: rgba(241, 238, 230, .8); }
body.sky-dark .hello { background: #f1eee6; color: #16130f; }
body.sky-dark .rope-line { stroke: #d8d1c3; }
body.sky-dark .rope-shadow { stroke: rgba(0, 0, 0, .25); }

/* at night and underground the tab bar turns to smoked glass */
body.is-night .tabs, body.is-under .tabs {
  background: rgba(24, 18, 13, .42); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 12px 26px -14px rgba(0, 0, 0, .7);
}
body.is-night .tabs button, body.is-under .tabs button { color: rgba(241, 238, 230, .72); }
body.is-night .tabs button:hover, body.is-under .tabs button:hover { color: #fff; }
body.is-night .tabs button[aria-selected="true"], body.is-under .tabs button[aria-selected="true"] { color: var(--ink); }
body.is-night .tabs button:focus-visible, body.is-under .tabs button:focus-visible { outline-color: #f1eee6; }
body.is-night .card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), inset 0 .08em 0 rgba(255, 255, 255, .75),
    0 1.2em 2.4em -1em rgba(0, 0, 0, .6), 0 0 3em -.5em rgba(255, 226, 170, .28);
}

/* ---------- pets ---------- */
.pet {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; will-change: transform;
}
.pet--dog { width: calc(150px * var(--k)); height: calc(100px * var(--k)); }
.pet--cat { width: calc(130px * var(--k)); height: calc(100px * var(--k)); }
.pet__flip { display: block; width: 100%; height: 100%; }
.pet svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pet:focus { outline: none; }
.pet:focus-visible .pet__flip { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 12px; }
.p-shadow { fill: rgba(20, 45, 15, .2); }

.pet__name {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%); z-index: 2;
  padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #16130f;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.pet:hover .pet__name, .pet.show-name .pet__name { opacity: 1; }
.pet:has(.pet__bubble.is-on) .pet__name { opacity: 0; }   /* the bubble speaks, the tag steps aside */

.pet__bubble {
  position: absolute; bottom: calc(100% + 12px); left: var(--head, 4%); z-index: 3;
  padding: 5px 11px; border-radius: 14px; background: #fff; color: #16130f;
  font: 800 calc(14px * var(--k)) / 1.1 ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: .02em; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
  opacity: 0; pointer-events: none;
}
.pet__bubble::after {
  content: ""; position: absolute; left: 16px; bottom: -5px; width: 10px; height: 10px;
  background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.pet__bubble.is-on { animation: pop .32s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.6); } to { opacity: 1; transform: none; } }
.pet--dog .pet__bubble { left: -4%; color: #b3261e; font-size: calc(16px * var(--k)); }

.zzz { position: absolute; left: 24%; top: 0; pointer-events: none; }
.zzz i {
  position: absolute; font: 700 13px/1 ui-sans-serif, system-ui, sans-serif; font-style: normal;
  color: #4f6a45; opacity: 0; animation: zzz 3.6s ease-in infinite;
}
.zzz i:nth-child(2) { animation-delay: 1.2s; }
.zzz i:nth-child(3) { animation-delay: 2.4s; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .8; } 100% { opacity: 0; transform: translate(14px, -34px) scale(1.2); } }
body.is-night .zzz i { color: #cfd6e6; }
.pet--dog.is-angry .zzz { display: none; }
.pet--cat .zzz { display: none; left: 66%; }
.pet--cat[data-pose="sleep"] .zzz { display: block; }

/* Jacky */
.j-body { transform-origin: 86px 94px; animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.02, 1.05); } }
.j-head { transform-origin: 46px 82px; transition: transform .25s var(--ease); }
.j-ear { transform-origin: 24px 44px; }
.pet--dog.twitch .j-ear { animation: twitch .45s; }
@keyframes twitch { 30% { transform: rotate(-16deg); } 60% { transform: rotate(6deg); } }
.j-open, .j-brows, .j-mouth-open, .j-happy { opacity: 0; }
/* after the tantrum: eyes open, a grin with the tongue out, tail going */
.is-happy .j-closed, .is-happy .j-mouth { opacity: 0; }
.is-happy .j-open, .is-happy .j-happy { opacity: 1; }
.is-happy .j-head { transform: translate(-2px, -5px) rotate(-3deg); }
.j-tail { transform-origin: 108px 54px; }
.is-happy .j-tail { animation: wag .22s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.pet--dog.is-happy .zzz { display: none; }

/* light follows the sky: warm at dusk, dimmer and cooler at night */
.pet svg { transition: filter 1s; }
body.sky-dark:not(.is-night) .pet svg { filter: sepia(.16) saturate(1.12) brightness(.96); }
body.is-night .pet svg { filter: brightness(.8) saturate(.78); }
.is-angry .j-closed, .is-angry .j-mouth { opacity: 0; }
.is-angry .j-open, .is-angry .j-brows { opacity: 1; }
.is-angry .j-mouth-open { animation: yap .4s steps(1) infinite; }
@keyframes yap { 0% { opacity: 1; } 55% { opacity: 0; } }
.is-angry .j-head { transform: translate(-3px, -9px) rotate(-7deg); }
.is-angry .j-body { animation: puff .45s ease-in-out infinite; }
@keyframes puff { 50% { transform: scale(1.07, 1.12); } }
.pet--dog.is-angry .pet__flip { animation: shake .3s linear 4; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* Tebu: poses */
.t-stand, .t-sit, .t-sleep { display: none; }
.pet--cat:not([data-pose]) .t-sit,
[data-pose="stand"] .t-stand, [data-pose="walk"] .t-stand, [data-pose="run"] .t-stand,
[data-pose="crouch"] .t-stand, [data-pose="pounce"] .t-stand, [data-pose="startle"] .t-stand,
[data-pose="sit"] .t-sit, [data-pose="swat"] .t-sit,
[data-pose="sleep"] .t-sleep { display: inline; }

.t-leg { transform-box: fill-box; transform-origin: 50% 8%; }
[data-pose="walk"] .t-leg { animation: step .56s ease-in-out infinite; }
[data-pose="walk"] .t-leg.b { animation-delay: -.28s; }
[data-pose="run"] .t-leg { animation: stride .26s linear infinite; }
[data-pose="run"] .t-leg.b { animation-delay: -.13s; }
@keyframes step { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes stride { 0%, 100% { transform: rotate(38deg); } 50% { transform: rotate(-38deg); } }
[data-pose="walk"] .t-core { animation: bob .28s ease-in-out infinite alternate; }
[data-pose="run"] .t-core { animation: bob .13s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-1.6px); } }

.t-tail { transform-origin: 28px 64px; animation: tail 2.6s ease-in-out infinite; }
@keyframes tail { 50% { transform: rotate(14deg); } }
.t-tail2 { transform-origin: 46px 91px; animation: flick 4s ease-in-out infinite; }
@keyframes flick { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-6deg); } }

[data-pose="crouch"] .t-core { transform-origin: 96px 96px; animation: wiggle .16s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: translateY(7px) rotate(7deg); } to { transform: translateY(7px) rotate(10deg); } }
[data-pose="crouch"] .t-tail { animation: tail .5s ease-in-out infinite; }
[data-pose="pounce"] .t-core { transform-origin: 64px 70px; transform: rotate(-14deg); }
[data-pose="pounce"] .t-leg.f { transform: rotate(-55deg); }
[data-pose="pounce"] .t-leg.h { transform: rotate(45deg); }
[data-pose="startle"] .t-core { transform-origin: 64px 96px; transform: scale(1.1, 1.18); }
[data-pose="startle"] .t-tail { animation: none; transform: rotate(40deg); }

.t-paw { transform-origin: 75px 66px; }
[data-pose="swat"] .t-paw { animation: swat .7s ease-in-out; }
@keyframes swat { 30% { transform: rotate(-150deg); } 55% { transform: rotate(-115deg); } 80% { transform: rotate(-150deg); } }

.t-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.t-pupils { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .15s; }

/* ---------- birds on the line (bird.js) ---------- */
.bird {
  position: absolute; left: 0; top: 0; display: block; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; will-change: transform; -webkit-tap-highlight-color: transparent;
}
.bird[hidden] { display: none; }
.bird--sparrow { width: calc(46px * var(--k)); height: calc(40px * var(--k)); }
.bird--owl { width: calc(52px * var(--k)); height: calc(58px * var(--k)); }
.bird:focus { outline: none; }
.bird__bob, .bird__flip { display: block; width: 100%; height: 100%; }
.bird__bob { transform-origin: 50% 100%; }
.bird svg { display: block; width: 100%; height: 100%; overflow: visible; transition: filter 1s; }
body.sky-dark:not(.is-night) .bird svg { filter: sepia(.16) saturate(1.12) brightness(.96); }
body.is-night .bird svg { filter: brightness(.88) saturate(.85); }

.bird__bubble {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); margin: 0 auto; width: max-content;
  padding: 3px 8px; border-radius: 10px; background: #fff; color: #16130f;
  font: 800 12px/1.1 ui-sans-serif, system-ui, -apple-system, sans-serif; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16); opacity: 0; pointer-events: none;
}
.bird__bubble.is-on { animation: pop .32s var(--ease) both; }

/* landing squash, a startled jump */
.bird.is-landing .bird__bob { animation: land .38s var(--ease); }
@keyframes land { 0% { transform: scale(1.12, .82); } 55% { transform: scale(.95, 1.07); } 100% { transform: none; } }
.bird[data-act="startle"] .bird__bob { transform: scale(.9, 1.12); transition: transform .1s; }

/* sparrow */
.b-head { transform-origin: 28px 21px; transition: transform .25s var(--ease); }
.b-wing { transform-origin: 22px 20px; }
.b-tail { transform-origin: 13px 25px; }
.b-beak2 { transform-origin: 37.4px 16px; }
.bird--sparrow .bird__bob { animation: hopidle 2.6s ease-in-out infinite; }
@keyframes hopidle { 50% { transform: scale(1.02, .98); } }
.bird--sparrow[data-act="look"] .b-head { animation: tilt .6s ease-in-out; }
@keyframes tilt { 50% { transform: rotate(-14deg); } }
.bird--sparrow[data-act="peck"] .b-head { animation: peck .7s ease-in-out; }
@keyframes peck { 20%, 60% { transform: rotate(40deg) translate(1px, 3px); } 40%, 80% { transform: rotate(4deg); } }
.bird--sparrow[data-act="preen"] .b-head { animation: preen 1.3s ease-in-out; }
@keyframes preen { 15%, 85% { transform: rotate(-62deg) translate(-5px, 4px); } 35% { transform: rotate(-70deg) translate(-6px, 5px); } 60% { transform: rotate(-58deg) translate(-5px, 3px); } }
.bird--sparrow[data-act="preen"] .b-wing { animation: lift 1.3s ease-in-out; }
@keyframes lift { 15%, 85% { transform: rotate(-10deg); } }
.bird--sparrow[data-act="tail"] .b-tail { animation: flicktail .5s ease-in-out; }
@keyframes flicktail { 30%, 70% { transform: rotate(-24deg); } 50% { transform: rotate(8deg); } }
.bird--sparrow[data-act="chirp"] .b-head { transform: rotate(-12deg); }
.bird--sparrow[data-act="chirp"] .b-beak2 { animation: chirp .3s steps(1) 3; }
@keyframes chirp { 0% { transform: rotate(26deg); } 50% { transform: none; } }
.bird--sparrow[data-act="hop"] .bird__bob { animation: crouch .42s ease-in-out; }
@keyframes crouch { 0%, 100% { transform: scale(1.06, .9); } 40% { transform: scale(.94, 1.08); } }
.bird--sparrow.is-balancing .b-wing { animation: balance .12s ease-in-out infinite alternate; }
@keyframes balance { from { transform: rotate(-38deg); } to { transform: rotate(-6deg); } }
.bird--sparrow[data-state="fly"] .b-wing { animation: flap .13s ease-in-out infinite alternate; }
@keyframes flap { from { transform: rotate(-80deg); } to { transform: rotate(28deg); } }
.bird[data-state="fly"] .b-legs, .bird[data-state="fly"] .o-feet { opacity: 0; }
.bird--sparrow[data-state="fly"] .bird__bob { animation: none; }

/* owl */
.o-head { transform-origin: 26px 32px; transition: transform .3s var(--ease); }
.o-body { transform-origin: 26px 52px; }
.o-pupils { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .2s; }
.o-lids { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: owlblink 6s infinite; }
@keyframes owlblink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.bird--owl[data-act="blink"] .o-lids { animation: owlblink2 .5s ease-in-out; }
@keyframes owlblink2 { 25%, 75% { transform: scaleY(1); } 50% { transform: scaleY(.2); } }
.bird--owl[data-act="turn"] .o-head { animation: owlturn 1.8s ease-in-out; }
@keyframes owlturn { 20%, 42% { transform: rotate(-24deg); } 62%, 84% { transform: rotate(20deg); } }
.bird--owl[data-act="hoo"] .o-head { animation: hoo 1.3s ease-in-out; }
@keyframes hoo { 20%, 40%, 60% { transform: translateY(-1.5px) scale(1.05); } 30%, 50% { transform: none; } }
.bird--owl[data-act="ruffle"] .o-body { animation: ruffle .7s ease-in-out; }
@keyframes ruffle { 30% { transform: scale(1.12, 1.05); } 60% { transform: scale(.97); } }
.b-wing--l { transform-origin: 13px 29px; }
.b-wing--r { transform-origin: 39px 29px; }
.bird--owl.is-balancing .b-wing--l { animation: owlbalL .2s ease-in-out infinite alternate; }
.bird--owl.is-balancing .b-wing--r { animation: owlbalR .2s ease-in-out infinite alternate; }
@keyframes owlbalL { to { transform: rotate(40deg); } }
@keyframes owlbalR { to { transform: rotate(-40deg); } }
.bird--owl[data-state="fly"] .b-wing--l { animation: owlflapL .26s ease-in-out infinite alternate; }
.bird--owl[data-state="fly"] .b-wing--r { animation: owlflapR .26s ease-in-out infinite alternate; }
@keyframes owlflapL { from { transform: rotate(20deg); } to { transform: rotate(115deg); } }
@keyframes owlflapR { from { transform: rotate(-20deg); } to { transform: rotate(-115deg); } }

/* Tebu watching a bird: tail going */
.pet--cat.is-watching .t-tail2 { animation-duration: .9s; }
.pet--cat.is-watching .t-tail { animation-duration: .7s; }

@media (max-width: 560px) {
  .env { font-size: 12px; max-width: 58vw; }
}
@media (prefers-reduced-motion: reduce) {
  .j-body, .t-tail, .t-tail2, .t-eyes, .zzz i { animation: none; }
  .pet--dog.is-angry .pet__flip, .is-angry .j-body { animation: none; }
}