/* horse_portrait.css — Pasturely layered portraits */

.hp {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;              /* match your artboard, e.g. 1000×800 */
  border-radius: .75rem;
  overflow: hidden;
}
.hp--thumb   { max-width: 96px;  border-radius: .5rem; }
.hp--card    { max-width: 320px; }
.hp--profile { max-width: 640px; }
.hp--missing { background: #e9e2d6; }

/* Keep the reserved frame/backdrop while the horse's masks and paint decode. */
.hp-loading-enabled .hp:not([data-hp-ready="true"]) .hp-horse { opacity: 0; }
.hp-loading-enabled .hp .hp-horse { transition: opacity .18s ease-out; }
.hp-loading-enabled .hp:not([data-hp-ready="true"]) .hp-body,
.hp-loading-enabled .hp:not([data-hp-ready="true"]) .hp-tail,
.hp-loading-enabled .hp:not([data-hp-ready="true"]) .hp-ears { animation-play-state: paused; }

/* ---------- layers */
.hp-horse { position: absolute; inset: 0; isolation: isolate;          /* blends stay inside the horse */
  transform: scale(var(--hp-scale, 1)); transform-origin: 50% 97%; }       /* ponies stand smaller */
.hp-g     { position: absolute; inset: 0; }
.hp-l {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.hp-tint {
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.hp-multiply { mix-blend-mode: multiply; }
/* Shading layers: masked by their own shape pulled in 1px on every side, so they never
   lighten the soft outer edge of the coat (no white outline). --hp-m is set by hp_img(). */
.hp-edge {
  -webkit-mask-image: var(--hp-m), var(--hp-m), var(--hp-m), var(--hp-m);
          mask-image: var(--hp-m), var(--hp-m), var(--hp-m), var(--hp-m);
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: calc(50% - 1px) 50%, calc(50% + 1px) 50%, 50% calc(50% - 1px), 50% calc(50% + 1px);
          mask-position: calc(50% - 1px) 50%, calc(50% + 1px) 50%, 50% calc(50% - 1px), 50% calc(50% + 1px);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hp-screen   { mix-blend-mode: screen; }
.hp-soft     { mix-blend-mode: soft-light; }
.hp-winter   { opacity: .75; }   /* lower = subtler winter coat */
.hp--winter .hp-screen { opacity: .45; }   /* winter coat: less glossy */
.hp-mesh     { opacity: .78; }   /* fly sheet mesh: the coat shows through (lower = more see-through) */
.hp-feather-white { opacity: .7; }   /* white feathering: a little softer shading so it reads clean white */
.hp-dun { opacity: .75; }   /* dun dorsal stripe and leg barring */
.hp-wtex { opacity: .8; }   /* winter coat texture (higher = fuzzier) */
/* Clipping: the winter fuzz is drawn everywhere except the clipped area (--hp-clip, set by
   horse_portrait()), and the clipped area gets a faint pale sheen. */
.hp-unclipped {
  -webkit-mask-image: linear-gradient(#000, #000), var(--hp-clip);
          mask-image: linear-gradient(#000, #000), var(--hp-clip);
  -webkit-mask-size: 100% 100%, contain;  mask-size: 100% 100%, contain;
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-position: center;          mask-position: center;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.hp-clipped { opacity: .1; }   /* higher = paler clipped hair */
.hp-lift { opacity: .3; }                       /* white leg markings, brightened again after the shading */
.hp-lift-far { opacity: .55; }                  /* far legs sit in shadow, so they need more */
.hp--light .hp-lift { opacity: .55; }           /* grey and other light coats: white has to stand out more */
.hp--light .hp-lift-far { opacity: .57; }
.hp-skin { opacity: .8; }   /* pink muzzle under a blaze / bald face / snip */
.hp-mud { filter: sepia(.3) saturate(1.35) brightness(.94) contrast(1.15); opacity: .94; }   /* mud: warm earthy brown with depth */
.hp-feathers { opacity: 1; }         /* feathering: solid (lower it to let the leg show through) */

/* ---------- life */
/* The shared observer keeps a small preload margin around the viewport.
   Pausing retains the current animation position rather than restarting it. */
.hp[data-hp-in-view="false"] *,
.hp[data-hp-in-view="false"] *::after { animation-play-state: paused !important; }
/* Shade each moving part against its own coat, including the stationary joint.
   Otherwise multiply shading can pick up the background through the overlap. */
.hp-tail, .hp-ears, .hp-root { isolation: isolate; }
.hp-body {
  transform-origin: 50% 92%;
  animation: hp-breathe 4.2s ease-in-out infinite;
  animation-delay: var(--hp-delay, 0s);
}
.hp-tail {
  transform-origin: var(--tail-o, 84% 36%);
  animation: hp-swish 7s ease-in-out infinite;
  animation-delay: var(--hp-delay, 0s);
}
.hp-ears {
  transform-origin: var(--ear-o, 20% 16%);
  animation: hp-flick 9s ease-in-out infinite;
  animation-delay: var(--hp-delay, 0s);
}
.hp--nap .hp-body { animation-duration: 6.5s; }
.hp--nap .hp-ears,
.hp--nap .hp-tail { animation: none; }
.hp--thumb .hp-ears,
.hp--thumb .hp-tail { animation: none; }

@keyframes hp-breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.006); } }
@keyframes hp-swish {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(2deg); }
  82% { transform: rotate(-1.25deg); }
  88% { transform: rotate(.5deg); }
}
@keyframes hp-flick {
  0%, 90%, 100% { transform: rotate(0); }
  93% { transform: rotate(-3deg); }
  96% { transform: rotate(1deg); }
}

/* ---------- scene (gradient fallback when no scenes/{season}.jpg) */
.hp-scene { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.hp-season--spring { background-color: #bcd79f; background-image: linear-gradient(#e4eef0 0 58%, #c3dca6 58% 100%); }
.hp-season--summer { background-color: #a9c97c; background-image: linear-gradient(#d9ebf2 0 58%, #a9c97c 58% 100%); }
.hp-season--autumn { background-color: #c9a466; background-image: linear-gradient(#f0e2cc 0 58%, #c9a466 58% 100%); }
.hp-season--winter { background-color: #e9eef1; background-image: linear-gradient(#d3dde4 0 58%, #f1f4f6 58% 100%); }

.hp-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hp-weather--overcast::after { background: rgba(120,128,136,.18); }
.hp-weather--fog::after      { background: linear-gradient(rgba(240,242,244,.15), rgba(240,242,244,.7)); }
.hp-weather--heat::after     { background: rgba(255,190,90,.14); }
.hp-weather--frost::after    { background: rgba(190,220,245,.22); }
.hp-weather--rain::after,
.hp-weather--storm::after {
  background-image: repeating-linear-gradient(105deg, rgba(255,255,255,.35) 0 1px, transparent 1px 14px);
  background-size: 100% 200%;
  animation: hp-rain .6s linear infinite;
}
.hp-weather--storm { filter: brightness(.82) saturate(.85); }
.hp-weather--snow::after {
  background-image:
    radial-gradient(circle, #fff 1.2px, transparent 1.6px),
    radial-gradient(circle, #fff 1px, transparent 1.4px);
  background-size: 34px 34px, 22px 22px;
  background-position: 0 0, 11px 7px;
  animation: hp-snow 6s linear infinite;
}
@keyframes hp-rain { to { background-position: 0 100%; } }
@keyframes hp-snow { to { background-position: 0 340px, 11px 227px; } }

/* Note: weather overlays sit behind the horse. Move .hp-scene::after to .hp::after
   if you want rain/snow falling in front of the horse too. */

@media (prefers-reduced-motion: reduce) {
  .hp-loading-enabled .hp .hp-horse { transition: none; }
  .hp *, .hp *::after { animation: none !important; }
}