/* 25 · Home: the 17 · Walled garden page with the 24-map version 7 garden and Jocelyn's designed pup */

/* The garden map (isometric only) */
.garden .view { display: none; }
.garden[data-show="isometric"] [data-view="isometric"] { display: block; }
.garden .map { cursor: pointer; }
.map .label text { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; fill: #262A22; }
:root { --sage-deep: #4E6B48; }
/* Places lift when you point at them */
.map a { cursor: pointer; }
.map .part, .map .label { transition: transform 0.25s ease; }
.map[data-hot="visitor"] [data-place="visitor"], .map[data-hot="photos"] [data-place="photos"],
.map[data-hot="art"] [data-place="art"], .map[data-hot="other"] [data-place="other"],
.map[data-hot="about"] [data-place="about"], .map[data-hot="projects"] [data-place="projects"] { transform: translateY(-6px); }
.map .label text { font-family: "Instrument Serif", Georgia, serif; fill: var(--ink); pointer-events: none; }
.map[data-hot] .label[data-place] .pill { transition: fill 0.2s; }
.map[data-hot="visitor"] .label[data-place="visitor"] .pill, .map[data-hot="photos"] .label[data-place="photos"] .pill,
.map[data-hot="art"] .label[data-place="art"] .pill, .map[data-hot="other"] .label[data-place="other"] .pill,
.map[data-hot="about"] .label[data-place="about"] .pill, .map[data-hot="projects"] .label[data-place="projects"] .pill { fill: #FFFFFF; }
.map .label:focus-visible { outline: none; }
.map .label:focus-visible .pill { stroke: var(--sage-deep); stroke-width: 3; }

/* Movement */
.map .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4.5s ease-in-out infinite alternate; }
.map .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 3.6s ease-out infinite; }
.map .fall { stroke-dasharray: 5 6; animation: fall 0.7s linear infinite; }
.map .spray { transform-box: fill-box; transform-origin: center; animation: spray 0.9s ease-in-out infinite alternate; }
.map .flag { transform-box: fill-box; transform-origin: 0% 50%; animation: flag 1.2s ease-in-out infinite alternate; }
.map .swing { animation: swing 2.8s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes ripple { from { transform: scale(0.55); opacity: 0.9; } to { transform: scale(1.25); opacity: 0; } }
@keyframes fall { to { stroke-dashoffset: -11; } }
@keyframes spray { from { transform: scale(0.8) translateY(1px); } to { transform: scale(1.15) translateY(-2px); } }
@keyframes flag { from { transform: skewY(-5deg) scaleX(0.92); } to { transform: skewY(5deg) scaleX(1.04); } }
@keyframes swing { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }

/* The designed pup from 23-characters. Its walk is driven from map.js, step by step with the ground it covers */
.pup { pointer-events: none; }
.pup .bp * { animation: none !important; }
.bp .upper, .bp .head, .bp .foot, .bp .hand, .bp .eye, .bp .ear, .bp .tail { transform-box: fill-box; }
.bp .upper { transform-origin: 50% 100%; animation: bp-waddle 0.8s ease-in-out infinite; }
.bp .head { transform-origin: 50% 90%; animation: bp-head 0.8s ease-in-out infinite; }
.bp .foot { animation: bp-step 0.8s ease-in-out infinite; }
.bp .foot.l { animation-delay: -0.4s; }
.bp .hand { transform-origin: 50% 8%; animation: bp-swing 0.8s ease-in-out infinite alternate; }
.bp .hand.r { animation-direction: alternate-reverse; }
.bp .eye { transform-origin: center; animation: bp-blink 4.2s infinite; }
.bp .ear { transform-origin: 85% 4%; animation: bp-ear 0.8s ease-in-out infinite alternate; }
.bp .ear.r { transform-origin: 15% 4%; animation-direction: alternate-reverse; }
.bp .tail { animation: bp-wag 0.4s ease-in-out infinite alternate; }
.bp.is-side .upper { animation-name: bp-bob; }
.bp.is-side .foot { transform-origin: 50% 0; animation-name: bp-stride; }
@keyframes bp-waddle { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 25%, 75% { transform: rotate(0deg) translateY(-7px); } 50% { transform: rotate(1.5deg) translateY(0); } }
@keyframes bp-bob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-7px); } }
@keyframes bp-step { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-15px); } }
@keyframes bp-stride { 0%, 100% { transform: rotate(-12deg); } 25% { transform: translateY(-10px) rotate(0deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(0deg); } }
@keyframes bp-head { 0%, 100% { transform: rotate(0.8deg); } 50% { transform: rotate(-0.8deg); } }
@keyframes bp-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes bp-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes bp-ear { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes bp-wag { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) {
.map .sway, .map .ripple, .map .fall, .map .spray, .map .flag, .map .swing, .bp .upper, .bp .head, .bp .foot, .bp .hand, .bp .ear, .bp .tail { animation: none; }
.map .part, .map .label { transition: none; }
}

/* Hero: the cursor is hidden while the light moves over the orchids (from v6.css), as she asked */

/* Status bar: the battery charges as you scroll down the page */
.battery span { width: var(--charge, 40%); transition: width 0.2s ease-out; }

/* No focus frame around the map area when it's clicked (the section is focusable so "Skip to the map"
   works). Keyboard users still get a highlight on each place label. */
#home:focus, #home:focus-visible, .garden:focus, .map:focus, .map:focus-visible { outline: none; }
.map .part:focus, .map .part:focus-visible { outline: none; }

/* A bigger map: wider on screens, and a little wider to swipe on phones */
.island-screen { padding-top: 50px; padding-bottom: 20px; align-content: start; }
.island-screen .hint { margin-bottom: 0; }
.island-screen .map-scroll { margin-top: -50px; }
.map-scroll { max-width: min(1330px, max(660px, calc((100svh - 130px) * 1.65))); }
@media (max-width: 720px) {
  .map { width: 930px; }
}

/* A paw for the mouse cursor, everywhere on the page (the hero still hides it while the light shows) */
html, body, a, button, .map, .garden .map, .map a, .place, .unlock-knob, [data-soon] {
  cursor: url("paw.svg") 14 16, auto;
}
/* Pressing the mouse curls the paw into a fist, like it's grabbing (open → curl → fist, and back on release) */
html.paw-curl, html.paw-curl * { cursor: url("paw-curl.svg") 14 16, auto !important; }
html.paw-fist, html.paw-fist * { cursor: url("paw-fist.svg") 14 16, auto !important; }
@media (hover: hover) and (pointer: fine) {
  .intro-zoom, html.paw-curl .intro-zoom, html.paw-fist .intro-zoom { cursor: none !important; }
}

/* Home Projects heading: "More projects →" sits on the right of the title (under the cards on phones) */
.section-head.has-more { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.more-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; padding-bottom: 6px; }
.more-link span { display: inline-block; transition: transform 0.3s; }
.more-link:hover span, .more-link:focus-visible span { transform: translateX(5px); }
.more-link.is-phone { display: none; }
@media (max-width: 720px) {
  .section-head.has-more .more-link { display: none; }
  .more-link.is-phone { display: block; width: fit-content; margin: 28px auto 0; padding: 0; }
}