/* ======================================================================
   Teleporting's styles (teleports.js): his props for it, what the moves
   leave in the world, the layers they draw on over the scene, and the
   place on the navbar pulsing twice while he says they can double tap it.
   Loaded after living.css.
   ====================================================================== */

/* Double tapping a place mustn't zoom the page on phones. */
.poi-nav button {
  touch-action: manipulation;
}

/* Two rings from under the place's name, a beat apart, like a double tap. */
.poi-nav button.is-teleport-tip::before {
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border: 1.5px solid var(--amber);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: teleport-tap 1.4s ease-out 3;
}

@keyframes teleport-tap {
  0% { opacity: 0.9; transform: scale(0.4); }
  22% { opacity: 0; transform: scale(1.9); }
  23% { opacity: 0.9; transform: scale(0.4); }
  45% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ------------------------------------------------------------ his props */

.prop-fingers path {
  stroke-width: 2.6px;
}

/* teleports.js blinks him out and in, frame by frame. */
.figure.is-teleporting {
  transition: none;
}

/* Instant Transmission's ki, as a manga draws it: short strokes round him,
   each rising and fading in turn (--d staggers them). */
.prop-aura path {
  stroke-width: 2px;
  opacity: 0;
}

.figure.is-teleporting .prop-aura path {
  animation: aura-rise 0.42s linear var(--d, 0s) infinite;
}

@keyframes aura-rise {
  0% { opacity: 0; transform: translateY(14px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px); }
}

/* ---------------------------------------------------- left in the world */

/* Instant Transmission: the line he's squeezed into zips away upward where
   he goes, and a line drops in and opens out into him where he comes. */
.teleport-line {
  position: absolute;
  z-index: 2;
  top: 1px;
  width: 2px;
  height: calc(var(--fig-h) * 1.2);
  background: var(--ink);
  transform: translate(-50%, -100%) scaleY(0.25);
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: teleport-out 0.3s ease-out forwards;
}

.teleport-line--in {
  animation-name: teleport-in;
}

@keyframes teleport-out {
  0% { opacity: 1; transform: translate(-50%, -100%) scaleY(0.25); }
  30% { opacity: 1; transform: translate(-50%, -100%) scaleY(1.15); }
  100% { opacity: 0; transform: translate(-50%, -170%) scaleY(0.05); }
}

@keyframes teleport-in {
  0% { opacity: 0; transform: translate(-50%, -170%) scaleY(0.05); }
  45% { opacity: 1; transform: translate(-50%, -100%) scaleY(1.15); }
  100% { opacity: 0; transform: translate(-50%, -100%) scaleY(1); }
}

/* The ring of air he lands with, a line spreading along the floor. */
.teleport-ring {
  position: absolute;
  z-index: 2;
  top: 1px;
  width: calc(var(--fig-h) * 0.8);
  height: calc(var(--fig-h) * 0.1);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  animation: teleport-ring 0.55s ease-out forwards;
}

@keyframes teleport-ring {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

/* Lightning: the scorch mark where it struck, fading over a few seconds. */
.teleport-scorch {
  position: absolute;
  z-index: 2;
  top: 1px;
  width: calc(var(--fig-h) * 0.34);
  height: calc(var(--fig-h) * 0.06);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(32, 32, 31, 0.75), rgba(32, 32, 31, 0.35) 60%, rgba(32, 32, 31, 0));
  transform: translate(-50%, -50%);
  opacity: var(--project-world-opacity, 1);
  pointer-events: none;
  animation: teleport-scorch 3.2s ease-in forwards;
}

@keyframes teleport-scorch {
  0%, 40% { opacity: 1; }
  100% { opacity: 0; }
}

/* ------------------------------------------------ drawn over the scene */

.teleport-fx {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Over him, just after him, so the sky's wash still falls on it. */
.teleport-fx--front {
  z-index: 3;
}

.tp-ink {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tp-solid {
  fill: var(--ink);
}

.tp-paper {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-linejoin: round;
}

.tp-amber {
  fill: var(--amber);
}

.tp-amber-line {
  fill: none;
  stroke: var(--amber);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A lightning bolt's hot middle. */
.tp-core {
  fill: none;
  stroke: #fff7e0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tp-smoke {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-opacity: 0.4;
}

/* Marching ants round a selection. */
.tp-ants {
  stroke-dasharray: 5 4;
}

.tp-cursor {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-linejoin: round;
}

.tp-text {
  fill: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 600;
}

/* Lightning's flash, over everything, sky and all. */
.teleport-screenflash {
  position: absolute;
  z-index: 6;
  inset: 0;
  background: #fffaf0;
  pointer-events: none;
  opacity: 0;
  animation: teleport-screenflash 0.3s ease-out both;
}

@keyframes teleport-screenflash {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* Page turn: the desk under the pages, seen while the scene is turning. */
html.is-page-turning body {
  background: #d6d0c4;
}