/* Octie in zijn vaste hoek, plus de effecten van aaien. */

/* Zichtbaar terwijl het animatie-overlay zelf verborgen is. */
.cel-octopus.is-home {
  visibility: visible; opacity: 1; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 .4vh .5vh rgb(0 0 0 / .3));
  transition: opacity .5s ease;
}
.cel-octopus.is-home.is-tucked { opacity: 0; pointer-events: none; }

.octie-bubble {
  position: fixed; z-index: 10000; pointer-events: none;
  padding: .35em .8em; border-radius: 1em; white-space: nowrap;
  font: 400 clamp(14px, 1.8vh, 28px) var(--font-brand); color: #3b1d0a;
  background: #fff; box-shadow: 0 .3em 1em rgb(0 0 0 / .25);
}
.octie-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -.4em; translate: -50% 0;
  border: .45em solid transparent; border-bottom: 0; border-top-color: #fff;
}
.octie-bubble.is-right::after { left: -.4em; top: 50%; bottom: auto; translate: 0 -50%; border: .45em solid transparent; border-left: 0; border-right-color: #fff; }
.octie-bubble.is-left::after { left: auto; right: -.4em; top: 50%; bottom: auto; translate: 0 -50%; border: .45em solid transparent; border-right: 0; border-left-color: #fff; }

.octie-ink {
  position: fixed; z-index: 10000; pointer-events: none; border-radius: 50%;
  /* Paarsig in plaats van zwart: ook op het donkere TV-bord te zien. */
  background: radial-gradient(circle at 35% 35%, #8b74b8, #3b2a5c 65%, #241a38);
  box-shadow: 0 0 .6em rgb(139 116 184 / .45);
}

/* Loginpagina: hoedje als hotspot boven de kop van <model-viewer>. */
.octie-hat { pointer-events: none; width: 3.75rem; translate: 0 -16%; }
.octie-hat svg { display: block; width: 100%; height: auto; }