/* StandBy Mode Pro - Clock Stylesheets */

/* Clock Container Base */
.clock-display-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   1. 3D RETRO FLIP CLOCK
   ========================================================================== */
.flip-clock-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  perspective: 1200px;
}

.flip-group {
  display: flex;
  gap: clamp(0.25rem, 1vw, 0.5rem);
}

.flip-unit {
  position: relative;
  width: clamp(3.2rem, 11vw, 8.5rem);
  height: clamp(4.5rem, 16vw, 12rem);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 10vw, 7.5rem);
  line-height: 1;
  background: #111116;
  border-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  perspective: 600px;
  user-select: none;
}

.flip-card-top,
.flip-card-bottom {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: #181820;
  color: #f2f2f8;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-top {
  top: 0;
  height: 50%;
  align-items: flex-end;
  border-top-left-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  border-top-right-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1);
  transform-origin: bottom;
}

.flip-card-bottom {
  bottom: 0;
  height: 50%;
  align-items: flex-start;
  border-bottom-left-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  border-bottom-right-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.5);
  transform-origin: top;
}

.flip-card-top span {
  transform: translateY(50%);
}

.flip-card-bottom span {
  transform: translateY(-50%);
}

/* Flip Animation */
.flip-leaf {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-leaf.leaf-front {
  top: 0;
  align-items: flex-end;
  border-top-left-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  border-top-right-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  background: #1a1a24;
  color: #f2f2f8;
  transform-origin: bottom;
  z-index: 5;
}

.flip-leaf.leaf-front span {
  transform: translateY(50%);
}

.flip-leaf.leaf-back {
  bottom: 0;
  align-items: flex-start;
  border-bottom-left-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  border-bottom-right-radius: clamp(0.5rem, 1.5vw, 1.25rem);
  background: #16161e;
  color: #f2f2f8;
  transform-origin: top;
  transform: rotateX(180deg);
  z-index: 4;
}

.flip-leaf.leaf-back span {
  transform: translateY(-50%);
}

.flip-unit.flipping .leaf-front {
  transform: rotateX(-180deg);
}

.flip-unit.flipping .leaf-back {
  transform: rotateX(0deg);
}

/* Flip Card Hinge & Side Pins */
.flip-unit::before,
.flip-unit::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  width: 4px;
  height: 8px;
  background: #2b2b36;
  border-radius: 2px;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.flip-unit::before {
  left: -2px;
}

.flip-unit::after {
  right: -2px;
}

.flip-divider {
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  animation: pulseBlink 1s step-end infinite;
}

@keyframes pulseBlink {
  50% { opacity: 0.2; }
}

/* ==========================================================================
   2. NEON GLOW CLOCK
   ========================================================================== */
.neon-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.neon-time {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15vw, 10rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px var(--accent-color),
    0 0 40px var(--accent-color),
    0 0 80px var(--accent-color),
    0 0 120px var(--accent-color);
  animation: neonFlicker 6s ease-in-out infinite alternate;
}

.neon-date {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-color);
  text-shadow: 0 0 10px var(--accent-glow);
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 15px var(--accent-color));
  }
  20%, 24%, 55% {
    opacity: 0.85;
    filter: none;
  }
}

/* ==========================================================================
   3. MATRIX GLYPH CLOCK
   ========================================================================== */
.matrix-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(0, 30, 10, 0.4) 0%, transparent 80%);
  padding: 2rem;
  border-radius: 2rem;
  border: 1px solid rgba(0, 255, 100, 0.15);
  box-shadow: 0 0 40px rgba(0, 255, 100, 0.1);
}

.matrix-time {
  font-family: var(--font-digital);
  font-size: clamp(4rem, 16vw, 11rem);
  color: #55ff77;
  text-shadow: 0 0 15px #00ff55, 0 0 30px rgba(0, 255, 85, 0.6);
  letter-spacing: 0.1em;
}

.matrix-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  color: #00dd44;
  letter-spacing: 0.25em;
}

/* ==========================================================================
   4. SOLAR ASTRONOMICAL CLOCK
   ========================================================================== */
.solar-clock-container {
  position: relative;
  width: clamp(16rem, 45vw, 28rem);
  height: clamp(16rem, 45vw, 28rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solar-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.solar-time-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 5;
}

.solar-time {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffe699;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
}

.solar-period {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: #ffb84d;
  text-transform: uppercase;
}

/* ==========================================================================
   5. BIG CROP CLOCK (Pixel Style)
   ========================================================================== */
.big-crop-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.big-crop-time {
  font-family: var(--font-display);
  font-size: clamp(8rem, 30vw, 22rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: #f5f5f7;
  opacity: 0.95;
  text-align: center;
  white-space: nowrap;
}

.big-crop-seconds {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--accent-color);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   6. RADIAL GAUGE SWEEP CLOCK
   ========================================================================== */
.radial-clock-container {
  position: relative;
  width: clamp(15rem, 42vw, 26rem);
  height: clamp(15rem, 42vw, 26rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radial-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.radial-time {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.radial-date {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #8e8e99;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   7. DAY / DEMENTIA / SENIOR-FRIENDLY CLOCK
   ========================================================================== */
.day-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 0.75rem;
}

.day-name {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 900;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.day-period-pill {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 700;
  color: #111;
  background: #06d6a0;
  padding: 0.35rem 1.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 6px 20px rgba(6, 214, 160, 0.4);
}

.day-time {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  color: #ffffff;
}

.day-full-date {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: #b0b0be;
}

/* ==========================================================================
   8. 7-SEGMENT LED CLOCK
   ========================================================================== */
.segmented-clock-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #08080a;
  padding: 1.5rem 2.5rem;
  border-radius: 1.5rem;
  border: 2px solid #1a1a22;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.seg-digit-group {
  font-family: var(--font-digital);
  font-size: clamp(4rem, 14vw, 9.5rem);
  color: #ff3344;
  text-shadow: 0 0 20px rgba(255, 51, 68, 0.7);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   9. BAUHAUS ANALOG + DIGITAL CLOCK
   ========================================================================== */
.analog-digital-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}

.analog-dial {
  width: clamp(10rem, 26vw, 18rem);
  height: clamp(10rem, 26vw, 18rem);
  position: relative;
  border-radius: 50%;
  background: #131318;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.analog-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 9999px;
}

.hand-hour {
  width: 4px;
  height: 28%;
  background: #ffffff;
  margin-left: -2px;
  z-index: 3;
}

.hand-minute {
  width: 3px;
  height: 40%;
  background: #cfd0d8;
  margin-left: -1.5px;
  z-index: 4;
}

.hand-second {
  width: 2px;
  height: 45%;
  background: #ef4444;
  margin-left: -1px;
  z-index: 5;
}

.analog-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.digital-companion {
  display: flex;
  flex-direction: column;
}

.digital-companion-time {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  color: #ffffff;
}

.digital-companion-date {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: #8b8b99;
}

/* ==========================================================================
   10. AMOLED ULTRA-MINIMAL CLOCK
   ========================================================================== */
.amoled-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000000;
}

.amoled-time {
  font-family: var(--font-sans);
  font-size: clamp(4rem, 16vw, 11rem);
  font-weight: 200;
  color: #777782;
  letter-spacing: -0.04em;
  transition: color 0.3s ease;
}

.amoled-time:hover {
  color: #ffffff;
}

/* ==========================================================================
   11. STAR TREK LCARS TACTICAL CLOCK
   ========================================================================== */
.lcars-clock-container {
  display: flex;
  align-items: stretch;
  background: #000;
  padding: 1.5rem;
  border-radius: 2rem;
  gap: 1rem;
}

.lcars-elbow {
  width: clamp(3rem, 8vw, 6rem);
  background: #ff9900;
  border-top-left-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0.5rem;
}

.lcars-text-id {
  font-family: var(--font-digital);
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.lcars-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lcars-time {
  font-family: var(--font-digital);
  font-size: clamp(3rem, 11vw, 7.5rem);
  color: #cc6699;
  letter-spacing: 0.05em;
  line-height: 1;
}

.lcars-bar {
  height: 10px;
  background: #9999ff;
  border-radius: 5px;
  margin: 0.5rem 0;
}