/* x-register.css — the 888, pushed: the dog on the margin, three cut-out digits, the random scrap, the counter.
   every new thing is paper on the sheet. no keylines, no hard shadows, no ui. */

/* ── 2. the 888: three digits cut out of a contact sheet ── */
.dogs888wrap { position: relative; }
.d888 { position: relative; display: flex; justify-content: center; align-items: flex-end; width: min(100%, 1180px); margin: -6px auto 52px; padding: 14px 0 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline-offset: 12px; }
.d8 { display: block; flex: 0 0 auto; width: clamp(88px, 17.5vw, 250px); height: auto; margin: 0 -5px; filter: var(--sh-cut); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.d8:nth-child(1) { transform: translate(0, 4px) rotate(-2.5deg); }
.d8:nth-child(2) { transform: translate(0, -2px) rotate(1.2deg); }
.d8:nth-child(3) { transform: translate(0, 3px) rotate(-1.4deg); }
.d888:hover .d8:nth-child(1) { transform: translate(-30px, -12px) rotate(-7deg); }
.d888:hover .d8:nth-child(2) { transform: translate(0, 14px) rotate(3deg); }
.d888:hover .d8:nth-child(3) { transform: translate(32px, -8px) rotate(8deg); }
.d888.deal .d8 { animation: xr-jump .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes xr-jump { 0% { transform: translate(0, 0) rotate(0deg); } 35% { transform: translate(0, -26px) rotate(-5deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
.xr-dealnote { position: absolute; left: 0; top: 0; z-index: 3; }
.xr-dealnote > .scrap { font-size: 15px; line-height: 1.25; padding: 13px 16px 8px; white-space: nowrap; }
.xr-marks { z-index: 2; }

/* ── 1. the dog that slides out of the margin ─────────── */
.xr-pop { position: absolute; right: -124px; top: 0; width: 240px; z-index: 40; pointer-events: none; }
.xr-inner { position: relative; pointer-events: auto; cursor: pointer; transform: translate(160%, 24px) rotate(18deg); transition: transform .44s cubic-bezier(.2, 1.25, .3, 1); will-change: transform; }
.xr-pop.in .xr-inner { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
.xr-inner::before { content: ""; position: absolute; left: 16px; top: -26px; width: 30px; height: 82px; background: url(art/ui/paperclip.svg) center / contain no-repeat; transform: rotate(-16deg); z-index: 4; }
.xr-cut { width: 220px; height: 220px; filter: var(--sh-cut); }
.xr-cut img { width: 100%; height: 100%; display: block; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.xr-card { position: relative; width: 240px; }
.xr-card .icard { padding-top: 40px; }
.xr-tape { left: 54px; top: -13px; width: 130px; transform: rotate(-5deg); }
.xr-strip { display: block; width: max-content; max-width: 236px; margin: -10px 0 0 12px; z-index: 5; }
.xr-strip > .scrap { font-size: 14px; line-height: 1.3; padding: 6px 12px; }
.xr-strip b { display: block; }
.xr-strip i { display: block; font-size: 13px; }
.xr-star { z-index: 6; }
.row.xr-on .clip { opacity: 0; transition: opacity .2s; }
.row.xr-on { background: rgba(0, 0, 0, .05); }
.rows .row { -webkit-touch-callout: none; }
.xr-ul path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: xr-draw .26s ease-out forwards; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes xr-draw { to { stroke-dashoffset: 0; } }

/* ── 3. the random scrap by the blank ─────────────────── */
.rndscrap { position: absolute; left: 0; top: 0; z-index: 5; cursor: pointer; --rot: 3deg; transition: transform .16s ease-out; }
.rndscrap > .scrap { font-size: 15px; line-height: 1.2; padding: 5px 12px; white-space: nowrap; }
.rndscrap:hover, .rndscrap.on { --rot: -2deg; --s: 1.06; }
.rndscrap.on > .scrap { background: var(--loud); color: var(--sheet); }

/* ── 4. the counter, typed on the top-right of the sheet ─ */
.xr-count { position: absolute; right: 46px; top: 9px; z-index: 2; font-size: 15px; line-height: 20px; letter-spacing: .02em; white-space: nowrap; }
.xr-count b { display: inline-block; }
.xr-count.hit b { animation: xr-hit .14s steps(2) 1; }
@keyframes xr-hit { 50% { transform: translateY(1.5px); } }

/* ── narrower desks: the dog hangs less far off the sheet ── */
@media (max-width: 1420px) { .xr-pop { right: -70px; } }
@media (max-width: 1290px) { .xr-pop { right: -16px; } }

/* ── phones ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .d888 { margin-bottom: 74px; }
  .d8 { width: 27vw; margin: 0 -3px; }
  .d888:hover .d8:nth-child(1), .d888:hover .d8:nth-child(2), .d888:hover .d8:nth-child(3) { transform: none; }
  .xr-dealnote > .scrap { font-size: 12px; padding: 4px 8px; }
  .xr-pop { right: 6px; width: 170px; }
  .xr-inner { transform: translate(140%, 12px) rotate(12deg); }
  .xr-inner::before { left: 10px; top: -18px; width: 22px; height: 60px; }
  .xr-cut { width: 150px; height: 150px; }
  .xr-card { width: 170px; }
  .xr-pop .icard { width: 170px; min-height: 210px; padding: 30px 10px 26px; font-size: 12px; }
  .xr-pop .icard .iname { font-size: 22px; line-height: 28px; margin-bottom: 4px; }
  .xr-pop .icard .ino { font-size: 11px; right: 8px; top: 6px; }
  .xr-pop .icard .islogan { font-size: 11px; }
  .xr-pop .icard .hand.grailword { height: 18px; }
  .xr-tape { left: 34px; top: -12px; width: 96px; height: 26px; }
  .xr-strip { max-width: 168px; margin: -8px 0 0 6px; }
  .xr-strip > .scrap { font-size: 12px; padding: 4px 8px; }
  .xr-strip i { font-size: 11px; }
  .rndscrap { left: auto; right: -4px; --rot: -3deg; }
  .rndscrap > .scrap { font-size: 13px; padding: 4px 10px; }
  .xr-count { right: 20px; top: 5px; font-size: 12px; line-height: 16px; }
}

/* ── no motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .d8, .xr-inner, .rndscrap { transition: none; }
  .d888.deal .d8, .xr-count.hit b, .xr-ul path { animation: none; }
  .xr-ul path { stroke-dashoffset: 0; }
}