/* Dashboard companion: restore the existing astronaut scene inside the timer card. */
.clock-card > .space-scene-timer {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
}

.clock-card > .clock-content {
  position: relative;
  z-index: 1;
  padding-right: clamp(150px, 18vw, 225px);
}

.space-scene-timer .space-halo {
  background: radial-gradient(ellipse at 80% 48%, #d7b74736, #0000 72%);
  width: 42%;
  height: 100%;
  top: 0;
  left: auto;
  right: 0;
}

.space-scene-timer .space-stars,
.space-scene-timer .space-orbit,
.space-scene-timer .space-planet,
.space-scene-timer .space-spark {
  opacity: .42;
}

.space-scene-timer .space-astronaut {
  width: clamp(165px, 21vw, 250px);
  max-height: 92%;
  top: 3%;
  left: auto;
  right: 1%;
  filter: drop-shadow(2px 13px 12px #0003);
}

/* A clear live clock in the company time zone, alongside today's date. */
.company-clock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 5px;
  padding: 8px 12px;
  border: 1px solid #e7dfc9;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffdf6, #fff9e5);
  box-shadow: 0 3px 12px #54451b0b;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.company-clock-label {
  color: #837a62;
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.company-clock-value {
  color: #302b1f;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .025em;
}

/* Smoother page arrivals and more responsive cards and controls. */
@keyframes amz-page-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.988); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes amz-clock-glow {
  0%, 100% { opacity: .18; transform: translateX(-35%) rotate(12deg); }
  50% { opacity: .55; transform: translateX(35%) rotate(12deg); }
}

.page-view > * {
  animation: amz-page-arrive .68s cubic-bezier(.16, 1, .3, 1) both;
}

.page-view > *:nth-child(2) { animation-delay: 70ms; }
.page-view > *:nth-child(3) { animation-delay: 130ms; }
.page-view > *:nth-child(4) { animation-delay: 185ms; }

.stats-grid > *,
.dashboard-grid > *,
.leave-grid > *,
.holiday-grid > * {
  transition: transform .32s cubic-bezier(.2, .75, .25, 1), box-shadow .32s ease, border-color .32s ease;
}

.stats-grid > *:hover,
.dashboard-grid > *:hover,
.leave-grid > *:hover,
.holiday-grid > *:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 32px #29251c12;
}

.clock-card {
  isolation: isolate;
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2, .75, .25, 1);
}

.clock-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  right: 13%;
  width: 18%;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff7d765, transparent);
  animation: amz-clock-glow 10s ease-in-out infinite;
}

.button,
.icon-button,
.text-button,
.nav-link {
  transition: transform .22s cubic-bezier(.2, .75, .25, 1), box-shadow .22s ease, background-color .22s ease, color .22s ease;
}

.button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.company-clock {
  animation: amz-page-arrive .55s cubic-bezier(.16, 1, .3, 1) both;
}

@media (max-width: 900px) {
  .clock-card > .clock-content { padding-right: 128px; }
  .space-scene-timer .space-astronaut { width: 155px; right: -2%; opacity: .86; }
  .company-clock { gap: 6px; padding: 7px 9px; }
  .company-clock-label { display: none; }
}

@media (max-width: 620px) {
  .clock-card > .clock-content { padding-right: 0; }
  .space-scene-timer .space-astronaut { width: 118px; top: auto; right: -3%; bottom: 3%; opacity: .22; }
  .space-scene-timer .space-stars,
  .space-scene-timer .space-orbit,
  .space-scene-timer .space-planet,
  .space-scene-timer .space-spark { opacity: .2; }
  .company-clock { margin-left: 0; }
  .company-clock-value { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-view > *,
  .company-clock { animation: none !important; }
  .stats-grid > *,
  .dashboard-grid > *,
  .leave-grid > *,
  .holiday-grid > *,
  .clock-card,
  .button,
  .icon-button,
  .text-button,
  .nav-link { transition: none !important; }
  .clock-card::after { animation: none !important; }
}