/* Split-flap skins. Font sizes and the surrounding layout belong to clock-layout.css. */
body[data-skin="airport"] .time-major,
body[data-skin="airport"] .time-minor {
  display: inline-flex;
  align-items: center;
  gap: .045em;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.13;
  color: #f4eddc;
  text-shadow: 0 1px 1px #0005;
}
body[data-skin="airport"] .time-major .time-colon,
body[data-skin="airport"] .time-minor .time-colon {
  align-self: center;
  flex: 0 0 .2em;
  width: .2em;
  padding: 0 0 .07em;
  font-size: .65em;
  font-weight: 400;
  opacity: .55;
  text-align: center;
}
body[data-skin="airport"] .time-point {
  align-self: flex-end;
  flex: 0 0 .16em;
  width: .16em;
  padding-bottom: .07em;
  opacity: .6;
}
body[data-skin="airport"] .airport-digit {
  display: inline-block;
  position: relative;
  flex: 0 0 .67em;
  width: .67em;
  min-width: .67em;
  height: 1.13em;
  padding: 0;
  border: 1px solid #d7d7c426;
  border-radius: .04em;
  background: #141e27;
  box-shadow: 0 .035em .065em #0004, inset 0 0 0 1px #0002;
  perspective: 10em;
  isolation: isolate;
}
/* Standard flip keeps its softer teal cards, with the same real split leaves. */
body[data-skin="flip"] .time-major,
body[data-skin="flip"] .time-minor {
  display: inline-flex;
  align-items: center;
  gap: .055em;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  line-height: 1.13;
  letter-spacing: 0;
  color: #f5edd9;
}
body[data-skin="flip"] .app-shell .main-time .digit.flip-digit,
.skin-card [data-skin-preview="flip"] .digit.flip-digit {
  --flap-duration: .52s;
  display: inline-block;
  position: relative;
  flex: 0 0 .67em;
  width: .67em;
  min-width: .67em;
  height: 1.13em;
  padding: 0;
  border: 1px solid #dfd1b429;
  border-radius: .06em;
  background: #18313e;
  box-shadow: 0 .035em .1em #05182424;
  perspective: 10em;
  isolation: isolate;
}
body[data-skin="flip"] .digit.changed { animation: none; }
body[data-skin="flip"] .digit.flip-digit::after { content: none; }
.split-digit .flap-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.split-digit .flap-glyph {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.13em;
  line-height: 1.13em;
  text-align: center;
}
.split-digit .flap-top,
.split-digit .flap-leaf-top {
  top: 0;
  border-radius: .035em .035em 0 0;
  background: linear-gradient(#25313b, #1c2731);
  box-shadow: inset 0 1px #fff07;
}
.split-digit .flap-top .flap-glyph,
.split-digit .flap-leaf-top .flap-glyph { top: 0; }
.split-digit .flap-bottom,
.split-digit .flap-old-bottom,
.split-digit .flap-leaf-bottom {
  top: 50%;
  border-radius: 0 0 .035em .035em;
  background: linear-gradient(#18232d, #1e2a34);
}
.split-digit .flap-bottom .flap-glyph,
.split-digit .flap-old-bottom .flap-glyph,
.split-digit .flap-leaf-bottom .flap-glyph { top: -.565em; }
.split-digit .flap-old-bottom { z-index: 2; }
.split-digit .flap-leaf-top { z-index: 4; transform-origin: center bottom; }
.split-digit .flap-leaf-bottom { z-index: 3; transform-origin: center top; transform: rotateX(90deg); }
.split-digit .flap-hinges {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #050d15b3;
  box-shadow: 0 1px #fff04;
  pointer-events: none;
}
.split-digit .flap-hinges::before,
.split-digit .flap-hinges::after {
  content: "";
  position: absolute;
  top: -.018em;
  width: .018em;
  height: .04em;
  min-width: 1px;
  border-radius: 1px;
  background: #0a131c;
  box-shadow: 0 1px #ffffff15;
}
.split-digit .flap-hinges::before { left: .018em; }
.split-digit .flap-hinges::after { right: .018em; }
.flip-digit .flap-top,
.flip-digit .flap-leaf-top {
  border-radius: .05em .05em 0 0;
  background: linear-gradient(#294550, #203a47);
}
.flip-digit .flap-bottom,
.flip-digit .flap-old-bottom,
.flip-digit .flap-leaf-bottom {
  border-radius: 0 0 .05em .05em;
  background: linear-gradient(#172e3a, #1b3440);
}
.flip-digit .flap-hinges { background: #071b27cc; }
.flip-digit .flap-hinges::before,
.flip-digit .flap-hinges::after { background: #0c2531; }
.split-digit.changed .flap-leaf-top { animation: airport-top var(--flap-duration, .48s) ease-in forwards; }
.split-digit.changed .flap-leaf-bottom { animation: airport-bottom var(--flap-duration, .48s) ease-out forwards; }
.split-digit.changed .flap-old-bottom { animation: airport-old var(--flap-duration, .48s) steps(1, end) forwards; }
@keyframes airport-top {
  0% { transform: rotateX(0); filter: brightness(1); }
  48%, 100% { transform: rotateX(-90deg); filter: brightness(.65); }
}
@keyframes airport-bottom {
  0%, 48% { transform: rotateX(90deg); filter: brightness(.65); }
  100% { transform: rotateX(0); filter: brightness(1); }
}
@keyframes airport-old { 0% { opacity: 1; } 100% { opacity: 0; } }
body[data-motion="reduced"] .split-digit .flap-old-bottom,
body[data-motion="reduced"] .split-digit .flap-leaf-top,
body[data-motion="reduced"] .split-digit .flap-leaf-bottom,
body[data-motion="off"] .split-digit .flap-old-bottom,
body[data-motion="off"] .split-digit .flap-leaf-top,
body[data-motion="off"] .split-digit .flap-leaf-bottom { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .split-digit .flap-old-bottom,
  .split-digit .flap-leaf-top,
  .split-digit .flap-leaf-bottom { display: none; animation: none; }
}