/* Films · Sequence
   Active scroll-driven positioning, 3D float transitions, and responsive poster layouts
   ========================================================================== */

@property --cast-t {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .film:is(.is-loading-sequence, .has-sequence) .film__cast {
    position: absolute;
    inset: 0;
    display: block;
    max-width: none;
    padding: 0;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card {
    --cast-t: 0;
    --ink: var(--cast-t);
    position: absolute;
    top: 50%;
    width: min(44rem, calc(100vw - 2 * var(--gutter) - 6vw));
    gap: var(--space-2);
    opacity: var(--cast-t);
    text-shadow: 0 2px 14px var(--color-night-a90), 0 0 24px var(--color-night-a85);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card__name {
    font-size: clamp(2rem, 4.4vw, 4.75rem);
    overflow-wrap: break-word;
    line-height: 1.02;
    text-shadow:
      0 2px 4px var(--color-night-a85),
      0 8px 32px var(--color-night-a85);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card__note {
    display: block;
    max-width: 34ch;
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-cream-a90);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--left {
    left: max(var(--gutter), 6vw);
    align-items: flex-start;
    text-align: left;
    transform: translate3d(calc((var(--cast-t) - 1) * var(--space-5)), -50%, 0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right {
    right: max(var(--gutter), 6vw);
    align-items: flex-end;
    text-align: right;
    transform: translate3d(calc((1 - var(--cast-t)) * var(--space-5)), -50%, 0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--center {
    left: 50%;
    width: min(46rem, calc(100% - 2 * var(--gutter)));
    align-items: center;
    text-align: center;
    transform: translate3d(-50%, calc(-50% + (1 - var(--cast-t)) * var(--space-3)), 0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing {
    top: 46%;
    left: 50%;
    width: min(64rem, calc(100vw - 2 * var(--gutter)));
    height: min(72vh, 560px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform: translate3d(-50%, calc(-50% + (1 - var(--cast-t)) * var(--space-3)), 0) scale(calc(0.96 + 0.04 * var(--cast-t)));
    pointer-events: auto;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-1);
    pointer-events: auto;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__logo img {
    width: clamp(140px, 16vw, 200px);
    max-width: 210px;
    height: auto;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__name {
    font-size: clamp(2.1rem, 5.2vw, 4.2rem);
    color: var(--color-ivory);
    white-space: nowrap;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__note {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-ivory);
    white-space: normal;
    max-width: 100%;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__role,
  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__directions {
    font-size: var(--text-kicker);
    color: var(--color-gold);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right .cast-card__role::after {
    transform-origin: right;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right .cast-card__buy {
    justify-content: flex-end;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right .stroke-p {
    padding-inline: 0 var(--space-3);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right .stroke-p::before {
    inset-inline: auto 0;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--center .cast-card__role::after {
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .film:is(.is-loading-sequence, .has-sequence) .cast-card--left,
  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right,
  .film:is(.is-loading-sequence, .has-sequence) .cast-card--center:not(.cast-card--closing) {
    top: auto;
    bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card {
    text-shadow: 0 2px 8px var(--color-night-a90), 0 4px 16px var(--color-night-a85);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card__name {
    font-size: clamp(2.2rem, 8vw, 4rem);
    text-shadow: 0 2px 6px var(--color-night-a90), 0 4px 16px var(--color-night-a85);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--left {
    transform: translate3d(calc((var(--cast-t) - 1) * var(--space-3)), 0, 0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--right {
    transform: translate3d(calc((1 - var(--cast-t)) * var(--space-3)), 0, 0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--center:not(.cast-card--closing) {
    transform: translate3d(0, calc((1 - var(--cast-t)) * var(--space-2)), 0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing {
    position: absolute;
    inset: 0;
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-2) var(--space-2);
    transform: translate3d(0, calc((1 - var(--cast-t)) * var(--space-3)), 0);
    pointer-events: auto;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    pointer-events: auto;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__logo img {
    width: clamp(140px, 40vw, 196px);
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 4px 14px var(--color-night-a90)) drop-shadow(0 0 18px var(--color-gold-a35));
    will-change: transform;
    transform: translateZ(0);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__center-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__name {
    font-size: clamp(1.75rem, 7.2vw, 3.2rem);
    color: var(--color-ivory);
    line-height: 1.04;
    text-transform: none;
    white-space: nowrap;
    text-shadow:
      0 2px 8px var(--color-night-a90),
      0 8px 30px var(--color-night-a90);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__note {
    font-size: clamp(0.9rem, 3.2vw, 1.1rem);
    max-width: 100%;
    white-space: normal;
    color: var(--color-ivory);
    text-shadow: 0 2px 10px var(--color-night-a90);
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__meta-row {
    margin-bottom: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    max-width: 100%;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__role,
  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__directions {
    font-size: clamp(0.72rem, 2.4vw, 0.85rem);
    font-weight: var(--weight-ui);
    letter-spacing: clamp(0.06em, 0.15vw, 0.12em);
    white-space: nowrap;
    color: var(--color-gold);
    text-shadow: 0 2px 8px var(--color-night-a90);
  }

  :root.a11y-zoomed .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__role,
  :root.a11y-zoomed .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__directions {
    font-size: clamp(0.62rem, 2vw, 0.72rem);
    letter-spacing: 0.05em;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__directions svg {
    color: var(--color-gold);
    width: 14px;
    height: 14px;
  }

  .film:is(.is-loading-sequence, .has-sequence) .cast-card--closing .cast-card__meta-sep {
    color: var(--color-gold);
    opacity: 0.8;
  }
}