/* The first visit begins with Mimosa, before the journal is revealed. */
html[data-intro-pending="true"] .site-header,
html[data-intro-pending="true"] #main,
html[data-intro-pending="true"] body > footer,
html[data-intro-pending="true"] .companion-layer {
  visibility: hidden;
}
html[data-intro-pending="true"] body > .skip { visibility: hidden; }

body.intro-active {
  overflow: hidden;
}

body.intro-active .companion-layer {
  visibility: hidden;
}
#main.intro-focus-return:focus { outline: none; }

dialog.mimosa-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 80px 24px 36px;
  border: 0;
  border-radius: 0;
  overflow: auto;
  background: var(--bg, #f9f7ef);
  color: var(--ink, #354b3d);
  overscroll-behavior: contain;
}

dialog.mimosa-intro[open] {
  display: grid;
  align-items: safe center;
  justify-items: center;
}

dialog.mimosa-intro::backdrop {
  background: transparent;
}

.intro-skip {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: transparent;
  color: var(--muted, #687166);
  font: 12px/1.4 'DM Sans', system-ui, sans-serif;
}

.intro-skip:hover {
  border-color: #dce1d0;
  background: #edf0e3;
  color: var(--ink, #354b3d);
}

.intro-skip:focus-visible,
.intro-pet:focus-visible {
  outline: 2px solid var(--green, #435c47);
  outline-offset: 6px;
}

.intro-composition {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: min(100%, 580px);
  min-height: 360px;
  gap: 12px;
}

.intro-wash {
  position: absolute;
  z-index: -1;
  width: min(390px, 100%);
  height: 250px;
  left: 50%;
  top: 15px;
  margin-left: max(-195px, -50%);
  border-radius: 44% 56% 60% 40% / 53% 46% 54% 47%;
  background:
    radial-gradient(ellipse at 29% 51%, #dfe6ce80 0%, #e4ead636 42%, transparent 70%),
    radial-gradient(ellipse at 67% 36%, #ece0c360 0%, #f0e6d02b 43%, transparent 68%),
    radial-gradient(ellipse at 52% 72%, #e4ead966 0%, transparent 62%);
  transform: rotate(-8deg);
  pointer-events: none;
}

.intro-wash::before {
  content: '';
  position: absolute;
  inset: 12% 8% 5% 13%;
  border: 1px solid #95a17c20;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 46% 54% 43% 57% / 45% 57% 43% 55%;
  transform: rotate(9deg);
}

.intro-wash::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  top: 29%;
  right: 14%;
  border-radius: 50%;
  background: #d4bd8d55;
  box-shadow: -244px 86px 0 -2px #a1ad8666, -223px 104px 0 -3px #a1ad8644;
}

.intro-pet {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
  margin: 0 26px 0 0;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.mimosa-intro.is-ready .intro-pet {
  opacity: 1;
  pointer-events: auto;
}

.intro-character.companion-character {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('assets/mimosa-watercolor-sprites-v1.webp');
  background-size: 400% 400%;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: auto;
  pointer-events: none;
  will-change: auto;
}

.mimosa-intro #intro-name {
  position: relative;
  z-index: 1;
  margin: 0 0 0 42px;
  padding: 0;
  font: 400 clamp(64px, 7vw, 84px)/1.05 'Libre Caslon Display', Georgia, serif;
  letter-spacing: -2px;
  color: var(--ink, #354b3d);
}
.mimosa-intro:not(.is-ready) #intro-name,
.mimosa-intro:not(.is-ready) .intro-wash { opacity: 0; }

@media (max-width: 600px) {
  dialog.mimosa-intro {
    padding: 72px 20px 28px;
  }

  .intro-skip {
    right: max(12px, env(safe-area-inset-right));
  }

  .intro-composition {
    min-height: 310px;
    gap: 14px;
  }

  .intro-wash {
    width: min(280px, 100%);
    height: 215px;
    top: 22px;
    margin-left: max(-140px, -50%);
  }

  .intro-wash::after {
    box-shadow: -189px 68px 0 -2px #a1ad8666, -169px 84px 0 -3px #a1ad8644;
  }

  .intro-pet {
    width: 150px;
    height: 150px;
    margin-right: 18px;
  }

  .mimosa-intro #intro-name {
    margin-left: 28px;
    font-size: 64px;
  }
}

@media (max-height: 420px) {
  dialog.mimosa-intro {
    padding-top: 58px;
    padding-bottom: 16px;
  }

  .intro-composition {
    min-height: 190px;
    gap: 4px;
  }

  .intro-pet {
    width: 112px;
    height: 112px;
  }

  .intro-wash {
    width: min(245px, 100%);
    height: 150px;
    top: 0;
    margin-left: max(-122.5px, -50%);
  }

  .mimosa-intro #intro-name {
    font-size: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mimosa-intro,
  .mimosa-intro *,
  .mimosa-intro *::before,
  .mimosa-intro *::after {
    transition: none;
    animation: none;
  }

  .intro-wash,
  .intro-wash::before {
    transform: none;
  }
}

@media print {
  dialog.mimosa-intro {
    display: none !important;
  }

  html[data-intro-pending="true"] .site-header,
  html[data-intro-pending="true"] #main,
  html[data-intro-pending="true"] body > footer,
  html[data-intro-pending="true"] .companion-layer {
    visibility: visible;
  }
  html[data-intro-pending="true"] body > .skip { visibility: visible; }
}