/* ============================================================
   Intro: ink blossom branch + dealt tiles, the logo writes itself,
   then glides into the hero as the page dissolves in.
   Only shown when the head script adds html.intro-on
   (first visit this session, motion allowed, JS on).
   ============================================================ */
.intro { display: none; }
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .intro {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
}
.intro__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, #FFFDF8 0%, var(--cream, #FEF9EE) 55%, #FBEFF1 100%);
}
.intro__stage { position: absolute; inset: 0; overflow: hidden; }

.intro__branch {
  position: absolute; top: -2vmin; left: -5vmin;
  width: min(94vw, 640px); height: auto;
}
.intro__tiles {
  position: absolute; right: -3vmin; bottom: 4vmin;
  width: min(68vw, 400px); height: auto;
}
.intro__ink { fill: none; stroke: #3B3530; stroke-linecap: round; stroke-linejoin: round; }

.intro__logo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.intro__logo-wrap { will-change: transform; }
.intro__logo-wrap svg {
  display: block;
  width: min(62vw, 340px); height: auto;
  filter: drop-shadow(0 18px 24px rgba(79, 72, 66, .10));
}

.intro__petal { position: absolute; top: -40px; width: 22px; height: 22px; opacity: 0; }

.intro__skip {
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  font: 500 .82rem/1 var(--font-body, Jost, sans-serif);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft, #5A524C);
  background: rgba(255, 253, 248, .7); border: 1px solid rgba(26, 26, 26, .15);
  border-radius: 99px; padding: 12px 16px; min-height: 44px; cursor: pointer;
}
.intro__skip:focus-visible { outline: 3px solid var(--gold, #C6A053); outline-offset: 2px; }

/* Wide screens: give the branch and tiles more presence */
@media (min-width: 1024px) {
  .intro__branch { width: min(56vw, 900px); }
  .intro__tiles { width: min(34vw, 540px); right: 2vw; bottom: 3vh; }
}