Dark Media Hover Effects in CSS, Bootstrap & Tailwind

<div><span class="lbl">Poster glow with synopsis</span>
<div class="dk-grid posters">
  <a href="#" class="dk-poster"><img src="https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=600&h=900&q=70" alt="A vintage film projector casting a beam of light through smoke" width="600" height="900">
    <span class="dk-info"><span class="dk-when">Fri 20:30 · Screen 1</span><span class="dk-name">The Last Reel</span>
      <span class="dk-more"><span>A projectionist keeps a closing cinema running for one final week.</span></span></span></a>
  <a href="#" class="dk-poster"><img src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=600&h=900&q=70" alt="Rows of red cinema seats in a dark auditorium" width="600" height="900">
    <span class="dk-info"><span class="dk-when">Sat 18:00 · Screen 2</span><span class="dk-name">Row J</span>
      <span class="dk-more"><span>Strangers in an empty cinema find they all bought the same seat.</span></span></span></a>
  <a href="#" class="dk-poster"><img src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=600&h=900&q=70" alt="A full moon above glowing orange clouds at dusk" width="600" height="900">
    <span class="dk-info"><span class="dk-when">Sun 21:15 · Open air</span><span class="dk-name">Cloudline</span>
      <span class="dk-more"><span>A pilot's daughter chases one storm across three countries.</span></span></span></a>
</div></div>
<div><span class="lbl">Album cover with play button</span>
<div class="dk-grid albums">
  <a href="#" class="dk-album"><span class="dk-cover"><img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=500&h=500&q=70" alt="A vintage microphone in front of warm blurred stage lights" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="dk-track"><b>Static Bloom</b><span>Juniper Vale · 11 tracks</span></span></a>
  <a href="#" class="dk-album"><span class="dk-cover"><img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=500&h=500&q=70" alt="Coloured stage lights and confetti above a concert crowd" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="dk-track"><b>Laser Season</b><span>The Arcadians · 9 tracks</span></span></a>
  <a href="#" class="dk-album"><span class="dk-cover"><img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=500&h=500&q=70" alt="A silhouetted crowd with raised hands facing a bright stage" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="dk-track"><b>Golden Hour Live</b><span>Northern Lanes · 14 tracks</span></span></a>
  <a href="#" class="dk-album"><span class="dk-cover"><img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=500&h=500&q=70" alt="A man with raised arms in a cloud of coloured powder" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="dk-track"><b>Colour Run</b><span>Mika Sol · 8 tracks</span></span></a>
</div></div>
<div><span class="lbl">Neon edge</span>
<div class="dk-grid neon">
  <a href="#" class="dk-neon"><span class="dk-neon-in"><img src="https://images.unsplash.com/photo-1514565131-fce0801e5785?auto=format&fit=crop&w=900&h=506&q=70" alt="The Manhattan skyline across the water at dusk" width="900" height="506">
    <span class="dk-neon-cap"><i>Night walk · 2.5 hours</i><b>Midtown After Dark <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></b></span></span></a>
  <a href="#" class="dk-neon"><span class="dk-neon-in"><img src="https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=900&h=506&q=70" alt="Toronto towers and the CN Tower with their lights on at dusk" width="900" height="506">
    <span class="dk-neon-cap"><i>Night walk · 2 hours</i><b>Harbourfront Lights <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></b></span></span></a>
</div></div>

/* Hover effects for dark interfaces: light and colour do the work that shadows do on a white page.
   Every effect runs on :hover and :focus-visible; touch screens get the revealed state. */
.dk-grid{display:grid;gap:18px}
.dk-grid.posters{grid-template-columns:repeat(3,minmax(0,1fr))}
.dk-grid.albums{grid-template-columns:repeat(4,minmax(0,1fr))}
.dk-grid.neon{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:767px){.dk-grid.posters,.dk-grid.neon{grid-template-columns:minmax(0,1fr)}.dk-grid.albums{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 1. Poster: lifts with an amber glow, the photo brightens and the synopsis opens */
.dk-poster{--dk-glow:251,191,36;position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:14px;background:#141821;
  color:#fff;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.07);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.dk-poster:focus-visible{outline:3px solid rgb(var(--dk-glow));outline-offset:4px}
.dk-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.dk-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,11,.95),rgba(6,7,11,.6) 40%,rgba(6,7,11,0) 70%)}
.dk-info{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:4px;padding:18px;line-height:1.35}
.dk-when{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fbbf24}
.dk-name{font:600 1.3rem/1.15 Georgia,"Times New Roman",serif}
.dk-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s}
.dk-more>span{overflow:hidden;font-size:.88rem;color:#d1d5db}
.dk-poster:is(:hover,:focus-visible){transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(var(--dk-glow),.65),0 22px 50px -14px rgba(var(--dk-glow),.4)}
.dk-poster:is(:hover,:focus-visible) img{transform:scale(1.06);filter:none}
.dk-poster:is(:hover,:focus-visible) .dk-more{grid-template-rows:1fr}

/* 2. Album cover: the art dims, a play button rises and the level meter starts */
.dk-album{display:block;border-radius:12px;color:#e8eaf0;text-decoration:none}
.dk-album:focus-visible{outline:3px solid #22d3ee;outline-offset:5px}
.dk-cover{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#141821}
.dk-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dk-cover::after{content:"";position:absolute;inset:0;background:rgba(5,6,10,.55);opacity:0;transition:opacity .3s}
.dk-play{position:absolute;z-index:2;right:12px;bottom:12px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:#22d3ee;color:#04121a;box-shadow:0 8px 24px -6px rgba(34,211,238,.7);opacity:0;transform:translateY(10px) scale(.85);
  transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.dk-play svg{width:20px;height:20px;margin-left:2px}
.dk-eq{position:absolute;z-index:2;left:14px;bottom:18px;display:flex;align-items:flex-end;gap:3px;height:18px;opacity:0;transition:opacity .3s}
.dk-eq i{width:3px;height:45%;border-radius:2px;background:#22d3ee}
.dk-eq i:nth-child(2){height:90%}.dk-eq i:nth-child(3){height:65%}.dk-eq i:nth-child(4){height:30%}
.dk-album:is(:hover,:focus-visible) .dk-cover::after,.dk-album:is(:hover,:focus-visible) .dk-play,.dk-album:is(:hover,:focus-visible) .dk-eq{opacity:1}
.dk-album:is(:hover,:focus-visible) .dk-play{transform:none}
.dk-album:is(:hover,:focus-visible) .dk-eq i{animation:dk-eq .8s ease-in-out infinite alternate}
.dk-eq i:nth-child(2){animation-delay:-.3s}.dk-eq i:nth-child(3){animation-delay:-.55s}.dk-eq i:nth-child(4){animation-delay:-.15s}
@keyframes dk-eq{from{height:20%}to{height:100%}}
.dk-track{display:grid;gap:2px;padding-top:12px;line-height:1.35}
.dk-track b{font-size:.95rem}
.dk-track span{font-size:.85rem;color:#9aa3b5}

/* 3. Neon edge: a gradient border brightens and throws coloured light */
.dk-neon{position:relative;display:block;padding:2px;border-radius:16px;color:#fff;text-decoration:none;isolation:isolate;
  background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(232,121,249,.3));transition:box-shadow .4s}
.dk-neon::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#22d3ee,#e879f9);
  opacity:0;transition:opacity .4s}
.dk-neon:focus-visible{outline:3px solid #e879f9;outline-offset:5px}
.dk-neon-in{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#0b0d12}
.dk-neon-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9);transition:filter .4s}
.dk-neon-cap{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:40px 20px 18px;line-height:1.3;
  background:linear-gradient(to top,rgba(6,7,11,.9),rgba(6,7,11,0))}
.dk-neon-cap i{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#67e8f9}
.dk-neon-cap b{display:flex;align-items:center;gap:8px;font-size:1.2rem}
.dk-neon-cap svg{width:18px;height:18px;transition:transform .3s}
.dk-neon:is(:hover,:focus-visible){box-shadow:0 0 28px -6px rgba(34,211,238,.6),0 0 48px -10px rgba(232,121,249,.55)}
.dk-neon:is(:hover,:focus-visible)::before{opacity:1}
.dk-neon:is(:hover,:focus-visible) img{filter:brightness(.85) saturate(1.2)}
.dk-neon:is(:hover,:focus-visible) .dk-neon-cap svg{transform:translateX(5px)}

/* Touch: synopsis open and play button shown */
@media (hover:none){
  .dk-more{grid-template-rows:1fr}
  .dk-play{opacity:1;transform:none}
}
/* Reduced motion: no lifting, zooming, rising or bouncing meters; glow, light and colour still change */
@media (prefers-reduced-motion:reduce){
  .dk-poster,.dk-poster img,.dk-play,.dk-neon-cap svg,.dk-more{transition-property:opacity,filter,box-shadow}
  .dk-poster:is(:hover,:focus-visible),.dk-poster:is(:hover,:focus-visible) img,.dk-play,.dk-neon-cap svg{transform:none!important}
  .dk-eq i{animation:none!important}
}

<div><span class="lbl">Poster glow with synopsis</span>
<div class="row row-cols-1 row-cols-md-3 dk-grid">
  <div class="col"><a href="#" class="card text-decoration-none dk-poster"><img class="card-img object-fit-cover" src="https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=600&h=900&q=70" alt="A vintage film projector casting a beam of light through smoke" width="600" height="900">
    <span class="card-img-overlay dk-info"><span class="dk-when">Fri 20:30 · Screen 1</span><span class="dk-name">The Last Reel</span>
      <span class="dk-more"><span>A projectionist keeps a closing cinema running for one final week.</span></span></span></a></div>
  <div class="col"><a href="#" class="card text-decoration-none dk-poster"><img class="card-img object-fit-cover" src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=600&h=900&q=70" alt="Rows of red cinema seats in a dark auditorium" width="600" height="900">
    <span class="card-img-overlay dk-info"><span class="dk-when">Sat 18:00 · Screen 2</span><span class="dk-name">Row J</span>
      <span class="dk-more"><span>Strangers in an empty cinema find they all bought the same seat.</span></span></span></a></div>
  <div class="col"><a href="#" class="card text-decoration-none dk-poster"><img class="card-img object-fit-cover" src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=600&h=900&q=70" alt="A full moon above glowing orange clouds at dusk" width="600" height="900">
    <span class="card-img-overlay dk-info"><span class="dk-when">Sun 21:15 · Open air</span><span class="dk-name">Cloudline</span>
      <span class="dk-more"><span>A pilot's daughter chases one storm across three countries.</span></span></span></a></div>
</div></div>
<div><span class="lbl">Album cover with play button</span>
<div class="row row-cols-2 row-cols-md-4 dk-grid">
  <div class="col"><a href="#" class="card text-decoration-none dk-album"><span class="ratio ratio-1x1 d-block dk-cover"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=500&h=500&q=70" alt="A vintage microphone in front of warm blurred stage lights" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="card-body dk-track"><b>Static Bloom</b><span>Juniper Vale · 11 tracks</span></span></a></div>
  <div class="col"><a href="#" class="card text-decoration-none dk-album"><span class="ratio ratio-1x1 d-block dk-cover"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=500&h=500&q=70" alt="Coloured stage lights and confetti above a concert crowd" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="card-body dk-track"><b>Laser Season</b><span>The Arcadians · 9 tracks</span></span></a></div>
  <div class="col"><a href="#" class="card text-decoration-none dk-album"><span class="ratio ratio-1x1 d-block dk-cover"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=500&h=500&q=70" alt="A silhouetted crowd with raised hands facing a bright stage" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="card-body dk-track"><b>Golden Hour Live</b><span>Northern Lanes · 14 tracks</span></span></a></div>
  <div class="col"><a href="#" class="card text-decoration-none dk-album"><span class="ratio ratio-1x1 d-block dk-cover"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=500&h=500&q=70" alt="A man with raised arms in a cloud of coloured powder" width="500" height="500">
    <span class="dk-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="dk-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="card-body dk-track"><b>Colour Run</b><span>Mika Sol · 8 tracks</span></span></a></div>
</div></div>
<div><span class="lbl">Neon edge</span>
<div class="row row-cols-1 row-cols-md-2 dk-grid">
  <div class="col"><a href="#" class="d-block text-decoration-none dk-neon"><span class="ratio ratio-16x9 d-block dk-neon-in"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1514565131-fce0801e5785?auto=format&fit=crop&w=900&h=506&q=70" alt="The Manhattan skyline across the water at dusk" width="900" height="506">
    <span class="dk-neon-cap"><i>Night walk · 2.5 hours</i><b>Midtown After Dark <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></b></span></span></a></div>
  <div class="col"><a href="#" class="d-block text-decoration-none dk-neon"><span class="ratio ratio-16x9 d-block dk-neon-in"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=900&h=506&q=70" alt="Toronto towers and the CN Tower with their lights on at dusk" width="900" height="506">
    <span class="dk-neon-cap"><i>Night walk · 2 hours</i><b>Harbourfront Lights <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></b></span></span></a></div>
</div></div>

/* Bootstrap 5 dark theme (data-bs-theme="dark"), .row grids, .card, .card-img-overlay and .ratio. Hover effects for dark interfaces: light and colour do the work that shadows do on a white page.
   Every effect runs on :hover and :focus-visible; touch screens get the revealed state. */
.dk-grid{--bs-gutter-x:18px;--bs-gutter-y:18px}

/* 1. Poster: lifts with an amber glow, the photo brightens and the synopsis opens */
.dk-poster{--dk-glow:251,191,36;--bs-card-border-width:0;--bs-card-border-radius:14px;--bs-card-inner-border-radius:14px;--bs-card-bg:#141821;
  aspect-ratio:2/3;overflow:hidden;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.07);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.dk-poster:focus-visible{outline:3px solid rgb(var(--dk-glow));outline-offset:4px}
.dk-poster .card-img{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.85) brightness(.8);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.dk-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,11,.95),rgba(6,7,11,.6) 40%,rgba(6,7,11,0) 70%)}
.dk-info{z-index:2;top:auto;border-radius:0;display:grid;gap:4px;padding:18px;line-height:1.35}
.dk-when{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fbbf24}
.dk-name{font:600 1.3rem/1.15 Georgia,"Times New Roman",serif}
.dk-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s}
.dk-more>span{overflow:hidden;font-size:.88rem;color:#d1d5db}
.dk-poster:is(:hover,:focus-visible){transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(var(--dk-glow),.65),0 22px 50px -14px rgba(var(--dk-glow),.4)}
.dk-poster:is(:hover,:focus-visible) .card-img{transform:scale(1.06);filter:none}
.dk-poster:is(:hover,:focus-visible) .dk-more{grid-template-rows:1fr}

/* 2. Album cover: the art dims, a play button rises and the level meter starts */
.dk-album{--bs-card-bg:transparent;--bs-card-border-width:0;border-radius:12px;color:#e8eaf0}
.dk-album:focus-visible{outline:3px solid #22d3ee;outline-offset:5px}
.dk-cover{overflow:hidden;border-radius:12px;background:#141821}
.dk-cover::after{content:"";position:absolute;inset:0;background:rgba(5,6,10,.55);opacity:0;transition:opacity .3s}
.dk-cover>.dk-play{z-index:2;top:auto;left:auto;right:12px;bottom:12px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:#22d3ee;color:#04121a;box-shadow:0 8px 24px -6px rgba(34,211,238,.7);opacity:0;transform:translateY(10px) scale(.85);
  transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.dk-play svg{width:20px;height:20px;margin-left:2px}
.dk-cover>.dk-eq{z-index:2;top:auto;left:14px;bottom:18px;display:flex;align-items:flex-end;gap:3px;width:auto;height:18px;opacity:0;transition:opacity .3s}
.dk-eq i{width:3px;height:45%;border-radius:2px;background:#22d3ee}
.dk-eq i:nth-child(2){height:90%}.dk-eq i:nth-child(3){height:65%}.dk-eq i:nth-child(4){height:30%}
.dk-album:is(:hover,:focus-visible) .dk-cover::after,.dk-album:is(:hover,:focus-visible) .dk-play,.dk-album:is(:hover,:focus-visible) .dk-eq{opacity:1}
.dk-album:is(:hover,:focus-visible) .dk-play{transform:none}
.dk-album:is(:hover,:focus-visible) .dk-eq i{animation:dk-eq .8s ease-in-out infinite alternate}
.dk-eq i:nth-child(2){animation-delay:-.3s}.dk-eq i:nth-child(3){animation-delay:-.55s}.dk-eq i:nth-child(4){animation-delay:-.15s}
@keyframes dk-eq{from{height:20%}to{height:100%}}
.dk-track{display:grid;gap:2px;padding:12px 0 0;line-height:1.35}
.dk-track b{font-size:.95rem}
.dk-track span{font-size:.85rem;color:#9aa3b5}

/* 3. Neon edge: a gradient border brightens and throws coloured light */
.dk-neon{position:relative;display:block;padding:2px;border-radius:16px;color:#fff;text-decoration:none;isolation:isolate;
  background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(232,121,249,.3));transition:box-shadow .4s}
.dk-neon::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#22d3ee,#e879f9);
  opacity:0;transition:opacity .4s}
.dk-neon:focus-visible{outline:3px solid #e879f9;outline-offset:5px}
.dk-neon-in{overflow:hidden;border-radius:14px;background:#0b0d12}
.dk-neon-in img{filter:brightness(.55) saturate(.9);transition:filter .4s}
.dk-neon-in>.dk-neon-cap{top:auto;bottom:0;height:auto;display:grid;gap:4px;padding:40px 20px 18px;line-height:1.3;
  background:linear-gradient(to top,rgba(6,7,11,.9),rgba(6,7,11,0))}
.dk-neon-cap i{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#67e8f9}
.dk-neon-cap b{display:flex;align-items:center;gap:8px;font-size:1.2rem}
.dk-neon-cap svg{width:18px;height:18px;transition:transform .3s}
.dk-neon:is(:hover,:focus-visible){box-shadow:0 0 28px -6px rgba(34,211,238,.6),0 0 48px -10px rgba(232,121,249,.55)}
.dk-neon:is(:hover,:focus-visible)::before{opacity:1}
.dk-neon:is(:hover,:focus-visible) img{filter:brightness(.85) saturate(1.2)}
.dk-neon:is(:hover,:focus-visible) .dk-neon-cap svg{transform:translateX(5px)}

/* Touch: synopsis open and play button shown */
@media (hover:none){
  .dk-more{grid-template-rows:1fr}
  .dk-play{opacity:1;transform:none}
}
/* Reduced motion: no lifting, zooming, rising or bouncing meters; glow, light and colour still change */
@media (prefers-reduced-motion:reduce){
  .dk-poster,.dk-poster img,.dk-play,.dk-neon-cap svg,.dk-more{transition-property:opacity,filter,box-shadow}
  .dk-poster:is(:hover,:focus-visible),.dk-poster:is(:hover,:focus-visible) img,.dk-play,.dk-neon-cap svg{transform:none!important}
  .dk-eq i{animation:none!important}
}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa3b5] uppercase">Poster glow with synopsis</span>
<div class="grid grid-cols-1 gap-[18px] md:grid-cols-3">
  <a href="#" class="group relative block aspect-[2/3] overflow-hidden rounded-[14px] bg-[#141821] text-white no-underline shadow-[0_0_0_1px_rgba(255,255,255,.07)] transition-[translate,box-shadow] duration-400 ease-[cubic-bezier(.2,.7,.2,1)] hover:shadow-[0_0_0_1px_rgba(251,191,36,.65),0_22px_50px_-14px_rgba(251,191,36,.4)] focus-visible:shadow-[0_0_0_1px_rgba(251,191,36,.65),0_22px_50px_-14px_rgba(251,191,36,.4)] motion-safe:hover:-translate-y-1.5 motion-safe:focus-visible:-translate-y-1.5 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-amber after:absolute after:inset-0 after:bg-[linear-gradient(to_top,rgba(6,7,11,.95),rgba(6,7,11,.6)_40%,rgba(6,7,11,0)_70%)]"><img class="absolute inset-0 size-full object-cover brightness-80 saturate-85 transition-[scale,filter] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:filter-none group-focus-visible:filter-none motion-safe:group-hover:scale-106 motion-safe:group-focus-visible:scale-106" src="https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=600&h=900&q=70" alt="A vintage film projector casting a beam of light through smoke" width="600" height="900">
    <span class="absolute inset-x-0 bottom-0 z-2 grid gap-1 p-[18px] leading-[1.35]"><span class="text-[.72rem] font-bold tracking-[.12em] text-amber uppercase">Fri 20:30 · Screen 1</span><span class="font-serif text-[1.3rem] leading-[1.15] font-semibold">The Last Reel</span>
      <span class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-400 group-hover:grid-rows-[1fr] group-focus-visible:grid-rows-[1fr] touch:grid-rows-[1fr] motion-reduce:transition-none"><span class="overflow-hidden text-[.88rem] text-[#d1d5db]">A projectionist keeps a closing cinema running for one final week.</span></span></span></a>
  <a href="#" class="group relative block aspect-[2/3] overflow-hidden rounded-[14px] bg-[#141821] text-white no-underline shadow-[0_0_0_1px_rgba(255,255,255,.07)] transition-[translate,box-shadow] duration-400 ease-[cubic-bezier(.2,.7,.2,1)] hover:shadow-[0_0_0_1px_rgba(251,191,36,.65),0_22px_50px_-14px_rgba(251,191,36,.4)] focus-visible:shadow-[0_0_0_1px_rgba(251,191,36,.65),0_22px_50px_-14px_rgba(251,191,36,.4)] motion-safe:hover:-translate-y-1.5 motion-safe:focus-visible:-translate-y-1.5 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-amber after:absolute after:inset-0 after:bg-[linear-gradient(to_top,rgba(6,7,11,.95),rgba(6,7,11,.6)_40%,rgba(6,7,11,0)_70%)]"><img class="absolute inset-0 size-full object-cover brightness-80 saturate-85 transition-[scale,filter] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:filter-none group-focus-visible:filter-none motion-safe:group-hover:scale-106 motion-safe:group-focus-visible:scale-106" src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=600&h=900&q=70" alt="Rows of red cinema seats in a dark auditorium" width="600" height="900">
    <span class="absolute inset-x-0 bottom-0 z-2 grid gap-1 p-[18px] leading-[1.35]"><span class="text-[.72rem] font-bold tracking-[.12em] text-amber uppercase">Sat 18:00 · Screen 2</span><span class="font-serif text-[1.3rem] leading-[1.15] font-semibold">Row J</span>
      <span class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-400 group-hover:grid-rows-[1fr] group-focus-visible:grid-rows-[1fr] touch:grid-rows-[1fr] motion-reduce:transition-none"><span class="overflow-hidden text-[.88rem] text-[#d1d5db]">Strangers in an empty cinema find they all bought the same seat.</span></span></span></a>
  <a href="#" class="group relative block aspect-[2/3] overflow-hidden rounded-[14px] bg-[#141821] text-white no-underline shadow-[0_0_0_1px_rgba(255,255,255,.07)] transition-[translate,box-shadow] duration-400 ease-[cubic-bezier(.2,.7,.2,1)] hover:shadow-[0_0_0_1px_rgba(251,191,36,.65),0_22px_50px_-14px_rgba(251,191,36,.4)] focus-visible:shadow-[0_0_0_1px_rgba(251,191,36,.65),0_22px_50px_-14px_rgba(251,191,36,.4)] motion-safe:hover:-translate-y-1.5 motion-safe:focus-visible:-translate-y-1.5 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-amber after:absolute after:inset-0 after:bg-[linear-gradient(to_top,rgba(6,7,11,.95),rgba(6,7,11,.6)_40%,rgba(6,7,11,0)_70%)]"><img class="absolute inset-0 size-full object-cover brightness-80 saturate-85 transition-[scale,filter] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:filter-none group-focus-visible:filter-none motion-safe:group-hover:scale-106 motion-safe:group-focus-visible:scale-106" src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=600&h=900&q=70" alt="A full moon above glowing orange clouds at dusk" width="600" height="900">
    <span class="absolute inset-x-0 bottom-0 z-2 grid gap-1 p-[18px] leading-[1.35]"><span class="text-[.72rem] font-bold tracking-[.12em] text-amber uppercase">Sun 21:15 · Open air</span><span class="font-serif text-[1.3rem] leading-[1.15] font-semibold">Cloudline</span>
      <span class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-400 group-hover:grid-rows-[1fr] group-focus-visible:grid-rows-[1fr] touch:grid-rows-[1fr] motion-reduce:transition-none"><span class="overflow-hidden text-[.88rem] text-[#d1d5db]">A pilot's daughter chases one storm across three countries.</span></span></span></a>
</div></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa3b5] uppercase">Album cover with play button</span>
<div class="grid grid-cols-2 gap-[18px] md:grid-cols-4">
  <a href="#" class="group block rounded-xl text-[#e8eaf0] no-underline focus-visible:outline-3 focus-visible:outline-offset-5 focus-visible:outline-cyan"><span class="relative block aspect-square overflow-hidden rounded-xl bg-[#141821] after:absolute after:inset-0 after:bg-[rgba(5,6,10,.55)] after:opacity-0 after:transition-opacity after:duration-300 group-hover:after:opacity-100 group-focus-visible:after:opacity-100"><img class="absolute inset-0 size-full object-cover" src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=500&h=500&q=70" alt="A vintage microphone in front of warm blurred stage lights" width="500" height="500">
    <span class="absolute bottom-[18px] left-3.5 z-2 flex h-[18px] items-end gap-[3px] opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true"><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[45%]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[90%] [animation-delay:-.3s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[65%] [animation-delay:-.55s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[30%] [animation-delay:-.15s]"></i></span><span class="absolute right-3 bottom-3 z-2 grid size-12 place-items-center rounded-full bg-cyan text-[#04121a] shadow-[0_8px_24px_-6px_rgba(34,211,238,.7)] opacity-0 transition-[opacity,translate,scale] duration-300 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:opacity-100 group-focus-visible:opacity-100 motion-safe:translate-y-2.5 motion-safe:scale-85 motion-safe:group-hover:translate-y-0 motion-safe:group-focus-visible:translate-y-0 motion-safe:group-hover:scale-100 motion-safe:group-focus-visible:scale-100 touch:opacity-100! touch:translate-y-0! touch:scale-100!" aria-hidden="true"><svg class="ml-0.5 size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="grid gap-0.5 pt-3 leading-[1.35]"><b class="text-[.95rem]">Static Bloom</b><span class="text-[.85rem] text-[#9aa3b5]">Juniper Vale · 11 tracks</span></span></a>
  <a href="#" class="group block rounded-xl text-[#e8eaf0] no-underline focus-visible:outline-3 focus-visible:outline-offset-5 focus-visible:outline-cyan"><span class="relative block aspect-square overflow-hidden rounded-xl bg-[#141821] after:absolute after:inset-0 after:bg-[rgba(5,6,10,.55)] after:opacity-0 after:transition-opacity after:duration-300 group-hover:after:opacity-100 group-focus-visible:after:opacity-100"><img class="absolute inset-0 size-full object-cover" src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=500&h=500&q=70" alt="Coloured stage lights and confetti above a concert crowd" width="500" height="500">
    <span class="absolute bottom-[18px] left-3.5 z-2 flex h-[18px] items-end gap-[3px] opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true"><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[45%]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[90%] [animation-delay:-.3s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[65%] [animation-delay:-.55s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[30%] [animation-delay:-.15s]"></i></span><span class="absolute right-3 bottom-3 z-2 grid size-12 place-items-center rounded-full bg-cyan text-[#04121a] shadow-[0_8px_24px_-6px_rgba(34,211,238,.7)] opacity-0 transition-[opacity,translate,scale] duration-300 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:opacity-100 group-focus-visible:opacity-100 motion-safe:translate-y-2.5 motion-safe:scale-85 motion-safe:group-hover:translate-y-0 motion-safe:group-focus-visible:translate-y-0 motion-safe:group-hover:scale-100 motion-safe:group-focus-visible:scale-100 touch:opacity-100! touch:translate-y-0! touch:scale-100!" aria-hidden="true"><svg class="ml-0.5 size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="grid gap-0.5 pt-3 leading-[1.35]"><b class="text-[.95rem]">Laser Season</b><span class="text-[.85rem] text-[#9aa3b5]">The Arcadians · 9 tracks</span></span></a>
  <a href="#" class="group block rounded-xl text-[#e8eaf0] no-underline focus-visible:outline-3 focus-visible:outline-offset-5 focus-visible:outline-cyan"><span class="relative block aspect-square overflow-hidden rounded-xl bg-[#141821] after:absolute after:inset-0 after:bg-[rgba(5,6,10,.55)] after:opacity-0 after:transition-opacity after:duration-300 group-hover:after:opacity-100 group-focus-visible:after:opacity-100"><img class="absolute inset-0 size-full object-cover" src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=500&h=500&q=70" alt="A silhouetted crowd with raised hands facing a bright stage" width="500" height="500">
    <span class="absolute bottom-[18px] left-3.5 z-2 flex h-[18px] items-end gap-[3px] opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true"><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[45%]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[90%] [animation-delay:-.3s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[65%] [animation-delay:-.55s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[30%] [animation-delay:-.15s]"></i></span><span class="absolute right-3 bottom-3 z-2 grid size-12 place-items-center rounded-full bg-cyan text-[#04121a] shadow-[0_8px_24px_-6px_rgba(34,211,238,.7)] opacity-0 transition-[opacity,translate,scale] duration-300 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:opacity-100 group-focus-visible:opacity-100 motion-safe:translate-y-2.5 motion-safe:scale-85 motion-safe:group-hover:translate-y-0 motion-safe:group-focus-visible:translate-y-0 motion-safe:group-hover:scale-100 motion-safe:group-focus-visible:scale-100 touch:opacity-100! touch:translate-y-0! touch:scale-100!" aria-hidden="true"><svg class="ml-0.5 size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="grid gap-0.5 pt-3 leading-[1.35]"><b class="text-[.95rem]">Golden Hour Live</b><span class="text-[.85rem] text-[#9aa3b5]">Northern Lanes · 14 tracks</span></span></a>
  <a href="#" class="group block rounded-xl text-[#e8eaf0] no-underline focus-visible:outline-3 focus-visible:outline-offset-5 focus-visible:outline-cyan"><span class="relative block aspect-square overflow-hidden rounded-xl bg-[#141821] after:absolute after:inset-0 after:bg-[rgba(5,6,10,.55)] after:opacity-0 after:transition-opacity after:duration-300 group-hover:after:opacity-100 group-focus-visible:after:opacity-100"><img class="absolute inset-0 size-full object-cover" src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=500&h=500&q=70" alt="A man with raised arms in a cloud of coloured powder" width="500" height="500">
    <span class="absolute bottom-[18px] left-3.5 z-2 flex h-[18px] items-end gap-[3px] opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true"><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[45%]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[90%] [animation-delay:-.3s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[65%] [animation-delay:-.55s]"></i><i class="w-[3px] rounded-[2px] bg-cyan motion-safe:group-hover:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] motion-safe:group-focus-visible:animate-[dk-eq_.8s_ease-in-out_infinite_alternate] h-[30%] [animation-delay:-.15s]"></i></span><span class="absolute right-3 bottom-3 z-2 grid size-12 place-items-center rounded-full bg-cyan text-[#04121a] shadow-[0_8px_24px_-6px_rgba(34,211,238,.7)] opacity-0 transition-[opacity,translate,scale] duration-300 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:opacity-100 group-focus-visible:opacity-100 motion-safe:translate-y-2.5 motion-safe:scale-85 motion-safe:group-hover:translate-y-0 motion-safe:group-focus-visible:translate-y-0 motion-safe:group-hover:scale-100 motion-safe:group-focus-visible:scale-100 touch:opacity-100! touch:translate-y-0! touch:scale-100!" aria-hidden="true"><svg class="ml-0.5 size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l12-7.5z"/></svg></span></span>
    <span class="grid gap-0.5 pt-3 leading-[1.35]"><b class="text-[.95rem]">Colour Run</b><span class="text-[.85rem] text-[#9aa3b5]">Mika Sol · 8 tracks</span></span></a>
</div></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa3b5] uppercase">Neon edge</span>
<div class="grid grid-cols-1 gap-[18px] md:grid-cols-2">
  <a href="#" class="group relative isolate block rounded-2xl bg-[linear-gradient(135deg,rgba(34,211,238,.3),rgba(232,121,249,.3))] p-[2px] text-white no-underline transition-shadow duration-400 before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:bg-[linear-gradient(135deg,#22d3ee,#e879f9)] before:opacity-0 before:transition-opacity before:duration-400 hover:before:opacity-100 focus-visible:before:opacity-100 hover:shadow-[0_0_28px_-6px_rgba(34,211,238,.6),0_0_48px_-10px_rgba(232,121,249,.55)] focus-visible:shadow-[0_0_28px_-6px_rgba(34,211,238,.6),0_0_48px_-10px_rgba(232,121,249,.55)] focus-visible:outline-3 focus-visible:outline-offset-5 focus-visible:outline-magenta"><span class="relative block aspect-video overflow-hidden rounded-[14px] bg-[#0b0d12]"><img class="absolute inset-0 size-full object-cover brightness-55 saturate-90 transition-[filter] duration-400 group-hover:brightness-85 group-focus-visible:brightness-85 group-hover:saturate-120 group-focus-visible:saturate-120" src="https://images.unsplash.com/photo-1514565131-fce0801e5785?auto=format&fit=crop&w=900&h=506&q=70" alt="The Manhattan skyline across the water at dusk" width="900" height="506">
    <span class="absolute inset-x-0 bottom-0 grid gap-1 bg-[linear-gradient(to_top,rgba(6,7,11,.9),rgba(6,7,11,0))] px-5 pt-10 pb-[18px] leading-[1.3]"><i class="text-[.72rem] font-bold tracking-[.12em] text-[#67e8f9] uppercase not-italic">Night walk · 2.5 hours</i><b class="flex items-center gap-2 text-[1.2rem]">Midtown After Dark <svg class="size-[18px] transition-[translate] duration-300 motion-safe:group-hover:translate-x-[5px] motion-safe:group-focus-visible:translate-x-[5px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></b></span></span></a>
  <a href="#" class="group relative isolate block rounded-2xl bg-[linear-gradient(135deg,rgba(34,211,238,.3),rgba(232,121,249,.3))] p-[2px] text-white no-underline transition-shadow duration-400 before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:bg-[linear-gradient(135deg,#22d3ee,#e879f9)] before:opacity-0 before:transition-opacity before:duration-400 hover:before:opacity-100 focus-visible:before:opacity-100 hover:shadow-[0_0_28px_-6px_rgba(34,211,238,.6),0_0_48px_-10px_rgba(232,121,249,.55)] focus-visible:shadow-[0_0_28px_-6px_rgba(34,211,238,.6),0_0_48px_-10px_rgba(232,121,249,.55)] focus-visible:outline-3 focus-visible:outline-offset-5 focus-visible:outline-magenta"><span class="relative block aspect-video overflow-hidden rounded-[14px] bg-[#0b0d12]"><img class="absolute inset-0 size-full object-cover brightness-55 saturate-90 transition-[filter] duration-400 group-hover:brightness-85 group-focus-visible:brightness-85 group-hover:saturate-120 group-focus-visible:saturate-120" src="https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=900&h=506&q=70" alt="Toronto towers and the CN Tower with their lights on at dusk" width="900" height="506">
    <span class="absolute inset-x-0 bottom-0 grid gap-1 bg-[linear-gradient(to_top,rgba(6,7,11,.9),rgba(6,7,11,0))] px-5 pt-10 pb-[18px] leading-[1.3]"><i class="text-[.72rem] font-bold tracking-[.12em] text-[#67e8f9] uppercase not-italic">Night walk · 2 hours</i><b class="flex items-center gap-2 text-[1.2rem]">Harbourfront Lights <svg class="size-[18px] transition-[translate] duration-300 motion-safe:group-hover:translate-x-[5px] motion-safe:group-focus-visible:translate-x-[5px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></b></span></span></a>
</div></div>

/* touch: screens without hover open the synopsis and show the play button */
@custom-variant touch (@media (hover: none));
@theme {
  --color-amber: #fbbf24;
  --color-cyan: #22d3ee;
  --color-magenta: #e879f9;
  --font-serif: Georgia, "Times New Roman", serif;
}
@keyframes dk-eq { from { height: 20%; } to { height: 100%; } }