/* ===================================================================================== SPLASH SCREEN — "I miei Turni" File indipendente, da linkare in con: Usa le stesse variabili --brand-* già definite nell'index.html, quindi segue automaticamente il tema colore (e la dark mode) scelti dall'utente. ===================================================================================== */ #boot-splash.splash-screen{ background: radial-gradient(circle at 50% 18%, var(--brand-50) 0%, transparent 60%), linear-gradient(180deg, #f8fafc 0%, #eef2f9 100%); transition: opacity .5s ease; opacity: 1; } html.dark #boot-splash.splash-screen{ background: radial-gradient(circle at 50% 18%, rgba(47,95,224,.18) 0%, transparent 60%), #0f172a; } #boot-splash.splash-screen.fade-out{ opacity: 0; pointer-events: none; } /* -------------------------------------------------------------- logo ---- */ .splash-logo-wrap{ width: 148px; animation: splashPopIn .6s cubic-bezier(.2,.8,.2,1); } @keyframes splashPopIn{ from{ opacity:0; transform: translateY(10px) scale(.92); } to{ opacity:1; transform: translateY(0) scale(1); } } #splashDrop{ fill: var(--brand-50); stroke: var(--brand-500); stroke-width: 5; } html.dark #splashDrop{ fill: rgba(47,95,224,.12); } /* effetto "ripple" / pulse sulla goccia */ .splash-ripple{ fill: none; stroke: var(--brand-400); stroke-width: 4; transform-origin: 100px 148px; animation: splashRipple 2.6s ease-out infinite; } @keyframes splashRipple{ 0% { transform: scale(.92); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } /* lancette dell'orologio: rotazione continua e fluida */ #splashMinuteHand{ transform-origin: 100px 158px; animation: splashRotate 6s linear infinite; } #splashHourHand{ transform-origin: 100px 158px; animation: splashRotate 30s linear infinite; } @keyframes splashRotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } /* frecce che orbitano attorno al quadrante */ #splashOrbitArrows{ transform-origin: 100px 158px; animation: splashOrbit 7s linear infinite; } #splashOrbitArrows polygon{ fill: #5b8ef2; } @keyframes splashOrbit{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } /* micro-oscillazione delle foglie, sfalsata via animation-delay inline */ .splash-leaf{ fill: #34d399; transform-box: fill-box; transform-origin: 0px 0px; animation: splashLeafSway 3.2s ease-in-out infinite; } @keyframes splashLeafSway{ 0%, 100%{ transform: rotate(0deg); } 50% { transform: rotate(6deg); } } .splash-title{ animation: splashPopIn .6s cubic-bezier(.2,.8,.2,1) .1s backwards; } /* -------------------------------------------------------------- card "pensiero del giorno" ---- */ .splash-quote-card{ width: min(320px, 86vw); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 18px 16px; text-align: center; box-shadow: 0 8px 24px -8px rgb(15 23 42 / .12); animation: splashPopIn .6s cubic-bezier(.2,.8,.2,1) .2s backwards; } html.dark .splash-quote-card{ background:#1e293b; border-color:#334155; } .splash-quote-icon{ color: var(--brand-300); font-size: 12px; } .splash-quote-label{ font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-500); margin-top: 2px; } .splash-quote-text{ font-size: 13px; font-weight: 600; color: #334155; line-height: 1.5; margin-top: 4px; min-height: 2.6em; } html.dark .splash-quote-text{ color:#e2e8f0; } /* quando il testo della citazione viene aggiornato via JS */ .splash-quote-text.fade-swap{ animation: fadeIn .35s ease-out; } /* -------------------------------------------------------------- progress bar + stato ---- */ .splash-progress-wrap{ position: fixed; left: 50%; bottom: calc(48px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(220px, 70vw); display: flex; flex-direction: column; align-items: center; gap: 10px; } .splash-progress-track{ width: 100%; height: 5px; border-radius: 999px; background: var(--brand-100); overflow: hidden; } html.dark .splash-progress-track{ background:#334155; } .splash-progress-bar{ height: 100%; width: 40%; border-radius: 999px; background: var(--brand-500); animation: splashProgress 1.4s ease-in-out infinite; } @keyframes splashProgress{ 0% { transform: translateX(-100%); } 100%{ transform: translateX(250%); } } .splash-status-text{ font-size: 11px; font-weight: 600; color: #64748b; text-align: center; } html.dark .splash-status-text{ color:#94a3b8; } /* rispetta le preferenze di riduzione del movimento */ @media (prefers-reduced-motion: reduce){ .splash-ripple, #splashMinuteHand, #splashHourHand, #splashOrbitArrows, .splash-leaf, .splash-progress-bar, .splash-logo-wrap, .splash-title, .splash-quote-card{ animation: none !important; } }