/* ─── Elevator Svg ───────────────────────────────────────────────────── ✦ ─ */

.mind-drops-elevator-svg {
  margin: auto;
  width: fit-content;
  height: 50px;
}

/* ─── Logs Container ─────────────────────────────────────────────────── ✦ ─ */

.mind-drops-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

/* ─── Logs ───────────────────────────────────────────────────────────── ✦ ─ */

.mind-drops {
  --mind-drops-spacing: 1.25em;
  --mind-drops-button-margin: 4rem;

  display: flex;
  gap: var(--mind-drops-spacing);
  overflow-y: hidden;
  overflow-x: scroll;
  margin-top: 1;
  padding-top: var(--mind-drops-spacing);
  scroll-snap-type: x mandatory;
  anchor-name: --mind-drop-scroll;
  container-type: scroll-state;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}

.mind-drop {
  --mind-drop-width: min(65%, calc(100% - 6 * var(--mind-drops-spacing)));
  --circus-conic-background-color-one: rgba(255, 255, 255, 0.65);
  --circus-conic-background-color-two: #ffeff0;
  --circus-conic-background: conic-gradient(
    var(--circus-conic-background-color-one) 0deg,
    var(--circus-conic-background-color-one) 15deg,
    var(--circus-conic-background-color-two) 15deg,
    var(--circus-conic-background-color-two) 30deg,
    var(--circus-conic-background-color-one) 30deg,
    var(--circus-conic-background-color-one) 45deg,
    var(--circus-conic-background-color-two) 45deg,
    var(--circus-conic-background-color-two) 60deg,
    var(--circus-conic-background-color-one) 60deg,
    var(--circus-conic-background-color-one) 75deg,
    var(--circus-conic-background-color-two) 75deg,
    var(--circus-conic-background-color-two) 90deg,
    var(--circus-conic-background-color-one) 90deg,
    var(--circus-conic-background-color-one) 105deg,
    var(--circus-conic-background-color-two) 105deg,
    var(--circus-conic-background-color-two) 120deg,
    var(--circus-conic-background-color-one) 120deg,
    var(--circus-conic-background-color-one) 135deg,
    var(--circus-conic-background-color-two) 135deg,
    var(--circus-conic-background-color-two) 150deg,
    var(--circus-conic-background-color-one) 150deg,
    var(--circus-conic-background-color-one) 165deg,
    var(--circus-conic-background-color-two) 165deg,
    var(--circus-conic-background-color-two) 180deg,
    var(--circus-conic-background-color-one) 180deg,
    var(--circus-conic-background-color-one) 195deg,
    var(--circus-conic-background-color-two) 195deg,
    var(--circus-conic-background-color-two) 210deg,
    var(--circus-conic-background-color-one) 210deg,
    var(--circus-conic-background-color-one) 225deg,
    var(--circus-conic-background-color-two) 225deg,
    var(--circus-conic-background-color-two) 240deg,
    var(--circus-conic-background-color-one) 240deg,
    var(--circus-conic-background-color-one) 255deg,
    var(--circus-conic-background-color-two) 255deg,
    var(--circus-conic-background-color-two) 270deg,
    var(--circus-conic-background-color-one) 270deg,
    var(--circus-conic-background-color-one) 285deg,
    var(--circus-conic-background-color-two) 285deg,
    var(--circus-conic-background-color-two) 300deg,
    var(--circus-conic-background-color-one) 300deg,
    var(--circus-conic-background-color-one) 315deg,
    var(--circus-conic-background-color-two) 315deg,
    var(--circus-conic-background-color-two) 330deg,
    var(--circus-conic-background-color-one) 330deg,
    var(--circus-conic-background-color-one) 345deg,
    var(--circus-conic-background-color-two) 345deg,
    var(--circus-conic-background-color-two) 360deg
  );

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background: radial-gradient(#e2e1ef 40%, #ffeff05d 80%),
    var(--circus-conic-background);
  box-shadow: inset 0 0 40pt 10pt white;
  padding: 2em var(--content-box-side-padding);
  align-items: center;
  font-size: 1.2rem;
  flex: auto;
  width: var(--mind-drop-width);
  max-width: var(--mind-drop-width);
  min-width: var(--mind-drop-width);
  display: grid;
  place-content: center;
  text-align: center;
  scroll-snap-align: center;
}

.mind-drop:only-child {
  margin-left: 0em;
  width: unset;
  max-width: unset;
  min-width: unset;
}

/* ─── Clock ──────────────────────────────────────────────────────────── ✦ ─ */

.mind-drop .clock {
  margin-bottom: 1em;
}

/* ─── Content ────────────────────────────────────────────────────── */

.mind-drop .content * {
  color: #11243b;
  font-family: var(--typeface-dunhil);
  line-height: 1.8;
  font-size: 1.4rem;
  max-width: 30em;
}

.mind-drop .content p {
  margin: 0;
  padding: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  text-wrap: pretty;
}

.mind-drop .content.very-long * {
  font-family: var(--typeface-serif) !important;
  line-height: 1.4;
  font-size: 1.3rem;
}

.mind-drop .content.long * {
  font-family: var(--typeface-serif) !important;
  line-height: 1.4;
  font-size: 1.4rem;
}

/* ─── Day Clock Colors ───────────────────────────────────────────────── ✦ ─ */

.mind-drop .clock-background.day {
  fill: #be9441;
}

.mind-drop .clock-hour-hand.day {
  fill: #ffe1b3;
  stroke: #ffe1b3;
}

.mind-drop .clock-minutes-hand.day {
  fill: #ffe1b3;
  stroke: #ffe1b3;
}

.mind-drop .clock-hour-dot.day {
  fill: #ffe1b3;
}

/* ─── Night Clock Colors ─────────────────────────────────────────────── ✦ ─ */

.mind-drop .clock-background.night {
  fill: #003260;
}

.mind-drop .clock-hour-hand.night {
  fill: #b6dbff;
  stroke: #b6dbff;
}

.mind-drop .clock-minutes-hand.night {
  fill: #b6dbff;
  stroke: #b6dbff;
}

.mind-drop .clock-hour-dot.night {
  fill: #b6dbff;
}

/* ─── Responsiveness ─────────────────────────────────────────────────── ✦ ─ */

@media screen and (max-width: 450pt) {
  .mind-drop .clock,
  .mind-drops-elevator-svg {
    transform: scale(0.85);
  }

  .mind-drops {
    &::scroll-button(left),
    &::scroll-button(right) {
      display: none;
    }
  }
}

/* ─── Dark Mode ──────────────────────────────────────────────────────── ✦ ─ */

@media (prefers-color-scheme: dark) {
  .mind-drop {
    --circus-conic-background-color-one: #385473;
    --circus-conic-background-color-two: #ffeff00a;

    background: radial-gradient(#385473 40%, #38547302 90%),
      var(--circus-conic-background), #385473;
    box-shadow: inset 0 0 2.5em 0.5em #ffffff30;
  }

  .mind-drop .content * {
    color: color(srgb 0.75 0.87 1);
  }

  /* ─── Day Clock Colors ───────────────────────────────────── */

  .mind-drop .clock-background.day {
    fill: #4c301b;
  }

  .mind-drop .clock-hour-hand.day {
    fill: #b79f7b;
    stroke: #b79f7b;
  }

  .mind-drop .clock-minutes-hand.day {
    fill: #b79f7b;
    stroke: #b79f7b;
  }

  .mind-drop .clock-hour-dot.day {
    fill: #b79f7b;
  }

  /* ─── Night Clock Colors ─────────────────────────────────── */

  .mind-drop .clock-background.night {
    fill: #07203e;
  }

  .mind-drop .clock-hour-hand.night {
    fill: #679fe2;
    stroke: #679fe2;
  }

  .mind-drop .clock-minutes-hand.night {
    fill: #679fe2;
    stroke: #679fe2;
  }

  .mind-drop .clock-hour-dot.night {
    fill: #5585be;
  }
}

@media screen and (max-width: 450pt) {
  .mind-drops {
    --mind-drops-spacing: 1em;
  }
}