/* =========================================================
   BASE STYLE & INTRO (ATMOSFERA MINIMAL PC)
   ========================================================= */

body:has(#intro:not(.fade):not([style*="display: none"])) {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none;
}

#intro {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: #040404; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 2.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 2.5s ease-in-out;
}

#intro video { width: 100vw; height: 100vh; object-fit: cover; pointer-events: none; filter: contrast(1.05) saturate(0.8); }

body {
  margin: 0; padding: 0;
  background: linear-gradient(170deg, #0a0a0b, #111215 45%, #060607 90%);
  background-size: 100% 200%; color: #ccd2c5;
  font-family: "Courier Prime", monospace;
  overflow-x: hidden; letter-spacing: 0.4px;
  animation: nervousSystemBreath 53s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate, realityShift 151s ease-in-out infinite alternate;
  transition: filter 3s ease, background 4s ease;
}

.noise {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.03; mix-blend-mode: color-dodge; pointer-events: none; z-index: 999;
  animation: microNoiseShift 79s linear infinite;
}

.flicker {
  position: fixed; width: 100%; height: 100%;
  background: radial-gradient(circle at 25% 35%, rgba(150, 175, 200, 0.012), transparent 55%),
              radial-gradient(circle at 75% 65%, rgba(210, 195, 155, 0.012), transparent 55%);
  pointer-events: none; z-index: 998;
  animation: ambientFog 181s ease-in-out infinite alternate;
}

.stain {
  position: fixed; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(2, 2, 3, 0.92) 130%);
  pointer-events: none; z-index: 997;
  animation: uncannyPresence 107s cubic-bezier(0.3, 0.1, 0.3, 1) infinite alternate;
}

h1, h2, h3, .glitch-title {
  font-family: 'Special Elite', cursive; font-weight: normal;
  text-shadow: 0.5px 0 0 rgba(255, 50, 50, 0.15), -0.5px 0 0 rgba(50, 180, 255, 0.15);
}

.topbar {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 30px;
  background: rgba(6, 6, 7, 0.65); backdrop-filter: blur(14px) saturate(0.85);
  border-bottom: 1px solid rgba(214, 201, 163, 0.04);
  box-shadow: 0 6px 30px rgba(0,0,0,0.55); position: relative; z-index: 100;
}

.status { font-size: 11px; opacity: 0.4; font-style: italic; letter-spacing: 1px; }

.warning {
  padding: 22px; margin: 25px; border: 1px solid rgba(214, 160, 90, 0.12);
  background: linear-gradient(90deg, rgba(25, 18, 12, 0.25), rgba(25, 18, 12, 0.03));
  position: relative; overflow: hidden; animation: warnPulse 19s infinite alternate;
}
.warning p { font-size: 12px; line-height: 1.6; margin: 0; opacity: 0.8; }

.hero { text-align: center; padding: 110px 20px; position: relative; }
.glitch { font-size: 40px; letter-spacing: 6px; opacity: 0.85; margin-bottom: 10px; }
.hero p { font-size: 11px; letter-spacing: 5px; opacity: 0.4; }

.block {
  padding: 35px; margin: 25px; border-left: 1px solid rgba(214, 201, 163, 0.12);
  background: linear-gradient(90deg, rgba(16, 16, 18, 0.35), transparent);
  border-radius: 2px;
}
.block h2 { font-size: 12px; letter-spacing: 4px; opacity: 0.45; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; }
.block p { font-size: 12px; line-height: 1.7; opacity: 0.85; margin: 0; }

/* =========================================================
   GRID PC & SCROLLBAR MINIMALISTA
   ========================================================= */
.grid {
  display: flex; gap: 28px; overflow-x: auto; padding: 10px 5px; padding-bottom: 35px;
}

.grid::-webkit-scrollbar { height: 5px; }
.grid::-webkit-scrollbar-track { background: rgba(15, 15, 15, 0.4); border-radius: 10px; }
.grid::-webkit-scrollbar-thumb { background: rgba(214, 201, 163, 0.15); border-radius: 10px; }
.grid::-webkit-scrollbar-thumb:hover { background: rgba(214, 201, 163, 0.4); }

.card {
  flex: 0 0 auto; width: 285px; text-decoration: none; color: inherit;
  background: rgba(12, 12, 13, 0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(214, 201, 163, 0.05);
  box-shadow: 0 15px 40px rgba(0,0,0,0.65), inset 0 0 25px rgba(214, 201, 163, 0.01);
  overflow: hidden; transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.5s, filter 2s;
}

.card:hover {
  transform: perspective(1000px) scale(1.015) translateY(-4px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.85);
}

.card .img { height: 195px; position: relative; background: #000; overflow: hidden; filter: contrast(1.1) grayscale(0.4) sepia(0.08); transition: filter 1.5s, transform 1.5s; }
.card:hover .img { filter: contrast(1.15) grayscale(0.2) sepia(0.05); transform: scale(1.02); }

.card .img video {
  position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}

.mystery-bg { background: radial-gradient(circle at center, rgba(140, 0, 0, 0.12) 0%, #020202 85%); }

.text { padding: 20px; background: linear-gradient(to top, rgba(8,8,9,0.95) 0%, rgba(8,8,9,0) 100%); }
.text h3 { margin: 0 0 6px 0; font-size: 13px; color: #ded4bc; letter-spacing: 1px; }
.text p { margin: 0; font-size: 11px; opacity: 0.5; line-height: 1.5; }

.socials { display: flex; flex-direction: column; gap: 5px; }
.socials a { padding: 12px 0; color: #c0b489; text-decoration: none; opacity: 0.45; transition: all 0.8s ease; font-size: 12px; }
.socials a:hover { opacity: 0.9; text-shadow: 0 0 10px rgba(214, 201, 163, 0.25); transform: translateX(5px); }

form { display: flex; flex-direction: column; gap: 16px; }
input, textarea { background: rgba(4, 4, 5, 0.45); border: 1px solid rgba(214, 201, 163, 0.07); color: #c0b489; padding: 14px; font-family: "Courier Prime", monospace; font-size: 12px; transition: border 0.4s; }
input:focus, textarea:focus { border-color: rgba(214, 201, 163, 0.3); outline: none; }
textarea { height: 100px; resize: none; }
button { background: linear-gradient(to bottom, rgba(214, 201, 163, 0.04), rgba(214, 201, 163, 0.01)); border: 1px solid rgba(214, 201, 163, 0.13); color: #ded4bc; padding: 14px; cursor: pointer; font-family: "Courier Prime", monospace; font-size: 12px; letter-spacing: 2px; transition: background 0.4s, border 0.4s; }
button:hover { background: rgba(214, 201, 163, 0.06); border-color: rgba(214, 201, 163, 0.3); }

#footer-quote { text-align: center; padding: 60px 40px; font-size: 11px; color: #958d78; border-top: 1px solid rgba(214, 201, 163, 0.03); margin-top: 40px; }
#footer-quote p { margin: 0; line-height: 1.6; }
#quote-text { display: inline-block; transition: opacity 2.5s ease-in-out; font-style: italic; opacity: 0.5; max-width: 700px; }

/* ANIMAZIONI AMBIENTALI PC */
@keyframes warnPulse { 0% { border-color: rgba(214,160,90,0.04); } 100% { border-color: rgba(214,160,90,0.18); } }
@keyframes nervousSystemBreath { 0% { transform: scale(1); } 50% { transform: scale(1.001); } 100% { transform: scale(0.999); } }
@keyframes realityShift { 0% { background-position: 50% 0%; } 100% { background-position: 50% 100%; } }
@keyframes microNoiseShift { 0% { background-position: 0% 0%; } 100% { background-position: 10% 15%; } }
@keyframes ambientFog { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.05); opacity: 0.7; } }
@keyframes uncannyPresence { 0% { background-size: 100% 100%; } 100% { background-size: 104% 104%; } }

body.pc-anemoia-shift { filter: saturate(0.85) brightness(0.92); }

.mobile-neon-text { display: none; }
.backrooms-overlay { display: none; }

/* =========================================================
   MOBILE PROTOCOL (CILINDRO 3D COESISTENTE CON ANEMOIA)
   ========================================================= */

@media (max-width: 768px) {
  body { transform: none !important; padding: 0 !important; width: 100%; overflow-x: hidden; }
  .pc-only { display: none !important; }
  
  .mobile-neon-text {
    display: block; font-family: 'Courier Prime', monospace; color: #fff;
    font-weight: bold; font-size: 1.15rem; line-height: 1.8; text-align: center; text-transform: uppercase;
    text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 25px #aaa;
    animation: neon-buzz 1.6s infinite alternate;
  }

  @keyframes neon-buzz {
    0%, 21%, 23%, 60%, 62%, 100% { opacity: 1; text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 20px #888; }
    22%, 61% { opacity: 0.35; text-shadow: none; }
  }

  .topbar { flex-direction: column; text-align: center; gap: 8px; padding: 15px; }
  .glitch-title { font-size: 1.05rem; }
  .hero { padding: 45px 15px; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.75rem; letter-spacing: 3px; }
  .block { padding: 25px 15px; margin: 15px 0; border-left: none; border-top: 1px solid rgba(214, 201, 163, 0.12); }
  .block p { font-size: 0.85rem; line-height: 1.6; }
  form, form input, form textarea, form button { width: 100%; box-sizing: border-box; font-size: 0.95rem; }

  /* SCROLL SMANTELLATO PER IL CILINDRO 3D */
  .grid {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    overflow-y: hidden; gap: 0; padding: 40px 0; perspective: 1000px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid::-webkit-scrollbar { display: none; }

  .card {
    flex: 0 0 76vw; width: 76vw; margin: 0 12vw; scroll-snap-align: center;
    transform-origin: center center; transition: none; /* Gestito via JS */
  }
  .card .img { height: 210px; }

  /* ANEMOIA CASUALE MOBILE: AMBIENTE GLITCH "THE BACKROOMS" */
  .backrooms-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: transparent; pointer-events: none; z-index: 9990;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s;
  }
  .backrooms-text {
    color: #111; background: rgba(254, 225, 64, 0.95); padding: 10px 18px;
    font-family: monospace; font-weight: bold; border: 2px solid #111;
    box-shadow: 4px 4px 0px #111; font-size: 1rem; letter-spacing: 1px;
  }

  body.backrooms-active {
    background: #e2d379 !important;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.025) 2px, transparent 2px, transparent 4px) !important;
    color: #161611 !important;
    filter: sepia(0.45) hue-rotate(4deg) saturate(1.7) contrast(1.25) !important;
    animation: backroomsFlicker 0.2s infinite alternate !important;
  }
  
  body.backrooms-active .backrooms-overlay { opacity: 1; }
  body.backrooms-active .stain, body.backrooms-active .noise, body.backrooms-active .flicker { display: none; }
  
  body.backrooms-active .card {
    border-color: #111; box-shadow: 8px 8px 0px rgba(0,0,0,0.4);
    background: #c2b45c;
  }
  body.backrooms-active .text { background: transparent; }
  body.backrooms-active .text h3, body.backrooms-active .text p { color: #111; font-weight: bold; }
  body.backrooms-active button { border-color: #111; color: #111; font-weight: bold; }

  @keyframes backroomsFlicker {
    0% { filter: brightness(0.95) sepia(0.45) contrast(1.25); }
    100% { filter: brightness(1.05) sepia(0.45) contrast(1.2); }
  }
}