/* Pulse — craft layer. Hand-made details shared by the website and dashboard.
   Load AFTER brand.css. Everything here is opt-in via classes, except the page grain. */
/* Self-hosted handwriting font (SIL OFL). */
@font-face { font-family: 'Caveat'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('/shared/fonts/caveat-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/shared/fonts/caveat-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('/shared/fonts/caveat-latin-wght-normal.woff2') format('woff2-variations'), url('/shared/fonts/caveat-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --font-hand: 'Caveat', 'Segoe Print', cursive;   /* ONLY for short marginalia notes, never UI text */
  --grain-opacity: .055;
  --hand-ink: #ffd27a;        /* warm "highlighter" ink for notes — contrasts the cool UI */
  --paper: #f3ecdf;           /* sticker / note paper */
  --paper-ink: #2a2333;
  --hairline-hi: rgba(255, 255, 255, .07);
  --shadow-craft: 0 1px 0 var(--hairline-hi) inset, 0 0 0 1px var(--line), 0 18px 40px -22px rgba(0,0,0,.8), 0 2px 6px -2px rgba(0,0,0,.5);
}

/* ---------- 1. Film grain + vignette (whole page, non-interactive) ---------- */
body::before {
  content: ''; position: fixed; inset: -50%; z-index: 9998; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  animation: craft-grain 1.2s steps(6) infinite;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(2, 3, 8, .55) 100%);
}
@keyframes craft-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- 2. Typography finish ---------- */
h1, h2, h3, .balance { text-wrap: balance; }
p, li, .pretty { text-wrap: pretty; }
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 1; }
.eyebrow {
  font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .7; }

/* ---------- 3. Hand-drawn marks ---------- */
/* Wobbly marker underline under a word: <span class="hand-underline">live</span> */
.hand-underline { position: relative; white-space: nowrap; }
.hand-underline::after {
  content: ''; position: absolute; left: -4%; right: -4%; bottom: -.12em; height: .32em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-7 83-10 128-9 47 1 98 4 166-3M12 20c55-6 120-7 190-5 30 1 60 2 92 0' fill='none' stroke='%23ffd27a' stroke-width='4' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left; animation: craft-draw-x .9s var(--ease-out) .4s both;
}
/* Rough circle around a word */
.hand-circle { position: relative; display: inline-block; }
.hand-circle::after {
  content: ''; position: absolute; inset: -.28em -.5em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M106 6C55 3 8 14 6 38c-2 25 52 37 104 35 48-2 86-14 84-37C192 13 150 4 96 9' fill='none' stroke='%23ffd27a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@keyframes craft-draw-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Marginalia note: <aside class="hand-note" data-dir="left|right|down|up">this is live ↓</aside>
   Pair with craft.js `arrow()` for a drawn SVG arrow. */
.hand-note {
  font: 700 22px/1.05 var(--font-hand); color: var(--hand-ink); letter-spacing: .01em;
  transform: rotate(var(--tilt, -3deg)); display: inline-flex; align-items: flex-start; gap: 6px;
  text-shadow: 0 1px 0 rgba(0,0,0,.4); pointer-events: none; user-select: none;
}
.hand-note svg.hand-arrow { width: 54px; height: 40px; flex: none; overflow: visible; }
.hand-arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hand-note.is-drawn .hand-arrow path { stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); animation: craft-dash .8s var(--ease-out) forwards; }
@keyframes craft-dash { to { stroke-dashoffset: 0; } }

/* Sketchy stroke filter target (filter defs injected by craft.js) */
.sketchy { filter: url(#craft-rough); }

/* ---------- 4. Paper & stickers ---------- */
.sticker {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 6px; border-radius: 9px;
  background: var(--paper); color: var(--paper-ink); font: 800 12px/1 var(--font-body); letter-spacing: .02em;
  transform: rotate(var(--tilt, -4deg));
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px -6px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.4);
  position: relative;
}
.sticker::after { /* peeled corner */
  content: ''; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 0 0 9px 0;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.18) 50%, #d9cfbd 60%);
}
.tape { /* strip of masking tape, position it absolutely on a card */
  position: absolute; width: 74px; height: 22px; background: rgba(243, 236, 223, .16);
  backdrop-filter: blur(2px); border-left: 1px dashed rgba(255,255,255,.12); border-right: 1px dashed rgba(255,255,255,.12);
  transform: rotate(var(--tilt, -6deg)); pointer-events: none;
}

/* ---------- 5. Crafted panel finish (inner highlight, hairline, depth, cursor spotlight) ---------- */
.crafted { position: relative; box-shadow: var(--shadow-craft); isolation: isolate; }
.crafted:focus-within { z-index: 3; } /* keep open menus/pickers above neighbouring panels */
.crafted::before { /* top light edge */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%);
}
.spotlight { --mx: 50%; --my: -200px; }
.spotlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(124, 92, 255, .10), transparent 60%);
  transition: opacity var(--dur-2); opacity: 0;
}
.spotlight:hover::after { opacity: 1; }
/* HUD corner ticks: add <i class="ticks"></i> inside a positioned panel */
.ticks, .ticks::before, .ticks::after { position: absolute; pointer-events: none; }
.ticks { inset: 8px; }
.ticks::before, .ticks::after { content: ''; width: 9px; height: 9px; border: 1.5px solid var(--line-strong); }
.ticks::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.ticks::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* Tactile press for any button-like element */
.press { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.press:active { transform: translateY(1px) scale(.985); }

/* ---------- 6. ECG section divider: <div class="ecg-rule" role="presentation"></div> ---------- */
.ecg-rule {
  height: 28px; margin: 0 auto; max-width: 1200px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14h540l10-2 8 2h20l8-12 10 24 9-18 6 6h10l6-2 6 2h567' fill='none' stroke='%237c5cff' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- 7. Blip, the mascot (markup from craft.js blip()) ---------- */
.blip { display: inline-block; width: var(--blip-size, 96px); height: auto; overflow: visible; }
.blip .blip-body { animation: blip-bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; transform-box: fill-box; }
.blip .blip-eye { animation: blip-blink 5s infinite; transform-origin: center; transform-box: fill-box; }
.blip .blip-beat { stroke-dasharray: 60; animation: blip-beat 1.6s linear infinite; }
.blip[data-mood="sleepy"] .blip-body { animation-duration: 5s; }
.blip[data-mood="alert"] .blip-body { animation: blip-hop .7s var(--ease-spring) infinite alternate; }
.blip[data-mood="party"] .blip-body { animation: blip-wiggle .5s ease-in-out infinite alternate; }
@keyframes blip-bob { 50% { transform: translateY(-3px) scaleY(1.02); } }
@keyframes blip-hop { to { transform: translateY(-6px) scale(1.03, .97); } }
@keyframes blip-wiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes blip-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes blip-beat { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -60; } }
@media (prefers-reduced-motion: reduce) { .blip * { animation: none !important; } }

/* ---------- 8. Scrollbars & selection ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--violet); }

/* ---------- 9. Confetti pieces (craft.js confetti()) ---------- */
.craft-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.craft-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; will-change: transform; }