/* RENDR Studio: the home page's layout. The font, colours and base are in page.css, which is loaded first. Pages the site writes do NOT load this file. */

/* One screen tall, never taller: the two clips share it and the page does not scroll. A column: the bar (ask.css) is the first row, the clips fill the rest,
   and the logo sits at the bottom. When the bar grows (a long question, a waiting line) the clips get less room: they are pushed down, not covered. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--column));
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

/* Under the bar: the clips fill what is left of the screen. */
.reel {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.clip {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

/* Full height of the picture, centred. The slot cuts the left and right, so the middle stays and the top and bottom are not cut.
   Two videos sit in each slot: the one behind is the next clip, already loading, so the change does not show the black background. */
.clip video {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  height: 100%;
  width: auto;
  transform: translateX(-50%);
}

.clip video.is-behind {
  z-index: 0;
}

/* Keeps the logo readable over any clip. The top needs nothing: the bar is black. */
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.78), rgba(8, 8, 10, 0) 24%);
}

.brand {
  padding: 1.25rem 1.5rem 0;
}

.mark {
  margin: 0;
  font-size: clamp(2.75rem, 14vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.mark span {
  color: var(--accent);
}

.studio {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.6em;
  text-transform: uppercase;
}

/* The wordmark, at the bottom in the middle by default (owner, 2026-11-11), the size it has always had. Add blend, so the clips show through the
   letters and the dot. A visitor can still drag it (reel.js), and where they put it is measured from this place. */
.brand-logo {
  position: absolute;
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  left: 50%;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: min(calc((100% - 2.5rem) * 0.78), 20rem);
  padding: 0;
  transform: translateX(-50%) scale(0.672);
  transform-origin: bottom center;
  /* On the whole logo, not the picture alone. The move transform groups the picture, so blending the picture by itself only sees the header and the background stays. */
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.brand-logo .mark {
  position: relative;
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 0;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.logo:active {
  cursor: grabbing;
}

.logo.is-on-dot,
.logo.is-on-dot:active {
  cursor: nwse-resize;
}


/* The bar (the home button, the ask field and its status line) is in ask.css: the same bar is on every page the site makes. */

a {
  color: var(--text);
  text-underline-offset: 0.3em;
  text-decoration-color: var(--rule);
}

a:hover,
a:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* On the home page the bar is the first row of the column, not stuck to anything (nothing scrolls here), and the TAP screen (below, z-index 5) covers it
   until someone taps: the bar is only over the page, not over the door. */
.stage .site-bar {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}

/* The first screen: black, the word TAP, the logo. gate.js puts needs-tap on <html> until someone taps. */
.enter {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.needs-tap .enter {
  display: flex;
}

.enter:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.enter-word {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* the spacing after the last letter would push the word off centre */
  text-transform: uppercase;
}

.enter-logo {
  width: min(calc((100% - 2.5rem) * 0.52), 13.5rem);
  height: auto;
}

/* A page with no clips (none uploaded yet, or the list could not be read) is the plain dark page. */
.reel:empty::after {
  background: radial-gradient(60rem 38rem at 50% 108%, rgba(255, 90, 54, 0.16), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .brand {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  /* The logo is centred on the seam. The rise animation's transform would move it off that point. */
  .brand-logo {
    animation: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}