/* ==========================================================================
   Coming-soon state
   Loaded only while TEMPLATE_MODE is on in petals/config.php.

   Deliberately a SEPARATE file from styles.css: the design's stylesheet
   stays untouched, and switching this off is one flag rather than an
   unpicking job.
   ========================================================================== */

/* Marked by coming-soon.js, not by hand — see that file for why. */
[data-soon] {
  position: relative;
  cursor: default;
}

/* The design uses colour and weight for its links, so a "disabled"
   look would fight it. These stay exactly as they were; only the
   behaviour changes. */

[data-soon]::after {
  content: attr(data-soon);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 200;

  padding: .46rem .72rem;
  border-radius: 4px;
  background: var(--ink, #26191b);
  color: var(--cream, #fcf7f2);

  font-family: inherit;
  font-size: .78rem;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}

/* Little pointer under the bubble */
[data-soon]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 200;
  width: 8px;
  height: 8px;
  background: var(--ink, #26191b);
  transform: translate(-50%, 4px) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}

[data-soon]:hover::after,
[data-soon]:focus-visible::after,
[data-soon].is-showing::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
[data-soon]:hover::before,
[data-soon]:focus-visible::before,
[data-soon].is-showing::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(45deg);
}

/* Near the top of the page the bubble would sit off-screen, so those
   flip below. JS adds the class when there isn't room above. */
[data-soon].soon-below::after {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translate(-50%, -4px);
}
[data-soon].soon-below::before {
  bottom: auto;
  top: calc(100% + 4px);
  transform: translate(-50%, -4px) rotate(45deg);
}
[data-soon].soon-below:hover::after,
[data-soon].soon-below:focus-visible::after,
[data-soon].soon-below.is-showing::after { transform: translate(-50%, 0); }
[data-soon].soon-below:hover::before,
[data-soon].soon-below:focus-visible::before,
[data-soon].soon-below.is-showing::before { transform: translate(-50%, 0) rotate(45deg); }

/* A bubble pinned to an element near the left or right edge runs off
   the screen. JS measures and adds these. */
[data-soon].soon-start::after  { left: 0; transform: translate(0, 4px); }
[data-soon].soon-start::before { left: 18px; }
[data-soon].soon-start:hover::after,
[data-soon].soon-start:focus-visible::after,
[data-soon].soon-start.is-showing::after { transform: translate(0, 0); }

[data-soon].soon-end::after  { left: auto; right: 0; transform: translate(0, 4px); }
[data-soon].soon-end::before { left: auto; right: 18px; }
[data-soon].soon-end:hover::after,
[data-soon].soon-end:focus-visible::after,
[data-soon].soon-end.is-showing::after { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  [data-soon]::after,
  [data-soon]::before { transition: none; }
}

/* Touch has no hover, so the tap shows it and it fades by itself.
   Without this the bubble would appear and stick until you tapped
   something else. */
@media (hover: none) {
  [data-soon]:hover::after,
  [data-soon]:hover::before { opacity: 0; visibility: hidden; }
}