/*
 * Cyber Crayon v3 — Base & Brutalist utilities
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-text-body-md);
  line-height: 1.6;
  color: var(--lc-on-surface);
  background-color: var(--lc-background);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(204, 255, 0, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(234, 86, 148, 0.05) 0%, transparent 20%);
  overflow-x: hidden;
  cursor: var(--lc-cursor-default);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--lc-bg-texture);
  background-repeat: repeat;
  opacity: var(--lc-bg-texture-opacity);
}

html[data-lc-color-scheme="dark"] body::before {
  filter: invert(1) brightness(0.85);
}

:where(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea
) {
  cursor: var(--lc-cursor-text);
}

html[data-lc-color-scheme="dark"] .lc-hero__badge {
  background: var(--lc-surface-container-highest);
  color: var(--lc-cyber-lime);
}

html[data-lc-color-scheme="dark"] .lc-bento-card--featured {
  background: #0D0D0D;
}

html[data-lc-color-scheme="dark"] .lc-article-card__cover,
html[data-lc-color-scheme="dark"] .lc-project-card__media {
  background: #0D0D0D;
}

html[data-lc-color-scheme="dark"] .lc-search-inline__kbd {
  background: var(--lc-surface-container-highest);
  color: var(--lc-on-surface);
  border: 1px solid var(--lc-brutal-border-color);
}

html[data-lc-color-scheme="dark"] .lc-toc__title,
html[data-lc-color-scheme="dark"] .lc-toc__link,
html[data-lc-color-scheme="dark"] .lc-toc__icon {
  color: var(--lc-chip-on-neon);
}

html[data-lc-color-scheme="dark"] .lc-toc__title {
  border-bottom-color: var(--lc-brutal-border-color);
}

html[data-lc-color-scheme="dark"] .lc-toc__sublist {
  border-left-color: var(--lc-brutal-border-color);
}

html[data-lc-color-scheme="dark"] .lc-badge__label {
  border-right-color: var(--lc-outline-variant);
}

html[data-lc-color-scheme="dark"] .lc-badge {
  border-color: var(--lc-outline-variant);
  box-shadow: 3px 3px 0 var(--lc-neon-pink);
}

html[data-lc-color-scheme="dark"] .lc-page-header__badge,
html[data-lc-color-scheme="dark"] .lc-article__category {
  color: var(--lc-chip-on-neon);
}

html[data-lc-color-scheme="dark"] body {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(204, 255, 0, 0.04) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(234, 86, 148, 0.04) 0%, transparent 20%);
}


img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--lc-primary);
  text-decoration: none;
  transition: color var(--lc-transition);
}

a:hover {
  color: var(--lc-electric-purple);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lc-font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lc-on-surface);
  margin: 0 0 0.5em;
}

.lc-display-lg {
  font-family: var(--lc-font-display);
  font-size: var(--lc-text-display-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.lc-headline-lg {
  font-family: var(--lc-font-display);
  font-size: var(--lc-text-headline-lg);
  font-weight: 700;
  line-height: 1.2;
}

.lc-headline-md {
  font-family: var(--lc-font-display);
  font-size: var(--lc-text-headline-md);
  font-weight: 700;
  line-height: 1.3;
}

.lc-body-lg {
  font-size: var(--lc-text-body-lg);
  line-height: 1.6;
}

.lc-body-md {
  font-size: var(--lc-text-body-md);
  line-height: 1.6;
}

.lc-label-md {
  font-family: var(--lc-font-body);
  font-size: var(--lc-text-label-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lc-muted {
  color: var(--lc-on-surface-variant);
}

.lc-container {
  width: 100%;
  max-width: var(--lc-max);
  margin-inline: auto;
  padding-inline: var(--lc-gutter);
}

.lc-skip-link {
  position: absolute;
  top: -100%;
  left: var(--lc-gutter);
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--lc-cyber-lime);
  color: var(--lc-ink-black);
  font-weight: 700;
  border: var(--lc-border-brutal);
}

.lc-skip-link:focus {
  top: 0.5rem;
}

/* Brutalist utilities */
.lc-sketch-border {
  border: var(--lc-border-brutal);
  position: relative;
}

.lc-sketch-border::before {
  content: "";
  position: absolute;
  inset: 2px -6px -6px 2px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  z-index: -1;
  pointer-events: none;
}

.lc-hard-shadow {
  box-shadow: var(--lc-hard-shadow);
}

.lc-hard-shadow--sm {
  box-shadow: var(--lc-hard-shadow-sm);
}

.lc-hard-shadow--hover {
  transition: transform var(--lc-transition), box-shadow var(--lc-transition);
}

.lc-hard-shadow--hover:hover {
  box-shadow: var(--lc-hard-shadow-hover);
  transform: translate(4px, 4px);
}

.lc-card-brutal {
  background: var(--lc-surface-container-lowest);
  border: var(--lc-border-brutal);
  box-shadow: var(--lc-hard-shadow);
}

.lc-paint-drip__strip {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 25px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.lc-paint-drip__track {
  width: 200%;
  height: 100%;
  background: var(--lc-ink-black);
  clip-path: polygon(
    0 0, 2.5% 80%, 5% 0, 7.5% 100%, 10% 0, 12.5% 60%, 15% 0, 17.5% 90%, 20% 0, 22.5% 70%, 25% 0, 27.5% 100%, 30% 0, 32.5% 85%, 35% 0, 37.5% 65%, 40% 0, 42.5% 95%, 45% 0, 47.5% 75%, 50% 0,
    52.5% 80%, 55% 0, 57.5% 100%, 60% 0, 62.5% 60%, 65% 0, 67.5% 90%, 70% 0, 72.5% 70%, 75% 0, 77.5% 100%, 80% 0, 82.5% 85%, 85% 0, 87.5% 65%, 90% 0, 92.5% 95%, 95% 0, 97.5% 75%, 100% 0,
    100% 100%, 0 100%
  );
  animation: lc-paint-drip-wave 10s linear infinite;
  will-change: transform;
}

@keyframes lc-paint-drip-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.lc-splatter-bg::after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.lc-splatter-bg--lime::after {
  background: rgba(204, 255, 0, 0.15);
  top: 10rem;
  left: -5rem;
}

.lc-splatter-bg--pink::after {
  background: rgba(234, 86, 148, 0.15);
  top: 20rem;
  right: -5rem;
}

.lc-material-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 1;
}

.lc-section-divider {
  height: 0;
  margin: 0;
  border: none;
}

.lc-default-content {
  position: relative;
  z-index: 1;
  min-height: 50vh;
}

/* Graffiti background watermarks (Stitch) */
.lc-graffiti-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.lc-graffiti-tag {
  position: absolute;
  font-family: var(--lc-font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lc-ink-black);
  opacity: 0.035;
}

html[data-lc-color-scheme="dark"] .lc-graffiti-tag {
  color: var(--lc-on-surface);
  opacity: 0.025;
}

.lc-graffiti-tag--1 {
  top: clamp(4rem, 12vh, 8rem);
  left: -0.75rem;
  font-size: clamp(4rem, 12vw, 7.5rem);
  transform: rotate(12deg);
}

.lc-graffiti-tag--2 {
  top: 38%;
  right: -1.25rem;
  font-size: clamp(5rem, 14vw, 9rem);
  transform: rotate(-12deg);
}

.lc-graffiti-tag--3 {
  bottom: clamp(5rem, 14vh, 10rem);
  left: 18%;
  font-size: clamp(3.5rem, 10vw, 6.25rem);
  transform: rotate(45deg);
}

/* Click paint splatter */
.lc-click-splatter {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0.48;
  transform: scale(0);
  transition: transform 0.85s ease-out, opacity 0.85s ease-out;
  will-change: transform, opacity;
}

.lc-click-splatter.is-active {
  transform: scale(2.6);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lc-graffiti-tag {
    opacity: 0.02;
  }

  .lc-click-splatter {
    display: none !important;
  }
}

body.lc-menu-open {
  overflow: hidden;
}