:root {
  --control-size: 46px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;

  background: #000;
  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

body {
  position: relative;
}

button {
  font: inherit;
}

/* APP */

.presentation-app {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #000;
}

/* HERO */

.map-stage {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #000;

  isolation: isolate;
}

.hero-map {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  user-select: none;

  z-index: 1;
}

/* MARKERS */

.marker {
  position: absolute;

  transform: translate(-50%, -50%);

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.55rem 0.9rem;

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.24);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255,255,255,0.96);

  font-size: clamp(0.8rem, 0.95vw, 1rem);
  font-weight: 600;

  letter-spacing: -0.02em;

  text-shadow:
    0 2px 12px rgba(0,0,0,0.8);

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 0 18px rgba(114,232,255,0.12),
    inset 0 0 18px rgba(255,255,255,0.03);

  cursor: pointer;

  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.marker:hover {
  transform:
    translate(-50%, -50%)
    scale(1.04);

  background:
    rgba(255,255,255,0.08);

  border-color:
    rgba(114,232,255,0.35);

  box-shadow:
    0 0 26px rgba(114,232,255,0.28),
    0 0 56px rgba(114,232,255,0.12);
}

/* LEFT SIDE */

/* LEFT SIDE */

.marker-insulin {
  left: 45%;
  top: 65%;
}

.marker-hba1c {
  left: 8%;
  top: 22%;
}

.marker-glucose {
  left: 13%;
  top: 47%;
}

.marker-triglycerides {
  left: 11%;
  top: 63%;
}

.marker-crp {
  left: 8%;
  top: 86%;
}

/* CENTER */

.marker-carotis {
  left: 42%;
  top: 27%;
}

.marker-brainstem {
  left: 27%;
  top: 23%;
}

.marker-stomach {
  left: 50%;
  top: 52%;
}

.marker-cpeptide {
  left: 58%;
  top: 58%;
}

/* RIGHT SIDE */

.marker-sympathetic {
  left: 80%;
  top: 5%;
}

.marker-parasympathetic {
  left: 70%;
  top: 5%;
}

.marker-apob {
  left: 75%;
  top: 52%;
}

.marker-hdl {
  left: 77%;
  top: 68%;
}

.marker-ldl {
  left: 85%;
  top: 80%;
}

.marker-adrenal {
  left: 69%;
  top: 75%;
}

/* OVERLAY */

.slide-overlay[hidden] {
  display: none;
}

.slide-overlay {
  position: fixed;
  inset: 0;

  z-index: 50;

  overflow: hidden;

  background: #000;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 300ms ease;
}

.slide-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* CLOSE BUTTON */

.icon-button {
  position: fixed;

  top: 18px;
  right: 18px;

  z-index: 100;

  width: var(--control-size);
  height: var(--control-size);

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,0.2);

  background:
    rgba(0,0,0,0.2);

  backdrop-filter: blur(10px);

  color: white;

  font-size: 30px;

  cursor: pointer;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.icon-button:hover {
  background:
    rgba(255,255,255,0.08);

  border-color:
    rgba(114,232,255,0.35);

  box-shadow:
    0 0 20px rgba(114,232,255,0.18);
}

/* SLIDES */

.slide-shell,
.flip-stage,
.flip-card,
.slide-face,
.slide-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.slide-image {
  object-fit: contain;

  background: #000;
}

.flip-stage {
  perspective: 1600px;
  cursor: pointer;
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 600ms ease;
}

.slide-shell.is-flipped .flip-card {
  transform: rotateY(180deg);
}

.slide-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slide-back {
  transform: rotateY(180deg);
}

/* ACCESSIBILITY */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

  clip: rect(0,0,0,0);

  border: 0;
}

/* MOBILE */

@media (max-width: 720px) {

  :root {
    --control-size: 42px;
  }

  .marker {
    font-size: 0.75rem;

    padding:
      0.45rem
      0.7rem;
  }

}