/* tvede.me — spotlyset. Indlæses af mu-plugins/tvede-effekter.php sammen med tvede.js.
   Ligger uden for Breakdance, fordi selectors ikke kan bære @property, masker med mask-composite og prefers-reduced-motion.
   Lagene .tv-lag-bund og .tv-lag-skarp bygges af tvede.js; uden JS vises Breakdances almindelige billede. */
@property --tv-r1 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --tv-r2 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --tv-r3 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --tv-alle { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --tv-moerk { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --tv-sloer { syntax: "<length>"; inherits: true; initial-value: 0px; }

.tv-lys.tv-klar { --tv-fy: 10%; --tv-ry: .78;
  transition: --tv-r1 1.1s cubic-bezier(.4, 0, .2, 1), --tv-r2 1.1s cubic-bezier(.4, 0, .2, 1), --tv-r3 1.1s cubic-bezier(.4, 0, .2, 1),
    --tv-alle 1s ease, --tv-moerk 1s ease, --tv-sloer 1s ease; }
.tv-lys.tv-klar .tv-foto { opacity: 0; }
.tv-lag { position: absolute; inset: 0; pointer-events: none; }
.tv-lag picture, .tv-lag img { display: block; width: 100%; height: 100%; }
.tv-lag img { object-fit: contain; object-position: bottom center;
  --tv-spot1: radial-gradient(ellipse var(--tv-r1) calc(var(--tv-r1) * var(--tv-ry)) at 19% var(--tv-fy), #000 45%, transparent 100%);
  --tv-spot2: radial-gradient(ellipse var(--tv-r2) calc(var(--tv-r2) * var(--tv-ry)) at 50% calc(var(--tv-fy) + 1%), #000 45%, transparent 100%);
  --tv-spot3: radial-gradient(ellipse var(--tv-r3) calc(var(--tv-r3) * var(--tv-ry)) at 78% var(--tv-fy), #000 45%, transparent 100%); }
/* det mørke, slørede billede – skåret væk dér, hvor spotlyset rammer, så dets slørkant ikke ses bag ansigtet */
.tv-lag-bund img { filter: brightness(var(--tv-moerk)) saturate(calc(.4 + var(--tv-moerk) * .6)) blur(var(--tv-sloer));
  --tv-hul: linear-gradient(#000, #000), var(--tv-spot1), var(--tv-spot2), var(--tv-spot3);
  -webkit-mask-image: var(--tv-hul); mask-image: var(--tv-hul);
  -webkit-mask-composite: source-out, source-over, source-over, source-over; mask-composite: subtract, add, add, add; }
/* det skarpe billede – kun synligt i spotlyset (eller helt, når alle tre står i lys) */
.tv-lag-skarp img {
  --tv-maske: linear-gradient(rgba(0, 0, 0, var(--tv-alle)), rgba(0, 0, 0, var(--tv-alle))), var(--tv-spot1), var(--tv-spot2), var(--tv-spot3);
  -webkit-mask-image: var(--tv-maske); mask-image: var(--tv-maske); }
.tv-skilt { z-index: 3; }
/* Breakdance gemmer kun første navn i en skriftstak uden webfont – systemskrifternes stak sættes derfor her */
.tv-topbar .tv-navn-lille { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Roboto Mono', monospace; }

@media (max-width: 1023px) {
  .tv-lys.tv-klar { --tv-fy: 24%; --tv-ry: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-lys.tv-klar, .tv-skilt, .tv-udsagn, .tv-boks { transition-duration: .01ms !important; }
  .tv-ord, .tv-under, .tv-boks, .tv-skilt-navn, .tv-mark::before { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}