/**
 * Het kaartmoment na een actie (zie js/verhaal.js): de kaart van de plek over het hele scherm, schemer met fakkellicht rond het gebouw,
 * het bijschrift zoals in de rondleiding, het naambord met de uitslag en het personage dat vertelt.
 * Op gsm staat het bijschrift bovenaan en de verteller onderaan; op een groot scherm links en rechts onderaan.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

.vh { position: fixed; inset: 0; z-index: 97; overflow: hidden; background: #0e0c0a; color: #f2e6cc; opacity: 0; transition: opacity .35s; -webkit-tap-highlight-color: transparent; }
.vh.is-aan { opacity: 1; }
.vh.is-weg { opacity: 0; transition-duration: .4s; }
.vh-kaart { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: transform 2.2s cubic-bezier(.45, 0, .2, 1), opacity .3s; will-change: transform; backface-visibility: hidden; }
.vh-kaart.is-klaar { opacity: 1; }
.vh-grond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Schemer: donker, behalve een cirkel fakkellicht rond de plek. Bij gepakt kleurt het licht rood en knippert het alarm. */
.vh-schemer {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle clamp(170px, 32vmin, 360px) at var(--px, 50%) var(--py, 50%), rgba(255, 170, 80, .14) 0, rgba(255, 150, 60, .03) 45%, rgba(10, 12, 28, .42) 80%, rgba(6, 7, 16, .68) 100%);
}
.vh.is-fout .vh-schemer {
  background: radial-gradient(circle clamp(170px, 32vmin, 360px) at var(--px, 50%) var(--py, 50%), rgba(230, 50, 30, .3) 0, rgba(200, 30, 20, .12) 45%, rgba(40, 6, 6, .5) 80%, rgba(14, 4, 4, .74) 100%);
  animation: vh-alarm .9s steps(2) 3;
}
@keyframes vh-alarm { 50% { filter: brightness(1.4); } }

/* Bijschrift. */
.vh-schrift { position: absolute; left: 56px; bottom: 64px; max-width: min(560px, calc(100% - 520px)); min-width: 280px; }
.vh-schrift small { font: 600 10.5px/1.4 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #e3b47a; }
.vh-schrift p { margin-top: 8px; font: 500 clamp(30px, 3.4vw, 44px)/1.1 'EB Garamond', Georgia, serif; text-shadow: 0 2px 18px rgba(0, 0, 0, .75); transition: opacity .2s; }
.vh-schrift p.is-weg { opacity: 0; }
.vh-tip { display: block; margin-top: 14px; max-width: 420px; font: italic 500 15px/1.4 'EB Garamond', Georgia, serif; color: #cfc2a6; }

/* Het naambord met de uitslag, boven het gebouw. */
.vh-bord {
  position: absolute; left: var(--bx, 50%); top: var(--by, 40%); translate: -50% -100%; max-width: min(320px, calc(100vw - 32px));
  padding: 11px 18px 10px; text-align: center; background: #f7f3eb; border: 1px solid #d4cab6; outline: 1px solid #d4cab6; outline-offset: -5px; border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55); opacity: 0; scale: .6; transition: opacity .25s, scale .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none;
}
.vh-bord.is-zicht { opacity: 1; scale: 1; }
.vh-bord b { display: block; font: 600 21px/1.15 'EB Garamond', Georgia, serif; color: #1d1b18; }
.vh-bord span { display: block; margin-top: 3px; font: 600 10px/1.3 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #4c6a38; }
.vh.is-half .vh-bord span { color: #a87a1e; }
.vh.is-fout .vh-bord span { color: #a3312a; }
.vh-munt {
  position: absolute; left: var(--bx, 50%); top: var(--by, 40%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff1c0, #e3b047 50%, #9b6a16); box-shadow: 0 0 8px rgba(255, 200, 90, .7);
  animation: vh-munt 1.2s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes vh-munt { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

/* De verteller: buste met naam en één zin; het gezicht wisselt met de uitslag. */
.vh-wie {
  position: absolute; right: 40px; bottom: 48px; width: min(420px, calc(100vw - 32px)); margin: 0; display: flex; align-items: flex-end;
  opacity: 0; translate: 0 18px; transition: opacity .3s, translate .4s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
}
.vh-wie.is-zicht { opacity: 1; translate: 0 0; }
.vh-wie img { position: relative; z-index: 1; width: 112px; height: 112px; flex: none; margin-right: -18px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); }
.vh-wie figcaption { flex: 1; min-width: 0; padding: 12px 16px 12px 30px; background: #f7f3eb; border: 1px solid #d4cab6; outline: 1px solid #d4cab6; outline-offset: -5px; border-radius: 3px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.vh-wie b { display: block; font: 600 10px/1.3 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #a3312a; }
.vh-wie p { margin-top: 4px; font: 500 17px/1.35 'EB Garamond', Georgia, serif; color: #1d1b18; }

.vh-verder { position: absolute; left: 56px; bottom: 26px; padding: 6px 0; border: 0; background: none; font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a99c84; opacity: 0; transition: opacity .4s; cursor: pointer; }
.vh-verder.is-zicht { opacity: 1; }
.vh-verder:focus-visible { outline: 1px solid #e3b47a; outline-offset: 4px; }

/* Gsm en smal: bijschrift bovenaan, verteller onderaan over de volle breedte, het naambord ertussen. */
@media (max-width: 759px) {
  .vh-schrift { left: 20px; right: 20px; top: calc(env(safe-area-inset-top, 0px) + 26px); bottom: auto; max-width: none; min-width: 0; }
  .vh-schrift p { font-size: 30px; }
  .vh-tip { font-size: 14px; }
  .vh-wie { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 42px); width: auto; }
  .vh-wie img { width: 84px; height: 84px; margin-right: -14px; }
  .vh-wie figcaption { padding: 10px 12px 10px 22px; }
  .vh-wie p { font-size: 16px; }
  .vh-verder { left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-kaart { transition: none; }
  .vh.is-fout .vh-schemer { animation: none; }
  .vh-munt { display: none; }
}