/* it.simonerenzi.com · sezione "App mobile": iPhone 3D su fondo scuro, guidato dallo scorrimento */
.cx-mob{position:relative;background:#000;color:#f5f5f7;overflow:hidden}
.cx-mob-stage{position:relative;height:100vh;height:100lvh;min-height:600px;overflow:hidden}
.cx-mob-glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 55% at 50% 58%,rgba(70,90,140,.28) 0%,rgba(0,0,0,0) 70%),
  radial-gradient(35% 30% at 50% 100%,rgba(0,113,227,.16) 0%,rgba(0,0,0,0) 70%)}
.cx-mob-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cx-mob-fallback{display:none;position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(300px,60vw);aspect-ratio:1320/2868;border-radius:46px;overflow:hidden;border:10px solid #2a2a2d;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.cx-mob-fallback img{width:100%;height:100%;object-fit:cover;max-width:none}
.cx-mob.no-gl .cx-mob-fallback{display:block}
.cx-mob.no-gl .cx-mob-canvas{display:none}

.cx-mob-intro,.cx-mob-outro{position:absolute;left:var(--gut,24px);right:var(--gut,24px);text-align:center;pointer-events:none;z-index:2}
.cx-mob-intro{top:clamp(96px,14vh,150px)}
.cx-mob-eyebrow{margin:0 0 18px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#86868b}
.cx-mob-title{margin:0;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(46px,7vw,120px);line-height:.95;letter-spacing:-.055em;color:#f5f5f7}
.cx-mob-title span{color:#6e6e73}
.cx-mob-outro .cx-mob-title{font-size:clamp(40px,5.4vw,92px)}
.cx-mob-outro .cx-mob-title span{color:#a1a1a6}
.cx-mob-outro{bottom:calc(clamp(40px,8vh,90px) + var(--sb,0px));pointer-events:auto;opacity:0;visibility:hidden}
.cx-mob-sub{margin:20px auto 0;max-width:34ch;font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;color:#86868b;line-height:1.3}
.cx-mob-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.cx-mob-btn{min-height:50px;padding:0 26px;border-radius:999px;display:inline-flex;align-items:center;font-size:16px;font-weight:600;color:#f5f5f7;box-shadow:inset 0 0 0 1.5px rgba(245,245,247,.35);text-decoration:none;transition:background .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.cx-mob-btn:hover{transform:translateY(-2px);background:rgba(245,245,247,.08);color:#fff}
.cx-mob-btn-main{background:#0071e3;box-shadow:none}
.cx-mob-btn-main:hover{background:#0077ed}

.cx-mob-caps{position:absolute;inset:0;pointer-events:none;z-index:2}
.cx-mob-cap{position:absolute;top:50%;width:min(420px,34vw);transform:translateY(-50%);opacity:0;visibility:hidden}
.cx-mob-cap[data-side="l"]{left:max(var(--gut,24px),7vw)}
.cx-mob-cap[data-side="r"]{right:max(var(--gut,24px),7vw)}
.cx-mob-k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#2997ff}
.cx-mob-cap h3{margin:0 0 16px;font-size:clamp(34px,3.6vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1;color:#f5f5f7}
.cx-mob-cap p:last-child{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;font-weight:500;color:#a1a1a6}
.cx-mob-bar{position:absolute;left:50%;bottom:calc(22px + var(--sb,0px));width:min(220px,40vw);height:3px;transform:translateX(-50%);border-radius:3px;background:rgba(245,245,247,.12);overflow:hidden;z-index:3}
.cx-mob-bar i{display:block;height:100%;width:100%;background:#f5f5f7;transform-origin:0 50%;transform:scaleX(0)}

/* finale: il video a tutto schermo (lo stesso che gira dentro l'iPhone) */
.cx-mob-full{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:#000}
.cx-mob-full video{display:block;width:100%;height:100%;object-fit:contain}
.cx-mob-shade{position:absolute;inset:0;opacity:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.58) 100%)}
html:not(.cx) .cx-mob-full{display:none}

.cx-mob-credit{display:none!important}

/* senza animazioni: tutto visibile, in colonna */
html:not(.cx) .cx-mob-stage{height:auto;min-height:0;padding:110px var(--gut,24px)}
html:not(.cx) .cx-mob-intro,html:not(.cx) .cx-mob-outro,html:not(.cx) .cx-mob-caps,html:not(.cx) .cx-mob-cap{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none;opacity:1;visibility:visible;width:auto;margin:0 auto 48px;max-width:640px}
html:not(.cx) .cx-mob-canvas,html:not(.cx) .cx-mob-bar{display:none}

@media (max-width:820px){
  .cx-mob-intro{top:clamp(80px,11vh,110px)}
  .cx-mob-cap{top:auto;bottom:calc(clamp(28px,6vh,60px) + var(--sb,0px));left:var(--gut,20px)!important;right:var(--gut,20px)!important;width:auto;transform:none;text-align:center;padding:22px 20px;border-radius:26px;background:rgba(18,18,20,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .cx-mob-cap h3{font-size:30px;margin-bottom:10px}
  .cx-mob-cap p:last-child{font-size:15px}
  .cx-mob-k{margin-bottom:8px;font-size:11px}
  .cx-mob-title{font-size:clamp(40px,12vw,64px)}
  .cx-mob-outro{bottom:calc(44px + var(--sb,0px))}
}