.dynamic-page {
  position: relative;
  overflow: hidden;
}

.dynamic-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: orbFloat 8s ease-in-out infinite;
}

.orb1 {
  width: 300px;
  height: 300px;
  background: #e94560;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.orb2 {
  width: 250px;
  height: 250px;
  background: #4ecdc4;
  top: 50%;
  right: 15%;
  animation-delay: -2s;
}

.orb3 {
  width: 200px;
  height: 200px;
  background: #ffd93d;
  bottom: 15%;
  left: 30%;
  animation-delay: -4s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.dynamic-time {
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ffd93d);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.dynamic-clock-wrap {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  width: min(340px, 85vw);
  height: min(340px, 85vw);
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(78, 205, 196, 0.4)); }
  50% { filter: drop-shadow(0 0 35px rgba(233, 69, 96, 0.5)); }
}

.dynamic-face {
  border: 4px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(0, 0, 0, 0.2);
  animation: faceRotate 20s linear infinite;
}

.dynamic-face::before {
  animation: centerPulse 1s ease-in-out infinite;
}

@keyframes faceRotate {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

@keyframes centerPulse {
  0%, 100% { box-shadow: 0 0 10px #e94560; transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 0 20px #4ecdc4; transform: translate(-50%, -50%) scale(1.1); }
}

.dynamic-face .hand.second-hand {
  transition: transform 0.1s cubic-bezier(0.4, 2.5, 0.3, 1);
}

.date-display {
  position: relative;
  z-index: 1;
}