:root {
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90' preserveAspectRatio='none'%3E%3Cpath d='M50 88C20 66 0 48 0 26 0 11 12 0 26 0c11 0 19 6 24 15C55 6 63 0 74 0c14 0 26 11 26 26 0 22-20 40-50 62z'/%3E%3C/svg%3E");
}

.plank-frame {
  width: min(100%, 32rem, (100svh - 21rem) * 10 / 9);
  min-width: min(100%, 18rem);
  perspective: 1200px;
  animation: arrive 1.3s var(--ease) both 0.15s;
}

.plank-body {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  filter:
    drop-shadow(0 2px 0 #C79C66) drop-shadow(0 2px 0 #E2C291)
    drop-shadow(0 2px 0 #B78A55) drop-shadow(0 2px 0 #A67845)
    drop-shadow(0 26px 26px rgba(74, 52, 28, 0.32));
}

.plank {
  --logo-share: 0.54;
  --logo-center-y: 0.49;
  position: relative;
  aspect-ratio: 10 / 9;
  background: var(--wood) center / cover, #DDBB88;
  -webkit-mask: var(--heart) center / 100% 100% no-repeat;
  mask: var(--heart) center / 100% 100% no-repeat;
}

.plank::before,
.plank::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plank::before {
  background: radial-gradient(90% 85% at 50% 38%, transparent 50%, rgba(110, 70, 30, 0.28));
}
.plank::after {
  z-index: 2;
  background: radial-gradient(circle at var(--mx, 35%) var(--my, 25%), rgba(255, 250, 238, 0.45), transparent 55%);
  mix-blend-mode: soft-light;
}

.plank canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plank__burn { mix-blend-mode: multiply; }
.plank__fx { z-index: 1; filter: drop-shadow(0 0 4px rgba(255, 120, 30, 0.7)); }

.plank__logo {
  position: absolute;
  left: calc((1 - var(--logo-share)) * 50%);
  top: calc(var(--logo-center-y) * 100%);
  width: calc(var(--logo-share) * 100%);
  height: auto;
  translate: 0 -50%;
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.js .plank__logo { display: none; }

@keyframes arrive { from { opacity: 0; transform: translateY(40px) scale(0.94); } }