/* Hero opossum — self-contained SVG character and replayable interaction. */
#brand-slot { overflow: visible; }
#brand-slot img { position: relative; z-index: 2; }
#brand-slot::after { z-index: 3; border-radius: inherit; }

.hero-opossum {
  position: absolute;
  left: auto;
  right: -42px;
  bottom: -10px;
  z-index: 1;
  width: clamp(135px, 17vw, 190px);
  aspect-ratio: 24 / 23;
  pointer-events: none;
  isolation: isolate;
  --opossum-outline: #282b34;
  --opossum-pink: #d68c9a;
}

.opossum-art { display: block; width: 100%; height: 100%; overflow: visible; }
.opossum-trigger {
  position: absolute;
  left: auto;
  right: 2%;
  bottom: 2%;
  z-index: 5;
  width: 54%;
  height: 42%;
  padding: 0;
  border: 0;
  border-radius: 48%;
  clip-path: polygon(100% 18%, 72% 0, 30% 5%, 0 34%, 6% 66%, 28% 100%, 72% 98%, 100% 76%);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hero-opossum.is-playing .opossum-trigger,
.hero-opossum.is-perched .opossum-trigger {
  width: 72%; height: 78%;
  clip-path: none;
}
.opossum-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg) 75%, transparent);
}

.opossum-tail {
  transform-origin: 77px 133px;
  animation: opossum-tail-twitch 3.4s ease-in-out infinite;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.55));
}
.opossum-tail-shadow,
.opossum-tail-main { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.opossum-tail-shadow { stroke: #252632; stroke-width: 17; opacity: .72; }
.opossum-tail-main { stroke: url(#opossum-tail); stroke-width: 12; }
.opossum-tail-rings { fill: none; stroke: #5f4352; stroke-width: 2.5; stroke-linecap: round; opacity: .86; }
.opossum-trigger:hover + .opossum-art .opossum-tail,
.opossum-trigger:focus-visible + .opossum-art .opossum-tail {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 75%, transparent));
  animation-duration: 1.35s;
}

.opossum-body {
  transform: translate(-235px, 9px) rotate(-8deg);
  transform-origin: 100px 125px;
  filter: drop-shadow(0 9px 9px rgba(0,0,0,.56));
}
.opossum-shadow { fill: rgba(0,0,0,.45); }
.opossum-rump { fill: url(#opossum-fur); stroke: var(--opossum-outline); stroke-width: 3; }
.fur-facet { stroke: rgba(255,255,255,.12); stroke-width: 1.5; }
.facet-a { fill:#aeb5bd; }.facet-b { fill:#7b858f; }.facet-c { fill:#68717d; }
.facet-d { fill:#4d5561; }.facet-e { fill:#343b47; }
.opossum-neck { fill:#747d87; stroke:var(--opossum-outline); stroke-width:3; }
.opossum-face { fill:url(#opossum-face); stroke:var(--opossum-outline); stroke-width:3; }
.face-facet { stroke:rgba(255,255,255,.2); stroke-width:1; }
.face-facet-a { fill:#e6ddd5; }.face-facet-b { fill:#c1bbba; }.face-facet-c { fill:#969398; }
.opossum-ear { fill:#363943; stroke:var(--opossum-outline); stroke-width:3; }
.opossum-ear-inner { fill:#c77e8e; opacity:.85; }
.opossum-eye { fill:#11131a; stroke:#efedf2; stroke-width:1.5; }
.opossum-eye-glint { fill:#fff; }
.opossum-nose { fill:#e3919f; stroke:var(--opossum-outline); stroke-width:2; }
.opossum-whiskers { fill:none; stroke:#ddd5d4; stroke-width:1.3; stroke-linecap:round; opacity:.75; }
.opossum-mouth-closed { fill:none; stroke:#2a2229; stroke-width:3; stroke-linecap:round; }
.opossum-mouth-open { transform:scaleY(.06); transform-origin:181px 108px; opacity:0; }
.opossum-mouth { fill:#2a111d; stroke:var(--opossum-outline); stroke-width:3; }
.opossum-tongue { fill:#bd5f78; }
.opossum-teeth polygon { fill:#fff9e7; stroke:#a69c91; stroke-width:.6; }
.opossum-jaw { fill:#b8b4b7; stroke:var(--opossum-outline); stroke-width:3; }
.opossum-jaw-facet { fill:none; stroke:rgba(255,255,255,.24); stroke-width:1.4; stroke-linejoin:round; }
.opossum-legs polygon,.opossum-grip-paw polygon { fill:#656e79; stroke:var(--opossum-outline); stroke-width:2.5; }
.opossum-legs path,.opossum-grip-paw path { fill:none; stroke:var(--opossum-pink); stroke-width:3.5; stroke-linecap:round; }
.opossum-grip-paw { opacity:0; }

.hero-opossum.is-playing .opossum-body { animation: opossum-adventure 5.25s cubic-bezier(.2,.78,.2,1) both; }
.hero-opossum.is-playing,
.hero-opossum.is-perched { z-index:4; }
.hero-opossum.is-playing .opossum-tail { animation: opossum-tail-follow 5.25s ease-in-out both; }
.hero-opossum.is-playing .opossum-mouth-open { animation: opossum-mouth-gape 5.25s ease both; }
.hero-opossum.is-playing .opossum-mouth-closed { animation: opossum-closed-mouth 5.25s linear both; }
.hero-opossum.is-playing .opossum-eyes { animation: opossum-blink 5.25s linear both; transform-origin:169px 91px; }
.hero-opossum.is-playing .opossum-legs.front { animation: opossum-scramble-a .36s ease-in-out 8 alternate 2.35s; transform-origin:154px 135px; }
.hero-opossum.is-playing .opossum-legs.rear { animation: opossum-scramble-b .36s ease-in-out 8 alternate 2.35s; transform-origin:68px 139px; }
.hero-opossum.is-playing .opossum-grip-paw { animation: opossum-paws-appear 5.25s linear both; }
.hero-opossum.is-playing .paw-a { animation-name:opossum-paws-appear,opossum-scramble-a; animation-duration:5.25s,.42s; animation-delay:0s,2.7s; animation-iteration-count:1,6; }
.hero-opossum.is-playing .paw-b { animation-name:opossum-paws-appear,opossum-scramble-b; animation-duration:5.25s,.42s; animation-delay:0s,2.7s; animation-iteration-count:1,6; }

.hero-opossum.is-perched .opossum-body { transform:translate(12px,24px) rotate(10deg); }
.hero-opossum.is-perched .opossum-tail { transform:translate(-10px,7px) rotate(-16deg); animation:opossum-perched-tail 4s ease-in-out infinite; }
.hero-opossum.is-perched .opossum-grip-paw { opacity:1; }

@keyframes opossum-tail-twitch {
  0%,72%,100% { transform:rotate(0); }
  78% { transform:rotate(7deg); }
  84% { transform:rotate(-5deg); }
  90% { transform:rotate(3deg); }
}
@keyframes opossum-adventure {
  0% { transform:translate(-235px,9px) rotate(-8deg); }
  9% { transform:translate(82px,-12px) rotate(1deg); }
  31% { transform:translate(82px,-12px) rotate(1deg); }
  37% { transform:translate(68px,-8px) rotate(-3deg); }
  40% { transform:translate(58px,-9px) rotate(4deg); }
  43% { transform:translate(61px,-7px) rotate(-4deg); }
  47% { transform:translate(47px,-4px) rotate(0); }
  57% { transform:translate(15px,3px) rotate(4deg); }
  72% { transform:translate(13px,13px) rotate(7deg); }
  88%,100% { transform:translate(12px,24px) rotate(10deg); }
}
@keyframes opossum-mouth-gape {
  0%,2% { transform:scaleY(.06); opacity:0; }
  5%,31% { transform:scaleY(1.12); opacity:1; }
  40%,100% { transform:scaleY(.06); opacity:0; }
}
@keyframes opossum-closed-mouth { 0%,7%{opacity:1} 10%,35%{opacity:0} 41%,100%{opacity:1} }
@keyframes opossum-blink { 0%,38%,42%,46%,100%{transform:scaleY(1)} 40%,44%{transform:scaleY(.08)} }
@keyframes opossum-tail-follow {
  0% { transform:rotate(0); }
  10% { transform:translate(2px,-2px) rotate(-8deg); }
  31% { transform:translate(2px,-2px) rotate(-8deg); }
  45% { transform:translate(-2px,2px) rotate(5deg); }
  70% { transform:translate(-5px,5px) rotate(-8deg); }
  100% { transform:translate(-10px,7px) rotate(-16deg); }
}
@keyframes opossum-scramble-a { from{transform:rotate(-12deg)} to{transform:rotate(14deg)} }
@keyframes opossum-scramble-b { from{transform:rotate(13deg)} to{transform:rotate(-11deg)} }
@keyframes opossum-paws-appear { 0%,51%{opacity:0} 55%,100%{opacity:1} }
@keyframes opossum-perched-tail { 0%,100%{transform:translate(-10px,7px) rotate(-16deg)} 50%{transform:translate(-8px,5px) rotate(-10deg)} }

@media (max-width: 560px) {
  .hero-opossum { left:auto; right:-16px; bottom:-15px; width:108px; transition:right .4s ease; }
  .hero-opossum.is-playing,
  .hero-opossum.is-perched { right:28px; }
  .opossum-trigger { min-width:44px; min-height:44px; }
}

@media (prefers-reduced-motion: reduce) {
  .opossum-tail,.hero-opossum.is-perched .opossum-tail { animation:none; }
  .hero-opossum.is-playing .opossum-body { animation:opossum-reduced 1.3s ease both; }
  .hero-opossum.is-playing .opossum-tail { animation:opossum-reduced-tail 1.3s ease both; }
  .hero-opossum.is-playing .opossum-mouth-open { animation:opossum-reduced-mouth 1.3s linear both; }
  .hero-opossum.is-playing .opossum-mouth-closed { animation:opossum-reduced-closed 1.3s linear both; }
  .hero-opossum.is-playing .opossum-eyes,
  .hero-opossum.is-playing .opossum-legs,
  .hero-opossum.is-playing .opossum-grip-paw { animation:none; }
  .hero-opossum.is-playing .opossum-grip-paw { opacity:1; }
}
@keyframes opossum-reduced {
  0%{transform:translate(-235px,9px);opacity:.25}
  35%{transform:translate(82px,-12px);opacity:1}
  65%{transform:translate(82px,-12px);opacity:1}
  100%{transform:translate(12px,24px) rotate(10deg);opacity:1}
}
@keyframes opossum-reduced-tail { from{opacity:.55} to{transform:translate(-10px,7px) rotate(-16deg);opacity:1} }
@keyframes opossum-reduced-mouth { 0%,28%,68%,100%{opacity:0;transform:scaleY(.06)} 35%,60%{opacity:1;transform:scaleY(1.12)} }
@keyframes opossum-reduced-closed { 0%,28%{opacity:1} 35%,60%{opacity:0} 68%,100%{opacity:1} }