.filtri { position: absolute; width: 0; height: 0; overflow: hidden; }

.grana {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.nebbia { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nebbia i { position: absolute; background-repeat: repeat; mix-blend-mode: screen; will-change: transform; }

.nebbia i:nth-child(1) {
  top: -80px; bottom: -80px; left: -80px; right: -1180px;
  background-image: url("/assets/img/nebbia-1.webp"); background-size: 1100px 1100px; opacity: .30;
  animation: nebbia-1 78s linear infinite;
}

.nebbia i:nth-child(2) {
  top: -80px; bottom: -840px; left: -840px; right: -80px;
  background-image: url("/assets/img/nebbia-2.webp"); background-size: 760px 760px; opacity: .26;
  animation: nebbia-2 51s linear infinite;
}

.nebbia i:nth-child(3) {
  top: -600px; bottom: -80px; left: -80px; right: -600px;
  background-image: url("/assets/img/nebbia-3.webp"); background-size: 520px 520px; opacity: .17;
  animation: nebbia-3 34s linear infinite;
}

@keyframes nebbia-1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-1100px, 0, 0); } }
@keyframes nebbia-2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(760px, -760px, 0); } }
@keyframes nebbia-3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-520px, 520px, 0); } }

.velo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--atmosfera) 55%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.6) 100%);
}

.polvere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.polvere i {
  position: absolute; left: var(--x); bottom: -12px;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(232,222,200,.85);
  box-shadow: 0 0 5px rgba(232,222,200,.5);
  animation: polvere-sale var(--t) linear var(--d) infinite;
}
@keyframes polvere-sale {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .55; }
  100% { transform: translate3d(38px, -78dvh, 0) scale(1.25); opacity: 0; }
}

@media (max-width: 640px) { .polvere i:nth-child(n+5) { display: none; } }

.rag {
  position: absolute; top: -1px; left: -1px; z-index: 1;
  width: min(58%, 340px); aspect-ratio: 1;
  pointer-events: none; mix-blend-mode: screen;
  opacity: .95;
  background-image: url("/assets/img/ragnatela-angolo.webp");
  background-size: 100% 100%; background-repeat: no-repeat;
  clip-path: circle(155% at 23% 20%);
  animation:
    rag-tela 2.6s cubic-bezier(.19,1,.32,1) .35s both,
    rag-alito 13s ease-in-out 3s infinite;
}
@keyframes rag-tela {
  from { clip-path: circle(0% at 23% 20%); }
  to   { clip-path: circle(155% at 23% 20%); }
}
@keyframes rag-alito {
  0%, 100% { transform: perspective(900px) rotateY(0deg)    rotateX(0deg)    scale(1); }
  28%      { transform: perspective(900px) rotateY(2.1deg)  rotateX(-1.1deg) scale(1.012); }
  53%      { transform: perspective(900px) rotateY(-1.4deg) rotateX(.8deg)   scale(.994); }
  76%      { transform: perspective(900px) rotateY(1.5deg)  rotateX(1.3deg)  scale(1.008); }
}

.lucido { position: relative; display: block; isolation: isolate; }
.lucido > img { display: block; width: 100%; height: auto; }
.lucido__brillo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0)    30%,
    rgba(255,240,214,.22)  39%,
    rgba(255,255,255,.85)  47%,
    rgba(255,255,255,1)    50%,
    rgba(255,255,255,.85)  53%,
    rgba(255,240,214,.22)  61%,
    rgba(255,255,255,0)    70%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
}

.lucido--acceso .lucido__brillo {
  background-image: linear-gradient(100deg,
    rgba(255,244,214,0)    38%,
    rgba(255,236,196,.14)  44%,
    rgba(255,248,228,.50)  49%,
    rgba(255,252,240,.62)  50%,
    rgba(255,248,228,.50)  51%,
    rgba(255,236,196,.14)  56%,
    rgba(255,244,214,0)    62%);
}
@supports ((-webkit-mask-image: url("/assets/img/logo-goth-asylum.webp")) or (mask-image: url("/assets/img/logo-goth-asylum.webp"))) {
  .lucido--acceso .lucido__brillo {
    -webkit-mask-image: var(--maschera-logo);
            mask-image: var(--maschera-logo);
    -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    opacity: 1;
    animation: logo-brillo 5.2s ease-in-out infinite;
  }
}

@media (min-width: 900px) {
  .testata .lucido > img, .lucido--acceso > img { animation: logo-alone 4.4s ease-in-out infinite; }
  @supports ((-webkit-mask-image: url("/assets/img/logo-goth-asylum.webp")) or (mask-image: url("/assets/img/logo-goth-asylum.webp"))) {
    .testata .lucido__brillo {
      -webkit-mask-image: var(--maschera-logo);
              mask-image: var(--maschera-logo);
      -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center;  mask-position: center;
      opacity: 1;
      animation: logo-brillo 4.4s ease-in-out infinite;
    }
  }
}
@keyframes logo-alone {
  0%, 34%   { filter: drop-shadow(0 0 0 rgba(var(--alone-rgb), 0)); }
  62%       { filter: drop-shadow(0 0 26px rgba(var(--alone-rgb), .42)); }
  88%, 100% { filter: drop-shadow(0 0 0 rgba(var(--alone-rgb), 0)); }
}
@keyframes logo-brillo {
  0%, 34%   { background-position: 152% 0; }
  88%, 100% { background-position: -52% 0; }
}

.riflesso { position: relative; overflow: hidden; }
.riflesso::after, .apertura__copertina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(104deg,
    rgba(255,255,255,0) 36%, rgba(255,255,255,.07) 44%, rgba(255,255,255,.26) 50%,
    rgba(255,255,255,.07) 56%, rgba(255,255,255,0) 64%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 150% 0;
  animation: copertina-lama 7.4s ease-in-out infinite;
}
@keyframes copertina-lama {
  0%, 52%   { background-position: 152% 0; }
  90%, 100% { background-position: -52% 0; }
}
@media (hover: hover) and (pointer: fine) {
  .riflesso, .apertura__copertina { transition: transform 260ms ease-out, box-shadow 260ms ease-out; }
  .riflesso:hover, .apertura__copertina:hover {
    transform: translateY(-4px);
    box-shadow: 0 42px 90px rgba(0,0,0,0.95), 0 0 60px rgba(var(--alone-rgb), .12);
  }
}

.candela {
  position: absolute; left: 50%; bottom: -14%; z-index: 2;
  width: min(88vw, 900px); height: min(70dvh, 620px);
  transform: translateX(-50%);
  pointer-events: none; filter: blur(12px);
  background: radial-gradient(50% 50% at 50% 62%,
    rgba(255,150,52,.22) 0%, rgba(228,110,26,.12) 34%, rgba(150,68,14,.05) 58%, transparent 76%);
  animation: candela-fiamma 6.2s ease-in-out infinite;
}
@keyframes candela-fiamma {
  0%   { opacity: .82; transform: translateX(-50%) scale(1)     translateY(0); }
  6%   { opacity: .54; transform: translateX(-50%) scale(.962)  translateY(3px); }
  12%  { opacity: .94; transform: translateX(-50%) scale(1.028) translateY(-2px); }
  19%  { opacity: .70; transform: translateX(-50%) scale(.988)  translateY(1px); }
  27%  { opacity: 1;   transform: translateX(-50%) scale(1.045) translateY(-4px); }
  34%  { opacity: .61; transform: translateX(-50%) scale(.971)  translateY(2px); }
  46%  { opacity: .88; transform: translateX(-50%) scale(1.012) translateY(-1px); }
  55%  { opacity: .52; transform: translateX(-50%) scale(.955)  translateY(4px); }
  63%  { opacity: .90; transform: translateX(-50%) scale(1.02)  translateY(-2px); }
  72%  { opacity: .66; transform: translateX(-50%) scale(.98)   translateY(1px); }
  84%  { opacity: .97; transform: translateX(-50%) scale(1.036) translateY(-3px); }
  93%  { opacity: .72; transform: translateX(-50%) scale(.99)   translateY(1px); }
  100% { opacity: .82; transform: translateX(-50%) scale(1)     translateY(0); }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brucia {
    background-image: linear-gradient(100deg,
      var(--accento) 0%, var(--accento-vivo) 26%, var(--accento-luce) 46%,
      var(--accento-vivo) 58%, var(--accento) 76%, var(--accento) 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brace-scorre 9.1s linear infinite;
  }
}
@keyframes brace-scorre { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (min-width: 900px) {
  .brucia--alone, .apertura__sotto.brucia { animation: brace-alone 7.3s ease-in-out infinite; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .brucia--alone, .apertura__sotto.brucia {
      animation: brace-alone 7.3s ease-in-out infinite, brace-scorre 9.1s linear infinite;
    }
  }
}
@keyframes brace-alone {
  0%, 100% { text-shadow: 0 0 16px rgba(var(--alone-rgb), .24); }
  13%      { text-shadow: 0 0 30px rgba(var(--alone-rgb), .46); }
  27%      { text-shadow: 0 0 11px rgba(var(--alone-rgb), .15); }
  41%      { text-shadow: 0 0 34px rgba(var(--alone-rgb), .52); }
  58%      { text-shadow: 0 0 14px rgba(var(--alone-rgb), .20); }
  74%      { text-shadow: 0 0 26px rgba(var(--alone-rgb), .40); }
  88%      { text-shadow: 0 0 12px rgba(var(--alone-rgb), .17); }
}

.sommario li, .inciso li { position: relative; transition: background 250ms ease-out; }
.sommario li::before, .inciso li::before {
  content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px;
  width: 2px; background: var(--accento);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 350ms cubic-bezier(.19,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
  .sommario .pagina, .sommario .voce, .inciso .voce { transition: color 250ms ease-out; }
  .sommario li:hover, .inciso li:hover { background: color-mix(in srgb, var(--accento) 6%, transparent); }
  .sommario li:hover::before, .inciso li:hover::before { transform: scaleY(1); }
  .sommario li:hover .pagina { color: var(--accento); }
  .sommario li:hover .voce, .inciso li:hover .voce { color: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
  .rag { clip-path: none !important; transform: none !important; }
  .brucia {
    background-image: none !important;
    -webkit-text-fill-color: var(--accento) !important;
    text-shadow: none !important;
  }
  .sommario h3.brucia { -webkit-text-fill-color: var(--accento-vivo) !important; }
  .lucido__brillo, .riflesso::after, .apertura__copertina::after, .tasto::after { display: none; animation: none !important; }
  .polvere { display: none; }
  .candela { animation: none; opacity: .8; }
  .sommario li::before, .inciso li::before { transition: none !important; transform: none !important; }
}