/* A late-sixties instrument: enamel case, recessed leaves and ivory ink. */
:root[data-design="flip-clock"] {
  --readout-surface: oklch(calc(0.185 * (1 - var(--bg-black))) 0.014 calc(57 + var(--bg-hue-shift)));
  --readout-border: oklch(0.44 0.038 calc(78 + var(--hue-shift)));
  --readout-shadow: none;
  --page-background:
    linear-gradient(180deg, oklch(0.17 0.012 calc(54 + var(--bg-hue-shift))), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  --screen-glow-background: none;
}

.flip-scene {
  display: grid;
  place-items: center;
  block-size: 100%;
  min-block-size: 0;
}

.vintage-clock {
  --vintage-ivory: color-mix(in oklch, var(--accent) 82%, white);
  --vintage-brass: oklch(0.66 0.065 calc(78 + var(--hue-shift)));
  --vintage-leaf: oklch(0.22 0.009 calc(75 + var(--bg-hue-shift)));
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  inline-size: min(96cqi, 150cqb, 64rem);
  block-size: fit-content;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.vintage-clock .clock-board {
  position: absolute;
  inset: auto;
  gap: clamp(0.6rem, 1.8cqi, 1.15rem);
  --digit-height: clamp(7rem, 25.5cqi, 16rem);
  --digit-width: calc(var(--digit-height) * 0.74);
  --board-gap: clamp(0.3rem, 0.85cqi, 0.55rem);
}

.vintage-clock .digit-group {
  position: relative;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.vintage-clock .flap-card { flex: none; }
.vintage-clock .flap-inner {
  border-radius: 0.55cqi;
  border: 1px solid oklch(0.43 0.013 70 / 0.4);
  background: var(--vintage-leaf);
  box-shadow: 0 2px 3px oklch(0.025 0.005 65 / 0.8);
}
.vintage-clock .flap-half {
  background: linear-gradient(180deg, oklch(0.275 0.009 calc(75 + var(--bg-hue-shift))), var(--vintage-leaf));
}
.vintage-clock .flap-bottom {
  background: linear-gradient(180deg, oklch(0.195 0.008 calc(75 + var(--bg-hue-shift))), oklch(0.25 0.009 calc(75 + var(--bg-hue-shift))));
}
.vintage-clock .flap-text {
  font-family: "Bahnschrift", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif;
  font-size: 23cqi;
  font-weight: 600;
  font-stretch: condensed;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
  padding-right: 0.055em;
  line-height: 1;
  color: var(--vintage-ivory);
  text-shadow: 0 1px 0 oklch(0.99 0.018 88 / 0.2), 0 2px 1px oklch(0.07 0.01 65 / 0.7);
}

/* Keep the central split visible; the leaves have no decorative side clips. */
.vintage-clock .hinge { z-index: 8; block-size: max(2px, 0.27cqi); background: oklch(0.08 0.006 65); box-shadow: 0 1px 0 oklch(0.68 0.02 80 / 0.16); }
.vintage-clock .flap-inner::before,
.vintage-clock .flap-inner::after {
  content: none;
  display: none;
}
.vintage-clock .separator { gap: clamp(1.5rem, 3.4cqi, 2.2rem); padding: 0; }
.vintage-clock .separator span { inline-size: clamp(0.45rem, 0.85cqi, 0.65rem); block-size: clamp(0.45rem, 0.85cqi, 0.65rem); background: var(--vintage-ivory); border-radius: 1px; box-shadow: 0 1px 2px oklch(0.06 0.01 60); opacity: 0.8; }

.vintage-clock .flap-card.is-flipping .flap-top-overlay { animation: vintage-fall-top 600ms linear forwards; }
.vintage-clock .flap-card.is-flipping .flap-bottom-overlay { animation: vintage-fall-bottom 600ms linear forwards; }
@keyframes vintage-fall-top {
  0% { transform: rotateX(0deg); }
  45%, 100% { transform: rotateX(-90deg); }
}
@keyframes vintage-fall-bottom {
  0%, 45% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vintage-clock .flap-card.is-flipping .flap-overlay { animation: none; }
}