/* AP Sound Console — shared look (Figma "MAJ - DIGITAL VERSION V.3") */
@font-face {
  font-family: Inter;
  font-weight: 100;
  src: url(fonts/inter-latin-100.woff2) format("woff2");
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: Inter;
  font-weight: 200;
  src: url(fonts/inter-latin-200.woff2) format("woff2");
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: Inter;
  font-weight: 500;
  src: url(fonts/inter-latin-500.woff2) format("woff2");
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: Inter;
  font-weight: 100;
  src: url(fonts/inter-cyrillic-100.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491;
}
@font-face {
  font-family: Inter;
  font-weight: 200;
  src: url(fonts/inter-cyrillic-200.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491;
}
@font-face {
  font-family: Inter;
  font-weight: 500;
  src: url(fonts/inter-cyrillic-500.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  src: url(fonts/cormorant-latin-300i.woff2) format("woff2");
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  src: url(fonts/cormorant-cyrillic-300i.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491;
}

:root {
  --sand-1: #f7e7d5;
  --sand-2: #d9b48c;
  --sand-3: #c9926d;
  --sans: "Helvetica Neue", Inter, "Noto Sans CJK SC", "Apple SD Gothic Neo", sans-serif;
  --serif: "Times Now", "Cormorant Garamond", "Times New Roman", serif;
  --glow: 0 0 14px rgba(255, 255, 255, 0.55);
  --ease: cubic-bezier(0.65, 0, 0.25, 1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--sans);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Fixed-size stage scaled to the device (--k set by fitStage) */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  background: var(--sand-2);
}
/* the sand gradient itself sways slowly (transform only: GPU-composited, no repaint) */
.stage::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(240deg, var(--sand-1) 18%, var(--sand-2) 50%, var(--sand-3) 82%);
  animation: sway 22s ease-in-out infinite alternate;
}
@keyframes sway {
  0% {
    transform: translate(-5%, 3%) rotate(-6deg) scale(1);
  }
  50% {
    transform: translate(3%, -4%) rotate(2deg) scale(1.06);
  }
  100% {
    transform: translate(6%, 2%) rotate(7deg) scale(1.02);
  }
}
/* slow drifting light, keeps the surface alive */
.stage::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 245, 232, 0.38), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: translate(28%, -22%) scale(0.8);
  }
  to {
    transform: translate(-26%, 18%) scale(1.15);
  }
}

/* Typography */
.label {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  line-height: 1.25;
  text-align: center;
}
.thin {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}
.italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}
.digits {
  font-weight: 100;
  letter-spacing: .01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.glow {
  text-shadow: var(--glow);
}
.title {
  text-align: center;
  text-shadow: var(--glow);
}
.title .line {
  display: block;
}

/* Lines rise in one by one */
.line {
  animation: rise 1.1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * .22s + .15s);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(10px);
    letter-spacing: .12em;
  }
}
.fade-in {
  animation: fadeIn .9s ease both;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
.out {
  opacity: 0;
  transition: opacity .35s ease;
}

/* Engraved artwork */
.clock-svg,
.dial-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45)) drop-shadow(.6px .8px 0 rgba(130, 80, 45, 0.25));
}
.hand {
  transform-origin: 170px 170px;
  transition: transform 1.6s var(--ease);
}
.hammer {
  transform-origin: 169.5px 282px;
}
.flash {
  opacity: 0;
}
.flash circle {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  filter: blur(4px);
}

/* Views cross-fade */
.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s .9s;
}
.view.on {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease .2s, visibility 0s;
}

/* Visitors who ask the system for less motion get still backgrounds and instant moves */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

[hidden] {
  display: none !important;
}