/* website/static/css/components/pocket_watch.css */

/* ------------------------------------------------------------
   ADMIRAL-STYLE POCKET WATCH (Luxury + Theme-Aware)
   website/static/css/components/pocket_watch.css
------------------------------------------------------------
   PURPOSE:
   A premium, admiral-inspired pocket watch display with:
   ✓ Gold rim
   ✓ Soft inset glow
   ✓ Theme-aware background behavior
   ✓ Perfect circular geometry
------------------------------------------------------------ */


/* ============================================================
   1) WRAPPER
============================================================ */
.watch-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  position: relative;
}



/* ============================================================
   2) WATCH CANVAS (Face + Rim)
============================================================ */
#watch-canvas {
  border-radius: 50%;

  /* Admiral gold rim */
  border: 8px solid var(--color-gold, #c9a14d);

  /* Outer glow + inner bevel */
  box-shadow:
    0 0 25px rgba(0,0,0,0.5),
    inset 0 0 15px rgba(255,255,255,0.2);

  /* Follow global background (transparent) */
  background: none;

  /* Smooth hover depth */
  transition: box-shadow var(--transition-medium);
}

#watch-canvas:hover {
  box-shadow:
    0 0 32px rgba(0,0,0,0.6),
    inset 0 0 18px rgba(255,255,255,0.25);
}