/* Michal Kašpar — Homepage hero and the films under it (films.js)
   Full screen on desktop and on a phone. On a phone a tap opens the whole
   film in a player over the browser (.film-player). */

[data-film] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.pb-sound-held #cursor-label { opacity: 0; }
/* Under the yellow preloader (9000): the label comes with the hero, not before it. */
#cursor-label { z-index: 8999; }
/* While held for sound title and captions step aside and the subtitles show:
   they belong to the sound. */
[data-film] .strip { transition: opacity var(--dur-1) ease; }
body.pb-sound-held [data-film] .strip { opacity: 0; }
body.pb-sound-held .film-cue { opacity: 1; }
/* The main hero's claim: place and type of the case pages' hero caption
   (.pb-hero h1). films.js decodes it in and takes it away. */
.film-claim {
  position: absolute;
  top: 50%;
  left: var(--edge-x);
  right: var(--edge-x);
  z-index: 3;
  margin: 0;
  transform: translateY(-50%);
  color: var(--color-pure-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--dur-3) ease;
}
.film-claim.is-gone,
body.pb-sound-held .film-claim { opacity: 0; }
/* The type of the captions under images (Lab .cap), one look for labels and
   values; white, because it sits on the film. */
[data-film] {
  --film-meta-leading: 1.4;
}
.reel[data-film] .strip .meta {
  font-feature-settings: "ss01";
  letter-spacing: 0;
  line-height: var(--film-meta-leading);
  color: var(--color-text-primary);
}
.reel[data-film] .strip .meta .lbl { color: inherit; }
/* On a desktop the whole caption sits in columns 9-12: the labels in column 9,
   the values from column 10. */
@media (min-width: 761px) and (orientation: landscape), (min-width: 1025px) {
  .reel[data-film] .strip {
    display: block;
    left: calc(var(--grid-left) + var(--grid-col) * 8);
    right: auto;
    width: calc(var(--grid-col) * 4);
  }
  .reel[data-film] .strip .meta { text-align: left; }
  .reel[data-film] .strip .meta > div {
    display: grid;
    grid-template-columns: var(--grid-col) minmax(0, 1fr);
  }
}
/* Subtitles: bottom line on the baseline of the title's last line. */
[data-film] {
  --film-title: clamp(36px, 5.5vw, 88px);
  --film-cue: clamp(14px, 1.4vw, 20px);
}
.film-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--inset) + 0.13 * var(--film-title) - 0.3 * var(--film-cue));
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  text-align: center;
  font-size: var(--film-cue);
  line-height: 1.6;
  pointer-events: none;
}
.film-cue span {
  padding: 2px 8px;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pb-glitch-word { display: inline-block; white-space: nowrap; }
.pb-glitch-char { display: inline-block; text-align: center; }
.is-armed .pb-glitch-char { visibility: hidden; }
/* A client's name while it decodes: each letter stays where the kerned word has it. */
.sc-name .dr-char { text-align: left; }

/* Only on a phone: on a desktop the film plays where it is. */
.stage .film-play { display: none; }
body.film-player-open .reels { overflow: hidden; }
.film-player {
  --film-cue: var(--text-2xs);
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-pure-black);
}
.film-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.film-player .film-cue {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  opacity: 1;
}
.film-player-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--edge-y));
  right: calc(env(safe-area-inset-right, 0px) + var(--edge-x));
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 70%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-pure-black) 45%, transparent);
  color: var(--color-pure-white);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  [data-film] {
    --film-cue: 11px;
    --film-meta: 10px;
  }
  .stage .film-play { display: flex; }
  /* Over the Play button in the middle, not under it. */
  .film-claim {
    top: calc(50% - 36px - var(--edge-y));
    transform: translateY(-100%);
  }
  .reel[data-film] .strip {
    gap: 12px;
    bottom: calc(var(--inset) + env(safe-area-inset-bottom, 0px) + 16px);
  }
  .reel[data-film] .strip .meta {
    font-size: var(--film-meta);
  }
  /* The values line up under each other. */
  .reel[data-film] .strip .meta .lbl {
    display: inline-block;
    min-width: 6.6em;
  }
}