/* GENERATED FILE - DO NOT EDIT.
   Source: shared/lakbi-moments.css - run `npm run sync:shared` after editing. */

/*
  LakBi moments — the three "please wait" / hello screens.

    1. .page-boot.lbm-loader  web page loader (account, profile, world, explore)
    2. .welcome               public itinerary intro (play.html)
    3. .wb-boot / .boot       "Opening the workbook" book (play.html + app index.html)

  Loaded AFTER styles.css (web) / app.css (app) so these rules win.
  Motion rules: transform + opacity only (one small SVG mask draw on the
  loader route), short intro (≤ 2.4 s) then gentle idle loops, everything
  static under prefers-reduced-motion. No backdrop-filter, no animated
  shadows or blurs. The overlays are removed from the DOM when they close,
  which stops every animation in them.
*/

.lbm-loader,
.welcome,
.wb-boot,
.boot {
  --lbm-forest: #1f3d30;
  --lbm-deep: #13251e;
  --lbm-cream: #fbf6ec;
  --lbm-gold: #e6c98e;
  --lbm-gold-deep: #b8892f;
  --lbm-serif: "Playfair Display", "Fraunces", Georgia, serif;
  --lbm-sans: "DM Sans", "Outfit", system-ui, sans-serif;
}

/* ═════════════════════════ 1. LakBi loader ═════════════════════════ */

.lbm-loader {
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, #24463a 0%, transparent 70%),
    radial-gradient(circle at 16% 82%, rgba(230, 201, 142, 0.12), transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(230, 201, 142, 0.08), transparent 36%),
    var(--lbm-deep);
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, var(--safe-bot, env(safe-area-inset-bottom, 0px)));
}

/* The old glow was a blurred layer that scaled forever — keep it soft, no filter. */
.lbm-loader .page-boot-glow {
  width: min(26rem, 88vw);
  height: min(26rem, 88vw);
  filter: none;
  background: radial-gradient(circle, rgba(230, 201, 142, 0.2) 0%, rgba(230, 201, 142, 0.06) 42%, transparent 68%);
}

.lbm-loader .page-boot-stage {
  gap: 0.3rem;
}

.lbm-scene {
  position: relative;
  width: min(17rem, 84vw);
  aspect-ratio: 320 / 260;
  margin-bottom: 0.2rem;
}

.lbm-loader .lbm-scene .page-boot-face {
  position: absolute;
  left: 20%;
  top: 2%;
  width: 60%;
  height: auto;
  z-index: 2;
  filter: none;
  transform-origin: 50% 90%;
  animation: lbm-hop 2.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

/* Soft shadow under LakBi that squashes as it hops. */
.lbm-shadow {
  position: absolute;
  left: 34%;
  top: 76%;
  width: 32%;
  height: 7%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 12, 9, 0.5), transparent);
  animation: lbm-shadow 2.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

/* Dashed travel route that draws itself under LakBi. */
.lbm-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}

.lbm-route-line {
  fill: none;
  stroke: var(--lbm-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1.4 2.6;
  opacity: 0.85;
}

.lbm-route-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: lbm-route-draw 6s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

/* Map pins that pop as the route reaches them (tip sits on the route). */
.lbm-pin {
  position: absolute;
  z-index: 3;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: -0.95rem;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, var(--lbm-gold) 0%, var(--lbm-gold-deep) 100%);
  transform-origin: 0 100%;
  transform: rotate(-45deg) scale(0);
  animation: lbm-pin-pop 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.lbm-pin::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--lbm-deep);
}

.lbm-pin--1 {
  left: 4%;
  top: 83%;
  animation-delay: 0.15s;
}

.lbm-pin--2 {
  left: 52%;
  top: 86%;
  animation-delay: 1.05s;
}

.lbm-pin--3 {
  left: 95%;
  top: 84%;
  animation-delay: 2.05s;
}

/* Paper plane looping around LakBi — X and Y move separately to draw an ellipse. */
.lbm-orbit {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 4;
  width: 0;
  height: 0;
  animation: lbm-orbit-x 2.3s ease-in-out infinite alternate;
}

.lbm-orbit-y {
  display: block;
  animation: lbm-orbit-y 2.3s ease-in-out -1.15s infinite alternate;
}

.lbm-plane {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin: -0.675rem 0 0 -0.675rem;
  color: var(--lbm-cream);
  animation: lbm-plane-turn 4.6s linear infinite;
}

.lbm-plane svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lbm-loader .page-boot-name {
  margin: 0.1rem 0 0;
  font-family: var(--lbm-serif);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--lbm-cream);
}

.lbm-loader .page-boot-name em {
  color: var(--lbm-gold);
  font-weight: 400;
}

.lbm-loader .page-boot-wait {
  font-family: var(--lbm-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(251, 246, 236, 0.78);
}

/* Five rotating status lines, 2.4 s each. (display: the pages' inline
   pre-CSS style hides lines 2+; this file loads later and shows them.) */
.lbm-loader .page-boot-wait span {
  display: block;
  animation: lbm-line 12s ease-in-out infinite;
}
.lbm-loader .page-boot-wait span:nth-child(1) { animation-delay: 0s; }
.lbm-loader .page-boot-wait span:nth-child(2) { animation-delay: 2.4s; }
.lbm-loader .page-boot-wait span:nth-child(3) { animation-delay: 4.8s; }
.lbm-loader .page-boot-wait span:nth-child(4) { animation-delay: 7.2s; }
.lbm-loader .page-boot-wait span:nth-child(5) { animation-delay: 9.6s; }

/* A page with a single line keeps it on screen. */
.lbm-loader .page-boot-wait span:only-child {
  position: static;
  opacity: 1;
  transform: none;
  animation: none;
}

/* Stop everything once the page is ready (the overlay just fades). */
html.is-ready .lbm-loader *,
html.is-ready .lbm-loader *::after {
  animation-play-state: paused;
}

@keyframes lbm-hop {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1, 1); }
  12% { transform: translateY(0) rotate(0deg) scale(1.04, 0.95); }
  45% { transform: translateY(-9%) rotate(2deg) scale(0.98, 1.03); }
  78% { transform: translateY(0) rotate(0deg) scale(1.03, 0.97); }
}

@keyframes lbm-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(0.72); opacity: 0.55; }
}

@keyframes lbm-route-draw {
  0% { stroke-dashoffset: 100; opacity: 1; }
  45%, 84% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes lbm-pin-pop {
  0% { transform: rotate(-45deg) scale(0); opacity: 0; }
  7%, 70% { transform: rotate(-45deg) scale(1); opacity: 1; }
  78%, 100% { transform: rotate(-45deg) scale(0); opacity: 0; }
}

@keyframes lbm-orbit-x {
  from { transform: translateX(-7.4rem); }
  to { transform: translateX(7.4rem); }
}

@keyframes lbm-orbit-y {
  from { transform: translateY(-1.5rem) scale(0.72); opacity: 0.55; }
  to { transform: translateY(1.5rem) scale(1.05); opacity: 1; }
}

/* Faces right while flying right, flips at the turn. */
@keyframes lbm-plane-turn {
  0%, 49.5% { transform: scaleX(1) rotate(-8deg); }
  50%, 100% { transform: scaleX(-1) rotate(-8deg); }
}

@keyframes lbm-line {
  0%, 2% { opacity: 0; transform: translateY(0.4rem); }
  5%, 17% { opacity: 1; transform: translateY(0); }
  20%, 100% { opacity: 0; transform: translateY(-0.3rem); }
}

@media (max-height: 520px) {
  .lbm-scene {
    width: min(12rem, 60vh);
  }
  .lbm-loader .page-boot-name {
    font-size: 1.35rem;
  }
}

@media (min-width: 1200px) {
  .lbm-scene {
    width: 19rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lbm-loader .lbm-scene .page-boot-face,
  .lbm-shadow,
  .lbm-route-mask,
  .lbm-pin,
  .lbm-orbit,
  .lbm-orbit-y,
  .lbm-plane {
    animation: none;
  }
  .lbm-route-mask {
    stroke-dashoffset: 0;
  }
  .lbm-pin {
    transform: rotate(-45deg);
  }
  .lbm-orbit {
    transform: translate(5.2rem, -1.1rem);
  }
  .lbm-loader .page-boot-wait span {
    animation: none;
  }
  .lbm-loader .page-boot-wait span:first-child {
    position: static;
    opacity: 1;
    transform: none;
  }
  .lbm-loader .page-boot-wait span:not(:first-child) {
    display: none;
  }
}

/* ═════════════════════════ 2. Trip intro (welcome) ═════════════════════════ */

.welcome {
  gap: 0;
  padding:
    max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    max(1.5rem, var(--safe-bot, env(safe-area-inset-bottom, 0px))) max(1.25rem, env(safe-area-inset-left));
  font-family: var(--lbm-sans);
  color: var(--lbm-cream);
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, #24463a 0%, transparent 72%),
    linear-gradient(180deg, #1a3329 0%, var(--lbm-forest) 45%, var(--lbm-deep) 100%);
}

/* Trip cover behind everything, dimmed, with a slow Ken Burns drift. */
.welcome-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.welcome-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  animation:
    welcome-cover-in 1.4s ease 0.1s forwards,
    welcome-kenburns 22s ease-in-out 0.1s infinite alternate;
}

.welcome-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 45%, rgba(19, 37, 30, 0.45), rgba(19, 37, 30, 0.88) 100%),
    linear-gradient(180deg, rgba(19, 37, 30, 0.55), rgba(19, 37, 30, 0.35) 40%, rgba(19, 37, 30, 0.92));
}

.welcome:not(.has-cover) .welcome-cover {
  display: none;
}

/* Replace the old firefly dots with a softer sky. */
.welcome-sky::before,
.welcome-sky::after {
  content: none;
}

/* Drifting map pins and paper planes. */
.welcome-drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.welcome-drift i {
  position: absolute;
  bottom: -3rem;
  width: 1.3rem;
  height: 1.3rem;
  background: center / contain no-repeat;
  opacity: 0;
  animation: welcome-drift 18s linear infinite;
}

.welcome-drift i:nth-child(odd) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6c98e' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E");
}

.welcome-drift i:nth-child(even) {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbf6ec' d='M2 11.4 21.6 3l-4 17.6-6.1-4.4-3 3.3-.4-4.8 8.3-8.2-10 6.8z'/%3E%3C/svg%3E");
}

.welcome-drift i:nth-child(1) { left: 8%; animation-duration: 19s; animation-delay: -3s; }
.welcome-drift i:nth-child(2) { left: 22%; animation-duration: 23s; animation-delay: -12s; }
.welcome-drift i:nth-child(3) { left: 44%; animation-duration: 21s; animation-delay: -7s; transform: scale(0.8); }
.welcome-drift i:nth-child(4) { left: 68%; animation-duration: 17s; animation-delay: -1s; }
.welcome-drift i:nth-child(5) { left: 84%; animation-duration: 24s; animation-delay: -15s; }
.welcome-drift i:nth-child(6) { left: 93%; animation-duration: 20s; animation-delay: -9s; }

.welcome-brand {
  gap: 0.5rem;
  margin-bottom: 1.35rem;
  animation: welcome-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.welcome-mark {
  width: min(3.6rem, 18vw);
  padding: 0.3rem;
  border-radius: 0.95rem;
  background: var(--lbm-cream);
}

.welcome-brand-name {
  font-family: var(--lbm-serif);
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
  letter-spacing: 0.01em;
  color: rgba(251, 246, 236, 0.92);
}

/* The title card: a passport stamp that thumps down. */
.welcome-ticket {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  width: min(34rem, 100%);
  padding: 1.7rem clamp(1.1rem, 5vw, 2.4rem) 1.45rem;
  border: 1.5px dashed rgba(230, 201, 142, 0.6);
  border-radius: 1.4rem;
  background: rgba(15, 30, 24, 0.55);
  outline: 1px solid rgba(230, 201, 142, 0.18);
  outline-offset: 5px;
  animation: welcome-stamp 0.7s cubic-bezier(0.2, 1.3, 0.35, 1) 0.35s both;
}

.welcome .welcome-kicker {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.28rem 0.8rem;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  transform: translate(-50%, -55%);
  border-radius: 999px;
  background: var(--lbm-gold);
  color: var(--lbm-deep);
  font-family: var(--lbm-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.welcome .welcome-kicker:empty {
  display: none;
}

.welcome .welcome-title {
  margin: 0;
  font-family: var(--lbm-serif);
  font-weight: 400;
  font-size: clamp(2.05rem, 8.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--lbm-cream);
  animation: none;
}

/* Accent word: gold with a light sweep that passes twice, then rests. */
.welcome .welcome-title em {
  font-style: italic;
  color: var(--lbm-gold);
  background: linear-gradient(100deg, var(--lbm-gold) 0%, var(--lbm-gold) 40%, #fff6dc 50%, var(--lbm-gold) 60%, var(--lbm-gold) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: welcome-shimmer 2.2s ease-in-out 1.1s 2 both;
}

.welcome .welcome-line {
  max-width: 28rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(251, 246, 236, 0.8);
  animation: none;
}

/* Postmark stamped on the card's corner. */
.welcome-postmark {
  position: absolute;
  top: -1.1rem;
  right: -0.6rem;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 2px solid rgba(230, 201, 142, 0.75);
  box-shadow: inset 0 0 0 3px var(--lbm-deep), inset 0 0 0 4px rgba(230, 201, 142, 0.55);
  background: var(--lbm-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6c98e' d='M2 11.4 21.6 3l-4 17.6-6.1-4.4-3 3.3-.4-4.8 8.3-8.2-10 6.8z'/%3E%3C/svg%3E") center / 42% no-repeat;
  opacity: 0;
  transform: rotate(14deg);
  animation: welcome-postmark 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 1s both;
}

/* Primary pill — same button, same job as before. */
.welcome .welcome-play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.7rem;
  min-height: 3rem;
  padding: 0.8rem 1.6rem 0.8rem 1.8rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d9a6 0%, var(--lbm-gold) 55%, #d9b56d 100%);
  color: var(--lbm-deep);
  font-family: var(--lbm-sans);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: 0 10px 26px rgba(4, 12, 9, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: welcome-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both;
  transition: transform 0.18s ease;
}

.welcome .welcome-play::after {
  content: "→";
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.welcome .welcome-play:hover::after,
.welcome .welcome-play:focus-visible::after {
  transform: translateX(0.25rem);
}

.welcome .welcome-play:active {
  transform: scale(0.97);
}

.welcome .welcome-play:focus-visible {
  outline: 2px solid var(--lbm-cream);
  outline-offset: 3px;
}

/* Holding ("Opening the workbook…"): arrow becomes a small travelling dot row. */
.welcome .welcome-play:disabled {
  cursor: progress;
  opacity: 1;
}

.welcome .welcome-play:disabled::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  animation: welcome-dot 0.9s ease-in-out infinite alternate;
}

.welcome .welcome-skip {
  margin-top: 0.6rem;
  padding: 0 1rem;
  font-family: var(--lbm-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(251, 246, 236, 0.6);
  text-decoration: underline;
  text-decoration-color: rgba(251, 246, 236, 0.25);
  text-underline-offset: 0.25em;
  animation: welcome-rise 0.7s ease 1.35s both;
}

.welcome .welcome-skip:hover {
  color: var(--lbm-cream);
}

/* LakBi peeks up from the bottom corner and waves. */
.welcome-lakbi {
  position: absolute;
  right: max(0.4rem, env(safe-area-inset-right));
  bottom: 0;
  width: clamp(5.2rem, 20vw, 8.5rem);
  height: auto;
  pointer-events: none;
  transform: translateY(105%);
  animation:
    welcome-peek 0.9s cubic-bezier(0.25, 1.4, 0.45, 1) 1.5s forwards,
    welcome-wave 2.8s ease-in-out 2.4s infinite;
  transform-origin: 50% 100%;
}

.welcome.is-out * {
  animation-play-state: paused;
}

@keyframes welcome-cover-in {
  to { opacity: 1; }
}

@keyframes welcome-kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.16) translate(-2%, -1.5%); }
}

@keyframes welcome-drift {
  0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); }
  8% { opacity: 0.5; }
  50% { transform: translate(1.6rem, -55vh) rotate(8deg); }
  88% { opacity: 0.45; }
  100% { opacity: 0; transform: translate(-0.8rem, -112vh) rotate(-6deg); }
}

@keyframes welcome-stamp {
  0% { opacity: 0; transform: scale(1.35) rotate(-6deg); }
  55% { opacity: 1; transform: scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(-0.6deg); }
}

@keyframes welcome-postmark {
  0% { opacity: 0; transform: scale(1.8) rotate(-10deg); }
  100% { opacity: 0.95; transform: scale(1) rotate(14deg); }
}

@keyframes welcome-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@keyframes welcome-peek {
  from { transform: translateY(105%); }
  to { transform: translateY(22%); }
}

@keyframes welcome-wave {
  0%, 100% { transform: translateY(22%) rotate(0deg); }
  20% { transform: translateY(20%) rotate(-7deg); }
  40% { transform: translateY(22%) rotate(4deg); }
  60% { transform: translateY(22%) rotate(0deg); }
}

@keyframes welcome-dot {
  from { transform: translateX(-0.2rem); opacity: 0.4; }
  to { transform: translateX(0.3rem); opacity: 1; }
}

/* Short screens (phone landscape): tighten and drop the extras. */
@media (max-height: 560px) {
  .welcome-brand {
    margin-bottom: 0.9rem;
  }
  .welcome-brand .welcome-mark {
    display: none;
  }
  .welcome-ticket {
    padding: 1.2rem 1.4rem 1rem;
    gap: 0.4rem;
  }
  .welcome .welcome-title {
    font-size: clamp(1.6rem, 7vh, 2.4rem);
  }
  .welcome .welcome-play {
    margin-top: 1.1rem;
  }
  .welcome-postmark {
    width: 2.8rem;
    height: 2.8rem;
  }
  .welcome-lakbi {
    width: 4.6rem;
  }
}

@media (max-width: 360px) {
  .welcome-postmark {
    right: -0.3rem;
    width: 3rem;
    height: 3rem;
  }
}

@media (min-width: 1200px) {
  .welcome .welcome-title {
    font-size: 3.9rem;
  }
  .welcome-ticket {
    width: min(40rem, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-cover img {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .welcome-drift {
    display: none;
  }
  .welcome-ticket,
  .welcome .welcome-play,
  .welcome .welcome-skip {
    animation: none;
  }
  .welcome .welcome-title em {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .welcome-postmark {
    animation: none;
    opacity: 0.95;
  }
  .welcome-lakbi {
    animation: none;
    transform: translateY(22%);
  }
  .welcome .welcome-play:disabled::after {
    animation: none;
  }
}

/* ═════════════════════════ 3. Opening the workbook ═════════════════════════ */
/*
  Intro (2.2 s, plays once), then a calm idle loop:
    0.00–0.45  the closed book settles in, facing you
    0.45–0.95  the gold pin lifts off the cover and floats above
    0.90–1.65  the cover swings open on the spine hinge, warm light spills out
    1.25–2.20  three leaves fan across, one after another
    2.20 →     book breathes; one page at a time turns (idle)
*/

.wb-boot .boot-stage,
.boot .boot-stage {
  width: 13rem;
  height: 11rem;
  animation: lbm-book-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Warm light from inside the open book. */
.wb-boot .boot-stage::before,
.boot .boot-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 17rem;
  height: 13rem;
  margin: -6.5rem 0 0 -8.5rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 160, 0.42), rgba(230, 201, 142, 0.14) 55%, transparent);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  animation:
    lbm-light-in 0.9s ease-out 1s forwards,
    lbm-light-idle 3.6s ease-in-out 2.2s infinite;
}

/* The pin that lifts off the cover and settles above the book. */
.wb-boot .boot-stage::after,
.boot .boot-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 2.4rem;
  height: 3.15rem;
  margin: -1.9rem 0 0 -1.2rem;
  background: url("../assets/logo-pin.svg") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  animation:
    lbm-pin-lift 0.75s cubic-bezier(0.3, 1.35, 0.5, 1) 0.45s forwards,
    lbm-pin-float 3.6s ease-in-out 2.2s infinite;
}

.wb-boot .boot-hero,
.boot .boot-hero {
  animation:
    lbm-book-open-pose 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) both,
    lbm-book-breathe 3.6s ease-in-out 2.2s infinite;
}

.wb-boot .boot-cover-mark,
.boot .boot-cover-mark {
  animation: lbm-mark-leave 0.35s ease-in 0.45s forwards;
}

.wb-boot .boot-cover,
.boot .boot-cover {
  animation: lbm-cover-open 0.8s cubic-bezier(0.55, 0.05, 0.3, 1) 0.9s both;
}

.wb-boot .boot-base,
.boot .boot-base {
  animation: lbm-inside-show 0.25s linear 0.95s both;
}

/* Leaves: fan across during the intro, then take turns in the idle loop. */
.wb-boot .boot-page,
.boot .boot-page {
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1);
}

.wb-boot .boot-page-3,
.boot .boot-page-3 {
  animation: lbm-leaf-fan-3 0.8s cubic-bezier(0.45, 0.05, 0.3, 1) 1.25s both;
}

.wb-boot .boot-page-2,
.boot .boot-page-2 {
  animation:
    lbm-leaf-fan-2 0.8s cubic-bezier(0.45, 0.05, 0.3, 1) 1.38s both;
}

.wb-boot .boot-page-1,
.boot .boot-page-1 {
  animation:
    lbm-leaf-fan-1 0.8s cubic-bezier(0.45, 0.05, 0.3, 1) 1.5s both,
    lbm-leaf-idle 3.6s ease-in-out 2.4s infinite;
}

.wb-boot .boot-page::after,
.boot .boot-page::after {
  animation: lbm-leaf-sheen 0.8s ease 1.3s both;
}

/* A turned leaf shows its blank back, not mirrored writing: the sheet's
   content hides as the leaf passes edge-on (same timing as its leaf). */
.wb-boot .boot-page-3 .boot-sheet,
.boot .boot-page-3 .boot-sheet {
  animation: lbm-sheet-turn 0.8s linear 1.25s both;
}

.wb-boot .boot-page-2 .boot-sheet,
.boot .boot-page-2 .boot-sheet {
  animation:
    lbm-sheet-turn 0.8s linear 1.38s both;
}

.wb-boot .boot-page-1 .boot-sheet,
.boot .boot-page-1 .boot-sheet {
  animation:
    lbm-sheet-turn 0.8s linear 1.5s both;
}

/* Real pages: square on the spine side, gently rounded outside (they read as rounded cards). */
.wb-boot .boot-base,
.boot .boot-base,
.wb-boot .boot-page,
.boot .boot-page {
  border-radius: 0.15rem 0.6rem 0.6rem 0.15rem;
}

/* The right page lies on top of the page block, level with the leaves on the left (it sat at the
   back of the book: smaller, framed in green, not lined up with the left side). */
.wb-boot .boot-base,
.boot .boot-base {
  transform: translateZ(calc(var(--bd) / 2 - 0.62rem));
}

@keyframes lbm-sheet-turn {
  0%, 44% { opacity: 1; }
  48%, 100% { opacity: 0; }
}


.wb-boot .boot-brand,
.boot .boot-brand {
  font-family: var(--lbm-serif);
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0;
  color: var(--lbm-cream);
  animation: boot-fade 0.7s ease 0.5s both;
}

.wb-boot .boot-wait,
.boot .boot-wait {
  font-family: var(--lbm-sans);
  font-weight: 500;
  color: rgba(230, 201, 142, 0.92);
  animation: boot-fade 0.7s ease 0.75s both;
}

@keyframes lbm-book-in {
  from { opacity: 0; transform: translateY(0.8rem) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* Closed and facing you (fore-edge showing) → opened flat-ish, shifted so the spread is centred. */
@keyframes lbm-book-open-pose {
  0%, 55% {
    transform: perspective(1000px) translateX(0) rotateX(8deg) rotateY(-24deg);
  }
  100% {
    transform: perspective(1000px) translateX(3.3rem) rotateX(16deg) rotateY(-6deg);
  }
}

@keyframes lbm-book-breathe {
  0%, 100% { transform: perspective(1000px) translateX(3.3rem) translateY(0) rotateX(16deg) rotateY(-6deg); }
  50% { transform: perspective(1000px) translateX(3.3rem) translateY(-0.25rem) rotateX(17deg) rotateY(-5deg); }
}

@keyframes lbm-mark-leave {
  to { opacity: 0; transform: translateY(-0.6rem) scale(1.08); }
}

@keyframes lbm-pin-lift {
  0% { opacity: 0; transform: translate(-0.4rem, 0.2rem) scale(0.9); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, -5.3rem) scale(1); }
}

@keyframes lbm-pin-float {
  0%, 100% { opacity: 1; transform: translate(0, -5.3rem); }
  50% { opacity: 1; transform: translate(0, -5.75rem); }
}

@keyframes lbm-cover-open {
  from { transform: translateZ(calc(var(--bd) / 2)) rotateY(0deg); }
  to { transform: translateZ(calc(var(--bd) / 2)) rotateY(-178deg); }
}

@keyframes lbm-inside-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lbm-leaf-fan-3 {
  0% { opacity: 0; transform: translateZ(var(--leaf-z)) rotateY(0deg); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translateZ(var(--leaf-z)) rotateY(-176deg); }
}

@keyframes lbm-leaf-fan-2 {
  0% { opacity: 0; transform: translateZ(var(--leaf-z)) rotateY(0deg); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translateZ(var(--leaf-z)) rotateY(-174deg); }
}

@keyframes lbm-leaf-fan-1 {
  0% { opacity: 0; transform: translateZ(var(--leaf-z)) rotateY(0deg); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translateZ(var(--leaf-z)) rotateY(-172deg); }
}

/* Idle (owner 2026-10-04): the top leaf on the left lifts a little and settles, like a page
   caught by a breeze. It never comes back over the right page — that showed two texts at once. */
@keyframes lbm-leaf-idle {
  0%, 30%, 100% { transform: translateZ(var(--leaf-z)) rotateY(-172deg); }
  55% { transform: translateZ(var(--leaf-z)) rotateY(-148deg); }
  75% { transform: translateZ(var(--leaf-z)) rotateY(-170deg); }
}

@keyframes lbm-leaf-sheen {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.5; }
}

@keyframes lbm-light-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes lbm-light-idle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.06); }
}

@media (max-width: 360px), (max-height: 560px) {
  .wb-boot .boot-stage,
  .boot .boot-stage {
    zoom: 0.85;
  }
}

@media (min-width: 1200px) and (min-height: 760px) {
  .wb-boot .boot-stage,
  .boot .boot-stage {
    zoom: 1.15;
  }
}

/* Reduced motion: the finished pose — book open, pages fanned, pin above, light on. */
@media (prefers-reduced-motion: reduce) {
  .wb-boot .boot-stage,
  .boot .boot-stage,
  .wb-boot .boot-stage::before,
  .boot .boot-stage::before,
  .wb-boot .boot-stage::after,
  .boot .boot-stage::after,
  .wb-boot .boot-hero,
  .boot .boot-hero,
  .wb-boot .boot-cover-mark,
  .boot .boot-cover-mark,
  .wb-boot .boot-cover,
  .boot .boot-cover,
  .wb-boot .boot-base,
  .boot .boot-base,
  .wb-boot .boot-page,
  .boot .boot-page,
  .wb-boot .boot-page::after,
  .boot .boot-page::after,
  .wb-boot .boot-brand,
  .boot .boot-brand,
  .wb-boot .boot-wait,
  .boot .boot-wait {
    animation: none;
  }
  .wb-boot .boot-stage::before,
  .boot .boot-stage::before {
    opacity: 1;
    transform: none;
  }
  .wb-boot .boot-stage::after,
  .boot .boot-stage::after {
    opacity: 1;
    transform: translate(0, -5.3rem);
  }
  .wb-boot .boot-hero,
  .boot .boot-hero {
    transform: perspective(1000px) translateX(3.3rem) rotateX(16deg) rotateY(-6deg);
  }
  .wb-boot .boot-cover-mark,
  .boot .boot-cover-mark {
    opacity: 0;
  }
  .wb-boot .boot-cover,
  .boot .boot-cover {
    transform: translateZ(calc(var(--bd) / 2)) rotateY(-178deg);
  }
  .wb-boot .boot-base,
  .boot .boot-base {
    opacity: 1;
  }
  .wb-boot .boot-page,
  .boot .boot-page {
    display: block;
    opacity: 1;
    transform: translateZ(var(--leaf-z)) rotateY(-174deg);
  }
  .wb-boot .boot-page .boot-sheet,
  .boot .boot-page .boot-sheet {
    animation: none;
    opacity: 0;
  }
}