/**
 * manniPhone - Rotary Dial Styles
 * Wählscheiben-Design (1970er-1980er)
 */

/* Rotary Dial Container */
.rotary-dial {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #000);
  position: relative;
  margin: 0 auto;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.6),
    inset 0 2px 5px rgba(255, 255, 255, 0.1);
}

/* Dial Plate (drehbare Scheibe) */
.dial-plate {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  transform-origin: center center;
  transition: transform var(--transition-slow) cubic-bezier(0.4, 0.0, 0.2, 1);
}

.dial-plate.rotating {
  animation: rotateBack 1s ease-out;
}

@keyframes rotateBack {
  0% { 
    transform: rotate(var(--rotation, 0deg)); 
  }
  100% { 
    transform: rotate(0deg); 
  }
}

/* Center Circle (Logo/Branding) */
.dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #1a1a1a, #000);
  border-radius: 50%;
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 3px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #666;
  font-weight: bold;
  pointer-events: none;
}

/* Finger Holes (Wähllöcher) */
.hole {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  color: #000;
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
  z-index: 10;
  /* WICHTIG: Startpunkt in der Mitte */
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
}

/* Hole Positioning (Kreis um Zentrum) */
.hole:nth-child(1) { 
  transform: rotate(27deg) translateX(115px) rotate(-27deg); 
}
.hole:nth-child(2) { 
  transform: rotate(63deg) translateX(115px) rotate(-63deg); 
}
.hole:nth-child(3) { 
  transform: rotate(99deg) translateX(115px) rotate(-99deg); 
}
.hole:nth-child(4) { 
  transform: rotate(135deg) translateX(115px) rotate(-135deg); 
}
.hole:nth-child(5) { 
  transform: rotate(171deg) translateX(115px) rotate(-171deg); 
}
.hole:nth-child(6) { 
  transform: rotate(207deg) translateX(115px) rotate(-207deg); 
}
.hole:nth-child(7) { 
  transform: rotate(243deg) translateX(115px) rotate(-243deg); 
}
.hole:nth-child(8) { 
  transform: rotate(279deg) translateX(115px) rotate(-279deg); 
}
.hole:nth-child(9) { 
  transform: rotate(315deg) translateX(115px) rotate(-315deg); 
}
.hole:nth-child(10) { 
  transform: rotate(351deg) translateX(115px) rotate(-351deg); 
}

/* Hole Letters (ABC, DEF, etc.) */
.hole .letters {
  position: absolute;
  bottom: -18px;
  font-size: 0.6rem;
  color: #999;
  font-weight: normal;
}

/* Hole Hover Effect */
.hole:hover {
  background: #f0f0f0;
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(255, 255, 255, 0.3);
}

/* Hole Active (Click) */
.hole:active {
  background: #e0e0e0;
}

/* Finger Stop (Anschlag) */
.finger-stop {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 45px;
  height: 70px;
  background: linear-gradient(to right, #555, #333);
  border-radius: 5px;
  box-shadow: 
    -2px 0 8px rgba(0, 0, 0, 0.4),
    inset 1px 0 2px rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
}

/* Number Ring (Zahlenkranz) */
.number-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

.number-label {
  position: absolute;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ccc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Rotary Specific Display */
.rotary-container .phone-display {
  background: #1a1a1a;
  border: 3px solid #333;
  box-shadow: 
    inset 0 3px 10px rgba(0, 0, 0, 0.7),
    0 2px 5px rgba(0, 255, 0, 0.2);
}

/* Vintage Effect */
.rotary-dial::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 25% 25%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Responsive Rotary */
@media (max-width: 480px) {
  .rotary-dial {
    width: 260px;
    height: 260px;
  }
  
  .hole {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    margin-top: -14px;
    margin-left: -14px;
  }
  
  .hole:nth-child(1) { transform: rotate(27deg) translateX(100px) rotate(-27deg); }
  .hole:nth-child(2) { transform: rotate(63deg) translateX(100px) rotate(-63deg); }
  .hole:nth-child(3) { transform: rotate(99deg) translateX(100px) rotate(-99deg); }
  .hole:nth-child(4) { transform: rotate(135deg) translateX(100px) rotate(-135deg); }
  .hole:nth-child(5) { transform: rotate(171deg) translateX(100px) rotate(-171deg); }
  .hole:nth-child(6) { transform: rotate(207deg) translateX(100px) rotate(-207deg); }
  .hole:nth-child(7) { transform: rotate(243deg) translateX(100px) rotate(-243deg); }
  .hole:nth-child(8) { transform: rotate(279deg) translateX(100px) rotate(-279deg); }
  .hole:nth-child(9) { transform: rotate(315deg) translateX(100px) rotate(-315deg); }
  .hole:nth-child(10) { transform: rotate(351deg) translateX(100px) rotate(-351deg); }
  
  .dial-center {
    width: 70px;
    height: 70px;
  }
  
  .finger-stop {
    width: 35px;
    height: 60px;
  }
}

/* Animation for Pulse Effect */
@keyframes pulse-ring {
  0%, 100% {
    box-shadow: 
      0 0 0 0 rgba(0, 255, 0, 0.4),
      inset 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 0 0 10px rgba(0, 255, 0, 0),
      inset 0 2px 5px rgba(0, 0, 0, 0.3);
  }
}

.rotary-dial.pulsing {
  animation: pulse-ring 0.6s ease-out;
}