/* ==========================================================================
   BREACH CULTURE — DOODLE & HANDWRITTEN LAYER
   Artistic layer inspired by Camila R. Perez, Keith Haring, and zine culture.
   Injects raw, hand-drawn energy into the editorial design.
   ========================================================================== */

:root {
  --font-handwritten: 'Permanent Marker', cursive;
}


/* ==========================================================================
   PULL QUOTES — HANDWRITTEN
   Replaces the standard left-border blockquote with a hand-drawn,
   marker-style presentation. Big quote marks, handwritten font,
   slight rotation for that "someone drew this" feel.
   ========================================================================== */

.article-body .pull-quote-drawn {
  border-left: none;
  padding: var(--space-xl) 0 var(--space-lg);
  padding-left: var(--space-2xl);
  margin: var(--space-2xl) 0;
  position: relative;
  font-style: normal;
  max-width: none;
}

/* Hand-drawn quotation marks — bold, thick, imperfect */
.pull-quote-drawn::before {
  content: '';
  position: absolute;
  top: var(--space-md);
  left: -4px;
  width: 48px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 6 C16 7,6 15,8 30 C10 42,18 50,24 46 C19 42,14 33,16 24 C18 16,25 12,29 16' fill='%23E8552E'/%3E%3Cpath d='M52 6 C46 7,36 15,38 30 C40 42,48 50,54 46 C49 42,44 33,46 24 C48 16,55 12,59 16' fill='%23E8552E'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}

.pull-quote-drawn.ink-revealed::before {
  opacity: 0.5;
}

.pull-quote-drawn p {
  font-family: var(--font-handwritten) !important;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem) !important;
  color: var(--color-text) !important;
  line-height: 1.55 !important;
  transform: rotate(-0.3deg);
  font-style: normal !important;
  max-width: none !important;
  margin-bottom: var(--space-sm) !important;
}

.pull-quote-drawn cite {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
  position: relative;
  font-style: normal;
  padding-bottom: 8px;
  opacity: 0;
  transform: translateY(6px);
}

.pull-quote-drawn.ink-revealed cite {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 1.2s, transform 0.5s ease 1.2s;
}

/* Hand-drawn squiggly underline on attribution */
.pull-quote-drawn cite::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 8' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C14 2,28 7,42 4 C56 1,70 7,84 3 C98 0,112 7,126 4 C140 1,154 7,168 3 C182 0,196 6,200 4' stroke='%23E8552E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
}

.pull-quote-drawn.ink-revealed cite::after {
  opacity: 0.5;
  transition: opacity 0.4s ease 1.5s;
}


/* ==========================================================================
   PULL QUOTE — FEATURED BREAKOUT
   The big moment. One per article max. Breaks the flow, demands
   attention. Like someone took a fat marker and wrote the most
   important line right across the page.
   ========================================================================== */

.article-body .pull-quote-break {
  border-left: none;
  padding: var(--space-2xl) var(--space-xl);
  margin: var(--space-2xl) 0;
  position: relative;
  text-align: center;
  font-style: normal;
  max-width: none;
}

/* Top decorative squiggle */
.pull-quote-break::before {
  content: '';
  display: block;
  width: 120px;
  height: 12px;
  margin: 0 auto var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 12' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C14 1,28 11,42 6 C56 1,70 11,84 5 C98 0,112 11,126 6 C140 1,154 11,168 5 C182 0,196 9,200 6' stroke='%23E8552E' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  position: static;
  transition: opacity 0.5s ease 0.1s;
}

.pull-quote-break.ink-revealed::before {
  opacity: 0.4;
}

/* Bottom decorative squiggle */
.pull-quote-break::after {
  content: '';
  display: block;
  width: 120px;
  height: 12px;
  margin: var(--space-xl) auto 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 12' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C14 1,28 11,42 6 C56 1,70 11,84 5 C98 0,112 11,126 6 C140 1,154 11,168 5 C182 0,196 9,200 6' stroke='%23E8552E' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  position: static;
  transition: opacity 0.5s ease 1.8s;
}

.pull-quote-break.ink-revealed::after {
  opacity: 0.4;
}

.pull-quote-break p {
  font-family: var(--font-handwritten) !important;
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem) !important;
  color: var(--color-text) !important;
  line-height: 1.3 !important;
  max-width: 20ch !important;
  margin: 0 auto var(--space-md) !important;
  font-style: normal !important;
  transform: rotate(-0.5deg);
}

.pull-quote-break cite {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-style: normal;
  opacity: 0;
  transform: translateY(6px);
}

.pull-quote-break.ink-revealed cite {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 1.6s, transform 0.5s ease 1.6s;
}


/* ==========================================================================
   DOODLE DIVIDER
   Hand-drawn squiggly line section separator. Organic, imperfect,
   full of personality. Like a marker swipe across the page.
   ========================================================================== */

.doodle-divider {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 20px;
  margin: var(--space-2xl) auto;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 30' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 15 C18 5,38 25,58 14 C78 3,98 26,118 14 C138 2,158 25,178 15 C198 5,218 24,238 14 C258 4,278 26,298 15 C318 4,338 25,358 14 C378 3,395 22,400 15' stroke='%23E8552E' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
}

.doodle-divider--wide {
  max-width: 380px;
}

.doodle-divider--cream {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 30' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 15 C18 5,38 25,58 14 C78 3,98 26,118 14 C138 2,158 25,178 15 C198 5,218 24,238 14 C258 4,278 26,298 15 C318 4,338 25,358 14 C378 3,395 22,400 15' stroke='%23f0ede8' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================================
   MARKER HIGHLIGHT
   A rough, hand-drawn highlight behind text. Like someone swiped a
   highlighter or marker across the words. Imperfect, organic edges.
   ========================================================================== */

.marker-highlight {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M3 20 C14 8,55 4,100 8 C145 12,182 5,197 14 L194 46 C178 54,135 49,92 52 C49 55,16 51,3 42 Z' fill='%23E8552E' opacity='0.28'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0.1em 0.25em;
  margin: 0 -0.1em;
}

.marker-highlight--strong {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M3 20 C14 8,55 4,100 8 C145 12,182 5,197 14 L194 46 C178 54,135 49,92 52 C49 55,16 51,3 42 Z' fill='%23E8552E' opacity='0.38'/%3E%3C/svg%3E");
}


/* ==========================================================================
   HANDWRITTEN ANNOTATION
   Short text that looks like a margin note. Rotated, handwritten
   font, with an arrow or underline. Like someone scribbled a note
   while reading.
   ========================================================================== */

.annotation {
  font-family: var(--font-handwritten);
  color: var(--color-accent);
  display: inline-block;
  transform: rotate(-3deg);
  font-size: var(--text-base);
  position: relative;
  padding: var(--space-xs) var(--space-sm);
}

.annotation--large {
  font-size: var(--text-lg);
  transform: rotate(-4deg);
}

/* Arrow annotation — adds a curved hand-drawn arrow */
.annotation--arrow::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2 C13 8,12 14,15 22 M10 16 L15 23 L20 16' stroke='%23E8552E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}


/* ==========================================================================
   MARGIN DOODLES
   Abstract flowing SVG elements positioned in the margins alongside
   content. Visible on desktop only. Inspired by Camila R. Perez's
   dense, interlocking organic line work.
   ========================================================================== */

.article-body--doodled {
  position: relative;
  overflow: visible;
}

.doodle-margin {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.doodle-margin.revealed {
  opacity: 1;
}

.doodle-margin svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 1100px) {
  .doodle-margin {
    display: none;
  }
}


/* ==========================================================================
   INLINE DOODLE SVG — DRAW ANIMATION
   SVG elements that "draw" themselves when scrolling into view.
   Uses stroke-dasharray/dashoffset for the reveal.
   ========================================================================== */

.doodle-svg {
  display: block;
  pointer-events: none;
}

.doodle-svg path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.5s var(--ease-out);
}

.doodle-svg.revealed path {
  stroke-dashoffset: 0;
}


/* ==========================================================================
   SKETCH BORDER
   Applies an SVG turbulence filter for hand-drawn edge effect.
   Requires the #sketchy filter to be defined in the page HTML.
   ========================================================================== */

.sketch-border {
  filter: url(#sketchy);
}

.sketch-border--heavy {
  filter: url(#sketchy-heavy);
}


/* ==========================================================================
   HANDWRITTEN SECTION LABEL
   A label/tag rendered in the handwritten font with rotation.
   For marking sections with an organic, personal feel.
   ========================================================================== */

.label-handwritten {
  font-family: var(--font-handwritten);
  font-size: var(--text-lg);
  color: var(--color-accent);
  transform: rotate(-2deg);
  display: inline-block;
}


/* ==========================================================================
   DOODLE BORDER BOX
   A container with a hand-drawn border effect.
   Uses an SVG background for the rough border.
   ========================================================================== */

.doodle-box {
  position: relative;
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
}

.doodle-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 200' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect x='4' y='4' width='392' height='192' rx='2' fill='none' stroke='%23E8552E' stroke-width='2' stroke-dasharray='8 4' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: url(#sketchy);
}


/* ==========================================================================
   SCRIBBLE BACKGROUND
   A very faint, repeating abstract pattern of flowing lines.
   Used as a background texture for sections that need that
   raw, artistic energy.
   ========================================================================== */

.scribble-bg {
  position: relative;
}

.scribble-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 20 C70 15,90 35,80 55 C70 75,40 65,35 48 C30 31,50 18,65 25 C80 32,85 55,68 65 C51 75,30 68,28 50 M150 80 C168 75,185 92,178 110 C171 128,148 122,142 108 C136 94,152 78,165 85 C178 92,182 112,168 122 C154 132,135 125,132 108 M220 30 C240 28,258 45,250 65 C242 85,218 80,212 64 C206 48,225 32,240 40 C255 48,256 68,240 78 M80 180 C98 175,115 192,108 210 C101 228,78 222,72 208 C66 194,82 178,95 185 C108 192,112 212,98 222 M200 160 C218 155,235 172,228 190 C221 208,198 202,192 188 C186 174,202 158,215 165 C228 172,232 192,218 202 C204 212,185 205,182 188' stroke='%23f0ede8' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

.scribble-bg > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   CANVA FIGURE DOODLES
   Extracted silhouette figures and sketchy elements from Canva exports.
   White (#fff) on dark background. Positioned absolutely in margins
   or floating alongside content. Fade in on scroll.
   ========================================================================== */

.doodle-figure {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
  transform: translateY(20px);
}

.doodle-figure.revealed {
  opacity: 1;
  transform: translateY(0);
}

.doodle-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1) opacity(0.45);
  transition: filter 0.6s ease;
}

/* Stronger presence for feature figures */
.doodle-figure--accent img {
  filter: brightness(1) opacity(0.55);
}

/* Tinted with brand accent colour */
.doodle-figure--tinted img {
  filter: brightness(1) opacity(0.35) sepia(1) hue-rotate(-15deg) saturate(6);
}

/* Inline figure between sections — centred, not absolute */
.doodle-figure--inline {
  position: relative;
  display: flex;
  justify-content: center;
  margin: var(--space-2xl) auto;
  max-width: 200px;
  transform: translateY(20px) rotate(var(--fig-rot, 0deg));
}

.doodle-figure--inline.revealed {
  transform: translateY(0) rotate(var(--fig-rot, 0deg));
}

.doodle-figure--inline img {
  filter: brightness(1) opacity(0.5);
}

@media (max-width: 1100px) {
  .doodle-figure:not(.doodle-figure--inline) {
    display: none;
  }
}

@media (max-width: 768px) {
  .doodle-figure--inline {
    max-width: 120px;
  }
}


/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .pull-quote-drawn {
    padding-left: var(--space-lg);
  }

  .pull-quote-drawn::before {
    width: 36px;
    height: 28px;
    left: -2px;
    top: var(--space-sm);
  }

  .pull-quote-break {
    padding: var(--space-2xl) var(--space-md);
    margin: var(--space-2xl) 0;
  }

  .doodle-divider {
    max-width: 160px;
  }

  .annotation {
    transform: rotate(-2deg);
    font-size: var(--text-sm);
  }
}


/* ==========================================================================
   SCRAWL REVEAL
   Words drop onto the page one by one, each with its own angle and
   weight — like someone writing fast with a fat marker. Each word
   starts rotated and slightly oversized, then snaps into place with
   a satisfying settle. The stagger creates a wave of energy.
   ========================================================================== */

.scrawl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px) rotate(var(--rot, 0deg)) scale(1.15);
  filter: blur(2px);
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s),
    filter 0.3s ease var(--d, 0s);
}

.ink-revealed .scrawl-word {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
  filter: blur(0px);
}

/* Featured breakout — words land heavier */
.pull-quote-break .scrawl-word {
  transform: translateY(20px) rotate(var(--rot, 0deg)) scale(1.25);
  filter: blur(3px);
}

.pull-quote-break.ink-revealed .scrawl-word {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
  filter: blur(0px);
}