/* ═══════════════════════════════════════════════════════════════════════
   ecomit v5: experience layer (cursor, gauge, receipt)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Kinetic type ─── */
[data-kinetic] .kw { display: inline-block; white-space: nowrap; }
[data-kinetic] .kc { display: inline-block; will-change: transform, opacity; }

/* ─── Chapter numbers on the home page (like printed chapters) ─── */
body.is-home main { counter-reset: chapter; }
body.is-home main [data-chapter-label] { counter-increment: chapter; }
body.is-home main [data-chapter-label] .section-head > .eyebrow::before {
  content: counter(chapter, decimal-leading-zero); display: inline-block; margin-right: .7rem; padding: .15rem .45rem;
  border-radius: 6px; background: var(--bg-3); color: var(--text); font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  width: auto; height: auto;
}

/* ─── Brick → Click gauge ─── */
.gauge {
  position: fixed; left: 20px; bottom: 20px; z-index: 840; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 12px; border-radius: 14px; background: rgba(255,255,255,.92); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .76rem; color: var(--text-2); transform: translateY(140%); transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.gauge.is-shown { transform: none; }
.gauge__num { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; font-size: .9rem; }
.gauge__name { display: block; color: var(--text); font-weight: 600; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge.flip .gauge__name, .gauge.flip .gauge__num { animation: gauge-flip .45s cubic-bezier(.22,1,.36,1); }
@keyframes gauge-flip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gauge__bar { width: 110px; }
.gauge__ends { display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: 5px; }
.gauge__track { height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.gauge__track span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--teal)); transform-origin: left; transform: scaleX(0); }
.gauge__pct { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 3.4ch; text-align: right; }
@media (max-width: 1023px) { .gauge { display: none; } }

/* ─── Custom cursor (fine pointers) ─── */
.has-cursor body, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor summary { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 4000; pointer-events: none; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--brand); }
.cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(91,63,217,.45);
  display: grid; place-items: center; transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1), margin .3s cubic-bezier(.22,1,.36,1), background .3s, border-color .3s, opacity .2s;
}
.cur-ring span { font-size: .72rem; font-weight: 700; color: #fff; opacity: 0; transition: opacity .2s; letter-spacing: .02em; }
.cur-ring.is-link { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(91,63,217,.08); border-color: rgba(91,63,217,.35); }
.cur-ring.is-label { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: var(--brand); border-color: var(--brand); }
.cur-ring.is-label span { opacity: 1; }
.cur-ring.is-text { opacity: 0; }
.cur-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* ─── Motion toggle in the nav ─── */
.exp-toggle { display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; height: 34px; padding: 0 .6rem; border-radius: 8px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.exp-toggle:hover { background: var(--bg-2); color: var(--text); }
.exp-toggle[aria-pressed="true"] { color: var(--brand); }

/* ─── Hidden ending: the receipt ─── */
.receipt-wrap { display: grid; place-items: center; padding: 40px 0 70px; overflow: hidden; }
.receipt-wrap p.meta { margin-bottom: 18px; }
.receipt-slot { width: 340px; max-width: calc(100% - 40px); height: 14px; border-radius: 8px; background: #E3E6EB; box-shadow: inset 0 3px 6px rgba(16,24,40,.18); position: relative; z-index: 2; }
.receipt {
  width: 300px; max-width: calc(100% - 60px); margin-top: -7px; padding: 26px 22px 30px; background: #fff;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; color: #0B1220; line-height: 1.7;
  box-shadow: 0 20px 40px -24px rgba(16,24,40,.35);
  clip-path: inset(0 0 100% 0); transform: translateY(-24px);
  transition: clip-path 2.4s steps(24, end), transform 2.4s steps(24, end);
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x;
  mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x;
  padding-bottom: 36px;
}
.receipt.is-printed { clip-path: inset(0 0 0 0); transform: none; }
.receipt img { height: 20px; width: auto; margin: 0 auto 10px; }
.receipt .c { text-align: center; }
.receipt hr { border: 0; border-top: 1px dashed #98A2B3; margin: 10px 0; }
.receipt .row { display: flex; justify-content: space-between; gap: 10px; }
.receipt .tot { font-weight: 700; font-size: 14px; }
.receipt .bars { height: 34px; margin: 12px auto 4px; width: 80%; background: repeating-linear-gradient(90deg, #0B1220 0 2px, transparent 2px 4px, #0B1220 4px 5px, transparent 5px 8px, #0B1220 8px 11px, transparent 11px 12px); }

/* ─── Motion off (visitor toggle) mirrors prefers-reduced-motion ─── */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) { .receipt { clip-path: none; transform: none; } }

/* nav fit: toggles collapse to icons, labels never wrap */
.nav__link, .nav-cart, .nav-quote, .exp-toggle { white-space: nowrap; }
@media (max-width: 1360px) { .nav-cart .label { display: none; } }

/* scattered kinetic letters must never create sideways scroll */
.statement { overflow-x: clip; }

/* pinned horizontal galleries: cards that are off-screen must not widen the page */
[data-scroll="s3"].is-pinned .hscroll { overflow-x: clip; overflow-y: visible; }