/* Live webcam as the homepage hero background (bormio.it). Served as /refresh/cam.css and
   loaded by path/header_grande.php; /refresh/cam.js builds the markup inside .slider.

   Layers inside .slider, bottom to top:
     .vt-cam           the box; its own background is the static poster (also the fallback
                       while the stream loads, and when the camera is offline or the
                       visitor opted out of motion / data)
     .vt-cam iframe    the PandaCam player, scaled to cover (the player does not crop)
     .vt-cam::after    dark gradient so the booking card and header stay readable
   The old photo carousel is hidden only once the script has marked .slider.vt-cam-on. */
.slider.vt-cam-on { position: relative; overflow: hidden; background: #1c2630; }
.slider.vt-cam-on .flexslider { display: none; }

.vt-cam {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  background: #1c2630 url(hero/bormio-summer.jpg) center / cover no-repeat;
  pointer-events: none;
}
.vt-cam iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 cover: at least the box's width and height, whichever side needs more */
  width: 100%;
  height: 56.25vw;                       /* fallback without container units */
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
  opacity: 0;
  transition: opacity .6s ease;
  /* the stream is low resolution: a little contrast and colour reads as sharper */
  filter: contrast(1.08) saturate(1.14) brightness(1.03);
  pointer-events: none;
}
.vt-cam.vt-cam-ready iframe { opacity: 1; }
/* camera offline: the iframe is hidden and the poster photo shows */
.vt-cam.vt-cam-down iframe { opacity: 0; }
.vt-cam::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* fine line texture: hides upscaling softness, reads as crisp detail */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px),
    /* vignette */
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(8, 12, 16, .35) 100%),
    /* darker top and bottom for the badge and the booking card */
    linear-gradient(to bottom, rgba(12, 18, 24, .30) 0%, rgba(12, 18, 24, .06) 30%, rgba(12, 18, 24, .40) 100%);
}
.vt-cam.vt-cam-down::after { background: linear-gradient(to bottom, rgba(12, 18, 24, .20), rgba(12, 18, 24, .35)); }

/* "Live, Piazza del Kuerc" badge with the local time */
.vt-cam-badge {
  position: absolute;
  z-index: 2;
  top: 68px;                             /* the fixed 52px header covers the hero's top */
  left: max(16px, calc((100% - var(--wide, min(1120px, 92vw))) / 2));
  display: none;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: rgba(14, 20, 26, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 500 13px/1 var(--ui, system-ui, sans-serif);
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}
.vt-cam-ready .vt-cam-badge { display: inline-flex; }
.vt-cam-down .vt-cam-badge { display: none; }
.vt-cam-badge b { font-weight: 700; letter-spacing: .08em; }
.vt-cam-badge time { font-variant-numeric: tabular-nums; opacity: .85; }
.vt-cam-badge i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, .7);
  animation: vt-cam-pulse 1.6s ease-out infinite;
}
@keyframes vt-cam-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
@media (max-width: 767px) { .vt-cam-badge { top: 62px; left: 12px; font-size: 12px; padding: 6px 11px 6px 9px; } }

/* booking card: ride lower over the photo so it hides less of the picture (desktop;
   phones already use a 22px overlap in bar.css) */
@media screen and (min-width: 768px) {
  .motore_ricerca_new.vt-searchcard { --vt-overlap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .vt-cam iframe { transition: none; } .vt-cam-badge i { animation: none; } }