.clock-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,20,30,.95) 0%,rgba(0,0,0,.98) 100%);opacity: 0.3}.clock-container{position:relative;width:500px;height:500px;opacity:.9;transition:opacity .5s ease;z-index:10000;display:flex;flex-direction:column;align-items:center}.clock-container:hover{opacity:1}.clock-bells{position:relative;width:100%;height:120px;display:flex;justify-content:center;align-items:flex-start;margin-bottom:-20px;z-index:5}.bell{width:80px;height:60px;background:linear-gradient(145deg,#1a1a1a,#2a2a2a);border-radius:50%/60% 60% 40% 40%;box-shadow:0 4px 8px #000c,inset 0 2px 4px #ffffff1a,0 0 20px #ffffff0d;position:relative}.bell-left{transform:translate(-60px) rotate(-15deg)}.bell-right{transform:translate(60px) rotate(15deg)}.bell-handle{position:absolute;top:-10px;left:50%;transform:translate(-50%);width:120px;height:8px;background:linear-gradient(90deg,#c0c0c0,#e0e0e0,#c0c0c0);border-radius:4px;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fff3}.clock-body{position:relative;width:400px;height:400px;background:linear-gradient(145deg,#1a1a1a,#2a2a2a);border-radius:50%;box-shadow:0 8px 32px #000c,inset 0 2px 8px #ffffff1a,0 0 40px #ffffff0d;border:3px solid #333;display:flex;align-items:center;justify-content:center;z-index:3}.clock-glass{position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.1) 0%,transparent 70%);box-shadow:inset 0 0 20px #ffffff0d,0 0 20px #ffffff05;z-index:4;pointer-events:none}.clock-face{position:relative;width:360px;height:360px;border-radius:50%;background:linear-gradient(145deg,#f8f8f8,#e8e8e8);border:2px solid #ddd;display:flex;align-items:center;justify-content:center;z-index:2}.minute-markers{position:absolute;width:100%;height:100%}.minute-marker{position:absolute;top:50%;left:50%;width:2px;height:8px;background:#333;transform-origin:0 0;transform:translate(-50%,-50%) rotate(var(--rotation)) translateY(-170px)}.minute-marker:nth-child(5n+1){width:3px;height:12px;background:#000}.clock-number{position:absolute;font-family:Georgia,serif;font-size:1.8rem;font-weight:700;color:#000;transform-origin:center}.clock-12{top:30px;left:50%;transform:translate(-50%)}.clock-1{top:70px;right:100px}.clock-2{top:130px;right:60px}.clock-3{top:50%;right:30px;transform:translateY(-50%)}.clock-4{bottom:130px;right:60px}.clock-5{bottom:70px;right:100px}.clock-6{bottom:30px;left:50%;transform:translate(-50%)}.clock-7{bottom:70px;left:100px}.clock-8{bottom:130px;left:60px}.clock-9{top:50%;left:30px;transform:translateY(-50%)}.clock-10{top:130px;left:60px}.clock-11{top:70px;left:100px}.clock-hand{position:absolute;background:#000;border-radius:2px;transform-origin:bottom center;box-shadow:0 1px 3px #0000004d;z-index:10;transition:transform .5s cubic-bezier(.4,0,.2,1)}.clock-hand.moving{animation:handPulse .6s ease-in-out}@keyframes handPulse{0%,to{box-shadow:0 1px 3px #0000004d;transform:scale(1)}50%{box-shadow:0 0 15px #0009;transform:scale(1.02)}}.hour-hand{width:8px;height:100px;background:linear-gradient(to top,#000,#333);top:50%;left:50%;transform:translate(-50%,-100%);z-index:12;will-change:transform;border-radius:4px}.minute-hand{width:6px;height:140px;background:linear-gradient(to top,#000,#333);top:50%;left:50%;transform:translate(-50%,-100%);z-index:11;will-change:transform;border-radius:3px}.clock-center{position:absolute;top:50%;left:50%;width:16px;height:16px;background:radial-gradient(circle,#333,#000);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0000004d;z-index:13;border:1px solid #666}.clock-feet{position:absolute;bottom:-20px;width:100%;display:flex;justify-content:space-between;z-index:1}.foot{width:8px;height:20px;background:linear-gradient(to bottom,#1a1a1a,#2a2a2a);border-radius:2px;box-shadow:0 2px 4px #0000004d}.foot-left{transform:translate(80px)}.foot-right{transform:translate(-80px)}.time-display{position:absolute;bottom:-100px;left:50%;transform:translate(-50%);text-align:center;color:#fff;font-family:Georgia,serif;font-variant-numeric:tabular-nums;min-width:220px;opacity:1;z-index:30;text-shadow:0 2px 8px rgba(0,0,0,.9);background:rgba(0,0,0,.8);padding:12px 24px;border-radius:12px;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 16px #00000080}.current-time{display:block;font-size:1.4rem;font-weight:700;margin-bottom:6px;color:#fff}.time-progress{display:block;font-size:1rem;opacity:.9;color:#ccc}.clock-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.2);pointer-events:none;z-index:2}@media (max-width: 768px){.clock-container{width:400px;height:400px;opacity:.7}.clock-body{width:320px;height:320px}.clock-face{width:290px;height:290px}.clock-number{font-size:1.4rem}.hour-hand{width:6px;height:80px}.minute-hand{width:4px;height:110px}.bell{width:60px;height:45px}.bell-left{transform:translate(-45px) rotate(-15deg)}.bell-right{transform:translate(45px) rotate(15deg)}.bell-handle{width:90px;height:6px}}@media (max-width: 480px){.clock-container{width:300px;height:300px;opacity:.6}.clock-body{width:240px;height:240px}.clock-face{width:220px;height:220px}.clock-number{font-size:1.2rem}.hour-hand{width:5px;height:60px}.minute-hand{width:3px;height:85px}.bell{width:50px;height:38px}.bell-left{transform:translate(-35px) rotate(-15deg)}.bell-right{transform:translate(35px) rotate(15deg)}.bell-handle{width:70px;height:5px}}