/* Pagina Magazine: copertine come oggetti — ventaglio in apertura, schede che entrano ruotando, inclinazione e riflesso al passaggio. */

.mg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }

/* ventaglio di copertine */
.mg-fan { position: relative; height: clamp(320px, 38vw, 520px); perspective: 1400px; }
.mg-fan-c {
  --mid: calc((var(--n) - 1) / 2); --d: calc(var(--i) - var(--mid));
  position: absolute; left: 50%; top: 50%; width: clamp(130px, 15vw, 210px); height: auto; margin: 0;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .25);
  transform-origin: 50% 120%;
  transform: translate(-50%, -50%) translateX(calc(var(--d) * var(--spread, 0) * 1px)) rotate(calc(var(--d) * var(--rot, 0) * 1deg)) translateY(calc(var(--mx, 0) * var(--d) * 4px));
  transition: transform 1.4s var(--ease), box-shadow .5s;
  animation: mg-in 1.2s var(--ease) calc(.15s + var(--i) * .08s) both;
}
.mg-fan.open .mg-fan-c { --spread: 58; --rot: 7; }
@keyframes mg-in { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }

/* invito a Table Stories */
.mg-intro { padding-block: 0 clamp(50px, 7vw, 90px); }
.mg-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding: clamp(24px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px);
  border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(120deg, rgba(196, 168, 130, .1), rgba(196, 168, 130, 0) 60%); }
.mg-callout-t { margin: 0; max-width: 46ch; font: 300 clamp(1.2rem, 2vw, 1.6rem)/1.4 var(--sans); letter-spacing: -.01em; }

/* nastro con i nomi */
.mg-marquee span:nth-child(even) { font-size: clamp(1.4rem, 3vw, 2.6rem); }

/* le edizioni */
.mg-list .wrap { display: grid; gap: clamp(90px, 13vw, 190px); }
.mg-item { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(30px, 7vw, 120px); align-items: center; }
.mg-item.mg-rev .mg-cover { order: 2; }
.mg-cover { position: relative; display: block; justify-self: center; width: min(420px, 100%); perspective: 1200px; }
.mg-sheet { position: relative; display: block; transform-style: preserve-3d; transition: transform .7s var(--ease); will-change: transform; }
.mg-sheet img { display: block; width: 100%; height: auto; box-shadow: 0 50px 70px -35px rgba(0, 0, 0, .85), 0 6px 14px rgba(0, 0, 0, .3); }
.mg-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .28), transparent 45%); mix-blend-mode: soft-light; }
.mg-cover:hover .mg-glare { opacity: 1; }
.mg-shadow { position: absolute; left: 10%; right: 10%; bottom: -26px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); transition: transform .7s var(--ease), opacity .7s; }
.mg-cover:hover .mg-shadow { transform: scale(.86); opacity: .7; }

.mg-text { display: grid; gap: 14px; justify-items: start; }
.mg-num { margin: 0; font: italic 400 clamp(1.4rem, 2vw, 1.8rem)/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.mg-num i { font-style: normal; color: var(--mute); margin: 0 4px; }
.mg-name { margin: 0; font: 200 clamp(2.8rem, 7vw, 6.4rem)/.92 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.mg-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mg-meta span { padding: 7px 12px 6px; border: 1px solid var(--line); border-radius: 999px; font: 400 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.mg-line { margin: 6px 0 4px; max-width: 32ch; font: italic 400 clamp(1.3rem, 2vw, 1.75rem)/1.35 var(--serif); }

/* entrata delle schede (solo con JS e movimento attivo) */
.mg-js .mg-item .mg-sheet { transform: rotateY(var(--ry, -24deg)) rotateZ(var(--rz, -6deg)) translateY(70px) scale(.9); opacity: 0; transition: transform 1.4s var(--ease), opacity 1s var(--ease); }
.mg-js .mg-item.mg-rev .mg-sheet { --ry: 24deg; --rz: 6deg; }
.mg-js .mg-item.in .mg-sheet { transform: none; opacity: 1; }
.mg-js .mg-item.in .mg-sheet.tilting { transition: transform .25s ease-out; }
.mg-js .mg-text > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.mg-js .mg-item.in .mg-text > * { opacity: 1; transform: none; }
.mg-js .mg-item.in .mg-text > :nth-child(2) { transition-delay: .08s; }
.mg-js .mg-item.in .mg-text > :nth-child(3) { transition-delay: .16s; }
.mg-js .mg-item.in .mg-text > :nth-child(4) { transition-delay: .24s; }
.mg-js .mg-item.in .mg-text > :nth-child(5) { transition-delay: .32s; }

@media (max-width: 900px) {
  .mg-hero-grid { grid-template-columns: 1fr; }
  .mg-fan { height: 300px; }
  .mg-fan.open .mg-fan-c { --spread: 34; --rot: 6; }
  .mg-fan-c { width: 120px; }
  .mg-item, .mg-item.mg-rev { grid-template-columns: 1fr; }
  .mg-item.mg-rev .mg-cover { order: 0; }
  .mg-cover { width: min(300px, 78%); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-fan-c { animation: none; transition: none; }
  .mg-js .mg-item .mg-sheet, .mg-js .mg-text > * { opacity: 1; transform: none; transition: none; }
}