/* Healthcare Aruba – entree met twee deuren (Gedegen / Gedurfd), 29 oktober 2026.
   Compositie, maten, tekstposities, achtergrond en overgang: laatste entreeprototype (28-10, 21:12).
   Koperpuls: goedgekeurde video HC-AW-breathing-copper-parelmoer-v2-8s.mp4 — alleen de bestaande
   koperen deurrand licht op (pixellagen uit dezelfde foto), 35% → 90% → 35% in 4 s; hover/focus 100%.
   De oude omloopglint, losse bolletjes en getekende boogranden zijn verwijderd. */

.entrance { display: none; }
html.toon-entree, html.toon-entree body { overflow: hidden; }
html.toon-entree .entrance { display: grid; }
html.toon-entree .skip { display: none; }

.entrance {
  position: fixed;
  inset: 0;
  z-index: 200;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  /* zijvlakken in de gemeten randkleur van het deurenbeeld, zodat beeld en vlak naadloos overgaan */
  background:
    linear-gradient(to bottom, #f1eae2, #ede5dd 40%, #ece3da 75%, #ebe2d9) left top / 50% 100% no-repeat,
    linear-gradient(to bottom, #211c19, #26201b 40%, #1e1815 75%, #29211d) right top / 50% 100% no-repeat,
    #ebe2d9;
  font-family: Arial, Helvetica, sans-serif;
  /* Breedte van het deurenbeeld: natuurlijke verhouding (940 × 1672), dus hoge, smalle deuren zoals op mobiel */
  --lw: min(82vw, calc(100vh * 0.5622));
  --lw: min(82vw, calc(100svh * 0.5622));
}
.entrance button { font: inherit; }

/* Deurenbeeld in natuurlijke verhouding (29-10: niet uitgerekt). Het beeld is in twee helften gesplitst,
   één per deur, zodat de deuren op brede schermen op 1/3 en 2/3 van de breedte kunnen staan. */
.deur-laag {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  transform: scale(1);
  transition: transform 900ms cubic-bezier(.2,.7,.12,1), filter 900ms ease;
}
.wand { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0; pointer-events: none; }
/* wand naast en tussen de deuren: hetzelfde marmer als de site, getint naar de wand in het deurenbeeld */
.wand-licht { left: 0; background: url('../img/entree/vloer-licht.jpg') left bottom / auto 10.65% repeat-x, url('../img/entree/wand-licht.jpg') center top / cover no-repeat, #ede5dd; }
.wand-tussen { display: none; }
.wand-donker { left: 50%; background: url('../img/entree/vloer-donker.jpg') left bottom / auto 10.65% repeat-x, url('../img/entree/wand-donker.jpg') center top / cover no-repeat, #231d1a; }
.deur-helft {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--lw) / 2);
  overflow: hidden;
}
/* samen (smalle of staande schermen): de helften sluiten op elkaar aan, zoals het oorspronkelijke beeld */
.deur-helft.links { left: calc(50% - var(--lw) / 2);
  -webkit-mask-image: linear-gradient(to right, transparent -0.488%, #000 5.366%, #000 100%);
          mask-image: linear-gradient(to right, transparent -0.488%, #000 5.366%, #000 100%); }
.deur-helft.rechts { left: 50%;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 94.634%, transparent 100.488%);
          mask-image: linear-gradient(to right, #000 0, #000 94.634%, transparent 100.488%); }
.deur-basis, .deur-puls {
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;
  max-width: none;
}
.deur-helft.links .deur-basis, .deur-helft.links .deur-puls { left: 0; }
.deur-helft.rechts .deur-basis, .deur-helft.rechts .deur-puls { left: -100%; }
.deur-basis {
  background: url('../img/entree/entree-dubbele-boogdeuren-zacht-gelijk.png') center / 100% 100% no-repeat;
  opacity: .63;
}
.deur-puls {
  object-fit: fill;
  opacity: .35;
  will-change: opacity;
}
.deur-puls.mobiel { display: none; }

.entrance::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background: #fdfbf8;
  transition: opacity 780ms cubic-bezier(.25,.75,.25,1);
}
.entrance[data-portal="dark"]::after { background: #151311; }
.entrance.is-entering::after { opacity: 1; }
.entrance.is-entering .deur-laag { transform: scale(1.065); filter: brightness(1.08); }
.entrance.is-entering .choice { pointer-events: none; transition: transform 900ms cubic-bezier(.2,.7,.12,1); }
.entrance.is-entering .door-knob { opacity: .5; }
.entrance.is-entering .door-knob.is-selected { opacity: 1; filter: drop-shadow(0 0 17px rgba(247,200,142,.95)); }
.entrance.is-entering .brand,
.entrance.is-entering .entry-title,
.entrance.is-entering .promise { opacity: .55; transition: opacity 500ms ease; }
.entrance.is-entering .choice-inner { opacity: .5; transition: opacity 500ms ease; }
.entrance.is-entering .choice.is-selected .choice-inner { opacity: 1; }
.entrance.is-entering .choice.is-selected { transform: scale(1.016); }

.choice {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s ease;
  overflow: hidden;
}
.choice:focus { outline: none; }
.choice-light { color: #2c2a27; }
.choice-dark { color: #f0ece6; }

.seam {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: calc(50% - .5px);
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(178,123,84,.25) 24%, rgba(178,123,84,.2) 76%, transparent);
  pointer-events: none;
}
.door-knob {
  position: absolute;
  z-index: 6;
  width: 25px;
  height: 25px;
  top: 57.5%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.27));
  transition: filter .45s ease, opacity .45s ease;
}
.door-knob--left { left: calc(50% - var(--lw) * .06); }
.door-knob--right { left: calc(50% + var(--lw) * .06); }
.door-knob { width: clamp(18px, calc(var(--lw) * .045), 25px); height: clamp(18px, calc(var(--lw) * .045), 25px); }
.door-knob::before, .door-knob::after { position: absolute; content: ''; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.door-knob::before { inset: 0; background: linear-gradient(122deg, #ddae87 3%, #b07c5b 48%, #71472f 96%); }
.door-knob::after { inset: 3px; background: linear-gradient(135deg, #ad7753 0%, #d4a17b 42%, #916040 90%); opacity: .94; }
.entrance[data-hover="light"] .door-knob--left,
.entrance[data-hover="dark"] .door-knob--right {
  filter: drop-shadow(0 0 10px rgba(255,207,150,.95)) drop-shadow(0 0 23px rgba(239,171,105,.57));
}

.brand-entree, .promise, .entry-title {
  position: absolute;
  z-index: 5;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  pointer-events: none;
}
.brand-entree {
  top: max(26px, 4.7svh);
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: 400;
  letter-spacing: .24em;
  color: #bd9575;
  opacity: .85;
}
.entry-title {
  top: 9.8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  font-size: clamp(48px, 6.35vw, 86px);
  line-height: 1;
  letter-spacing: -.057em;
  white-space: nowrap;
  font-weight: 400;
}
.entry-title span:first-child { color: #24221f; text-align: right; padding-right: .11em; }
.entry-title span:last-child { color: #f0ebe3; text-align: left; padding-left: .11em; }
.promise {
  top: 20.4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: clamp(14px, 1.7vw, 21px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: .1em;
}
.promise span:first-child { text-align: right; color: #38342f; padding-right: .15em; }
.promise span:last-child { text-align: left; color: #e4dcd4; padding-left: .15em; }
.choice-inner { position: absolute; z-index: 2; top: 42%; left: 0; width: 100%; }
.choice-light .choice-inner { transform: translateX(calc(25vw - var(--lw) * .2473)); }
.choice-dark .choice-inner { transform: translateX(calc(-25vw + var(--lw) * .2479)); }
.choice-name {
  display: block;
  font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  font-size: clamp(28px, calc(var(--lw) * .1), 68px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.047em;
}
.choice-description { display: block; margin-top: 11px; font-size: clamp(10px, calc(var(--lw) * .026), 14px); letter-spacing: .13em; line-height: 1.5; opacity: .77; }

/* Brede schermen (liggend): deuren uit elkaar, middelpunten op 1/3 en 2/3 van de breedte */
@media (min-width: 551px) and (min-aspect-ratio: 1/1) {
  .deur-helft.links { left: calc(100% / 3 - var(--lw) / 2 * .5053);
    -webkit-mask-image: linear-gradient(to right, transparent -0.488%, #000 5.366%, #000 96.4%, transparent 98.4%);
            mask-image: linear-gradient(to right, transparent -0.488%, #000 5.366%, #000 96.4%, transparent 98.4%); }
  .deur-helft.rechts { left: calc(200% / 3 - var(--lw) / 2 * .4957);
    -webkit-mask-image: linear-gradient(to right, transparent 1.2%, #000 3.3%, #000 94.634%, transparent 100.488%);
            mask-image: linear-gradient(to right, transparent 1.2%, #000 3.3%, #000 94.634%, transparent 100.488%); }
  /* tussen Gedegen en de middenlijn: dezelfde wand als helemaal links op het scherm (gekopieerd beeld, zelfde schaal) */
  .wand-tussen { display: block; z-index: 0;
    left: calc(100% / 3 - var(--lw) / 2 * .5053 + var(--lw) / 2 * .93);
    width: calc(50% - (100% / 3 - var(--lw) / 2 * .5053 + var(--lw) / 2 * .93));
    background: url('../img/entree/vloer-licht.jpg') left bottom / auto 10.65% repeat-x,
                url('../img/entree/wand-licht.jpg') left top / max(50vw, calc(100vh * 460 / 370)) auto no-repeat, #ede5dd;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px); mask-image: linear-gradient(to right, transparent 0, #000 90px); }
  /* boven de bogen loopt de wand van het deurenbeeld zacht over in de doorlopende wand ernaast */
  .deur-basis {
    -webkit-mask-image: linear-gradient(to bottom, transparent 17%, #000 24%), linear-gradient(to right, transparent 4%, #000 36%, #000 64%, transparent 96%);
            mask-image: linear-gradient(to bottom, transparent 17%, #000 24%), linear-gradient(to right, transparent 4%, #000 36%, #000 64%, transparent 96%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .door-knob--left { left: calc(100% / 3 + var(--lw) * .1867); }
  .door-knob--right { left: calc(200% / 3 - var(--lw) * .1883); }
  .choice-light .choice-inner { transform: translateX(calc(100vw / 12)); }
  .choice-dark .choice-inner { transform: translateX(calc(-100vw / 12)); }
}

/* Mobiel: goedgekeurde mobiele compositie (beeld met tekst, volle dekking, zonder desktopmasker) */
@media (max-width: 550px) {
  .wand { display: none; }
  .deur-helft { width: 50%; -webkit-mask-image: none !important; mask-image: none !important; }
  .deur-helft.links { left: 0; }
  .deur-helft.rechts { left: 50%; }
  .deur-basis { background-image: url('../img/entree/entree-deuren-zonder-cta.png'); opacity: 1; }
  .deur-puls.desktop { display: none; }
  .deur-puls.mobiel { display: block; }
  .brand-entree, .entry-title, .promise, .choice-inner { visibility: hidden; }
  .door-knob { opacity: 0; }
  .choice { padding: 0 7px max(29svh, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  .entrance *, .entrance::after { transition: none !important; animation: none !important; }
}