/* =========================================================
   TEMPER | Ink layer
   Marker and brush highlights, pen strike and circle, spray paint,
   pen checkmarks, price stamp, torn paper edges.
   Everything here is gated on html.ink-ready (set by js/ink.js),
   so the base.css fallbacks stay intact if the script never runs.
   ========================================================= */

/* ---------- 1. Highlights ---------- */
.ink-ready .hl {
  background: none;
  background-image: var(--ink-hl);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0% 100%;
  transition: background-size .8s cubic-bezier(.6, .04, .3, 1);
}
.ink-ready .hl.is-inked { background-size: 100% 100%; }

/* Highlighter on paper: translucent, soaks into the fibers */
.ink-ready .hl-marker {
  padding: .05em .16em;
  margin: 0 -.04em;
  mix-blend-mode: multiply;
  background-position: 0 58%;
}
.ink-ready .hl-marker.is-inked { background-size: 100% 92%; }

/* Dry brush behind Anton on black. Text flips to ink as the brush passes. */
.ink-ready .hl-brush {
  padding: 0 .2em;
  margin: 0 -.08em;
  color: var(--bone);
  /* JS fits the band to the line box (--hl-y, --hl-h) so it never climbs into the line above */
  background-position: 0 var(--hl-y, 22%);
  background-size: 0% var(--hl-h, 62%);
  transition: background-size .9s cubic-bezier(.62, .02, .28, 1), color .34s linear .34s;
}
.ink-ready .hl-brush.is-inked { background-size: 100% var(--hl-h, 62%); color: var(--ink); }

/* ---------- 4. Spray paint on concrete ---------- */
.wall { isolation: isolate; }
.wall > * { position: relative; z-index: 2; }

/* Cracks, stains, form-tie holes and rain streaks cast into the concrete */
.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'><defs><filter id='s' x='-50%' y='-50%' width='200%' height='200%'><feGaussianBlur stdDeviation='38'/></filter><filter id='r' x='-50%' y='-10%' width='200%' height='120%'><feGaussianBlur stdDeviation='6 20'/></filter><radialGradient id='h'><stop offset='0' stop-color='%23262622' stop-opacity='.55'/><stop offset='.6' stop-color='%23434440' stop-opacity='.3'/><stop offset='1' stop-color='%23434440' stop-opacity='0'/></radialGradient></defs><g filter='url(%23s)' fill='%23504c43'><ellipse cx='180' cy='620' rx='190' ry='120' opacity='.16'/><ellipse cx='1030' cy='210' rx='160' ry='110' opacity='.12'/><ellipse cx='760' cy='700' rx='240' ry='80' opacity='.1'/></g><g filter='url(%23r)' fill='%234a4a44'><rect x='300' y='40' width='26' height='330' opacity='.06'/><rect x='338' y='40' width='12' height='210' opacity='.05'/><rect x='905' y='40' width='20' height='260' opacity='.05'/></g><g fill='url(%23h)'><circle cx='120' cy='150' r='14'/><circle cx='1080' cy='150' r='14'/><circle cx='120' cy='660' r='14'/><circle cx='1080' cy='660' r='14'/></g><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M-10 470 L60 455 L96 468 L150 447 L205 452 L232 430 L288 424' stroke='%23e9e9e5' stroke-opacity='.35' stroke-width='1.4' transform='translate(0 1.4)'/><path d='M-10 470 L60 455 L96 468 L150 447 L205 452 L232 430 L288 424 M150 447 L168 478 L162 505 M232 430 L240 404' stroke='%234b4c47' stroke-opacity='.55' stroke-width='1.1'/><path d='M1210 560 L1150 566 L1118 548 L1066 560 L1030 584 L990 588 M1118 548 L1110 520 L1124 498' stroke='%234b4c47' stroke-opacity='.45' stroke-width='1'/><path d='M640 812 L648 780 L636 752 L652 726' stroke='%234b4c47' stroke-opacity='.4' stroke-width='.9'/></g></svg>");
  background-size: cover;
  background-position: center;
}

/* Daylight drifting slowly across the wall */
.wall::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(34% 30% at 50% 46%, rgb(255 247 228 / .38), transparent 72%);
  mix-blend-mode: soft-light;
  animation: ink-wall-light 26s ease-in-out infinite alternate;
}
@keyframes ink-wall-light {
  from { transform: translate(-10%, -4%); }
  to   { transform: translate(10%, 5%); }
}

.ink-ready .spray {
  position: relative;
  /* The fuzzy edge a can leaves: a tight halo plus a wide faint cloud */
  text-shadow:
    0 0 1px rgb(18 18 18 / .7),
    0 0 .035em rgb(18 18 18 / .5),
    0 0 .1em rgb(18 18 18 / .24),
    0 .02em .3em rgb(18 18 18 / .12);
}
.spray-ch {
  display: inline-block;
  opacity: 0;
}
/* Letters mist in and sharpen; nothing here draws a box, the halo is the parent text-shadow */
.spray.is-sprayed .spray-ch {
  animation: ink-spray-ch .6s cubic-bezier(.3, .6, .35, 1) var(--t, 0ms) forwards;
}
@keyframes ink-spray-ch {
  0%   { opacity: 0; filter: blur(.1em); }
  35%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); }
}

/* One overspray layer behind the whole phrase, padded on every side (JS sizes it).
   A wide soft mask sweeps it in left to right with the letters. */
.spray-mist {
  position: absolute;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 38%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 38%, transparent 62%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.spray.is-sprayed .spray-mist {
  animation: ink-spray-mist var(--mist-dur, 1.6s) cubic-bezier(.4, .2, .5, 1) 60ms forwards;
}
@keyframes ink-spray-mist {
  0%   { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* Paint that pooled and ran */
.spray-drip {
  position: absolute;
  width: var(--drip-w, 3px);
  height: 0;
  margin-left: calc(var(--drip-w, 3px) / -2);
  border-radius: 0 0 99px 99px;
  background: linear-gradient(#121212, #121212 80%, rgb(18 18 18 / .85));
  box-shadow: 0 0 2px rgb(18 18 18 / .45);
  pointer-events: none;
}
.spray-drip::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: calc(var(--drip-w, 3px) * 1.7);
  height: calc(var(--drip-w, 3px) * 2);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #121212;
  transform: translateX(-50%);
}
.spray.is-sprayed .spray-drip {
  animation: ink-drip var(--drip-dur, 6s) cubic-bezier(.15, .55, .25, 1) var(--t, 0ms) forwards;
}
@keyframes ink-drip {
  from { height: 0; }
  to   { height: var(--drip-len, 30px); }
}

/* ---------- 5. Sample day: pen ticks and red strike ---------- */
#sample-habits .ink-row { position: relative; }
#sample-habits input.ink-check:checked::after { content: none; }
#sample-habits input.ink-check:checked + label { text-decoration: none; }

.ink-tick {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 34px;
  height: 34px;
  margin-top: -18px;
  overflow: visible;
  pointer-events: none;
}
.ink-tick path {
  fill: none;
  stroke: var(--paper-ink);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .24s cubic-bezier(.5, 0, .75, .4);
}
#sample-habits input:checked ~ .ink-tick path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .4s cubic-bezier(.55, 0, .3, 1);
}

.ink-strike {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M1.5 7.2 C 22 5.6, 44 7.8, 70 6.4 S 118 5.2, 146 6.3 S 186 5.6, 198.5 4.4' fill='none' stroke='%23c42f2a' stroke-opacity='.92' stroke-width='3.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% .6em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .26s cubic-bezier(.5, 0, .75, .4), color .3s;
}
#sample-habits input:checked + label .ink-strike {
  background-size: 100% .6em;
  color: var(--paper-muted);
  transition: background-size .5s cubic-bezier(.55, 0, .3, 1) .2s, color .4s .35s;
}

/* ---------- 6. Price stamp ---------- */
.ink-ready .offer-price.ink-stamp { opacity: 0; }
.ink-ready .offer-price.ink-stamp.is-stamped {
  animation: ink-stamp .66s linear forwards;
}
@keyframes ink-stamp {
  0%   { opacity: 0; transform: scale(1.16) rotate(-3.5deg); filter: blur(2px); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  42%  { opacity: 1; transform: scale(.972) rotate(.5deg); filter: blur(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  68%  { transform: scale(1.01) rotate(-1deg); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1) rotate(-.5deg); }
}

/* ---------- Torn paper edges ---------- */
/* Paper sections are masked into sheets, so the black page shows through the tear */
.paper {
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='14' viewBox='0 0 600 14'><path d='M0 14L0 6.0L4 5.1L9 5.2L15 5.2L18 3.4L23 5.2L27 3.4L29 3.5L33 2.7L38 3.6L41 4.4L45 5.3L48 3.3L55 4.0L61 4.4L64 4.8L68 4.4L70 5.8L76 3.8L81 4.4L86 5.6L92 5.3L97 5.9L99 6.2L103 5.0L108 5.8L110 4.3L116 4.8L119 5.2L122 6.6L129 4.4L133 4.6L138 4.0L144 4.9L150 4.2L154 5.8L158 4.5L165 4.6L167 6.1L171 7.8L175 8.1L180 7.7L184 4.9L187 7.6L191 4.0L195 6.5L199 8.7L205 8.7L210 9.2L215 9.1L221 8.1L227 9.4L233 8.9L236 8.9L240 4.9L244 6.8L248 7.1L253 6.8L257 7.1L263 8.0L269 7.3L273 9.0L277 4.8L280 9.2L284 9.3L287 7.4L293 8.6L299 10.2L305 8.2L309 7.8L314 8.3L318 9.9L321 5.4L326 10.1L329 6.0L333 7.0L337 7.8L341 7.0L343 7.0L346 7.1L351 7.7L355 5.4L359 8.0L363 5.6L370 6.9L375 6.2L381 6.7L386 6.2L388 6.7L393 6.5L395 4.3L400 3.8L404 4.9L408 5.6L411 4.0L414 4.4L418 5.4L424 5.0L426 5.2L432 6.2L439 6.5L442 6.4L447 6.1L450 8.7L454 8.5L459 8.7L466 7.0L469 7.3L473 8.1L475 8.3L479 8.8L482 8.8L486 6.4L492 8.8L495 8.7L500 8.2L505 8.3L508 9.7L513 7.2L519 9.8L522 8.7L528 9.3L533 8.9L536 8.8L542 7.0L544 7.6L548 7.6L553 5.4L558 2.5L562 6.0L565 6.4L570 4.7L574 3.3L580 4.7L586 5.5L591 5.3L595 5.9L599 5.9L600 6L600 14Z'/></svg>"),
    linear-gradient(#000, #000),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='14' viewBox='0 0 600 14'><path transform='matrix(1 0 0 -1 0 14)' d='M0 14L0 6.0L4 5.1L9 5.2L15 5.2L18 3.4L23 5.2L27 3.4L29 3.5L33 2.7L38 3.6L41 4.4L45 5.3L48 3.3L55 4.0L61 4.4L64 4.8L68 4.4L70 5.8L76 3.8L81 4.4L86 5.6L92 5.3L97 5.9L99 6.2L103 5.0L108 5.8L110 4.3L116 4.8L119 5.2L122 6.6L129 4.4L133 4.6L138 4.0L144 4.9L150 4.2L154 5.8L158 4.5L165 4.6L167 6.1L171 7.8L175 8.1L180 7.7L184 4.9L187 7.6L191 4.0L195 6.5L199 8.7L205 8.7L210 9.2L215 9.1L221 8.1L227 9.4L233 8.9L236 8.9L240 4.9L244 6.8L248 7.1L253 6.8L257 7.1L263 8.0L269 7.3L273 9.0L277 4.8L280 9.2L284 9.3L287 7.4L293 8.6L299 10.2L305 8.2L309 7.8L314 8.3L318 9.9L321 5.4L326 10.1L329 6.0L333 7.0L337 7.8L341 7.0L343 7.0L346 7.1L351 7.7L355 5.4L359 8.0L363 5.6L370 6.9L375 6.2L381 6.7L386 6.2L388 6.7L393 6.5L395 4.3L400 3.8L404 4.9L408 5.6L411 4.0L414 4.4L418 5.4L424 5.0L426 5.2L432 6.2L439 6.5L442 6.4L447 6.1L450 8.7L454 8.5L459 8.7L466 7.0L469 7.3L473 8.1L475 8.3L479 8.8L482 8.8L486 6.4L492 8.8L495 8.7L500 8.2L505 8.3L508 9.7L513 7.2L519 9.8L522 8.7L528 9.3L533 8.9L536 8.8L542 7.0L544 7.6L548 7.6L553 5.4L558 2.5L562 6.0L565 6.4L570 4.7L574 3.3L580 4.7L586 5.5L591 5.3L595 5.9L599 5.9L600 6L600 14Z'/></svg>");
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='14' viewBox='0 0 600 14'><path d='M0 14L0 6.0L4 5.1L9 5.2L15 5.2L18 3.4L23 5.2L27 3.4L29 3.5L33 2.7L38 3.6L41 4.4L45 5.3L48 3.3L55 4.0L61 4.4L64 4.8L68 4.4L70 5.8L76 3.8L81 4.4L86 5.6L92 5.3L97 5.9L99 6.2L103 5.0L108 5.8L110 4.3L116 4.8L119 5.2L122 6.6L129 4.4L133 4.6L138 4.0L144 4.9L150 4.2L154 5.8L158 4.5L165 4.6L167 6.1L171 7.8L175 8.1L180 7.7L184 4.9L187 7.6L191 4.0L195 6.5L199 8.7L205 8.7L210 9.2L215 9.1L221 8.1L227 9.4L233 8.9L236 8.9L240 4.9L244 6.8L248 7.1L253 6.8L257 7.1L263 8.0L269 7.3L273 9.0L277 4.8L280 9.2L284 9.3L287 7.4L293 8.6L299 10.2L305 8.2L309 7.8L314 8.3L318 9.9L321 5.4L326 10.1L329 6.0L333 7.0L337 7.8L341 7.0L343 7.0L346 7.1L351 7.7L355 5.4L359 8.0L363 5.6L370 6.9L375 6.2L381 6.7L386 6.2L388 6.7L393 6.5L395 4.3L400 3.8L404 4.9L408 5.6L411 4.0L414 4.4L418 5.4L424 5.0L426 5.2L432 6.2L439 6.5L442 6.4L447 6.1L450 8.7L454 8.5L459 8.7L466 7.0L469 7.3L473 8.1L475 8.3L479 8.8L482 8.8L486 6.4L492 8.8L495 8.7L500 8.2L505 8.3L508 9.7L513 7.2L519 9.8L522 8.7L528 9.3L533 8.9L536 8.8L542 7.0L544 7.6L548 7.6L553 5.4L558 2.5L562 6.0L565 6.4L570 4.7L574 3.3L580 4.7L586 5.5L591 5.3L595 5.9L599 5.9L600 6L600 14Z'/></svg>"),
    linear-gradient(#000, #000),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='14' viewBox='0 0 600 14'><path transform='matrix(1 0 0 -1 0 14)' d='M0 14L0 6.0L4 5.1L9 5.2L15 5.2L18 3.4L23 5.2L27 3.4L29 3.5L33 2.7L38 3.6L41 4.4L45 5.3L48 3.3L55 4.0L61 4.4L64 4.8L68 4.4L70 5.8L76 3.8L81 4.4L86 5.6L92 5.3L97 5.9L99 6.2L103 5.0L108 5.8L110 4.3L116 4.8L119 5.2L122 6.6L129 4.4L133 4.6L138 4.0L144 4.9L150 4.2L154 5.8L158 4.5L165 4.6L167 6.1L171 7.8L175 8.1L180 7.7L184 4.9L187 7.6L191 4.0L195 6.5L199 8.7L205 8.7L210 9.2L215 9.1L221 8.1L227 9.4L233 8.9L236 8.9L240 4.9L244 6.8L248 7.1L253 6.8L257 7.1L263 8.0L269 7.3L273 9.0L277 4.8L280 9.2L284 9.3L287 7.4L293 8.6L299 10.2L305 8.2L309 7.8L314 8.3L318 9.9L321 5.4L326 10.1L329 6.0L333 7.0L337 7.8L341 7.0L343 7.0L346 7.1L351 7.7L355 5.4L359 8.0L363 5.6L370 6.9L375 6.2L381 6.7L386 6.2L388 6.7L393 6.5L395 4.3L400 3.8L404 4.9L408 5.6L411 4.0L414 4.4L418 5.4L424 5.0L426 5.2L432 6.2L439 6.5L442 6.4L447 6.1L450 8.7L454 8.5L459 8.7L466 7.0L469 7.3L473 8.1L475 8.3L479 8.8L482 8.8L486 6.4L492 8.8L495 8.7L500 8.2L505 8.3L508 9.7L513 7.2L519 9.8L522 8.7L528 9.3L533 8.9L536 8.8L542 7.0L544 7.6L548 7.6L553 5.4L558 2.5L562 6.0L565 6.4L570 4.7L574 3.3L580 4.7L586 5.5L591 5.3L595 5.9L599 5.9L600 6L600 14Z'/></svg>");
  -webkit-mask-size: 600px 14px, 100% calc(100% - 26px), 600px 14px;
  mask-size: 600px 14px, 100% calc(100% - 26px), 600px 14px;
  -webkit-mask-position: 0 0, 0 50%, 230px 100%;
  mask-position: 0 0, 0 50%, 230px 100%;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
  mask-repeat: repeat-x, no-repeat, repeat-x;
}

/* ---------- Reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .wall::after { animation: none; }
}
.ink-still .hl,
.ink-still .ink-line,
.ink-still .ink-tick path,
.ink-still .ink-strike { transition: none !important; }
.ink-still .spray-ch { opacity: 1; filter: none; animation: none !important; }
.ink-still .spray-mist { opacity: 1; -webkit-mask-image: none; mask-image: none; animation: none !important; }
.ink-still .spray-drip { height: var(--drip-len, 30px); animation: none !important; }
.ink-still .offer-price.ink-stamp { opacity: 1; transform: rotate(-.5deg); animation: none !important; }
.ink-still .wall::after { animation: none; }