/* =========================================================
   Moving parts, the reel home's other pages: the classic pages
   (base.css, pages.css, auth.css) in the record direction. A grain
   over everything, a record strip heading each page, titles written
   in glyphs, a viewfinder on every moving picture. The header and
   the footer, with their links that scramble, are in shell.css.
   landing/assets/pages-rh.css
   ========================================================= */

:root { --rec: color-mix(in srgb, var(--text) 16%, transparent); --rec-strong: color-mix(in srgb, var(--text) 50%, transparent); --rec-red: #ff4b3e; }

/* ---------- the grain: film over the whole page, the nav and the footer included ---------- */
.grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, -2%); } 100% { transform: translate(0, 0); } }

/* a recording dot, shared by every strip and frame; it beats with the dot of the header (the keyframes are in shell.css) */
.rec-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rec-red); box-shadow: 0 0 8px rgba(255, 75, 62, .45); margin-right: 8px; vertical-align: 1px; animation: live 1.6s var(--ease-out) infinite; }

/* ---------- the record strip: what is on screen, how far through it, since when ---------- */
.rec-strip { display: flex; align-items: center; gap: 18px; height: 34px; color: var(--label); border-top: 1px solid var(--rec); border-bottom: 1px solid var(--rec); white-space: nowrap; font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rec-strip .rs-rec { display: inline-flex; align-items: center; color: var(--text); }
.rec-strip .rs-eye { color: var(--label); overflow: hidden; text-overflow: ellipsis; }
.rec-strip .rs-bar { flex: 1; min-width: 40px; height: 1px; background: var(--rec); position: relative; overflow: hidden; }
.rec-strip .rs-bar::after { content: ""; position: absolute; inset: 0; background: var(--text); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.rec-strip b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.phead .rec-strip + h1 { margin-top: clamp(28px, 4.5vh, 48px); }
.auth-head .rec-strip { margin-bottom: 22px; }
.auth-head .rec-strip + h1 { margin-top: 0; }

/* ---------- the viewfinder: a hairline, crop marks flush on the corners ---------- */
.vf-marks { --m: 14px; --c: color-mix(in srgb, var(--text) 85%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m);
  background-repeat: no-repeat; }

/* the library's cards are recordings: a card that plays is on record. The corners around it are in site/cards.css */
.lib .frame { position: relative; }
.lib .frame::before { content: "Rec"; position: absolute; z-index: 4; left: 12px; top: 10px; padding: 3px 7px 3px 18px; pointer-events: none; background: color-mix(in srgb, var(--bg) 78%, transparent) radial-gradient(circle at 9px 50%, var(--rec-red) 0 3px, transparent 3.5px); color: var(--text); font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(-3px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
@media (hover: hover) {
  .lib .card:hover .frame::before, .lib .frame:focus-visible::before { opacity: 1; transform: none; }
}

/* the sign-up wall is a monitor of the library: square, framed, on record */
.wall-box { border-radius: 0; border-color: var(--rec); }
.wall-box::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --m: 16px; --c: color-mix(in srgb, var(--text) 85%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m);
  background-repeat: no-repeat; }
.wall-tile, .wall-clip { border-radius: 0; }
.wall-cap .rs-rec { display: inline-flex; align-items: center; color: var(--text); }
.wall-cap b[data-tc] { font-variant-numeric: tabular-nums; }


@media (max-width: 820px) {
  .rec-strip { gap: 10px; font-size: 10px; }
  .rec-strip .rs-eye { display: none; }
}
@media (prefers-reduced-motion: reduce) { .grain, .rec-dot { animation: none; } }

/* ---------- the passage between pages: a field of glyphs (page-glyph.js) instead of the native cross-fade ---------- */
@view-transition { navigation: none; }
.pg-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483000; display: none; pointer-events: none; }
.pg-cv.on { display: block; pointer-events: auto; }
/* a page reached through the glyphs is covered from its first paint, until the field takes over */
html.pg-in::after { content: ""; position: fixed; inset: 0; z-index: 2147483001; background: var(--bg); }

/* the membership price says what it covers; yearly, what it comes to each month */
.plan .price .per { font-size: clamp(15px, 1.2vw, 18px); color: var(--muted); letter-spacing: -.01em; }
.plan .price .per-eq { display: none; flex-basis: 100%; margin-top: 6px; font-size: 15px; color: var(--muted); }
.plan .price .per-eq.on { display: block; }
.plan .price .per-eq b { font-weight: 450; color: #3ecf8e; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.02em; }