/* ══ The collie and friends (Components/Shared/HomeArt), on any page ══════════════════════════
   Motion here is slow and small on purpose: a tail thump, a head tilt, a blink, a breath. Every
   animation stops under prefers-reduced-motion, leaving a still picture. */

/* The red collie is a sable: a deep golden brown with darker tipping and bright white markings.
   (A lighter orange with cream made it look like a fox.) */
:root {
    --dog-coat: #C8682F;
    --dog-coat-dark: #8E441E;
    --dog-cream: #FFFCF7;
    --dog-shade: #ECE2D6;
    --dog-ear-inner: #D98C6C;
    --dog-brow: #8E441E;
    --dog-blush: #FF8F7A;
    --dog-eye: #17112B;
    --dog-eye-ring: transparent;
    --dog-lid: #17112B;
}

/* The black-and-white collie: same drawings, swapped colours. Its eyes, nose and closed lids sit
   on black fur, so they get a soft grey outline to stay readable. */
.dog--bw {
    --dog-coat: #2B2530;
    --dog-coat-dark: #141116;
    --dog-cream: #FFFFFF;
    --dog-shade: #E4DEEA;
    --dog-ear-inner: #6B5C70;
    --dog-brow: #7C7086;
    --dog-blush: transparent;
    --dog-eye: #0B090D;
    --dog-eye-ring: #8D8297;
    --dog-lid: #B3A9BD;
}

.dog-coat { fill: var(--dog-coat); }
.dog-coat-dark { fill: var(--dog-coat-dark); }
.dog-cream { fill: var(--dog-cream); }
.dog-shade { fill: var(--dog-shade); }
.dog-ear-inner { fill: var(--dog-ear-inner); }
.dog-ink { fill: #17112B; }
.dog-nose { fill: #17112B; stroke: var(--dog-eye-ring); stroke-width: 1.2; }
.dog-eye { fill: var(--dog-eye); stroke: var(--dog-eye-ring); stroke-width: 1.2; }
.dog-tongue { fill: #FF6F8E; }
.dog-blush { fill: var(--dog-blush); opacity: 0.35; }
.dog-brow { fill: none; stroke: var(--dog-brow); stroke-width: 2.2; stroke-linecap: round; }
.dog-lid { fill: none; stroke: var(--dog-lid); stroke-width: 2.4; stroke-linecap: round; }

.dog-art { display: block; height: auto; }
.dog-art--sm { width: 5.5rem; }
.dog-art--md { width: 8rem; }
.dog-art--lg { width: 11rem; }

/* ── Sitting collie (Collie.razor): tail thump, head tilt, blink ── */
.cl-shadow { fill: rgba(91, 33, 182, 0.14); }

.sd-tail {
    transform-box: view-box;
    transform-origin: 70px 180px;
    animation: sd-thump 0.5s ease-in-out infinite alternate;
}

/* The head is shared by every pose (CollieHead.razor), so it pivots on its own box: the neck. */
.sd-head {
    transform-box: fill-box;
    transform-origin: 27% 89%;
    animation: sd-tilt 4s ease-in-out infinite;
}

.cl-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: cl-blink 5s infinite;
}

@keyframes sd-thump {
    from { transform: rotate(-22deg); }
    to   { transform: rotate(10deg); }
}

@keyframes sd-tilt {
    0%, 55%, 100% { transform: rotate(0); }
    65%, 85%      { transform: rotate(-10deg); }
}

@keyframes cl-blink {
    0%, 94%, 100% { transform: scaleY(1); }
    97%           { transform: scaleY(0.1); }
}

/* Standing: the plumed tail wags. */
.st-tail {
    transform-box: view-box;
    transform-origin: 60px 98px;
    animation: st-wag 0.7s ease-in-out infinite alternate;
}

@keyframes st-wag {
    from { transform: rotate(-8deg); }
    to   { transform: rotate(10deg); }
}

/* Play bow: a little bounce at the back and a fast wag. */
.cl--bow {
    transform-box: fill-box;
    transform-origin: 80% 100%;
    animation: pb-bounce 1.4s ease-in-out infinite;
}

.pb-tail {
    transform-box: view-box;
    transform-origin: 60px 74px;
    animation: st-wag 0.35s ease-in-out infinite alternate;
}

@keyframes pb-bounce {
    0%, 60%, 100% { transform: rotate(0); }
    75%           { transform: rotate(-2.5deg); }
}

/* Lying awake: eyebrows up and down, the tail tip twitching. */
.ly-brow {
    animation: ly-brow 3.4s ease-in-out infinite;
}

@keyframes ly-brow {
    0%, 50%, 100% { transform: translateY(0); }
    60%, 80%      { transform: translateY(-3px); }
}

.ly-tail {
    transform-box: view-box;
    transform-origin: 44px 110px;
    animation: ly-tail 2.4s ease-in-out infinite;
}

@keyframes ly-tail {
    0%, 70%, 100% { transform: rotate(0); }
    80%, 90%      { transform: rotate(-3deg); }
}

/* Curious: a bigger, more frequent head tilt, with the question mark bobbing. */
.cl--curious .sd-head { animation: cu-tilt 3.2s ease-in-out infinite; }

@keyframes cu-tilt {
    0%, 40%, 100% { transform: rotate(0); }
    55%, 85%      { transform: rotate(-14deg); }
}

.cu-bubble {
    transform-box: fill-box;
    transform-origin: 30% 100%;
    animation: cu-bob 3.2s ease-in-out infinite;
}

@keyframes cu-bob {
    0%, 40%, 100% { transform: translateY(0) scale(1); }
    55%, 85%      { transform: translateY(-4px) scale(1.06); }
}

/* Name tag and medal swing gently from the collar. */
.nt-tag,
.cs-medal {
    transform-box: view-box;
    transform-origin: 124px 104px;
    animation: cl-swing 2.8s ease-in-out infinite alternate;
}

@keyframes cl-swing {
    from { transform: rotate(-7deg); }
    to   { transform: rotate(7deg); }
}

/* Judge's scorecard: the score flips between 9.5 and 10. */
.jd-card {
    transform-box: view-box;
    transform-origin: 125px 154px;
    animation: jd-raise 6s ease-in-out infinite;
}

.jd-score--a { animation: jd-a 6s infinite; }
.jd-score--b { animation: jd-b 6s infinite; opacity: 0; }

@keyframes jd-raise {
    0%, 40%, 100% { transform: translateY(0) rotate(0); }
    50%, 90%      { transform: translateY(-6px) rotate(-4deg); }
}

@keyframes jd-a {
    0%, 45%   { opacity: 1; }
    50%, 95%  { opacity: 0; }
    100%      { opacity: 1; }
}

@keyframes jd-b {
    0%, 45%   { opacity: 0; }
    50%, 95%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* ── Sleeping collie: slow breathing and drifting Zzzs ── */
.sl-dog {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sl-breathe 4s ease-in-out infinite;
}

.sl-z {
    transform-box: fill-box;
    transform-origin: center;
    animation: sl-z 3.6s ease-in-out infinite;
    opacity: 0;
}

@keyframes sl-breathe {
    0%, 100% { transform: scale(1, 1); }
    50%      { transform: scale(1.01, 1.04); }
}

@keyframes sl-z {
    0%   { opacity: 0; transform: translate(0, 6px) scale(0.7); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(8px, -14px) scale(1.1); }
}

/* ── Paw-print loader ── */
.paw-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
}

.paw-loader svg { width: 7.5rem; height: auto; }

.paw-loader__paw {
    fill: var(--color-primary, #8B3DFF);
    opacity: 0.15;
    animation: paw-step 1.6s ease-in-out infinite;
}

.paw-loader__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted, #6E5C7D);
}

@keyframes paw-step {
    0%, 100% { opacity: 0.15; }
    30%      { opacity: 0.9; }
    60%      { opacity: 0.15; }
}

/* ── Empty states (EmptyState.razor) ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem 2.25rem;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border, #ECDDF9);
    background:
        radial-gradient(28rem 12rem at 50% 0%, rgba(185, 140, 255, 0.16), transparent 70%),
        #fff;
}

.empty-state__art { margin-bottom: 0.25rem; }
.empty-state__art svg { margin: 0 auto; }

.empty-state__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, #160C1D);
}

.empty-state__text {
    margin: 0;
    max-width: 30rem;
    line-height: 1.55;
    color: var(--color-muted, #6E5C7D);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

/* Compact: dog beside the text, no frame - for inside an existing card. */
.empty-state--compact {
    flex-direction: row;
    text-align: left;
    gap: 1rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
}

.empty-state--compact .empty-state__art { flex-shrink: 0; margin: 0; }
.empty-state--compact .empty-state__title { font-size: 1rem; }
.empty-state--compact .empty-state__actions { justify-content: flex-start; margin-top: 0.4rem; }

/* ── Homepage event-type scenes ── */
.kind-scene { display: block; width: 100%; height: 100%; }

.kind-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: kind-glow 6s ease-in-out infinite;
}

@keyframes kind-glow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.06); opacity: 1; }
}

.kind-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: kind-spark 3s ease-in-out infinite;
}

@keyframes kind-spark {
    0%, 100% { transform: scale(0.4); opacity: 0.2; }
    50%      { transform: scale(1); opacity: 1; }
}

/* Competition: confetti drifting down. */
.cs-confetti {
    transform-box: fill-box;
    transform-origin: center;
    animation: cs-fall linear infinite;
}

@keyframes cs-fall {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(8px, 110px) rotate(260deg); }
    100% { transform: translate(-4px, 225px) rotate(520deg); }
}

/* Training show: a treat every 2 seconds; a tick per catch on the board (6-second cycle). */
.ts-treat {
    transform-box: fill-box;
    transform-origin: center;
    animation: ts-toss 2s ease-in-out infinite;
    opacity: 0;
}

@keyframes ts-toss {
    0%       { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    6%       { opacity: 1; }
    18%      { transform: translate(72px, -150px) rotate(200deg); }
    30%      { opacity: 1; transform: translate(133px, -101px) rotate(360deg); }
    34%, 100% { opacity: 0; transform: translate(133px, -96px) rotate(360deg); }
}

.cl--catch .sd-head { animation: ts-catch 2s ease-in-out infinite; }

@keyframes ts-catch {
    0%, 14%   { transform: rotate(0); }
    28%       { transform: rotate(-9deg); }
    36%       { transform: rotate(2deg); }
    46%, 100% { transform: rotate(0); }
}

.ts-tick {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.ts-tick--1 { animation: ts-tick-1 6s ease-out infinite; }
.ts-tick--2 { animation: ts-tick-2 6s ease-out infinite; }
.ts-tick--3 { animation: ts-tick-3 6s ease-out infinite; }

@keyframes ts-tick-1 {
    0%, 9%   { opacity: 0; transform: scale(0.3); }
    13%, 92% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1); }
}

@keyframes ts-tick-2 {
    0%, 42%  { opacity: 0; transform: scale(0.3); }
    46%, 92% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1); }
}

@keyframes ts-tick-3 {
    0%, 75%  { opacity: 0; transform: scale(0.3); }
    79%, 92% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1); }
}

/* Workshop: the routine draws itself, the bulb glows, the tassel swings. */
.ws-path {
    stroke-dasharray: 100;
    animation: ws-draw 6s ease-in-out infinite;
}

.ws-end { animation: ws-end 6s ease-in-out infinite; }

@keyframes ws-draw {
    0%       { stroke-dashoffset: 100; }
    55%, 90% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 100; }
}

@keyframes ws-end {
    0%, 50%  { opacity: 0; }
    58%, 90% { opacity: 1; }
    100%     { opacity: 0; }
}

.ws-bulb__glow,
.ws-bulb__rays { animation: ws-bulb 6s ease-in-out infinite; }

.ws-bulb__glow {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes ws-bulb {
    0%, 45%  { opacity: 0.15; transform: scale(0.8); }
    60%, 90% { opacity: 0.9; transform: scale(1); }
    100%     { opacity: 0.15; transform: scale(0.8); }
}

.ws-tassel {
    transform-box: view-box;
    transform-origin: 126px 33px;
    animation: ws-tassel 2.6s ease-in-out infinite alternate;
}

@keyframes ws-tassel {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(8deg); }
}

/* ── The assistant's face (AssistantCollie.razor): a face-on collie in a circle ── */
.ac { display: block; width: 100%; height: 100%; }
.ac-disc { fill: #F3ECFF; }

.ac-head {
    transform-box: view-box;
    transform-origin: 50px 80px;
    animation: ac-look 6s ease-in-out infinite;
}

.ac-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: cl-blink 4.5s infinite;
}

/* One ear flicks now and then, pivoting where it meets the head. */
.ac-ear--r {
    transform-box: view-box;
    transform-origin: 66px 40px;
    animation: ac-flick 7s ease-in-out infinite;
}

/* Writing a reply: a quick, thoughtful nod. */
.ac--busy .ac-head { animation: ac-nod 0.7s ease-in-out infinite alternate; }

.ac--still .ac-head, .ac--still .ac-eye, .ac--still .ac-ear { animation: none; }

@keyframes ac-look {
    0%, 45%, 100% { transform: rotate(0); }
    55%, 68%      { transform: rotate(-9deg); }
    78%, 88%      { transform: rotate(5deg); }
}

@keyframes ac-flick {
    0%, 80%, 100% { transform: rotate(0); }
    84%           { transform: rotate(14deg); }
    88%           { transform: rotate(-4deg); }
    92%           { transform: rotate(8deg); }
}

@keyframes ac-nod {
    from { transform: rotate(-3deg) translateY(0); }
    to   { transform: rotate(3deg) translateY(1.5px); }
}

@media (prefers-reduced-motion: reduce) {
    .ac-head, .ac-eye, .ac-ear,
    .sd-tail, .sd-head, .cl-eye, .st-tail, .cl--bow, .pb-tail, .ly-brow, .ly-tail, .cu-bubble, .nt-tag, .cs-medal, .jd-card, .jd-score--a, .jd-score--b,
    .sl-dog, .paw-loader__paw, .kind-glow, .kind-spark, .cs-confetti, .ts-treat, .ws-path, .ws-end,
    .ws-bulb__glow, .ws-bulb__rays, .ws-tassel {
        animation: none !important;
    }

    /* Still pictures that make sense: Zzzs and ticks shown, the routine fully drawn, no flying treat. */
    .sl-z, .ts-tick, .ws-end { animation: none !important; opacity: 1; }
    .paw-loader__paw { opacity: 0.6; }
    .ts-treat { opacity: 0; }
    .ws-path { stroke-dashoffset: 0; }
}