/* ==========================================================================
   Theme: Analog Collage, torn paper, tape, stamps, newsprint, red marker.
   Handmade editorial chaos with a real grid underneath. Decorative paper
   images live in assets/ and only load when this theme is active.
   ========================================================================== */

[data-theme="collage"] {
  --bg: #f1e8d7;
  --bg-soft: #e9ddc6;
  --surface: #f8f2e3;
  --ink: #201c17;
  --muted: #5c544a;
  --accent: #c92f23;
  --accent-ink: #f8f2e3;
  --accent-2: #201c17;
  --line: #c4b89e;
  --border-w: 1px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: 3px 4px 0 0 rgba(32, 28, 23, 0.18);
  --shadow-strong: 6px 8px 0 0 rgba(32, 28, 23, 0.22);

  --font-display: "Fraunces", Georgia, serif;
  --h-weight: 700;
  --h-tracking: -0.015em;
  --h-transform: none;
  --kicker-font: "IBM Plex Mono", monospace;
  --btn-radius: 0px;
  --tk-speed: 50;
}

/* Paper grain over everything (tiny inline SVG noise, no download) */
[data-theme="collage"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="collage"] .kicker {
  display: inline-block;
  background: var(--ink); color: var(--bg);
  padding: 0.2rem 0.55rem;
  transform: rotate(-1.2deg);
  letter-spacing: 0.18em;
}
[data-theme="collage"] .hero-title em {
  color: var(--accent);
  font-style: italic;
}
/* red marker circle around the key phrase */
[data-theme="collage"] .hero-title em {
  position: relative; display: inline-block; padding: 0 0.1em;
}
[data-theme="collage"] .hero-title em::after {
  content: "";
  position: absolute; inset: -0.18em -0.3em;
  border: 3px solid var(--accent);
  border-radius: 48% 52% 55% 45% / 60% 45% 55% 40%;
  transform: rotate(-2deg);
  pointer-events: none;
}

[data-theme="collage"] .btn {
  border: 2px solid var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  transform: rotate(-0.6deg);
}
[data-theme="collage"] .btn--primary { background: var(--accent); border-color: var(--ink); color: var(--accent-ink); }
[data-theme="collage"] .btn--primary:hover {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
  transform: rotate(0.6deg) translateY(-2px);
}
[data-theme="collage"] .btn--ghost { background: var(--surface); transform: rotate(0.7deg); }
[data-theme="collage"] .btn--ghost:hover { transform: rotate(-0.5deg) translateY(-2px); }

[data-theme="collage"] .site-header { border-bottom: 2px solid var(--ink); }
[data-theme="collage"] .brand-name i { color: var(--accent); }
[data-theme="collage"] .hp {
  border: 1.5px solid var(--ink);
  background: var(--surface);
  box-shadow: 2px 2px 0 0 rgba(32, 28, 23, 0.2);
  font-family: var(--kicker-font);
  font-size: 0.72rem;
}
[data-theme="collage"] .hp:nth-child(odd) { transform: rotate(-1.1deg); }
[data-theme="collage"] .hp:nth-child(even) { transform: rotate(0.9deg); background: #efdfbe; }

/* Hero: layered paper scraps, tape, a stamp, marker scribbles */
[data-theme="collage"] .ha-1 {
  opacity: 1; width: 58%; height: 44%;
  background: #efdfbe;
  top: -2%; right: -2%;
  transform: rotate(2.4deg);
  box-shadow: var(--shadow);
  clip-path: polygon(0 3%, 7% 0, 26% 2%, 49% 0, 74% 3%, 98% 1%, 100% 22%, 98% 47%, 100% 74%, 97% 100%, 70% 97%, 44% 100%, 18% 98%, 0 100%, 2% 70%, 0 38%);
}
[data-theme="collage"] .ha-2 {
  opacity: 1; width: 34%; height: 30%;
  background: var(--accent);
  bottom: 4%; left: -3%;
  transform: rotate(-3deg);
  clip-path: polygon(2% 0, 100% 3%, 97% 96%, 0 100%);
  box-shadow: var(--shadow);
}
[data-theme="collage"] .ha-3 {
  opacity: 1;
  top: 4%; left: 2%;
  font-family: var(--kicker-font);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  transform: rotate(-8deg);
  z-index: 4;
  opacity: 0.85;
}
[data-theme="collage"] .ha-3::before { content: "APPROVED ✕ 2026"; }
[data-theme="collage"] .ha-4 {
  opacity: 1; width: 5.5rem; height: 1.5rem;
  background: rgba(232, 213, 160, 0.75);
  border-left: 1px dashed rgba(32, 28, 23, 0.25);
  border-right: 1px dashed rgba(32, 28, 23, 0.25);
  top: 9%; right: 26%;
  transform: rotate(-32deg);
  z-index: 4;
}
[data-theme="collage"] .win {
  border: 2px solid var(--ink);
  transform: rotate(-1deg);
  box-shadow: var(--shadow-strong);
}
/* tape over the window corners */
[data-theme="collage"] .win--hero::before,
[data-theme="collage"] .win--hero::after {
  content: "";
  position: absolute; width: 4.6rem; height: 1.4rem;
  background: rgba(232, 213, 160, 0.8);
  border-left: 1px dashed rgba(32, 28, 23, 0.25);
  border-right: 1px dashed rgba(32, 28, 23, 0.25);
  z-index: 5;
}
[data-theme="collage"] .win--hero::before { top: -0.7rem; left: -1.4rem; transform: rotate(-38deg); }
[data-theme="collage"] .win--hero::after { bottom: -0.6rem; right: -1.5rem; transform: rotate(-35deg); }
[data-theme="collage"] .win-bar { background: var(--ink); color: var(--bg); border-bottom: none; }
[data-theme="collage"] .win-dots i { background: var(--bg); border-radius: 0; }
[data-theme="collage"] .ha-chip { background: var(--accent); }
[data-theme="collage"] .ha-chip--alt { border: 1.5px solid var(--ink); }
[data-theme="collage"] .ha-line { background: #e2d5b8; }

/* Extra paper scraps (slots are hidden in other themes) */
[data-theme="collage"] .td { display: block; }
[data-theme="collage"] .td-1 {
  width: 7rem; height: 4.5rem;
  background: #fff;
  bottom: -6%; right: 4%;
  transform: rotate(5deg);
  box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(0deg, transparent 0 0.55rem, rgba(32, 28, 23, 0.22) 0.55rem 0.62rem);
  background-size: 80% 70%;
  background-position: 50% 60%;
  background-repeat: no-repeat;
  z-index: 3;
}
[data-theme="collage"] .td-2 {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 3px solid var(--accent);
  top: 38%; left: -4%;
  transform: rotate(8deg);
  z-index: 4;
  opacity: 0.8;
}
/* Generated newsprint scraps, fetched only while this theme is active */
[data-theme="collage"] .td-3 {
  width: 19rem; height: 14rem;
  background: url("../../assets/gen/collage-scraps.webp") center / contain no-repeat;
  top: -13%; left: -9%;
  transform: rotate(-4deg);
  z-index: 0;
}
/* a second paste-up in the open space below the contact details */
[data-theme="collage"] .contact::after {
  content: "";
  position: absolute; left: clamp(0.5rem, 4vw, 4rem); bottom: 1rem;
  width: 15rem; height: 11rem;
  background: url("../../assets/gen/collage-scraps.webp") center / contain no-repeat;
  transform: rotate(5deg) scaleX(-1);
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 900px) {
  /* stacked layout on mobile: the form fills this corner, so step aside */
  [data-theme="collage"] .contact::after { display: none; }
}

/* Ticker: a strip of newsprint taped across the page */
[data-theme="collage"] .ticker {
  background: var(--surface);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 3px 0 0 rgba(32, 28, 23, 0.15);
}
[data-theme="collage"] .tk-item { color: var(--ink); font-family: var(--kicker-font); }
[data-theme="collage"] .tk-item:nth-child(4n+1) { background: #efdfbe; padding: 0.1rem 0.4rem; transform: rotate(-0.5deg); }
[data-theme="collage"] .tk-sep { color: var(--accent); font-weight: 700; }
[data-theme="collage"] .tk-sep::before { content: "✕"; }

/* Cards: pasted-down paper, each at its own slight angle */
[data-theme="collage"] .svc-card, [data-theme="collage"] .why-card,
[data-theme="collage"] .step, [data-theme="collage"] .demo-card,
[data-theme="collage"] .price-card, [data-theme="collage"] .form,
[data-theme="collage"] .win--admin {
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow);
}
[data-theme="collage"] .svc-card:nth-child(odd) { transform: rotate(-0.6deg); }
[data-theme="collage"] .svc-card:nth-child(even) { transform: rotate(0.5deg); }
[data-theme="collage"] .svc-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-strong); }
/* tape on top of every other service card */
[data-theme="collage"] .svc-card { position: relative; }
[data-theme="collage"] .svc-card:nth-child(3n+1)::before {
  content: "";
  position: absolute; top: -0.65rem; left: 50%; width: 4rem; height: 1.2rem;
  background: rgba(232, 213, 160, 0.8);
  border-left: 1px dashed rgba(32, 28, 23, 0.25);
  border-right: 1px dashed rgba(32, 28, 23, 0.25);
  transform: translateX(-50%) rotate(-3deg);
}
[data-theme="collage"] .svc-icon { color: var(--accent); }
[data-theme="collage"] .demo-card:nth-child(odd) { transform: rotate(0.5deg); }
[data-theme="collage"] .demo-card:nth-child(even) { transform: rotate(-0.5deg); }
[data-theme="collage"] .demo-card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-strong); }
[data-theme="collage"] .demo-thumb { border: 1.5px solid var(--ink); background: #efdfbe; }
[data-theme="collage"] .dt-b { background: var(--accent); }

/* marker-circled numbers */
[data-theme="collage"] .why-num {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.1rem;
  border: 3px solid var(--accent);
  border-radius: 50% 45% 55% 48% / 55% 50% 48% 52%;
  transform: rotate(-4deg);
  color: var(--ink);
  font-weight: 600;
}
[data-theme="collage"] .step-num {
  border-radius: 0;
  border: 2px solid var(--ink);
  background: var(--bg);
  transform: rotate(-5deg);
  font-weight: 600;
}
[data-theme="collage"] .steps .step:nth-child(even) { transform: rotate(0.4deg) translateY(0.5rem); }
[data-theme="collage"] .steps .step:nth-child(odd) { transform: rotate(-0.4deg); }

/* rubber-stamp status chips */
[data-theme="collage"] .demo-status {
  border: 2px double var(--muted);
  border-radius: 3px;
  transform: rotate(-2deg);
  letter-spacing: 0.18em;
}
[data-theme="collage"] .demo-status--prod {
  border: 2px double var(--accent);
  color: var(--accent);
  opacity: 0.9;
}
[data-theme="collage"] .price-badge {
  background: var(--accent);
  transform: rotate(-3deg);
  border-radius: 0;
}
[data-theme="collage"] .price-card--featured { transform: rotate(0.4deg); box-shadow: var(--shadow-strong); }
[data-theme="collage"] .price-list li::before { content: "✕"; color: var(--accent); }
[data-theme="collage"] .price-amount { font-style: italic; }

[data-theme="collage"] .field input, [data-theme="collage"] .field select, [data-theme="collage"] .field textarea {
  background: #fffdf4;
  border: 1.5px solid var(--ink);
  border-radius: 0;
}
[data-theme="collage"] .field input:focus, [data-theme="collage"] .field select:focus, [data-theme="collage"] .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 2px 2px 0 0 var(--accent);
}
[data-theme="collage"] .site-footer { border-top: 2px solid var(--ink); }

[data-theme="collage"] .mode-panel { border: 1.5px solid var(--ink); box-shadow: var(--shadow); }
[data-theme="collage"] .mode-panel .mp-title { font-style: italic; }
[data-theme="collage"] .car-btn { border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 rgba(32, 28, 23, 0.2); }

/* Motion: pieces settle into place */
[data-theme="collage"] .reveal {
  transform: translateY(12px) rotate(-1.2deg);
  transition-duration: 0.5s;
}
[data-theme="collage"] .reveal.in-view { transform: none; }
/* keep the deliberate resting angles after reveal */
[data-theme="collage"] .svc-card.reveal.in-view:nth-child(odd) { transform: rotate(-0.6deg); }
[data-theme="collage"] .svc-card.reveal.in-view:nth-child(even) { transform: rotate(0.5deg); }
[data-theme="collage"] .step.reveal.in-view:nth-child(even) { transform: rotate(0.4deg) translateY(0.5rem); }
[data-theme="collage"] .step.reveal.in-view:nth-child(odd) { transform: rotate(-0.4deg); }
[data-theme="collage"] .demo-card.reveal.in-view:nth-child(odd) { transform: rotate(0.5deg); }
[data-theme="collage"] .demo-card.reveal.in-view:nth-child(even) { transform: rotate(-0.5deg); }

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="collage"] .mc-prev {
  background: #f1e8d7;
  border: 1.5px solid #201c17;
  border-radius: 0;
}
.mode-card[data-mode="collage"] .mp-a {
  width: 2.6rem; height: 1.9rem;
  background: #efdfbe;
  right: 0.5rem; top: 0.5rem;
  transform: rotate(4deg);
  box-shadow: 2px 2px 0 0 rgba(32, 28, 23, 0.2);
  clip-path: polygon(0 6%, 30% 0, 70% 4%, 100% 0, 97% 50%, 100% 95%, 60% 100%, 25% 96%, 0 100%);
}
.mode-card[data-mode="collage"] .mp-b {
  width: 2rem; height: 1.4rem;
  background: #c92f23;
  left: 0.55rem; top: 0.7rem;
  transform: rotate(-5deg);
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 94%);
}
.mode-card[data-mode="collage"] .mp-c {
  width: 2.2rem; height: 0.65rem;
  background: rgba(232, 213, 160, 0.9);
  border-left: 1px dashed rgba(32, 28, 23, 0.3);
  border-right: 1px dashed rgba(32, 28, 23, 0.3);
  right: 0.9rem; bottom: 1rem;
  transform: rotate(-28deg);
}
.mode-card[data-mode="collage"] .mc-aa {
  font-family: "Fraunces", serif; font-style: italic;
  color: #201c17; left: 0.6rem; bottom: 0.45rem;
}