/* ── Intro animation (welcome page) ───────────────────────────────────────────
   Driven by public/js/intro.js. Plays when "Open One Home Deck" is clicked. */

.intro { display: none; }
.intro.is-playing {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  background: var(--bg);
  cursor: pointer;
  animation: intro-in 0.25s ease-out;
}
@keyframes intro-in { from { opacity: 0; } }
.intro-open, .intro-open body { overflow: hidden; }

.intro__logo { position: relative; width: min(92vw, 780px, calc((100dvh - 140px) * 2.2)); aspect-ratio: 924 / 420; } /* fits short screens too */
.intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__letter { opacity: 0; }

/* "care" / "deck" card: sits exactly over the logo's "care" */
.intro__flip { position: absolute; left: 68.07%; top: 53.57%; width: 31.39%; height: 32.14%; perspective: 700px; }
.intro__flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.intro__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.intro__face svg { width: 100%; height: 100%; overflow: visible; }
.intro__face--back { transform: rotateX(180deg); }

.intro__skip {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.intro__skip:hover { color: var(--ink); border-color: var(--teal-light); }

@media (prefers-reduced-motion: reduce) { .intro.is-playing { display: none; } }