/* La soglia */

.soglia { display: none; }
[data-soglia] .soglia:focus { outline: none; }
[data-soglia] .soglia {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--pietra-fonda);
  overflow: hidden;
}
[data-soglia] body { overflow: hidden; }

/* la scena: corteo dietro, colonnato davanti */

.soglia__scena {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  bottom: 17%;
  overflow: hidden;
}

.corteo {
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  height: 59%;
  overflow: hidden;
}
.corteo__pista {
  display: flex;
  gap: 3.2rem;
  height: 100%;
  align-items: center;
  padding-left: 10vw;
  will-change: transform;
}
.corteo__opera { flex: none; height: 100%; }
.corteo__opera img {
  height: 100%;
  width: auto;
  display: block;
}

.soglia__traforo {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
}

.soglia__traforo .traforo {
  height: 100%;
  width: auto;
  aspect-ratio: 1164 / 252;
  max-width: none;
  flex: none;
  display: block;
}
.traforo__muro,
.traforo__piano { fill: var(--pietra-fonda); }

.soglia__traforo .colonna__fusto { fill: url(#lsdcFusto); }
.soglia__traforo .colonna__abaco,
.soglia__traforo .colonna__base { fill: var(--pietra-alta); }
.soglia__traforo .campata__capitello { fill: var(--verde); }
.traforo__muro { fill: url(#lsdcMuro); }

.soglia__velo {
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(to bottom,
    var(--pietra-fonda) 0%,
    color-mix(in srgb, var(--pietra-fonda) 42%, transparent) 13%,
    transparent 30%,
    transparent 74%,
    color-mix(in srgb, var(--pietra-fonda) 55%, transparent) 90%,
    var(--pietra-fonda) 100%);
}

/* il corpo */
.soglia__corpo {
  position: relative;
  z-index: 2;
  padding-top: clamp(var(--sp-3), 5vh, var(--sp-5));
}
.soglia__piede {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-bottom: clamp(var(--sp-3), 4vh, var(--sp-5));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}
.soglia__marchio {
  margin: 0 0 var(--sp-2);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.soglia__tesi {
  margin: 0 0 var(--sp-4);
  max-width: 34rem;
  color: var(--marmo-velo);
  font-size: var(--t-piccolo);
}
.soglia__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }

.soglia__entra {
  padding: 0.9rem 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--conta);
  font-size: var(--t-legenda);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde);
  transition: color var(--moto-breve);
}
.soglia__entra:hover { color: var(--marmo); }
.soglia__entra::after {
  content: "\00a0\2192";
  letter-spacing: 0;
}

/* l'entrata */
[data-soglia] .corteo__pista { animation: lsdc-corteo 4600ms cubic-bezier(0.12, 0.72, 0.2, 1) both; }
[data-soglia] .soglia__traforo { animation: lsdc-affiora 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
[data-soglia] .soglia__marchio { animation: lsdc-sale 1000ms 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
[data-soglia] .soglia__tesi    { animation: lsdc-sale 1000ms 1250ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
[data-soglia] .soglia__azioni  { animation: lsdc-sale 1000ms 1550ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
[data-soglia] .soglia__entra   { animation: lsdc-sale 1000ms 2100ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes lsdc-corteo {
  from { transform: translateX(6%); }
  to   { transform: translateX(-46%); }
}
@keyframes lsdc-affiora {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}
@keyframes lsdc-sale {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.soglia--esce { animation: lsdc-apre 620ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes lsdc-apre {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(1.04); }
}

@media (max-width: 46rem) {
  .corteo { top: 12%; height: 52%; }
  .corteo__pista { gap: 1.6rem; padding-left: 8vw; }
  .soglia__scena { top: 22%; bottom: 26%; }
  .soglia__piede { flex-direction: column; align-items: stretch; }
  .soglia__azioni { flex-direction: column; align-items: stretch; }
  .soglia__entra { align-self: center; }
  .soglia__azioni .gesto { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  [data-soglia] .corteo__pista,
  [data-soglia] .soglia__traforo,
  [data-soglia] .soglia__marchio,
  [data-soglia] .soglia__tesi,
  [data-soglia] .soglia__azioni,
  [data-soglia] .soglia__entra,
  .soglia--esce { animation: none; opacity: 1; transform: none; }
}