/* ===================================================== */
/* THE PROCESS FILM STYLES                               */
/* ----------------------------------------------------- */
/* Private tools-page styling for The Process Film.      */
/* This file loads after css/styles.css so it can read   */
/* shared font tokens and Book Frame source values.      */
/* ===================================================== */

/* ===================================================== */
/* CSS GUIDE | HOW TO READ THIS FILE                     */
/* ----------------------------------------------------- */
/* This stylesheet controls the internal film preview    */
/* used inside Scene Four. It should describe only the   */
/* film frame and its private animation surface.         */
/*                                                       */
/* 1. LOCAL RESET                                        */
/*    Locks the film document to a fullscreen black      */
/*    canvas without browser default spacing.            */
/*                                                       */
/* 2. FILM FRAME / BOOK FRAME TOKENS                     */
/*    Maps the fullscreen film surface to the same       */
/*    source Book Frame proportions used by index.html.  */
/*                                                       */
/* 3. BACKDROP VIDEO                                     */
/*    Fullscreen video layer behind all film units.      */
/*                                                       */
/* 4. UNIT 01: OPENING PIECES                            */
/*    Styles the first progress unit as a Canvas Book    */
/*    Frame composition with timeline-settled lines and  */
/*    a final typed line.                                */
/*                                                       */
/* 5. UNIT 01 MOTION + TYPE CONTROLS                     */
/*    Timing knobs for scroll settlement and the final   */
/*    typed line.                                        */
/*                                                       */
/* 6. RESPONSIVE BOOK FRAME MODE                         */
/*    Switches tall/phone views to a single-page frame   */
/*    while preserving text-safe source ratios.          */
/* ===================================================== */

/* ===================================================== */
/* 1. LOCAL RESET                                        */
/* ----------------------------------------------------- */
/* Keep the iframe/tool document visually independent    */
/* from browser defaults and parent-page scroll.         */
/* ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000000;
}

body {
  color: #ffffff;
  font-family: var(--font-primary);
}

body.is-film-editor-overlay-visible .film-editor-overlay {
  display: block;
}

/* ===================================================== */
/* 2. FILM FRAME / BOOK FRAME TOKENS                     */
/* ----------------------------------------------------- */
/* The film is fullscreen, but this first line is placed */
/* against an invisible Book Frame so it can be judged   */
/* with the same spread guide used on index.html.        */
/*                                                       */
/* In index preview mode, js/pages/index.js sends the    */
/* parent page's actual guide coordinates into the       */
/* iframe. The fallback math below keeps the film usable */
/* when process-film.html is opened by itself.           */
/*                                                       */
/* Source relationships:                                */
/* - Open Spread: 1200 x 776                             */
/* - Single Page: 600 x 776                              */
/* - Canvas text span: 1040 = 1200 - 80 - 80             */
/* - Canvas left/top: x 80 / 1200, y 104 / 776           */
/* ===================================================== */

.process-film {
  /* Standalone fallback: Active Open Spread fitted inside
     the film viewport. Index preview mode overrides these
     values with measured parent guide coordinates. */
  --process-film-fallback-frame-width: min(
    var(--book-frame-source-width, 1200px),
    calc(100vw - 32px),
    calc((100vh - 32px) * var(--book-frame-width-from-height-ratio, 1.5464))
  );
  --process-film-fallback-frame-height: calc(
    var(--process-film-fallback-frame-width) * var(--book-frame-source-ratio, 0.6467)
  );
  --process-film-fallback-frame-left: calc((100vw - var(--process-film-fallback-frame-width)) / 2);
  --process-film-fallback-frame-top: var(--debug-spread-guide-top, 120px);
  --process-film-fallback-page-width: calc(var(--process-film-fallback-frame-width) * 0.5);

  --process-film-frame-width: var(--process-film-synced-frame-width, var(--process-film-fallback-frame-width));
  --process-film-frame-height: var(--process-film-synced-frame-height, var(--process-film-fallback-frame-height));
  --process-film-frame-left: var(--process-film-synced-frame-left, var(--process-film-fallback-frame-left));
  --process-film-frame-top: var(--process-film-synced-frame-top, var(--process-film-fallback-frame-top));
  --process-film-page-width: var(--process-film-synced-page-width, var(--process-film-fallback-page-width));
  --process-film-page-height: var(--process-film-frame-height);

  /* Canvas Book Frame field: full spread minus the two outer
     80px source margins. This matches Canvas Scene behavior
     rather than a left-page-only text box. */
  --process-film-fallback-canvas-left: calc(
    var(--process-film-frame-left)
    + (var(--process-film-frame-width) * 0.0666667)
  );
  --process-film-fallback-canvas-top: calc(
    var(--process-film-frame-top)
    + (var(--process-film-page-height) * 0.1340206)
  );
  --process-film-fallback-canvas-width: calc(
    var(--process-film-frame-width) * 0.8666667
  );
  --process-film-canvas-left: var(--process-film-synced-canvas-left, var(--process-film-fallback-canvas-left));
  --process-film-canvas-top: var(--process-film-synced-canvas-top, var(--process-film-fallback-canvas-top));
  --process-film-canvas-width: var(--process-film-synced-canvas-width, var(--process-film-fallback-canvas-width));

  /* Scene Two typography ratios applied to film canvas width.
     Ratios are sourced from #revealScene in css/pages/index.css
     so this composition matches the Scene Two measure system. */
  --unit-01-text-size-base: clamp(
    1.125rem,
    calc(var(--process-film-canvas-width) * 0.0543269),
    56.5px
  );
  --unit-01-text-size-expression: clamp(
    1.375rem,
    calc(var(--process-film-canvas-width) * 0.0692308),
    72px
  );
  --unit-01-text-line-height: clamp(
    1.5rem,
    calc(var(--process-film-canvas-width) * 0.0769231),
    80px
  );
  --unit-01-text-tracking-base: -0.132em;

  /* Scene Two vertical placement formula:
     line-2 center (42.01% of frame height) minus 1.5 line-heights
     recovers the composition top in the same position Scene Two uses. */
  --unit-01-composition-top: calc(
    var(--process-film-frame-top)
    + var(--process-film-frame-height) * 0.4201031
    - var(--process-film-canvas-width) * 0.1153847
  );

  /* Unit 01 internal timeline controls.
     Start/end values are normalized film progress values, where
     0 is the beginning of Unit 01 and 1 is the unit resolution.
     Scroll only starts the film; it does not drive these values. */
  --unit-01-duration: 5540ms;
  --process-film-loop-hold: 1800ms;
  --unit-01-line-1-start: 0.02;
  --unit-01-line-1-end: 0.34;
  --unit-01-line-2-start: 0.12;
  --unit-01-line-2-end: 0.48;
  --unit-01-line-3-start: 0.24;
  --unit-01-line-3-end: 0.64;
  --unit-01-line-1-enter-y: 100vh;
  --unit-01-line-2-enter-y: 100vh;
  --unit-01-line-3-enter-y: 100vh;

  /* Unit 01 typed line controls. */
  --unit-01-type-start-progress: 0.78;
  --unit-01-type-delay: 118ms;

  /* JS writes these active values from the CSS timing controls. */
  --unit-01-line-1-y: var(--unit-01-line-1-enter-y);
  --unit-01-line-2-y: var(--unit-01-line-2-enter-y);
  --unit-01-line-3-y: var(--unit-01-line-3-enter-y);
  --unit-01-line-1-opacity: 0;
  --unit-01-line-2-opacity: 0;
  --unit-01-line-3-opacity: 0;

  position: relative;
  min-width: 100vw;
  min-height: 100vh;
  background: #000000;
}

/* ===================================================== */
/* 3. BACKDROP VIDEO                                     */
/* ----------------------------------------------------- */
/* Fullscreen video layer behind all film units.         */
/* object-fit: cover crops to fill without letterboxing. */
/* DOM order keeps units above this without z-index.     */
/* ===================================================== */

/* Tune this token to control how much the video is darkened.
   0 = fully transparent (video only), 1 = fully black. */
.process-film {
  --process-film-scrim-opacity: 0.25;
}

.process-film__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.process-film__backdrop-scrim {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: var(--process-film-scrim-opacity);
}

/* ===================================================== */
/* 4. UNIT 01: OPENING PIECES — LAYOUT                   */
/* ----------------------------------------------------- */
/* The first authored unit of progress. JS owns the      */
/* typed character reveal; CSS owns placement and type.  */
/* ===================================================== */

.process-film__unit {
  position: absolute;
  inset: 0;
}

.process-film__unit-01-statement {
  position: absolute;
  top: var(--unit-01-composition-top);
  left: var(--process-film-canvas-left);
  width: var(--process-film-canvas-width);
}

.process-film__line-one-field {
  margin: 0;
  white-space: nowrap;
  color: #ffffff;
  font-family: var(--font-secondary);
  font-size: var(--unit-01-text-size-base);
  font-weight: 200;
  line-height: var(--unit-01-text-line-height);
  letter-spacing: var(--unit-01-text-tracking-base);
  text-align: left;
}

.process-film__phrase {
  display: inline;
}

.process-film__phrase--word {
  display: inline-block;
  opacity: var(--unit-01-word-opacity, 0);
  transform: translate3d(0, var(--unit-01-word-y, 0px), 0);
  will-change: transform, opacity;
}

.process-film__phrase--word-1 {
  --unit-01-word-y: var(--unit-01-line-1-y);
  --unit-01-word-opacity: var(--unit-01-line-1-opacity);
}

.process-film__phrase--word-2 {
  --unit-01-word-y: var(--unit-01-line-2-y);
  --unit-01-word-opacity: var(--unit-01-line-2-opacity);
}

.process-film__phrase--word-3 {
  --unit-01-word-y: var(--unit-01-line-3-y);
  --unit-01-word-opacity: var(--unit-01-line-3-opacity);
}

.process-film__phrase--typed-expression {
  font-family: var(--font-primary);
  font-size: var(--unit-01-text-size-expression);
  font-weight: 700;
  letter-spacing: 0em;
}

/* ===================================================== */
/* 5. UNIT 01 MOTION + TYPE CONTROLS                     */
/* ----------------------------------------------------- */
/* Two carets: base-phase caret on the roboto-mono span, */
/* expression-phase caret on the baskerville span.       */
/* Only the currently active span shows the caret.       */
/* ===================================================== */

.process-film__phrase--typed-base::after,
.process-film__phrase--typed-expression::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.88em;
  margin-left: 0.05em;
  background: currentColor;
  transform: translateY(0.1em);
  opacity: 0;
}

.process-film.is-unit-01-typing-base .process-film__phrase--typed-base::after {
  opacity: 1;
  animation: process-film-caret 900ms steps(1, end) infinite;
}

.process-film.is-unit-01-typing-expression .process-film__phrase--typed-expression::after,
.process-film.is-unit-01-complete .process-film__phrase--typed-expression::after {
  opacity: 1;
  animation: process-film-caret 900ms steps(1, end) infinite;
}

@keyframes process-film-caret {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

/* ===================================================== */
/* 6. RESPONSIVE BOOK FRAME MODE                         */
/* ----------------------------------------------------- */
/* Tall and phone views use a single-page frame, matching */
/* the portrait debug spread guide. Only frame width and */
/* page width change; the text-safe ratios stay stable.  */
/* ===================================================== */

@media (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  .process-film {
    --process-film-fallback-frame-width: min(
      var(--book-frame-single-page-source-width, 600px),
      calc(100vw - 32px),
      calc((100vh - 32px) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
    );
    --process-film-fallback-frame-height: calc(
      var(--process-film-fallback-frame-width) * var(--book-frame-single-page-ratio, 1.2933)
    );
    --process-film-fallback-page-width: var(--process-film-fallback-frame-width);
    --process-film-fallback-canvas-left: calc(
      var(--process-film-frame-left)
      + (var(--process-film-frame-width) * 0.1333333)
    );
    --process-film-fallback-canvas-width: calc(
      var(--process-film-frame-width)
      - (var(--process-film-frame-width) * 0.1333333)
      - (var(--process-film-frame-width) * 0.24)
    );
  }
}

.film-editor-overlay {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  display: none;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.86);
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.film-editor-overlay__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.film-editor-overlay__title,
.film-editor-overlay__value {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.film-editor-overlay__value::after {
  content: "%";
}

.film-editor-overlay__ruler {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  line-height: 1;
}

.film-editor-overlay__ruler span:last-child {
  text-align: right;
}

.film-editor-overlay__track {
  position: relative;
  min-height: 128px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.film-editor-overlay__bars {
  display: grid;
  gap: 8px;
}

.film-editor-overlay__bar {
  position: relative;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.film-editor-overlay__bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--film-editor-unit-start, 0) * 1%);
  width: calc((var(--film-editor-unit-end, 0) - var(--film-editor-unit-start, 0)) * 1%);
  height: 100%;
  background: rgba(255, 255, 255, 0.28);
}

.film-editor-overlay__bar-label {
  position: absolute;
  top: 50%;
  left: 8px;
  z-index: 1;
  max-width: calc(100% - 16px);
  overflow: hidden;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
}

.film-editor-overlay__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--film-editor-progress, 0) * 1%);
  width: 2px;
  background: #ffffff;
  transform: translateX(-1px);
}

@media (max-width: 767px) {
  .film-editor-overlay {
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 12px;
  }

  .film-editor-overlay__track {
    min-height: 144px;
  }
}