/* Tockwell — shared clock-face visuals.
   The analog clock (bezel, face, markers, lightsaber hands, hub) used by both
   the full-screen /clock/ page and the home-page hero embed. Page-level layout
   (full-screen bg videos, dim, overlay) lives elsewhere. Size the clock by
   overriding --clock-size on any ancestor of .clock-assembly. */

.tw-clock {
  --clock-size: min(92vmin, 540px);
  --bezel-pad: 20px;
  --inner-pad: 8px;
  --face-size: calc(var(--clock-size) - (var(--bezel-pad) * 2) - (var(--inner-pad) * 2));
  --face-r: calc(var(--face-size) / 2);

  --tick-r: calc(var(--face-r) - 14px);
  --numeral-r: calc(var(--face-r) - 52px);

  --hour-len: calc(var(--face-r) * 0.52);
  --hour-w: 12px;
  --minute-len: calc(var(--face-r) * 0.72);
  --minute-w: 8px;
  --second-blade-len: calc(var(--face-r) * 0.76);
  --second-tail-len: calc(var(--face-r) * 0.13);
  --second-w: 4px;

  --hub-size: 26px;

  --face-black: #0a0a0c;
  --numeral-gray: #5a5d63;
  --numeral-light: #7a7e86;
  /* Lightsaber palette */
  --vader-dark: #6e0b0b;
  --vader-mid: #c41e1e;
  --vader-bright: #ff3b3b;
  --vader-core: #ffc8c8;

  --luke-esb-dark: #0d47a1;
  --luke-esb-mid: #42a5f5;
  --luke-esb-bright: #80d8ff;
  --luke-esb-core: #e3f7ff;

  --luke-rotj-dark: #006b2e;
  --luke-rotj-mid: #00c853;
  --luke-rotj-bright: #69f0ae;
  --luke-rotj-core: #e8fff0;

  /* ESB Cloud City backdrop glow */
  --esb-glow-bright: #ffb05a;
  --esb-glow-mid: #e87830;
  --esb-glow-deep: #b84e14;
  --esb-glow-ember: #6b2c08;

  font-family: 'DM Sans', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  perspective: 1400px;
  color: #888;
}

.tw-clock *,
.tw-clock *::before,
.tw-clock *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.clock-assembly {
  position: relative;
  transform: rotateX(7deg);
  transform-style: preserve-3d;
}

.clock-shadow {
  position: absolute;
  width: calc(var(--clock-size) + 40px);
  height: 70px;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
  filter: blur(22px);
  z-index: 0;
}

.clock-frame { position: relative; z-index: 1; }

.bezel-outer {
  width: var(--clock-size);
  height: var(--clock-size);
  border-radius: 50%;
  padding: var(--bezel-pad);
  background:
    conic-gradient(
      from 200deg,
      #1a1a22 0deg,
      #3a3a48 60deg,
      #2a2a34 120deg,
      #4a4a5a 180deg,
      #2e2e3a 240deg,
      #1e1e28 300deg,
      #1a1a22 360deg
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 4px 8px rgba(0,0,0,0.5),
    0 16px 48px rgba(0,0,0,0.75),
    0 28px 72px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255,255,255,0.08),
    inset 0 -5px 10px rgba(0,0,0,0.6);
}

.bezel-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: var(--inner-pad);
  background: linear-gradient(145deg, #222230 0%, #121218 100%);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.85),
    inset 0 -1px 2px rgba(255,255,255,0.05);
}

.clock-face {
  position: relative;
  width: var(--face-size);
  height: var(--face-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #1e1e26 0%, var(--face-black) 55%, #050506 100%);
  overflow: visible;
  box-shadow:
    inset 0 0 36px rgba(0,0,0,0.9),
    inset 0 2px 8px rgba(255,255,255,0.03),
    inset 0 -10px 24px rgba(0,0,0,0.7);
}

.face-texture,
.face-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.face-texture {
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}

.face-gloss {
  background:
    radial-gradient(ellipse 70% 50% at 35% 25%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 75%, rgba(255,255,255,0.025) 0%, transparent 50%);
}

/* Shared pivot system: everything rotates around exact face center */
.markers,
.hands-layer { position: absolute; inset: 0; }

.pivot,
.marker-pivot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.tick {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--tick-r));
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--numeral-light), var(--numeral-gray));
}

.tick.minor {
  width: 2px;
  height: 12px;
  opacity: 0.82;
  background: linear-gradient(
    to bottom,
    var(--esb-glow-bright) 0%,
    var(--esb-glow-mid) 45%,
    var(--esb-glow-deep) 80%,
    var(--esb-glow-ember) 100%
  );
  box-shadow:
    0 0 3px rgba(255, 176, 90, 0.45),
    0 0 7px rgba(232, 120, 48, 0.28);
}

.tick.major {
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, #8a8e96, #4a4d54);
  opacity: 0.95;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.numeral {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--numeral-r));
  transform: translate(-50%, -50%);
  width: 44px;
  text-align: center;
  font-size: calc(var(--face-size) * 0.078);
  font-weight: 600;
  line-height: 1;
  color: var(--numeral-gray);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.8),
    0 -1px 0 rgba(255,255,255,0.04);
  user-select: none;
}

.pivot { will-change: transform; }

.hand {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
}

.hand-body { border-radius: 4px 4px 2px 2px; }

.hour-shape { width: var(--hour-w); height: var(--hour-len); }
.hour-shape .hand-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--vader-dark) 0%,
    var(--vader-mid) 28%,
    var(--vader-bright) 42%,
    var(--vader-core) 50%,
    var(--vader-bright) 58%,
    var(--vader-mid) 72%,
    var(--vader-dark) 100%
  );
  box-shadow:
    0 3px 8px rgba(0,0,0,0.55),
    0 0 6px rgba(255,59,59,0.5),
    0 0 18px rgba(196,30,30,0.45),
    0 0 32px rgba(110,11,11,0.35),
    inset 0 1px 2px rgba(255,220,220,0.45),
    inset 0 -3px 5px rgba(0,0,0,0.35);
  filter: drop-shadow(0 0 6px rgba(255,50,50,0.55));
}

.minute-shape { width: var(--minute-w); height: var(--minute-len); }
.minute-shape .hand-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--luke-esb-dark) 0%,
    var(--luke-esb-mid) 28%,
    var(--luke-esb-bright) 42%,
    var(--luke-esb-core) 50%,
    var(--luke-esb-bright) 58%,
    var(--luke-esb-mid) 72%,
    var(--luke-esb-dark) 100%
  );
  box-shadow:
    0 3px 10px rgba(0,0,0,0.45),
    0 0 6px rgba(128,216,255,0.55),
    0 0 18px rgba(66,165,245,0.5),
    0 0 30px rgba(13,71,161,0.35),
    inset 0 1px 2px rgba(227,247,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.3);
  filter: drop-shadow(0 0 6px rgba(66,165,245,0.6));
}

.second-blade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--second-w);
  height: var(--second-blade-len);
  transform: translateX(-50%);
}
.second-blade .hand-body {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--luke-rotj-dark) 0%,
    var(--luke-rotj-mid) 30%,
    var(--luke-rotj-bright) 44%,
    var(--luke-rotj-core) 50%,
    var(--luke-rotj-bright) 56%,
    var(--luke-rotj-mid) 70%,
    var(--luke-rotj-dark) 100%
  );
  box-shadow:
    0 0 5px rgba(105,240,174,0.55),
    0 0 14px rgba(0,200,83,0.5),
    0 0 22px rgba(0,107,46,0.3);
}

.second-tail {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: var(--second-tail-len);
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--luke-rotj-mid) 0%,
    var(--luke-rotj-dark) 55%,
    transparent 100%
  );
  opacity: 0.85;
  box-shadow: 0 0 8px rgba(0,200,83,0.35);
}

.hour-pivot { z-index: 3; }
.minute-pivot { z-index: 4; }
.second-pivot { z-index: 5; }

.center-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: var(--hub-size);
  height: var(--hub-size);
}

.hub-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #3a3a48, #1a1a22, #4a4a58, #2a2a34, #3a3a48);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.65),
    inset 0 1px 3px rgba(255,255,255,0.1);
}

.hub-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2a34, #0a0a0e);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.85);
}

.second-pivot::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--luke-rotj-core), var(--luke-rotj-mid));
  box-shadow:
    0 0 5px rgba(105,240,174,0.7),
    0 0 10px rgba(0,200,83,0.5);
  z-index: 1;
}

.clock-stand {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--clock-size) * 0.55);
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(60,60,70,0.35), transparent);
  border-radius: 50%;
  filter: blur(3px);
}

.info-panel { text-align: center; }
.timezone-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6b6f78;
  margin-bottom: 0.55rem;
}
.digital-time {
  font-size: clamp(1.4rem, 3.5vmin, 1.85rem);
  font-weight: 600;
  color: var(--numeral-light);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.date-line {
  margin-top: 0.45rem;
  font-size: clamp(0.8rem, 2vmin, 0.95rem);
  color: #565a62;
  letter-spacing: 0.04em;
}

/* Reduced motion: the sweeping second hand becomes a once-per-second step.
   (Handled in JS; nothing to disable here, but kill any incidental
   transitions just in case.) */
@media (prefers-reduced-motion: reduce) {
  .tw-clock .pivot { transition: none !important; }
}