/* Flip-clock countdown — an orange desk flip clock (Twemco-style): plastic body, glass window,
   black split-flap cards with white grotesque numerals, a small caption in the corner like the "PM". */

.clock {
  --c: var(--s);                                     /* one clock unit; the whole thing scales from this */
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: max(18px, calc(var(--s) * 2.4), calc(env(safe-area-inset-bottom) + 12px));      /* parked at the foot of the page: an extra, not part of the centred design */
  padding: calc(var(--c) * .52);
  border-radius: calc(var(--c) * 1.2);
  background: linear-gradient(180deg, #ff6d24 0%, #ff5500 40%, #e24a00 100%);
  box-shadow:
    inset 0 calc(var(--c) * .12) 0 rgba(255, 255, 255, .38),
    inset 0 calc(var(--c) * -.22) calc(var(--c) * .45) rgba(110, 32, 0, .38),
    0 calc(var(--c) * .9) calc(var(--c) * 1.9) rgba(0, 28, 58, .38);
}

.clock[hidden], .flap[hidden] { display: none !important; }

/* retro glow on the clock: the same bleed round the body, and a little bloom on the numerals */
.fx .clock { box-shadow:
    inset 0 calc(var(--c) * .12) 0 rgba(255, 255, 255, .38),
    inset 0 calc(var(--c) * -.22) calc(var(--c) * .45) rgba(110, 32, 0, .38),
    0 0 var(--g1) var(--bloom), 0 0 var(--g2) var(--hal), 0 0 var(--g3) var(--hal-wide); }
.fx .flap { text-shadow: 0 0 var(--g1) rgba(255, 243, 224, .5), 0 0 calc(var(--g2) * .8) rgba(255, 120, 60, .4); }

.clock__window {
  position: relative; display: flex; gap: calc(var(--c) * var(--gap, 2.1));
  padding: calc(var(--c) * .6) calc(var(--c) * var(--pad-x, 1.25));
  border-radius: calc(var(--c) * .75);
  background: #1a1a1a;
  box-shadow: inset 0 0 0 calc(var(--c) * .13) rgba(255, 255, 255, .2), inset 0 calc(var(--c) * .5) calc(var(--c) * .9) rgba(0, 0, 0, .65);
}
.clock__window::after {                                /* the clear cover catching the light */
  content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .17) 0 16%, rgba(255, 255, 255, 0) 16.4% 100%);
}

.flap {
  position: relative; flex: none;
  width: calc(var(--c) * 6.4); height: calc(var(--c) * 6.6);
  perspective: calc(var(--c) * 34);
  font: 700 calc(var(--c) * 4.5) / 1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.035em;
  color: #f5f2e9;
}
.flap.is-wide { width: calc(var(--c) * 8.7); }

/* four leaves per card: static top + bottom, and the two that move */
.flap b { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; font-weight: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap b span { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; }
.flap .t, .flap .lt { top: 0; border-radius: calc(var(--c) * .4) calc(var(--c) * .4) 0 0; background: linear-gradient(180deg, #0d0d0d, #191919); }
.flap .t span, .flap .lt span { top: 0; }
.flap .b, .flap .lb { bottom: 0; border-radius: 0 0 calc(var(--c) * .4) calc(var(--c) * .4); background: linear-gradient(180deg, #202020, #161616); }
.flap .b span, .flap .lb span { bottom: 0; }
.flap .lt { z-index: 3; transform-origin: 50% 100%; }
.flap .lb { z-index: 3; transform-origin: 50% 0; transform: rotateX(90deg); }
.flap.is-flipping .lt { animation: fold .3s cubic-bezier(.45, 0, .9, .55) forwards; }
.flap.is-flipping .lb { animation: unfold .32s cubic-bezier(.2, .6, .35, 1) .3s forwards; }
@keyframes fold { to { transform: rotateX(-90deg); } }
@keyframes unfold { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

.flap::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: 50%; height: max(1px, calc(var(--c) * .09)); margin-top: calc(var(--c) * -.045); background: #000; }   /* the hinge */
.flap::before { content: ""; position: absolute; z-index: 6; left: 50%; top: calc(var(--c) * -.12); width: calc(var(--c) * .95); height: calc(var(--c) * .6); margin-left: calc(var(--c) * -.475); background: #f5f2e9; clip-path: polygon(0 0, 100% 0, 50% 100%); }   /* the little white card stop */
.flap i { position: absolute; z-index: 6; left: calc(var(--c) * .42); bottom: calc(var(--c) * .34); font: 700 calc(var(--c) * .62) / 1 "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; letter-spacing: .09em; text-transform: uppercase; }

@media (max-width: 560px) {
  .clock { --c: 2.7vw; --gap: 1.15; --pad-x: .75; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); }
}
@media (max-height: 560px) and (min-width: 561px) { .clock { --c: calc(var(--s) * .8); } }

@media (prefers-reduced-motion: reduce) { .flap.is-flipping .lt, .flap.is-flipping .lb { animation: none; } }