/* Outer links hold the fan; inner artwork keeps its independent optical tilt. */
body.dbl-rework #page-container #et-boc #main-content .bunny-hero-fan>a.bunny-fan-card{position:absolute!important;margin:0!important;padding:0!important;border:0!important}
.bunny-hero-fan>a.bunny-fan-card:after{content:none!important}
body.dbl-rework #page-container #et-boc #main-content .bunny-hero-fan>a.bunny-fan-card{width:44%;left:28%;max-width:238px}
.bunny-hero-fan{position:relative;width:100%;max-width:540px;height:460px;margin:12px auto 0;isolation:isolate;transform:perspective(1100px) rotateX(9deg) rotateY(-13deg) rotateZ(-7deg);transform-origin:50% 65%}
.bunny-hero-fan .bunny-fan-card{position:absolute;display:block;width:54%;max-width:270px;top:50px;left:23%;transform-origin:50% 90%;transform:translate(var(--fan-x),var(--fan-y)) rotate(var(--fan-angle));transition:transform .55s cubic-bezier(.16,1,.3,1),filter .55s;z-index:var(--fan-layer);text-decoration:none!important;outline-offset:8px;border-radius:5%}
.bunny-fan-slot-1{--fan-x:-25%;--fan-y:18px;--fan-angle:-19deg;--fan-layer:3}
.bunny-fan-slot-2{--fan-x:0%;--fan-y:4px;--fan-angle:0deg;--fan-layer:2}
.bunny-fan-slot-3{--fan-x:25%;--fan-y:20px;--fan-angle:19deg;--fan-layer:1}
.bunny-fan-art{display:block;position:relative;aspect-ratio:5/7;border-radius:5%;isolation:isolate;overflow:hidden;background:#fff9f2;box-shadow:0 16px 28px #0005}
body.dbl-rework #page-container #et-boc #main-content .bunny-fan-art img{display:block;width:100%!important;height:100%!important;aspect-ratio:5/7;object-fit:contain!important;margin:0!important;border-radius:inherit}
.bunny-fan-caption{position:absolute;left:0;right:0;bottom:-42px;min-height:32px;padding:6px 10px;background:#fff9f2;color:#292335!important;border-radius:9px;font:700 12px/1.35 sans-serif;text-align:center;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s;pointer-events:none}
.bunny-hero-fan .bunny-fan-card:focus-visible{z-index:6;outline:3px solid #b7e949;transform:translate(var(--fan-x),calc(var(--fan-y) - 22px)) rotate(var(--fan-angle))}
.bunny-fan-card:focus-visible .bunny-fan-caption{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){.bunny-hero-fan .bunny-fan-card:hover{z-index:6;transform:translate(var(--fan-x),calc(var(--fan-y) - 26px)) rotate(var(--fan-angle));filter:drop-shadow(0 10px 14px #0003)}.bunny-fan-card:hover .bunny-fan-caption{opacity:1;transform:none}}
@media(max-width:767px){.bunny-hero-fan{max-width:390px;height:350px;margin:24px auto 0}.bunny-hero-fan .bunny-fan-card{top:30px;width:52%;left:24%}.bunny-fan-caption{font-size:11px}.bunny-fan-art .bunny-holo-badge{font-size:8px;right:6px;bottom:6px;padding:4px 6px}}
@media(max-width:380px){.bunny-hero-fan{height:310px}}
.bunny-hero-fan[data-count="1"] .bunny-fan-card{--fan-x:0%;--fan-angle:-6deg}
.bunny-hero-fan[data-count="2"] .bunny-fan-slot-1{--fan-x:-20%}.bunny-hero-fan[data-count="2"] .bunny-fan-slot-2{--fan-x:20%;--fan-angle:10deg}
@media(prefers-reduced-motion:reduce){.bunny-hero-fan .bunny-fan-card,.bunny-fan-caption{transition:none}}

/* One entrance per page load. Only outer links move; foil keeps its own tilt. */
@media(prefers-reduced-motion:no-preference){
 .bunny-hero-fan[data-count="3"]>.bunny-fan-card{
  animation:dbl-fan-deal-open 520ms cubic-bezier(.16,1,.3,1) 180ms backwards;
 }
 .bunny-hero-fan[data-count="3"]>.bunny-fan-slot-2{animation-delay:210ms}
 .bunny-hero-fan[data-count="3"]>.bunny-fan-slot-3{animation-delay:240ms}
 .bunny-hero-fan[data-count="3"]>.bunny-fan-card:focus-visible{animation:none}
}
@keyframes dbl-fan-deal-open{
 from{transform:translate(0%,12px) rotate(-2deg)}
 to{transform:translate(var(--fan-x),var(--fan-y)) rotate(var(--fan-angle))}
}
