/* $CAP: callout and print. One screen: the rooftop loop is the site; money falls over it; the UI is candy-glossy like the wordmark. */
:root {
  --dusk: #e9b48c;                         /* the sunset behind everything while the video loads */
  --face-top: oklch(98.5% 0.03 115);       /* the wordmark's cream face */
  --face-bot: oklch(90% 0.085 155);        /* … fading to pale mint */
  --edge: oklch(46% 0.13 152);             /* the 3D extrusion */
  --edge-dark: oklch(31% 0.08 158);        /* outline */
  --ink: oklch(30% 0.08 158);
  --ink-2: oklch(42% 0.07 156);
  --ui: "Rubik", "Arial Rounded MT Bold", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--dusk);
  color: var(--ink);
  font-family: var(--ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--face-top); outline-offset: 4px; border-radius: 14px; }

/* the rooftop: covers wide screens, drifts a little with the cursor */
.stage {
  position: fixed; inset: -14px; z-index: 0; overflow: hidden;
  background: var(--dusk) url("/cap-poster.jpg?v=3") 62% 50% / cover no-repeat;
  transition: transform 900ms var(--ease);
}
.stage video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.rain { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .stage video, .rain { display: none; } }

.screen { position: fixed; inset: 0; z-index: 2; }

/* wordmark: top left on the sky, floats, kicks on the beat */
.mark {
  position: absolute; left: clamp(14px, 3.6vw, 72px); top: clamp(14px, 4.5vh, 60px);
  width: clamp(280px, 36vw, 720px); line-height: 0;
  animation: rise 700ms var(--ease) both;
}
.mark img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 26px oklch(30% 0.08 40 / 0.35));
  animation: float 5.2s ease-in-out infinite;
  transform-origin: 30% 60%;
}
.mark.kick img { animation: float 5.2s ease-in-out infinite, kick 260ms var(--ease); }

/* candy material shared by the note and the buttons */
.note, .beat, .copy {
  border: 3px solid var(--edge-dark);
  background: linear-gradient(180deg, var(--face-top), var(--face-bot));
  box-shadow:
    inset 0 2px 0 oklch(100% 0 0 / 0.85),
    inset 0 -3px 0 oklch(80% 0.09 155 / 0.6),
    0 6px 0 var(--edge),
    0 8px 0 var(--edge-dark),
    0 20px 34px oklch(25% 0.07 40 / 0.38);
}

/* the note: bottom left on the terrace */
.note {
  position: absolute; left: clamp(14px, 3.6vw, 72px); bottom: calc(clamp(22px, 5.5vh, 72px) + env(safe-area-inset-bottom));
  width: min(700px, 48vw);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 22px;
  padding: 16px 16px 16px 24px; border-radius: 26px;
  animation: rise 700ms var(--ease) 140ms both;
}
.lab { display: block; font: italic 800 13px/1 var(--ui); letter-spacing: 0.02em; color: var(--ink-2); }
.denom { display: block; padding-right: 22px; border-right: 2px solid oklch(46% 0.13 152 / 0.25); }
.val {
  display: block; height: 1.12em; overflow: hidden; margin-top: 6px;
  font: italic 900 clamp(32px, 3vw, 46px)/1.12 var(--ui); font-variant-numeric: tabular-nums;
  color: var(--face-top);
  text-shadow: 0 2px 0 var(--edge), 0 4px 0 var(--edge-dark), -2px 0 0 var(--edge-dark), 2px 0 0 var(--edge-dark), 0 -2px 0 var(--edge-dark);
  letter-spacing: 0.01em;
}
.val .num { display: block; transition: transform 360ms var(--ease), opacity 360ms var(--ease); }
.val .num.out { transform: translateY(-80%); opacity: 0; }
.val .num.in { transform: translateY(80%); opacity: 0; transition: none; }
.serial { min-width: 0; }
.ca { display: block; margin-top: 8px; font: 14px/1.4 var(--mono); letter-spacing: 0.03em; color: var(--ink); word-break: break-all; }
.ca.is-empty { letter-spacing: 0.08em; color: var(--ink-2); }

.copy, .beat { cursor: pointer; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.copy {
  min-width: 96px; height: 56px; padding: 0 18px; border-radius: 18px;
  font: italic 900 19px/1 var(--ui); letter-spacing: 0.01em; color: var(--ink);
}
.copy:hover:not(:disabled), .beat:hover { transform: translateY(-2px); }
.copy:active:not(:disabled), .beat:active { transform: translateY(5px); box-shadow: inset 0 2px 0 oklch(100% 0 0 / 0.85), 0 1px 0 var(--edge), 0 3px 0 var(--edge-dark), 0 8px 16px oklch(25% 0.07 40 / 0.3); }
.copy:disabled { cursor: default; opacity: 0.55; }
.copy.done { background: linear-gradient(180deg, oklch(80% 0.15 152), oklch(64% 0.15 152)); color: var(--face-top); }

/* the beat switch: top right */
.beat {
  position: absolute; right: clamp(14px, 3.6vw, 72px); top: clamp(14px, 4.5vh, 60px);
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 16px; border-radius: 18px;
  font: italic 900 19px/1 var(--ui); color: var(--ink);
  animation: rise 700ms var(--ease) 220ms both;
}
.eq { display: flex; align-items: flex-end; gap: 3px; width: 22px; height: 20px; }
.eq i { display: block; width: 4px; height: 30%; border-radius: 2px; background: var(--edge); }
.beat.on .eq i { animation: eq 0.63s ease-in-out infinite alternate; }
.beat.on .eq i:nth-child(2) { animation-delay: -0.21s; }
.beat.on .eq i:nth-child(3) { animation-delay: -0.42s; }
.beat.on .eq i:nth-child(4) { animation-delay: -0.1s; }
.beat:not(.started)::after {
  content: ""; position: absolute; inset: -10px; border-radius: 24px; border: 3px solid var(--face-top);
  animation: ping 1.6s var(--ease) infinite; pointer-events: none;
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-10px) rotate(0.6deg); } }
@keyframes kick { 0% { scale: 1; } 30% { scale: 1.045; } 100% { scale: 1; } }
@keyframes eq { from { height: 22%; } to { height: 100%; } }
@keyframes ping { 0% { opacity: 0.9; scale: 0.92; } 100% { opacity: 0; scale: 1.12; } }
@media (prefers-reduced-motion: reduce) {
  .mark, .note, .beat, .mark img, .beat:not(.started)::after, .beat.on .eq i { animation: none; }
}

/* tall screens: a sharp band of the loop over a blurred copy of the same sunset */
@media (max-aspect-ratio: 1/1) {
  .stage { inset: 0; background: var(--dusk); }
  .stage::before {
    content: ""; position: absolute; inset: -40px;
    background: url("/cap-poster.jpg?v=3") 62% 50% / cover no-repeat;
    filter: blur(26px) saturate(1.15); transform: scale(1.08);
  }
  .stage::after {
    content: ""; position: absolute; left: 50%; top: 53%;
    width: 165vw; aspect-ratio: 16 / 9; transform: translate(-60%, -50%);
    background: url("/cap-poster.jpg?v=3") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .stage video {
    z-index: 1;
    position: absolute; left: 50%; top: 53%;
    width: 165vw; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    transform: translate(-60%, -50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .mark { left: 50%; top: calc(76px + env(safe-area-inset-top)); width: min(88vw, 520px); translate: -50% 0; }
  .beat { top: calc(14px + env(safe-area-inset-top)); right: 14px; height: 48px; padding: 0 16px 0 13px; font-size: 17px; }
  .note { left: 12px; right: 12px; width: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "denom copy" "serial serial"; gap: 12px 12px; padding: 14px 14px 16px 18px; border-radius: 22px; }
  .denom { grid-area: denom; border-right: 0; padding-right: 0; }
  .copy { grid-area: copy; }
  .serial { grid-area: serial; padding-top: 10px; border-top: 2px solid oklch(46% 0.13 152 / 0.2); }
  .ca { font-size: 13px; }
}