/* scene.css — la scena a lume di candela: vuoto, bagliore, pulviscolo, pergamena, rulli, penna */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--void-deep);
  color: var(--ink);
  font-family: var(--font-script);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* --- Vuoto caldo --- */
.void {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 62%, var(--void) 0%, var(--void-deep) 62%, #07060a 100%);
  z-index: 0;
}

/* --- Bagliore candela (animato da JS per il flicker) --- */
.glow {
  position: fixed;
  left: 50%;
  top: 58%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side,
      color-mix(in oklab, var(--candle) 42%, transparent) 0%,
      color-mix(in oklab, var(--candle) 16%, transparent) 34%,
      transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

/* --- Pulviscolo dorato --- */
.dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}

/* --- Palco --- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  perspective: 1400px;
  padding: max(2.4vh, 0.7rem) 0.6rem;
}

/* --- Pergamena (rotolo) --- */
.scroll {
  position: relative;
  width: min(97vw, 36rem);
  aspect-ratio: 3 / 4;
  max-height: 95vh;
  will-change: transform;
}

.scroll__reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(43% 0% 43% 0%);
  will-change: clip-path;
  z-index: 1;
}

.sheet {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background:
    /* venature/macchie: più numerose e più scure per leggersi anche piccole */
    radial-gradient(55% 40% at 16% 14%, color-mix(in oklab, var(--parchment-edge) 42%, transparent), transparent 58%),
    radial-gradient(48% 38% at 86% 82%, color-mix(in oklab, var(--parchment-edge) 40%, transparent), transparent 60%),
    radial-gradient(42% 34% at 70% 26%, color-mix(in oklab, var(--parchment-aged) 55%, transparent), transparent 58%),
    radial-gradient(38% 30% at 30% 70%, color-mix(in oklab, var(--parchment-edge) 30%, transparent), transparent 55%),
    radial-gradient(30% 24% at 55% 92%, color-mix(in oklab, var(--parchment-shadow) 35%, transparent), transparent 60%),
    /* bordi bruciati: anello più marcato */
    radial-gradient(115% 115% at 50% 50%, transparent 52%, color-mix(in oklab, var(--parchment-edge) 68%, transparent) 84%, color-mix(in oklab, var(--parchment-shadow) 75%, #000 10%) 100%),
    /* base */
    linear-gradient(155deg, var(--parchment) 0%, var(--parchment-aged) 100%);
  box-shadow:
    inset 0 0 46px color-mix(in oklab, var(--parchment-edge) 55%, transparent),
    inset 0 0 6px color-mix(in oklab, var(--parchment-shadow) 40%, transparent);
  /* grana carta (SVG rasterizzato una volta, più fine e più visibile) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.4' intercept='-0.15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  /* bordo strappato: mask displaced (SVG rasterizzato una volta), più irregolare */
  -webkit-mask: var(--deckle);
  mask: var(--deckle);
  --deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cfilter id='t' x='-8%25' y='-8%25' width='116%25' height='116%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.019' numOctaves='5' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='24' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='9' y='9' width='282' height='382' rx='5' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* strato grana sopra la base, in multiply */
.sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.62;
  border-radius: 4px;
  pointer-events: none;
}

.sheet__inner {
  position: absolute;
  inset: 0;
  /* margine più ampio: il testo non è più tagliato dalla maschera del bordo strappato
     (ora appartiene solo a .sheet), ma resta comunque lontano dalla zona irregolare */
  padding: clamp(1.3rem, 5.2%, 2.1rem) clamp(1.9rem, 8%, 2.9rem);
  display: flex;
  flex-direction: column;
}

/* --- Rulli: il fascio arrotolato di pergamena, non un'asta --- */
.roller {
  position: absolute;
  left: -0.5%;
  width: 101%;
  height: clamp(44px, 12.5%, 72px);
  top: 50%;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--parchment) 92%, #fff 8%) 0%,
      var(--parchment) 20%,
      var(--parchment-aged) 42%,
      var(--parchment-edge) 66%,
      color-mix(in oklab, var(--parchment-shadow) 80%, #000 12%) 100%);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.55),
    inset 0 3px 4px color-mix(in oklab, var(--parchment) 85%, #fff 15%),
    inset 0 -4px 8px color-mix(in oklab, var(--parchment-shadow) 75%, #000 8%);
  z-index: 4;
  will-change: transform;
  transform-origin: center;
}
.roller::before {
  /* sottili pieghe orizzontali: strati di pergamena arrotolata */
  content: "";
  position: absolute;
  inset: 8% 8%;
  border-radius: 999px;
  background: repeating-linear-gradient(180deg,
    transparent 0 3px,
    color-mix(in oklab, var(--parchment-shadow) 55%, transparent) 3px 4px,
    transparent 4px 9px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.roller::after {
  /* testate: anelli concentrici che suggeriscono il rotolo visto di taglio */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    repeating-radial-gradient(circle at 5% 50%,
      color-mix(in oklab, var(--parchment-shadow) 65%, #000 15%) 0 1.4px, transparent 1.4px 4.2px),
    repeating-radial-gradient(circle at 95% 50%,
      color-mix(in oklab, var(--parchment-shadow) 65%, #000 15%) 0 1.4px, transparent 1.4px 4.2px);
  opacity: 0.6;
}
.roller--top { transform: translateY(-50%); }
.roller--bottom { transform: translateY(-50%); }

/* --- Strato sigillo + cordicelle --- */
.seal-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(118px, 40%, 184px);
  transform: translate(-50%, -50%);
  z-index: 6;
  will-change: transform, opacity;
}
.seal-layer svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Penna (quill) --- */
.pen {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(64px, 14.5vw, 104px);
  transform-origin: left top;
  opacity: 0;
  z-index: 7;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
.pen svg { display: block; width: 100%; height: auto; }

/* --- Vignettatura --- */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(120% 100% at 50% 46%, transparent 52%, rgba(10,6,2,0.55) 100%);
  mix-blend-mode: multiply;
}