/* Styles for the entry page in pages/index.html. The build emits these as dist/index.css. */
body {
  background: #fff;
}

@keyframes title-orb-arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes title-copy-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.2, 0.72, 0.12, 1);
}

body.-leaving::after {
  opacity: 1;
}

/* The current chapter's single entrance image behind the title. It stays at
   full opacity; only the feathered title orb applies local legibility blur. */
#chapter-preview {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  transform: scale(1);
  transform-origin: center;
  filter: blur(0) brightness(1);
  opacity: 1;
  transition: transform 1.2s cubic-bezier(0.18, 0.76, 0.18, 1), filter 1.05s ease, opacity 0.95s ease;
}

body.-leaving #chapter-preview {
  transform: scale(1.075);
  filter: blur(9px) brightness(1.35);
  opacity: 0.52;
}

.title-garden {
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.9s ease, filter 0.95s ease, transform 1.1s cubic-bezier(0.18, 0.76, 0.18, 1);
}
.title-garden, .title-garden * {
  pointer-events: none !important;
  user-select: none;
}
.title-garden img {
  position: absolute;
  display: block;
  max-width: none;
  -webkit-user-drag: none;
}

.title-garden.-loading {
  opacity: 0;
  filter: blur(7px);
  transform: scale(1.018);
}

body.-leaving .title-garden {
  opacity: 0;
  filter: blur(10px) brightness(1.25);
  transform: scale(1.04);
}

.title-fence {
  bottom: clamp(-142px, -12vh, -76px);
  z-index: 1;
  width: clamp(390px, 43vw, 650px);
  opacity: 0.78;
  filter: saturate(0.9) contrast(1.04);
}
.title-fence.-left {
  left: -7vw;
}
.title-fence.-middle {
  left: 31vw;
  bottom: clamp(-168px, -15vh, -92px);
}
.title-fence.-right {
  right: -11vw;
  bottom: clamp(-150px, -13vh, -82px);
}

.title-flower-patch {
  right: 2vw;
  bottom: -5vh;
  z-index: 2;
  width: clamp(300px, 34vw, 500px);
  opacity: 0.74;
  filter: saturate(0.88) contrast(1.03);
}

.title-stem {
  bottom: 5vh;
  z-index: 3;
  opacity: 0.88;
  transform-origin: bottom center;
}
.title-stem.-left {
  left: 12vw;
  width: clamp(58px, 6vw, 90px);
  --spd: .72;
  --amp: .75;
  --object-base-transform: rotate(-5deg);
}
.title-stem.-right {
  right: 13vw;
  width: clamp(76px, 8vw, 122px);
  --spd: .58;
  --amp: .6;
  --object-base-transform: rotate(4deg);
}

.title-bloom {
  z-index: 4;
  opacity: 0.9;
  filter: saturate(0.94) contrast(1.04);
}
.title-bloom.-one {
  left: 7vw;
  top: 13vh;
  width: clamp(58px, 6.5vw, 98px);
  --spd: .65;
  --amp: 1.25;
  --object-base-transform: rotate(-12deg);
  animation-delay: -2.6s;
}
.title-bloom.-two {
  right: 8vw;
  top: 14vh;
  width: clamp(66px, 7vw, 108px);
  --spd: .52;
  --amp: 1.45;
  --object-base-transform: rotate(9deg);
  animation-delay: -4.1s;
}
.title-bloom.-three {
  left: 17vw;
  top: 40vh;
  width: clamp(48px, 5vw, 78px);
  --spd: .8;
  --amp: .9;
  --object-base-transform: rotate(15deg);
  animation-delay: -1.4s;
}
.title-bloom.-four {
  right: 17vw;
  top: 43vh;
  width: clamp(52px, 5.5vw, 84px);
  --spd: .7;
  --amp: 1.1;
  --object-base-transform: rotate(-8deg);
  animation-delay: -3.3s;
}

#title {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  color: #111;
  text-align: center;
  transition: opacity 0.78s ease, transform 1.1s cubic-bezier(0.18, 0.76, 0.18, 1), filter 0.92s ease;
}
#title.-leaving {
  opacity: 0;
  transform: scale(0.93);
  filter: blur(12px) brightness(1.3);
}
#title .title-orb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(680px, 100vw - 40px);
  padding: clamp(72px, 10vh, 108px) clamp(28px, 6vw, 70px);
  margin-top: 7vh;
  box-sizing: border-box;
}
#title .title-orb::before {
  content: "";
  position: absolute;
  inset: -32% -26%;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(22px) saturate(0.86) brightness(1.08);
  backdrop-filter: blur(22px) saturate(0.86) brightness(1.08);
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 0%, #000 28%, rgba(0, 0, 0, 0.96) 39%, rgba(0, 0, 0, 0.82) 51%, rgba(0, 0, 0, 0.62) 63%, rgba(0, 0, 0, 0.4) 74%, rgba(0, 0, 0, 0.22) 84%, rgba(0, 0, 0, 0.09) 92%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 0%, #000 28%, rgba(0, 0, 0, 0.96) 39%, rgba(0, 0, 0, 0.82) 51%, rgba(0, 0, 0, 0.62) 63%, rgba(0, 0, 0, 0.4) 74%, rgba(0, 0, 0, 0.22) 84%, rgba(0, 0, 0, 0.09) 92%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: title-orb-arrive 1.6s 0.08s ease-out both;
}
#title .title-orb > * {
  position: relative;
  z-index: 1;
}
#title .title-orb h1 {
  animation: title-copy-arrive 1.16s 0.2s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
#title .title-orb h3 {
  animation: title-copy-arrive 1.06s 0.48s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
#title .title-orb nav > .primary {
  animation: title-copy-arrive 0.96s 0.78s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
#title .title-orb .secondary-actions {
  animation: title-copy-arrive 0.88s 1.02s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
#title .title-orb #home-about {
  animation: title-copy-arrive 0.85s 1.11s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
#title .title-orb #home-settings {
  animation: title-copy-arrive 0.82s 1.2s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
#title.-loading .title-orb::before, #title.-loading .title-orb h1, #title.-loading .title-orb h3, #title.-loading .title-orb nav > .primary, #title.-loading .title-orb .secondary-actions, #title.-loading .title-orb #home-about, #title.-loading .title-orb #home-settings {
  animation-play-state: paused;
}
#title h1 {
  margin: 0 0 14px;
  color: #111;
  text-transform: none;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
#title h1 span {
  display: block;
  white-space: nowrap;
}
#title h3 {
  margin: 0;
  font-weight: 400;
  color: rgba(17, 17, 17, 0.6);
}
#title nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
#title nav a, #title nav button {
  display: inline-block;
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
#title nav a.primary, #title nav button.primary {
  min-width: 220px;
  padding: calc(15px + var(--btn-text-offset)) 38px calc(15px - var(--btn-text-offset));
  box-sizing: border-box;
  border: 1px solid #111;
  border-radius: 999999999px;
  background: #fff;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-align: center;
}
#title nav a.primary:hover, #title nav button.primary:hover {
  background: #111;
  color: #fff;
}
#title nav a.secondary, #title nav button.secondary {
  padding: 3px 7px;
  color: rgba(17, 17, 17, 0.58);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.28);
  text-underline-offset: 3px;
}
#title nav a.secondary:hover, #title nav button.secondary:hover {
  color: #111;
  text-decoration-color: #111;
}
#title nav .secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 24px;
}

@media (max-width: 700px) {
  .title-fence {
    width: 82vw;
    bottom: -72px;
  }
  .title-fence.-left {
    left: -33vw;
  }
  .title-fence.-middle {
    display: none;
  }
  .title-fence.-right {
    right: -35vw;
    bottom: -62px;
  }
  .title-flower-patch {
    right: -24vw;
    bottom: -1vh;
    width: 76vw;
    opacity: 0.62;
  }
  .title-stem.-left {
    left: 5vw;
    bottom: 4vh;
  }
  .title-stem.-right {
    right: 4vw;
    bottom: 3vh;
  }
  .title-bloom.-one {
    left: 2vw;
    top: 9vh;
  }
  .title-bloom.-two {
    right: 1vw;
    top: 12vh;
  }
  .title-bloom.-three {
    left: 4vw;
    top: 43vh;
  }
  .title-bloom.-four {
    right: 3vw;
    top: 48vh;
  }
  #title .title-orb {
    width: calc(100vw - 20px);
    padding: 76px 8px 82px;
    margin-top: 4vh;
  }
  #title .title-orb::before {
    inset: -24% -18%;
    -webkit-backdrop-filter: blur(18px) saturate(0.88) brightness(1.08);
    backdrop-filter: blur(18px) saturate(0.88) brightness(1.08);
  }
  #title h1 {
    font-size: clamp(28px, 9vw, 42px);
  }
  #title nav {
    margin-top: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #title .title-orb::before,
  #title .title-orb h1,
  #title .title-orb h3,
  #title .title-orb nav > .primary,
  #title .title-orb .secondary-actions,
  #title .title-orb #home-about,
  #title .title-orb #home-settings {
    animation-delay: 0s !important;
  }
}
.home-warm {
  position: fixed;
  left: 50%;
  bottom: calc(var(--home-dev-note-h, 40px) + var(--home-debug-h, 0px) + var(--vvb, 0px) + 20px);
  z-index: 3;
  min-width: 140px;
  padding: calc(11px + var(--btn-text-offset)) 26px calc(11px - var(--btn-text-offset));
  border-radius: 999999999px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.home-warm.-in {
  opacity: 1;
}
.home-warm .home-warm-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--warm, 0) * 100%);
  background: #ffff00;
  transition: width 0.5s ease;
}
.home-warm .home-warm-label {
  position: relative;
  z-index: 1;
  font-family: "Hyundai Sans Head", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #222;
}

body.-leaving .home-warm {
  opacity: 0;
}

.home-debug[hidden] {
  display: none;
}

.home-debug {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  background: yellow;
}
.home-debug .home-debug-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-debug button {
  border: 1px solid black;
  background: white;
  font: inherit;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
}
.home-debug button:hover {
  background: black;
  color: white;
}

.home-dev-note {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--home-debug-h, 0px) + var(--vvb, 0px));
  z-index: 8;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom));
  border: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #111;
  background: #ffff00;
  cursor: pointer;
}
.home-dev-note:hover {
  background: #111;
  color: #ffff00;
}
.home-dev-note strong {
  font-weight: 700;
}

#build-stamp {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 3;
  font-size: 11px;
  color: rgba(17, 17, 17, 0.4);
}

/* see the text-box-trim block at the end of shared/base.css */
@supports (text-box-trim: trim-both) {
  #title nav a.primary, #title nav button.primary {
    --btn-text-offset: 0px;
    min-height: calc(1lh + 32px);
    align-content: center;
    text-box: trim-both cap alphabetic;
  }
}