/* ==========================================================================
   VIDEO — ruang proyeksi
   Ruang gelap pertama (pasangannya: kamar gelap di foto): layar berbutir, lampu yang berkedip,
   dan strip film yang bisa diintip. Setiap putaran membuat ingatan memudar.
   ========================================================================== */


.projection { padding-bottom: 20px; }

/* ---------- layar ---------- */

.screen {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 76vh; width: 100%;
  background: #080807;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .04), 0 40px 120px -40px rgb(222 143 34 / .28);
  isolation: isolate;
}
.screen::before {
  /* cahaya proyektor yang tidak pernah benar-benar rata */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(0 0 0 / .55) 100%);
  animation: flicker 5s steps(40) infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; } 7% { opacity: .86; } 8% { opacity: 1; } 43% { opacity: .93; } 44% { opacity: 1; } 71% { opacity: .9; } 72% { opacity: 1; } }
.screen-fill { position: absolute; inset: -40px; z-index: 0; background-size: cover; background-position: center; filter: blur(40px) brightness(.45) saturate(.8); transform: scale(1.1); transition: background-image .6s, opacity 3.2s var(--ease); }
.screen-media { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.screen-media .shot { position: absolute; inset: 0; transition: filter 3.2s var(--ease), opacity .7s; }
.screen-media .shot > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; }
.screen-media .shot > video, .screen-media .shot > iframe { opacity: var(--keep, 1); transition: opacity 3.2s var(--ease); }
.screen-media .shot > img { opacity: var(--keep, 1); transition: opacity .4s; }
.screen-media .shot.is-playing > img { opacity: 0; }
.screen-media .out { opacity: 0 !important; }
.screen-grain {
  position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .18; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .8s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -3%); } 60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); } }
.screen-hud { position: absolute; top: 16px; left: 20px; right: 20px; z-index: 4; display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .12em; color: rgb(251 248 241 / .82); pointer-events: none; }
.screen-hud .rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e0442d; margin-right: 8px; vertical-align: 1px; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.screen-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  padding: 60px 24px 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(transparent, rgb(0 0 0 / .6));
}
.screen-caption .hand { font-size: clamp(30px, 3.4vw, 50px); line-height: 1; color: var(--sheet); }
.screen-caption .mono { font-size: 13px; color: rgb(251 248 241 / .75); text-align: right; }
/* terlupa: gambar sudah hilang, hanya layar kosong, butir film, dan waktu yang berjalan */
.screen-forgot {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity 2.4s var(--ease) 1.2s, visibility 0s 3.6s;
}
.screen-forgot .hand { margin: 0; font-size: clamp(56px, 8vw, 120px); line-height: .9; color: rgb(251 248 241 / .5); filter: blur(.6px); }
.screen-forgot .mono { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.6; color: rgb(251 248 241 / .55); }
.screen-forgot .deck-btn { pointer-events: auto; margin-top: 6px; }
.screen.is-forgotten .screen-forgot { opacity: 1; visibility: visible; transition: opacity 2.4s var(--ease) 1.2s, visibility 0s; }
.screen.is-forgotten .screen-caption .hand { filter: blur(6px); opacity: .25; transition: filter 3s, opacity 3s; }
.screen.is-forgotten .screen-hud .rec::before { background: #6b665e; animation: none; }
.screen:fullscreen { max-height: none; aspect-ratio: auto; }

/* ---------- panel kendali ---------- */

.deck { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 0 4px; }
.deck-left, .deck-right { display: flex; flex-wrap: wrap; gap: 8px; }
.deck-btn { border: 1px solid rgb(255 255 255 / .18); background: none; color: #e9e3d6; border-radius: 999px; padding: 6px 13px; font-family: var(--mono); font-size: 12.5px; }
.deck-btn:hover { border-color: #f2c47c; color: #f2c47c; }
.deck-btn[aria-pressed="true"] { border-color: #f2c47c; color: #f2c47c; }
.deck-group { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 12px; border-left: 1px solid rgb(255 255 255 / .14); }
.deck-label { font-family: var(--mono); font-size: 11px; color: #8f887a; letter-spacing: .06em; }
/* pasca-sadar: gambar sesekali tersentak dan sobek */
.screen-media.is-rupture .shot { transform: translateX(var(--rx, 1%)) skewX(-1deg); }
.screen-media.is-rupture::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--ry, 40%); height: 7%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(251 248 241 / .1) 20%, rgb(251 248 241 / .04) 70%, transparent);
  mix-blend-mode: screen; transform: translateX(calc(var(--rx, 1%) * -3));
}
.deck-tools .item-tools button { background: transparent; color: #e9e3d6; border-color: rgb(255 255 255 / .2); }

/* ---------- strip film ---------- */

.reel-wrap { margin-top: 36px; position: relative; }
.reel-wrap::before, .reel-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.reel-wrap::before { left: 0; background: linear-gradient(90deg, var(--night), transparent); }
.reel-wrap::after { right: 0; background: linear-gradient(-90deg, var(--night), transparent); }
.reel {
  display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel.is-grabbing { cursor: grabbing; }
.reel-month {
  flex: none; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 18px 30px; min-width: 150px;
  font-family: var(--hand); font-size: 34px; line-height: .95; color: #f2c47c;
}
.reel-month small { font-family: var(--mono); font-size: 11px; color: #8f887a; margin-top: 8px; }
.frames {
  flex: none; display: flex; gap: 12px; padding: 30px 14px;
  background-color: #0b0b0a;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 9px, rgb(233 227 214 / .7) 9px 19px, transparent 19px 28px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgb(233 227 214 / .7) 9px 19px, transparent 19px 28px);
  background-size: 100% 9px, 100% 9px; background-repeat: repeat-x; background-position: 0 10px, 0 calc(100% - 10px);
}
.frame {
  position: relative; flex: none; height: 190px; aspect-ratio: 3 / 4;
  border: 0; padding: 0; background: #1d1c1a; overflow: hidden;
  opacity: var(--ink, 1); filter: var(--fade, none);
  transition: transform .4s var(--ease), outline-color .3s, opacity 1.2s, filter 1.2s;
  outline: 2px solid transparent; outline-offset: 3px;
}
.frame.is-wide { aspect-ratio: 4 / 3; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame video { opacity: 0; transition: opacity .2s; z-index: 1; }
.frame.is-peek.is-ready video { opacity: 1; }
.frame .no { position: absolute; left: 6px; bottom: 5px; z-index: 2; font-family: var(--mono); font-size: 10px; color: #f2c47c; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.frame .scrub { position: absolute; left: 0; bottom: 0; height: 2px; background: #f2c47c; z-index: 2; width: 0; }
.frame:hover { transform: translateY(-4px); }
.frame.is-active { outline-color: #f2c47c; }
.frame.is-forgotten:hover, .frame.is-forgotten.is-active { opacity: .28; }
.frame.is-forgotten .no { color: rgb(251 248 241 / .45); }
.reel-hint { font-size: 12px; color: #8f887a; margin-top: 12px; }

@media (max-width: 700px) {
  .screen { aspect-ratio: 3 / 4; max-height: 72vh; }
  .frame { height: 150px; }
  .screen-caption { padding: 40px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen::before, .screen-grain, .screen-hud .rec::before { animation: none; }
}