/* Original CSS inspired by hover reveals and layered poster stacks.
   No third-party component source or animation runtime is bundled. */
.card .poster{isolation:isolate;overflow:hidden}
.card .poster>img{transition:transform .28s cubic-bezier(.2,.7,.2,1),filter .28s ease}
.poster-preview{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:18px;text-align:left;background:linear-gradient(180deg,transparent 5%,#090a0d99 35%,#090a0df5 100%);opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1);pointer-events:none;color:#fff}
.preview-brand{font-size:10px;letter-spacing:1px;color:#ffc5d2;font-weight:700}
.preview-story{font-size:12px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.preview-action{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #ffffff40;font-size:12px;font-weight:700}
.preview-action>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ff315a}
.hero-art img{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease,box-shadow .4s ease}
@media(min-width:761px){
 .card:focus-visible .poster-preview{opacity:1;transform:none}
 .card:focus-visible .poster>img{transform:scale(1.04);filter:brightness(.75)}
 .hero:focus-within .hero-art img:first-child{transform:translate(-2px,-7px) rotate(-17deg);opacity:.94}
 .hero:focus-within .hero-art img:nth-child(2){transform:translateY(-13px) rotate(-2deg)}
 .hero:focus-within .hero-art img:last-child{transform:translate(2px,-5px) rotate(15deg);opacity:.94}
}
@media(hover:hover) and (pointer:fine) and (min-width:761px){
 .card:hover .poster-preview{opacity:1;transform:none}
 .card:hover .poster>img{transform:scale(1.04);filter:brightness(.75)}
 .hero:hover .hero-art img:first-child{transform:translate(-2px,-7px) rotate(-17deg);opacity:.94}
 .hero:hover .hero-art img:nth-child(2){transform:translateY(-13px) rotate(-2deg)}
 .hero:hover .hero-art img:last-child{transform:translate(2px,-5px) rotate(15deg);opacity:.94}
}
/* Touch browsing keeps the complete poster visible; the existing button opens on one tap. */
@media(max-width:760px),(hover:none){.poster-preview{display:none}}
@media(prefers-reduced-motion:no-preference){
 dialog[open] .story-details{animation:story-appear .18s ease-out}
 @keyframes story-appear{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
 .card .poster>img,.poster-preview,.hero-art img{transition:none!important;animation:none!important}
 .card:is(:hover,:focus-visible) .poster>img{transform:none}
 .hero:is(:hover,:focus-within) .hero-art img:first-child{transform:translateX(25px) rotate(-12deg)}
 .hero:is(:hover,:focus-within) .hero-art img:nth-child(2){transform:none}
 .hero:is(:hover,:focus-within) .hero-art img:last-child{transform:translateX(-25px) rotate(10deg)}
}

@media(prefers-reduced-motion:no-preference){.hero-art{animation:hero-stack-arrive 1.1s cubic-bezier(.2,.7,.2,1) both}.hero-art img:first-child{animation:hero-left-arrive 1.2s cubic-bezier(.2,.7,.2,1) both}.hero-art img:last-child{animation:hero-right-arrive 1.2s cubic-bezier(.2,.7,.2,1) both}@keyframes hero-stack-arrive{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}@keyframes hero-left-arrive{from{translate:28px 0}to{translate:0 0}}@keyframes hero-right-arrive{from{translate:-28px 0}to{translate:0 0}}}

/* No hidden starting state: posters stay usable even without observer support. */
@media (prefers-reduced-motion:no-preference){
 @media (max-width:760px),(pointer:coarse){
  .card.poster-arrive .poster>img{animation:mobile-poster-arrive .44s cubic-bezier(.2,.7,.2,1)}
 }
}
@keyframes mobile-poster-arrive{from{opacity:.55;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}