/* Base styles and custom textures */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

:root {
  --accent-red: #e52424;
  --accent-blue: #3454f0;
  --accent-yellow: #ffd700;
  --support-mint: #d9f2ea;
}

html { scroll-behavior: smooth; }

body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }

.handwritten { font-family: "Caveat", "Space Grotesk", Inter, sans-serif; letter-spacing: -0.01em; }

.badge { border: 1px solid #0c0a09; background: #fff; padding: 0.25rem 0.5rem; box-shadow: 3px 3px 0 #0c0a09; }

/* Rough hand-drawn border utility using drop-shadow + jitter */
.rough-border { border: 1px solid #0c0a09; box-shadow: 6px 6px 0 #0c0a09; transform: rotate(-0.2deg); }

/* Texture layers */
.texture-paper { background-image: url('/assets/img/textures/paper.webp'); background-size: cover; background-position: center; }
.texture-brush { background-image: url('/assets/img/textures/brush.webp'); background-size: cover; background-position: top; opacity: 0.15; }

/* Fallbacks if textures missing */
.texture-paper:empty, .texture-brush:empty { background-image: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.03), transparent 60%); }

/* Noise overlay (tiny CSS noise) */
.noise-layer { background-image: url('/assets/img/textures/noise.png'); opacity: 0.08; }

/* Hero animation cue */
.hero-headline { text-transform: uppercase; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Utility for scribble reveal */
.scribble { position: relative; }
.scribble::after { content: attr(data-note); position: absolute; left: 0; top: 100%; font-size: 0.8rem; transform: translateY(0.25rem) rotate(-1deg); background: #fff; border: 1px solid #0c0a09; padding: 0.15rem 0.35rem; box-shadow: 2px 2px 0 #0c0a09; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.scribble:hover::after { opacity: 1; }

/* Crown cursor hint (brief on scroll) */
body.crown-cursor { cursor: url('/assets/svg/icons/crown-cursor.svg') 8 8, auto; }

/* Cross-out + rewrite */
.xout { position: relative; display: inline-block; }
.xout::after { content: ''; position: absolute; left: -2%; right: -2%; top: 55%; height: 2px; background: #0c0a09; transform: rotate(-6deg); }
.rewrite { position: relative; display: inline-block; background: var(--accent-yellow); color: #0c0a09; padding: 0 0.15rem; transform: rotate(-1deg); }

/* Tape corners */
.tape { position: absolute; width: 42px; height: 22px; opacity: 0.9; }
.tape.tl { left: -10px; top: -12px; transform: rotate(-8deg); }
.tape.tr { right: -12px; top: -10px; transform: rotate(6deg) scaleX(-1); }

/* Rhythm grid (peeks on scroll) */
.rhythm-grid { pointer-events: none; background-image: linear-gradient(rgba(12,10,9,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,10,9,0.05) 1px, transparent 1px); background-size: 24px 24px; opacity: 0; transition: opacity .25s ease; }
.rhythm-grid.show { opacity: .18; }

/* Flicker-in */
.flicker { opacity: 0; transform: translateY(6px) rotate(-0.4deg); }
.flicker.on { opacity: 1; transform: none; transition: opacity 120ms ease, transform 140ms ease; }

/* Symbol scatter */
.scatter { position: absolute; font-size: 12px; opacity: .35; mix-blend-mode: multiply; }
.scatter.blue { color: var(--accent-blue); }
.scatter.red { color: var(--accent-red); }
.scatter.yellow { color: var(--accent-yellow); }

/* Brush shards container */
.shards { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shard { position: absolute; width: 160px; height: 80px; opacity: .22; }

/* Paint swatch underline */
.swatch { background: linear-gradient( to top, currentColor 0 38%, transparent 38% ); display: inline; padding: 0 .15rem; }
.swatch.red { color: var(--accent-red); }
.swatch.blue { color: var(--accent-blue); }
.swatch.yellow { color: var(--accent-yellow); }

/* Numbered callout */
.callout { position: relative; }
.callout .callout-num { position: absolute; left: -18px; top: -12px; font-size: 12px; background: #fff; border: 1px solid #0c0a09; border-radius: 9999px; width: 22px; height: 22px; display: grid; place-items: center; box-shadow: 2px 2px 0 #0c0a09; }

/* Crown grid background */
.crown-grid { position: fixed; inset: -20vh -10vw; z-index: -30; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Cpath d='M10 40l2-14 9 7 7-10 12 17H10z' fill='none' stroke='%230c0a09' stroke-width='1'/%3E%3C/svg%3E"); background-size: 80px 60px; }

/* Torn edge effect using mask */
.torn { -webkit-mask-image: radial-gradient(circle at 0 0, transparent 12px, black 13px), radial-gradient(circle at 100% 0, transparent 12px, black 13px), radial-gradient(circle at 0 100%, transparent 12px, black 13px), radial-gradient(circle at 100% 100%, transparent 12px, black 13px); -webkit-mask-composite: source-over; mask-composite: add; }