/* Plotta — objectschaduw. Geeft transparante object-PNG's weer diepte.
   Markup:  <span class="plotta-object"><img src="/objects/plotta-kompas.png" alt=""></span>  */

.plotta-object{
  position: relative;
  display: inline-block;
  /* per object bij te stellen: */
  --obj-shadow-w: 62%;     /* breedte contactschaduw t.o.v. object */
  --obj-shadow-blur: 6px;
  --obj-lift: 14px;        /* hoogte van de vorm-schaduw (drop-shadow) */
}
.plotta-object picture{ display: contents; }  /* WebP-fallback verandert de layout niet */
.plotta-object img{
  position: relative;
  z-index: 2;
  display: block;
  /* vorm-schaduw: volgt de silhouetvorm van het object */
  filter: drop-shadow(0 var(--obj-lift) calc(var(--obj-lift) + 6px) rgba(15,31,23,.16));
}
.plotta-object::after{        /* zachte contactschaduw op de grond */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: var(--obj-shadow-w);
  height: 16px;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(15,31,23,.28), rgba(15,31,23,0) 72%);
  filter: blur(var(--obj-shadow-blur));
  pointer-events: none;
}

/* Op donkere secties: donkerdere, zachtere schaduw */
.section-dark .plotta-object img{
  filter: drop-shadow(0 var(--obj-lift) calc(var(--obj-lift) + 8px) rgba(0,0,0,.38));
}
.section-dark .plotta-object::after{
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 72%);
}

/* "Zwevende" objecten (kompas, vliegtuig): iets lagere, wijdere contactschaduw
   .plotta-object.floats{ --obj-lift: 20px; --obj-shadow-w: 50%; --obj-shadow-blur: 9px; bottom offset via extra util } */
@media (prefers-reduced-motion: no-preference){
  .plotta-object img{ transition: filter .25s ease, transform .25s ease; }
}