/* ───────── Η ταινία ───────── */
.film { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; --bar: 5vh; }

/* Κουτί 16:9: στον υπολογιστή δεξιά (τα κείμενα αριστερά), στο κινητό στο πάνω μέρος. */
.stage { position: absolute; inset: 0; overflow: hidden; }
.stage__box {
  position: absolute; left: 60%; top: 50%;
  height: 108vh; aspect-ratio: 16 / 9; translate: -50% -50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.stage__box video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

.film__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 85% at 62% 50%, transparent 45%, rgba(5, 4, 3, 0.7) 100%),
    linear-gradient(90deg, rgba(5, 4, 3, 0.9) 0%, rgba(5, 4, 3, 0.35) 34%, transparent 52%);
}
.film__grain {
  position: absolute; inset: -50%; z-index: 8; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); }
}

/* Μαύρες μπάρες σινεμά */
.film::before, .film::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 9; height: var(--bar);
  background: #000; pointer-events: none;
}
.film::before { top: 0; }
.film::after { bottom: 0; }

/* Μεγάλο κουμπί «παίξε», μόνο αν ο browser δεν αφήσει το βίντεο να ξεκινήσει μόνο του */
.film__play {
  position: absolute; z-index: 12; left: 50%; top: 72%; translate: -50% -50%;
  padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 15px;
  box-shadow: 0 14px 40px -10px rgba(245, 179, 36, 0.7);
}
.film__play[hidden] { display: none; }

/* Χάρτης ταξιδιού */
.journey { position: absolute; z-index: 5; right: 4vw; top: 50%; width: min(62vw, 1000px); translate: 0 -50%; opacity: 0; pointer-events: none; }
.journey__svg { width: 100%; height: auto; overflow: visible; }
.journey__grid line { stroke: rgba(243, 235, 224, 0.08); stroke-width: 1; stroke-dasharray: 2 6; }
.journey__route-ghost { fill: none; stroke: rgba(243, 235, 224, 0.1); stroke-width: 1.5; stroke-dasharray: 3 7; }
.journey__route { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(245, 179, 36, 0.8)); }
.journey__spark { fill: #fff3e2; filter: drop-shadow(0 0 10px var(--brand)); }
.journey__dot { fill: var(--brand); }
.journey__halo { fill: rgba(245, 179, 36, 0.12); stroke: rgba(245, 179, 36, 0.4); }
.journey__label { fill: var(--text); font-family: var(--serif); font-style: italic; font-size: 30px; }
.journey__sub { fill: var(--text-dim); font-family: var(--sans); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Κείμενα κεφαλαίων */
.chapters { position: absolute; z-index: 10; left: var(--gutter); top: 50%; width: min(480px, 86vw); }
.chapter {
  position: absolute; left: 0; top: 0; translate: 0 -50%;
  opacity: 0; visibility: hidden; transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0.7s;
}
.chapter.is-active { opacity: 1; visibility: visible; transform: none; }
.chapter .chip { margin-bottom: 22px; }
.chapter h2 { font-size: clamp(40px, 5.2vw, 80px); }
.chapter p { margin-top: 20px; max-width: 380px; font-size: 17px; color: var(--text-dim); }
.chapter .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Δείκτης, κουμπιά, πρόοδος */
.hud {
  position: absolute; z-index: 10; right: clamp(20px, 3.5vw, 52px); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); transition: opacity 0.6s;
}
.film[data-chapter="0"] .hud { opacity: 0; }
.hud__count { font-family: var(--serif); font-size: 14px; color: var(--text-dim); letter-spacing: 0.08em; }
.hud__count b { font-size: 32px; font-weight: 400; color: var(--text); }
.hud__dots { display: flex; flex-direction: column; gap: 10px; }
.hud__dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(243, 235, 224, 0.25); transition: background 0.4s, transform 0.4s var(--ease); }
.hud__dots span.is-on { background: var(--brand); transform: scale(1.5); }

.film-controls { position: absolute; z-index: 11; right: clamp(20px, 3.5vw, 52px); bottom: calc(var(--bar) + 22px); display: flex; gap: 10px; }
.film-controls button {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; cursor: pointer;
  transition: color 0.3s, border-color 0.3s, opacity 0.5s;
}
.film-controls button:hover { color: var(--text); border-color: var(--text-dim); }
.progress { position: absolute; z-index: 10; left: 0; right: 0; bottom: var(--bar); height: 2px; background: rgba(243, 235, 224, 0.06); }
.progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--gold), var(--brand)); }

/* ───────── Κινητό / όρθιες οθόνες ───────── */
@media (max-aspect-ratio: 9/10) {
  .film { --bar: 0px; }
  .stage__box {
    left: 50%; top: 34%; height: auto; width: 210vw;
    -webkit-mask-image: linear-gradient(transparent 0%, #000 18%, #000 80%, transparent 100%);
    mask-image: linear-gradient(transparent 0%, #000 18%, #000 80%, transparent 100%);
  }
  .film__shade { background: linear-gradient(0deg, rgba(5, 4, 3, 0.96) 0%, rgba(5, 4, 3, 0.6) 32%, transparent 55%); }
  .journey { left: 50%; right: auto; top: 36%; width: min(128vw, 80vh); translate: -50% -50%; }
  .chapters { top: auto; bottom: 160px; left: 20px; right: 20px; width: auto; }
  .chapter, .chapter.is-active { top: auto; bottom: 0; translate: none; }
  .chapter h2 { font-size: clamp(34px, 9.6vw, 52px); }
  .chapter p { font-size: 15px; margin-top: 12px; }
  .chapter .chip { margin-bottom: 14px; }
  .chapter .actions { margin-top: 18px; }
  .hud { top: 84px; right: 20px; translate: none; flex-direction: row; align-items: center; }
  .hud__dots { flex-direction: row; gap: 7px; }
  .hud__count b { font-size: 22px; }
  .film-controls { right: auto; left: 20px; bottom: 96px; }
}
@media (max-width: 820px) and (min-aspect-ratio: 9/10) {
  .chapters { width: min(420px, 60vw); }
}

@media (prefers-reduced-motion: reduce) {
  .film__grain { display: none; }
  .chapter { transition: none; }
}