/* ============================================================================
   FRAMES — procedural cinematic stills. Until João drops in real photographs,
   every image slot renders as a tuned duotone "frame": light shaft, vignette,
   and a whisper of grain. Each [data-frame="n"] is a different mood of light.

   To use a real image instead, set on the element:
     style="--img: url('assets/images/films/salt-year.jpg')"
   and it takes over automatically.
   ============================================================================ */

[data-frame] {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  --f-a: #232a30;
  --f-b: #06080b;
  --f-shaft: rgba(216, 178, 124, 0.10);
  --f-x: 32%;
  --f-y: 22%;
  --f-ang: 158deg;
  background-color: var(--f-b);
  background-image:
    radial-gradient(78% 64% at var(--f-x) var(--f-y), color-mix(in oklab, var(--f-a) 96%, white 5%), transparent 55%),
    linear-gradient(var(--f-ang), color-mix(in oklab, var(--f-a) 52%, var(--f-b)) 0%, var(--f-b) 74%);
  background-repeat: no-repeat;
}

/* A soft diagonal light shaft — the projector reaching through haze. */
[data-frame]::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 70% at var(--f-x) var(--f-y), var(--f-shaft), transparent 70%);
  z-index: 1;
  mix-blend-mode: screen;
  animation: frame-flicker 6s ease-in-out infinite;
}

/* Vignette + a hairline of grain, so it reads as film, not CSS. */
[data-frame]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(125% 125% at var(--f-x) var(--f-y), transparent 40%, rgba(0,0,0,0.64) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  background-size: cover, 140px 140px;
  mix-blend-mode: normal, overlay;
  opacity: 1;
}

/* Real image override. */
[data-frame][style*="--img"] {
  background-image:
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0,0,0,0.25)),
    var(--img);
  background-size: cover, cover;
  background-position: center;
}
[data-frame][style*="--img"]::before { display: none; }

@keyframes frame-flicker {
  0%, 100% { opacity: 0.85; }
  48%      { opacity: 1; }
  50%      { opacity: 0.7; }
  52%      { opacity: 0.96; }
}
@media (prefers-reduced-motion: reduce) {
  [data-frame]::before { animation: none; }
}

/* ── The moods ──────────────────────────────────────────────────────────────
   0  hero — the dark before the first frame
   1  The Salt Year — cold salt dawn over grey water
   2  Hollow Light — warm tungsten, a room lit by ear
   3  Northbound — night train, blue dark cut by sodium light
   4  As It Was — dim domestic sepia, dust in the air
   5  photo: the quiet hours — pale grey sea
   6  photo: silver / nitrate — high-key neutral, medium format
   7  photo: strangers — warm evening
   8  photo: fog cliff — bright pale haze
   9  photo: staircase — near-black shadow
   10 photo: café — amber low light                                             */
[data-frame="0"]  { --f-a:#12161b; --f-b:#050608; --f-x:50%; --f-y:12%; --f-ang:180deg; --f-shaft:rgba(216,178,124,0.05); }
[data-frame="1"]  { --f-a:#233741; --f-b:#070c10; --f-x:28%; --f-y:26%; --f-ang:158deg; --f-shaft:rgba(180,205,214,0.12); }
[data-frame="2"]  { --f-a:#41301c; --f-b:#0b0704; --f-x:66%; --f-y:30%; --f-ang:145deg; --f-shaft:rgba(216,178,124,0.20); }
[data-frame="3"]  { --f-a:#182640; --f-b:#04060d; --f-x:78%; --f-y:60%; --f-ang:172deg; --f-shaft:rgba(230,150,70,0.16); }
[data-frame="4"]  { --f-a:#2c2d22; --f-b:#0a0a07; --f-x:38%; --f-y:34%; --f-ang:150deg; --f-shaft:rgba(200,178,124,0.10); }
[data-frame="5"]  { --f-a:#2f393f; --f-b:#0c1114; --f-x:44%; --f-y:22%; --f-ang:165deg; --f-shaft:rgba(190,205,210,0.10); }
[data-frame="6"]  { --f-a:#464a4e; --f-b:#101315; --f-x:30%; --f-y:24%; --f-ang:135deg; --f-shaft:rgba(230,232,235,0.10); }
[data-frame="7"]  { --f-a:#402a1b; --f-b:#0c0705; --f-x:60%; --f-y:40%; --f-ang:150deg; --f-shaft:rgba(230,170,110,0.14); }
[data-frame="8"]  { --f-a:#6a736f; --f-b:#242b28; --f-x:50%; --f-y:30%; --f-ang:168deg; --f-shaft:rgba(230,235,232,0.14); }
[data-frame="9"]  { --f-a:#1d1c1a; --f-b:#030303; --f-x:34%; --f-y:20%; --f-ang:176deg; --f-shaft:rgba(200,190,175,0.07); }
[data-frame="10"] { --f-a:#432f1e; --f-b:#0d0806; --f-x:56%; --f-y:46%; --f-ang:140deg; --f-shaft:rgba(235,175,105,0.16); }