@font-face {
  font-family: DM;
  src: url('/assets/fonts/dm-sans.ttf') format('truetype');
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --welcome-background: #f3f0e4;
  --welcome-paper: #cad183;
  --welcome-ink: #66023c;
  --paper-inside: #f7f0d7;
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--welcome-background);
  color: var(--welcome-ink);
  font: 14px/1.5 DM, Arial, sans-serif;
  overflow-x: clip;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.welcome-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 26px 24px;
  overflow: clip;
}

.welcome-card {
  --spread-scale: .88;
  position: relative;
  z-index: 1;
  width: min(352px, 100%);
  width: min(352px, 100%, max(216px, 62svh));
  perspective: 1600px;
}

/* The line is the moving element. The stems, blooms, and card keep their
   positions while ink traces each connected curl and flows onward. */
.welcome-garden {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  color: var(--welcome-ink);
  pointer-events: none;
}

.garden-drawing {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

.garden-drawing--mobile { visibility: hidden; }
/* Colored ink follows the existing flowing stems and botanical drawings. */
.garden-ribbon[data-ribbon="0"] { --garden-color: #9955bb; }
.garden-ribbon[data-ribbon="1"] { --garden-color: #0055a4; }
.garden-ribbon[data-ribbon="2"] { --garden-color: #d46b9a; }
.garden-connected-bloom[data-flower="orchid"] { --garden-color: #9955bb; }
.garden-connected-bloom[data-flower="anthurium"] { --garden-color: #d46b9a; }
.garden-connected-bloom[data-flower="cosmos"] { --garden-color: #8c9eff; }
.garden-ink { stroke: var(--garden-color, currentColor); stroke-dasharray: 1 1.1; stroke-dashoffset: 0; }
.garden-ink--detail { --ink-opacity: .64; stroke-width: .85; opacity: var(--ink-opacity); }

@media (prefers-reduced-motion: no-preference) {
  .has-welcome-motion .garden-ink {
    animation: garden-ink 20s linear var(--ink-delay) infinite both;
  }
  .has-welcome-motion .garden-ink--bloom { animation-name: garden-ink-bloom; }
  .has-welcome-motion .garden-ink--detail { animation-name: garden-ink-detail; }
}

/* Positive ink travels start-to-end. Negative offset clears behind the pen
   in the same direction; the invisible seam never reverses the drawing. */
@keyframes garden-ink {
  0% { stroke-dashoffset: 1.05; opacity: 0; }
  1% { opacity: var(--ink-opacity, 1); }
  20%, 58% { stroke-dashoffset: 0; opacity: var(--ink-opacity, 1); }
  95%, 100% { stroke-dashoffset: -1.05; opacity: 0; }
}

@keyframes garden-ink-bloom {
  0% { stroke-dashoffset: 1.05; opacity: 0; }
  1% { opacity: var(--ink-opacity, 1); }
  13%, 58% { stroke-dashoffset: 0; opacity: var(--ink-opacity, 1); }
  93%, 100% { stroke-dashoffset: -1.05; opacity: 0; }
}

@keyframes garden-ink-detail {
  0% { stroke-dashoffset: 1.05; opacity: 0; }
  1% { opacity: var(--ink-opacity, 1); }
  10%, 55% { stroke-dashoffset: 0; opacity: var(--ink-opacity, 1); }
  90%, 100% { stroke-dashoffset: -1.05; opacity: 0; }
}

.is-motion-paused .garden-ink,
.is-motion-suspended .garden-ink { animation-play-state: paused; }

.welcome-motion {
  position: fixed;
  z-index: 2;
  right: 16px;
  bottom: max(10px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 24px;
  background: var(--welcome-background);
  color: var(--welcome-ink);
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.welcome-motion:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 650px) {
  .garden-drawing--desktop { visibility: hidden; }
  .garden-drawing--mobile { visibility: visible; }
  .welcome-motion { right: 8px; }
}

.welcome-book {
  position: relative;
  z-index: 1;
  display: grid;
  aspect-ratio: 3 / 4;
  transform: rotate(-2deg);
  transform-style: preserve-3d;
  transition: transform 660ms cubic-bezier(.22,.74,.26,1);
}

.welcome-inside,
.welcome-cover,
.welcome-face {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.welcome-inside {
  display: grid;
  padding: clamp(10px, 3vw, 17px);
  background: var(--paper-inside);
  border: 1px solid #66023c22;
  box-shadow: 2px 9px 20px #3a431c25;
}

.welcome-inside img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 44%;
}

.welcome-cover {
  display: grid;
  transform: rotateY(0deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 660ms cubic-bezier(.22,.74,.26,1);
}

.welcome-face {
  position: relative;
  border: 1px solid #66023c26;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.welcome-front {
  display: grid;
  grid-template-rows: minmax(0, 1.26fr) minmax(0, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  padding: 7% 11% 6%;
  background: var(--welcome-paper);
  box-shadow: 6px 14px 24px #3a431c2e;
  transform: translateZ(.5px);
}

.welcome-face::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 18px solid transparent;
  border-image: url('/assets/crochet-border-welcome-red.svg') 48 / 18px / 0 round;
  pointer-events: none;
}

.welcome-brand {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.welcome-brand svg,
.orchid-drawing,
.orchid-tilt {
  display: block;
  width: 100%;
  height: 100%;
}

.welcome-orchid-art {
  width: 84%;
  height: 100%;
  min-height: 0;
}

.orchid-vein { stroke-width: 1.05; opacity: .63; }

.enter-link {
  display: grid;
  place-items: center;
  width: min(76%, 182px);
  min-height: 44px;
  color: inherit;
}

.enter-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.enter-lettering {
  display: block;
  width: 100%;
  transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .enter-link:hover .enter-lettering { transform: rotate(2deg) translateY(-2px); }
}

.welcome-location {
  margin: 0;
  font-size: 12px;
  text-align: center;
}

.welcome-back {
  display: grid;
  place-items: center;
  background: var(--paper-inside);
  box-shadow: inset 8px 0 24px #675b391e;
  transform: rotateY(180deg) translateZ(.5px);
}

.welcome-back .welcome-orchid-art {
  width: 55%;
  height: auto;
  color: #7f3d4b;
}

.is-opening .welcome-book {
  transform: translateX(calc(50% * var(--spread-scale))) scale(var(--spread-scale));
}

.is-opening .welcome-cover { transform: rotateY(-180deg); }

@media (max-width: 700px) {
  .welcome-card { --spread-scale: .62; }
}

@media (max-width: 500px) {
  .welcome-card { --spread-scale: .51; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-book,
  .welcome-cover,
  .enter-lettering { transition: none; }
  .enter-link:hover .enter-lettering { transform: none; }
}