/* ==========================================================================
   CRT-FILTER — se assets/js/vhs.js. Hvert filterlag (.crt) ligger i menuen og i hver visning,
   over baggrund og tekst men under eksponaterne. Reglerne nederst løfter eksponaterne op over laget.
   Der er ingen hurtige lysskift: kun et blegt bånd, der glider langsomt ned over skærmen.
   ========================================================================== */

.crt{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
html.vhs .crt{opacity:1;visibility:visible;transition:opacity .35s}
.crt > *{position:absolute;inset:0;display:block}

/* Skærmlinjer og en fin RGB-pixelstruktur (almindelig blanding, ikke "multiply": siden er så mørk, at multiply ikke kan ses) */
.c-linjer{
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,rgba(0,0,0,.30) 2px,rgba(0,0,0,.30) 3px),
    repeating-linear-gradient(to right,rgba(255,0,0,.035) 0,rgba(255,0,0,.035) 1px,rgba(0,255,0,.03) 1px,rgba(0,255,0,.03) 2px,rgba(0,80,255,.04) 2px,rgba(0,80,255,.04) 3px)}

/* Mørke hjørner, som når skærmen buler */
.c-kant{background:radial-gradient(ellipse 120% 105% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%)}

/* Et svagt, langsomt bånd glider ned over skærmen (billedopdateringen) */
.c-bind{bottom:auto;top:-18%;height:16%;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.045) 50%,rgba(255,255,255,0));
  animation:crt-bind 7s linear infinite}
@keyframes crt-bind{0%{transform:translateY(0)}100%{transform:translateY(820%)}}

/* "AV 1" i hjørnet, grøn som på et gammelt tv. Står stille. */
.c-osd{inset:auto;left:18px;top:10px;font:500 14px/1 var(--mono,monospace);letter-spacing:.2em;color:#7DFF9B;text-shadow:0 0 6px rgba(125,255,155,.55);opacity:.8}

/* Menuen: laget ligger over menuens tekster */
#top > .crt{z-index:5}

/* ---------- Eksponaterne løftes OVER filterlaget (kun mens filteret er tændt) ---------- */
/* Åbn: teksterne (z 5) ligger under laget, pakken, boblefolien og pladserne over det. Rækkefølgen dem imellem er som før. */
html.vhs #v-aabn > .crt{z-index:8}
html.vhs #vstage{z-index:12}
html.vhs #bord canvas.f3d{z-index:14}
html.vhs #slots,html.vhs #p-bund{z-index:16}
/* Samling: kortene. Opslagstavlen: polaroiderne har allerede egne lagværdier fra 1 og opad. */
html.vhs #grid .kort{z-index:1}
/* Projekter og events: kortene med billeder */
html.vhs .pk{position:relative;z-index:1}

/* Knappen i menuen */
#b-vhs,#b-lyd{height:44px;padding:0 14px;gap:8px;white-space:nowrap;font-family:var(--mono);letter-spacing:.14em}
#b-vhs::before,#b-lyd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--daempet);transition:background .2s,box-shadow .2s}
#b-vhs[aria-pressed="true"],#b-lyd[aria-pressed="true"]{border-color:rgba(246,203,69,.6);background:rgba(246,203,69,.09)}
#b-vhs[aria-pressed="true"]::before,#b-lyd[aria-pressed="true"]::before{background:var(--sol);box-shadow:0 0 8px var(--sol)}

/* Topbjælken har to knapper (Lyd, CRT) foruden Book, så den bliver kompakt tidligere end ellers.
   Trinene er målt: fuld bredde fra ca. 1513 px, uden "min hjerne" fra 1403, kompakte faner fra 1181, mindst herunder. */
@media (min-width:1181px) and (max-width:1512px){ .hr .btn .lang{display:none} }
@media (min-width:1181px) and (max-width:1402px){
  #top{gap:14px}
  #tabs button{padding:10px 10px 6px;letter-spacing:.1em}
  #tabs small{display:none}
}
@media (min-width:821px) and (max-width:900px){ #top .maerke span{display:none} }
@media (min-width:821px) and (max-width:1146px){
  #top{gap:10px;padding-inline:clamp(16px,3vw,32px)}
  #tabs{gap:2px}
  #tabs button{padding:10px 7px 6px;font-size:12px;letter-spacing:.06em}
  .hr{gap:6px}
  #b-vhs,#b-lyd{padding:0 8px;gap:6px;height:40px;font-size:10.5px;letter-spacing:.08em}
}

@media (max-width:520px){ #top .maerke span{display:none} }   /* plads til Lyd, CRT og Book ved siden af logoet */

@media (max-width:820px){
  #b-vhs,#b-lyd{padding:0 10px;height:38px;font-size:11px}
  .c-osd{left:12px;top:6px;font-size:11px}
}

/* Hvis man har bedt om mindre bevægelse: samme look, men helt stille */
@media (prefers-reduced-motion:reduce){
  .c-bind{animation:none!important;display:none}
}