/* La finestra che sbatte le palpebre */
:root {
  --notte: #0F1116;
  --velo: rgba(12, 14, 18, 0.58);
  --bianco: #F6F4EF;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--notte);
  color: var(--bianco);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  overflow: hidden;
}
.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.scena {
  position: relative;
  height: var(--alto);
  overflow: hidden;
}
.sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.strato {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.nota {
  position: absolute;
  z-index: 2;
  top: var(--margine);
  left: var(--margine);
  max-width: 34ch;
  margin: 0;
  padding: 0.7em 0.95em;
  border-radius: 12px;
  background: var(--velo);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 500;
  line-height: 1.38;
}

/* ---- la finestra ---- */
.finestra {
  position: absolute;
  z-index: 1;
  top: 54%;
  left: 50%;
  width: min(48vw, 660px);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
  /* quanto è aperta la palpebra: 1 aperta, 0 chiusa (la muove lo script) */
  --palpebra: 1;
}
.finestra:focus-visible {
  outline: 2px solid var(--bianco);
  outline-offset: 18px;
}
/* l'apertura è un’ellisse larga: chiudendosi diventa una mandorla e poi una riga */
.finestra__occhio {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--notte);
  clip-path: ellipse(80% calc(var(--palpebra) * 82%) at 50% 50%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.finestra__vista {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(calc(0.93 + var(--palpebra) * 0.07));
}
.finestra__fessura {
  position: absolute;
  top: 50%;
  left: 3%;
  right: 3%;
  height: 1px;
  background: var(--bianco);
  opacity: calc(1 - var(--palpebra));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
/* gli angoli del mirino: quattro squadre di luce fuori dalla finestra */
.finestra__angoli {
  --l: 20px;
  --s: 1.5px;
  --c: rgba(246, 244, 239, 0.95);
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--s) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--s) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--s) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--s) var(--l) no-repeat;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
  transition: inset 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .finestra:hover .finestra__angoli {
    inset: -18px;
  }
}
.finestra:active .finestra__angoli {
  inset: -8px;
  transition-duration: 120ms;
}
.finestra__didascalia {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  display: flex;
  gap: 0.9em;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  background: var(--velo);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}
.finestra__luogo {
  color: rgba(246, 244, 239, 0.66);
  font-weight: 500;
}

@media (max-width: 640px) {
  .finestra {
    top: 52%;
    width: 86vw;
  }
}