/* Gekopieerd uit NorthByte Lab, effect E456 (lab/effecten/E456-deur-die-opengaat, 04-10-2026). */
/* ==========================================================================
   E456 · Voordeur die opengaat
   Een voordeur in een gevel. Komt hij in beeld, dan gaat hij op een kier;
   een tik (of data-e456-auto="open") zwaait hem naar binnen open en je kijkt
   de woonkamer in, die een klein stukje naar je toe komt. De deur draait om
   de scharnierkant (rotateY) en wordt door het kozijn afgesneden, zoals een
   echte deur die naar binnen opengaat. Alleen transform en opacity.
   Zonder JavaScript staat de deur open en is alles te lezen.
   Instellen op .e456 met CSS-variabelen:
     --e456-deur     kleur van de deur        (standaard #1f4a3d)
     --e456-muur     kleur van de gevel       (standaard #8e4630)
     --e456-kozijn   kleur van het kozijn     (standaard #f4f1ea)
     --e456-breed    breedte van de deur      (standaard min(62vw, 300px))
     --e456-open     hoek van de open deur    (standaard 80deg)
     --e456-duur     duur van het openzwaaien (standaard 1.4s)
   ========================================================================== */

.e456 { --e456-breed: min(58vw, 270px); --e456-hoog: calc(var(--e456-breed) * 1.85); }

.e456-gevel {
  position: relative; display: grid; justify-items: center; padding: 30px 0 0; overflow: hidden;
  background-color: var(--e456-muur, #8e4630);
  /* Metselwerk in halfsteens verband; de voeg is half doorzichtig wit, dus past bij elke steenkleur */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26'%3E%3Cpath d='M0 12h52M0 25h52M26 0v12M1 13v12M51 13v12' stroke='%23fff' stroke-opacity='.42' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: 52px 26px;
  border-radius: 6px;
}
/* Bovenlicht boven de deur met het huisnummer */
.e456-bovenlicht {
  display: grid; place-items: center; width: calc(var(--e456-breed) + 28px); height: 58px;
  background: var(--e456-kozijn, #f4f1ea); border-radius: 4px 4px 0 0; padding: 8px 14px 0;
}
.e456-bovenlicht span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(160deg, #cfe1ea, #8fb2c2); color: #2b2b2b;
  font: italic 400 26px/1 Georgia, "Instrument Serif", serif;
}
.e456-kozijn {
  position: relative; width: calc(var(--e456-breed) + 28px); padding: 8px 14px 0;
  background: var(--e456-kozijn, #f4f1ea);
}
.e456-opening {
  position: relative; width: var(--e456-breed); height: var(--e456-hoog); overflow: hidden;
  perspective: 1300px; perspective-origin: 60% 45%; background: #2a2622;
}
.e456-stoep { display: block; width: calc(var(--e456-breed) + 70px); height: 18px; background: linear-gradient(#b9b4ac, #8e8a83); border-radius: 2px; }

/* Binnen: de foto en een kaartje */
.e456-binnen { position: absolute; inset: 0; }
.e456-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.e456-donker { position: absolute; inset: 0; background: #120d08; opacity: 0; pointer-events: none; }
.e456-kaart {
  position: absolute; left: 16%; right: 10px; bottom: 10px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, .94); color: #1d1a16; font-size: 13.5px; line-height: 1.45;
}

/* De deur zelf (een knop) */
.e456-deur {
  position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(var(--e456-open, 86deg));
}
.e456-deur:focus-visible { outline: 3px solid #ffd166; outline-offset: -3px; }
.e456-voor {
  position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 7%; padding: 11% 12% 14%;
  background: var(--e456-deur, #1f4a3d); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.e456-paneel { border: 3px solid rgba(255, 255, 255, .09); border-bottom-color: rgba(0, 0, 0, .25); border-right-color: rgba(0, 0, 0, .25); border-radius: 3px; }
.e456-paneel:first-child { background: linear-gradient(170deg, #b9d3df, #7fa3b4); border: 6px solid rgba(0, 0, 0, .18); }
.e456-greep { position: absolute; right: 10%; top: 52%; width: 9%; aspect-ratio: 1 / 2.4; border-radius: 999px; background: linear-gradient(90deg, #a77d2c, #f1d58a 45%, #b48a35); }
.e456-klep { position: absolute; left: 30%; right: 30%; top: 50%; height: 3.4%; border-radius: 2px; background: linear-gradient(#f1d58a, #a77d2c); }
.e456-schop { position: absolute; left: 0; right: 0; bottom: 0; height: 6%; background: linear-gradient(#c9a457, #8e6a26); }
.e456-licht { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.e456-tik {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1f4a3d; font: 600 14px/1.2 system-ui, sans-serif;
}

/* Met JavaScript: de deur begint dicht */
.e456-klaar .e456-deur { transform: rotateY(0deg); }
.e456-klaar .e456-donker { opacity: .55; }
.e456-klaar .e456-foto { transform: scale(1.1); }
.e456-klaar .e456-kaart { opacity: 0; transform: translateY(10px); }
.e456-klaar.e456-kier .e456-deur { transform: rotateY(14deg); }
.e456-klaar.e456-kier .e456-licht { opacity: .12; }
.e456-klaar.e456-open .e456-deur { transform: rotateY(var(--e456-open, 86deg)); }
.e456-klaar.e456-open .e456-licht { opacity: .45; }
.e456-klaar.e456-open .e456-donker { opacity: 0; }
.e456-klaar.e456-open .e456-foto { transform: none; }
.e456-klaar.e456-open .e456-kaart { opacity: 1; transform: none; }
.e456:not(.e456-klaar) .e456-tik, .e456-open .e456-tik { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e456-deur { transition: transform var(--e456-duur, 1.4s) cubic-bezier(.45, .05, .2, 1); }
  html:not([data-rm]) .e456-licht, html:not([data-rm]) .e456-donker { transition: opacity var(--e456-duur, 1.4s) ease; }
  html:not([data-rm]) .e456-foto { transition: transform calc(var(--e456-duur, 1.4s) * 1.3) cubic-bezier(.2, .7, .2, 1); }
  html:not([data-rm]) .e456-kaart { transition: opacity .5s ease, transform .5s ease; }
  html:not([data-rm]) .e456-open .e456-kaart { transition-delay: calc(var(--e456-duur, 1.4s) * .6); }
  html:not([data-rm]) .e456-tik { transition: opacity .3s ease; }
}