/* Festival-S — scena na naslovnici: od prazne bine u podne do žurke u ponoć, vođena scrollom.
   Film pokreće scrollcraft (public/assets/vendor/scrollcraft.js, neizmijenjen). Ovdje su samo
   pravila za njegove .sc-* klase, BEZ globalnog reseta iz scrollcraft.css — temelj je fs.css. */

.scena {
  --sc-z-stage: 1; --sc-z-copy: 20;
  --sc-ease-out: cubic-bezier(.23, 1, .32, 1);
  position: relative; background: var(--noc);
}
.scena .sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; overflow: clip;
  z-index: var(--sc-z-stage);
}

/* kamera: film + okvir koji ga drži dok se prvi pravi kadar ne iscrta */
.scena-kamera { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: 50% 42%; will-change: transform; }
/* Bez inset/:is() — preglednik na TV-u (stari Chromium) ih ne zna, pa je kadar ostao bez veličine (17.10.2026.). */
.scena .sc-stage video[data-sc-scrub], .scena .sc-stage .sc-stage__poster {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.scena video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.scena.sc-has-clip video[data-sc-scrub] { opacity: 1; }
.scena .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.scena.sc-has-clip .sc-stage__poster { opacity: 0; }

/* Bez pokreta film se ne učitava: pet kadrova se pretapa na istim mjestima. */
.scena-kadrovi { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scena-kadrovi { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
  .scena-kadrovi picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
  .scena-kadrovi img { width: 100%; height: 100%; object-fit: cover; }
  .scena-kamera { transform: none !important; }
}
/* TV (scena.js dodaje .scena--slike): isti kadrovi umjesto filma; scrollcraft ih tu pomiče za par vh, pa bez toga. */
.scena--slike .scena-kadrovi { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.scena--slike .scena-kadrovi picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; transform: none !important; }
.scena--slike .scena-kadrovi img { width: 100%; height: 100%; object-fit: cover; }

.scena [data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready .scena [data-sc-cue] { transition: none; }

/* zastor samo gdje stoji tekst: dno (tekst) i tanko gore (sat ispod zaglavlja) */
.scena-zastor {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 11, 34, .5) 0%, rgba(7, 11, 34, 0) 20%),
    linear-gradient(0deg, var(--noc) 0%, rgba(7, 11, 34, .82) 14%, rgba(7, 11, 34, .45) 32%, rgba(7, 11, 34, 0) 52%);
}

/* ---------- tekst po fazama ---------- */
.scena-tekst {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--rub); right: var(--rub); bottom: calc(92px + env(safe-area-inset-bottom));
  text-shadow: 0 2px 16px rgba(7, 11, 34, .55);
}
/* Podloga samo iza teksta i samo dok je tekst na ekranu (dio je bloka, pa blijedi s njim).
   Podne je svijetli beton, a drop bijeli dim — zastor preko cijelog kadra bi ugasio sliku. */
.scena-tekst::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -55%; right: -22%; bottom: -40%; left: -30%;
  background: radial-gradient(closest-side, rgba(7, 11, 34, .88) 0%, rgba(7, 11, 34, .74) 50%, rgba(7, 11, 34, 0) 100%);
}
.scena-tekst .poruka-brenda { color: var(--tekst); }
.scena-kraj::before { top: -45%; right: -30%; bottom: -35%; left: -30%; background: radial-gradient(closest-side, rgba(7, 11, 34, .93) 0%, rgba(7, 11, 34, .88) 62%, rgba(7, 11, 34, 0) 100%); }
.scena-tekst .h1 { margin: 16px 0 14px; max-width: 15ch; font-size: clamp(34px, 8.6vw, 68px); text-wrap: balance; }
.scena-tekst h2 {
  font-family: var(--f-d); font-weight: 700; font-size: clamp(28px, 7vw, 56px);
  line-height: 1.04; letter-spacing: -.025em; margin: 0 0 12px; max-width: 14ch; text-wrap: balance;
}
.scena-tekst p { margin: 0 0 16px; color: var(--tekst); font-size: clamp(15.5px, 2.1vw, 18px); line-height: 1.55; max-width: 44ch; }
.scena-tekst .poveznica { text-shadow: none; }
.scena-kraj { text-align: center; }
.scena-kraj h2 { font-size: clamp(40px, 11vw, 92px); max-width: none; margin: 0 auto 22px; }
.scena-kraj .gumbi { justify-content: center; }
@media (min-width: 1080px) {
  .scena-tekst { right: auto; max-width: min(820px, 62vw); bottom: 9vh; }
  .scena-tekst--desno { left: auto; right: calc(var(--rub) + 40px); bottom: calc(9vh + 64px); text-align: right; }
  .scena-tekst--desno h2, .scena-tekst--desno p { margin-left: auto; }
  .scena-kraj { left: 0; right: 0; margin: 0 auto; max-width: 1100px; width: 90vw; bottom: 5vh; }
}

/* ---------- satnica: sat večeri teče sa scrollom, faze su skokovi ---------- */
.satnica {
  position: absolute; z-index: 21;
  left: var(--rub); right: var(--rub); top: calc(var(--zaglavlje) + 14px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 12px;
  text-shadow: 0 2px 14px rgba(7, 11, 34, .5);
}
.satnica::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; top: -40%; right: -12%; bottom: -50%; left: -12%;
  background: radial-gradient(closest-side, rgba(7, 11, 34, .6) 0%, rgba(7, 11, 34, .38) 55%, rgba(7, 11, 34, 0) 100%);
}
.satnica-sat { font: 700 26px/1 var(--f-d); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.satnica-faza { font: 700 10.5px/1.2 var(--f-d); letter-spacing: .22em; text-transform: uppercase; color: var(--tekst); }
.satnica-preskoci { font-size: 12.5px; font-weight: 700; color: var(--tekst-2); text-decoration: underline; text-underline-offset: 3px; text-shadow: none; }
.satnica ol { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 4px; }
.satnica li { flex: 1; }
.satnica button {
  position: relative; width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: inherit;
}
.satnica button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.satnica button::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: rgba(242, 244, 255, .28); transition: background .3s;
}
.satnica button.prosla::after { background: rgba(242, 244, 255, .7); }
.satnica button[aria-current="step"]::after { background: var(--g-brend); }
@media (min-width: 1080px) {
  .satnica {
    left: auto; right: var(--rub); top: calc(var(--zaglavlje) + 28px);
    grid-template-columns: auto; justify-items: end; text-align: right; gap: 8px;
  }
  .satnica-sat { font-size: clamp(40px, 3.6vw, 54px); }
  .satnica ol { flex-direction: column; gap: 0; margin-top: 10px; }
  .satnica button {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 30px;
    color: rgba(242, 244, 255, .74); font: 600 13px/1 var(--f-t);
  }
  .satnica button span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .satnica button b { font-weight: 800; font-variant-numeric: tabular-nums; }
  .satnica button::after { position: static; flex: none; width: 18px; margin: 0; transition: width .3s, background .3s; }
  .satnica button:hover { color: #fff; }
  .satnica button.prosla { color: rgba(242, 244, 255, .88); }
  .satnica button[aria-current="step"] { color: #fff; }
  .satnica button[aria-current="step"]::after { width: 36px; }
  .satnica-preskoci { margin-top: 6px; }
}

/* ---------- potpis: drop je tvoj ---------- */
.scena-konfete { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.scena-bljesak {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(55% 40% at 50% 44%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
}
.scena-bljesak.pali { animation: scena-bljesak .55s ease-out; }
@keyframes scena-bljesak { from { opacity: 1; } to { opacity: 0; } }
.scena--drop .sc-stage { cursor: pointer; }
.scena-drop {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 auto 18px; padding: 0 20px 0 12px;
  border: 1px solid rgba(242, 244, 255, .55); border-radius: 999px; background: rgba(7, 11, 34, .6); color: #fff;
  font: 700 12px/1 var(--f-d); letter-spacing: .22em; text-transform: uppercase; text-shadow: none;
}
.scena-drop:hover { border-color: #fff; background: rgba(7, 11, 34, .8); }
.scena-drop i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--g-gumb); }
.scena-drop i::after {
  content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%; border: 2px solid var(--magenta);
  animation: scena-val 1.6s ease-out infinite;
}
@keyframes scena-val { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scena-drop, .scena-konfete, .scena-bljesak { display: none; } .scena--drop .sc-stage { cursor: auto; } }