:root {
  --cream: #FFF6EB;
  --black: #171717;
  --pink: #FF2D92;
  --yellow: #F8C63D;
  --orange: #FF6A00;
  --purple: #5B1EFF;
}

html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--black); }
::selection { background: var(--pink); color: var(--cream); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background-color: var(--black); border-radius: 999px; border: 2px solid var(--cream); }

.font-display { font-family: 'Anton', sans-serif; }
.font-hand { font-family: 'Caveat', cursive; }

.eyebrow { font-family:'Manrope',sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }

/* Grain */
.grain { position:relative; }
.grain::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.1; mix-blend-mode:overlay; z-index:1;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halftone dot pattern */
.halftone { background-image: radial-gradient(circle, rgba(23,23,23,0.9) 1.6px, transparent 1.6px); background-size: 10px 10px; }
.halftone-light { background-image: radial-gradient(circle, rgba(255,246,235,0.9) 1.6px, transparent 1.6px); background-size: 10px 10px; }

/* Torn / jagged edges */
.torn-bottom { clip-path: polygon(0% 0%,100% 0%,100% 92%,97% 100%,94% 90%,91% 100%,88% 91%,85% 100%,82% 92%,79% 100%,76% 91%,73% 100%,70% 92%,67% 100%,64% 91%,61% 100%,58% 92%,55% 100%,52% 91%,49% 100%,46% 92%,43% 100%,40% 91%,37% 100%,34% 92%,31% 100%,28% 91%,25% 100%,22% 92%,19% 100%,16% 91%,13% 100%,10% 92%,7% 100%,4% 91%,0% 100%); }
.torn-top { clip-path: polygon(0% 8%,3% 0%,6% 10%,9% 0%,12% 9%,15% 0%,18% 10%,21% 0%,24% 9%,27% 0%,30% 10%,33% 0%,36% 9%,39% 0%,42% 10%,45% 0%,48% 9%,51% 0%,54% 10%,57% 0%,60% 9%,63% 0%,66% 10%,69% 0%,72% 9%,75% 0%,78% 10%,81% 0%,84% 9%,87% 0%,90% 10%,93% 0%,96% 9%,100% 0%,100% 100%,0% 100%); }

/* Diagonal section */
.diagonal-b { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.diagonal-t { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }

/* Tape strip */
.tape {
  position:absolute; width:110px; height:34px;
  background: repeating-linear-gradient(45deg, rgba(255,246,235,0.85), rgba(255,246,235,0.85) 4px, rgba(255,246,235,0.65) 4px, rgba(255,246,235,0.65) 8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Reveal variants */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-60px) rotate(-2deg); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-left.in { opacity:1; transform:translateX(0) rotate(0deg); }
.reveal-right { opacity:0; transform:translateX(60px) rotate(2deg); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-right.in { opacity:1; transform:translateX(0) rotate(0deg); }
.reveal-scale { opacity:0; transform:scale(0.7) rotate(-4deg); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-scale.in { opacity:1; transform:scale(1) rotate(0deg); }

/* Sticker wiggle */
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.wiggle { animation: wiggle 3.5s ease-in-out infinite; display:inline-block; }
@keyframes flutter { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-2px); } }
.flutter { animation: flutter 4s ease-in-out infinite; }

/* Hover: skew headline */
.skew-hover { transition: transform .35s cubic-bezier(.16,1,.3,1); display:inline-block; }
.skew-hover:hover { transform: skewX(-6deg) scale(1.02); }

.underline-draw { position:relative; }
.underline-draw::after { content:""; position:absolute; left:0; bottom:-2px; height:3px; width:0; background:currentColor; transition:width .35s cubic-bezier(.16,1,.3,1); }
.underline-draw:hover::after { width:100%; }

.card-lift { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.card-lift:hover { transform: translateY(-8px) rotate(-1deg) scale(1.02); }

.img-zoom img, .img-zoom .block-fill { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img, .img-zoom:hover .block-fill { transform: scale(1.07) rotate(1deg); }

/* Marquee */
.marquee-track { display:flex; width:max-content; animation: marquee 18s linear infinite; }
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

#hero-bg { transition: transform .05s linear; }

/* Collage block placeholder texture (stand-in for campaign photography) */
.collage-block { position: relative; overflow: hidden; }
.collage-block::after { content:""; position:absolute; inset:0; background: linear-gradient(160deg, rgba(23,23,23,0) 40%, rgba(23,23,23,0.35) 100%); }

/* ===== V5 additions ===== */

/* Custom cursor */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 42px; height: 42px;
  pointer-events: none; z-index: 9999; mix-blend-mode: difference;
  color: #C41E3A;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width .25s ease, height .25s ease, color .2s ease, opacity .2s ease, transform .25s ease;
  display: none;
}
@media (hover:hover) and (pointer:fine) { .cursor-dot { display: block; } }
.cursor-dot.visible { opacity: 1; }
.cursor-dot.grow { width: 56px; height: 56px; color: #F8C63D; }
.cursor-dot svg { width: 100%; height: 100%; display: block; }

/* Duotone photo treatment: real photo + brand color overlay */
.photo-duo { position: relative; overflow: hidden; }
.photo-duo img { width:100%; height:100%; object-fit:cover; filter: grayscale(0.35) contrast(1.1); }
.photo-duo::after { content:""; position:absolute; inset:0; mix-blend-mode: multiply; }
.photo-duo.duo-pink::after { background: linear-gradient(160deg, #FF2D92 0%, transparent 60%); }
.photo-duo.duo-purple::after { background: linear-gradient(160deg, #5B1EFF 0%, transparent 60%); }
.photo-duo.duo-orange::after { background: linear-gradient(160deg, #FF6A00 0%, transparent 60%); }
.photo-duo.duo-black::after { background: linear-gradient(200deg, rgba(23,23,23,0.75) 10%, transparent 65%); }
.photo-duo.duo-jmred::after { background: linear-gradient(160deg, #E13A2E 0%, transparent 55%); }

/* Organic blob shapes (soft, non-circular accents) */
.blob-1 { border-radius: 62% 38% 55% 45% / 55% 45% 60% 40%; }
.blob-2 { border-radius: 45% 55% 65% 35% / 40% 60% 40% 60%; }
.blob-3 { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }

/* Sticky pin stack */
.pin-wrap { position: relative; }
.pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display:flex; align-items:center; }
.pin-item {
  position: absolute; inset: 0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  opacity: 0; transform: translateY(30px) scale(0.96);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.pin-item.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }

/* Interactive laptop mockup (JM Web showcase) */
.laptop-mock { position: relative; width: min(88vw, 660px, calc(72svh * 1.5)); margin: 0 auto; perspective: 1600px; }
.laptop-mock .screen {
  position: relative; aspect-ratio: 16/10.2; background: #0c0c0c;
  border-radius: 14px 14px 3px 3px; padding: 16px 16px 0;
  box-shadow: 0 40px 90px -28px rgba(0,0,0,0.55);
  transform: rotateX(5deg); transform-origin: bottom center;
}
.laptop-mock .cam { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:999px; background:#3a3a3a; }
.laptop-mock .screen-inner { position: relative; width:100%; height:100%; border-radius: 6px 6px 0 0; overflow:hidden; background:#fff; }
.laptop-mock .keyboard {
  position: relative; width: 116%; margin-left: -8%; height: 24px; margin-top: -2px;
  background: linear-gradient(180deg, #2c2c2c 0%, #101010 100%);
  clip-path: polygon(4% 0%, 96% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 34px -14px rgba(0,0,0,0.55);
}
.laptop-mock .keyboard::before {
  content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width: 15%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 3px;
}

.browser-bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:#F1EEE7; border-bottom:1px solid rgba(0,0,0,0.06); flex-shrink:0; }
.browser-bar span { width:8px; height:8px; border-radius:999px; background: rgba(0,0,0,0.15); }

/* ===== V6 additions: cinematic scenes ===== */
.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); }

@keyframes breathe { 0%,100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.03) rotate(1deg); } }
.breathe { animation: breathe 6s ease-in-out infinite; }

@keyframes driftSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.drift { animation: driftSlow 7s ease-in-out infinite; }

.scene { position: relative; overflow: hidden; }

.rainbow-letter:nth-child(7n+1) { color: #FF2D92; }
.rainbow-letter:nth-child(7n+2) { color: #F8C63D; }
.rainbow-letter:nth-child(7n+3) { color: #FF6A00; }
.rainbow-letter:nth-child(7n+4) { color: #5B1EFF; }
.rainbow-letter:nth-child(7n+5) { color: #FFF6EB; }
.rainbow-letter:nth-child(7n+6) { color: #FF2D92; }
.rainbow-letter:nth-child(7n) { color: #F8C63D; }

.text-outline { -webkit-text-stroke: 2px #171717; color: transparent; }
.text-outline-cream { -webkit-text-stroke: 2px #FFF6EB; color: transparent; }

/* ===== V7 additions: signature motif + micro-interactions ===== */
.scribble-wrap { position: relative; display: inline-block; }
.scribble-wrap::after {
  content:""; position:absolute; left:-12%; right:-12%; top:-22%; bottom:-22%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'%3E%3Cpath d='M20,60 C15,20 80,5 150,8 C230,11 285,25 280,55 C275,90 210,112 140,110 C60,108 10,95 15,65' fill='none' stroke='%23FF2D92' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events:none; z-index:-1;
}

.tilt-hover { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tilt-hover:hover { transform: rotate(-1.5deg) scale(1.035); }

.secret .secret-msg { opacity:0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.secret:hover .secret-msg { opacity:1; transform: translateY(0); }

.sticker { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.sticker:hover { transform: scale(1.08) rotate(-6deg); }

.animate-pulse { animation: pulseY 1.8s ease-in-out infinite; }
@keyframes pulseY { 0%,100% { opacity:.4; transform: scaleY(1); } 50% { opacity:1; transform: scaleY(1.4); } }

/* ===== V8 additions: red punch accent ===== */
:root { --red: #C41E3A; }
.photo-duo.duo-red::after { background: linear-gradient(160deg, #C41E3A 0%, transparent 60%); }

/* ===== V9 additions: red/yellow hero ===== */
.photo-duo.duo-red-light::after { background: linear-gradient(180deg, rgba(196,30,58,0.3) 0%, rgba(196,30,58,0.55) 100%); }

/* ===== Natalia Pula palette: photo duotone variants ===== */
.photo-duo.duo-natrust::after { background: linear-gradient(160deg, #E15625 0%, transparent 60%); }
.photo-duo.duo-natolive::after { background: linear-gradient(160deg, #8A9A4B 0%, transparent 55%); }
.photo-duo.duo-natblush::after { background: linear-gradient(160deg, #F2597F 0%, transparent 60%); }
.photo-duo.duo-natsky::after { background: linear-gradient(160deg, #6EC3C6 0%, transparent 55%); }
.photo-duo.duo-natlilac::after { background: linear-gradient(160deg, #B79ADD 0%, transparent 55%); }

/* Graceful fallback for missing photo placeholders */
.photo-missing .photo-missing-label { display: flex !important; }

/* ===== V10 additions: wavy interactive headline ===== */
.wave-letter { display: inline-block; animation: letterWave 2.6s ease-in-out infinite; }
@keyframes letterWave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.12em); }
}

/* ===== "Wat wij doen" pagina: DE SPARK interactief moment ===== */
.spark-btn { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.spark-btn:hover { transform: scale(1.08) rotate(-4deg); }

.spark-particle {
  position: fixed; left: 0; top: 0; width: 9px; height: 9px; border-radius: 999px;
  pointer-events: none; z-index: 9998;
  animation: sparkBurst .85s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sparkBurst {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ===== Manifest quote-mark texture ===== */
.quote-mark {
  position: absolute; top: -1.5rem; left: -0.5rem; z-index: 0;
  font-size: clamp(8rem, 20vw, 16rem); line-height: 1; opacity: 0.08;
  pointer-events: none; user-select: none;
}

/* ===== De Verzameltafel: editorial motifs ===== */
.table-line { height: 1.5px; background: currentColor; opacity: .18; }
.note-tag {
  display: inline-flex; align-items: center; border: 1.5px solid currentColor;
  border-radius: 999px; padding: .2rem .75rem; font-family:'Caveat',cursive;
  font-size: 1.05rem; line-height: 1; white-space: nowrap;
}
.guest-word { display:inline-block; transition: transform .25s ease, color .25s ease; }
.guest-word:hover { transform: translateY(-3px) rotate(-2deg); }

/* ===== "Contact opnemen met een maker" toggle ===== */
.mc-toggle summary { list-style: none; }
.mc-toggle summary::-webkit-details-marker { display: none; }
.mc-toggle .mc-toggle-icon { transition: transform .25s ease; }
.mc-toggle[open] .mc-toggle-icon { transform: rotate(45deg); }