/* Day91 — small motion + colour extras. Loaded last, after color.css. */

/* ---------- the mark: prism dial ---------- */
.mark-tile { fill: #0B1F17; }
.mark-arc { fill: none; stroke-width: 3.2; stroke-linecap: round; transform-origin: 16px 16px; }
.mark-a1 { stroke: #12A150; animation: mk-spin 7s linear infinite; }
.mark-a2 { stroke: #8BD450; animation: mk-spin 5s linear infinite reverse; }
.mark-a3 { stroke: #F5A524; animation: mk-spin 9s linear infinite; }
.mark-core { fill: #fff; animation: mk-beat 2.6s ease-in-out infinite; transform-origin: 16px 16px; }
.mark-pin { fill: #0B1F17; }
.wordmark:hover .mark-a1, .wordmark:hover .mark-a2, .wordmark:hover .mark-a3 { animation-duration: 1.1s; }
.wordmark .wm-mark svg { transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.wordmark:hover .wm-mark svg { transform: rotate(-12deg) scale(1.06); }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@keyframes mk-beat { 0%,100% { transform: scale(1); } 50% { transform: scale(.72); } }
.wm-type span { background: linear-gradient(92deg, #12A150, #8BD450 60%, #F5A524); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .mark-arc, .mark-core { animation: none !important; }
}

/* ---------- odometer numbers ---------- */
.odo { font-variant-numeric: tabular-nums; }

/* ---------- nav: colour sweep underline ---------- */
.masthead nav a { position: relative; }
.masthead nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 2px;
  background: linear-gradient(92deg, var(--c-green), var(--c-lime), var(--c-amber));
  border-radius: 2px; transform: scaleX(0); transform-origin: right;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.masthead nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- hero cursor confetti ---------- */
.trailer {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; z-index: 60; mix-blend-mode: multiply;
  animation: tr-out .85s ease-out forwards;
}
@keyframes tr-out {
  from { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0;   transform: translate(-50%, -160%) scale(.2); }
}

/* ---------- section headings: colour wipe on reveal ---------- */
.section h2 .wipe, .sechead h2 .wipe { display: inline-block; }
.hl {
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  background-image: linear-gradient(92deg, color-mix(in oklab, var(--hue, var(--c-lime)) 34%, transparent), color-mix(in oklab, var(--hue, var(--c-lime)) 14%, transparent));
  background-repeat: no-repeat;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  background-size: 0% 34%;
  background-position: 0 84%;
  transition: background-size .8s cubic-bezier(.2,.8,.2,1);
}
.hl.lit { background-size: 100% 34%; }


/* ---------- marquee chips get colour ---------- */
.marquee-track > * { transition: color .3s ease, background .3s ease; }
.marquee-track > *:nth-child(6n+1) { color: var(--c-green); }
.marquee-track > *:nth-child(6n+2) { color: var(--c-teal); }
.marquee-track > *:nth-child(6n+3) { color: var(--c-plum); }
.marquee-track > *:nth-child(6n+4) { color: var(--c-amber); }
.marquee-track > *:nth-child(6n+5) { color: var(--c-coral); }
.marquee-track > *:nth-child(6n+6) { color: color-mix(in oklab, var(--c-lime) 80%, #000); }

/* ---------- ripple on primary buttons ---------- */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.45); transform: translate(-50%,-50%) scale(0);
  animation: rp .6s ease-out forwards;
}
.btn.ghost .ripple { background: color-mix(in oklab, var(--c-green) 25%, transparent); }
@keyframes rp { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

/* ---------- tiny corner beacons on dark bands ---------- */
.beacon {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  animation: bc 3.2s ease-in-out infinite;
}
@keyframes bc { 0%,100% { opacity: .25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
  .trailer, .ripple, .beacon { display: none !important; }
  .hl { background-size: 100% 38%; }
}