/* ============================================================
   mc-story.css  —  MagicContract storyboard (mockup del prodotto)
   4 step, ognuno con la UI reale dentro una cornice telefono.
   Sostituisce how-section.css (animazioni SVG fatte a mano).
   ============================================================ */
.mc-story-section { overflow: hidden; }
.mc-story-header { max-width: 640px; margin: 0 auto 60px; }
.mc-story-lead { color: rgba(29,29,31,0.6); }

.mc-story { display: flex; flex-direction: column; gap: 84px; max-width: 1060px; margin: 0 auto; }
.mc-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.mc-stage--reverse .mc-stage-text { order: 2; }
.mc-stage--reverse .mc-stage-mock { order: 1; }

.mc-stage-text { max-width: 440px; }
.mc-stage-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.mc-stage-num { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; color: #fff; background: linear-gradient(135deg,#ff6b00,#ff8a3d); width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(255, 107, 0,0.28); }
.mc-stage-title { font-size: clamp(1.55rem,3vw,2.05rem); font-weight: 800; letter-spacing: -0.03em; color: #1d1d1f; margin: 0 0 14px; line-height: 1.12; }
.mc-stage-desc { font-size: 1.03rem; line-height: 1.6; color: rgba(29,29,31,0.6); margin: 0; }

/* ---- device frame ---- */
.mc-stage-mock { display: flex; justify-content: center; }
.mc-phone { width: 272px; border-radius: 40px; background: linear-gradient(155deg,#20242e,#0a0c11); padding: 13px; position: relative;
  box-shadow: 0 34px 80px rgba(12, 12, 14,0.30), 0 4px 14px rgba(12, 12, 14,0.14), inset 0 0 0 1px rgba(255,255,255,0.05); }
.mc-phone::before { content:''; position:absolute; top:25px; left:50%; transform:translateX(-50%); width:84px; height:5px; border-radius: 999px; background:rgba(255,255,255,0.16); z-index:3; }
.mc-screen { border-radius: 30px; background: #f4f5f9; overflow: hidden; height: 500px; padding: 40px 16px 18px; display: flex; flex-direction: column; }

/* ---- shared UI bits ---- */
.mc-ui-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mc-ui-title { font-size:0.86rem; font-weight: 700; color:#1d1d1f; letter-spacing:-0.01em; }
.mc-pill { font-size:0.58rem; font-weight: 800; padding:4px 9px; border-radius: 999px; display:inline-flex; align-items:center; gap:4px; letter-spacing:0.02em; text-transform:uppercase; }
.mc-pill--ai { background:rgba(255, 138, 61,0.16); color:#e25a00; }
.mc-pill--eidas { background:rgba(255, 107, 0,0.12); color:#0062cc; }
.mc-pill svg { width:10px; height:10px; }
.mc-check { width:18px; height:18px; border-radius:50%; background:#34d399; color:#fff; display:grid; place-items:center; flex:0 0 auto; }
.mc-check svg { width:11px; height:11px; }

/* Stage 1: dossier */
.mc-doc-row { display:flex; align-items:center; gap:9px; padding:9px 10px; background:#fff; border:1px solid rgba(12, 12, 14,0.06); border-radius:12px; margin-bottom:8px; box-shadow:0 1px 3px rgba(12, 12, 14,0.04); }
.mc-doc-ic { width:24px; height:24px; border-radius:7px; background:rgba(255, 107, 0,0.1); color:#ff6b00; display:grid; place-items:center; flex:0 0 auto; }
.mc-doc-ic svg { width:13px; height:13px; }
.mc-doc-name { font-size:0.72rem; font-weight:600; color:#1d1d1f; flex:1; }
.mc-prog { margin-top:auto; padding-top:14px; }
.mc-prog-bar { height:7px; border-radius: 999px; background:rgba(12, 12, 14,0.08); overflow:hidden; }
.mc-prog-fill { height:100%; width:100%; border-radius: 999px; background:linear-gradient(90deg,#ff8a3d,#ffa766); }
.mc-prog-label { display:flex; justify-content:space-between; font-size:0.66rem; font-weight:700; color:#e25a00; margin-top:7px; }

/* Stage 2: postulez */
.mc-listing { background:#fff; border:1px solid rgba(12, 12, 14,0.06); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(12, 12, 14,0.05); }
.mc-listing-img { height:96px; background:linear-gradient(135deg,#a5c8ff,#dfeaff); position:relative; }
.mc-listing-img::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255, 107, 0,0.18),rgba(255, 167, 102,0.18)); }
.mc-listing-body { padding:10px 12px; }
.mc-listing-t { font-size:0.76rem; font-weight:700; color:#1d1d1f; }
.mc-listing-sub { font-size:0.64rem; color:#6e6e73; margin-top:2px; }
.mc-listing-price { font-size:0.84rem; font-weight: 800; color:#ff6b00; margin-top:6px; }
.mc-btn { margin-top:14px; width:100%; padding:11px; border-radius:12px; background:linear-gradient(135deg,#ff6b00,#ff8a3d); color:#fff; font-size:0.74rem; font-weight: 700; text-align:center; box-shadow:0 8px 18px rgba(255, 107, 0,0.3); }
.mc-toast { margin-top:12px; display:flex; align-items:center; gap:8px; padding:9px 11px; background:rgba(255, 138, 61,0.14); border:1px solid rgba(255, 138, 61,0.3); border-radius:11px; }
.mc-toast-txt { font-size:0.66rem; font-weight:700; color:#e25a00; }

/* Stage 3: signez */
.mc-contract-t { font-size:0.78rem; font-weight: 700; color:#1d1d1f; margin-bottom:12px; }
.mc-line { height:6px; border-radius: 999px; background:rgba(12, 12, 14,0.09); margin-bottom:8px; }
.mc-line.w90{width:90%}.mc-line.w70{width:70%}.mc-line.w80{width:80%}.mc-line.w50{width:50%}
.mc-sign-card { margin-top:14px; background:#fff; border:1px dashed rgba(255, 107, 0,0.4); border-radius:13px; padding:12px; }
.mc-sign-label { font-size:0.6rem; font-weight:700; color:#6e6e73; text-transform:uppercase; letter-spacing:0.04em; }
.mc-sign-svg { width:100%; height:42px; margin:4px 0; }
.mc-sign-foot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.mc-sign-name { font-size:0.66rem; font-weight:700; color:#1d1d1f; }

/* Stage 4: payez */
.mc-pay { margin:auto 0; text-align:center; }
.mc-pay-ic { width:54px; height:54px; border-radius:50%; background:rgba(255, 138, 61,0.16); color:#e25a00; display:grid; place-items:center; margin:0 auto 14px; }
.mc-pay-ic svg { width:26px; height:26px; }
.mc-pay-amt { font-size:2rem; font-weight: 700; letter-spacing:-0.03em; color:#1d1d1f; }
.mc-pay-sub { font-size:0.66rem; font-weight:700; color:#e25a00; text-transform:uppercase; letter-spacing:0.06em; margin-top:2px; }
.mc-pay-row { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding:11px 13px; background:#fff; border:1px solid rgba(12, 12, 14,0.06); border-radius:12px; box-shadow:0 1px 3px rgba(12, 12, 14,0.04); }
.mc-pay-row-l { font-size:0.68rem; color:#6e6e73; }
.mc-pay-row-r { font-size:0.7rem; font-weight: 700; color:#1d1d1f; }

@media (max-width: 860px) {
  .mc-stage { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .mc-stage--reverse .mc-stage-text { order: 0; }
  .mc-stage--reverse .mc-stage-mock { order: 0; }
  .mc-stage-text { max-width: 480px; }
  .mc-stage-desc { margin: 0 auto; }
  .mc-stage-badge { justify-content: center; }
}


/* ── Scrollytelling pinnato: i 4 step si avvicendano allo scroll ── */
.mc-story-section { overflow: visible !important; } /* sticky non funziona con overflow:hidden sull'antenato */
.mc-story--scroll { position: relative; height: 440vh; gap: 0 !important; }
.mc-story--scroll .mc-story-pin { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: block; }
.mc-story--scroll .mc-stage { position: absolute; top: 50%; left: 50%; width: min(1060px, 92vw); margin: 0;
  transform: translate(-50%, -44%); opacity: 0 !important; transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.mc-story--scroll .mc-stage.is-active { opacity: 1 !important; transform: translate(-50%, -50%); pointer-events: auto; }
.mc-story--scroll .mc-stage--reverse .mc-stage-text { order: 0; }
.mc-story--scroll .mc-stage--reverse .mc-stage-mock { order: 0; }
.mc-story-dots { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 6; }
.mc-story-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: all .3s ease; }
.mc-story-dot.is-on { background: #ff6b00; width: 26px; border-radius: 5px; }
@media (max-width: 760px){
  .mc-story--scroll { height: auto !important; }
  .mc-story--scroll .mc-story-pin { position: static; height: auto; }
  .mc-story--scroll .mc-stage { position: static; transform: none !important; opacity: 1 !important; margin: 0 auto 60px; }
  .mc-story-dots { display: none; }
}


/* ════════ mc-story v3: iPhone 17 Pro GRIGIO titanio, sezione HERO, animazione Apple ════════ */
.mc-story--scroll .mc-story-pin {
  display: grid !important; grid-template-columns: 1.05fr 1fr; gap: 64px;
  align-items: center; max-width: 1140px; margin: 0 auto; width: 100%; height: 100vh; padding: 0 32px;
  background: radial-gradient(120% 75% at 72% 50%, rgba(255,107,0,0.06), transparent 58%);
}
.mc-story-textcol { position: relative; min-height: 340px; }
.mc-story--scroll .mc-story-text {
  position: absolute; left: 0; right: 0; top: 50%; max-width: 500px;
  opacity: 0; transform: translateY(calc(-50% + 30px)); filter: blur(6px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), filter .6s ease;
  pointer-events: none;
}
.mc-story--scroll .mc-story-text.is-active { opacity: 1; transform: translateY(-50%); filter: none; pointer-events: auto; }
.mc-story--scroll .mc-story-text .mc-stage-num { width: 48px; height: 48px; border-radius: 15px; font-size: 0.95rem; }
.mc-story--scroll .mc-story-text .mc-stage-title { font-size: clamp(2rem, 3.3vw, 2.7rem); line-height: 1.08; }
.mc-story--scroll .mc-story-text .mc-stage-desc { font-size: 1.13rem; line-height: 1.62; }

/* colonna telefono + alone arancione ambientale */
.mc-story-phonecol { position: relative; display: flex; justify-content: center; align-items: center; }
.mc-story-phonecol::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 480px; height: 480px;
  transform: translate(-50%,-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,107,0,0.22) 0%, rgba(255,107,0,0.06) 42%, transparent 70%);
  filter: blur(26px);
}
.mc-story-phonecol .mc-phone { position: relative; z-index: 1; }

.mc-screen-stack { position: relative; width: 100%; max-width: 304px; height: 580px; border-radius: 46px; overflow: hidden; background: #f4f5f9; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }

/* transizione schermata: settle-zoom + fade (stile Apple) */
.mc-story-screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.045) translateY(10px);
  transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.mc-story-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.mc-story--scroll .mc-story-screen { padding-top: 56px; }
/* reveal a cascata del contenuto dentro la schermata attiva */
.mc-story--scroll .mc-story-screen > * { opacity: 0; transform: translateY(13px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.mc-story--scroll .mc-story-screen.is-active > * { opacity: 1; transform: none; }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(1){ transition-delay: .14s }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(2){ transition-delay: .20s }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(3){ transition-delay: .26s }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(4){ transition-delay: .32s }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(5){ transition-delay: .38s }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(6){ transition-delay: .44s }
.mc-story--scroll .mc-story-screen.is-active > *:nth-child(7){ transition-delay: .50s }

/* riflesso vetro + leggera fluttuazione */
.mc-screen-gloss { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(122deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 16%, transparent 36%); }
@keyframes mcPhoneFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }
.mc-story--scroll .mc-phone--pro { animation: mcPhoneFloat 6.5s ease-in-out infinite; }

/* ───── iPhone 17 Pro · titanio GRIGIO, Dynamic Island, tasti laterali ───── */
.mc-phone--pro {
  width: 328px; border-radius: 56px; padding: 12px; position: relative;
  background: linear-gradient(135deg, #f4f5f7 0%, #bcbfc4 14%, #d9dbde 28%, #9a9da3 49%, #cfd2d6 66%, #adb0b5 82%, #e8e9ec 100%);
  box-shadow:
    0 54px 120px rgba(0,0,0,0.58), 0 14px 34px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.6),
    inset 0 0 0 7px #050608,
    inset 0 0 3px 7px rgba(0,0,0,0.55);
}
.mc-phone--pro::before {
  content: ''; position: absolute; top: 27px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 34px; border-radius: 18px; z-index: 8;
  background: radial-gradient(circle 3.2px at 76% 50%, #16242f 0 3.2px, #050a0f 3.6px 5px, #000 5.4px), #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.5);
}
/* tasti laterali in titanio */
.mc-phone--pro .mc-phone-btn { position: absolute; z-index: 1; border-radius: 2px;
  background: linear-gradient(90deg, #83868c 0%, #c9ccd0 50%, #83868c 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.mc-phone-btn--action { left: -3px; top: 122px; width: 3px; height: 30px; border-radius: 3px 0 0 3px; }
.mc-phone-btn--volup  { left: -3px; top: 172px; width: 3px; height: 54px; border-radius: 3px 0 0 3px; }
.mc-phone-btn--voldn  { left: -3px; top: 238px; width: 3px; height: 54px; border-radius: 3px 0 0 3px; }
.mc-phone-btn--power  { right: -3px; top: 176px; width: 3px; height: 84px; border-radius: 0 3px 3px 0; }
@media (prefers-reduced-motion: reduce){ .mc-story--scroll .mc-phone--pro { animation: none; } }