/* ============================================================
   Lil Friends — landing page styles
   Ported from the Claude Design "Landing Page" canvas: base reset,
   keyframes, the hover behaviours (originally style-hover attrs),
   and the responsive rules. The hero and favorites use a single
   static image inside a hand-drawn silhouette mask (see app.js).
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--ink); }

img { max-width: 100%; }

/* ---- Keyframes ---- */
@keyframes lf-float   { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-12px); } }
@keyframes lf-twinkle { 0%,100% { opacity: .3; transform: scale(.78) rotate(-6deg); } 50% { opacity: 1; transform: scale(1.06) rotate(10deg); } }
@keyframes lf-reveal  { from { transform: translateY(22px); } to { transform: none; } }
@keyframes lf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Hover behaviours (were style-hover="" in the design) ---- */
.lf-badge { transition: transform 170ms cubic-bezier(.2,.7,.3,1); }
.lf-badge:hover { transform: translateY(-3px) rotate(-0.4deg); }
.lf-foot-link { transition: color .15s; }
.lf-foot-link:hover { color: var(--ink); }

/* ---- Reveal-on-scroll rest state ---- */
[data-reveal] { will-change: transform; }

/* ---- Favorites strip: allow manual scroll when motion is reduced ---- */
[data-fav-viewport] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  [data-fav-track] { animation: none !important; transform: none !important; }
  [data-fav-viewport] { overflow-x: auto; }
}

/* ---- Mobile centering (ported from the design's @media max-width:705px) ---- */
@media (max-width: 705px) {
  [data-hero-copy] { text-align: center; justify-self: center; margin-left: auto; margin-right: auto; }
  [data-hero-copy] p { margin-left: auto !important; margin-right: auto !important; }
  /* Bigger hero headline on phones (inline size is set, so !important is required) */
  [data-hero-copy] h1 span { font-size: clamp(64.4px, 16.1vw, 87.4px) !important; }
  [data-hero-badges] { justify-content: center; }
  [data-header-row] { justify-content: center !important; }
  [data-footer-row] { flex-direction: column; align-items: center !important; justify-content: center !important; text-align: center; }
  [data-footer-bottom] { justify-content: center !important; }
}

/* ---- Desktop: keep the hero copy centered but nudge it up 48px.
   Uses top (not transform) because the reveal animation owns transform. ---- */
@media (min-width: 706px) {
  [data-hero-copy] { position: relative; top: -48px; }
  /* Keep the footer tagline on a single line on desktop
     (!important overrides the element's inline max-width:320px) */
  .lf-foot-brand { max-width: none !important; }
}