/* Film player (js/film-player.js) and the Motion tab's play badge. */
html.fp-open, html.fp-open body { overflow: hidden; }

.fp { position: fixed; inset: 0; z-index: 2600; color: #fff; }
.fp__backdrop { position: absolute; inset: 0; background: #050505; opacity: 0; }
.fp__frame { position: absolute; overflow: hidden; background: #000; transform-origin: 50% 50%; will-change: left, top, width, height, transform; touch-action: none; }
.fp__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; outline: none; }
.fp__close, .fp__title { position: absolute; z-index: 2; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.fp.is-ui .fp__close, .fp.is-ui .fp__title { opacity: 1; }
.fp.is-ui .fp__close { pointer-events: auto; }
.fp__close { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(20,20,20,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; }
.fp__close:hover { background: rgba(60,60,60,.7); }
.fp__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fp__title { top: max(28px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); margin: 0; font: 500 13px/1.2 inherit; letter-spacing: .02em; opacity: 0; max-width: calc(100% - 110px); }
.fp.is-ui .fp__title { opacity: .8; }
.fp.has-error .fp__title { opacity: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

/* Play badge laid over a film's thumbnail */
.sw-film-play[hidden] { display: none; }
.sw-film-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(12,12,12,.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.28); pointer-events: none; transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s ease; z-index: 3; }
.sw-film-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.is-film:hover > .sw-film-play, a:hover > .sw-film-play { transform: scale(1.08); background: rgba(12,12,12,.6); }
.sw-mobile-card__media .sw-film-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
@media (prefers-reduced-motion: reduce) { .sw-film-play { transition: none; } }

/* ---- Motion tab: both films as cards (js/film-grid.js) ---------------- */
.sw-films { display: none; }
@media (min-width: 901px) {
  #work.is-film-tab .sw__main,
  #work.is-film-tab .sw__pager,
  #work.is-film-tab .sw__mobile-nav { display: none !important; }
  #work.is-film-tab .sw-films:not([hidden]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 20px); align-items: start; align-self: stretch;
    width: 100%; margin: var(--sw-film-gap, 42px) 0 0;
  }
  .sw-film { min-width: 0; animation: swFilmIn .9s var(--showcase-ease, cubic-bezier(.22,1,.36,1)) both; animation-delay: calc(var(--i, 0) * 110ms); }
  @keyframes swFilmIn { from { opacity: 0; transform: translateY(22px); } }
  @media (prefers-reduced-motion: reduce) { .sw-film { animation: none; } }
  #work.is-film-tab #swPills { margin-top: var(--sw-film-pills-mt, auto) !important; }
  .sw-film__media {
    position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
    aspect-ratio: 16 / 9; border-radius: var(--radius-media, 16px); background: var(--showcase-muted-bg, #1a1a1a); color: #fff; text-align: left;
  }
  .sw-film__media:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .sw-film__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,1,.36,1); }


  /* Bottom half: a soft dark ground for the title, then the progressive
     blur ramps in over it on hover (layers fade individually so each one
     blurs the picture as soon as it starts, as in the Playground tiles). */
  .sw-film__shade, .sw-film__blur { position: absolute; inset: auto 0 0 0; height: 55%; z-index: 1; pointer-events: none; }
  .sw-film__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
  .sw-film__media.is-previewing .sw-film__preview { opacity: 1; }
  .sw-film__shade { opacity: 0; transition: opacity .5s ease; background: linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,.38) 55%, rgba(8,8,8,.62) 100%); }
  .sw-film__blur-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
  .sw-film__media:hover .sw-film__shade, .sw-film__media:focus-visible .sw-film__shade { opacity: 1; }
  .sw-film__media:hover .sw-film__blur-layer, .sw-film__media:focus-visible .sw-film__blur-layer { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }

  /* The play button is always there; hover only nudges it. */
  .sw-film__media .sw-film-play { z-index: 2; transition: transform .5s cubic-bezier(.22,1,.36,1), background .3s ease; }
  .sw-film__media:hover .sw-film-play, .sw-film__media:focus-visible .sw-film-play { transform: scale(1.1); background: rgba(12,12,12,.6); }

  .sw-film__caption { position: absolute; left: clamp(18px, 1.8vw, 28px); right: clamp(18px, 1.8vw, 28px); bottom: clamp(16px, 1.6vw, 24px); z-index: 3; display: grid; }
  /* The title rests at the bottom. Hovering opens the row under it, which
     lifts the title as the timestamp swipes up into the space. The shadow
     lives on the title itself, with no overflow:hidden ancestor to clip it. */
  .sw-film__line { display: block; }
  .sw-film__title { display: block; color: #fff; font-size: clamp(1.15rem, 1.6vw, 1.55rem); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; text-shadow: 0 1px 2px rgba(0,0,0,.28), 0 2px 20px rgba(0,0,0,.5); }
  .sw-film__line--meta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1); }
  .sw-film__line--meta > .sw-film__length { min-height: 0; overflow: hidden; padding-top: 6px; }
  .sw-film__length { display: block; color: rgba(255,255,255,.88); font-size: .82rem; font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-shadow: 0 1px 2px rgba(0,0,0,.28), 0 2px 14px rgba(0,0,0,.45); opacity: 0; transform: translateY(100%); transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
  .sw-film__media:hover .sw-film__line--meta, .sw-film__media:focus-visible .sw-film__line--meta { grid-template-rows: 1fr; }
  .sw-film__media:hover .sw-film__length, .sw-film__media:focus-visible .sw-film__length { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .sw-film__line--meta, .sw-film__length, .sw-film__blur-layer, .sw-film__shade, .sw-film__preview { transition: none; } }
}

/* Phones: the first frame is the picture, 16:9, and no play badge (there is no hover). */
@media (max-width: 900px) {
  .sw-mobile-card[data-film] .sw-mobile-card__media[class] { aspect-ratio: 16 / 9; }
}