.animals-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8f0fa;
  background: radial-gradient(circle at 15% 15%, #6f527b 0, transparent 35%),
    radial-gradient(circle at 86% 85%, #423653 0, transparent 35%), #231d31;
  padding: clamp(65px, 8vw, 115px) 5%;
  scroll-margin-top: 90px;
}
.animals-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .36;
  background-image: radial-gradient(#e2bc81 1px, transparent 1px);
  background-size: 43px 43px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  animation: animal-stardrift 28s linear infinite;
}
.animals-inner {max-width: 1260px; margin: 0 auto}
.animals-head {max-width: 810px; margin: 0 auto 52px; text-align: center}
.animals-feature .eyebrow {color: #e2bd86}
.animals-head h2 {font-size: clamp(42px, 5vw, 71px); margin: 19px 0 25px; color:#fff7f7}
.animals-feature h2 em {color:#e6bc83}
.animals-head p {font-size: 19px; line-height: 1.8; color: #e0d5e4}
.animals-layout {display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: clamp(28px, 5vw, 70px)}
.animals-art {position: relative; margin: 0; border-radius: 240px 240px 22px 22px; overflow: hidden; box-shadow: 0 36px 85px #09050f91; border: 1px solid #e9d2ad61; transform: translateZ(0)}
.animals-art img {width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; display:block; transition: transform 1.2s ease; animation: animal-image-breathe 14s ease-in-out infinite alternate}
.animals-art:hover img {transform: scale(1.06)}
.animals-art::after {content: ''; position:absolute; inset: 0; pointer-events:none; background: linear-gradient(180deg, transparent 63%, #1a1323bb);}
.animals-art figcaption {position:absolute; z-index: 2; bottom: 22px; left: 24px; right:24px; text-align:center; font: italic 20px/1.4 Georgia,serif; color:#fff7eb; text-shadow:0 3px 15px #100c1b}
.animal-light {position: absolute; inset: 0; z-index:1; pointer-events:none; background: radial-gradient(circle at 54% 42%, #eac5944d 0, transparent 36%); mix-blend-mode: screen; animation: animal-aura 7s ease-in-out infinite alternate}
.animals-copy {display:grid; gap: 21px}
.animal-card {background: #ffffff0c; padding:clamp(23px,3vw,33px); border:1px solid #e8cfa52e; border-radius: 18px; backdrop-filter: blur(8px); transition:transform .35s ease, border-color .35s ease, background .35s ease}
.animal-card:hover {transform:translateY(-5px); border-color:#e8cfa587; background:#ffffff12}
.animal-card .animal-no {font: 13px/1.4 system-ui,sans-serif; letter-spacing: 2px; color:#e8c18c}
.animal-card h3 {font-size: clamp(27px, 2.6vw, 37px); line-height:1.18; margin:9px 0 14px; color: #fff8fc}
.animal-card p {color:#e0d6e2; font-size:16px; line-height:1.75; margin:0}
.animals-bottom {display:grid; grid-template-columns:1fr auto; gap: 25px; align-items:center; border-top:1px solid #e0c5a53b; margin-top: 49px; padding-top:32px}
.animals-bottom p {margin:0; max-width:730px; color:#e6dbe7; font-size:16px}
.animals-feature .button {background:#e7c28f; color:#2b2035; white-space:nowrap; gap:15px; box-shadow:0 12px 34px #cba36e36}
.animals-feature .button:hover {background:#f6dcb5}
.animals-note {max-width:1260px; margin: 24px auto 0; font-size:13px; color:#bfb0c5; line-height:1.6}
.animals-accessibility {font:italic 16px/1.65 Georgia,serif; color:#e8c899; margin-top:9px}
.animals-feature.animals-ready .animal-enter {opacity:0; transform:translateY(24px); transition:opacity .85s ease,transform .85s ease}
.animals-feature .animal-enter.is-visible {opacity:1;transform:translateY(0)}
@keyframes animal-stardrift {to {background-position: 43px -86px}}
@keyframes animal-image-breathe {from {scale:1} to {scale:1.025}}
@keyframes animal-aura {from {opacity:.2} to {opacity:.75}}
@media (max-width:850px) {
  .animals-layout{grid-template-columns:1fr; gap:32px}
  .animals-art{width:min(100%,610px); margin:0 auto}
  .animals-art img{aspect-ratio: 1 / 1; object-position:center}
  .animals-bottom{grid-template-columns:1fr}
  .animals-feature .button{white-space:normal; width:fit-content}
}
@media (max-width:520px) {
  .animals-feature {padding:65px 6%}
  .animals-head{margin-bottom:30px}
  .animals-head p{font-size:17px}
  .animals-art img{aspect-ratio: 4 / 5}
  .animal-card h3{font-size:29px}
  .animals-art figcaption{font-size:16px}
  .animals-feature .button{width:100%; text-align:center}
}
@media(prefers-reduced-motion:reduce) {
  .animals-feature::before,.animals-art img,.animal-light{animation:none!important}
  .animals-feature .animal-enter {opacity:1; transform:none; transition:none}
  .animal-card,.animals-art img{transition:none}
}