/* Selectier motion: the film-loading loader (inside the player) and the
   sign-in welcome (full screen). Everything inside an overlay is sized in
   cqw so it scales with the player or the viewport. Behaviour lives in
   js/selectier-motion.js. */

.sm-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  background: #000;
  color: #fff;
  container-type: inline-size;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  --flare: #7fb0ff;
  --edge: #a9d4ff;
}
.sm-overlay[data-pal="1"] { --flare: #ffc86b; --edge: #ffd98a; }
.sm-overlay[hidden] { display: none; }
.sm-welcome { position: fixed; z-index: 2147483000; cursor: pointer; }

.sm-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-nogl .sm-field { display: none; }
.sm-nogl[data-pal="0"] {
  background:
    radial-gradient(70% 60% at 22% 18%, rgba(242, 162, 58, .85), transparent 60%),
    radial-gradient(60% 70% at 80% 35%, rgba(193, 63, 200, .8), transparent 60%),
    radial-gradient(70% 70% at 8% 100%, rgba(46, 155, 230, .85), transparent 60%),
    linear-gradient(160deg, #2b3bb0, #3a1f8a 55%, #10124a);
}
.sm-nogl[data-pal="1"] {
  background:
    radial-gradient(60% 50% at 70% 25%, rgba(255, 241, 194, .8), transparent 60%),
    radial-gradient(50% 50% at 25% 70%, rgba(210, 106, 164, .55), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(42, 138, 154, .6), transparent 60%),
    linear-gradient(160deg, #b8901f, #7a5c12 60%, #3d2e08);
}

.sm-zoom { position: absolute; inset: 0; }
.sm-lock { position: absolute; }
.sm-lock svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 .45cqw 1.2cqw rgba(12, 6, 30, .38));
}
.sm-lock-mark { width: 9.375cqw; height: 15cqw; left: calc(50% - 4.6875cqw); top: calc(43% - 7.5cqw); }
.sm-lock-full { width: 44cqw; height: 13.5cqw; left: 28cqw; top: calc(46% - 8.5cqw); }
.sm-mk { fill: #fbfaf6; }
.sm-win { opacity: var(--shut, 1); }
.sm-win-light { opacity: var(--gl, 0); }
.sm-edge-stop { stop-color: var(--edge); }

/* Anamorphic flare fired when the two frames lock. */
.sm-flare {
  position: absolute;
  left: 9.59%;
  top: 50%;
  width: 160cqw;
  height: .3cqw;
  transform: translate(-50%, -50%) scaleX(var(--fs, 0));
  opacity: var(--fo, 0);
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 0%, var(--flare) 30%, #fff 50%, var(--flare) 70%, transparent 100%);
}
.sm-flare::before {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: -1.4cqw; bottom: -1.4cqw;
  background: linear-gradient(90deg, transparent, var(--flare), transparent);
  opacity: .32;
  filter: blur(1cqw);
}
.sm-flare::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7cqw; height: 7cqw;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--flare) 22%, transparent 65%);
  opacity: .75;
}

/* Loader: film title, specs and buffer line under the mark. */
.sm-info {
  position: absolute;
  left: 0; right: 0;
  top: calc(43% + 10cqw);
  display: grid;
  justify-items: center;
  gap: .9cqw;
  padding: 0 16px;
  text-align: center;
  opacity: 0;
  text-shadow: 0 .1cqw 1cqw rgba(10, 6, 24, .45);
}
.sm-info p { margin: 0; }
.sm-title { font: italic 300 max(14px, 3.1cqw)/1.05 "Fraunces", Georgia, serif; letter-spacing: -.005em; }
.sm-meta { font: 500 max(8px, .92cqw)/1 "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.sm-meta span + span::before { content: "·"; margin: 0 .7em; }
.sm-bar { width: 16cqw; min-width: 90px; height: max(1px, .14cqw); margin-top: .5cqw; position: relative; overflow: hidden; background: rgba(255, 255, 255, .2); }
.sm-bar i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, rgba(255, 255, 255, .55), #fff); }
.sm-status { font: 400 max(8px, .9cqw)/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: rgba(255, 255, 255, .74); font-variant-numeric: tabular-nums; }

/* Welcome: greeting and skip. */
.sm-greet {
  position: absolute;
  left: 0; right: 0;
  top: calc(46% + 7.4cqw);
  margin: 0;
  padding: 0 16px;
  text-align: center;
  text-shadow: 0 .15cqw 1.4cqw rgba(15, 8, 30, .5);
}
.sm-g1 { display: block; font: italic 300 max(20px, 2.7cqw)/1.1 "Fraunces", Georgia, serif; letter-spacing: -.005em; opacity: 0; }
.sm-g2 { display: block; margin-top: max(8px, 1cqw); font: 500 max(9px, .92cqw)/1 "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .8); opacity: 0; }
.sm-skip {
  position: absolute;
  right: max(16px, 2cqw);
  bottom: calc(max(16px, 2cqw) + env(safe-area-inset-bottom, 0px));
  padding: max(7px, .8cqw) max(13px, 1.4cqw);
  font: 500 max(10px, .9cqw)/1 "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background: rgba(10, 8, 16, .32);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sm-skip:hover { background: rgba(10, 8, 16, .5); }
.sm-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Phones held upright: give the lockup most of the width. */
@media (orientation: portrait) {
  .sm-welcome .sm-lock-full { width: 76cqw; height: 23.32cqw; left: 12cqw; top: calc(44% - 14cqw); }
  .sm-welcome .sm-greet { top: calc(44% + 13cqw); }
  .sm-welcome .sm-g1 { font-size: max(20px, 6cqw); }
  .sm-welcome .sm-flare { height: .6cqw; }
}

html.sm-scroll-lock, html.sm-scroll-lock body { overflow: hidden; }

/* Sign-in page: once the server accepts the password, the card dissolves
   and the page fades to black, then the welcome plays on the next page. */
.sm-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease .12s;
}
.sm-signing-in .sm-veil { opacity: 1; pointer-events: auto; }
.sm-signing-in .sv-auth-card {
  transition: opacity .4s ease, filter .4s ease, transform .4s ease;
  opacity: 0;
  filter: blur(8px);
  transform: scale(.97);
}
.sv-auth-form.htmx-request .sv-auth-submit { opacity: .75; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sm-veil, .sm-signing-in .sv-auth-card { transition-duration: .01s; transition-delay: 0s; }
}