/* ─────────────────────────────────────────────────────────
   paper.css — Paper-Cutout-System
   Tears · Tape · Polaroid · Noise · Rotationen · Sticker
   sidami.ch
───────────────────────────────────────────────────────── */

/* ─── Paper-Tear: Bottom-Kante abreissen ────────────────── */
/* Fein-gerissen, max 6-8% Tiefe — Content bleibt lesbar   */
.paper-tear {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 92%,
    98% 95%, 96% 92%, 94% 95%, 91% 92%, 89% 95%,
    87% 92%, 84% 95%, 82% 92%, 79% 95%, 77% 92%,
    75% 95%, 72% 92%, 70% 95%, 67% 92%, 65% 95%,
    62% 92%, 60% 95%, 57% 92%, 55% 95%, 52% 92%,
    50% 95%, 47% 92%, 45% 95%, 42% 92%, 40% 95%,
    37% 92%, 35% 95%, 32% 92%, 30% 95%, 27% 92%,
    24% 95%, 22% 92%, 19% 95%, 17% 92%, 14% 95%,
    12% 92%, 9% 95%, 7% 92%, 4% 95%, 2% 92%,
    0% 95%
  );
}

/* ─── Paper-Tear: Sehr sanft, für Videos (max 4-5% Tiefe) ─ */
.paper-tear--soft {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 95%,
    98% 97%, 96% 95%, 94% 97%, 92% 95%, 90% 97%,
    88% 95%, 86% 97%, 84% 95%, 82% 97%, 80% 95%,
    78% 97%, 76% 95%, 74% 97%, 72% 95%, 70% 97%,
    68% 95%, 66% 97%, 64% 95%, 62% 97%, 60% 95%,
    58% 97%, 56% 95%, 54% 97%, 52% 95%, 50% 97%,
    48% 95%, 46% 97%, 44% 95%, 42% 97%, 40% 95%,
    38% 97%, 36% 95%, 34% 97%, 32% 95%, 30% 97%,
    28% 95%, 26% 97%, 24% 95%, 22% 97%, 20% 95%,
    18% 97%, 16% 95%, 14% 97%, 12% 95%, 10% 97%,
    8% 95%, 6% 97%, 4% 95%, 2% 97%, 0% 96%
  );
}

/* ─── Paper-Tear: Rechte Kante abreissen (max 7%) ────────── */
.paper-tear-right {
  clip-path: polygon(
    0% 0%,
    93% 0%,
    96% 3%, 93% 6%, 96% 10%, 93% 13%, 96% 17%,
    93% 20%, 96% 24%, 93% 27%, 96% 31%, 93% 34%,
    96% 38%, 93% 41%, 96% 45%, 93% 48%, 96% 52%,
    93% 55%, 96% 59%, 93% 62%, 96% 66%, 93% 69%,
    96% 73%, 93% 76%, 96% 80%, 93% 83%, 96% 87%,
    93% 90%, 96% 94%, 93% 97%, 96% 100%,
    0% 100%
  );
}

/* ─── Paper-Tear: Alle vier Kanten ─────────────────────── */
/* 52-Punkt-Polygon für Polaroid-/Collage-Stil */
.paper-tear-all {
  clip-path: polygon(
    4% 2%,   10% 0%,  17% 3%,  24% 1%,  31% 4%,
    38% 0%,  45% 3%,  52% 1%,  59% 4%,  66% 0%,
    73% 3%,  80% 1%,  87% 4%,  94% 0%,  98% 4%,
    100% 10%,
    97% 17%, 100% 24%, 97% 31%, 100% 38%,
    97% 45%, 100% 52%, 97% 59%, 100% 66%,
    97% 73%, 100% 80%, 97% 87%, 100% 94%,
    96% 98%,
    90% 100%, 83% 97%, 76% 100%, 69% 97%, 62% 100%,
    55% 97%, 48% 100%, 41% 97%, 34% 100%, 27% 97%,
    20% 100%, 13% 97%,  6% 100%,  2% 96%,
    0% 90%,
    3% 83%,  0% 76%,  3% 69%,  0% 62%,
    3% 55%,  0% 48%,  3% 41%,  0% 34%,
    3% 27%,  0% 20%,  3% 13%,  0%  6%
  );
}

/* ─── Polaroid ──────────────────────────────────────────── */
.polaroid {
  background: #fff;
  padding: 0.6rem 0.6rem 2.8rem;
  box-shadow:
    0 6px 28px rgba(20, 18, 16, 0.16),
    0 1px 4px  rgba(20, 18, 16, 0.10);
  position: relative;
  display: inline-block;
  border-radius: 1px;
}

.polaroid__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.polaroid__caption {
  font-family: var(--font-handwritten);
  font-size: 0.8rem;
  text-align: center;
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  color: var(--ink-soft);
  line-height: 1.2;
}

/* Placeholder — neutral gray, looks like an unprinted photo */
.polaroid__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ccc8c2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.polaroid__placeholder svg {
  width: 55%;
  height: auto;
}

/* ─── Tape-Strip ────────────────────────────────────────── */
.tape-strip {
  position: absolute;
  width: 3.5rem;
  height: 1.1rem;
  background: rgba(245, 215, 66, 0.42);
  filter: blur(0.25px);
  z-index: 10;
  pointer-events: none;
  border-radius: 1px;
}

/* Feine diagonale Linien — simulieren Tape-Textur */
.tape-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    95deg,
    rgba(255, 255, 255, 0.1) 0px,
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px,
    transparent 5px
  );
  border-radius: inherit;
}

/* Preset-Positionen */
.tape--top-center {
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

.tape--top-left {
  top: -0.5rem;
  left: 12%;
  transform: rotate(-4.5deg);
}

.tape--top-right {
  top: -0.5rem;
  right: 12%;
  transform: rotate(3.5deg);
}

.tape--bottom-left {
  bottom: -0.5rem;
  left: 20%;
  transform: rotate(2deg);
}

.tape--diagonal {
  top: -0.5rem;
  left: 30%;
  transform: rotate(-8deg);
}

/* ─── Paper-Rotationen ──────────────────────────────────── */
/* Keine runden 45° / 90° — organische Micro-Rotationen */
.paper-rotate-1  { --base-rot: -3.5deg; transform: rotate(-3.5deg); }
.paper-rotate-2  { --base-rot:  2.0deg; transform: rotate( 2.0deg); }
.paper-rotate-3  { --base-rot: -1.5deg; transform: rotate(-1.5deg); }
.paper-rotate-4  { --base-rot:  4.0deg; transform: rotate( 4.0deg); }
.paper-rotate-5  { --base-rot: -2.5deg; transform: rotate(-2.5deg); }

/* ─── Paper-Shadow ──────────────────────────────────────── */
.paper-shadow {
  box-shadow:
    0 4px 24px rgba(20, 18, 16, 0.12),
    0 1px 3px  rgba(20, 18, 16, 0.08);
}

.paper-shadow-heavy {
  box-shadow:
    0 8px 40px rgba(20, 18, 16, 0.18),
    0 2px 6px  rgba(20, 18, 16, 0.12);
}

/* ─── Noise-Overlay ─────────────────────────────────────── */
/* SVG-Filter als Data-URI — kein HTTP-Request nötig */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* z-index 9990 (UNTER Nav mit 9999) damit Nav korrekt darüber liegt */
  z-index: 9990;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 250px 250px;
}

/* ─── Page-wide background doodles ─────────────────────── */
#page-bg-doodles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 9;
  overflow: hidden;
}

.bg-sparkle,
.bg-doodle {
  position: absolute;
  transform-origin: center;
  pointer-events: none;
}

/* ─── Sticker-Base ──────────────────────────────────────── */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 0.72vw, 0.78rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  user-select: none;
  white-space: nowrap;
  position: relative;
  /* Rough.js border wird per JS darübergelegt */
}

.sticker--yellow {
  background: var(--highlight-yellow);
  color: var(--ink);
}

.sticker--voltage {
  background: var(--voltage);
  color: #fff;
}

.sticker--white {
  background: #fff;
  color: var(--ink);
}

.sticker--outline {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

/* ─── Idle-Wiggle ───────────────────────────────────────── */
/* Aktiviert wenn 5 s keine User-Interaktion — Paper im Wind */
@keyframes paper-wiggle {
  0%, 100% {
    transform: rotate(var(--base-rot, 0deg)) translateY(0);
  }
  20% {
    transform: rotate(calc(var(--base-rot, 0deg) + 2.5deg)) translateY(-4px);
  }
  50% {
    transform: rotate(calc(var(--base-rot, 0deg) - 1.5deg)) translateY(3px);
  }
  75% {
    transform: rotate(calc(var(--base-rot, 0deg) + 1deg)) translateY(-2px);
  }
}

.is-idle .polaroid,
.is-idle .sticker {
  animation: paper-wiggle 3.2s ease-in-out infinite;
  animation-delay: var(--wiggle-delay, 0ms);
}