/* The film owns the opening, edge to edge under the header. One input opens the
   curtain: the visitor's scroll (js/cinema/character-director.mjs). The film ends on a
   clean ivory backdrop and the real portfolio scrolls up over that held frame; its
   head is transparent and then continues the frame's sampled colour (--stage-end).
   Heights here and the overlap below are measured by the director, not duplicated. */
.opening {
  --chrome: 1;
  position: relative;
  z-index: 1;
  height: 100svh;
  padding: 0 !important;
  background: transparent;
}
.opening.is-directed {
  /* Slower by request (25.10): ~2.4 screens of film, then the portfolio rises. Longer
     than the hub 1.5-screen pin budget on purpose; the frame moves for the whole travel
     (qa/transition-audit.mjs fails any wheel step that leaves the screen unchanged). */
  height: 360svh;
}
.opening-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background: var(--stage-bottom, #1f1718);
}
.opening-scene {
  position: absolute;
  inset: var(--header-h) 0 0;
}
.stage-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1f1718;
}
.stage-film {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stage-film img,
.stage-film canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage-film canvas {
  object-fit: contain; /* the director already crops to the box; never distort */
}
.stage-film img {
  object-fit: cover;
  object-position: 55% 50%;
}
.character-canvas {
  opacity: 0;
}
.opening.is-live .character-canvas {
  opacity: 1;
}
.opening.is-live .stage-poster {
  visibility: hidden;
}

/* Copy and actions sit on the dark curtain and floor, each over its own local scrim.
   They leave (--chrome) before the frame turns bright, so nothing pale sits on ivory. */
.opening-copy,
.opening-foot {
  position: absolute;
  inset-inline: 0;
  z-index: 2;
  padding-inline: var(--gutter);
  opacity: var(--chrome);
  isolation: isolate;
}
.opening-copy::before,
.opening-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.opening-copy {
  top: var(--header-h);
  display: grid;
  gap: 4px;
  padding-block: 22px 40px;
}
.opening-copy::before {
  background: linear-gradient(#140b0cd9, #140b0c80 55%, #140b0c00);
}
.opening h1 {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.opening-offer {
  font-size: 15px;
  line-height: 1.5;
  color: #f1e5e0;
}
.opening-foot {
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding-block: 48px 22px;
  padding-inline-start: calc(
    var(--gutter) + 64px
  ); /* clear the accessibility button */
}
.opening-foot::before {
  background: linear-gradient(#120c0c00, #120c0c99 45%, #120c0ce0);
}
.opening-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.opening-actions .action {
  font-size: 13px;
  min-height: 44px;
  padding: 9px 18px;
  gap: 24px;
}
.stage-hint {
  grid-column: 1;
  grid-row: 1;
  display: none;
  font-size: 13px;
  color: #efe2dc;
}
.stage-hint span {
  display: inline-block;
  margin-inline-start: 6px;
}
.opening.is-directed .stage-hint {
  display: block;
}
.stage-caption {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 10px;
  line-height: 1.5;
  color: #f3f1eb;
  background: #24191bd9;
  padding: 4px 8px;
  pointer-events: none;
  opacity: var(--chrome);
}
.stage-status {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #f0dfda;
}

/* Hand-off: the portfolio overlaps the last 55svh of the pin (a soft blend, no seam); the director finishes the
   film once it has risen HANDOFF_RISE into view. */
.opening.is-directed + .portfolio {
  z-index: 2;
  margin-top: -55svh;
  padding-top: 40px; /* the heading is the first thing that rises onto the backdrop */
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 40svh,
    var(--stage-end, #dcc8ad) 62svh,
    var(--paper) 110svh
  );
}
.opening.is-bypassed {
  height: 0 !important;
  overflow: hidden;
}
.opening.is-bypassed .opening-pin {
  visibility: hidden;
}
.opening.is-bypassed + .portfolio {
  margin-top: 0;
  padding-top: calc(
    var(--header-h) + 32px
  ); /* the fixed header must not cover "עבודות נבחרות." */
  background: var(--paper);
}
@media (max-width: 720px) {
  .opening.is-bypassed + .portfolio {
    padding-top: calc(var(--header-h) + 28px);
  }
}

/* Phone: a 4:5 stage keeps the whole figure and the cloth in frame (a full-height crop
   cut him in half). The bands above and below take the frame's own edge colours. */
@media (max-width: 720px) {
  /* While copy and buttons are on the bands they are deepened for contrast; once the
     chrome has left, the bands are the frame's exact edge colours. */
  .opening-pin {
    --deepen: calc(var(--chrome) * 72%);
    background: linear-gradient(
      color-mix(in srgb, var(--stage-top, #1f1718), #000 var(--deepen)) 0 50%,
      color-mix(in srgb, var(--stage-bottom, #1f1718), #000 var(--deepen)) 50%
        100%
    );
  }
  .opening-scene {
    inset: calc(var(--header-h) + 92px) 0 auto;
    height: min(125vw, calc(100svh - var(--header-h) - 92px - 140px));
  }
  /* Feathered top and bottom edges, so the stage reads as the room, not a boxed video. */
  .stage-world {
    mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
    background: transparent;
  }
  .opening-copy {
    top: var(--header-h);
    padding-block: 18px 12px;
  }
  .opening-copy::before,
  .opening-foot::before {
    background: none;
  }
  .opening h1 {
    font-size: 27px;
  }
  .opening-offer {
    font-size: 13px;
  }
  .opening-foot {
    top: calc(
      var(--header-h) + 92px +
        min(125vw, calc(100svh - var(--header-h) - 92px - 140px))
    );
    bottom: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 16px 0;
    padding-inline-start: var(--gutter);
  }
  .opening-actions {
    grid-column: 1;
    grid-row: 2;
    gap: 8px;
  }
  .opening-actions .action {
    font-size: 12px;
    padding: 8px 12px;
    gap: 10px;
    white-space: nowrap;
  }
  .stage-hint {
    font-size: 12px;
  }
  .stage-caption {
    font-size: 9px;
    top: auto;
    bottom: 9px;
    left: 9px;
  }
}

/* Failed media, reduced motion: no film, no pin, same copy and links in normal flow. */
.opening.is-media-failed,
.motion-off .opening {
  height: auto !important;
}
.opening.is-media-failed .opening-pin,
.motion-off .opening-pin {
  position: relative;
  height: auto;
  padding: var(--header-h) 0 0;
  background: #24151a;
}
.opening.is-media-failed .opening-scene,
.motion-off .opening-scene,
.opening.is-media-failed .stage-hint,
.motion-off .stage-hint {
  display: none !important;
}
.opening.is-media-failed :is(.opening-copy, .opening-foot),
.motion-off :is(.opening-copy, .opening-foot) {
  position: relative;
  top: auto;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cinema .opening {
    height: auto !important;
  }
  .cinema .opening-pin {
    position: relative;
    height: auto;
    padding: var(--header-h) 0 0;
    background: #24151a;
  }
  .cinema .opening-scene,
  .cinema .stage-hint {
    display: none !important;
  }
  .cinema :is(.opening-copy, .opening-foot) {
    position: relative;
    top: auto;
    opacity: 1;
  }
}