/* The cinema, for the mobile app's fullscreen.

   Lifted from nilsportstech-athlete-preview.css, which draws the same screen on
   the network: a snap-scrolled reel of full-height clips, each keeping its own
   shape over a blurred copy of itself, with the copy and the transport laid on
   the frame rather than under it.

   Lifted rather than imported. That sheet is one part of a 1,945-line athlete
   panel built around a list of apps, and mobile.html loads none of it -- pulling
   it in would drag the whole panel onto a page that has no use for it. So this
   is the treatment on its own, prefixed .mcin so it cannot collide with the
   mobile app's own classes.

   Two differences from the network's cinema, both asked for:
     - no app button. The byline is the face and the name, nothing on the right.
     - the transport keeps its rewind and forward buttons, which the moments
       fullscreen already had and readers already use. */

.mcin {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #000;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  /* Every colour stated, not inherited, and stated hard.

     This layer is a guest on a page with 117 stylesheets, one of which paints
     text black broadly enough to reach in here -- the headline and the byline
     came out near-black on a black stage, and walking the ancestors showed the
     colour already lost at .mcin itself. Specificity is not a fight worth
     having against a sheet this file cannot see, and nothing on a film screen
     should turn with the page behind it anyway. */
  color: #f4f4f2 !important;
  -webkit-text-fill-color: #f4f4f2 !important;
}
/* Every descendant, stated rather than inherited.

   An earlier pass wrote `color: inherit` here, meaning to propagate the light
   ink down. It did the opposite: `inherit` takes the parent's *computed* value,
   and with something upstream painting black that is what each child inherited
   -- and because the rule matches everything, it also beat .mcin__title's own
   colour further down the sheet. The quiet lines restate their greys after
   this. */
.mcin *:not(input):not(select) {
  color: #f4f4f2 !important;
  -webkit-text-fill-color: #f4f4f2 !important;
}
.mcin[hidden] { display: none; }

/* Close. Its disc is fixed dark glass whatever the page behind it does, so the
   chevron on it is stated light rather than inherited -- taking the page's ink
   put a near-black mark on a near-black disc in daylight. */
.mcin__close {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 4;
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; cursor: pointer; color: #f4f4f2;
  background: rgba(8,8,10,.55); border: 1px solid rgba(255,255,255,.16);
}
.mcin__close svg { width: 19px; height: 19px; display: block; }

.mcin__reel {
  height: 100%; overflow-y: auto; overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mcin__reel::-webkit-scrollbar { display: none; }

.mcin__panel {
  position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center; background: #000;
}
.mcin__frame { position: absolute; inset: 0; overflow: hidden; }
/* The clip keeps its own shape -- a reel is not cropped to fill a phone -- and
   a blurred, overscaled copy of its own poster fills what is left, so the black
   bands either side become part of the frame rather than a hole in it. */
.mcin__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--clip-wash, none) center / cover no-repeat;
  filter: blur(38px) saturate(140%) brightness(.5);
  transform: scale(1.3);
}
.mcin__frame video:not(.mcin__mirror),
.mcin__frame iframe {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; display: block; border: 0;
}
/* The poster sits OVER the clip, not beside it: sharing position:relative and
   coming first put the still in the flow, so a clip played underneath a frozen
   frame while the blurred mirror behind it moved -- which reads as a video that
   will not play. Faded out once the clip is actually rendering. */
.mcin__still {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: contain; display: block; border: 0;
  transition: opacity 220ms ease;
}
.mcin__frame.is-playing .mcin__still { opacity: 0; pointer-events: none; }
/* The copy behind it covers rather than fits -- filling the bands is its whole
   job, so it is the one thing here that crops. */
.mcin__mirror {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
  filter: blur(34px) saturate(140%) brightness(.52);
  transform: scale(1.2); pointer-events: none;
}

/* --- the copy, laid on the frame ---------------------------------------- */

.mcin__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 9px; pointer-events: none;
  /* Clear of the transport below it. */
  padding: 0 20px calc(86px + env(safe-area-inset-bottom));
  /* Deep enough to carry type over a bright frame. The clip behind this is
     whatever the athlete posted -- a gym floor under stadium lights as often as
     a night game -- so the wash cannot assume a dark picture. */
  background: linear-gradient(transparent, rgba(6,6,10,.72) 34%, rgba(6,6,10,.94));
}
.mcin__body > * { pointer-events: auto; max-width: 100%; }
.mcin__flag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em;
  color: #c8c8d0 !important; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* The headline sizes to how much there is of it.

   Every caption was set at one size, so "Takeoff" and a ninety-five character
   sentence about a full game were drawn at the same weight -- the short one
   read as a headline and the long one as a wall of capitals with its ending
   clamped off. A caption is not a headline; it only looks like one when it is
   short. The JS measures the text and marks the panel, and each step down
   trades size for lines: fewer, bigger words at the top, more, smaller ones as
   the caption grows. */
.mcin__title {
  margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  line-height: 1.04; text-transform: uppercase; color: #f4f4f2;
  font-size: clamp(24px, 6.2vw, 36px);
  text-shadow: 0 2px 24px rgba(6,6,10,.85); max-width: 22ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Around a line and a half: still a headline, with room for the whole of it. */
.mcin__panel[data-len="mid"] .mcin__title {
  font-size: clamp(19px, 4.8vw, 27px); line-height: 1.08;
  -webkit-line-clamp: 4; max-width: 26ch;
}
/* A sentence. Sentence case rather than capitals -- ninety characters of
   uppercase is read letter by letter -- and six lines, which is the most that
   fits above the byline without pushing it into the transport. */
.mcin__panel[data-len="long"] .mcin__title {
  font-size: clamp(16px, 4.1vw, 21px); line-height: 1.26;
  text-transform: none; letter-spacing: .01em; font-weight: 600;
  -webkit-line-clamp: 6; max-width: 40ch;
}
.mcin__said {
  font-size: 13px; line-height: 1.45; color: #a4a4ac !important; max-width: 52ch;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Whose clip it is. No button on the right: this is the app already, so a link
   into it is a link to where the reader is standing. */
.mcin__by { display: flex; align-items: center; gap: 14px; width: 100%; padding-top: 4px; }
.mcin__face {
  position: relative; width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: #1b1b22;
  display: grid; place-items: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: #a4a4ac;
}
.mcin__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcin__who { min-width: 0; }
.mcin__name {
  font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700;
  text-transform: uppercase; line-height: 1.05;
}
.mcin__sport {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em;
  color: #a4a4ac !important; text-transform: uppercase; padding-top: 3px;
}

/* --- the transport, on the clip ----------------------------------------- */

.mcin__bar {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(6,6,10,.92));
}
.mcin__btn {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(244,244,242,.14); color: #f4f4f2;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  position: relative;
}
.mcin__btn svg { width: 15px; height: 15px; display: block; }
/* The 10 rides under the arrow rather than beside it, so a skip button is the
   same disc as play and sound instead of a wider pill in the middle of them. */
.mcin__btn small {
  position: absolute; bottom: 5px; left: 0; right: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 7px; line-height: 1;
  letter-spacing: 0; pointer-events: none;
}
.mcin__btn--skip svg { width: 17px; height: 17px; transform: translateY(-2px); }
.mcin__time {
  flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .06em; color: #a4a4ac !important; min-width: 62px;
}
.mcin__track {
  position: relative; flex: 1 1 auto; height: 3px; cursor: pointer;
  background: rgba(244,244,242,.2); border-radius: 999px;
}
/* A 3px line is not a thumb target; the hit area reaches past it. */
.mcin__track::before { content: ""; position: absolute; inset: -12px 0; }
.mcin__track > span {
  display: block; height: 100%; width: 0;
  background: #ff4a15; border-radius: 999px;
}

/* Nothing behind the cinema scrolls while it is up. */
body.mcin-locked { overflow: hidden; }

/* --- the quiet lines, after the blanket above ---------------------------

   The rule that states every descendant light has to come first so nothing the
   app paints reaches in. These are the lines meant to sit back from the
   headline, so they restate their own grey after it -- same specificity, later
   in the sheet, which is what decides between two !important declarations. */
.mcin .mcin__flag  { color: #c8c8d0 !important; -webkit-text-fill-color: #c8c8d0 !important; }
.mcin .mcin__said  { color: #a4a4ac !important; -webkit-text-fill-color: #a4a4ac !important; }
.mcin .mcin__sport { color: #a4a4ac !important; -webkit-text-fill-color: #a4a4ac !important; }
.mcin .mcin__time  { color: #a4a4ac !important; -webkit-text-fill-color: #a4a4ac !important; }

/* --- daylight ------------------------------------------------------------

   The app's light theme carries `[data-theme="light"] * { color: #000
   !important }` -- every element on the page, painted black, in a sheet that
   loads after this one. It is the right rule for a white app and the wrong one
   for a film screen: the headline and the byline came out near-black on a black
   stage, and no amount of specificity below `*` with !important could win,
   because the two were tied and load order decided.

   So the theme is named here too. Same weight, later sheet -- and the cinema is
   the one surface in the app that does not turn with the theme, because the
   thing behind the type is a photograph rather than a page. */
:root[data-theme="light"] .mcin,
:root[data-theme="light"] .mcin *:not(input):not(select) {
  color: #f4f4f2 !important;
  -webkit-text-fill-color: #f4f4f2 !important;
}
:root[data-theme="light"] .mcin .mcin__flag  { color: #c8c8d0 !important; -webkit-text-fill-color: #c8c8d0 !important; }
:root[data-theme="light"] .mcin .mcin__said,
:root[data-theme="light"] .mcin .mcin__sport,
:root[data-theme="light"] .mcin .mcin__time  { color: #a4a4ac !important; -webkit-text-fill-color: #a4a4ac !important; }