/* profiles.red home hero: the receipt printer (hero round 1 pick A, 11/8/2026).
 * A counter receipt printer prints the order for each door in turn: setup, reviews consultation, website.
 * Paper rises out of the slot, so the first line (the logo) is highest and the line being printed sits at the slot.
 * Motion is CSS keyframes only (transform and opacity), one 36 s loop. The base styles are the still frame (the setup
 * receipt fully printed), so reduced motion, a paused page or a frozen animation always shows a complete receipt.
 */

/* the loop length lives on the hero so the door rings (outside the stage) share the printer's clock */
.xhero--receipt { --loop: 36s; }
.xhero--receipt .xhero__in { align-items: start; }
.rc {
  --paper: #FCFBF7;
  --thermal: oklch(22% 0.006 85);
  --paper-w: 22.5rem;
  --printer-w: 28.5rem;
  --top-h: 2.5rem;
  --front-h: 5.5rem;
  /* no fixed height: the setup receipt (in normal flow) plus the printer set it, so nothing sits empty */
  position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 2.75rem; margin: -1rem 0 0;
}

/* ---------- paper: clipped at the slot (the feed's bottom edge), free to move above it ---------- */
.rc__feed {
  position: relative; z-index: 2; width: 100%; display: flex; justify-content: center;
  clip-path: inset(-40rem -40rem 0 -40rem);
}
.rc__paper {
  position: relative; width: var(--paper-w);
  filter: drop-shadow(0 1px 0 oklch(0% 0 0 / 0.06)) drop-shadow(10px 18px 18px oklch(0% 0 0 / 0.13));
  transform-origin: 50% 100%;
}
/* the reviews and website receipts are as long as the setup one: same box, extra paper above the logo */
.rc__p2, .rc__p3 { position: absolute; top: 0; bottom: 0; left: 50%; margin-left: calc(var(--paper-w) / -2); transform: translateY(100%); }   /* still frame: waiting inside the printer */
.rc__p2 .rc__sheet, .rc__p3 .rc__sheet { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.rc__sheet {
  position: relative; padding: 1.6rem 1.35rem 0.4rem; transform: rotate(-0.8deg); transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, oklch(0% 0 0 / 0.045), transparent 9%, transparent 91%, oklch(0% 0 0 / 0.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 11px 7px repeat-x,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - 7px) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 11px 7px repeat-x,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - 7px) no-repeat;
}
.rc__curl {
  position: absolute; inset: 0 0 auto; height: 3.1rem; pointer-events: none;
  background: linear-gradient(oklch(0% 0 0 / 0.13), oklch(0% 0 0 / 0.04) 45%, oklch(100% 0 0 / 0.55) 70%, transparent);
}
.rc__ink { position: relative; color: var(--thermal); font-family: var(--font-data); font-size: 0.855rem; line-height: 1.56; letter-spacing: 0.015em; }
.rc__ink p { margin: 0; }
.rc__logo { display: block; margin: 0 auto 0.55rem; width: 9.4rem; height: auto; opacity: 0.92; }
.rc__c { text-align: center; }
.rc__dim { opacity: 0.62; }
.rc__lbl { margin-top: 0.3rem !important; opacity: 0.62; font-size: 0.75rem; letter-spacing: 0.12em; }
.rc__row { display: flex; justify-content: space-between; gap: 1ch; }
.rc__ink hr { margin: 0.5rem 0; border: 0; border-top: 2px dashed oklch(22% 0.006 85 / 0.5); }
.rc__ink hr.rc__dbl { border-top: 5px double oklch(22% 0.006 85 / 0.75); }
.rc__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.rc__jobs li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); column-gap: 0.45rem; align-items: start; }
.rc__jobs i { position: relative; width: 0.8rem; height: 0.8rem; margin-top: 0.22rem; border: 1.5px solid currentColor; }
.rc__jobs i::after {
  content: ""; position: absolute; left: 0.2rem; top: -0.05rem; width: 0.28rem; height: 0.55rem;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.rc__total { margin-top: 0.1rem !important; font-size: 1.15rem; letter-spacing: 0.02em; }
.rc__red { color: var(--color-red); }
.rc__code {
  height: 2.4rem; margin: 0.65rem auto 0; width: 84%; opacity: 0.85;
  background: repeating-linear-gradient(90deg,
    var(--thermal) 0 2px, transparent 2px 4px, var(--thermal) 4px 5px, transparent 5px 8px,
    var(--thermal) 8px 11px, transparent 11px 12px, var(--thermal) 12px 13px, transparent 13px 16px,
    var(--thermal) 16px 17px, transparent 17px 19px, var(--thermal) 19px 22px, transparent 22px 24px);
}

/* ---------- the printer ---------- */
/* no z-index on the printer itself: its parts stack with the paper, so the paper sits above the back half of the top
   (z 1) and below the lip, tear bar and front (z 4), and reads as rising out of the slot. It sits in flow under the
   paper, pulled up half a top face so the slot lands on the paper's bottom edge. */
.rc__printer { position: relative; width: var(--printer-w); margin-top: calc(var(--top-h) * -0.5); }
.rc__top { position: relative; z-index: 1; height: var(--top-h); background: linear-gradient(oklch(36% 0.004 85), oklch(27% 0.004 85)); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.rc__slot {
  position: absolute; left: 50%; top: 50%; width: calc(var(--paper-w) + 1.4rem); height: 7px; transform: translate(-50%, -50%);
  background: oklch(8% 0 0); border-radius: 4px; box-shadow: inset 0 2px 3px oklch(0% 0 0 / 0.9);
}
.rc__lip {
  position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--top-h) * 0.5); height: calc(var(--top-h) * 0.5);
  background: linear-gradient(oklch(30% 0.004 85), oklch(27% 0.004 85)); clip-path: polygon(2.5% 0, 97.5% 0, 100% 100%, 0 100%);
}
.rc__bar {
  position: absolute; left: 50%; top: 0; width: calc(var(--paper-w) + 2rem); height: 4px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, oklch(82% 0 0) 0 3px, oklch(58% 0 0) 3px 5px);
}
.rc__front {
  position: relative; z-index: 4; height: var(--front-h); display: flex; align-items: center; gap: 0.9rem; padding: 0 1.6rem 0.2rem;
  background: linear-gradient(oklch(21% 0.003 85), oklch(15% 0.002 85)); border-radius: 0 0 0.9rem 0.9rem;
  box-shadow: inset 0 1px 0 oklch(42% 0 0), 0 30px 26px -22px oklch(0% 0 0 / 0.55);
}
.rc__front img { width: 7rem; height: auto; opacity: 0.95; }
.rc__state { position: relative; margin-left: auto; width: 5.6rem; height: 1rem; font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.14em; color: oklch(70% 0.004 85); }
.rc__state span { position: absolute; right: 0; top: 0; }
.rc__led { position: relative; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: oklch(40% 0.12 28); }
.rc__led i {
  position: absolute; inset: 0; border-radius: 50%; background: oklch(66% 0.24 28);
  box-shadow: 0 0 0 3px oklch(59.63% 0.2414 28.04 / 0.2), 0 0 16px 3px oklch(59.63% 0.2414 28.04 / 0.6);
}
/* still frame: idle, so READY shows and the light is off */
.rc__busy, .rc__led i { opacity: 0; }
.rc__floor {
  position: absolute; z-index: 0; left: 50%; bottom: -0.9rem; width: calc(var(--printer-w) + 6rem); height: 2.2rem; margin-left: calc((var(--printer-w) + 6rem) / -2);
  background: radial-gradient(closest-side, oklch(0% 0 0 / 0.16), transparent);
}

/* ---------- the last order, lying on the counter ---------- */
.rc__pile { position: absolute; z-index: 1; left: 0; bottom: 0.3rem; width: 12.5rem; height: 7rem; transform: perspective(900px) rotateX(56deg) rotateZ(-13deg); transform-origin: 50% 100%; }
.rc__done {
  position: absolute; inset: auto 0 0; padding: 0.9rem 0.9rem 1.1rem; background: var(--paper); color: var(--thermal);
  font-family: var(--font-data); font-size: 0.6875rem; line-height: 1.5; box-shadow: 6px 10px 14px oklch(0% 0 0 / 0.12);
}
.rc__done p { margin: 0; }
.rc__done img { display: block; width: 6rem; height: auto; margin: 0 auto 0.35rem; opacity: 0.9; }
.rc__k1, .rc__k2 { opacity: 0; }   /* still frame: the website order is the one lying there */

/* ---------- pause: a real checkbox ---------- */
.rc__pause {
  position: absolute; z-index: 5; right: 0; top: 1.1rem; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-ink-2);
}
.rc__pause input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-ink); cursor: pointer; }
.rc__pause input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* the door whose order is printing gets a ring (base: no ring) */
.xhero--receipt .door { position: relative; }
/* drawn as a shadow, so the ring takes no layout space */
.xhero--receipt .door::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: 0 0 0 4px var(--color-paper), 0 0 0 7px var(--color-red); }
.xhero--receipt .door--reviews::after { box-shadow: 0 0 0 4px var(--color-paper), 0 0 0 7px var(--color-ink); }

/* ---------- the loop (36 s): setup holds, tears; reviews prints, holds, tears; website prints, holds, tears; setup prints ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rc__p1 { animation: rc-p1 var(--loop) linear infinite; }
  .rc__p2 { animation: rc-p2 var(--loop) linear infinite; }
  .rc__p3 { animation: rc-p3 var(--loop) linear infinite; }
  .rc__k1 { animation: rc-k1 var(--loop) linear infinite; }
  .rc__k2 { animation: rc-k2 var(--loop) linear infinite; }
  .rc__k3 { animation: rc-k3 var(--loop) linear infinite; }
  .rc__busy { animation: rc-busy var(--loop) linear infinite; }
  .rc__idle { animation: rc-idle var(--loop) linear infinite; }
  .rc__led i { animation: rc-busy var(--loop) linear infinite; }
  .rc__led i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: oklch(40% 0.12 28); animation: rc-blink 0.5s steps(2, jump-none) infinite; }
  .xhero--receipt .door--self::after { animation: rc-d-self var(--loop) linear infinite; }
  .xhero--receipt .door--reviews::after { animation: rc-d-rev var(--loop) linear infinite; }
  .xhero--receipt .door--hire::after { animation: rc-d-hire var(--loop) linear infinite; }
  .rc:has(.rc__pause input:checked) *, .rc:has(.rc__pause input:checked) *::after,
  .xhero--receipt:has(.rc__pause input:checked) .door::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .rc *, .rc *::before, .rc *::after, .xhero--receipt .door::after { animation: none !important; }
  .rc__pause { display: none; }
}

/* setup: printed at 0 s, tugged and lifted away at 5 to 6 s, prints again 31 to 35 s */
@keyframes rc-p1 {
  0%, 13.889% { transform: none; opacity: 1; animation-timing-function: ease-out; }
  14.583% { transform: translateY(-0.6rem) rotate(-1.5deg); opacity: 1; animation-timing-function: ease-in; }
  16.667% { transform: translate(-40%, -14%) rotate(-9deg); opacity: 0; }
  16.668%, 86.111% { transform: translateY(100%); opacity: 1; animation-timing-function: steps(27, end); }
  97.222%, 100% { transform: none; opacity: 1; }
}
/* reviews consultation: prints 7 to 11 s, holds, tears 17 to 18 s */
@keyframes rc-p2 {
  0%, 19.444% { transform: translateY(100%); opacity: 1; animation-timing-function: steps(27, end); }
  30.556%, 47.222% { transform: none; opacity: 1; animation-timing-function: ease-out; }
  47.917% { transform: translateY(-0.6rem) rotate(-1.5deg); opacity: 1; animation-timing-function: ease-in; }
  50% { transform: translate(-40%, -14%) rotate(-9deg); opacity: 0; }
  50.001%, 100% { transform: translateY(100%); opacity: 1; }
}
/* website: prints 19 to 23 s, holds, tears 29 to 30 s */
@keyframes rc-p3 {
  0%, 52.778% { transform: translateY(100%); opacity: 1; animation-timing-function: steps(27, end); }
  63.889%, 80.556% { transform: none; opacity: 1; animation-timing-function: ease-out; }
  81.25% { transform: translateY(-0.6rem) rotate(-1.5deg); opacity: 1; animation-timing-function: ease-in; }
  83.333% { transform: translate(-40%, -14%) rotate(-9deg); opacity: 0; }
  83.334%, 100% { transform: translateY(100%); opacity: 1; }
}
/* the order on the counter changes as each receipt is torn off */
@keyframes rc-k1 { 0%, 15.5% { opacity: 0; } 16.667%, 48.8% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rc-k2 { 0%, 48.8% { opacity: 0; } 50%, 82.2% { opacity: 1; } 83.333%, 100% { opacity: 0; } }
@keyframes rc-k3 { 0%, 15.5% { opacity: 1; } 16.667%, 82.2% { opacity: 0; } 83.333%, 100% { opacity: 1; } }
/* printing light and label: busy while paper feeds */
@keyframes rc-busy {
  0%, 19.3% { opacity: 0; } 19.444%, 30.556% { opacity: 1; } 30.7%, 52.6% { opacity: 0; }
  52.778%, 63.889% { opacity: 1; } 64%, 86% { opacity: 0; } 86.111%, 97.222% { opacity: 1; } 97.4%, 100% { opacity: 0; }
}
@keyframes rc-idle {
  0%, 19.3% { opacity: 1; } 19.444%, 30.556% { opacity: 0; } 30.7%, 52.6% { opacity: 1; }
  52.778%, 63.889% { opacity: 0; } 64%, 86% { opacity: 1; } 86.111%, 97.222% { opacity: 0; } 97.4%, 100% { opacity: 1; }
}
@keyframes rc-blink { 0% { opacity: 0; } 100% { opacity: 1; } }
/* the door being printed */
@keyframes rc-d-self { 0%, 15.8% { opacity: 1; } 16.667%, 84.722% { opacity: 0; } 85.6%, 100% { opacity: 1; } }
@keyframes rc-d-rev { 0%, 18.056% { opacity: 0; } 18.9%, 49.2% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rc-d-hire { 0%, 51.389% { opacity: 0; } 52.2%, 82.5% { opacity: 1; } 83.333%, 100% { opacity: 0; } }

/* ---------- narrow screens: stage under the copy ---------- */
@media (max-width: 63.99rem) {
  .rc { margin-top: 0; }
}
@media (max-width: 30rem) {
  .rc { --paper-w: 18.25rem; --printer-w: 21.5rem; --front-h: 4.6rem; padding-top: 2.25rem; }
  .rc__sheet { padding-inline: 1rem; }
  .rc__ink { font-size: 0.75rem; }
  .rc__total { font-size: 1.02rem; }
  .rc__pile { display: none; }
  .rc__front { padding-inline: 1.1rem; }
  .rc__front img { width: 5.6rem; }
  .rc__pause { top: 0; }
}