/*
 * Research-instrument details: a quiet plotting field and registration corners.
 * Technique references (original implementation):
 * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-image
 * https://tympanus.net/codrops/2023/05/17/recreating-the-gradient-mask-hover-effect-from-evervault/
 * https://css-tricks.com/css-borders-using-masks/
 */

.hero::before {
  content: '';
  position: absolute;
  inset: 7% 0 19% 43%;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 62% 57% at 70% 47%, #000 9%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 57% at 70% 47%, #000 9%, transparent 82%);
}

/* This frame belongs only to the interactive forecast control. */
.visual-control {
  position: relative;
}

.visual-control::before {
  content: '';
  position: absolute;
  inset: 8px -13px -12px;
  pointer-events: none;
  opacity: .44;
  background:
    linear-gradient(var(--blue), var(--blue)) left top / 10px 1px,
    linear-gradient(var(--blue), var(--blue)) left top / 1px 10px,
    linear-gradient(var(--blue), var(--blue)) right top / 10px 1px,
    linear-gradient(var(--blue), var(--blue)) right top / 1px 10px,
    linear-gradient(var(--blue), var(--blue)) left bottom / 10px 1px,
    linear-gradient(var(--blue), var(--blue)) left bottom / 1px 10px,
    linear-gradient(var(--blue), var(--blue)) right bottom / 10px 1px,
    linear-gradient(var(--blue), var(--blue)) right bottom / 1px 10px;
  background-repeat: no-repeat;
  transition: opacity 220ms ease;
}

.visual-control:focus-within::before {
  opacity: .95;
}

.live-value,
.row-number,
.section-label > span,
.lens-tabs button > span {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.experience-list details {
  transition: border-color 220ms ease;
}

.experience-list details[open] {
  border-top-color: var(--blue);
}

[data-theme=light] .hero::before {
  opacity: .42;
}

@media (max-width:650px) {
  .hero::before {
    inset: 27% 0 36% 24%;
    background-size: 36px 36px;
    opacity: .25;
  }

  [data-theme=light] .hero::before {
    opacity: .31;
  }

  .visual-control::before {
    inset: -11px -10px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .visual-control::before,
  .experience-list details {
    transition: none;
  }
}