Buon Natale 2024<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rouge+Script&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg-start: #0a1628;\r\n --bg-end: #1a2940;\r\n --glass-bg: rgba(255, 255, 255, 0.03);\r\n --glass-border: rgba(255, 255, 255, 0.1);\r\n --text-primary: #e8e8e8;\r\n --text-secondary: #a0a0a0;\r\n --accent: #d4af37;\r\n --snow: #ffffff;\r\n }\r\n\r\n body {\r\n width: 100%;\r\n height: 100vh;\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Montserrat', sans-serif;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .container {\r\n position: relative;\r\n text-align: center;\r\n z-index: 10;\r\n }\r\n\r\n .snow-globe {\r\n position: relative;\r\n width: 340px;\r\n height: 340px;\r\n margin: 0 auto 30px;\r\n border-radius: 50%;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid var(--glass-border);\r\n box-shadow: \r\n 0 8px 32px 0 rgba(0, 0, 0, 0.3),\r\n inset 0 0 60px rgba(255, 255, 255, 0.02);\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .snow-globe.shaking {\r\n animation: shake 0.3s ease-in-out;\r\n }\r\n\r\n .snow-globe.breaking {\r\n animation: crack 0.5s ease-out forwards;\r\n }\r\n\r\n @keyframes crack {\r\n 0% { \r\n transform: scale(1);\r\n opacity: 1;\r\n filter: brightness(1);\r\n }\r\n 30% { \r\n transform: scale(1.02);\r\n opacity: 0.95;\r\n filter: brightness(1.2);\r\n }\r\n 60% { \r\n transform: scale(1.08);\r\n opacity: 0.7;\r\n filter: brightness(1.5);\r\n }\r\n 100% { \r\n transform: scale(1.2);\r\n opacity: 0;\r\n filter: brightness(2);\r\n }\r\n }\r\n\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0) rotate(0deg); }\r\n 10% { transform: translateX(-2px) rotate(-0.5deg); }\r\n 20% { transform: translateX(2px) rotate(0.5deg); }\r\n 30% { transform: translateX(-2px) rotate(-0.3deg); }\r\n 40% { transform: translateX(2px) rotate(0.3deg); }\r\n 50% { transform: translateX(-1px) rotate(-0.2deg); }\r\n 60% { transform: translateX(1px) rotate(0.2deg); }\r\n 70% { transform: translateX(-1px) rotate(-0.1deg); }\r\n 80% { transform: translateX(1px) rotate(0.1deg); }\r\n 90% { transform: translateX(-0.5px) rotate(0deg); }\r\n }\r\n\r\n .globe-content {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n width: 80%;\r\n opacity: 1;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n .globe-content.fade-out {\r\n opacity: 0;\r\n }\r\n\r\n .globe-content h2 {\r\n font-family: \"Rouge Script\", serif;\r\n font-style: italic;\r\n font-size: 4rem;\r\n font-weight: 300;\r\n color: var(--text-primary);\r\n margin: 0;\r\n letter-spacing: 2px;\r\n line-height: 1.3;\r\n }\r\n\r\n .globe-content .year {\r\n font-size: 28px;\r\n color: var(--accent);\r\n margin-top: 8px;\r\n font-weight: 300;\r\n letter-spacing: 4px;\r\n }\r\n\r\n .snow-container {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .fill-level {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 0%;\r\n background: linear-gradient(to top, \r\n rgba(255, 255, 255, 0.95) 0%, \r\n rgba(255, 255, 255, 0.85) 30%,\r\n rgba(255, 255, 255, 0.6) 70%,\r\n rgba(255, 255, 255, 0.2) 100%);\r\n transition: height 0.3s ease-out;\r\n pointer-events: none;\r\n border-radius: 0 0 50% 50%;\r\n filter: blur(2px);\r\n }\r\n\r\n .snowflake {\r\n position: absolute;\r\n background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 100%);\r\n border-radius: 50%;\r\n opacity: 0.9;\r\n pointer-events: none;\r\n box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n background: var(--accent);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n opacity: 0.8;\r\n }\r\n\r\n .instruction {\r\n font-size: 15px;\r\n color: var(--text-secondary);\r\n letter-spacing: 1.5px;\r\n font-weight: 200;\r\n text-transform: lowercase;\r\n opacity: 1;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .instruction.hidden {\r\n opacity: 0;\r\n }\r\n\r\n .progress-container {\r\n width: 200px;\r\n height: 3px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 10px;\r\n margin: 20px auto 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .progress-container.visible {\r\n opacity: 1;\r\n }\r\n\r\n .progress-bar {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--accent), #ffffff);\r\n width: 0%;\r\n transition: width 0.2s ease;\r\n box-shadow: 0 0 10px var(--accent);\r\n }\r\n\r\n .shake-hint {\r\n font-size: 13px;\r\n color: var(--accent);\r\n letter-spacing: 1px;\r\n font-weight: 200;\r\n margin-top: 15px;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .shake-hint.visible {\r\n opacity: 1;\r\n }\r\n\r\n .wishes-container {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n z-index: 100;\r\n transition: opacity 1s ease;\r\n }\r\n\r\n .wishes-container.active {\r\n opacity: 1;\r\n }\r\n\r\n .wishes-text {\r\n font-family: \"Rouge Script\", serif;\r\n font-style: italic;\r\n font-size: 64px;\r\n font-weight: 300;\r\n color: var(--text-primary);\r\n letter-spacing: 3px;\r\n margin-bottom: 20px;\r\n animation: fadeInUp 1s ease forwards;\r\n }\r\n\r\n .wishes-subtext {\r\n font-size: 18px;\r\n color: var(--text-secondary);\r\n letter-spacing: 2px;\r\n font-weight: 200;\r\n animation: fadeInUp 1s ease 0.3s forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .sparkle {\r\n position: fixed;\r\n background: radial-gradient(circle, var(--accent) 0%, transparent 70%);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n animation: sparkleAnimation 1.5s ease-out forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes sparkleAnimation {\r\n 0% {\r\n opacity: 1;\r\n transform: scale(0) translateY(0) rotate(0deg);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: scale(1.5) translateY(-40px) rotate(180deg);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(0.5) translateY(-80px) rotate(360deg);\r\n }\r\n }\r\n\r\n .shockwave {\r\n position: fixed;\r\n border: 2px solid rgba(212, 175, 55, 0.6);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n animation: shockwaveAnimation 1s ease-out forwards;\r\n }\r\n\r\n @keyframes shockwaveAnimation {\r\n 0% {\r\n width: 0;\r\n height: 0;\r\n opacity: 1;\r\n }\r\n 100% {\r\n width: 600px;\r\n height: 600px;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .snow-globe {\r\n width: 280px;\r\n height: 280px;\r\n }\r\n\r\n .globe-content h2 {\r\n font-size: 3rem;\r\n }\r\n\r\n .globe-content .year {\r\n font-size: 24px;\r\n }\r\n\r\n .wishes-text {\r\n font-size: 48px;\r\n }\r\n\r\n .wishes-subtext {\r\n font-size: 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"snow-globe\" id=\"snowGlobe\">\r\n <div class=\"fill-level\" id=\"fillLevel\"><\/div>\r\n <div class=\"snow-container\" id=\"snowContainer\"><\/div>\r\n <div class=\"globe-content\" id=\"globeContent\">\r\n <h2>Buone Feste<\/h2>\r\n <div class=\"year\">2025<\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"instruction\" id=\"instruction\">agita per scoprire<\/p>\r\n <div class=\"progress-container\" id=\"progressContainer\">\r\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n <p class=\"shake-hint\" id=\"shakeHint\">continua...<\/p>\r\n <\/div>\r\n\r\n <div class=\"wishes-container\" id=\"wishesContainer\">\r\n <div>\r\n <p style=\"font-size: 4rem;\">\ud83c\udf85<\/p>\r\n <\/div>\r\n <div class=\"wishes-text\">Auguri di cuore<\/div>\r\n <div class=\"wishes-subtext\">che sia un anno straordinario<\/div>\r\n <\/div>\r\n\r\n <script>\r\n class SnowGlobe {\r\n constructor() {\r\n this.globe = document.getElementById('snowGlobe');\r\n this.snowContainer = document.getElementById('snowContainer');\r\n this.fillLevel = document.getElementById('fillLevel');\r\n this.globeContent = document.getElementById('globeContent');\r\n this.instruction = document.getElementById('instruction');\r\n this.wishesContainer = document.getElementById('wishesContainer');\r\n this.progressContainer = document.getElementById('progressContainer');\r\n this.progressBar = document.getElementById('progressBar');\r\n this.shakeHint = document.getElementById('shakeHint');\r\n \r\n this.snowflakes = [];\r\n this.particles = [];\r\n this.shakeThreshold = 100;\r\n this.fillPercentage = 0;\r\n this.shakeIntensity = 0;\r\n this.isCompleted = false;\r\n this.hasStarted = false;\r\n this.snowSpawnCounter = 0;\r\n \r\n \/\/ Fisica liquida - orientamento dispositivo\r\n this.gravityX = 0;\r\n this.gravityY = 1;\r\n this.tiltAngle = 0;\r\n \r\n \/\/ Desktop tracking\r\n this.lastX = 0;\r\n this.lastY = 0;\r\n this.velocityX = 0;\r\n this.velocityY = 0;\r\n this.mouseX = window.innerWidth \/ 2;\r\n this.mouseY = window.innerHeight \/ 2;\r\n \r\n this.init();\r\n }\r\n\r\n init() {\r\n this.createSnowflakes(25);\r\n this.setupEventListeners();\r\n this.animate();\r\n }\r\n\r\n createSnowflakes(count) {\r\n for (let i = 0; i < count; i++) {\r\n const flake = document.createElement('div');\r\n flake.className = 'snowflake';\r\n \r\n const size = Math.random() * 7 + 3;\r\n flake.style.width = `${size}px`;\r\n flake.style.height = `${size}px`;\r\n \r\n const x = Math.random() * 100;\r\n const y = 85 + Math.random() * 10;\r\n \r\n flake.style.left = `${x}%`;\r\n flake.style.top = `${y}%`;\r\n \r\n this.snowContainer.appendChild(flake);\r\n \r\n this.snowflakes.push({\r\n element: flake,\r\n x: x,\r\n y: y,\r\n vx: 0,\r\n vy: 0,\r\n size: size,\r\n density: Math.random() * 0.5 + 0.8\r\n });\r\n }\r\n }\r\n\r\n setupEventListeners() {\r\n \/\/ Mobile - accelerometer per gravit\u00e0\r\n if (window.DeviceOrientationEvent) {\r\n window.addEventListener('deviceorientation', (e) => this.handleOrientation(e));\r\n }\r\n \r\n \/\/ Mobile - motion per shake\r\n if (window.DeviceMotionEvent) {\r\n window.addEventListener('devicemotion', (e) => this.handleMotion(e));\r\n }\r\n \r\n \/\/ Desktop - mouse movement\r\n document.addEventListener('mousemove', (e) => this.handleMouseMove(e));\r\n }\r\n\r\n handleOrientation(event) {\r\n \/\/ Beta: inclinazione avanti\/indietro (-180 a 180)\r\n \/\/ Gamma: inclinazione sinistra\/destra (-90 a 90)\r\n const beta = event.beta || 0;\r\n const gamma = event.gamma || 0;\r\n \r\n \/\/ Converti in gravit\u00e0 X e Y (normalizzato)\r\n this.gravityX = Math.max(-1, Math.min(1, gamma \/ 45));\r\n this.gravityY = Math.max(-1, Math.min(1, beta \/ 90));\r\n this.tiltAngle = Math.atan2(gamma, beta);\r\n }\r\n\r\n handleMotion(event) {\r\n if (this.isCompleted) return;\r\n \r\n const acceleration = event.accelerationIncludingGravity;\r\n const totalAccel = Math.abs(acceleration.x) + Math.abs(acceleration.y) + Math.abs(acceleration.z);\r\n \r\n if (totalAccel > 15) {\r\n if (!this.hasStarted) {\r\n this.hasStarted = true;\r\n this.progressContainer.classList.add('visible');\r\n }\r\n \r\n this.shakeIntensity = Math.min(totalAccel \/ 2, 50);\r\n this.fillPercentage += 0.35;\r\n \r\n \/\/ Spawna fiocchi E particelle\r\n this.snowSpawnCounter += this.shakeIntensity;\r\n if (this.snowSpawnCounter > 25) {\r\n this.spawnNewSnowflake();\r\n this.spawnParticles(3);\r\n this.snowSpawnCounter = 0;\r\n }\r\n \r\n this.triggerShake();\r\n this.agitateSnow();\r\n this.updateFillLevel();\r\n \r\n if (this.fillPercentage >= this.shakeThreshold) {\r\n this.completeExperience();\r\n }\r\n } else {\r\n this.fillPercentage = Math.max(0, this.fillPercentage - 0.08);\r\n this.updateFillLevel();\r\n }\r\n }\r\n\r\n handleMouseMove(event) {\r\n if (this.isCompleted) return;\r\n \r\n this.mouseX = event.clientX;\r\n this.mouseY = event.clientY;\r\n \r\n const currentX = event.clientX;\r\n const currentY = event.clientY;\r\n \r\n this.velocityX = Math.abs(currentX - this.lastX);\r\n this.velocityY = Math.abs(currentY - this.lastY);\r\n \r\n const totalVelocity = this.velocityX + this.velocityY;\r\n \r\n \/\/ Simula gravit\u00e0 basata sulla posizione del mouse\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n this.gravityX = (currentX - centerX) \/ centerX * 0.3;\r\n this.gravityY = (currentY - centerY) \/ centerY * 0.3;\r\n \r\n if (totalVelocity > 20) {\r\n if (!this.hasStarted) {\r\n this.hasStarted = true;\r\n this.progressContainer.classList.add('visible');\r\n }\r\n \r\n this.shakeIntensity = Math.min(totalVelocity \/ 3, 50);\r\n this.fillPercentage += 0.22;\r\n \r\n this.snowSpawnCounter += this.shakeIntensity;\r\n if (this.snowSpawnCounter > 30) {\r\n this.spawnNewSnowflake();\r\n this.spawnParticles(2);\r\n this.snowSpawnCounter = 0;\r\n }\r\n \r\n this.triggerShake();\r\n this.agitateSnow();\r\n this.updateFillLevel();\r\n \r\n if (this.fillPercentage >= this.shakeThreshold) {\r\n this.completeExperience();\r\n }\r\n } else {\r\n this.fillPercentage = Math.max(0, this.fillPercentage - 0.06);\r\n this.updateFillLevel();\r\n }\r\n \r\n this.lastX = currentX;\r\n this.lastY = currentY;\r\n }\r\n\r\n triggerShake() {\r\n if (!this.globe.classList.contains('shaking')) {\r\n this.globe.classList.add('shaking');\r\n setTimeout(() => this.globe.classList.remove('shaking'), 300);\r\n }\r\n }\r\n\r\n spawnNewSnowflake() {\r\n const flake = document.createElement('div');\r\n flake.className = 'snowflake';\r\n \r\n const size = Math.random() * 7 + 3;\r\n flake.style.width = `${size}px`;\r\n flake.style.height = `${size}px`;\r\n \r\n const spawnFrom = Math.random();\r\n let x, y;\r\n \r\n if (spawnFrom < 0.7) {\r\n x = Math.random() * 100;\r\n y = -5;\r\n } else {\r\n x = Math.random() < 0.5 ? -5 : 105;\r\n y = Math.random() * 50;\r\n }\r\n \r\n flake.style.left = `${x}%`;\r\n flake.style.top = `${y}%`;\r\n \r\n this.snowContainer.appendChild(flake);\r\n \r\n this.snowflakes.push({\r\n element: flake,\r\n x: x,\r\n y: y,\r\n vx: (Math.random() - 0.5) * 2,\r\n vy: Math.random() * 2 + 1,\r\n size: size,\r\n density: Math.random() * 0.5 + 0.8\r\n });\r\n }\r\n\r\n spawnParticles(count) {\r\n for (let i = 0; i < count; i++) {\r\n const particle = document.createElement('div');\r\n particle.className = 'particle';\r\n \r\n const size = Math.random() * 3 + 1;\r\n particle.style.width = `${size}px`;\r\n particle.style.height = `${size}px`;\r\n \r\n const x = Math.random() * 100;\r\n const y = Math.random() * 100;\r\n \r\n particle.style.left = `${x}%`;\r\n particle.style.top = `${y}%`;\r\n \r\n this.snowContainer.appendChild(particle);\r\n \r\n const angle = Math.random() * Math.PI * 2;\r\n const speed = Math.random() * 3 + 2;\r\n \r\n this.particles.push({\r\n element: particle,\r\n x: x,\r\n y: y,\r\n vx: Math.cos(angle) * speed,\r\n vy: Math.sin(angle) * speed,\r\n life: 1,\r\n decay: 0.02 + Math.random() * 0.02\r\n });\r\n }\r\n }\r\n\r\n agitateSnow() {\r\n this.snowflakes.forEach(flake => {\r\n flake.vx += (Math.random() - 0.5) * this.shakeIntensity * 0.2;\r\n flake.vy += (Math.random() - 0.5) * this.shakeIntensity * 0.15;\r\n });\r\n }\r\n\r\n updateFillLevel() {\r\n const progress = Math.min(this.fillPercentage, 100);\r\n \r\n this.progressBar.style.width = `${progress}%`;\r\n this.fillLevel.style.height = `${progress}%`;\r\n \r\n \/\/ Effetto ondulazione sulla superficie\r\n const wave = Math.sin(Date.now() \/ 200) * 2;\r\n this.fillLevel.style.transform = `translateY(${wave}px)`;\r\n \r\n if (progress > 40 && !this.shakeHint.classList.contains('visible')) {\r\n this.shakeHint.classList.add('visible');\r\n }\r\n \r\n if (progress > 70) {\r\n this.shakeHint.textContent = 'quasi...';\r\n }\r\n }\r\n\r\n animate() {\r\n \/\/ Anima fiocchi di neve con fisica liquida\r\n this.snowflakes.forEach((flake, index) => {\r\n const stopLevel = 100 - this.fillPercentage;\r\n \r\n \/\/ Applica gravit\u00e0 direzionale (effetto liquido)\r\n if (!this.isCompleted) {\r\n flake.vx += this.gravityX * 0.4 * flake.density;\r\n flake.vy += (this.gravityY * 0.3 + 0.25) * flake.density;\r\n \r\n \/\/ Viscosit\u00e0 - i fiocchi sotto il livello si muovono pi\u00f9 lentamente\r\n if (flake.y > stopLevel - 5) {\r\n flake.vx *= 0.92;\r\n flake.vy *= 0.92;\r\n } else {\r\n flake.vx *= 0.97;\r\n flake.vy *= 0.97;\r\n }\r\n } else {\r\n flake.vy += 0.6;\r\n flake.vx *= 0.98;\r\n flake.vy *= 0.98;\r\n }\r\n \r\n flake.x += flake.vx;\r\n flake.y += flake.vy;\r\n \r\n if (!this.isCompleted) {\r\n \/\/ Superficie liquida con tensione superficiale\r\n if (flake.y >= stopLevel - 2) {\r\n flake.y = stopLevel - 2;\r\n flake.vy = -flake.vy * 0.15;\r\n flake.vx *= 0.6;\r\n \r\n \/\/ Effetto \"galleggiamento\" sulla superficie\r\n flake.vy += Math.sin(Date.now() \/ 300 + flake.x) * 0.1;\r\n }\r\n \r\n if (flake.y < 5) {\r\n flake.y = 5;\r\n flake.vy = Math.abs(flake.vy) * 0.3;\r\n }\r\n \r\n \/\/ Bordi circolari della sfera\r\n const centerX = 50;\r\n const centerY = 50;\r\n const dx = flake.x - centerX;\r\n const dy = flake.y - centerY;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n \r\n if (distance > 48) {\r\n const angle = Math.atan2(dy, dx);\r\n flake.x = centerX + Math.cos(angle) * 48;\r\n flake.y = centerY + Math.sin(angle) * 48;\r\n \r\n \/\/ Rimbalzo tangenziale\r\n const normalX = dx \/ distance;\r\n const normalY = dy \/ distance;\r\n const dot = flake.vx * normalX + flake.vy * normalY;\r\n flake.vx -= 2 * dot * normalX * 0.6;\r\n flake.vy -= 2 * dot * normalY * 0.6;\r\n }\r\n }\r\n \r\n flake.element.style.left = `${flake.x}%`;\r\n flake.element.style.top = `${flake.y}%`;\r\n });\r\n \r\n \/\/ Anima particelle\r\n this.particles = this.particles.filter(particle => {\r\n particle.x += particle.vx;\r\n particle.y += particle.vy;\r\n particle.vy += 0.2;\r\n particle.vx *= 0.98;\r\n particle.vy *= 0.98;\r\n particle.life -= particle.decay;\r\n \r\n particle.element.style.left = `${particle.x}%`;\r\n particle.element.style.top = `${particle.y}%`;\r\n particle.element.style.opacity = particle.life;\r\n \r\n if (particle.life <= 0) {\r\n particle.element.remove();\r\n return false;\r\n }\r\n return true;\r\n });\r\n \r\n requestAnimationFrame(() => this.animate());\r\n }\r\n\r\n completeExperience() {\r\n if (this.isCompleted) return;\r\n this.isCompleted = true;\r\n \r\n this.instruction.classList.add('hidden');\r\n this.progressContainer.classList.remove('visible');\r\n this.shakeHint.classList.remove('visible');\r\n \r\n setTimeout(() => {\r\n this.globe.classList.add('breaking');\r\n this.globeContent.classList.add('fade-out');\r\n this.createShockwave();\r\n this.explodeSnow();\r\n }, 200);\r\n \r\n setTimeout(() => {\r\n this.wishesContainer.classList.add('active');\r\n this.createSparkles();\r\n this.createParticleExplosion();\r\n }, 700);\r\n }\r\n\r\n createShockwave() {\r\n const globeRect = this.globe.getBoundingClientRect();\r\n const centerX = globeRect.left + globeRect.width \/ 2;\r\n const centerY = globeRect.top + globeRect.height \/ 2;\r\n \r\n for (let i = 0; i < 3; i++) {\r\n setTimeout(() => {\r\n const wave = document.createElement('div');\r\n wave.className = 'shockwave';\r\n wave.style.left = `${centerX}px`;\r\n wave.style.top = `${centerY}px`;\r\n wave.style.transform = 'translate(-50%, -50%)';\r\n \r\n document.body.appendChild(wave);\r\n setTimeout(() => wave.remove(), 1000);\r\n }, i * 150);\r\n }\r\n }\r\n\r\n explodeSnow() {\r\n const centerX = 50;\r\n const centerY = 50;\r\n \r\n this.snowflakes.forEach((flake, index) => {\r\n const dx = flake.x - centerX;\r\n const dy = flake.y - centerY;\r\n const angle = Math.atan2(dy, dx);\r\n \r\n const explosionForce = 18 + Math.random() * 12;\r\n \r\n flake.vx = Math.cos(angle) * explosionForce;\r\n flake.vy = Math.sin(angle) * explosionForce;\r\n \r\n setTimeout(() => {\r\n flake.element.style.transition = 'opacity 1.2s ease-out, transform 1.2s ease-out';\r\n flake.element.style.opacity = '0';\r\n flake.element.style.transform = `scale(${Math.random() * 2 + 1}) rotate(${Math.random() * 720}deg)`;\r\n }, 100 + index * 8);\r\n });\r\n }\r\n\r\n createParticleExplosion() {\r\n const globeRect = this.globe.getBoundingClientRect();\r\n const centerX = globeRect.left + globeRect.width \/ 2;\r\n const centerY = globeRect.top + globeRect.height \/ 2;\r\n \r\n for (let i = 0; i < 60; i++) {\r\n setTimeout(() => {\r\n const particle = document.createElement('div');\r\n particle.className = 'particle';\r\n \r\n const size = Math.random() * 4 + 2;\r\n particle.style.width = `${size}px`;\r\n particle.style.height = `${size}px`;\r\n \r\n const angle = (Math.PI * 2 * i) \/ 60 + (Math.random() - 0.5) * 0.5;\r\n const distance = Math.random() * 150 + 50;\r\n \r\n particle.style.left = `${centerX}px`;\r\n particle.style.top = `${centerY}px`;\r\n particle.style.transition = 'all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n \r\n document.body.appendChild(particle);\r\n \r\n setTimeout(() => {\r\n particle.style.left = `${centerX + Math.cos(angle) * distance}px`;\r\n particle.style.top = `${centerY + Math.sin(angle) * distance}px`;\r\n particle.style.opacity = '0';\r\n particle.style.transform = `scale(0)`;\r\n }, 50);\r\n \r\n setTimeout(() => particle.remove(), 1600);\r\n }, i * 15);\r\n }\r\n }\r\n\r\n createSparkles() {\r\n const sparkleCount = 50;\r\n const globeRect = this.globe.getBoundingClientRect();\r\n const centerX = globeRect.left + globeRect.width \/ 2;\r\n const centerY = globeRect.top + globeRect.height \/ 2;\r\n \r\n for (let i = 0; i < sparkleCount; i++) {\r\n setTimeout(() => {\r\n const sparkle = document.createElement('div');\r\n sparkle.className = 'sparkle';\r\n \r\n const size = Math.random() * 8 + 4;\r\n sparkle.style.width = `${size}px`;\r\n sparkle.style.height = `${size}px`;\r\n \r\n const angle = (Math.PI * 2 * i) \/ sparkleCount + (Math.random() * 0.3);\r\n const distance = 30 + Math.random() * 100;\r\n \r\n sparkle.style.left = `${centerX + Math.cos(angle) * distance}px`;\r\n sparkle.style.top = `${centerY + Math.sin(angle) * distance}px`;\r\n \r\n document.body.appendChild(sparkle);\r\n \r\n setTimeout(() => sparkle.remove(), 1500);\r\n }, i * 15);\r\n }\r\n }\r\n }\r\n\r\n const snowGlobe = new SnowGlobe();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Buon Natale 2024 Buone Feste 2025 agita per scoprire continua… \ud83c\udf85 Auguri di cuore che sia un anno straordinario<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-11656","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages\/11656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/comments?post=11656"}],"version-history":[{"count":7,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages\/11656\/revisions"}],"predecessor-version":[{"id":11703,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages\/11656\/revisions\/11703"}],"wp:attachment":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/media?parent=11656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Buon Natale 2024<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rouge+Script&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg-start: #0a1628;\r\n --bg-end: #1a2940;\r\n --glass-bg: rgba(255, 255, 255, 0.03);\r\n --glass-border: rgba(255, 255, 255, 0.1);\r\n --text-primary: #e8e8e8;\r\n --text-secondary: #a0a0a0;\r\n --accent: #d4af37;\r\n --snow: #ffffff;\r\n }\r\n\r\n body {\r\n width: 100%;\r\n height: 100vh;\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Montserrat', sans-serif;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .container {\r\n position: relative;\r\n text-align: center;\r\n z-index: 10;\r\n }\r\n\r\n .snow-globe {\r\n position: relative;\r\n width: 340px;\r\n height: 340px;\r\n margin: 0 auto 30px;\r\n border-radius: 50%;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid var(--glass-border);\r\n box-shadow: \r\n 0 8px 32px 0 rgba(0, 0, 0, 0.3),\r\n inset 0 0 60px rgba(255, 255, 255, 0.02);\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .snow-globe.shaking {\r\n animation: shake 0.3s ease-in-out;\r\n }\r\n\r\n .snow-globe.breaking {\r\n animation: crack 0.5s ease-out forwards;\r\n }\r\n\r\n @keyframes crack {\r\n 0% { \r\n transform: scale(1);\r\n opacity: 1;\r\n filter: brightness(1);\r\n }\r\n 30% { \r\n transform: scale(1.02);\r\n opacity: 0.95;\r\n filter: brightness(1.2);\r\n }\r\n 60% { \r\n transform: scale(1.08);\r\n opacity: 0.7;\r\n filter: brightness(1.5);\r\n }\r\n 100% { \r\n transform: scale(1.2);\r\n opacity: 0;\r\n filter: brightness(2);\r\n }\r\n }\r\n\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0) rotate(0deg); }\r\n 10% { transform: translateX(-2px) rotate(-0.5deg); }\r\n 20% { transform: translateX(2px) rotate(0.5deg); }\r\n 30% { transform: translateX(-2px) rotate(-0.3deg); }\r\n 40% { transform: translateX(2px) rotate(0.3deg); }\r\n 50% { transform: translateX(-1px) rotate(-0.2deg); }\r\n 60% { transform: translateX(1px) rotate(0.2deg); }\r\n 70% { transform: translateX(-1px) rotate(-0.1deg); }\r\n 80% { transform: translateX(1px) rotate(0.1deg); }\r\n 90% { transform: translateX(-0.5px) rotate(0deg); }\r\n }\r\n\r\n .globe-content {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n width: 80%;\r\n opacity: 1;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n .globe-content.fade-out {\r\n opacity: 0;\r\n }\r\n\r\n .globe-content h2 {\r\n font-family: \"Rouge Script\", serif;\r\n font-style: italic;\r\n font-size: 4rem;\r\n font-weight: 300;\r\n color: var(--text-primary);\r\n margin: 0;\r\n letter-spacing: 2px;\r\n line-height: 1.3;\r\n }\r\n\r\n .globe-content .year {\r\n font-size: 28px;\r\n color: var(--accent);\r\n margin-top: 8px;\r\n font-weight: 300;\r\n letter-spacing: 4px;\r\n }\r\n\r\n .snow-container {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .fill-level {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 0%;\r\n background: linear-gradient(to top, \r\n rgba(255, 255, 255, 0.95) 0%, \r\n rgba(255, 255, 255, 0.85) 30%,\r\n rgba(255, 255, 255, 0.6) 70%,\r\n rgba(255, 255, 255, 0.2) 100%);\r\n transition: height 0.3s ease-out;\r\n pointer-events: none;\r\n border-radius: 0 0 50% 50%;\r\n filter: blur(2px);\r\n }\r\n\r\n .snowflake {\r\n position: absolute;\r\n background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 100%);\r\n border-radius: 50%;\r\n opacity: 0.9;\r\n pointer-events: none;\r\n box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n background: var(--accent);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n opacity: 0.8;\r\n }\r\n\r\n .instruction {\r\n font-size: 15px;\r\n color: var(--text-secondary);\r\n letter-spacing: 1.5px;\r\n font-weight: 200;\r\n text-transform: lowercase;\r\n opacity: 1;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .instruction.hidden {\r\n opacity: 0;\r\n }\r\n\r\n .progress-container {\r\n width: 200px;\r\n height: 3px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 10px;\r\n margin: 20px auto 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .progress-container.visible {\r\n opacity: 1;\r\n }\r\n\r\n .progress-bar {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--accent), #ffffff);\r\n width: 0%;\r\n transition: width 0.2s ease;\r\n box-shadow: 0 0 10px var(--accent);\r\n }\r\n\r\n .shake-hint {\r\n font-size: 13px;\r\n color: var(--accent);\r\n letter-spacing: 1px;\r\n font-weight: 200;\r\n margin-top: 15px;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .shake-hint.visible {\r\n opacity: 1;\r\n }\r\n\r\n .wishes-container {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n z-index: 100;\r\n transition: opacity 1s ease;\r\n }\r\n\r\n .wishes-container.active {\r\n opacity: 1;\r\n }\r\n\r\n .wishes-text {\r\n font-family: \"Rouge Script\", serif;\r\n font-style: italic;\r\n font-size: 64px;\r\n font-weight: 300;\r\n color: var(--text-primary);\r\n letter-spacing: 3px;\r\n margin-bottom: 20px;\r\n animation: fadeInUp 1s ease forwards;\r\n }\r\n\r\n .wishes-subtext {\r\n font-size: 18px;\r\n color: var(--text-secondary);\r\n letter-spacing: 2px;\r\n font-weight: 200;\r\n animation: fadeInUp 1s ease 0.3s forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .sparkle {\r\n position: fixed;\r\n background: radial-gradient(circle, var(--accent) 0%, transparent 70%);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n animation: sparkleAnimation 1.5s ease-out forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes sparkleAnimation {\r\n 0% {\r\n opacity: 1;\r\n transform: scale(0) translateY(0) rotate(0deg);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: scale(1.5) translateY(-40px) rotate(180deg);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(0.5) translateY(-80px) rotate(360deg);\r\n }\r\n }\r\n\r\n .shockwave {\r\n position: fixed;\r\n border: 2px solid rgba(212, 175, 55, 0.6);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n animation: shockwaveAnimation 1s ease-out forwards;\r\n }\r\n\r\n @keyframes shockwaveAnimation {\r\n 0% {\r\n width: 0;\r\n height: 0;\r\n opacity: 1;\r\n }\r\n 100% {\r\n width: 600px;\r\n height: 600px;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .snow-globe {\r\n width: 280px;\r\n height: 280px;\r\n }\r\n\r\n .globe-content h2 {\r\n font-size: 3rem;\r\n }\r\n\r\n .globe-content .year {\r\n font-size: 24px;\r\n }\r\n\r\n .wishes-text {\r\n font-size: 48px;\r\n }\r\n\r\n .wishes-subtext {\r\n font-size: 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"snow-globe\" id=\"snowGlobe\">\r\n <div class=\"fill-level\" id=\"fillLevel\"><\/div>\r\n <div class=\"snow-container\" id=\"snowContainer\"><\/div>\r\n <div class=\"globe-content\" id=\"globeContent\">\r\n <h2>Buone Feste<\/h2>\r\n <div class=\"year\">2025<\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"instruction\" id=\"instruction\">agita per scoprire<\/p>\r\n <div class=\"progress-container\" id=\"progressContainer\">\r\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n <p class=\"shake-hint\" id=\"shakeHint\">continua...<\/p>\r\n <\/div>\r\n\r\n <div class=\"wishes-container\" id=\"wishesContainer\">\r\n <div>\r\n <p style=\"font-size: 4rem;\">\ud83c\udf85<\/p>\r\n <\/div>\r\n <div class=\"wishes-text\">Auguri di cuore<\/div>\r\n <div class=\"wishes-subtext\">che sia un anno straordinario<\/div>\r\n <\/div>\r\n\r\n <script>\r\n class SnowGlobe {\r\n constructor() {\r\n this.globe = document.getElementById('snowGlobe');\r\n this.snowContainer = document.getElementById('snowContainer');\r\n this.fillLevel = document.getElementById('fillLevel');\r\n this.globeContent = document.getElementById('globeContent');\r\n this.instruction = document.getElementById('instruction');\r\n this.wishesContainer = document.getElementById('wishesContainer');\r\n this.progressContainer = document.getElementById('progressContainer');\r\n this.progressBar = document.getElementById('progressBar');\r\n this.shakeHint = document.getElementById('shakeHint');\r\n \r\n this.snowflakes = [];\r\n this.particles = [];\r\n this.shakeThreshold = 100;\r\n this.fillPercentage = 0;\r\n this.shakeIntensity = 0;\r\n this.isCompleted = false;\r\n this.hasStarted = false;\r\n this.snowSpawnCounter = 0;\r\n \r\n \/\/ Fisica liquida - orientamento dispositivo\r\n this.gravityX = 0;\r\n this.gravityY = 1;\r\n this.tiltAngle = 0;\r\n \r\n \/\/ Desktop tracking\r\n this.lastX = 0;\r\n this.lastY = 0;\r\n this.velocityX = 0;\r\n this.velocityY = 0;\r\n this.mouseX = window.innerWidth \/ 2;\r\n this.mouseY = window.innerHeight \/ 2;\r\n \r\n this.init();\r\n }\r\n\r\n init() {\r\n this.createSnowflakes(25);\r\n this.setupEventListeners();\r\n this.animate();\r\n }\r\n\r\n createSnowflakes(count) {\r\n for (let i = 0; i < count; i++) {\r\n const flake = document.createElement('div');\r\n flake.className = 'snowflake';\r\n \r\n const size = Math.random() * 7 + 3;\r\n flake.style.width = `${size}px`;\r\n flake.style.height = `${size}px`;\r\n \r\n const x = Math.random() * 100;\r\n const y = 85 + Math.random() * 10;\r\n \r\n flake.style.left = `${x}%`;\r\n flake.style.top = `${y}%`;\r\n \r\n this.snowContainer.appendChild(flake);\r\n \r\n this.snowflakes.push({\r\n element: flake,\r\n x: x,\r\n y: y,\r\n vx: 0,\r\n vy: 0,\r\n size: size,\r\n density: Math.random() * 0.5 + 0.8\r\n });\r\n }\r\n }\r\n\r\n setupEventListeners() {\r\n \/\/ Mobile - accelerometer per gravit\u00e0\r\n if (window.DeviceOrientationEvent) {\r\n window.addEventListener('deviceorientation', (e) => this.handleOrientation(e));\r\n }\r\n \r\n \/\/ Mobile - motion per shake\r\n if (window.DeviceMotionEvent) {\r\n window.addEventListener('devicemotion', (e) => this.handleMotion(e));\r\n }\r\n \r\n \/\/ Desktop - mouse movement\r\n document.addEventListener('mousemove', (e) => this.handleMouseMove(e));\r\n }\r\n\r\n handleOrientation(event) {\r\n \/\/ Beta: inclinazione avanti\/indietro (-180 a 180)\r\n \/\/ Gamma: inclinazione sinistra\/destra (-90 a 90)\r\n const beta = event.beta || 0;\r\n const gamma = event.gamma || 0;\r\n \r\n \/\/ Converti in gravit\u00e0 X e Y (normalizzato)\r\n this.gravityX = Math.max(-1, Math.min(1, gamma \/ 45));\r\n this.gravityY = Math.max(-1, Math.min(1, beta \/ 90));\r\n this.tiltAngle = Math.atan2(gamma, beta);\r\n }\r\n\r\n handleMotion(event) {\r\n if (this.isCompleted) return;\r\n \r\n const acceleration = event.accelerationIncludingGravity;\r\n const totalAccel = Math.abs(acceleration.x) + Math.abs(acceleration.y) + Math.abs(acceleration.z);\r\n \r\n if (totalAccel > 15) {\r\n if (!this.hasStarted) {\r\n this.hasStarted = true;\r\n this.progressContainer.classList.add('visible');\r\n }\r\n \r\n this.shakeIntensity = Math.min(totalAccel \/ 2, 50);\r\n this.fillPercentage += 0.35;\r\n \r\n \/\/ Spawna fiocchi E particelle\r\n this.snowSpawnCounter += this.shakeIntensity;\r\n if (this.snowSpawnCounter > 25) {\r\n this.spawnNewSnowflake();\r\n this.spawnParticles(3);\r\n this.snowSpawnCounter = 0;\r\n }\r\n \r\n this.triggerShake();\r\n this.agitateSnow();\r\n this.updateFillLevel();\r\n \r\n if (this.fillPercentage >= this.shakeThreshold) {\r\n this.completeExperience();\r\n }\r\n } else {\r\n this.fillPercentage = Math.max(0, this.fillPercentage - 0.08);\r\n this.updateFillLevel();\r\n }\r\n }\r\n\r\n handleMouseMove(event) {\r\n if (this.isCompleted) return;\r\n \r\n this.mouseX = event.clientX;\r\n this.mouseY = event.clientY;\r\n \r\n const currentX = event.clientX;\r\n const currentY = event.clientY;\r\n \r\n this.velocityX = Math.abs(currentX - this.lastX);\r\n this.velocityY = Math.abs(currentY - this.lastY);\r\n \r\n const totalVelocity = this.velocityX + this.velocityY;\r\n \r\n \/\/ Simula gravit\u00e0 basata sulla posizione del mouse\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n this.gravityX = (currentX - centerX) \/ centerX * 0.3;\r\n this.gravityY = (currentY - centerY) \/ centerY * 0.3;\r\n \r\n if (totalVelocity > 20) {\r\n if (!this.hasStarted) {\r\n this.hasStarted = true;\r\n this.progressContainer.classList.add('visible');\r\n }\r\n \r\n this.shakeIntensity = Math.min(totalVelocity \/ 3, 50);\r\n this.fillPercentage += 0.22;\r\n \r\n this.snowSpawnCounter += this.shakeIntensity;\r\n if (this.snowSpawnCounter > 30) {\r\n this.spawnNewSnowflake();\r\n this.spawnParticles(2);\r\n this.snowSpawnCounter = 0;\r\n }\r\n \r\n this.triggerShake();\r\n this.agitateSnow();\r\n this.updateFillLevel();\r\n \r\n if (this.fillPercentage >= this.shakeThreshold) {\r\n this.completeExperience();\r\n }\r\n } else {\r\n this.fillPercentage = Math.max(0, this.fillPercentage - 0.06);\r\n this.updateFillLevel();\r\n }\r\n \r\n this.lastX = currentX;\r\n this.lastY = currentY;\r\n }\r\n\r\n triggerShake() {\r\n if (!this.globe.classList.contains('shaking')) {\r\n this.globe.classList.add('shaking');\r\n setTimeout(() => this.globe.classList.remove('shaking'), 300);\r\n }\r\n }\r\n\r\n spawnNewSnowflake() {\r\n const flake = document.createElement('div');\r\n flake.className = 'snowflake';\r\n \r\n const size = Math.random() * 7 + 3;\r\n flake.style.width = `${size}px`;\r\n flake.style.height = `${size}px`;\r\n \r\n const spawnFrom = Math.random();\r\n let x, y;\r\n \r\n if (spawnFrom < 0.7) {\r\n x = Math.random() * 100;\r\n y = -5;\r\n } else {\r\n x = Math.random() < 0.5 ? -5 : 105;\r\n y = Math.random() * 50;\r\n }\r\n \r\n flake.style.left = `${x}%`;\r\n flake.style.top = `${y}%`;\r\n \r\n this.snowContainer.appendChild(flake);\r\n \r\n this.snowflakes.push({\r\n element: flake,\r\n x: x,\r\n y: y,\r\n vx: (Math.random() - 0.5) * 2,\r\n vy: Math.random() * 2 + 1,\r\n size: size,\r\n density: Math.random() * 0.5 + 0.8\r\n });\r\n }\r\n\r\n spawnParticles(count) {\r\n for (let i = 0; i < count; i++) {\r\n const particle = document.createElement('div');\r\n particle.className = 'particle';\r\n \r\n const size = Math.random() * 3 + 1;\r\n particle.style.width = `${size}px`;\r\n particle.style.height = `${size}px`;\r\n \r\n const x = Math.random() * 100;\r\n const y = Math.random() * 100;\r\n \r\n particle.style.left = `${x}%`;\r\n particle.style.top = `${y}%`;\r\n \r\n this.snowContainer.appendChild(particle);\r\n \r\n const angle = Math.random() * Math.PI * 2;\r\n const speed = Math.random() * 3 + 2;\r\n \r\n this.particles.push({\r\n element: particle,\r\n x: x,\r\n y: y,\r\n vx: Math.cos(angle) * speed,\r\n vy: Math.sin(angle) * speed,\r\n life: 1,\r\n decay: 0.02 + Math.random() * 0.02\r\n });\r\n }\r\n }\r\n\r\n agitateSnow() {\r\n this.snowflakes.forEach(flake => {\r\n flake.vx += (Math.random() - 0.5) * this.shakeIntensity * 0.2;\r\n flake.vy += (Math.random() - 0.5) * this.shakeIntensity * 0.15;\r\n });\r\n }\r\n\r\n updateFillLevel() {\r\n const progress = Math.min(this.fillPercentage, 100);\r\n \r\n this.progressBar.style.width = `${progress}%`;\r\n this.fillLevel.style.height = `${progress}%`;\r\n \r\n \/\/ Effetto ondulazione sulla superficie\r\n const wave = Math.sin(Date.now() \/ 200) * 2;\r\n this.fillLevel.style.transform = `translateY(${wave}px)`;\r\n \r\n if (progress > 40 && !this.shakeHint.classList.contains('visible')) {\r\n this.shakeHint.classList.add('visible');\r\n }\r\n \r\n if (progress > 70) {\r\n this.shakeHint.textContent = 'quasi...';\r\n }\r\n }\r\n\r\n animate() {\r\n \/\/ Anima fiocchi di neve con fisica liquida\r\n this.snowflakes.forEach((flake, index) => {\r\n const stopLevel = 100 - this.fillPercentage;\r\n \r\n \/\/ Applica gravit\u00e0 direzionale (effetto liquido)\r\n if (!this.isCompleted) {\r\n flake.vx += this.gravityX * 0.4 * flake.density;\r\n flake.vy += (this.gravityY * 0.3 + 0.25) * flake.density;\r\n \r\n \/\/ Viscosit\u00e0 - i fiocchi sotto il livello si muovono pi\u00f9 lentamente\r\n if (flake.y > stopLevel - 5) {\r\n flake.vx *= 0.92;\r\n flake.vy *= 0.92;\r\n } else {\r\n flake.vx *= 0.97;\r\n flake.vy *= 0.97;\r\n }\r\n } else {\r\n flake.vy += 0.6;\r\n flake.vx *= 0.98;\r\n flake.vy *= 0.98;\r\n }\r\n \r\n flake.x += flake.vx;\r\n flake.y += flake.vy;\r\n \r\n if (!this.isCompleted) {\r\n \/\/ Superficie liquida con tensione superficiale\r\n if (flake.y >= stopLevel - 2) {\r\n flake.y = stopLevel - 2;\r\n flake.vy = -flake.vy * 0.15;\r\n flake.vx *= 0.6;\r\n \r\n \/\/ Effetto \"galleggiamento\" sulla superficie\r\n flake.vy += Math.sin(Date.now() \/ 300 + flake.x) * 0.1;\r\n }\r\n \r\n if (flake.y < 5) {\r\n flake.y = 5;\r\n flake.vy = Math.abs(flake.vy) * 0.3;\r\n }\r\n \r\n \/\/ Bordi circolari della sfera\r\n const centerX = 50;\r\n const centerY = 50;\r\n const dx = flake.x - centerX;\r\n const dy = flake.y - centerY;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n \r\n if (distance > 48) {\r\n const angle = Math.atan2(dy, dx);\r\n flake.x = centerX + Math.cos(angle) * 48;\r\n flake.y = centerY + Math.sin(angle) * 48;\r\n \r\n \/\/ Rimbalzo tangenziale\r\n const normalX = dx \/ distance;\r\n const normalY = dy \/ distance;\r\n const dot = flake.vx * normalX + flake.vy * normalY;\r\n flake.vx -= 2 * dot * normalX * 0.6;\r\n flake.vy -= 2 * dot * normalY * 0.6;\r\n }\r\n }\r\n \r\n flake.element.style.left = `${flake.x}%`;\r\n flake.element.style.top = `${flake.y}%`;\r\n });\r\n \r\n \/\/ Anima particelle\r\n this.particles = this.particles.filter(particle => {\r\n particle.x += particle.vx;\r\n particle.y += particle.vy;\r\n particle.vy += 0.2;\r\n particle.vx *= 0.98;\r\n particle.vy *= 0.98;\r\n particle.life -= particle.decay;\r\n \r\n particle.element.style.left = `${particle.x}%`;\r\n particle.element.style.top = `${particle.y}%`;\r\n particle.element.style.opacity = particle.life;\r\n \r\n if (particle.life <= 0) {\r\n particle.element.remove();\r\n return false;\r\n }\r\n return true;\r\n });\r\n \r\n requestAnimationFrame(() => this.animate());\r\n }\r\n\r\n completeExperience() {\r\n if (this.isCompleted) return;\r\n this.isCompleted = true;\r\n \r\n this.instruction.classList.add('hidden');\r\n this.progressContainer.classList.remove('visible');\r\n this.shakeHint.classList.remove('visible');\r\n \r\n setTimeout(() => {\r\n this.globe.classList.add('breaking');\r\n this.globeContent.classList.add('fade-out');\r\n this.createShockwave();\r\n this.explodeSnow();\r\n }, 200);\r\n \r\n setTimeout(() => {\r\n this.wishesContainer.classList.add('active');\r\n this.createSparkles();\r\n this.createParticleExplosion();\r\n }, 700);\r\n }\r\n\r\n createShockwave() {\r\n const globeRect = this.globe.getBoundingClientRect();\r\n const centerX = globeRect.left + globeRect.width \/ 2;\r\n const centerY = globeRect.top + globeRect.height \/ 2;\r\n \r\n for (let i = 0; i < 3; i++) {\r\n setTimeout(() => {\r\n const wave = document.createElement('div');\r\n wave.className = 'shockwave';\r\n wave.style.left = `${centerX}px`;\r\n wave.style.top = `${centerY}px`;\r\n wave.style.transform = 'translate(-50%, -50%)';\r\n \r\n document.body.appendChild(wave);\r\n setTimeout(() => wave.remove(), 1000);\r\n }, i * 150);\r\n }\r\n }\r\n\r\n explodeSnow() {\r\n const centerX = 50;\r\n const centerY = 50;\r\n \r\n this.snowflakes.forEach((flake, index) => {\r\n const dx = flake.x - centerX;\r\n const dy = flake.y - centerY;\r\n const angle = Math.atan2(dy, dx);\r\n \r\n const explosionForce = 18 + Math.random() * 12;\r\n \r\n flake.vx = Math.cos(angle) * explosionForce;\r\n flake.vy = Math.sin(angle) * explosionForce;\r\n \r\n setTimeout(() => {\r\n flake.element.style.transition = 'opacity 1.2s ease-out, transform 1.2s ease-out';\r\n flake.element.style.opacity = '0';\r\n flake.element.style.transform = `scale(${Math.random() * 2 + 1}) rotate(${Math.random() * 720}deg)`;\r\n }, 100 + index * 8);\r\n });\r\n }\r\n\r\n createParticleExplosion() {\r\n const globeRect = this.globe.getBoundingClientRect();\r\n const centerX = globeRect.left + globeRect.width \/ 2;\r\n const centerY = globeRect.top + globeRect.height \/ 2;\r\n \r\n for (let i = 0; i < 60; i++) {\r\n setTimeout(() => {\r\n const particle = document.createElement('div');\r\n particle.className = 'particle';\r\n \r\n const size = Math.random() * 4 + 2;\r\n particle.style.width = `${size}px`;\r\n particle.style.height = `${size}px`;\r\n \r\n const angle = (Math.PI * 2 * i) \/ 60 + (Math.random() - 0.5) * 0.5;\r\n const distance = Math.random() * 150 + 50;\r\n \r\n particle.style.left = `${centerX}px`;\r\n particle.style.top = `${centerY}px`;\r\n particle.style.transition = 'all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n \r\n document.body.appendChild(particle);\r\n \r\n setTimeout(() => {\r\n particle.style.left = `${centerX + Math.cos(angle) * distance}px`;\r\n particle.style.top = `${centerY + Math.sin(angle) * distance}px`;\r\n particle.style.opacity = '0';\r\n particle.style.transform = `scale(0)`;\r\n }, 50);\r\n \r\n setTimeout(() => particle.remove(), 1600);\r\n }, i * 15);\r\n }\r\n }\r\n\r\n createSparkles() {\r\n const sparkleCount = 50;\r\n const globeRect = this.globe.getBoundingClientRect();\r\n const centerX = globeRect.left + globeRect.width \/ 2;\r\n const centerY = globeRect.top + globeRect.height \/ 2;\r\n \r\n for (let i = 0; i < sparkleCount; i++) {\r\n setTimeout(() => {\r\n const sparkle = document.createElement('div');\r\n sparkle.className = 'sparkle';\r\n \r\n const size = Math.random() * 8 + 4;\r\n sparkle.style.width = `${size}px`;\r\n sparkle.style.height = `${size}px`;\r\n \r\n const angle = (Math.PI * 2 * i) \/ sparkleCount + (Math.random() * 0.3);\r\n const distance = 30 + Math.random() * 100;\r\n \r\n sparkle.style.left = `${centerX + Math.cos(angle) * distance}px`;\r\n sparkle.style.top = `${centerY + Math.sin(angle) * distance}px`;\r\n \r\n document.body.appendChild(sparkle);\r\n \r\n setTimeout(() => sparkle.remove(), 1500);\r\n }, i * 15);\r\n }\r\n }\r\n }\r\n\r\n const snowGlobe = new SnowGlobe();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Buon Natale 2024 Buone Feste 2025 agita per scoprire continua… \ud83c\udf85 Auguri di cuore che sia un anno straordinario<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-11656","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages\/11656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/comments?post=11656"}],"version-history":[{"count":7,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages\/11656\/revisions"}],"predecessor-version":[{"id":11703,"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/pages\/11656\/revisions\/11703"}],"wp:attachment":[{"href":"https:\/\/wezem.it\/en\/wp-json\/wp\/v2\/media?parent=11656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}