/* Sheltie companions, paper and reading illustrations, and their independently pausable motion. */
.dog-stage { position: relative; height: 460px; isolation: isolate; display: grid; place-items: center; }
.dog-stage.is-paused *, .dog-stage.is-offscreen * { animation-play-state: paused !important; }

/* Motion toggles */
.dog-motion-toggle { position: absolute; inset: auto 0 0 auto; z-index: 5; width: auto; height: 44px; min-height: 44px; margin: 0; padding: var(--space-sm) 12px; border: 1px solid var(--color-rule); border-radius: 24px; background: var(--color-paper); font-size: 11px; line-height: 1.4; white-space: nowrap; }
.dog-motion-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.works-companion .dog-motion-toggle { inset: 0 -8px auto auto; width: 44px; padding: 0; border: 0; background: var(--color-clear); color: var(--color-muted); font-size: 12px; }
.footer-companion .dog-motion-toggle { width: 44px; padding: 0; border: 0; background: var(--color-clear); }
.resting-mascot .dog-motion-toggle { top: -18px; bottom: auto; min-height: 28px; padding: var(--space-xs); font-size: 10px; transform: translateY(-100%); }
.dog-motion-toggle:hover { color: var(--color-accent); }

/* Hero: paper collage portrait */
.paper-stage { perspective: 900px; min-width: 0; }
.paper-stage > *:not(button) { pointer-events: none; }
.paper-back { position: absolute; width: 64%; height: 77%; background: var(--color-surface); border: 1px solid var(--color-rule); transform: rotate(8deg); box-shadow: 0 12px 30px var(--color-sheet-shadow); animation: paper-drift 6s var(--ease-idle) infinite; }
.paper-photo { position: relative; width: 62%; padding: 20px var(--space-lg) var(--space-lg); background: var(--color-sheet); border: 1px solid var(--color-rule); transform: rotate(-7deg) rotateY(var(--turn, 0deg)); box-shadow: 0 20px 40px var(--color-sheet-shadow); transition: transform 500ms var(--ease-out); }
.paper-photo img { width: 100%; height: 280px; object-fit: contain; transform-origin: 50% 90%; animation: portrait-sway 4s var(--ease-idle) infinite; }
.photo-corner { position: absolute; width: 70px; height: 25px; background: var(--color-rule); opacity: .55; left: 32%; top: -12px; transform: rotate(-5deg); }
/* Asymmetric sprigs, each drawn continuously through stem and leaf outlines. */
.leaf-orbit { position: absolute; width: min(100%, 440px); height: auto; overflow: visible; transform-origin: center; animation: botanical-sway 8s var(--ease-idle) infinite; }
.botanical-line { fill: none; stroke: var(--study-stem); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: botanical-draw 2.7s var(--ease-linear) var(--draw-delay, .1s) both; }
.botanical-pigment { opacity: 0; animation: botanical-wash .45s var(--ease-idle) var(--wash-delay) both; }
.botanical-fill { fill: url(#botanical-wash); }
.botanical-vein { fill: none; stroke: var(--study-leaf-dark); stroke-width: .55; stroke-linecap: round; opacity: .65; }

/* Works: sitting companion */
.works-companion.dog-stage { width: 154px; height: 190px; margin: 0 0 var(--space-lg); padding-bottom: 36px; }
.refined-dog { display: block; width: 100%; height: auto; overflow: visible; }
.companion-tail { transform-origin: 163px 194px; animation: companion-wag 1.8s var(--ease-idle) infinite; }
.companion-tail > path:last-child { stroke: var(--dog-sable); stroke-width: 1.5; stroke-linejoin: round; }
.companion-head { transform-origin: 119px 143px; animation: companion-look 7s var(--ease-idle) infinite; }
.companion-eyes { transform-box: fill-box; transform-origin: center; animation: companion-blink 4.6s var(--ease-linear) infinite; }

/* Works: project diagrams play once on arrival and on interaction */
.project-visual { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.project:hover .project-visual, .project:focus-within .project-visual { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 16px 30px var(--color-sheet-shadow); }
.project-visual.flow-running > .line-icon { animation: project-nod 1.1s var(--ease-idle) both; }
.project-visual.flow-running .flow-path span { animation: flow-step 1.2s var(--ease-flow) both; }
.project-visual.flow-running .flow-path span:nth-child(2) { animation-delay: .35s; }
.project-visual.flow-running .flow-path span:nth-child(3) { animation-delay: .7s; }

/* Reading room: notebook with a resting companion */
.reading-display { position: relative; min-width: 0; padding-top: var(--space-xl); }
.reading-object { position: relative; width: 86%; margin-inline: auto; padding-block: var(--space-md); isolation: isolate; }
.reading-sheet { position: relative; width: 100%; padding: var(--space-xl); border: 1px solid var(--color-rule); background: var(--color-sheet); border-radius: 0; transform: rotate(-5deg); box-shadow: 0 14px 32px var(--color-sheet-shadow); transition: transform 650ms var(--ease-out); }
.sheet-back { position: absolute; inset: 16px 0; background: var(--color-surface); border: 1px solid var(--color-rule); transform: rotate(3deg) translate(12px, 8px); z-index: -1; transition: transform 650ms var(--ease-out); }
.reading-object:hover .sheet-back { transform: rotate(5deg) translate(16px, 8px); }
.sheet-topline, .sheet-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: 11px; color: var(--color-muted); }
.sheet-topline { padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); letter-spacing: .08em; }
.sheet-staple { width: 24px; height: 5px; border: 1px solid var(--color-rule); position: absolute; top: -3px; left: 36px; transform: rotate(-4deg); background: var(--color-paper); }
.reading-sheet .sheet-title { font-family: var(--font-display); font-size: clamp(44px, 5vw, 68px); line-height: .95; letter-spacing: -.045em; margin-block: var(--space-xl); }
.sheet-title span { display: block; margin-top: var(--space-md); font-family: var(--font-japanese); font-size: 16px; line-height: 1.5; letter-spacing: .06em; }
.sheet-rule { width: 40px; height: 2px; background: var(--color-accent); margin-bottom: var(--space-lg); }
.sheet-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-xl); }
.sheet-label { font-size: 10px; letter-spacing: .14em; color: var(--color-muted); }
.reading-lines { margin-bottom: var(--space-lg); }
.reading-lines i { display: block; width: 100%; height: 1px; background: var(--color-rule); margin-top: 12px; }
.reading-lines i:last-child { width: 65%; }
.sheet-bottom { border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.sheet-bottom > span:last-child { font-size: 22px; }
.sheet-bookmark { position: absolute; right: -14px; top: 54px; background: var(--color-accent); color: var(--color-paper); writing-mode: vertical-rl; font-size: 10px; letter-spacing: .14em; padding: var(--space-md) var(--space-sm) var(--space-lg); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 92%, 0 100%); }
.sheet-paw { position: absolute; bottom: 65px; right: 36px; width: 28px; height: 28px; color: var(--color-accent); opacity: .45; transform: rotate(16deg); }
.resting-mascot.dog-stage { position: absolute; display: block; top: -20px; right: 11%; left: auto; z-index: 3; width: 150px; height: auto; min-height: 0; }
.soft-rest-svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 2px 1px var(--color-sheet-shadow)); }
.rest-back { transform-origin: 170px 164px; animation: visible-breath 4s var(--ease-idle) infinite; }
.rest-face { transform-origin: 92px 143px; animation: rest-nestle 4s var(--ease-idle) infinite; }

/* Contact: paw trail replays on arrival */
.contact-replay { position: absolute; bottom: var(--space-lg); left: 0; min-height: 44px; border: 1px solid var(--color-rule); background: var(--color-paper); font: inherit; font-size: 12px; padding: var(--space-sm) var(--space-md); }
.contact-replay:hover { background: var(--color-surface); }
.paw-art { position: relative; width: min(100%, 300px); height: 175px; margin-top: var(--space-xl); }
.paw-art .identity-paw { position: absolute; width: 26px; height: 26px; opacity: 0; }
.paw-art .identity-paw:nth-child(1) { left: 5%; top: 110px; transform: rotate(25deg); }
.paw-art .identity-paw:nth-child(2) { left: 24%; top: 90px; transform: rotate(45deg); animation-delay: 250ms; }
.paw-art .identity-paw:nth-child(3) { left: 42%; top: 96px; transform: rotate(65deg); animation-delay: 500ms; }
.paw-art .identity-paw:nth-child(4) { left: 63%; top: 63px; transform: rotate(60deg); animation-delay: 750ms; }
.paw-art .identity-paw:nth-child(5) { left: 82%; top: 55px; transform: rotate(75deg); animation-delay: 1000ms; }
.contact-running .paw-art .identity-paw { animation-name: adopted-paw-arrival; animation-duration: 700ms; animation-timing-function: var(--ease-out); animation-fill-mode: both; }

/* Footer companion */
.footer-companion-wrap { display: flex; justify-content: flex-end; }
.footer-companion.dog-stage { display: block; width: 150px; height: auto; min-height: 0; padding-bottom: var(--space-2xl); }

@keyframes portrait-sway { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-7px); } }
@keyframes paper-drift { 0%,100% { transform: rotate(8deg); } 50% { transform: rotate(10deg) translateY(-3px); } }
@keyframes botanical-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes botanical-wash { to { opacity: var(--wash-opacity, .65); } }
@keyframes botanical-sway { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
@keyframes companion-wag { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
@keyframes companion-look { 0%,40%,100% { transform: rotate(0); } 55%,75% { transform: rotate(-5deg); } }
@keyframes companion-blink { 0%,42%,48%,100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes project-nod { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-12deg) translateY(-5px); } 70% { transform: rotate(5deg); } }
@keyframes flow-step { 0%,100% { color: var(--color-muted); transform: translateY(0); } 45% { color: var(--color-accent); transform: translateY(-5px); } }
@keyframes visible-breath { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.065); } }
@keyframes rest-nestle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes adopted-paw-arrival { from { opacity: 0; } to { opacity: .55; } }

@media (max-width: 1100px) {
 .dog-stage { height: 420px; }
}
@media (max-width: 768px) {
 .dog-stage { height: 350px; width: min(100%, 420px); justify-self: center; }
 .paper-stage .dog-motion-toggle { width: 44px; padding: 0; border: 0; background: var(--color-clear); }
 .resting-mascot .dog-motion-toggle { min-height: 44px; }
 .paper-photo img { height: 220px; }

 .works-companion.dog-stage { width: 130px; height: 165px; }
 .reading-display { padding-top: var(--space-2xl); }
 .reading-sheet { padding: var(--space-lg); }
 .reading-sheet .sheet-title { font-size: 58px; }
 .sheet-columns { gap: var(--space-lg); }
 .resting-mascot.dog-stage { top: 2px; right: 12%; width: 125px; }
 .paw-art { height: 150px; margin-top: var(--space-lg); }
}
@media (max-width: 374px) {
 .dog-stage { height: 320px; }
 .reading-sheet .sheet-title { font-size: 49px; }
}
@media (prefers-reduced-motion: reduce) {
 .dog-motion-toggle { display: none; }
 .leaf-orbit { animation: none; }
 .botanical-line { animation: none; stroke-dashoffset: 0; }
 .botanical-pigment { animation: none; opacity: var(--wash-opacity, .65); }
 .project:hover .project-visual, .project:focus-within .project-visual { transform: none; }
 .reading-object:hover .sheet-back { transform: rotate(3deg) translate(12px, 8px); }
 .paw-art .identity-paw { opacity: .35; }
}