/* ═══ NOA FILM — kinopremieer ═══════════════════════════════════════════
   Iseseisev tükk: ainult .nf-* klassid. Tokenid tulevad .nv2 juurest
   (--kuld, --kuld2, --kiri, --kiri2, --joon). Ära kirjuta .nf-* mujale.

   Kolm otsust, mis teevad kinost kino:
   1. Ekraan on ainus valgus. Sektsioon on sügavmust, mitte --taust;
      kui film käib, tõmbub KOGU leht pimedaks (body.nf-kino).
   2. Kuld ainult seal, kus käsi on: play-nupp, edenemisriba, peatükid.
      Kõik muu on hall ja tume, et kuld loeks.
   3. Filmitera ja vinjett ekraani PEAL, mitte lehe peal — see on
      projektsioon, mitte tapeet. */

.nf{position:relative;padding:clamp(72px,10vw,140px) 0 clamp(64px,8vw,110px);
  background:#050506;color:var(--kiri2);overflow:clip;isolation:isolate}
.nf-taust{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 38%,rgba(200,160,74,.10),transparent 70%),
    radial-gradient(80% 60% at 50% 100%,rgba(0,0,0,.6),transparent 60%)}

.nf-pea{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.nf-tiitel{font-size:clamp(44px,7.2vw,104px);line-height:.95;letter-spacing:-.02em;margin:10px 0 18px}
.nf-alltekst{max-width:640px;margin:0 auto;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:var(--kiri2)}

/* ── Ekraan ── */
.nf-kino{margin:0;position:relative}
/* .nf-ekraan = raam (serv, vari, juhtriba ankur). .nf-lava = 21:9 lava,
   kus on video, tera, vinjett ja play. Juhtriba on lava VÄLJAS, et ta
   telefonis play-nuppu ei kataks. */
.nf-lava{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:inherit;background:#000}
.nf-ekraan{position:relative;background:#000;border-radius:6px;
  box-shadow:0 0 0 1px rgba(232,207,122,.18),0 60px 120px -50px rgba(0,0,0,.95),
             0 0 140px -40px rgba(200,160,74,.25);
  transition:box-shadow .5s ease}
.nf-kino.mangib .nf-ekraan{box-shadow:0 0 0 1px rgba(232,207,122,.35),0 80px 160px -50px rgba(0,0,0,1),
             0 0 220px -30px rgba(200,160,74,.38)}
.nf-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.nf-tera{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.28;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.nf-vinjett{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.nf-kino.mangib .nf-tera{opacity:.16}

/* ── Suur play ── */
.nf-play{position:absolute;inset:0;margin:auto;width:min(140px,22vw);height:min(140px,22vw);
  border:0;border-radius:50%;cursor:pointer;color:#12100a;
  background:linear-gradient(135deg,var(--kuld2),var(--kuld));
  display:grid;place-items:center;
  box-shadow:0 20px 60px -20px rgba(200,160,74,.8),0 0 0 0 rgba(232,207,122,.35);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .3s}
.nf-play svg{width:38%;height:38%;transform:translateX(6%)}
.nf-play-ring{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(232,207,122,.35);
  animation:nf-pulss 2.6s ease-out infinite}
@keyframes nf-pulss{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.nf-play-silt{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kuld2)}
.nf-play:hover{transform:scale(1.06)}
.nf-play:focus-visible{outline:2px solid var(--kuld2);outline-offset:6px}
.nf-kino.alustatud .nf-play{opacity:0;pointer-events:none;transform:scale(.9)}
.nf-kino.paus.alustatud .nf-play{opacity:1;pointer-events:auto;transform:scale(1)}
.nf-kino.paus.alustatud .nf-play-ring,.nf-kino.paus.alustatud .nf-play-silt{display:none}

/* ── Juhtnupud ── */
/* pointer-events:none, kui riba on peidus. Nähtamatu riba (opacity 0)
   kattis play-nupu alumise poole ja sõi kliki ära — elementFromPoint
   andis nupu keskel „nf-juht". Nähtamatu asi ei tohi klikke püüda. */
.nf-juht{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:26px 18px 14px;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.nf-kino.alustatud:hover .nf-juht,.nf-kino.alustatud:focus-within .nf-juht,
.nf-kino.paus.alustatud .nf-juht,.nf-kino.juht-nahtav .nf-juht{opacity:1;transform:none;pointer-events:auto}
.nf-nupp{flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--kiri);display:grid;place-items:center;
  transition:background .15s}
.nf-nupp:hover{background:rgba(232,207,122,.22)}
.nf-nupp svg{width:16px;height:16px}
.nf-ik-paus,.nf-ik-vaikne{display:none}
.nf-kino.mangib .nf-ik-play{display:none}.nf-kino.mangib .nf-ik-paus{display:block}
.nf-kino.vaikne .nf-ik-heli{display:none}.nf-kino.vaikne .nf-ik-vaikne{display:block}
.nf-aeg{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--kiri2);flex:none;min-width:38px}
.nf-aeg--kokku{text-align:right}

.nf-riba{position:relative;flex:1;height:26px;cursor:pointer;outline:0}
.nf-riba:focus-visible .nf-riba-taust{box-shadow:0 0 0 2px rgba(232,207,122,.5)}
.nf-riba-taust,.nf-riba-puhver,.nf-riba-taide{position:absolute;left:0;top:50%;height:3px;
  transform:translateY(-50%);border-radius:99px}
.nf-riba-taust{right:0;background:rgba(255,255,255,.16)}
.nf-riba-puhver{width:0;background:rgba(255,255,255,.28)}
.nf-riba-taide{width:0;background:linear-gradient(90deg,var(--kuld),var(--kuld2))}
.nf-riba:hover .nf-riba-taust,.nf-riba:hover .nf-riba-taide,.nf-riba:hover .nf-riba-puhver{height:5px}
.nf-peatykk{position:absolute;top:50%;width:14px;height:14px;margin-left:-7px;transform:translateY(-50%);
  border:0;padding:0;background:transparent;cursor:pointer}
.nf-peatykk::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#050506;
  box-shadow:0 0 0 1.5px var(--kuld2)}
.nf-peatykk span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kuld2);background:rgba(5,5,6,.9);padding:4px 8px;border-radius:4px;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.nf-peatykk:hover span,.nf-peatykk:focus-visible span{opacity:1;transform:translate(-50%,0)}

.nf-alune{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding-top:16px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(174,185,207,.6)}
.nf-peatykk-nimi{color:var(--kuld2);transition:opacity .3s}

/* Kui film käib: kogu leht pimedaks. Ekraan on ainus valgus. */
body.nf-kino{background:#000}
body.nf-kino .nv2>*:not(.nf){opacity:.18;transition:opacity .6s ease}
body.nf-kino .nf{opacity:1}
body.nf-kino .nf-taust{background:none}

/* ── Kaadrid + prompt ── */
.nf-kaadrid{margin-top:clamp(56px,7vw,96px)}
.nf-kaadrid-pea{max-width:720px;margin-bottom:28px}
.nf-h3{font-family:inherit;font-size:clamp(24px,3vw,38px);line-height:1.15;letter-spacing:-.01em;margin:8px 0 12px;color:var(--kiri)}
.nf-ruut{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.nf-kaart{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  overflow:hidden;background:#0b0b0d;transition:border-color .2s,transform .2s}
.nf-kaart:hover{border-color:rgba(232,207,122,.4);transform:translateY(-2px)}
.nf-kaart-ekraan{position:relative;aspect-ratio:21/9;background:#000}
.nf-kaart-ekraan video{display:block;width:100%;height:100%;object-fit:cover}
.nf-kaart-kestus,.nf-kaart-heli{position:absolute;bottom:8px;font-family:ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:4px;
  background:rgba(0,0,0,.6);color:var(--kiri)}
.nf-kaart-kestus{right:8px}
.nf-kaart-heli{left:8px;color:var(--kuld2)}
.nf-kaart--heli .nf-kaart-ekraan::after{content:"";position:absolute;inset:0;margin:auto;width:44px;height:44px;
  border-radius:50%;background:rgba(200,160,74,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312100a'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/50% no-repeat;
  pointer-events:none;transition:opacity .2s}
.nf-kaart--heli.mangib .nf-kaart-ekraan::after{opacity:0}
.nf-kaart-sisu{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.nf-kaart-tiitel{margin:0;font-size:17px;color:var(--kiri);font-weight:600}
.nf-kaart-kirjeldus{margin:0;font-size:13.5px;line-height:1.5;color:var(--kiri2)}
.nf-kaart-meta{margin:2px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(174,185,207,.55)}
.nf-prompt{margin-top:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.nf-prompt summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--kuld2);letter-spacing:.04em;
  display:flex;align-items:center;gap:8px}
.nf-prompt summary::-webkit-details-marker{display:none}
.nf-prompt summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s}
.nf-prompt[open] summary::before{transform:rotate(45deg)}
.nf-prompt pre{margin:10px 0 0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px;line-height:1.55;color:rgba(242,233,214,.8);background:rgba(255,255,255,.04);
  border-left:2px solid var(--kuld);padding:10px 12px;border-radius:0 6px 6px 0;max-height:260px;overflow:auto}

/* ── Väiksed ekraanid ── */
@media (max-width:760px){
  /* Telefonis on ekraan ~150 px kõrge: overlay-riba ja suur play-nupp
     kattuksid. Riba läheb ekraani ALLA (tavaline voog), play väiksemaks.
     Ekraan ise kaotab aspect-ratio (muidu ei mahu riba sisse); video ja
     overlay'd hoiavad 21:9 ise. */
  .nf-ekraan{border-radius:4px}
  .nf-play{width:64px;height:64px}
  .nf-play-ring{inset:-8px}
  .nf-juht{position:relative;left:auto;right:auto;bottom:auto;gap:6px;padding:10px 0 0;
    background:none;opacity:0;transform:none;pointer-events:none}
  .nf-kino.alustatud .nf-juht{opacity:1;pointer-events:auto}
  /* Kitsal ekraanil võtsid kolm 38 px nuppu + aeg riba alla 35 px-ni ja
     peatükitäpid kuhjusid. Nupud 32 px, aeg kitsam, riba saab ruumi. */
  .nf-nupp{width:32px;height:32px}
  .nf-nupp svg{width:14px;height:14px}
  .nf-aeg{min-width:0;font-size:11px}
  .nf-riba{min-width:90px}
  .nf-aeg--kokku{display:none}
  .nf-peatykk span{display:none}
  .nf-play-silt{display:none}
  .nf-alune{flex-direction:column;gap:6px;align-items:flex-start}
  .nf-ruut{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .nf-play-ring{animation:none}
  .nf-play,.nf-kaart,.nf-juht,.nf-ekraan{transition:none}
}