/* MemeLife v4 — pinned scroll-controlled film. Loaded last.
   Safe fallback: without JS, the previous readable stacked page remains. */
.timeline.cinematic-active {
  position: relative !important;
  height: var(--film-length, 1600svh) !important;
  background: #070916 !important;
  isolation: isolate;
}
.timeline.cinematic-active > .viewport {
  position: sticky !important;
  top: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #080a1b;
  contain: paint;
}
.timeline.cinematic-active .viewport > .scene {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  opacity: var(--film-alpha, 0) !important;
  visibility: var(--film-visibility, hidden) !important;
  pointer-events: var(--film-pointer, none) !important;
  will-change: opacity !important;
  transform: translateZ(0);
  overflow: hidden !important;
  transition: none !important;
  background: #0a0d23;
}
.timeline.cinematic-active .viewport > .scene:first-of-type { --film-alpha: 1; --film-visibility: visible; }
.timeline.cinematic-active .viewport > .scene::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  height: 13%;
  pointer-events: none;
  background: linear-gradient(0deg, #06071670, transparent);
}
/* Layered Claude illustrations are all shot-sized plates. The transform is driven by scroll. */
.timeline.cinematic-active .scene .layers,
.timeline.cinematic-active .scene .claude-layers {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
}
.timeline.cinematic-active .scene .layer,
.timeline.cinematic-active .scene .claude-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  transition: none !important;
  will-change: transform;
  backface-visibility: hidden;
}
.timeline.cinematic-active .scene img[data-failed='true'] { opacity: 0; }
.timeline.cinematic-active .scene .shade,
.timeline.cinematic-active .scene .claude-tint {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4,5,20,.81), rgba(4,5,20,.13) 72%), linear-gradient(0deg, rgba(5,5,17,.36), transparent 40%);
}
.timeline.cinematic-active .viewport .scene .caption,
.timeline.cinematic-active .viewport .scene .claude-caption {
  position: absolute !important;
  z-index: 10 !important;
  top: 28% !important;
  left: 6% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(44vw, 650px) !important;
  max-width: 650px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 22px 26px !important;
  text-align: left !important;
  background: linear-gradient(90deg, #06071bba, #06071b15) !important;
  border: 0 !important;
  text-shadow: 0 4px 30px #000e;
  opacity: var(--film-copy-opacity, 1);
  transform: translate3d(0, var(--film-copy-y, 0px), 0) !important;
  transition: none !important;
  pointer-events: none;
}
.timeline.cinematic-active .viewport .scene .caption.right,
.timeline.cinematic-active .viewport .scene[data-claude-id='scene_upgrade'] .claude-caption,
.timeline.cinematic-active .viewport .scene[data-claude-id='scene_thread'] .claude-caption {
  left: auto !important;
  right: 6% !important;
  text-align: right !important;
  background: linear-gradient(270deg, #06071bba, #06071b15) !important;
}
.timeline.cinematic-active .scene h2 {
  font-size: clamp(44px, 5.5vw, 96px);
  line-height: .99;
  max-width: 650px;
  margin: 14px 0 18px;
}
.timeline.cinematic-active .scene .caption p,
.timeline.cinematic-active .scene .claude-caption p {
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.55;
}
/* Pager birth shot: large hero object and a nearby title; no document flow movement. */
.timeline.cinematic-active .viewport > .pager-scene {
  background: radial-gradient(ellipse at 52% 42%, #3e2751 0%, #17142b 54%, #07091e 100%) !important;
}
.timeline.cinematic-active .pager-scene .stars { position: absolute; inset: 0; }
.timeline.cinematic-active .pager-scene .page-machine {
  position: absolute !important;
  left: 30%;
  top: 48%;
  z-index: 7;
  width: min(34vw, 455px);
  min-height: 300px;
  translate: -50% -50%;
  transform: rotate(-9deg);
  transform-origin: center center;
  animation: none !important;
}
.timeline.cinematic-active .pager-scene .pager-title {
  position: absolute !important;
  z-index: 8;
  left: 53%;
  right: 5%;
  top: 28%;
  max-width: min(590px, 44vw);
  text-align: left;
  opacity: var(--film-copy-opacity, 1);
  transform: translate3d(0, var(--film-copy-y, 0px), 0);
}
.timeline.cinematic-active .pager-title h1 { font-size: clamp(60px, 7vw, 128px); }
.timeline.cinematic-active .pager-title p:not(.eyebrow) { max-width: 440px; }
/* Additional physical motifs still float inside their own frame. */
.timeline.cinematic-active .chat-windows { position: absolute; z-index: 5; inset: 12% 3% 8% 32%; }
.timeline.cinematic-active .scene .window { position: absolute; }
.timeline.cinematic-active .feedphone { position: absolute; z-index: 5; }
.timeline.cinematic-active .floatmemes { position: absolute; inset: 0; }
.timeline.cinematic-active .future .ending {
  position: absolute !important;
  z-index: 10;
  top: 27%;
  left: auto;
  right: 5%;
  width: min(640px, 54vw);
  max-width: none;
  margin: 0 !important;
  padding: 20px 25px;
  text-align: right;
  opacity: var(--film-copy-opacity, 1);
  transform: translate3d(0, var(--film-copy-y, 0px), 0);
}
.timeline.cinematic-active .future-note { position: absolute; z-index: 6; }
/* The progress is inside the pinned camera and disappears after the film. */
.timeline.cinematic-active .progress {
  position: absolute !important;
  left: 50%;
  bottom: 16px;
  z-index: 30;
  transform: translateX(-50%);
  pointer-events: none;
}
.timeline.cinematic-active .viewport > .scene:last-of-type .ending a { pointer-events: auto; }
@media (max-width: 780px) {
  .timeline.cinematic-active .viewport > .scene { height: 100svh !important; }
  .timeline.cinematic-active .scene .shade,
  .timeline.cinematic-active .scene .claude-tint {
    background: linear-gradient(180deg, #05071acf, #05071a48 48%, #05071a05 76%) !important;
  }
  .timeline.cinematic-active .viewport .scene:not(.pager-scene) .caption,
  .timeline.cinematic-active .viewport .scene:not(.pager-scene) .claude-caption,
  .timeline.cinematic-active .viewport .scene .caption.right,
  .timeline.cinematic-active .viewport .scene[data-claude-id='scene_upgrade'] .claude-caption,
  .timeline.cinematic-active .viewport .scene[data-claude-id='scene_thread'] .claude-caption {
    position: absolute !important;
    top: clamp(80px, 12svh, 132px) !important;
    left: 5% !important;
    right: 5% !important;
    width: 90% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 10px 16px !important;
    background: linear-gradient(180deg, #06091b8c, #06091b15) !important;
    text-align: left !important;
  }
  .timeline.cinematic-active .scene .caption h2,
  .timeline.cinematic-active .scene .claude-caption h2 {
    font-size: clamp(35px, 10.4vw, 63px) !important;
    max-width: 550px;
    line-height: .97;
  }
  .timeline.cinematic-active .scene .caption p,
  .timeline.cinematic-active .scene .claude-caption p { font-size: 14px !important; max-width: 330px; }
  .timeline.cinematic-active .pager-scene .page-machine {
    top: 38%;
    left: 50%;
    width: min(66vw, 305px);
    min-height: 0;
    padding: 17px;
    border-radius: 28px;
  }
  .timeline.cinematic-active .pager-scene .page-machine .lcd { min-height: 110px; border-width: 6px; padding: 12px; }
  .timeline.cinematic-active .pager-scene .pager-title {
    top: auto;
    bottom: 11%;
    left: 6%;
    right: 6%;
    max-width: none;
    width: 88%;
    text-align: center;
  }
  .timeline.cinematic-active .pager-title h1 { font-size: clamp(50px, 12vw, 74px); margin: 12px 0 18px; }
  .timeline.cinematic-active .pager-title p:not(.eyebrow) { font-size: 14px; margin: 0 auto; }
  .timeline.cinematic-active .scroll-note { display: none; }
  .timeline.cinematic-active .chat-windows { inset: 38% -8% 13% 10%; }
  .timeline.cinematic-active .feedphone { top: 40%; right: 12%; width: 55vw; height: 49svh; }
  .timeline.cinematic-active .future .ending {
    top: clamp(85px, 14svh, 140px);
    left: 5%; right: 5%; width: 90%;
    text-align: left;
    padding: 10px;
  }
  .timeline.cinematic-active .future .ending h2 { font-size: clamp(49px, 12vw, 72px); }
  .timeline.cinematic-active .progress { bottom: 12px; width: min(420px, calc(100vw - 28px)); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline.cinematic-active .scene .layer,
  .timeline.cinematic-active .scene .claude-layer { transform: none !important; }
  .timeline.cinematic-active .scene .page-machine { transform: rotate(-8deg) !important; }
}
/* Narrative date key: real product history is separate from the protagonist's fictional year. */
.timeline.cinematic-active .film-history-hud{position:absolute;right:clamp(18px,4.5vw,76px);top:clamp(73px,9svh,120px);z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:min(360px,44vw);pointer-events:none;text-align:right;text-shadow:0 2px 12px #01020e}
.timeline.cinematic-active .film-story-year{font:800 10px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#e6dcfa}
.timeline.cinematic-active .film-story-year strong{color:#d7ff6c;font-size:15px;letter-spacing:.07em}
.timeline.cinematic-active .film-history-label{font:700 10px/1.4 ui-monospace,Consolas,monospace;color:#c9e6ee;letter-spacing:.08em;max-width:35ch}
@media(max-width:780px){.timeline.cinematic-active .film-history-hud{top:auto;right:20px;bottom:95px;max-width:min(330px,86vw)}.timeline.cinematic-active .film-story-year{font-size:9px}.timeline.cinematic-active .film-history-label{font-size:9px}}
/* Unscrolled / error fallback: history HUD is hidden unless the pinned film is activated. */
.film-history-hud{display:none}
.timeline.cinematic-active .film-history-hud{display:flex}