@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root { color-scheme: dark; --signal: #c9ff3d; --electric: #58e7f2; --white: #f7fbff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #030305; }
body { color: var(--white); font-family: "Archivo Black", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }

.film {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  padding: clamp(18px, 4vw, 58px);
  isolation: isolate;
  overflow: hidden;
  cursor: none;
  user-select: none;
  touch-action: none;
}

.film::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(88, 231, 242, 0.14), transparent 26%), #030506;
}

.film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0.17;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.08) 4px);
  mix-blend-mode: soft-light;
}

.film__back {
  position: fixed;
  z-index: 12;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  color: var(--white);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.film__frame {
  position: relative;
  width: min(88vw, 1500px);
  height: min(76svh, 880px);
  border: clamp(7px, 1vw, 14px) solid #111115;
  outline: 1px solid rgba(255, 255, 255, 0.18);
  background: #050507;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.72), 0 0 80px rgba(88, 231, 242, 0.09);
  overflow: hidden;
  transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 150ms ease-out;
}

.film__gate {
  position: absolute;
  inset: clamp(25px, 3vw, 46px) clamp(12px, 2vw, 30px);
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.film__sprockets { position: absolute; z-index: 7; left: 0; width: 100%; height: 23px; background: repeating-linear-gradient(90deg, #050507 0 18px, #25252a 18px 31px, #050507 31px 49px); pointer-events: none; }
.film__sprockets--top { top: 0; }
.film__sprockets--bottom { bottom: 0; }

.film-shot { position: absolute; inset: 23px 0; margin: 0; opacity: 0; overflow: hidden; transform: scale(1.07); transition: opacity 620ms ease, transform 1.15s cubic-bezier(.16, .8, .25, 1), filter 620ms ease; filter: saturate(0.55) contrast(1.18) brightness(0.62); }
.film-shot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, transparent 26%, rgba(0, 0, 0, 0.72) 100%); }
.film-shot.is-active { opacity: 1; transform: scale(1); filter: saturate(1) contrast(1.08) brightness(0.86); }
.film-shot img { width: 100%; height: 100%; padding: clamp(28px, 5vw, 82px); object-fit: contain; transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.025); transition: transform 240ms ease-out; }
.film-shot--wide img { padding: 0; object-fit: cover; }

.film__flare { position: absolute; z-index: 4; width: 42%; aspect-ratio: 1; left: calc(var(--pointer-x) - 21%); top: calc(var(--pointer-y) - 21%); border-radius: 50%; opacity: 0.2; background: radial-gradient(circle, rgba(88, 231, 242, 0.3), transparent 66%); mix-blend-mode: screen; pointer-events: none; }
.film__scratches { position: absolute; inset: 23px 0; z-index: 6; opacity: 0.2; pointer-events: none; background-image: repeating-linear-gradient(92deg, transparent 0 17%, rgba(255, 255, 255, 0.13) 17.08%, transparent 17.16% 38%); mix-blend-mode: overlay; animation: scratches 430ms steps(2) infinite; }

.film__brand { position: absolute; z-index: 7; top: clamp(42px, 5vw, 72px); left: clamp(26px, 4vw, 68px); display: flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8); }
.film__brand img { width: clamp(30px, 3.3vw, 48px); height: clamp(30px, 3.3vw, 48px); padding: 0; object-fit: contain; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.72)); transform: none; }
.film__brand span { font-size: clamp(0.72rem, 1.2vw, 1rem); letter-spacing: 0.14em; }

.film__year { position: absolute; z-index: 7; left: clamp(26px, 4vw, 68px); bottom: clamp(36px, 5vw, 70px); color: var(--white); font-size: clamp(3rem, 10vw, 9rem); line-height: 0.78; text-shadow: 0 8px 34px rgba(0, 0, 0, 0.85); }
.film__counter { position: absolute; z-index: 7; right: clamp(26px, 4vw, 68px); bottom: clamp(38px, 5vw, 72px); color: rgba(255, 250, 245, 0.62); font-size: 0.58rem; letter-spacing: 0.14em; }

.film-dates { position: fixed; z-index: 12; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: clamp(8px, 2.3vw, 34px); transform: translateX(-50%); }
.film-dates::before { content: ""; position: absolute; z-index: -1; inset: -12px -22px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; background: rgba(3, 3, 5, 0.7); backdrop-filter: blur(18px); }
.film-dates button { position: relative; width: 48px; padding: 8px 0; border: 0; background: transparent; color: rgba(255, 250, 245, 0.3); font: inherit; font-size: 0.58rem; cursor: pointer; transition: color 220ms ease, transform 220ms ease; }
.film-dates button::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.film-dates button.is-active { color: var(--signal); transform: translateY(-3px); }

.film__cursor { position: fixed; z-index: 20; left: 0; top: 0; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: width 180ms ease, height 180ms ease, opacity 180ms ease; }
.film.has-pointer .film__cursor { opacity: 1; }
.film__cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--signal); transform: translate(-50%, -50%); }

@keyframes scratches { 50% { transform: translateX(3px); opacity: 0.12; } }

@media (max-width: 680px) {
  .film { padding: 12px; }
  .film__frame { width: calc(100vw - 24px); height: calc(100svh - 82px); }
  .film-shot img { padding: 54px 14px 100px; }
  .film-shot--wide img { padding: 0; }
  .film__brand { top: 48px; left: 22px; }
  .film__year { left: 22px; bottom: 72px; font-size: clamp(3.2rem, 21vw, 6rem); }
  .film__counter { right: 22px; bottom: 78px; }
  .film-dates { bottom: max(22px, env(safe-area-inset-bottom)); gap: 1px; }
  .film-dates::before { inset-inline: -8px; }
  .film-dates button { width: 52px; }
  .film__cursor { display: none; }
}

/* Shared gray theme */
:root[data-theme="light"] { color-scheme:light;--signal:#c9ff3d;--electric:#58e7f2;--white:#f7fbff;--line:rgba(255,255,255,.2); }
:root[data-theme="light"] html,
:root[data-theme="light"] body { background:#454a47; }
:root[data-theme="light"] .film::before { background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(88,231,242,.2),transparent 27%),#454a47; }
:root[data-theme="light"] .film::after { opacity:.2;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.08) 4px); }
:root[data-theme="light"] .film__back { border-color:rgba(255,255,255,.24);background:rgba(80,86,82,.76);color:#f7fbff; }
:root[data-theme="light"] .film__frame { border-color:#626864;outline-color:rgba(255,255,255,.2);background:#505652;box-shadow:0 34px 100px rgba(5,8,10,.38),0 0 80px rgba(88,231,242,.13); }
:root[data-theme="light"] .film__sprockets { background:repeating-linear-gradient(90deg,#3d423f 0 18px,#737a75 18px 31px,#3d423f 31px 49px); }
:root[data-theme="light"] .film-dates::before { border-color:rgba(255,255,255,.15);background:rgba(69,74,71,.82); }
:root[data-theme="light"] .film-dates button { color:rgba(247,251,255,.46); }
:root[data-theme="light"] .film__cursor { border-color:rgba(247,251,255,.76); }

@media (pointer: coarse) { .film { cursor: default; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Archive chapters */
.film::before { background: radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(88,231,242,.18),transparent 22%),radial-gradient(circle at calc(100% - var(--pointer-x)) calc(100% - var(--pointer-y)),rgba(255,79,216,.12),transparent 25%),#030506; }
.film__frame::before { content: ""; position: absolute; inset: -40%; z-index: 3; opacity: .12; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 11deg,rgba(201,255,61,.16) 11deg 12deg); animation: archive-spin 55s linear infinite; }
.film-shot figcaption { position: absolute; z-index: 8; right: clamp(28px,5vw,78px); top: 50%; display: grid; gap: 8px; text-align: right; opacity: 0; transform: translateY(-35%) translateX(26px); transition: opacity 600ms 260ms ease,transform 800ms 220ms cubic-bezier(.16,.8,.25,1); }
.film-shot.is-active figcaption { opacity: 1; transform: translateY(-35%) translateX(0); }
.film-shot figcaption small { color: var(--signal); font-size: .55rem; letter-spacing: .2em; text-shadow: 0 0 12px rgba(201,255,61,.35); }
.film-shot figcaption strong { max-width: 420px; color: transparent; background: linear-gradient(100deg,#fff,var(--electric),#ff4fd8); background-clip: text; -webkit-background-clip: text; font-size: clamp(1.8rem,5vw,5rem); line-height: .9; text-shadow: 0 0 30px rgba(88,231,242,.08); }
.film__status { position: absolute; z-index: 9; top: clamp(44px,5vw,74px); right: clamp(28px,4vw,68px); display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: .5rem; letter-spacing: .16em; }
.film__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); animation: archive-blink 1.4s steps(2,end) infinite; }
.film-dates button.is-active { text-shadow: 0 0 12px var(--signal); }
.film-dates button.is-active::after { width: 18px; border-radius: 2px; box-shadow: 0 0 10px var(--signal); transition: width 250ms ease; }
.film__cursor { border-color: var(--electric); box-shadow: 0 0 18px rgba(88,231,242,.28); }
@keyframes archive-spin { to { transform: rotate(360deg); } }
@keyframes archive-blink { 50% { opacity: .2; } }
@media (max-width: 680px) {
  .film-shot figcaption { top: auto; right: 22px; left: 22px; bottom: 140px; text-align: left; transform: translateY(18px); }
  .film-shot.is-active figcaption { transform: translateY(0); }
  .film-shot figcaption strong { font-size: clamp(1.5rem,9vw,2.7rem); }
  .film__status { top: 50px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) { .film__frame::before,.film__status i { animation: none !important; } }