/* ============================================
   Live Cinema — Andrea & Giulia 5 luglio 2026
   Foundation styles + Pattern A: Petali + Frames
   ============================================ */

:root {
  --cinema-bg-start:    #faf5ed;   /* avorio caldo */
  --cinema-bg-end:      #f0e6d2;   /* avorio scuro */
  --cinema-gold:        #c9a76a;
  --cinema-gold-soft:   rgba(201, 167, 106, 0.5);
  --cinema-rose:        #d4a5a5;
  --cinema-rose-soft:   #f4dada;
  --cinema-text:        #4a3a2a;
  --cinema-shadow:      0 8px 30px rgba(0, 0, 0, 0.15);
  --frame-radius:       4px;
  --new-glow:           0 0 40px rgba(201, 167, 106, 0.8),
                        0 0 80px rgba(201, 167, 106, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--cinema-bg-start), var(--cinema-bg-end));
  font-family: "Playfair Display", serif;
  color: var(--cinema-text);
}

.cinema-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

.petals-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.mode-indicator {
  position: fixed;
  bottom: 10px;
  right: 14px;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  color: var(--cinema-gold-soft);
  background: rgba(255,255,255,0.4);
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 100;
  opacity: 0.5;
}
.mode-indicator:hover { opacity: 1; }

/* ============================================
   Pattern A: PETALI + FRAMES
   ============================================ */

.cinema-stage.pattern-petali {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 40px;
  padding: 60px 80px;
  box-sizing: border-box;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .cinema-stage.pattern-petali {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    padding: 30px 40px;
  }
}

@media (max-width: 767px) {
  .cinema-stage.pattern-petali {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    padding: 20px;
  }
  .cinema-stage.pattern-petali .petali-frame[data-frame-index="2"],
  .cinema-stage.pattern-petali .petali-frame[data-frame-index="3"] { display: none; }
}

.petali-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  padding: 12px 12px 36px 12px;     /* polaroid look: più bordo basso */
  border-radius: var(--frame-radius);
  box-shadow: var(--cinema-shadow);
  overflow: hidden;
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.petali-frame.new-upload-glow {
  box-shadow: var(--new-glow);
  animation: framePulse 1.5s ease-out;
}

@keyframes framePulse {
  0%   { box-shadow: var(--new-glow); transform: scale(1.02); }
  100% { box-shadow: var(--cinema-shadow); transform: scale(1); }
}

.petali-wrapper {
  position: absolute;
  inset: 12px 12px 36px 12px;
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.petali-wrapper.visible {
  opacity: 1;
}

.petali-wrapper.exiting {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.petali-wrapper img,
.petali-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Ken Burns direzioni */
.petali-wrapper[data-kenburns="zoom-in"] img    { animation: kbZoomIn 14s ease-in-out forwards; }
.petali-wrapper[data-kenburns="zoom-out"] img   { animation: kbZoomOut 14s ease-in-out forwards; }
.petali-wrapper[data-kenburns="pan-left"] img   { animation: kbPanLeft 14s ease-in-out forwards; }
.petali-wrapper[data-kenburns="pan-right"] img  { animation: kbPanRight 14s ease-in-out forwards; }
.petali-wrapper[data-kenburns="diagonal-ne"] img{ animation: kbDiagonalNE 14s ease-in-out forwards; }
.petali-wrapper[data-kenburns="diagonal-sw"] img{ animation: kbDiagonalSW 14s ease-in-out forwards; }

@keyframes kbZoomIn   { 0% { transform: scale(1.0); } 100% { transform: scale(1.10); } }
@keyframes kbZoomOut  { 0% { transform: scale(1.10); } 100% { transform: scale(1.0); } }
@keyframes kbPanLeft  { 0% { transform: scale(1.06) translate(2%, 0); } 100% { transform: scale(1.06) translate(-2%, 0); } }
@keyframes kbPanRight { 0% { transform: scale(1.06) translate(-2%, 0); } 100% { transform: scale(1.06) translate(2%, 0); } }
@keyframes kbDiagonalNE { 0% { transform: scale(1.06) translate(-1%, 1%); } 100% { transform: scale(1.06) translate(1%, -1%); } }
@keyframes kbDiagonalSW { 0% { transform: scale(1.06) translate(1%, -1%); } 100% { transform: scale(1.06) translate(-1%, 1%); } }

/* Filtri tint */
.petali-wrapper.tint-warm img    { filter: sepia(0.15) saturate(1.1); }
.petali-wrapper.tint-cool img    { filter: hue-rotate(-10deg) saturate(0.95); }
.petali-wrapper.tint-vintage img { filter: sepia(0.3) contrast(0.95) brightness(1.05); }
.petali-wrapper.tint-none img    { filter: none; }

/* Entrance animations */
.petali-wrapper.entrance-fade.visible       { animation: entFade 0.7s ease both; }
.petali-wrapper.entrance-slide-up.visible   { animation: entSlideUp 0.7s ease both; }
.petali-wrapper.entrance-slide-down.visible { animation: entSlideDown 0.7s ease both; }
.petali-wrapper.entrance-scale-in.visible   { animation: entScaleIn 0.7s ease both; }
.petali-wrapper.entrance-rotate-in.visible  { animation: entRotateIn 0.7s ease both; }

@keyframes entFade       { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes entSlideUp    { 0% { opacity: 0; transform: rotate(var(--rot)) scale(var(--scale)) translateY(20%); } 100% { opacity: 1; transform: rotate(var(--rot)) scale(var(--scale)) translateY(0); } }
@keyframes entSlideDown  { 0% { opacity: 0; transform: rotate(var(--rot)) scale(var(--scale)) translateY(-20%); } 100% { opacity: 1; transform: rotate(var(--rot)) scale(var(--scale)) translateY(0); } }
@keyframes entScaleIn    { 0% { opacity: 0; transform: rotate(var(--rot)) scale(0.7); } 100% { opacity: 1; transform: rotate(var(--rot)) scale(var(--scale)); } }
@keyframes entRotateIn   { 0% { opacity: 0; transform: rotate(calc(var(--rot) - 8deg)) scale(var(--scale)); } 100% { opacity: 1; transform: rotate(var(--rot)) scale(var(--scale)); } }

/* ============================================
   Petali (sfondo decorativo)
   ============================================ */

.petals-layer.active .petal {
  position: absolute;
  top: -30px;
  width: var(--petal-size, 12px);
  height: var(--petal-size, 12px);
  background: radial-gradient(ellipse at 30% 30%, var(--cinema-rose-soft), var(--cinema-rose));
  border-radius: 50% 0 50% 0;
  opacity: var(--petal-opacity, 0.6);
  animation: petalFall var(--fall-duration, 10s) linear forwards,
             petalRotate var(--rotation-speed, 3s) linear infinite,
             petalSway var(--fall-duration, 10s) ease-in-out forwards;
  will-change: transform, top;
}

@keyframes petalFall {
  0%   { top: -30px; }
  100% { top: 105vh; }
}

@keyframes petalRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes petalSway {
  0%   { margin-left: 0; }
  50%  { margin-left: var(--sway-amount, 40px); }
  100% { margin-left: 0; }
}

/* ============================================
   Pattern B: FLOATING POLAROIDS
   ============================================ */

.cinema-stage.pattern-polaroid {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Sfondo già da body, niente da aggiungere */
}

.polaroid-card {
  position: absolute;
  background: #fff;
  padding: 14px 14px 50px 14px;   /* polaroid classica: padding inferiore largo */
  border-radius: 4px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.08);

  /* Variabili custom riempite via JS */
  --pr-rot: 0deg;
  --pr-scale: 1;
  --pr-x-start: 0px;
  --pr-y-start: 0px;
  --pr-x-end: 0px;
  --pr-y-end: 0px;
  --pr-float-duration: 4s;
  --pr-float-delay: 0s;
  --pr-life: 12s;

  transform: translate(var(--pr-x-start), var(--pr-y-start)) rotate(var(--pr-rot)) scale(var(--pr-scale));
  opacity: 0;
  will-change: transform, opacity;
}

/* Featured: ombra più marcata, leggermente più grande */
.polaroid-card.featured {
  box-shadow:
    0 6px 12px rgba(201, 167, 106, 0.25),
    0 18px 44px rgba(0, 0, 0, 0.12);
}

/* New upload: glow + pop scale (Decisione 5B) */
.polaroid-card.new-upload {
  animation: polaroidNewUploadPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             polaroidFloat var(--pr-float-duration) ease-in-out infinite,
             polaroidLifecycle var(--pr-life) linear forwards;
  box-shadow:
    0 0 40px rgba(201, 167, 106, 0.7),
    0 0 80px rgba(201, 167, 106, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Normale: solo float + lifecycle */
.polaroid-card:not(.new-upload) {
  animation: polaroidFloat var(--pr-float-duration) ease-in-out infinite,
             polaroidLifecycle var(--pr-life) linear forwards;
  animation-delay: var(--pr-float-delay), 0s;
}

.polaroid-card .polaroid-image {
  width: 100%;
  height: calc(100% - 36px);  /* lascia spazio per "didascalia" inferiore */
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.polaroid-card video.polaroid-image {
  background: #000;
}

/* Filtri tint sull'immagine (riusati da Pattern A) */
.polaroid-card.tint-warm .polaroid-image    { filter: sepia(0.15) saturate(1.1); }
.polaroid-card.tint-cool .polaroid-image    { filter: hue-rotate(-10deg) saturate(0.95); }
.polaroid-card.tint-vintage .polaroid-image { filter: sepia(0.3) contrast(0.95) brightness(1.05); }

/* Lifecycle: slide-in dal bordo random, lifecycle drift, slide-out */
@keyframes polaroidLifecycle {
  0% {
    transform: translate(var(--pr-x-start), var(--pr-y-start)) rotate(var(--pr-rot)) scale(var(--pr-scale));
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  12% {
    transform: translate(var(--pr-x-end), var(--pr-y-end)) rotate(var(--pr-rot)) scale(var(--pr-scale));
  }
  85% {
    transform: translate(var(--pr-x-end), var(--pr-y-end)) rotate(var(--pr-rot)) scale(var(--pr-scale));
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--pr-x-end) + var(--pr-drift-x, 80px)), calc(var(--pr-y-end) + var(--pr-drift-y, 40px))) rotate(calc(var(--pr-rot) + 8deg)) scale(var(--pr-scale));
    opacity: 0;
  }
}

/* Float idle: respiro Y + sway rotation */
@keyframes polaroidFloat {
  0%, 100% {
    margin-top: 0;
    --pr-sway: 0deg;
  }
  50% {
    margin-top: -10px;
  }
}

/* New upload pop */
@keyframes polaroidNewUploadPop {
  0% {
    transform: translate(var(--pr-x-end), var(--pr-y-end)) rotate(var(--pr-rot)) scale(1.18);
  }
  60% {
    transform: translate(var(--pr-x-end), var(--pr-y-end)) rotate(var(--pr-rot)) scale(1.04);
  }
  100% {
    transform: translate(var(--pr-x-end), var(--pr-y-end)) rotate(var(--pr-rot)) scale(var(--pr-scale));
  }
}

/* Mobile: meno polaroid simultanee (4 invece di 6-8) */
@media (max-width: 767px) {
  .cinema-stage.pattern-polaroid .polaroid-card:nth-child(n+5) {
    display: none;
  }
}

/* ============================================
   Pattern C: CINEMA LETTERBOX
   ============================================ */

.cinema-stage.pattern-cinema {
  background: #000;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.cinema-letterbox {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.cinema-bar {
  background: #000;
  height: calc((100vh - (100vw * 9 / 16)) / 2);
  flex-shrink: 0;
  min-height: 60px;
  position: relative;
  z-index: 2;
}

.cinema-bar.top {
  border-bottom: 1px solid #1a1a1a;
}

.cinema-bar.bottom {
  border-top: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cinema-frame {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
}

.cinema-media-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 1;
}

.cinema-media-wrapper.visible {
  opacity: 1;
}

.cinema-media-wrapper img,
.cinema-media-wrapper video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================
   Pattern C — Transizioni cinematografiche
   ============================================ */

.cinema-media-wrapper.enter-fade {
  animation: cinemaFade 1.5s ease-out forwards;
}
.cinema-media-wrapper.exit-fade {
  animation: cinemaFadeOut 0.8s ease-in forwards;
}
@keyframes cinemaFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cinemaFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.cinema-media-wrapper.enter-slide-left {
  animation: cinemaSlideLeftIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.cinema-media-wrapper.exit-slide-left {
  animation: cinemaSlideLeftOut 0.8s ease-in forwards;
}
@keyframes cinemaSlideLeftIn {
  from { opacity: 0; transform: translateX(8%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cinemaSlideLeftOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-8%); }
}

.cinema-media-wrapper.enter-dip-to-black {
  animation: cinemaDipIn 1.5s ease-out forwards;
  animation-delay: 0.6s;
}
.cinema-media-wrapper.exit-dip-to-black {
  animation: cinemaDipOut 0.6s ease-in forwards;
}
@keyframes cinemaDipIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cinemaDipOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.cinema-media-wrapper.enter-iris-out {
  animation: cinemaIrisIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cinema-media-wrapper.exit-iris-out {
  animation: cinemaIrisOut 0.8s ease-in forwards;
}
@keyframes cinemaIrisIn {
  from { opacity: 0; clip-path: circle(0% at 50% 50%); }
  to   { opacity: 1; clip-path: circle(75% at 50% 50%); }
}
@keyframes cinemaIrisOut {
  from { opacity: 1; clip-path: circle(75% at 50% 50%); }
  to   { opacity: 0; clip-path: circle(0% at 50% 50%); }
}

.cinema-media-wrapper.enter-crossfade {
  animation: cinemaCrossfadeIn 2.0s ease-out forwards;
}
.cinema-media-wrapper.exit-crossfade {
  animation: cinemaCrossfadeOut 1.2s ease-in forwards;
}
@keyframes cinemaCrossfadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cinemaCrossfadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.cinema-media-wrapper.new-upload-glow {
  box-shadow: 0 0 60px rgba(201, 167, 106, 0.7);
}

/* ============================================
   Pattern C — Caption crawl
   ============================================ */

.cinema-caption {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 32px);
  color: #c9a76a;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  transform: translateX(100vw);
  opacity: 0;
  --caption-duration: 12s;
}

.cinema-caption.crawling {
  animation: cinemaCrawl var(--caption-duration) linear forwards;
}

@keyframes cinemaCrawl {
  0%   { transform: translateX(100vw); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* ============================================
   Pattern C — Responsive
   ============================================ */

@media (max-width: 767px) {
  .cinema-caption {
    font-size: clamp(14px, 4vw, 20px);
  }
  .cinema-bar {
    min-height: 40px;
  }
}

/* ============================================
   Pattern E: SCRAPBOOK VIVENTE (foundation)
   ============================================ */

.cinema-stage.pattern-scrapbook {
  background: #f4ecd8;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180,150,100,0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160,130,90,0.05) 0%, transparent 40%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.scrapbook-page {
  position: absolute;
  inset: 0;
  perspective: 1200px;
}

.scrapbook-page-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5vh 4vw;
  padding: 4vh 6vw;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: left center;
}
.scrapbook-page-content.visible {
  opacity: 1;
}
.scrapbook-page-content.fade-in { opacity: 0; }

/* Polaroid incollata */
.scrapbook-photo {
  position: relative;
  background: #fffdf8;
  padding: 12px 12px 40px 12px;
  box-shadow: 0 8px 24px rgba(80,60,30,0.25);
  max-width: 32vw;
  max-height: 60vh;
}
.scrapbook-photo img,
.scrapbook-photo video {
  display: block;
  max-width: 100%;
  max-height: 45vh;
  object-fit: cover;
}

/* A4: video nel collage = primo frame fermo + badge ▶ (placeholder; poster vero via ffmpeg = Fase E) */
.cinema-stage.pattern-scrapbook .scrapbook-video-wrap {
  position: relative;   /* per posizionare il badge ▶ */
  display: block;
  line-height: 0;       /* niente gap sotto il video */
}
.cinema-stage.pattern-scrapbook .scrapbook-video {
  /* dimensioni ereditate da .scrapbook-photo video (max-width/height, object-fit) */
  background: #2b2b2b;  /* sfondo neutro finché il primo frame non è pronto */
}
.cinema-stage.pattern-scrapbook .scrapbook-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(44px, 8vw, 68px);
  height: clamp(44px, 8vw, 68px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(212, 185, 120, 0.85);   /* oro soft */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;   /* A4: solo visivo; il tap lo gestirà la Fase C */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Triangolo ▶ in CSS puro (border-trick), colore avorio */
.cinema-stage.pattern-scrapbook .scrapbook-play-badge::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 15%;       /* compensa l'asimmetria ottica del triangolo */
  border-style: solid;
  border-width: clamp(8px, 1.6vw, 12px) 0 clamp(8px, 1.6vw, 12px) clamp(13px, 2.6vw, 20px);
  border-color: transparent transparent transparent #f4ecd8;   /* avorio */
}

/* Fissaggio: SCOTCH washi */
.scrapbook-photo.with-tape::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 80px;
  height: 26px;
  background: rgba(220,200,140,0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Fissaggio: PUNTINA */
.scrapbook-photo.with-pin::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e85d5d, #b83232);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Fissaggio: ANGOLINI fotografici */
.scrapbook-photo.with-corner::before,
.scrapbook-photo.with-corner::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(120,90,50,0.4);
}
.scrapbook-photo.with-corner::before {
  top: 4px; left: 4px;
  border-right: none; border-bottom: none;
}
.scrapbook-photo.with-corner::after {
  bottom: 4px; right: 4px;
  border-left: none; border-top: none;
}

/* Caption handwriting */
.scrapbook-caption {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 44px);
  color: #5a4a32;
  text-align: center;
  width: 100%;
  flex-basis: 100%;
  margin-top: 0.5vh;
  transform: rotate(-2deg);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* Page-flip 3D (Pattern E) */
.scrapbook-page-content.flip-out {
  animation: scrapbookFlipOut 0.9s ease-in forwards;
  z-index: 2;
}
.scrapbook-page-content.flip-in {
  animation: scrapbookFlipIn 0.9s ease-out 0.9s both;
  z-index: 1;
}

@keyframes scrapbookFlipOut {
  0%   { transform: rotateY(0deg);    opacity: 1;   box-shadow: 0 0 0 rgba(80,60,30,0); }
  100% { transform: rotateY(-100deg); opacity: 0.2; box-shadow: 30px 0 50px rgba(80,60,30,0.45); }
}
@keyframes scrapbookFlipIn {
  0%   { transform: rotateY(95deg);  opacity: 0.2; box-shadow: -30px 0 50px rgba(80,60,30,0.45); }
  100% { transform: rotateY(0deg);   opacity: 1;   box-shadow: 0 0 0 rgba(80,60,30,0); }
}

/* ============================================
   Pattern E (Scrapbook) — Navigazione A2 (tap zone + frecce + indicatore)
   ============================================ */
.cinema-stage.pattern-scrapbook .scrapbook-nav {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 10;                /* sopra polaroid e page-flip (flip usa z-index 1-2) */
  pointer-events: none;       /* C1-fix: il contenitore NON intercetta i tap (passano alle polaroid) */
}
.cinema-stage.pattern-scrapbook .scrapbook-nav-zone { height: 100%; }
.cinema-stage.pattern-scrapbook .scrapbook-nav-zone.left   { width: 30%; cursor: w-resize; pointer-events: auto; }   /* C1-fix: solo i lati navigano */
.cinema-stage.pattern-scrapbook .scrapbook-nav-zone.center { width: 40%; cursor: default; pointer-events: none; }   /* C1: lascia passare il tap alle polaroid (apertura fullscreen) */
.cinema-stage.pattern-scrapbook .scrapbook-nav-zone.right  { width: 30%; cursor: e-resize; pointer-events: auto; }   /* C1-fix: solo i lati navigano */

/* Frecce discrete — solo visive: il tap è gestito dalle zone sottostanti */
.cinema-stage.pattern-scrapbook .scrapbook-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  pointer-events: none;
  font-family: "Playfair Display", serif;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  color: rgba(184, 153, 90, 0.55);          /* oro semi-trasparente */
  text-shadow: 0 1px 4px rgba(255, 253, 248, 0.6);
  user-select: none;
}
.cinema-stage.pattern-scrapbook .scrapbook-arrow.left  { left: 2.5vw; }
.cinema-stage.pattern-scrapbook .scrapbook-arrow.right { right: 2.5vw; }

/* Indicatore "pagina X di Y" — pillola discreta in basso */
.cinema-stage.pattern-scrapbook .scrapbook-page-indicator {
  position: absolute;
  bottom: 2.5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  pointer-events: none;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(60, 45, 25, 0.55);        /* fondo scuro semi-trasparente */
  color: #e8d4a0;                            /* oro chiaro */
  font-family: "Open Sans", sans-serif;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(2px);
}

/* ============================================
   Pattern E (Scrapbook) — Fullscreen C1 (foto; video=C2, zoom=Fase D)
   ============================================ */
.scrapbook-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;                       /* sopra le nav-zone (z10/11) */
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  box-sizing: border-box;
}
.scrapbook-fullscreen-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;                 /* foto intera, niente crop (niente zoom in C1) */
}
.scrapbook-fullscreen-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;                 /* C2: video intero, niente crop; <video controls> = controlli nativi */
}
.scrapbook-fullscreen-close {
  position: absolute;
  top: env(safe-area-inset-top, 16px);
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 185, 120, 0.6);   /* oro soft */
  color: #f4ecd8;                                /* avorio */
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

/* Pulsante Home (alto-sinistra) — torna alla home dallo scrapbook immersivo */
.cinema-home-btn {
  position: fixed;
  top: env(safe-area-inset-top, 16px);
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 185, 120, 0.6);   /* oro soft */
  color: #f4ecd8;                                /* avorio */
  font-size: 20px;
  text-decoration: none;
  z-index: 12;            /* sopra nav-zone(10)/frecce-indicatore(11), SOTTO fullscreen(1000) */
  pointer-events: auto;
}
/* In fullscreen l'overlay opaco (z-1000) copre il pulsante → sparisce da solo, nessuna collisione con la X */

/* ============================================
   Pattern E — Responsive
   ============================================ */
@media (max-width: 767px) {
  /* ===== Pattern E (Scrapbook) — mobile portrait (Fase B) ===== */
  /* Stage: usa l'altezza VISIBILE (dvh) per evitare il bug 100vh con le barre browser mobile */
  .cinema-stage.pattern-scrapbook {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* Pagina: 2 media IMPILATI verticalmente, centrati, dentro lo schermo (niente scroll) */
  .cinema-stage.pattern-scrapbook .scrapbook-page-content {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 3vh;
    height: 100vh;
    height: 100dvh;
    padding: 4vh 6vw 9vh 6vw;   /* extra in basso per l'indicatore "X / Y" */
    box-sizing: border-box;
  }

  /* Ogni polaroid: ~metà altezza disponibile, larghezza generosa ma dentro lo schermo */
  .cinema-stage.pattern-scrapbook .scrapbook-photo {
    max-width: 80vw;        /* sovrascrive il 70vw precedente */
    max-height: 42vh;       /* ~metà schermo meno gap/indicatore — TARARE nel test */
    width: auto;
  }
  /* Media interi nel box polaroid (niente crop). max-height < 42vh per il bordo polaroid (padding 12/40px) */
  .cinema-stage.pattern-scrapbook .scrapbook-photo img,
  .cinema-stage.pattern-scrapbook .scrapbook-photo video,
  .cinema-stage.pattern-scrapbook .scrapbook-video,
  .cinema-stage.pattern-scrapbook .scrapbook-video-wrap {
    max-width: 100%;
    max-height: 36vh;
    object-fit: contain;
  }

  /* Frecce: touch-friendly su schermo piccolo */
  .cinema-stage.pattern-scrapbook .scrapbook-arrow {
    font-size: clamp(32px, 9vw, 56px);
  }

  /* Indicatore "X / Y": un po' più in alto dal bordo, non sotto le barre del browser */
  .cinema-stage.pattern-scrapbook .scrapbook-page-indicator {
    bottom: 18px;
    font-size: clamp(13px, 4vw, 18px);
  }
}

/* ============================================
   Pattern D: PARTICLE BURST (Photo Explosion) — foundation
   ============================================ */

.cinema-stage.pattern-burst {
  background: #000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.burst-layer {
  position: absolute;
  inset: 0;
}

.burst-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 30vw, 500px);
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transform: translate(calc(-50% + var(--tx,0)), calc(-50% + var(--ty,0))) scale(1) rotate(var(--rot,0deg));
  opacity: 1;
  animation: burstExplode 0.7s cubic-bezier(0.2, 0.85, 0.3, 1.1);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: transform, opacity;
}

.burst-photo img,
.burst-photo video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: cover;
}

.burst-photo.featured {
  width: clamp(300px, 40vw, 680px);
  box-shadow: 0 0 50px rgba(201,167,106,0.7), 0 8px 30px rgba(0,0,0,0.6);
}

.burst-photo.new-upload-glow {
  box-shadow: 0 0 70px rgba(201,167,106,0.9), 0 8px 30px rgba(0,0,0,0.6);
}

.burst-photo.burst-out {
  opacity: 0;
  transform: translate(calc(-50% + var(--tx,0)), calc(-50% + var(--ty,0))) scale(0.7) rotate(var(--rot,0deg));
}

@keyframes burstExplode {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx,0)), calc(-50% + var(--ty,0))) scale(1) rotate(var(--rot,0deg)); opacity: 1; }
}

@media (max-width: 767px) {
  .burst-photo { width: clamp(120px, 40vw, 220px); }
  .burst-photo.featured { width: clamp(160px, 55vw, 300px); }
}

/* ============================================
   Pattern F: VIDEO DEGLI OSPITI
   ============================================ */

.cinema-stage.pattern-video {
  background: #000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-fullscreen {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.video-caption {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: var(--cinema-gold);
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  padding: 8px 24px;
  border-radius: 24px;
  white-space: nowrap;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  letter-spacing: 0.03em;
}

.video-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--cinema-bg-start);
  border: 1px solid var(--cinema-gold-soft);
  border-radius: 16px;
  padding: 48px 72px;
  text-align: center;
  box-shadow: var(--cinema-shadow);
}

.video-empty-title {
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--cinema-text);
}

.video-empty-sub {
  font-family: "Playfair Display", serif;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: var(--cinema-gold);
}