/* Scoped Liquid Glass surfaces; original transparent artwork stays unchanged. */
#motion .animal-grid{gap:24px;align-items:stretch}
#motion .animal-card{position:relative;display:flex;flex-direction:column;overflow:visible;isolation:isolate;border:1px solid #ffffff24;border-radius:30px;background:linear-gradient(145deg,#151619e0,#08090be8);box-shadow:inset 0 1px 0 #ffffff25,inset 0 -1px 0 #ffffff08,0 18px 45px #0003;-webkit-backdrop-filter:blur(24px) saturate(125%);backdrop-filter:blur(24px) saturate(125%)}
#motion .animal-stage{position:relative;aspect-ratio:1.25;height:auto;min-width:0;perspective:950px;overflow:visible;border-radius:30px 30px 0 0;background:radial-gradient(ellipse at 48% 70%,#d7b46b10,transparent 65%);flex:none}
#motion .animal-art-wrap{position:absolute;inset:0;transform-origin:50% 65%;transform-style:preserve-3d}
#motion .animal-art{position:absolute;width:152%;max-width:none!important;height:auto;left:-26%;top:-32.7%;display:block;object-fit:contain;filter:drop-shadow(0 10px 7px #0005);pointer-events:none;user-select:none;-webkit-user-drag:none}
#motion .animal-ground{position:absolute;left:17%;right:17%;top:92%;height:4%;border-radius:50%;background:#0005;filter:blur(9px);opacity:.65}
#motion .animal-halo{position:absolute;inset:25% 16% 5%;background:radial-gradient(ellipse,#d7b46b0a,transparent 68%);border-radius:50%}
#motion .animal-card .motion-card-copy{padding:24px 28px 28px;min-height:330px;position:relative;z-index:2;display:flex;flex:1;flex-direction:column;align-items:stretch;background:transparent;border-radius:0 0 30px 30px}
#motion .animal-card h3{color:#f5f2eb;font-size:clamp(22px,2.1vw,28px);line-height:1.15;letter-spacing:-.6px}
#motion .animal-card .motion-card-copy>p{color:#d5d5d2;font-size:14px;line-height:1.65;margin-bottom:24px}
#motion .animal-card small{display:block;color:#b7b8b8;font-size:11px;text-align:center;margin-top:14px}
#motion .animal-card .animal-replay{position:relative;align-self:center;margin: auto auto 0;min-height:44px;width:min(100%,220px);padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid #ffffffc7;border-radius:999px;background:linear-gradient(145deg,#ffffffed,#edf0f2bd);color:#08090b;text-align:center;font-weight:600;line-height:1.3;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #ffffff45,0 5px 18px #0003;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);cursor:pointer;transition:background .18s,box-shadow .18s;transform:none}
#motion .animal-card .animal-replay:hover{color:#000;background:linear-gradient(145deg,#fff,#f2f4f5e0);box-shadow:inset 0 1px 1px #fff,0 6px 22px #0004;transform:none}
#motion .animal-card .animal-replay:focus-visible{outline:3px solid #ebce8b;outline-offset:5px}
#motion .animal-card .animal-replay:active{background:#ffffffe6}
#motion .animal-card .animal-replay svg{flex:none}
#motion .animal-card .animal-replay:disabled{cursor:default;opacity:.75;box-shadow:inset 0 1px 1px #fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#motion .animal-card{background:linear-gradient(145deg,#232427,#0b0c0e)}#motion .animal-card .animal-replay{background:linear-gradient(145deg,#f9fafb,#dfe2e5)}}
@media(min-width:768px) and (max-width:1050px){#motion .animal-grid{gap:16px}#motion .animal-card .motion-card-copy{padding:22px 18px 24px;min-height:370px}#motion .animal-card h3{font-size:22px}}
@media(max-width:767px){#motion .animal-grid{max-width:440px;gap:32px}#motion .animal-card .motion-card-copy{padding:24px 26px 26px;min-height:300px}#motion .animal-card h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){#motion .animal-art-wrap,#motion .animal-ground,#motion .animal-halo{animation:none!important;transition:none!important;transform:none!important;will-change:auto}#motion .animal-replay{transition:none}}

/* Liquid-glass depth (kept from the Claude redesign): colour behind the glass so the blur reads, plus a top specular sheen. */
#motion .animal-grid{position:relative;isolation:isolate}
#motion .animal-grid::before{content:'';position:absolute;inset:-6% -3%;z-index:-1;pointer-events:none;border-radius:60px;background:radial-gradient(34% 46% at 14% 26%,#e3b96a,transparent 72%),radial-gradient(34% 44% at 50% 78%,#8da0d6,transparent 72%),radial-gradient(34% 46% at 88% 24%,#e79a86,transparent 72%),radial-gradient(30% 40% at 62% 20%,#9fd3c4,transparent 72%),linear-gradient(180deg,#ece7dc,#d4d8e2)}
#motion .animal-card{background:linear-gradient(155deg,rgba(255,255,255,.16) 0%,rgba(30,32,38,.52) 22%,rgba(8,9,12,.62) 62%,rgba(20,21,26,.55) 100%);-webkit-backdrop-filter:blur(30px) saturate(190%) brightness(.8);backdrop-filter:blur(30px) saturate(190%) brightness(.8);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.5),inset 0 -1px 2px rgba(255,255,255,.12),inset 0 0 36px rgba(255,255,255,.05),0 30px 60px rgba(10,12,20,.32),0 4px 14px rgba(10,12,20,.18)}
#motion .animal-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:radial-gradient(120% 55% at 18% 0%,rgba(255,255,255,.28),rgba(255,255,255,.04) 45%,transparent 62%),linear-gradient(180deg,transparent 70%,rgba(255,255,255,.06))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#motion .animal-card{background:linear-gradient(145deg,#232427,#0b0c0e)}}

/* Keep the section heading clear of the artwork extending above each card. */
#motion.motion-studio{background:#000;color:#f5f2eb;isolation:isolate}
#motion>.section-top{position:relative;z-index:2;margin-bottom:0;overflow:visible}
#motion>.section-top h2{color:#f5f2eb;line-height:1.15;overflow:visible}
#motion>.section-top h2 em,#motion>.section-top .eyebrow{color:#d7b46b}
#motion>.section-top>p:not(.eyebrow){color:#bfc1c5}
#motion .animal-grid{margin-top:clamp(110px,14vw,190px);z-index:1}
#motion .animal-grid::before{inset:0 -3%;background:radial-gradient(34% 46% at 14% 26%,#e3b96a20,transparent 72%),radial-gradient(34% 44% at 50% 78%,#8da0d620,transparent 72%),radial-gradient(34% 46% at 88% 24%,#e79a8620,transparent 72%)}
@media(max-width:767px){#motion .animal-grid{margin-top:120px;gap:140px}}

/* Peacock (Oct 30, 2026): walking clip on a 544px canvas, laptop sits on the card's ground line,
   head and crest rise just past the card top. */
#motion .animal-card[data-animal="peacock"] .animal-art{width:104%;left:-2%;top:-19%}