:root {
  --bg: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #86868b;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px calc(64px + env(safe-area-inset-bottom));
}

/* ---------- clock ---------- */

/* All positions below are fractions of the 779 x 1584 photo canvas. */
.clock {
  --h: clamp(300px, 52vh, 540px);
  position: relative;
  height: var(--h);
  aspect-ratio: 779 / 1584;
  margin: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 1.1s ease, transform 1.4s var(--ease-out);
}
.clock.is-ready { opacity: 1; transform: none; }

.case {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 1px 1.5px rgba(26, 16, 8, 0.28))
    drop-shadow(5px 14px 16px rgba(26, 16, 8, 0.16))
    drop-shadow(12px 34px 40px rgba(26, 16, 8, 0.10));
}

.cap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.cap-top { clip-path: inset(0 0 92.4% 0); }
.cap-bottom { clip-path: inset(92.36% 0 0 0); }

/* the cavity behind the door; the pendulum lives in here */
.pendulum-well {
  position: absolute;
  left: 11.6816%;
  top: 44.192%;
  width: 75.738%;
  height: 48.169%;
  overflow: hidden;
  pointer-events: none;
}

.pendulum {
  position: absolute;
  left: 35.424%;
  top: -46.789%;
  width: 30.508%;
  height: 116.645%;
  transform-origin: 50% 0;
  will-change: transform;
}

.rod {
  position: absolute;
  left: 47.778%;
  width: 4.444%;
  top: 0;
  height: 98%;
  background: linear-gradient(90deg, #24211e 0%, #5a5650 24%, #9a958c 46%, #6e6962 66%, #2a2724 100%);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.bob {
  position: absolute;
  left: 1.111%;
  top: 78.315%;
  width: 97.778%;
  height: 19.775%;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* a soft highlight that slides across the brushed brass as it swings */
.bob-sheen {
  position: absolute;
  left: 2.778%;
  top: 78.652%;
  width: 94.444%;
  height: 19.101%;
  border-radius: 50%;
  background: radial-gradient(circle at calc(38% + var(--sheen, 0) * 22%) 30%, rgba(255, 250, 235, 0.32), rgba(255, 250, 235, 0) 55%);
  mix-blend-mode: soft-light;
}

.nut {
  position: absolute;
  left: 46.2%;
  width: 7.6%;
  top: 96.4%;
  height: 2.3%;
  border-radius: 1.5px;
  background: linear-gradient(90deg, #5d5240, #c8b88f 45%, #8c7c58 70%, #4e4434);
}

.hands {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---------- door ---------- */

.door-mount {
  position: absolute;
  left: 11.6816%;
  top: 7.6389%;
  width: 75.738%;
  height: 84.722%;
  perspective: calc(var(--h) * 3.2);
  perspective-origin: 50% 46%;
}

.door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: url("/assets/door.webp") center / 100% 100% no-repeat;
  cursor: pointer;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 1.25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .door:hover:not(.is-open) { transform: rotateY(-3deg); transition-duration: 0.9s; }
}

.door.is-open { transform: rotateY(-32deg); }
.door.is-open:hover { transform: rotateY(-30deg); }

.door:focus { outline: none; }
.door:focus-visible { outline: 2px solid #0071e3; outline-offset: 5px; border-radius: 3px; }

/* thickness of the door's free edge, seen once it swings out */
.door-edge {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.6%;
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  background: linear-gradient(90deg, #2a190e, #573822 40%, #6a4529 62%, #3b2415);
}

.glass {
  position: absolute;
  pointer-events: none;
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.035) 20%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.055) 74%,
      rgba(255, 255, 255, 0) 90%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06), inset 0 6px 14px rgba(0, 0, 0, 0.18);
}

.glass-upper { left: 8.305%; top: 6.185%; width: 84.576%; height: 36.96%; }
.glass-lower { left: 8.475%; top: 48.733%; width: 84.407%; height: 45.678%; background-color: rgba(28, 16, 8, 0.06); }

/* gold pinstripes painted on the lower glass */
.glass-lower i {
  position: absolute;
  top: 27.732%;
  height: 53.834%;
  width: 0.42%;
  min-width: 0.5px;
  background: linear-gradient(180deg, #a57c34, #e1c47c 28%, #c49c4c 62%, #9c7632);
  opacity: 0.92;
}
.glass-lower i:nth-child(1) { left: 5.02%; }
.glass-lower i:nth-child(2) { left: 11.647%; }
.glass-lower i:nth-child(3) { left: 18.072%; }
.glass-lower i:nth-child(4) { left: 80.321%; }
.glass-lower i:nth-child(5) { left: 86.948%; }
.glass-lower i:nth-child(6) { left: 93.173%; }

/* the foil starburst is painted on the glass; the bob swings behind it */
.glass-lower .star {
  position: absolute;
  left: 33.13%;
  top: 39.15%;
  width: 32.13%;
  height: 26.1%;
  overflow: visible;
  filter: drop-shadow(0 0.5px 0.5px rgba(40, 24, 8, 0.35));
}

/* ---------- words ---------- */

.intro {
  margin-top: clamp(30px, 5vh, 48px);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s ease 0.25s, transform 1.4s var(--ease-out) 0.25s;
}
.clock.is-ready + .intro { opacity: 1; transform: none; }

.intro h1 {
  margin: 0;
  font-size: clamp(20px, 1.2vw + 13px, 24px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

.intro p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.003em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .clock, .intro, .door { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}