/* Illustraties voor de saldering-calculator en laadpaal terugverdienen.
   Zelfde beeldtaal als de batterij van de EV laadplanner (ev-laadplanner.css):
   een zwevend glazen object met gloed, reflectie en oplichtende cellen. Ze
   gebruiken .battery-scene als vak, zodat plek, schaal en mobiel gelijk blijven. */

/* Zachte slagschaduw onder een zwevend object, ademt mee met de zweefbeweging. */
.grondschaduw {
  position: absolute;
  left: 50%;
  width: 120px;
  height: 18px;
  margin-left: -60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #000c, #0000);
  filter: blur(3px);
  animation: schaduw 7s ease-in-out infinite;
}

/* ---------------- Zonnepaneel ---------------- */
.zon {
  position: absolute;
  top: -6px;
  left: 6px;
  width: 92px;
  height: 92px;
}
.zon-stralen {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffe58a55 0deg 5deg, transparent 5deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%);
  mask: radial-gradient(circle, #000 28%, transparent 70%);
  animation: draai 40s linear infinite;
}
.zon-kern {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf0 0%, #ffe68a 30%, #ffbe33 68%, #ff9a1f 100%);
  box-shadow: 0 0 22px #ffd25cdd, 0 0 60px #ffb62788, 0 0 110px #ffb62740;
  animation: zon-adem 5s ease-in-out infinite;
}
.zon-bundel {
  position: absolute;
  top: 44px;
  left: 54px;
  width: 132px;
  height: 58px;
  transform-origin: 0 50%;
  transform: rotate(36deg);
  background: linear-gradient(90deg, #ffe58a66, #ffe58a1a 65%, transparent);
  border-radius: 0 60px 60px 0;
  filter: blur(7px);
  animation: bundel 5s ease-in-out infinite;
}
.paneel {
  position: absolute;
  top: 88px;
  left: 48px;
  width: 170px;
  height: 106px;
  transform-style: preserve-3d;
  animation: paneel-zweef 7s ease-in-out infinite;
}
/* Achterplaat: geeft het paneel dikte, net als de randschaduw van de batterij. */
.paneel-plaat {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c916e, #3c4a39 60%, #262e24);
  transform: translateZ(-8px);
  box-shadow: 0 0 0 1px #b3c67d55, 20px 26px 44px #0007;
}
.paneel-glas {
  position: absolute;
  inset: 0;
  border: 1px solid #dce7a9a8;
  border-radius: 12px;
  background: linear-gradient(115deg, #e9f5bf26, #b6c68905 25%, #71896126 75%, #f2f8c455);
  box-shadow: inset 0 0 18px #c5e59e22, inset 0 1px 0 #ffffff40;
  overflow: hidden;
}
.paneel-cellen {
  position: absolute;
  inset: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}
.paneel-cellen i {
  position: relative;
  display: block;
  border-radius: 3px;
  border: 1px solid #a9d8ff30;
  /* Monokristallijne cel: donkerblauw met dunne zilveren geleiders. */
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #bcd8ef38 8px 9px),
    linear-gradient(140deg, #16304a, #23507a 55%, #142a40);
  box-shadow: inset 0 1px 3px #ffffff22;
  overflow: hidden;
}
.paneel-cellen i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, #23884e, #53d88e 48%, #9ef3c1 60%, #2ecc71);
  box-shadow: 0 0 16px #2ecc7188;
  mix-blend-mode: screen;
  opacity: 0;
  animation: cel-zon 4.2s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.15s);
}
.paneel-glans {
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg, transparent 40%, #ffffef55 47%, #ffffef10 53%, transparent 58%);
  animation: glans 4.2s ease-in-out infinite;
  pointer-events: none;
}
.stroombaan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.stroombaan .gloed { fill: none; stroke: #2ecc71; stroke-width: 7; stroke-linecap: round; opacity: .16; filter: blur(3px); }
.stroombaan .deeltjes { fill: none; stroke: #c9ffe0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; filter: drop-shadow(0 0 4px #2ecc71); animation: baan 1.2s linear infinite; }

/* ---------------- Laadpaal ---------------- */
.paal {
  position: absolute;
  top: 16px;
  left: 70px;
  width: 100px;
  height: 200px;
  transform: rotate(-6deg) rotateY(-18deg) rotateX(5deg);
  animation: paal-zweef 7s ease-in-out infinite;
}
.paal-kop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 120px;
  border: 1px solid #dce7a9a8;
  border-radius: 22px;
  background:
    linear-gradient(115deg, #e9f5bf26, #b6c68905 25%, #71896126 75%, #f2f8c455),
    linear-gradient(165deg, #2f3731, #141815);
  box-shadow: inset 0 0 18px #c5e59e22, inset 0 1px 0 #ffffff40, 9px 3px 0 -1px #5e734961, 10px 3px 0 #b3c67d6e, 16px 14px 40px #0006;
  overflow: hidden;
}
.paal-glans {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 10%, #ffffef3b 11%, #ffffef05 23%, transparent 24%, transparent 75%, #ffffcc29 94%);
  pointer-events: none;
}
.paal-scherm {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 38px;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 0%, #10261a, #050b07);
  border: 1px solid #2ecc716b;
  box-shadow: inset 0 0 14px #2ecc7130, 0 0 10px #2ecc7122;
  overflow: hidden;
}
.paal-scherm small {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 6.5px;
  letter-spacing: .16em;
  color: #7fbf98;
}
.paal-teller {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 20px;
  overflow: hidden;
}
.paal-teller > span { display: block; animation: teller 6s steps(5) infinite; }
.paal-teller b {
  display: block;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-family: "Doto", "Inter", monospace;
  font-weight: 700;
  font-size: 13px;
  color: #b8ffd6;
  text-shadow: 0 0 8px #2ecc71cc;
}
.paal-ring {
  position: absolute;
  top: 64px;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  border: 3px solid #2ecc71;
  display: grid;
  place-items: center;
  animation: ring-puls 2.4s ease-in-out infinite;
}
.paal-ring svg { width: 19px; height: 19px; fill: #d6ffe6; stroke: none; filter: drop-shadow(0 0 4px #2ecc71); }
/* De houder met stekker, aan de zijkant van de kop. */
.paal-houder {
  position: absolute;
  top: 46px;
  left: -14px;
  width: 18px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(90deg, #3a443c, #1b201c);
  border: 1px solid #dce7a970;
  box-shadow: -3px 4px 10px #0006;
}
.paal-houder::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 8px;
  height: 12px;
  border-radius: 3px;
  background: #0b0d0c;
  box-shadow: inset 0 0 0 1px #2ecc7155;
}
.paal-voet {
  position: absolute;
  top: 118px;
  left: 50%;
  width: 18px;
  height: 66px;
  margin-left: -9px;
  background: linear-gradient(90deg, #4a564b, #a9b7a0 45%, #3a443c);
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 0 0 1px #dce7a940;
}
.paal-plaat {
  position: absolute;
  top: 178px;
  left: 50%;
  width: 64px;
  height: 14px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #8a9a80, #3a443c 70%);
  box-shadow: 0 0 0 1px #dce7a940;
}
.paal-kabel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.paal-kabel .kabel { fill: none; stroke: #1d221f; stroke-width: 7; stroke-linecap: round; }
.paal-kabel .kabel-rand { fill: none; stroke: #dce7a92e; stroke-width: 9; stroke-linecap: round; }
.paal-kabel .stroom { fill: none; stroke: #c9ffe0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 9; filter: drop-shadow(0 0 4px #2ecc71); animation: baan 1.1s linear infinite; }
.munt3d {
  position: absolute;
  top: 34px;
  left: 178px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff8d2 0%, #ffd95c 38%, #e7a91d 78%, #b87d0a 100%);
  box-shadow: inset 0 0 0 2px #fff0a088, inset 0 -3px 4px #9a650066, 0 0 16px #ffd25c99;
  display: grid;
  place-items: center;
  font: 700 15px/1 "Inter", system-ui, sans-serif;
  color: #8a5a00;
  opacity: 0;
  animation: munt3d 3.6s ease-out infinite;
}
.munt3d:nth-of-type(2) { left: 196px; top: 58px; animation-delay: 1.2s; }
.munt3d:nth-of-type(3) { left: 174px; top: 80px; animation-delay: 2.4s; }
.glinster {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 20deg, #fff8 20deg 25deg, transparent 25deg 110deg, #fff8 110deg 115deg, transparent 115deg 200deg, #fff8 200deg 205deg, transparent 205deg 290deg, #fff8 290deg 295deg, transparent 295deg);
  border-radius: 50%;
  opacity: 0;
  animation: glinster 3s ease-in-out infinite;
}

/* Posities per illustratie. */
.grondschaduw--paneel { top: 204px; left: 78px; margin-left: 0; }
.grondschaduw--paal { top: 206px; left: 70px; margin-left: 0; width: 110px; }
.glinster--1 { top: 82px; left: 206px; }
.glinster--2 { top: 160px; left: 52px; animation-delay: 1.5s; }
.glinster--3 { top: 22px; left: 160px; animation-delay: .6s; }
.glinster--4 { top: 120px; left: 206px; animation-delay: 2s; }

/* Zonder data: net als de batterij gedempt en grijs. */
.result-card.is-error .paneel,
.result-card.is-error .paal,
.result-card.is-error .zon { opacity: .4; filter: grayscale(.7); }
.result-card.is-error .paneel-cellen i::after,
.result-card.is-error .munt3d,
.result-card.is-error .stroombaan { animation: none; opacity: 0; }

/* ---------------- Bewegingen ---------------- */
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes zon-adem { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.12); } }
@keyframes bundel { 0%, 100% { opacity: .5; } 45% { opacity: 1; } }
@keyframes paneel-zweef {
  0%, 100% { transform: rotateX(56deg) rotateZ(-22deg) translateZ(0); }
  50% { transform: rotateX(52deg) rotateZ(-19deg) translateZ(12px); }
}
@keyframes schaduw { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.86); opacity: .6; } }
@keyframes cel-zon { 0%, 100% { opacity: 0; } 28%, 50% { opacity: .85; } 78% { opacity: .08; } }
@keyframes glans { 0% { transform: translateX(-55%); } 55%, 100% { transform: translateX(55%); } }
@keyframes baan { to { stroke-dashoffset: -24; } }
@keyframes paal-zweef {
  0%, 100% { transform: translateY(0) rotate(-6deg) rotateY(-18deg) rotateX(5deg); }
  50% { transform: translateY(-8px) rotate(-4deg) rotateY(-14deg) rotateX(5deg); }
}
@keyframes teller { to { transform: translateY(-100px); } }
@keyframes ring-puls { 0%, 100% { box-shadow: 0 0 10px #2ecc7188, inset 0 0 8px #2ecc7144; } 50% { box-shadow: 0 0 24px #2ecc71, inset 0 0 14px #2ecc7199; } }
@keyframes munt3d {
  0% { opacity: 0; transform: translateY(16px) rotateY(0deg) scale(.7); }
  18% { opacity: 1; transform: translateY(0) rotateY(90deg) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) rotateY(540deg) scale(.95); }
}
@keyframes glinster { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* Op de telefoon staat het vak 38px buiten de kaart, zoals bij de batterij. Het
   paneel en de munten zijn breder dan de batterij, dus schuiven ze iets terug. */
@media (max-width: 440px) {
  .saldering-page .battery-scene,
  .laadpaal-page .battery-scene { right: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .paneel-cellen i::after { opacity: .6; }
  .munt3d { opacity: 1; }
}