/* ==========================================================================
   Mycelia Birth Co. — loading screen
   Layered ink illustration over paper. The scene (mycelium, ferns, moss) and
   the snail live in two separate multiply layers so the snail can crawl a
   little without the artwork being redrawn or deformed.
   ========================================================================== */

:root {
  --ls-paper:        #F2E1D1;
  --ls-paper-centre: #F7EADD;
  --ls-wordmark:     #2E3821;
  --ls-headline:     #4A3526;
  --ls-subtext:      #5B4735;
  --ls-gold:         #9C7F5C;
  --ls-spore:        #8A7052;
}

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */

/* The screen waits in the wings. It only ever becomes visible if the page is
   still loading after a beat — a fast load never shows it at all, so a refresh
   or a hop back to Home doesn't flash it. */
.ls {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin 5vw;
  background: var(--ls-paper);
  background: radial-gradient(120% 90% at 50% 42%,
              var(--ls-paper-centre) 0%, var(--ls-paper) 78%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}

.ls.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

.ls.is-done { opacity: 0; }

.ls.is-hidden { display: none; }

html.ls-active,
html.ls-active body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Stack
   -------------------------------------------------------------------------- */

.ls-inner {
  width: 100%;
  max-width: 900px;
  text-align: center;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  line-height: 1.4;
}

/* Wordmark ---------------------------------------------------------------- */

.ls-wordmark { margin: 0 0 clamp(1.6rem, 4vmin, 3rem); }

.ls-name {
  display: block;
  color: var(--ls-wordmark);
  font-size: clamp(1.9rem, 5.4vmin, 3.4rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1.1;
}

.ls-sub {
  display: block;
  margin-top: .55em;
  color: var(--ls-wordmark);
  font-size: clamp(.72rem, 1.75vmin, 1.05rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
}

.ls-mark {
  display: block;
  width: clamp(96px, 13.4vmin, 172px);
  height: auto;
  margin: .5em auto 0;
  mix-blend-mode: multiply;
}

/* Illustration ------------------------------------------------------------ */

.ls-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1296 / 472;
  margin: 0 auto clamp(1.4rem, 3.4vmin, 2.8rem);
}

.ls-scene,
.ls-snail {
  position: absolute;
  display: block;
  mix-blend-mode: multiply;
  -webkit-user-select: none;
  user-select: none;
}

.ls-scene {
  left: 0;
  top: 13.559%;
  width: 100%;
  height: 86.441%;
}

/* The crawl: a single slow forward drift, never a loop, never a reset. */
.ls-snail {
  left: 30.864%;
  top: 0;
  width: 44.599%;
  height: 90.254%;
}

.ls.is-visible .ls-snail {
  animation: lsCrawl 26s cubic-bezier(.18, .5, .4, 1) forwards;
}

/* The breath: a tiny vertical rise and fall plus a hair of rotation about the
   foot, so the mushroom shell arcs slightly more than the body does. */
.ls-snail-art {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 51.2% 96.7%;
}

.ls.is-visible .ls-snail-art {
  animation: lsBreathe 5.4s ease-in-out infinite;
}

@keyframes lsCrawl {
  from { transform: translateX(0); }
  to   { transform: translateX(3%); }
}

@keyframes lsBreathe {
  0%   { transform: translateY(0)      rotate(0deg); }
  28%  { transform: translateY(-.34%)  rotate(-.26deg); }
  54%  { transform: translateY(-.12%)  rotate(-.06deg); }
  78%  { transform: translateY(.22%)   rotate(.18deg); }
  100% { transform: translateY(0)      rotate(0deg); }
}

/* Settling: when the page is ready the motion eases to rest rather than
   stopping dead, but it never delays the reveal. */
.ls.is-done .ls-snail,
.ls.is-done .ls-snail-art {
  animation: none;
  transition: transform .55s cubic-bezier(.33, 0, .3, 1);
}

/* Spores ------------------------------------------------------------------ */

.ls-spores {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ls-spore {
  position: absolute;
  width: .18%;
  aspect-ratio: 1;
  min-width: 1.4px;
  border-radius: 50%;
  background: var(--ls-spore);
  opacity: 0;
  /* A hand-stippled cluster rather than a single glowing dot. */
  box-shadow:
     3px -5px 0 -.25px var(--ls-spore),
    -4px -8px 0 -.4px  var(--ls-spore),
     6px -12px 0 -.5px var(--ls-spore),
    -2px -15px 0 -.55px var(--ls-spore);
}

.ls.is-visible .ls-spore { animation: lsSpore 23s ease-out infinite; }

/* Drift is sized in vmin so it stays proportional on a phone. */
.ls-spore:nth-child(1) { left: 41%; top: 20%; --ls-dx:  .9vmin; --ls-dy: -4.6vmin; animation-delay: 1.2s;  }
.ls-spore:nth-child(2) { left: 53%; top: 13%; --ls-dx: -1.1vmin; --ls-dy: -4vmin;  animation-delay: 7.1s;  }
.ls-spore:nth-child(3) { left: 46%; top: 10%; --ls-dx:  1.4vmin; --ls-dy: -5.2vmin; animation-delay: 12.6s; }
.ls-spore:nth-child(4) { left: 57%; top: 24%; --ls-dx:  .7vmin; --ls-dy: -4.3vmin; animation-delay: 18.2s; }

@keyframes lsSpore {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.92); }
  7%   { opacity: .42; }
  24%  { opacity: .32; }
  36%  { opacity: 0;   transform: translate(var(--ls-dx), var(--ls-dy)) scale(1); }
  100% { opacity: 0;   transform: translate(var(--ls-dx), var(--ls-dy)) scale(1); }
}

/* Copy -------------------------------------------------------------------- */

.ls-headline {
  margin: 0 0 .55em;
  color: var(--ls-headline);
  font-size: clamp(1.55rem, 5vmin, 3.1rem);
  font-weight: 500;
  letter-spacing: .005em;
}

.ls-note {
  margin: 0;
  color: var(--ls-subtext);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(.85rem, 2.05vmin, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
}

/* Divider ----------------------------------------------------------------- */

.ls-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.1vmin, 11px);
  margin: clamp(1.5rem, 3.6vmin, 2.6rem) 0 clamp(1.1rem, 2.6vmin, 1.9rem);
}

.ls-divider i {
  display: block;
  border-radius: 50%;
  background: var(--ls-gold);
  opacity: .3;
  animation: lsDot 3.6s ease-in-out infinite;
}

.ls-divider i:nth-child(1),
.ls-divider i:nth-child(7) { width: 2.5px; height: 2.5px; }
.ls-divider i:nth-child(2),
.ls-divider i:nth-child(6) { width: 3.5px; height: 3.5px; }
.ls-divider i:nth-child(3),
.ls-divider i:nth-child(5) { width: 4.5px; height: 4.5px; }

.ls-divider i:nth-child(1) { animation-delay: 0s;    }
.ls-divider i:nth-child(2) { animation-delay: .26s;  }
.ls-divider i:nth-child(3) { animation-delay: .52s;  }
.ls-divider i:nth-child(5) { animation-delay: .78s;  }
.ls-divider i:nth-child(6) { animation-delay: 1.04s; }
.ls-divider i:nth-child(7) { animation-delay: 1.3s;  }

.ls-divider img {
  display: block;
  width: clamp(11px, 1.55vmin, 15px);
  height: auto;
  margin: 0 clamp(3px, .6vmin, 6px);
  mix-blend-mode: multiply;
}

@keyframes lsDot {
  0%, 100% { opacity: .26; }
  45%      { opacity: .85; }
}

/* Status ------------------------------------------------------------------ */

.ls-status {
  margin: 0;
  color: var(--ls-headline);
  font-size: clamp(.95rem, 2.15vmin, 1.25rem);
  font-style: italic;
  letter-spacing: .01em;
  opacity: .82;
}

/* --------------------------------------------------------------------------
   Offline notice — shown when the connection drops but the page in front of
   the visitor is still perfectly readable. Deliberately small, and it never
   takes a tap: the full screen is reserved for when they're actually stuck.
   -------------------------------------------------------------------------- */

.ls-offline-note {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: .6em;
  max-width: min(92vw, 30rem);
  padding: .5em 1.15em;
  border: 1px solid rgba(168, 143, 128, .45);
  border-radius: 999px;
  background: rgba(242, 225, 209, .97);
  box-shadow: 0 2px 16px rgba(57, 67, 47, .11);
  color: var(--ls-headline);
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-size: clamp(.95rem, 1.9vmin, 1.1rem);
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}

.ls-offline-note.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .35s ease, transform .35s ease, visibility 0s;
}

.ls-offline-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ls-gold);
  animation: lsWait 2.8s ease-in-out infinite;
}

@keyframes lsWait {
  0%, 100% { opacity: .3; }
  50%      { opacity: .95; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the scene holds perfectly still.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ls.is-visible .ls-snail,
  .ls.is-visible .ls-snail-art { animation: none; }
  .ls-spores { display: none; }
  .ls-offline-note { transform: translate(-50%, 0); transition: opacity .3s ease, visibility 0s; }
  .ls-offline-note.is-visible { transform: translate(-50%, 0); }
  .ls-offline-dot { animation: none; opacity: .7; }
  .ls-divider i { animation: lsDotCalm 4.5s ease-in-out infinite; opacity: .45; }
  .ls-divider i:nth-child(n) { animation-delay: 0s; }

  @keyframes lsDotCalm {
    0%, 100% { opacity: .38; }
    50%      { opacity: .62; }
  }
}

/* --------------------------------------------------------------------------
   Small screens — the illustration stays whole, the copy tightens.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .ls-inner { max-width: 100%; }
  .ls-stage { margin-bottom: 1.4rem; }
}