/* ============================================================
   film-open.css · the opening scroll film

   Only the first two scenes of the page: the hero, where scrolling
   walks him onto the TEDxInnovationU stage, and the cartridge slide
   that slips out of register until you scroll on or press Try again.
   Everything after them is the site as it was. film.js paints the
   frames; the posters here are real images, so the page is complete
   with JavaScript off and under reduced motion.
   ============================================================ */

.film-open { position: relative; background: #000; color: var(--fg); }

.film-rail { position: relative; min-width: 0; }
.film-stage {
  position: sticky; top: 0; margin: 0;
  height: 100svh;
  overflow: hidden; isolation: isolate;
  background: #000;
}
.film-frame { position: absolute; inset: 0; }
.film-frame picture, .film-frame img, .film-frame canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.film-frame img { object-fit: cover; filter: none; }
.film-frame canvas { opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.film-frame canvas.is-ready { opacity: 1; }

/* Shade only where type sits on the film. */
.film-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.film-open--hero .film-stage::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .92) 42%, rgba(0, 0, 0, .56) 56%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 32%);
}
.film-open--repair .film-stage::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .56) 28%, rgba(0, 0, 0, 0) 52%);
}

.film-load {
  position: absolute; right: var(--gutter); bottom: 105px; z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 10px;
  font-variant-numeric: tabular-nums; color: var(--fg);
  opacity: 0; transition: opacity 400ms ease;
}
.film-load.is-on { opacity: 1; }
.film-load.is-done { opacity: 0; transition-duration: 600ms; }
.film-load i { display: block; width: 72px; height: 1px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.film-load em { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform 240ms ease; }
@media (prefers-reduced-motion: reduce) { .film-load, .film-load em { transition: none; } }

.stage-caption {
  position: absolute; right: var(--gutter); bottom: 24px; z-index: 3;
  display: flex; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; line-height: 1.4;
  color: var(--dim);
}

.timecode {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; line-height: 1.4;
  color: var(--dim);
}
.film-display {
  font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(40px, 4.8vw, 74px); line-height: 1.08;
  text-wrap: balance;
}
.talk-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.talk-link:hover { border-color: var(--fg); }

/* ------------------------------------------------------------ hero */

.film-open--hero { min-height: 240svh; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.film-open--hero .film-rail { position: absolute; inset: 0; }
.film-open__copy, .film-open__talk { position: relative; z-index: 2; padding-inline: var(--gutter); }
.film-open__copy {
  min-height: 100svh; max-width: 880px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 144px; padding-bottom: 96px;
}
.film-open__copy .eyebrow { margin-bottom: 32px; }
.film-open__copy h1 { font-size: clamp(40px, 4.8vw, 74px); line-height: 1.08; }
.film-open__copy .hero-lede { max-width: 30em; margin-top: 32px; line-height: 1.45; color: #d4d4d8; }
.film-open__copy .spec-list { margin-top: 40px; max-width: 432px; }
.film-open__copy .cta-row { margin-top: 40px; }

.film-open__talk {
  margin-top: auto; padding-bottom: 64svh;
  display: grid; gap: 16px; justify-items: start;
  max-width: 880px;
}

/* ----------------------------------------------------------- repair */

.film-open--repair { border-bottom: 1px solid var(--line); }
.film-open--repair .film-rail { height: 260svh; }
.stage-overlay {
  position: absolute; left: var(--gutter); bottom: 64px; z-index: 2;
  display: grid; gap: 16px; justify-items: start;
  max-width: 760px;
}
.film-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }
.film-controls .btn-solid { border: 0; cursor: pointer; font-family: inherit; }
.controls-hint { font-size: 16px; line-height: 1.4; color: #b4b4b8; }
.film-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.film-open--repair.is-aligned .film-controls { opacity: .4; transition: opacity 320ms ease; }

html:lang(ja) .film-display, html:lang(zh-Hans) .film-display,
html:lang(ja) .film-open__copy h1, html:lang(zh-Hans) .film-open__copy h1 { letter-spacing: 0; line-height: 1.15; }
@supports (word-break: auto-phrase) {
  html:lang(ja) .film-display, html:lang(ja) .film-open__copy h1 { word-break: auto-phrase; }
}

/* ----------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .film-open--hero { min-height: 0; }
  /* On a phone the copy comes first, then the stage pins under the header. */
  .film-open--hero .film-rail { position: relative; inset: auto; order: 2; height: 200svh; }
  .film-stage { top: 72px; height: calc(100svh - 72px); }
  .film-open--hero .film-stage::after { background: none; }
  .film-open__copy { order: 1; min-height: 0; padding-top: 64px; padding-bottom: 48px; }
  .film-open__talk { order: 3; padding-top: 32px; padding-bottom: 64px; }
  .stage-caption { right: 16px; bottom: 8px; font-size: 10px; }
  .film-load { right: 16px; bottom: 30px; font-size: 10px; }

  .film-open--repair .film-stage { display: flex; flex-direction: column; }
  .film-open--repair .film-frame { position: relative; inset: auto; flex: 1 1 auto; min-height: 56.25vw; }
  .film-open--repair .film-stage::after { background: none; }
  .stage-overlay { position: relative; left: auto; bottom: auto; padding: 24px var(--gutter); }
  .film-open--repair .film-rail { height: 220svh; }
  .film-display { font-size: clamp(32px, 9vw, 48px); }
}

/* --------------------------------- reduced motion, print, no script */

@media (prefers-reduced-motion: reduce) {
  .film-frame canvas, .film-controls { display: none !important; }
  .film-open--hero { min-height: 100svh; }
  .film-open--repair .film-rail { height: 100svh; }
  .film-open__talk { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .film-open--hero .film-rail, .film-open--repair .film-rail { height: auto; }
  .film-stage { position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
}
@media print {
  .film-stage { position: relative; top: auto; }
  .film-rail { height: auto !important; }
  .film-frame canvas, .film-controls { display: none; }
}

/* ------------------------------------------------------------ wordmark */

/* The lastres® mark: Inter SemiBold, tight tracking, the registered sign
   set small and raised. One rule, used at every size. */
.wordmark {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 20px; line-height: 1;
  letter-spacing: -.06em; text-transform: lowercase;
  display: inline-flex; align-items: flex-start;
}
.wordmark sup {
  font-size: .46em; line-height: 1; letter-spacing: 0;
  margin-left: .06em; position: relative; top: .1em;
}