/* Fullscreen functionality will be handled by dedicated module */

/* Make html/body transparent only on index (homepage) */
html:has(body.index-homepage),
body.index-homepage {
  background: #000000 !important;
  background-color: #000000 !important;
}

html.page-transition-pending body.index-homepage,
body.index-homepage.page-transition-pending {
  opacity: 0;
}

html.index-initial-loading,
html.index-initial-loading body.index-homepage {
  overflow: hidden;
}

body.index-homepage::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  z-index: 999999;
}

html.index-initial-loading body.index-homepage::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  body.index-homepage::before {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}


.frame {
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

body:not(.fullscreen-store) .frame {
  cursor: pointer; /* Mostra la manina sul quadro quando non è in fullscreen */
}

.frame-media {
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Parete museo + frame + attore + transizioni */
.wall {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    url('../img/wall-desktop.webp');
  background-size: auto 100vh;
  /* Slightly shift background 2px to the right */
  background-position: calc(50% + 4px) center;
  background-repeat: repeat;
  z-index: 0;
}

.frame-wrap {
  position: absolute;
  left: 50%;
  top: 46.5%;
  transform: translate(-50%,-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Riflesso sulla parete dietro il quadro */
.frame-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    rgba(120, 180, 255, 0.08) 0%,
    rgba(150, 200, 255, 0.04) 30%,
    rgba(180, 220, 255, 0.02) 50%,
    transparent 70%
  );
  z-index: -1;
  animation: wall-reflection 4s infinite ease-in-out;
  pointer-events: none;
}

@keyframes wall-reflection {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Effetto LED rotante che parte dall'angolo in basso a sinistra */
@keyframes led-glow-rotation {
  0% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset;
  }
  25% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      -5px 0 6px 1px rgba(255, 219, 169, 0.45); /* left edge (tighter) */
  }
  50% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      -5px 0 6px 1px rgba(255, 219, 169, 0.45), /* left edge (tighter) */
      0 -5px 6px 1px rgba(255, 219, 169, 0.45); /* top edge (tighter) */
  }
  75% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      -5px 0 6px 1px rgba(255, 219, 169, 0.45), /* left edge (tighter) */
      0 -5px 6px 1px rgba(255, 219, 169, 0.45), /* top edge (tighter) */
      5px 0 6px 1px rgba(255, 219, 169, 0.45), /* right edge (tighter) */
  }
  100% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      -5px 0 6px 1px rgba(255, 219, 169, 0.45), /* left edge (tighter) */
      0 -5px 6px 1px rgba(255, 219, 169, 0.45), /* top edge (tighter) */
      5px 0 6px 1px rgba(255, 219, 169, 0.45), /* right edge (tighter) */
      0 5px 6px 1px rgba(255, 219, 169, 0.45); /* bottom edge (tighter) */
  }
}

.frame.led-effect {
  animation: led-glow-rotation 2s ease-in-out forwards;
}
/* Quadro centrale grande, proporzioni sceniche */
:root {
  --bg: #1a1a1a;
  --sand: #f5f5dc;
  --accent: #8b0000;
}

.frame {
  position: relative;
  height: 57.5vh;
  width: calc(1.94 * 57.5vh);
  max-width: 98vw;
  min-width: 220px;
  min-height: 120px;
  max-height: 90vh;
  aspect-ratio: unset;
  background: var(--sand);
  border-radius: 0;
  border: 10px solid #333;
  box-shadow:
    0 8px 48px 0 rgba(48,29,9,0.18),
    0 0 0 4px #444 inset,
    0 2px 8px 0 #222 inset,
    inset 0 0 15px rgba(255, 255, 255, 0.1),
    inset 0 0 30px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s, filter 0.8s ease-in-out;
}
@media (max-width: 480px) {

  .wall {
    background-image: 
      url('../img/wall-mobile.webp'),
      linear-gradient(135deg, #f5f5dc 0%, #e6dcc6 100%);
    background-position: calc(50% + -2px) center;
  }
  .frame-wrap {
    width: 100vw;
    left: 50%;
    top: 37.2%;
    transform: translate(-50%,-50%);
  }
  .frame {
    height: 42.2vh;
    width: calc(42.2vh * 0.66);
    max-width: calc(42.2vh * 0.66);
    min-width: 150px;
    min-height: 200px;
    max-height: 50vh;
    aspect-ratio: 2/3;
    margin: 0 auto;
    border-radius: 0;
    border: 7px solid #333;
    box-shadow:
      0 4px 24px 0 rgba(48,29,9,0.18),
      0 0 0 2px #444 inset,
      0 1px 4px 0 #222 inset,
      inset 0 0 10px rgba(255, 255, 255, 0.1),
      inset 0 0 20px rgba(255, 255, 255, 0.05);
  }
  

}
.frame-media {
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  margin: -7px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  filter: brightness(1);
  transition: opacity 0.4s cubic-bezier(.7,0,.3,1), filter 0.4s cubic-bezier(.7,0,.3,1);
}

/* Overlay nero con loader che copre tutto il frame */
.frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  /* Animazione loading-overlay rimossa */
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay attivato dal click sul dipinto - disattiva l'animazione automatica */
.frame.show-loader::after {
  opacity: 1 !important;
  visibility: visible !important;
  /* Animazione click-loading-overlay rimossa */
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Brandmark loader che si carica dal basso verso l'alto con pulsazione */
.frame::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65px;
  height: 65px;
  transform: translate(-50%, -50%);
  background-image: url('/img/brandmark_light.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 11;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  /* Animazioni brandmark-reveal e brandmark-pulse rimosse */
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 0 10px rgba(201, 52, 47, 0.3));
}

/* Loader attivato dal click */

.frame.show-loader::before {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: inset(100% 0 0 0);
    animation: brandmark-loading-effect 1.5s ease-out forwards;
}

@keyframes brandmark-loading-effect {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 0.3;
    clip-path: inset(70% 0 0 0);
    transform: translate(-50%, -50%);
  }
  60% {
    opacity: 0.7;
    clip-path: inset(30% 0 0 0);
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0 0 0);
    transform: translate(-50%, -50%);
  }
}



/* Classe per nascondere l'overlay quando lo store è pronto */
.frame.store-ready::after {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.frame.store-ready::before {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out;
}

/* Quando si usa il click dopo che l'automatico è disattivato */
.frame.auto-loader-disabled.show-loader::after {
  animation: click-loading-overlay 2s ease-in-out forwards !important;
}

.frame.auto-loader-disabled.show-loader::before {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  animation:
     click-brandmark-reveal var(--brandmark-load-duration) var(--brandmark-load-timing) forwards !important;
}

/* Keyframe loading-overlay rimosso */

/* Keyframe brandmark-reveal rimosso */

/* Keyframe brandmark-pulse rimosso */

/* Keyframe click-brandmark-reveal rimosso */

@keyframes loader-visibility {
  /* Nascosto per i primi 4 secondi */
  0%, 79.9% {
    opacity: 0;
  }

  /* Visibile da 4 a 5 secondi */
  80%, 99.9% {
    opacity: 1;
  }

  /* Sparisce */
  100% {
    opacity: 0;
  }
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Keyframe click-loading-overlay rimosso */

@keyframes click-loader-visibility {
  0% {
    opacity: 0;
  }

  5%, 95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Retroilluminazione sui bordi */
.frame-media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at top, rgba(150, 200, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(100, 180, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at left, rgba(120, 190, 255, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at right, rgba(140, 200, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.frame-media.painting-out {
  animation: none;
}

@keyframes painting-fade-out {
  0% { 
    opacity: 1; 
    transform: scale(1) rotate(0deg);
    filter: none; 
  }
  30% { 
    opacity: 0.8; 
    transform: scale(1.02) rotate(0.2deg);
    filter: brightness(1.1) contrast(1.05); 
  }
  60% { 
    opacity: 0.4; 
    transform: scale(1.05) rotate(-0.1deg);
    filter: brightness(1.2) contrast(1.1) blur(1px); 
  }
  85% { 
    opacity: 0.1; 
    transform: scale(1.08) rotate(0.1deg);
    filter: brightness(1.3) contrast(1.15) blur(2px); 
  }
  100% { 
    opacity: 0; 
    transform: scale(1.1) rotate(0deg);
    filter: brightness(1.4) contrast(1.2) blur(3px); 
  }
}

.frame-media.painting-reset {
  animation: none !important;
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
  filter: none !important;
  display: block !important;
  visibility: visible !important;
  z-index: 2 !important;
}

#storeFrame {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  z-index: 1;
  display: block;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.3s ease-out;
}

/* Scrollbar handling for storeFrame */
#storeFrame {
  overflow: auto; /* Permette lo scroll */
}

/* Fullscreen scrollbar handling will be managed by dedicated module */

#storeFrame.active {
  opacity: 1;
  animation: site-fade-in 0.3s ease-out forwards;
}

@keyframes site-fade-in {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Effetto riflesso realistico del vetro */
.shine {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: shine-move 1.2s ease-out 1s forwards;
  opacity: 0;
  z-index: 3;
}

@keyframes shine-move {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes diagonal-sweep {
  0% {
    transform: translateX(-150%) translateY(-150%) rotate(35deg);
    opacity: 0;
  }

  20% {
    opacity: 0.6;
  }

  50% {
    transform: translateX(0%) translateY(0%) rotate(35deg);
    opacity: 1;
  }

  80% {
    opacity: 0.6;
  }

  100% {
    transform: translateX(150%) translateY(150%) rotate(35deg);
    opacity: 0;
  }
}

@keyframes frame-backlight {
  /* Nessun glow quando spento */
  0%, 10%, 90%, 100% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset;
  }

  /* Glow iniziale debole */
  15%, 25% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      0 0 20px 4px rgba(100, 150, 255, 0.15),
      0 0 40px 8px rgba(120, 180, 255, 0.08);
  }

  /* Glow massimo quando acceso */
  40%, 70% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      0 0 50px 15px rgba(100, 150, 255, 0.25),
      0 0 80px 25px rgba(120, 180, 255, 0.15),
      0 0 120px 40px rgba(150, 200, 255, 0.08);
  }

  /* Glow che diminuisce */
  80% {
    box-shadow: 
      0 8px 48px 0 rgba(48,29,9,0.18), 
      0 0 0 4px #222 inset, 
      0 2px 8px 0 #222 inset,
      0 0 25px 6px rgba(100, 150, 255, 0.12),
      0 0 50px 12px rgba(120, 180, 255, 0.06);
  }
}
.scan {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.2) 100%),
    radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
  mix-blend-mode: soft-light;
}
.scan.on {
  opacity: 1;
  animation: elegant-scan 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes elegant-scan {
  0% { 
    opacity: 0; 
    transform: scale(0.98);
    filter: brightness(1);
  }
  30% { 
    opacity: 0.8; 
    transform: scale(1.01);
    filter: brightness(1.1);
  }
  60% { 
    opacity: 1; 
    transform: scale(1.02);
    filter: brightness(1.2);
  }
  100% { 
    opacity: 0; 
    transform: scale(1);
    filter: brightness(1);
  }
}

.frame-ctl.enlarge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(251,246,242,0.85);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px 0 rgba(48,29,9,0.10);
  z-index: 3;
  transition: background 0.2s;
}
.frame-ctl.enlarge:active,
.frame-ctl.enlarge:focus {
  background: var(--sand);
}
.actor {
  position: absolute;
  left: -30vw;
  bottom: 0;
  height: 70vh;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: filter 0.2s;
}
.actor.enter {
  animation: actor-in 3s cubic-bezier(.7,0,.3,1) forwards;
  opacity: 1;
}
@keyframes actor-in {
  0% { left: -30vw; opacity: 0; }
  80% { left: 40vw; opacity: 1; }
  100% { left: 50vw; opacity: 1; }
}
.actor.tap {
  animation: actor-tap 0.6s cubic-bezier(.7,0,.3,1) forwards;
  filter: blur(2px) brightness(1.1);
}
@keyframes actor-tap {
  0% { transform: scale(1); filter: none; }
  50% { transform: scale(1.08); filter: blur(2px) brightness(1.1); }
  100% { transform: scale(1); filter: none; }
}
.actor.exit {
  animation: actor-exit 1.2s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes actor-exit {
  0% { left: 50vw; opacity: 1; }
  100% { left: 120vw; opacity: 0; }
}

/* ===== TRANSIZIONI FADE GLOBALI ===== */

/* Classi utility per fade in/out */
.fade-out {
  opacity: 0 !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.6, 1) !important;
}

.fade-in {
  opacity: 1 !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fade-out-fast {
  opacity: 0 !important;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) !important;
}

.fade-in-fast {
  opacity: 1 !important;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fade-out-slow {
  opacity: 0 !important;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.6, 1) !important;
}

.fade-in-slow {
  opacity: 1 !important;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transizioni per elementi specifici */
.painting-transition {
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.6, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.6, 1);
}

.loader-transition {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stati di transizione per le pagine */
.page-entering {
  opacity: 0;
  transform: translateY(-8px);
}

.page-entered {
  opacity: 1;
  transform: translateY(0);
}

.page-exiting {
  opacity: 0;
  transform: translateY(8px);
}

/* Transizione migliorata per il frame del sito */
#storeFrame {
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#storeFrame.fade-entering {
  opacity: 0;
  visibility: hidden;
}

#storeFrame.fade-entered {
  opacity: 1;
  visibility: visible;
}

/* Regole specifiche per il fullscreen che sovrascrivono le dimensioni del frame */
#storeFrame.fullscreen-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Assicura che il frame contenitore non limiti le dimensioni in fullscreen */
.fullscreen-store .frame {
  width: 100vw !important;
  height: 100dvh !important; /* Dynamic viewport height - adapts to browser UI */
  height: 100svh !important; /* Small viewport height - fallback */
  max-width: none !important;
  max-height: none !important;
  min-width: none !important;
  min-height: 100svh !important; /* Ensure minimum height excludes browser UI */
  border: none !important;
  box-shadow: none !important;
}

/* Nasconde il frame wrapper in modalità fullscreen */
.fullscreen-store .frame-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important; /* Dynamic viewport height - adapts to browser UI */
  height: 100svh !important; /* Small viewport height - fallback */
  min-height: 100svh !important; /* Ensure minimum height excludes browser UI */
  transform: none !important;
  z-index: 9999 !important; /* Below universal menu but above other content */
}

/* Dimensioni più piccole del logo su mobile */
@media (max-width: 768px) {
  .frame::before {
    width: 58px;
    height: 58px;
  }
  
  /* Animazione del brandmark ottimizzata per mobile */
  .frame.show-loader::before {
    animation: brandmark-loading-effect 0.9s ease-out forwards;
  }
}

/* ====== Museum Store Layout ======
   Horizontal showroom with framed artworks and plaques
*/

.museum-wall {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 6vh 2vw 10vh;
  box-sizing: border-box;
  background: transparent; /* usa il colore della pagina */
}

.museum-gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0; /* gestito da padding interno dell'item */
  overflow-x: auto; /* fallback senza GSAP */
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* fallback */
  -webkit-overflow-scrolling: touch;
}

.museum-gallery.gsap-active {
  overflow: hidden; /* GSAP gestisce lo scroll */
  scroll-snap-type: none;
}

.museum-gallery.loaded { opacity: 1; }

.museum-item {
  width: 100vw; /* un'opera per viewport */
  min-height: 60vh;
  padding: 6vh 4vw 8vh; /* distanzia ogni opera */
  box-sizing: border-box;
  scroll-snap-align: center; /* fallback */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

/* Gold ornate frame (CSS simulation; can be swapped to PNG frame later) */
.museum-frame {
  position: relative;
  width: min(56vh, 78vw); /* cornice coerente su dispositivi diversi */
  aspect-ratio: 3 / 4;
  background: #101010;
  border: 14px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  /* layered gold look */
  background-clip: padding-box;
}

.museum-frame::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7a6122 0%, #c9a441 22%, #e4c766 44%, #b2822c 60%, #f2de91 75%, #8a6b24 100%);
  z-index: 0;
  box-shadow:
    0 6px 16px rgba(48, 29, 9, 0.35),
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.25);
}

.museum-frame::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.15));
  z-index: 1;
  pointer-events: none;
}

.museum-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Plaque */
.museum-plaque {
  min-width: 68%;
  max-width: 90%;
  background: linear-gradient(180deg, #F0DBC7, #E6D1BD);
  color: #301D09;
  border: 1px solid rgba(48,29,9,0.25);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.45);
  text-align: center;
}

.plaque-title {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  margin: 0 0 6px 0;
}

.plaque-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(0.82rem, 2.2vw, 0.95rem);
  line-height: 1.35;
  margin: 0 0 10px 0;
  color: rgba(48,29,9,0.8);
}

.plaque-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 20px;
  background: #8E2F22;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.plaque-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(142,47,34,0.35); }
.plaque-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(142,47,34,0.25); }

/* Desktop sizing */
@media (min-width: 900px) {
  .museum-gallery { grid-auto-columns: min(48vw, 560px); }
}

/* Very wide desktop */
@media (min-width: 1400px) {
  .museum-gallery { grid-auto-columns: 520px; }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .museum-gallery { grid-auto-columns: 84vw; gap: 28px; }
  .museum-wall { background: transparent; }
}

/* Disabilita lo scroll verticale quando siamo in modalità orizzontale */
body.museum-lock { overflow: hidden; }