/* The cards' own words in an opened card (not part of the Osmo resource or of FORPORT), on both formats: a heading
   (name · place) with the role in italics under it, then the story, its key facts in black */
.dome-grid__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6em;
}

/* the title, a little bigger than the panel's 2em and set a touch tighter */
.dome-grid__lightbox-inner .dome-grid__title,
.card-viewer .dome-grid__title {
  font-size: 2.4em;
  line-height: 1.05;
}

.dome-grid__role {
  margin: 0;
  font-size: 1.05em;
  font-style: italic;
  line-height: 1.35;
  color: #111;
}

.dome-grid__body {
  display: flex;
  flex-direction: column;
  gap: .8em;
  max-width: 34em;
}

.dome-grid__body .dome-grid__text.is--faded {
  opacity: 1;
  color: #5f5f5f;
  line-height: 1.55;
}

/* more words than the panel holds: it scrolls, and fades out at its foot until the end is reached (cards.js) */
.dome-grid__lightbox-inner[data-more],
.card-viewer__lightbox-inner[data-more] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5em), transparent);
}

/* phones: words big enough to read, scrolling when long (the other format's viewer would shrink them to half) */
@media (max-width: 767px) {
  .card-viewer .dome-grid__content {
    font-size: .875em !important;
  }
}


/* the Visit button, bigger */
.dome-grid__content .btn-magnetic {
  font-size: 1.2em;
  margin-top: .25em;
}

/* the title's cursor shader trail (trail.js): its canvas lies over the title, whose own letters wait underneath,
   see-through (still there to be read aloud, selected and found); an emoji stays the page's own */
.dome-grid__title.has-trail-host {
  position: relative;
}

.dome-grid__title.has-trail {
  color: transparent;
}

.dome-grid__title.has-trail .dome-grid__emoji {
  color: #000;
}

.title-trail {
  position: absolute;
  pointer-events: none;
}

/* the same trail on the lettering in an opened card's picture (picture-trail.js): its canvas covers the picture's box,
   see-through except where the trail drags the letters */
.picture-trail {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the card's time, at the foot of its opened panel (both formats): from and to, joined by a line that draws itself in
   once the words are there; a time that is still going ends in a softly pulsing dot. The About card ends in its links
   instead (LinkedIn, email), which come up one after another. The words above keep to the middle of the room
   that is left, and when they are longer than the panel the foot simply follows them. */
.dome-grid__content > :first-child,
.dome-grid__content > .dome-grid__when,
.dome-grid__content > .dome-grid__socials {
  margin-top: auto;
}

.dome-grid__when {
  display: flex;
  align-items: center;
  gap: .75em;
  align-self: stretch;
  max-width: 34em;
  margin-bottom: 0;
  color: #201d1d;
  font-size: .95em;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dome-grid__when-line {
  --dot: .5em;
  position: relative;
  flex: 1;
  min-width: 2.5em;
  height: var(--dot);
  background: radial-gradient(circle closest-side, currentColor 90%, transparent) left center / var(--dot) var(--dot) no-repeat;
}

.dome-grid__when-line::before,
.dome-grid__when-line::after {
  content: "";
  position: absolute;
}

/* the line, from dot to dot */
.dome-grid__when-line::before {
  left: calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  top: 50%;
  height: 1.5px;
  margin-top: -.75px;
  background: currentColor;
  transform-origin: left center;
}

/* where it ends */
.dome-grid__when-line::after {
  right: 0;
  top: 0;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: currentColor;
}

.dome-grid__when-to {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dome-grid__lightbox[data-open] .dome-grid__when-line::before,
.card-viewer__lightbox[data-open] .dome-grid__when-line::before {
  animation: when-draw .9s cubic-bezier(.65, 0, .35, 1) .6s both;
}

.dome-grid__lightbox[data-open] .dome-grid__when-line::after,
.card-viewer__lightbox[data-open] .dome-grid__when-line::after {
  animation: when-arrive .35s cubic-bezier(.34, 1.56, .64, 1) 1.4s both;
}

.dome-grid__lightbox[data-open] .dome-grid__when[data-ongoing] .dome-grid__when-line::after,
.card-viewer__lightbox[data-open] .dome-grid__when[data-ongoing] .dome-grid__when-line::after {
  animation: when-arrive .35s cubic-bezier(.34, 1.56, .64, 1) 1.4s both, when-going 2.4s ease-out 1.8s infinite;
}

@keyframes when-draw {
  from { transform: scaleX(0); }
}

@keyframes when-arrive {
  from { transform: scale(0); }
}

@keyframes when-going {
  0% { box-shadow: 0 0 0 0 rgba(32, 29, 29, .35); }
  70%, 100% { box-shadow: 0 0 0 .55em rgba(32, 29, 29, 0); }
}

/* the About card's links (the footer's own marks, and email) */
.dome-grid__socials {
  display: flex;
  gap: .4em;
  margin-left: -.65em;
}

.dome-grid__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  color: #201d1d;
  transition: background-color .2s ease-out;
}

.dome-grid__socials svg {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
}

.dome-grid__socials a:hover {
  background-color: #efedea;
}

.dome-grid__socials a:focus { outline: none; }
.dome-grid__socials a:focus-visible { outline: 2px solid #201d1d; outline-offset: 2px; }

.dome-grid__lightbox[data-open] .dome-grid__socials a,
.card-viewer__lightbox[data-open] .dome-grid__socials a {
  animation: socials-rise .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.dome-grid__lightbox[data-open] .dome-grid__socials a:nth-child(1),
.card-viewer__lightbox[data-open] .dome-grid__socials a:nth-child(1) { animation-delay: .7s; }
.dome-grid__lightbox[data-open] .dome-grid__socials a:nth-child(2),
.card-viewer__lightbox[data-open] .dome-grid__socials a:nth-child(2) { animation-delay: .8s; }
.dome-grid__lightbox[data-open] .dome-grid__socials a:nth-child(3),
.card-viewer__lightbox[data-open] .dome-grid__socials a:nth-child(3) { animation-delay: .9s; }

@keyframes socials-rise {
  from { opacity: 0; transform: translateY(.6em); }
}

@media (prefers-reduced-motion: reduce) {
  .dome-grid__when-line::before,
  .dome-grid__when-line::after,
  .dome-grid__socials a {
    animation: none !important;
  }
}

/* Phones (and phones held sideways): an opened card reads like a small page of its own. Its time comes first, the line
   drawing itself in as the card opens (at the foot it was only ever seen after scrolling to the end), the title is set
   smaller so the story starts higher up, and everything sits a little closer together. */
@media (max-width: 767px), (max-height: 500px) {
  .dome-grid__lightbox-inner .dome-grid__content,
  .card-viewer .card-viewer__lightbox-inner .dome-grid__content {
    padding: 1.6em 1.5em 1.75em;
    row-gap: 1.1em;
  }

  /* (the title's trail canvas reaches a little past this narrower padding; it must not make the panel scroll sideways) */
  .dome-grid__lightbox-inner,
  .card-viewer__lightbox-inner {
    overflow-x: hidden;
  }

  .dome-grid__lightbox-inner .dome-grid__title,
  .card-viewer .dome-grid__title {
    font-size: 1.9em;
    line-height: 1.06;
  }

  .dome-grid__head {
    gap: .45em;
  }

  .dome-grid__role {
    font-size: .95em;
  }

  .dome-grid__body {
    gap: .7em;
  }

  .dome-grid__body .dome-grid__text.is--faded {
    line-height: 1.5;
  }

  .dome-grid__content > :first-child {
    margin-top: 0;
  }

  .dome-grid__content > .dome-grid__when {
    order: -1;
    margin-top: 0;
    margin-bottom: -.2em;
    max-width: none;
    font-size: .85em;
  }

  .dome-grid__content .btn-magnetic {
    font-size: 1.1em;
  }
}