/* ==========================================================================
   interactions.css — card hover behaviour
   --------------------------------------------------------------------------
   Transcribed from the STREAMIT web demo, so this screen behaves the same as
   the rest of the product:
     Apollo/stream-it-demo/Web-demos/streamit-home/index.html

   Four effects, exactly as that demo defines them:

     base size  the card box never changes size. The artwork zooms inside a
                fixed, clipped box, so a rail never reflows or pushes its
                neighbours around.
     zoom       artwork scales to 1.148 (232/202 in Figma), 300ms standard ease
     outline    the 1px hairline goes white@20 -> white@80, 200ms
     colour     a brand-yellow ring on the overlay actions, @30 -> @70

   Which card gets which follows the demo: content cards get the scrim
   overlay, genre cards get the zoom, every card gets the outline.
   ========================================================================== */


/* ==========================================================================
   1. Outline — every card
   ========================================================================== */

.card-poster::after,
.card-cw::after {
  transition: border-color var(--dur-outline) ease;
}

.card-poster:hover::after,
.card-cw:hover::after,
.card-poster:focus-visible::after,
.card-cw:focus-visible::after {
  border-color: var(--card-outline-hover);
}

/* The whole card is the hit target in the demo */
.card-poster,
.card-cw {
  cursor: pointer;
}

.card-poster:focus-visible,
.card-cw:focus-visible {
  outline: none;    /* the hairline above is the visible focus indicator */
}


/* ==========================================================================
   2. Zoom — artwork only, inside the fixed box
   ========================================================================== */

/* The zoom is applied to the artwork CONTAINER, not the <img>.
   Figma flattens several of these cards into stacked layers that are
   positioned well outside the card box (one genre plate is 413% wide at
   left:-98%). Scaling those images directly pivots around each image's own
   centre, which sits off the card — so the artwork slid sideways instead of
   growing in place. Both .card-poster__art and .card-poster__layer are
   inset:0, i.e. exactly the card box, so scaling them zooms every layer
   evenly about the centre of the card. */
/* No `will-change` here: there are ~50 of these on the page, and promoting
   every one to its own compositor layer up front costs memory and can glitch
   paint. The transition alone is enough. */
.card-poster__art,
.card-poster__layer {
  transform-origin: center center;
  transition: transform var(--dur-zoom) var(--ease-zoom);
}

/* Genre cards zoom instead of revealing an overlay */
.card-poster--genre:hover .card-poster__art,
.card-poster--genre:hover .card-poster__layer,
.card-poster--genre:focus-visible .card-poster__art,
.card-poster--genre:focus-visible .card-poster__layer {
  transform: scale(var(--card-zoom));
}


/* ==========================================================================
   3. The hover preview owns this space now
   --------------------------------------------------------------------------
   There used to be a lightweight reveal here — a scrim with a title, meta
   and two action rings — that appeared on hover before the trailer preview
   opened. That made two hover states stacked on each other. The preview in
   js/trailer-card.js is the hover state; this one is gone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Continue Watching — the open treatment.
   No reveal overlay: the card already shows its scrim, title and progress at
   rest, so covering it on hover would undo exactly what the redesign is for.
   It gets the outline plus the same soft centre zoom as the genre cards.
   -------------------------------------------------------------------------- */

.card-cw__art {
  transform-origin: center center;
  transition: transform var(--dur-zoom) var(--ease-zoom);
}

.card-cw:hover .card-cw__art,
.card-cw:focus-visible .card-cw__art {
  transform: scale(var(--card-zoom));
}

.card-cw__menu {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--dur-ring) ease;
}

.card-cw__menu:hover,
.card-cw__menu:focus-visible { opacity: 1; outline: none; }


/* ==========================================================================
   4. Colour
   The brand-yellow ring now lives on the trailer preview's actions —
   see .trailer-btn in css/trailer-card.css.
   ========================================================================== */

/* ==========================================================================
   5. Reduced motion
   The state changes still happen — only the movement is dropped.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .card-poster__art,
  .card-poster__layer,
  .card-poster::after,
  .card-cw::after {
    transition: none;
  }

  .card-cw__art { transition: none; }

  .card-poster--genre:hover .card-poster__art,
  .card-poster--genre:hover .card-poster__layer,
  .card-poster--genre:focus-visible .card-poster__art,
  .card-poster--genre:focus-visible .card-poster__layer,
  .card-cw:hover .card-cw__art,
  .card-cw:focus-visible .card-cw__art {
    transform: none;
  }
}