/* The vet clinic's own styles, loaded right after site.css and blocking, like it (src/page.js).
   Calm sage neutrals under the green: a pale sage page, green-black ink and a forest-black for the dark cards (each
   text colour ≥ 4.5:1 on its background: ink-2 6.9, ink-3 5.3 on the page; dark-ink-2 9.1 on the dark).
   The first screen: a studio still life (a stethoscope, a felt toy bone and a leather leash on a sage stone), cut out
   (its studio white is transparency), on a soft glow inside a thin ring, a pulse line and two readouts. It moves only
   under html.motion; in still mode (and with reduced motion) everything stands. */
:root {
  --bg: #F5F8F5; --line: #DFE8E1; --ink: #102019; --ink-2: #475A4F; --ink-3: #586B60;
  --dark: #0C1A13; --dark-2: #13261C; --dark-ink: #EAF3ED; --dark-ink-2: #A9BEB1;
}

.veto { position: absolute; inset: 0; }
.veto-glow, .veto-ring, .veto-still { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.veto-glow { width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teal-glow) 66%, transparent), color-mix(in srgb, var(--teal-soft) 70%, transparent) 62%, transparent); }
.veto-ring { width: 92%; height: auto; color: color-mix(in srgb, var(--teal-ink) 45%, transparent); overflow: visible; }
.veto-still { width: 80%; height: auto; }
.veto-pulse { position: absolute; left: 6%; right: 6%; bottom: 13%; width: 88%; height: auto; color: var(--teal); opacity: .7; overflow: visible;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 45%, transparent)); }
.veto-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line)); background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -18px rgba(12, 40, 24, .45); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.veto-tag i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 26%, transparent); }
.veto-tag-a { top: 18%; right: 3%; }
.veto-tag-b { bottom: 21%; left: 3%; }
@media (max-width: 900px) {
  .veto-tag { gap: 6px; padding: 6px 10px 6px 8px; font-size: 10px; }
  .veto-tag-a { top: 12%; right: 2%; } .veto-tag-b { bottom: 17%; left: 2%; }
}

html.motion .veto-still { animation: veto-float 8s ease-in-out infinite alternate; }
@keyframes veto-float { from { transform: translateY(5px); } to { transform: translateY(-5px); } }
html.motion .veto-ring { animation: veto-turn 140s linear infinite; }
@keyframes veto-turn { to { rotate: 360deg; } }
/* the pulse line draws itself once, then breathes */
html.motion .veto-pulse path { stroke-dasharray: 1; animation: veto-draw 2.2s var(--ease) .5s both; }
@keyframes veto-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.motion .veto-pulse { animation: veto-beat 2.6s ease-in-out 2.8s infinite; }
@keyframes veto-beat { 0%, 100% { opacity: .55; } 18% { opacity: .95; } }
html.motion .veto-tag { animation: veto-tag .7s var(--ease) both; }
html.motion .veto-tag-a { animation-delay: .9s; }
html.motion .veto-tag-b { animation-delay: 1.7s; }
@keyframes veto-tag { from { opacity: 0; transform: translateY(8px); } }

/* the service photos: a dark card under them, so the white text reads before a lazy photo arrives, and each keeps its
   subject in view as the card changes shape (wide or tall on a laptop, square on a phone) */
.svc.has-img { border-color: transparent; background: var(--dark); }
.has-img .svc-hit { background: linear-gradient(180deg, transparent 25%, rgba(8, 22, 14, .86)); }
.svc-img img[src$="/card-vacc.webp"] { object-position: 32% 30%; }
.svc-img img[src$="/card-groom.webp"] { object-position: 100% 35%; } /* the brush and the comb on the right, the text on the left */
.svc-img img[src$="/card-tests.webp"] { object-position: 50% 25%; }
@media (min-width: 1001px) { .b-wide.has-img p { max-width: 52%; } } /* the wide card's text stays left of the brush */