/**
 * FamilyBoard presentation layer.
 *
 * Loaded after the companion bundle, so it refines the shipped design rather
 * than replacing it. Two jobs:
 *
 *  1. A real display typeface. The bundle asks for `Georgia, serif` on every
 *     display heading. Georgia is a 1996 system font — it is absent on most
 *     Android and many Linux devices, where the headline silently drops to a
 *     generic serif. Fraunces now ships inside the companion bundle and
 *     matches the warm, soft brand far better.
 *
 *  2. Motion. The shipped page is entirely static. Everything below is
 *     entrance and hover only — no looping animation, nothing that moves while
 *     someone is reading, and all of it disabled under reduced-motion.
 */

/* The display typeface now ships inside the companion bundle (Fraunces,
   applied in src/style.css). Only motion and focus styling remain here. */

/* ── motion ────────────────────────────────────────────────────────── */

/* Transform only, deliberately. An opacity keyframe leaves the element
   invisible for as long as the animation fails to progress — a throttled
   background tab then renders a blank hero. A transform that never runs
   simply leaves the element 14px from where it started. */
@keyframes fb-rise {
  from { transform: translate3d(0, 14px, 0); }
  to   { transform: none; }
}

/* Landing entrance, staggered so the eye lands on the headline first.
   No fill mode: `backwards`/`both` would leave the elements at
   opacity 0 until the animation runs, so a throttled background tab or any
   blocked animation renders a blank page. Default state stays visible and the
   animation only plays over the top. */
.welcome .fb-auth-eyebrow,
.welcome > p:first-of-type,
.welcome h1,
.welcome p,
.welcome a,
.welcome button {
  animation: fb-rise 0.62s cubic-bezier(0.22, 0.68, 0.3, 1);
}

/* Cards and panels arriving on the dashboard. */
.moment-card,
.pro-card,
.note-banner,
.photo-intro,
.family-profile {
  animation: fb-rise 0.5s cubic-bezier(0.22, 0.68, 0.3, 1);
}

/* ── interaction ───────────────────────────────────────────────────── */

/* Buttons and links gain a little lift and depth on hover. The bundle has
   no transitions at all, so this is what makes it feel responsive. */
a, button {
  transition:
    transform 0.18s cubic-bezier(0.22, 0.68, 0.3, 1),
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}
a:hover, button:hover { transform: translateY(-1px); }
a:active, button:active { transform: translateY(0); transition-duration: 0.06s; }

/* Cards lift a touch more, with a soft shadow in the brand's green. */
.moment-card,
.pro-card,
.photo-intro,
.family-profile {
  transition:
    transform 0.22s cubic-bezier(0.22, 0.68, 0.3, 1),
    box-shadow 0.22s ease;
}
.moment-card:hover,
.pro-card:hover,
.photo-intro:hover,
.family-profile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(23, 40, 43, 0.10);
}

/* A visible, on-brand focus ring — important for keyboard and TV-adjacent use. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── respect the user's preference ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .welcome .fb-auth-eyebrow,
  .welcome > p:first-of-type,
  .welcome h1,
  .welcome p,
  .welcome a,
  .welcome button,
  .moment-card,
  .pro-card,
  .note-banner,
  .photo-intro,
  .family-profile {
    animation: none !important;
  }
  a, button,
  .moment-card, .pro-card, .photo-intro, .family-profile {
    transition: none !important;
  }
  a:hover, button:hover,
  .moment-card:hover, .pro-card:hover,
  .photo-intro:hover, .family-profile:hover {
    transform: none !important;
  }
}