/* Featured pet pages (v1.9.0) — the hand-drawn animated pets (partials/pet_art.html) and the pet page itself
   (sites/sponsor/_petpage.html), used on <slug>.billubnb.in AND inside the /demo browser frame. The page follows the space it
   is given (container queries on .pet). Tokens from tokens.css only; motion = transform/opacity, off under reduced motion. */
@layer components {
  /* ---------- drawn pets ---------- */
  .pa { --pa-ink: var(--ink); width: 100%; height: auto; overflow: visible; display: block; }
  .pa .pa-c { fill: var(--coat); } .pa .pa-c2 { fill: var(--coat-2); } .pa .pa-b { fill: var(--belly); }
  .pa .pa-face { fill: var(--belly); }
  .pa .pa-ol { stroke: var(--pa-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
  .pa .pa-ol-thin { stroke: var(--pa-ink); stroke-width: 2; stroke-linejoin: round; }
  .pa .pa-k { fill: var(--pa-ink); } .pa .pa-w { fill: #FFFFFF; }
  .pa .pa-eye { fill: var(--eye, var(--pa-ink)); } .pa .pa-pupil { fill: var(--pa-ink); opacity: var(--pupil, 0); }
  .pa .pa-pink { fill: #F2A7B3; } .pa .pa-cheek { fill: #F29C9C; opacity: .55; }
  .pa .pa-patch { fill: var(--coat-2); opacity: var(--patch, 0); }
  .pa .pa-brow { fill: var(--coat-2); }
  .pa .pa-line, .pa .pa-whisk, .pa .pa-toe, .pa .pa-stripe, .pa .pa-feet, .pa .pa-tongue-s path, .pa .pa-perch, .pa .pa-spots {
    fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .pa .pa-line { stroke: var(--pa-ink); stroke-width: 2.6; }
  .pa .pa-whisk { stroke: var(--pa-ink); stroke-width: 1.8; opacity: .45; }
  .pa .pa-toe { stroke: var(--pa-ink); stroke-width: 1.6; opacity: .35; }
  .pa .pa-stripe { stroke: var(--coat-2); stroke-width: 4.5; opacity: var(--stripes, 1); }
  .pa .pa-feet { stroke: #D9774F; stroke-width: 3; }
  .pa .pa-perch { stroke: #9A5200; stroke-width: 6; }
  .pa .pa-leaf { fill: #7FB069; }
  .pa .pa-spots { stroke: var(--coat-2); stroke-width: 9; }
  .pa .pa-dot { fill: #F8CDC4; }
  .pa .pa-beak { fill: #F5A623; }
  .pa .pa-tongue { fill: #F2869A; stroke: var(--pa-ink); stroke-width: 2; }
  .pa .pa-tongue-s path { stroke: #E8556D; stroke-width: 2.6; }
  .pa .pa-tl-o, .pa .pa-tl-i { fill: none; stroke-linecap: round; }
  .pa .pa-tl-o { stroke: var(--pa-ink); stroke-width: 22; } .pa .pa-tl-i { stroke: var(--coat); stroke-width: 16; }
  .pa .pa-shadow { fill: rgba(58, 42, 34, .12); }
  .pa .pa-heart { fill: #E8667A; opacity: 0; }

  /* coat presets (contrast is decorative; the art is never the only carrier of meaning) */
  .coat-ginger { --coat: #F4A940; --coat-2: #D57E24; --belly: #FFE7C7; }
  .coat-grey   { --coat: #A9B2B8; --coat-2: #737E87; --belly: #EEF1F2; }
  .coat-black  { --coat: #3E3739; --coat-2: #26201F; --belly: #FFF8EE; --eye: #F7D35C; --pupil: 1; --stripes: 0; }
  .coat-cream  { --coat: #F3DDB8; --coat-2: #DDB37C; --belly: #FFF6E8; }
  .coat-white  { --coat: #FFFDF8; --coat-2: #E8D9C7; --belly: #FFFFFF; --stripes: 0; }
  .coat-choco  { --coat: #A06E4B; --coat-2: #6E4630; --belly: #F3DDC6; --patch: 1; }
  .coat-calico { --coat: #FFF6EC; --coat-2: #E58E35; --belly: #FFFFFF; --patch: 1; --stripes: .9; }
  .coat-green  { --coat: #8CC66B; --coat-2: #5E9E45; --belly: #F2F8C8; }
  .coat-blue   { --coat: #7DB7E8; --coat-2: #4E8DC7; --belly: #FFF6C9; }
  .coat-sunny  { --coat: #F7C948; --coat-2: #DFA017; --belly: #FFF3C4; }
  .pa--dog.coat-cream, .pa--dog.coat-black { --patch: 1; }
  .pa--dog.coat-black { --coat-2: #5A4F50; --belly: #F3DDC6; }
  .pa:not([class*="coat-"]), .pa.coat- { --coat: #F4A940; --coat-2: #D57E24; --belly: #FFE7C7; }

  /* idle life: breathe, blink, tail, ears, wings, crest, tongue, hearts */
  .pa .pa-body, .pa .pa-head, .pa .pa-eyes, .pa .pa-tail, .pa .pa-ear-l, .pa .pa-ear-r, .pa .pa-wing-l, .pa .pa-wing-r,
  .pa .pa-crest, .pa .pa-sway, .pa .pa-tongue-s { transform-box: fill-box; }
  .pa .pa-body { transform-origin: 50% 100%; animation: pa-breathe 3.8s ease-in-out infinite; }
  .pa .pa-head { transform-origin: 50% 90%; animation: pa-tilt 7s ease-in-out infinite; }
  .pa .pa-eyes { transform-origin: 50% 50%; animation: pa-blink 5.2s infinite; }
  .pa .pa-tail { transform-origin: 0% 100%; animation: pa-wag 2.6s ease-in-out infinite; }
  .pa--dog .pa-tail { animation-duration: .9s; }
  .pa--rabbit .pa-tail { transform-origin: 50% 50%; animation: pa-puff 3.8s ease-in-out infinite; }
  .pa .pa-ear-r { transform-origin: 30% 100%; animation: pa-twitch 6.5s ease-in-out infinite; }
  .pa--dog .pa-ear-l, .pa--dog .pa-ear-r { transform-origin: 50% 0%; animation: pa-flop 2.4s ease-in-out infinite; }
  .pa--rabbit .pa-ear-l { transform-origin: 50% 100%; animation: pa-twitch 7.5s ease-in-out infinite reverse; }
  .pa .pa-wing-l { transform-origin: 80% 10%; animation: pa-wing 2.2s ease-in-out infinite; }
  .pa .pa-wing-r { transform-origin: 20% 10%; animation: pa-wing 2.2s ease-in-out infinite reverse; }
  .pa .pa-crest { transform-origin: 50% 100%; animation: pa-twitch 3s ease-in-out infinite; }
  .pa--snake .pa-sway { transform-origin: 40% 100%; animation: pa-sway 4.4s ease-in-out infinite; }
  .pa .pa-tongue-s { transform-origin: 50% 0%; animation: pa-flick 2.8s ease-in-out infinite; }
  .pa .pa-heart { transform-box: fill-box; transform-origin: 50% 50%; animation: pa-heart 9s ease-in-out infinite; }
  .pa .pa-heart--2 { animation-delay: 3s; } .pa .pa-heart--3 { animation-delay: 6s; }
  .pa.is-burst .pa-heart { animation: pa-burst 1.6s var(--ease-out) 1 both; }
  .pa.is-burst .pa-heart--2 { animation-delay: .15s; } .pa.is-burst .pa-heart--3 { animation-delay: .3s; }
  .pa--chip .pa-hearts, .pa--chip .pa-shadow, .pa--load .pa-hearts { display: none; }

  @keyframes pa-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03); } }
  @keyframes pa-tilt { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-4deg); } 88% { transform: rotate(2deg); } }
  @keyframes pa-blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
  @keyframes pa-wag { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(9deg); } }
  @keyframes pa-puff { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  @keyframes pa-twitch { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-9deg); } 90% { transform: rotate(4deg); } }
  @keyframes pa-flop { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
  @keyframes pa-wing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
  @keyframes pa-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
  @keyframes pa-flick { 0%, 70%, 100% { transform: scaleY(0); opacity: 0; } 75%, 85% { transform: scaleY(1); opacity: 1; } }
  @keyframes pa-heart { 0%, 62% { opacity: 0; transform: translateY(8px) scale(.6); } 70% { opacity: 1; transform: translateY(0) scale(1); }
                        92% { opacity: 0; transform: translateY(-26px) scale(1.05); } 100% { opacity: 0; } }
  @keyframes pa-burst { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 30% { opacity: 1; transform: translateY(0) scale(1.15); }
                        100% { opacity: 0; transform: translateY(-40px) scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .pa g, .pa .pa-heart { animation: none !important; }
    .pa .pa-tongue-s { opacity: 0; }
  }

  /* ---------- the pet page ---------- */
  .pet { --pet-bg: var(--paper-3); --pet-tint: var(--sun-soft); --pet-accent: var(--sun);
         container-type: inline-size; background: var(--pet-bg); color: var(--ink); border-radius: var(--r-lg); overflow: hidden; }
  .pet-theme-sage  .pet, .pet.pet-theme-sage  { --pet-tint: var(--sage-tint); }
  .pet-theme-blush .pet, .pet.pet-theme-blush { --pet-tint: var(--blush-soft); }
  .pet-theme-dusk  .pet, .pet.pet-theme-dusk  { --pet-tint: var(--sage-tint); --pet-accent: var(--sage); }

  .pet-hero { display: grid; gap: 1.2rem; padding: 1.6rem 1.2rem 1.4rem; text-align: center; justify-items: center;
              background: linear-gradient(180deg, var(--pet-tint), var(--pet-bg)); }
  .pet-hero__art { width: min(62%, 260px); --ar-w: 4; --ar-h: 4.6; background: var(--paper-2); display: grid; place-items: end center; }
  .pet-hero__art .pa { width: 92%; margin-bottom: 4%; }
  .pet-kicker { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .01em;
                color: var(--amber); }
  .pet-kicker .i { width: 16px; height: 16px; color: var(--sun-deep); }
  .pet-name { margin: .2rem 0 0; font-family: var(--font-display); font-size: clamp(2.2rem, 8cqi, 3.6rem); line-height: 1; font-weight: 650;
              letter-spacing: -.01em; }
  .pet-tagline { margin: .4rem 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 3.4cqi, 1.35rem); color: var(--ink-2); }
  .pet-facts { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
  .pet-facts li { display: inline-flex; flex-direction: column; align-items: center; padding: .4rem .8rem; border-radius: var(--r-md);
                  background: var(--paper-3); border: 1px solid var(--line); line-height: 1.25; }
  .pet-facts span { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .pet-facts b { font-size: .95rem; font-weight: 750; }

  .pet-sec { padding: 1.4rem 1.2rem; border-top: 1px dashed var(--line); }
  .pet-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 650; }
  .pet-h .i { width: 22px; height: 22px; padding: 5px; box-sizing: content-box; border-radius: 50%; background: var(--pet-tint); color: var(--ink); }
  .pet-prose p { margin: 0 0 .8rem; max-width: 62ch; line-height: 1.65; color: var(--ink-2); }
  .pet-prose p:last-child { margin-bottom: 0; }
  .pet-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
  .pet-chips li { padding: .45rem .9rem; border-radius: var(--r-pill); background: var(--pet-tint); font-weight: 700; font-size: .95rem; }
  .pet-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .pet-tile { margin: 0; } .pet-tile p { margin: .45rem 0 0; text-align: center; font-size: .9rem; font-weight: 700; color: var(--ink-2); }
  .pet-tile .arch { --ar-w: 4; --ar-h: 4.4; display: grid; place-items: end center; }
  .pet-tile .pa { width: 84%; margin-bottom: 4%; }
  .pet-tile--sun .arch { background: var(--sun-soft); } .pet-tile--sage .arch { background: var(--sage-tint); }
  .pet-tile--blush .arch { background: var(--blush-soft); } .pet-tile--apricot .arch { background: #FFE9D1; }
  .pa--pose2 { transform: scaleX(-1); } .pa--pose3 { transform: rotate(-6deg); } .pa--pose4 { transform: scaleX(-1) rotate(4deg); }
  .pet-empty { margin: 0; color: var(--ink-3); font-style: italic; }
  .pet-timeline { list-style: none; margin: 0; padding: 0 0 0 1.3rem; border-left: 3px dotted var(--sun-deep); display: grid; gap: .9rem; }
  .pet-timeline li { position: relative; display: grid; gap: .15rem; line-height: 1.5; color: var(--ink-2); }
  .pet-timeline li::before { content: ""; position: absolute; left: calc(-1.3rem - 9px); top: .35em; width: 15px; height: 15px; border-radius: 50%;
                             background: var(--sun); box-shadow: 0 0 0 3px var(--pet-bg); }
  .pet-timeline b { color: var(--ink); font-weight: 800; }
  .pet-quote { margin: 0; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--pet-tint); font-family: var(--font-display);
               font-size: 1.12rem; line-height: 1.5; font-style: italic; }
  .pet-quote p { margin: 0; } .pet-quote footer { margin-top: .6rem; font-family: var(--font-text); font-style: normal; font-weight: 750; font-size: .92rem; color: var(--ink-2); }
  .pet-foot { display: grid; gap: .8rem; justify-items: center; text-align: center; padding: 1.6rem 1.2rem 1.8rem; background: var(--sage-deep); color: var(--on-deep); }
  .pet-foot p { margin: 0; max-width: 46ch; line-height: 1.55; color: var(--on-deep); }
  .pet-foot .bb { color: var(--sun-ink); }
  .pet-stamp { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); }
  .pet-stamp .i { width: 28px; height: 28px; }
  .pet-foot__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
  .pet-foot .btn--ghost { --fg: var(--on-deep); --bd: color-mix(in srgb, var(--on-deep) 50%, transparent); }

  @container (min-width: 620px) {
    .pet-hero { grid-template-columns: minmax(0, 260px) 1fr; text-align: left; justify-items: start; align-items: center; padding: 2rem 2rem 1.8rem; gap: 2rem; }
    .pet-hero__art { width: 100%; }
    .pet-facts { justify-content: flex-start; }
    .pet-facts li { align-items: flex-start; }
    .pet-sec { padding: 1.6rem 2rem; }
    .pet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pet-foot { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; align-items: center; padding: 1.6rem 2rem; }
  }
  @container (min-width: 900px) {
    .pet-hero { grid-template-columns: 320px 1fr; padding: 2.6rem 3rem 2.2rem; }
    .pet-sec { padding: 2rem 3rem; }
    .pet-story, .pet-human { display: grid; grid-template-columns: 220px 1fr; gap: 1rem 2rem; align-items: start; }
    .pet-story .pet-h, .pet-human .pet-h { margin: 0; }
    .pet-foot { padding: 1.8rem 3rem; }
  }

}

@layer sections {
  /* real pet page wrapper (sections layer: it must beat .section's padding) */
  .section.pet-wrap { padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 6vw, 4rem); }
  .pet-wrap .pet { box-shadow: var(--shadow-2); }
  .pet-preview { margin: 0; max-width: none; padding: .6rem var(--gutter); background: var(--sun); color: var(--sun-ink); text-align: center; font-weight: 800; }
}