/* base.css: muur, spijker, spieraam, doek. potlood: v2_FINAL */

:root {
  --wall: #e6e0d4;
  --wall-dark: #d6cfc0;
  --ink: #2b2620;
  --pencil: #4a4640;
  --wood: #c9a26a;
  --wood-dark: #a77d45;
  --linen: #d9ccb0;
  --linen-dark: #c4b493;
  --metal: #9aa0a6;

  --f-pencil: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  --f-marker: "Marker Felt", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  --f-type: "American Typewriter", "Courier New", Courier, monospace;
  --f-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --drop: 56px; /* afstand spijker -> bovenkant lijst */
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100svh;
  background-color: var(--wall);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120, 100, 70, .08), transparent 45%),
    repeating-radial-gradient(circle at 37% 61%, rgba(0, 0, 0, .012) 0 1px, transparent 1px 4px);
  color: var(--ink);
  font-family: var(--f-sans);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.room {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 16px 120px;
  overflow: hidden;
}

.tagline {
  margin: 0;
  font: 400 clamp(15px, 2.2vw, 22px) / 1.3 var(--f-pencil);
  color: var(--pencil);
  opacity: .8;
  text-align: center;
  transform: rotate(-1deg);
}

/* ---------- ophanging ---------- */

.hang {
  position: relative;
  padding-top: var(--drop);
  perspective: 1400px;
}

.stage {
  position: relative;
  transform-style: preserve-3d;
}

/* ---------- het schilderij ---------- */

.painting {
  --tilt: -4deg;
  --bar: 6.5cqw;
  --wrap: 3.1cqw;
  --k: 1; /* lettergrootte-vermenigvuldiger */
  position: relative;
  container-type: inline-size;
  width: min(88vw, 900px, (100svh - 250px) * 4 / 3);
  min-width: 280px;
  aspect-ratio: 4 / 3;
  transform-origin: 50% calc(var(--drop) * -.85);
  transform: rotate(var(--tilt));
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.painting:focus-visible { outline: 3px dashed var(--pencil); outline-offset: 10px; }

.wire {
  position: absolute;
  z-index: 4;
  left: calc(var(--bar) * .72);
  right: calc(var(--bar) * .72);
  top: calc(var(--drop) * -.85);
  height: calc(var(--drop) * .85 + 20%);
  width: calc(100% - var(--bar) * 1.44);
  overflow: visible;
  pointer-events: none;
}
.wire polyline {
  fill: none;
  stroke: #6d7176;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.screw-eye {
  position: absolute;
  z-index: 4;
  top: 20%;
  width: 1.6cqw;
  height: 1.6cqw;
  min-width: 8px;
  min-height: 8px;
  margin: -0.8cqw 0 0 -0.8cqw;
  border: 2px solid #7b8086;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.screw-eye.left { left: calc(var(--bar) * .72); }
.screw-eye.right { left: calc(100% - var(--bar) * .72); }

/* ---------- spieraam ---------- */

.frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: 0 1.6cqw 3cqw rgba(40, 30, 15, .35), 0 .3cqw .6cqw rgba(40, 30, 15, .3);
}

.bar {
  position: absolute;
  background-color: var(--wood);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 25, .35);
  cursor: grab;
  touch-action: none; /* alleen het hout pakt je vinger af, de rest scrollt gewoon */
}
.painting.dragging .bar { cursor: grabbing; }

.bar-t, .bar-b {
  left: 0;
  right: 0;
  height: var(--bar);
  background-image:
    repeating-linear-gradient(180deg, rgba(110, 70, 25, .14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(178deg, rgba(255, 235, 190, .18) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #d4ae74, var(--wood-dark));
}
.bar-t { top: 0; }
.bar-b { bottom: 0; }

.bar-l, .bar-r {
  top: var(--bar);
  bottom: var(--bar);
  width: var(--bar);
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 70, 25, .14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, rgba(255, 235, 190, .18) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, #d4ae74, var(--wood-dark));
}
.bar-l { left: 0; }
.bar-r { right: 0; }

/* ---------- doek ---------- */

.canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* alleen de kinderen die iets doen vangen kliks */
}

.wrap, .face {
  background-color: var(--linen);
  background-image:
    repeating-linear-gradient(0deg, rgba(90, 70, 40, .08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 70, 40, .08) 0 1px, transparent 1px 3px);
}

.wrap {
  position: absolute;
  box-shadow: 0 0 .4cqw rgba(60, 40, 10, .45);
}
.wrap-t, .wrap-b { left: 0; right: 0; height: var(--wrap); }
.wrap-t { top: 0; }
.wrap-b { bottom: 0; }
.wrap-l, .wrap-r { top: var(--wrap); bottom: var(--wrap); width: var(--wrap); }
.wrap-l { left: 0; }
.wrap-r { right: 0; }

.face {
  position: absolute;
  inset: var(--bar);
  overflow: hidden;
  background-image:
    radial-gradient(ellipse at 30% 35%, rgba(255, 255, 255, .28), transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(120, 90, 40, .14), transparent 50%),
    repeating-linear-gradient(0deg, rgba(90, 70, 40, .08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 70, 40, .08) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 1.5cqw rgba(50, 35, 15, .35);
  pointer-events: auto;
}

/* ---------- telefoon: staand schilderij ---------- */

@media (max-width: 640px) {
  :root { --drop: 46px; }
  .painting {
    --bar: 8.5cqw;
    --wrap: 4cqw;
    --k: 2;
    width: min(92vw, 480px);
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}