/* Componente "telefono" tematizzato (landing hero + anteprima onboarding). Le variabili --aurora-* sono scritte su .phone da js/theme.js. */
/* ---------- telefono (anteprima tematizzata: le variabili --aurora-* vengono scritte su .phone da JS) ---------- */
.phone { --w: min(270px, 70vw); width: var(--w); aspect-ratio: 9 / 19; border-radius: calc(var(--w) * .16); padding: 9px; background: linear-gradient(145deg, #2a2a32, #0d0d12 40%, #1c1c22); box-shadow: 0 0 0 1px rgb(255 255 255 / .1), var(--elev-glass-2), 0 30px 90px -30px color-mix(in srgb, var(--aurora-glow-a) 70%, transparent); transform-style: preserve-3d; animation: phoneFloat 7s var(--motion-ease-in-out) infinite alternate; transition: transform var(--motion-duration-slow) var(--motion-ease-out); }
@keyframes phoneFloat { from { transform: translate3d(0, 0, 0) rotateX(4deg) rotateY(-8deg); } to { transform: translate3d(0, -12px, 0) rotateX(2deg) rotateY(6deg); } }
.phone.is-tilting { animation: none; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .13); background: var(--aurora-bg); color: var(--aurora-text); display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 0; font-size: 12px; transition: background-color var(--motion-duration-screen); }
.phone__bg { position: absolute; inset: 0; pointer-events: none; }
.pblob { position: absolute; border-radius: 50%; will-change: transform; }
.pblob--a { width: 130%; aspect-ratio: 1; left: -50%; top: -30%; background: radial-gradient(circle, color-mix(in srgb, var(--aurora-glow-a) 70%, transparent), transparent 64%); animation: driftA 14s var(--motion-ease-in-out) infinite alternate; }
.pblob--b { width: 110%; aspect-ratio: 1; right: -55%; bottom: 0; background: radial-gradient(circle, color-mix(in srgb, var(--aurora-glow-b) 60%, transparent), transparent 64%); animation: driftB 16s var(--motion-ease-in-out) infinite alternate; }
.phone__screen > :not(.phone__bg) { position: relative; }
.phone__status { display: flex; align-items: center; justify-content: space-between; font-weight: 650; font-size: 11px; padding: 0 8px; height: 20px; }
.phone__island { width: 34%; height: 20px; border-radius: 12px; background: #000; }
.phone__icons { display: flex; gap: 3px; } .phone__icons i { width: 4px; height: 8px; border-radius: 1px; background: currentColor; } .phone__icons i:nth-child(2) { height: 10px; } .phone__icons i:nth-child(3) { height: 12px; }
.phone__head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.phone__logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); box-shadow: var(--elev-glow); transition: background var(--motion-duration-screen); }
.phone__hi { font-size: 11px; color: var(--aurora-text-muted); line-height: 1.2; }
.phone__gym { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--w) * .62); }
.pass { position: relative; border-radius: 20px; padding: 12px; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--aurora-glow-a) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / .3); }
.pass::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 90% 0%, color-mix(in srgb, var(--aurora-glow-a) 80%, transparent), transparent 60%), rgb(0 0 0 / var(--scrim-pass-black)); pointer-events: none; }
.pass::after { content: ""; position: absolute; top: -50%; left: -30%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .22), transparent); transform: rotate(20deg) translateX(-200%); animation: passShine 5s var(--motion-ease-in-out) infinite; }
@keyframes passShine { 0%, 55% { transform: rotate(20deg) translateX(-200%); } 100% { transform: rotate(20deg) translateX(600%); } }
.pass > * { position: relative; }
.pass__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pass__label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pass__ok { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgb(0 0 0 / .3); }
.pass__ok svg { width: 11px; height: 11px; }
.pass__body { display: flex; gap: 10px; align-items: center; }
.pass__qr { width: 62px; height: 62px; padding: 5px; border-radius: 10px; background: #fff; flex: none; }
.pass__name { font-weight: 750; font-size: 13px; line-height: 1.2; }
.pass__exp { font-size: 10.5px; opacity: .92; }
.phone__sec { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aurora-text-muted); margin-top: 2px; }
.courses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.course { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--glass-gradient), var(--scrim-glass-color); border: 1px solid var(--glass-stroke); animation: courseIn var(--motion-duration-slow) var(--motion-ease-out) both; }
.course:nth-child(1) { animation-delay: 400ms; } .course:nth-child(2) { animation-delay: 460ms; } .course:nth-child(3) { animation-delay: 520ms; }
@keyframes courseIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.course__time { font-weight: 700; color: var(--aurora-brand-text); font-size: 11px; }
.course__name { flex: 1; font-weight: 650; font-size: 12px; }
.course__cta { font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); }
.course__cta.is-done { background: var(--status-ok-bg); color: var(--status-ok); }
.course__cta.pop { animation: pop var(--motion-duration-slow) var(--motion-ease-spring); }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(var(--motion-scale-pop)); } 100% { transform: scale(1); } }
.phone__tabs { margin-top: auto; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-around; height: 50px; border-radius: 20px; background: var(--glass-gradient), var(--scrim-sheet-color); border: 1px solid var(--glass-stroke); color: var(--aurora-text-muted); }
.phone__tabs svg { width: 18px; height: 18px; }
.phone__fab { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--aurora-primary), var(--aurora-primary-to)); box-shadow: var(--elev-glow); transform: translateY(-8px); }


@media (prefers-reduced-motion: reduce) { .phone, .pblob, .pass::after, .course { animation: none !important; } .phone { transform: none; } }