/* A silent transition, sharing the approved hero's dark aperture. */
.home-page .trajectory.rewind {
  position: relative; z-index: 2; padding: 0; color: #e7e5df; background: #080808;
}
.rewind-stage { position: relative; }
.rewind-visuals, .rewind-counter { display: none; }
.rewind-static {
  display: flex; justify-content: center; align-items: center; gap: .2em;
  padding: 3rem var(--page-x); font: 650 clamp(3rem, 14vw, 10rem)/1 var(--condensed);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.rewind-static span { font-size: .45em; color: #77766f; }

/* One viewport of continuous countdown; no chapter holds or scroll snapping. */
[data-rewind="ready"][data-rewind-motion="on"] { height: calc(var(--cinema-height) * 2); }
[data-rewind="ready"][data-rewind-motion="on"] .rewind-stage {
  position: sticky; top: var(--cinema-header-height); height: var(--cinema-height);
  overflow: clip; isolation: isolate;
}
[data-rewind="ready"][data-rewind-motion="on"] .rewind-static { display: none; }
[data-rewind="ready"][data-rewind-motion="on"] .rewind-visuals { display: block; position: absolute; inset: 0; opacity: .46; }
[data-rewind="ready"][data-rewind-motion="on"] .rewind-counter {
  display: grid; place-items: center; position: absolute; inset: 0; z-index: 2;
  font: 650 min(38vw, 56vh, 36rem)/.85 var(--condensed);
  font-variant-numeric: tabular-nums; letter-spacing: -.055em; text-shadow: 0 .04em .3em #0008;
  pointer-events: none;
}
.rewind-visuals::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 15%, #080808b0 80%);
}
.rewind-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: var(--scene-opacity, 0); pointer-events: none; }
.rewind-montage {
  position: relative; width: 88%; height: 88%;
  transform: translate3d(0, calc((.5 - var(--scene-drift, 0)) * 3vh), 0) scale(calc(1.03 - var(--scene-drift, 0) * .03));
}
.rewind-capture { position: relative; margin: 0; height: 100%; }
.rewind-capture img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.08); }
.rewind-capture--memory img { filter: contrast(1.04); }
.rewind-capture--pixel img { image-rendering: pixelated; }
.rewind-capture--secondary { position: absolute; width: 36%; height: 44%; right: -3%; bottom: -2%; transform: rotate(-4deg); }
.rewind-capture--secondary img { object-position: right bottom; }
.rewind-montage--software { --software-next: clamp(0, (var(--scene-drift, 0) - .38) * 5, 1); }
.rewind-software-pair { position: absolute; inset: 0; }
.rewind-software-pair--first { opacity: calc(1 - var(--software-next)); }
.rewind-software-pair--second { opacity: var(--software-next); }
.rewind-capture--maya { width: 24%; }
.rewind-code { width: min(80%, 62rem); margin: 0; color: #b6b5ad; font: 400 clamp(1rem, 3vw, 3rem)/1.6 var(--mono); white-space: pre-wrap; }
.rewind-brands { display: flex; width: min(88%, 65rem); align-items: center; justify-content: space-around; gap: 5%; }
.rewind-brand { display: block; width: 26%; aspect-ratio: 1; background: center / contain no-repeat; filter: grayscale(1) invert(1); }
.rewind-brand--react { background-image: url('/assets/rewind/react.svg'); }
.rewind-brand--nodejs { background-image: url('/assets/rewind/nodejs.svg'); }
.rewind-brand--laravel { background-image: url('/assets/rewind/laravel.svg'); }
.rewind-brand--php { background-image: url('/assets/rewind/php.svg'); }
.rewind-brand--git { background-image: url('/assets/rewind/git.svg'); }
.rewind-brand--cakephp { background-image: url('/assets/rewind/cakephp.svg'); }
.rewind-brand--go { background-image: url('/assets/rewind/go.svg'); }
.rewind-brand--rust { background-image: url('/assets/rewind/rust.svg'); }
.rewind-brand--mongodb { background-image: url('/assets/rewind/mongodb.svg'); }
.rewind-brand--graphql { background-image: url('/assets/rewind/graphql.svg'); }
.rewind-brand--blender { background-image: url('/assets/rewind/blender.svg'); }
.rewind-brands--recent { flex-wrap: wrap; justify-content: center; gap: 4vh 9%; }
.rewind-brands--recent .rewind-brand { width: 24%; max-height: 24vh; }

.terminal-return { position: relative; z-index: 2; padding: clamp(4rem, 8vw, 8rem) var(--page-x); color: #e0dfd8; background: #080808; }
.terminal-return > .eyebrow { color: #c1a372; }
.terminal-return h2 { max-width: 68rem; margin: 0 0 3rem; font: 400 clamp(3rem, 6.5vw, 7rem)/.98 var(--serif); letter-spacing: -.05em; }
.terminal-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.terminal-label, .terminal-note { font: 500 .6875rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.terminal-label { display: flex; justify-content: space-between; margin: 0 0 1rem; color: #b5b4ae; }
.terminal-window { margin: 0; min-height: 17rem; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid #55554a; background: #10110f; box-shadow: inset 0 0 4rem #0007; font: 400 clamp(.75rem, 1.2vw, 1.05rem)/1.65 var(--mono); color: #bfc3ac; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal-window--now { color: #d3cdc1; }
.terminal-window strong { color: #d3ad7f; font-weight: 500; }
.terminal-note { margin: 1rem 0 2rem; color: #86867e; font-size: .5625rem; }
.terminal-reflection { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.terminal-reflection h3 { margin: 0 0 .75rem; font: 500 .6875rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #dedcd3; }
.terminal-reflection p { max-width: 30rem; margin: 0; font: 400 clamp(1.2rem, 2vw, 1.8rem)/1.5 var(--serif); color: #bcbab2; }
.rewind-sources { margin-top: 3rem; color: #a3a29b; font: 400 .6875rem/1.6 var(--mono); }
.rewind-sources summary { cursor: pointer; min-height: 44px; padding: 1rem 0; }
.rewind-sources ul { padding-left: 1.25rem; max-width: 52rem; }
.rewind-sources a { color: inherit; text-underline-offset: .2rem; }

@media (max-width: 700px) {
  .rewind-montage { width: 100%; height: 76%; }
  .rewind-capture--secondary { width: 48%; height: 36%; right: 0; }
  .terminal-comparison, .terminal-reflection { grid-template-columns: 1fr; }
  .terminal-window { min-height: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rewind *, .terminal-return * { animation: none !important; transition: none !important; }
}