@keyframes fadeInUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes popIn { 0% { transform:scale(.5); opacity:0; } 60% { transform:scale(1.12); opacity:1; } 100% { transform:scale(1); } }
@keyframes heartPop { 0% { transform:scale(1); } 30% { transform:scale(1.5) rotate(-8deg); } 55% { transform:scale(.85); } 100% { transform:scale(1); } }
@keyframes toastIn { from { opacity:0; transform:translateY(10px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes growUp { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes growRight { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes drawLine { to { stroke-dashoffset:0; } }
@keyframes spinSlow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }

.page-enter { animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) both; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

.reveal-stagger > * { opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.is-visible > * { opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.06s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.24s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.30s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.36s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.42s}

.stagger-in > * { animation: fadeInUp .5s cubic-bezier(.16,1,.3,1) both; }
.stagger-in > *:nth-child(1){animation-delay:0s}
.stagger-in > *:nth-child(2){animation-delay:.05s}
.stagger-in > *:nth-child(3){animation-delay:.10s}
.stagger-in > *:nth-child(4){animation-delay:.15s}
.stagger-in > *:nth-child(5){animation-delay:.20s}
.stagger-in > *:nth-child(6){animation-delay:.25s}
.stagger-in > *:nth-child(7){animation-delay:.30s}
.stagger-in > *:nth-child(8){animation-delay:.35s}

.heart-pop { animation: heartPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.press-btn { transition:transform .15s ease, box-shadow .25s ease, background-color .25s ease; }
.press-btn:active { transform:scale(.96); }

/* Display typography: a distinctive variable grotesque for headlines,
   keeping Inter for body copy and UI chrome. */
h1, h2, h3 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* ===== Mobile responsiveness retrofit =====
   The demo pages are inline-styled for desktop; this layer adapts them below 760px.
   The page's template engine re-serializes style attributes with spaces after colons/commas,
   so every selector appears in both raw and normalized forms. !important beats inline styles. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  [style*="display:flex"],
  [style*="display: flex"] { flex-wrap: wrap !important; }

  [style*="padding"][style*="80px"] { padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:22px 80px"],
  [style*="padding: 22px 80px"] { padding: 14px 20px !important; row-gap: 10px !important; }
  [style*="gap:32px"],
  [style*="gap: 32px"] { gap: 14px 18px !important; font-size: 13px !important; }

  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  [style*="grid-template-columns:1.4fr repeat(4,1fr)"],
  [style*="grid-template-columns: 1.4fr repeat(4, 1fr)"],
  [style*="grid-template-columns:1.4fr 1.2fr"],
  [style*="grid-template-columns: 1.4fr 1.2fr"],
  [style*="grid-template-columns:1.2fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1.2fr"],
  [style*="grid-template-columns:0.6fr 1.4fr"],
  [style*="grid-template-columns: 0.6fr 1.4fr"],
  [style*="grid-template-columns:1.3fr 0.9fr"],
  [style*="grid-template-columns: 1.3fr 0.9fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns: 240px 1fr"] { grid-template-columns: 1fr !important; }

  [style*="font-size:64px"],
  [style*="font-size: 64px"] { font-size: 36px !important; }
  [style*="font-size:52px"],
  [style*="font-size: 52px"] { font-size: 33px !important; }
  [style*="font-size:48px"],
  [style*="font-size: 48px"] { font-size: 31px !important; }
  [style*="font-size:44px"],
  [style*="font-size: 44px"] { font-size: 29px !important; }
  [style*="font-size:40px"],
  [style*="font-size: 40px"] { font-size: 27px !important; }

  [style*="width:880px"],
  [style*="width: 880px"],
  [style*="width:820px"],
  [style*="width: 820px"],
  [style*="width:760px"],
  [style*="width: 760px"],
  [style*="width:640px"],
  [style*="width: 640px"],
  [style*="width:600px"],
  [style*="width: 600px"],
  [style*="width:480px"],
  [style*="width: 480px"],
  [style*="width:400px"],
  [style*="width: 400px"],
  [style*="width:380px"],
  [style*="width: 380px"],
  [style*="width:360px"],
  [style*="width: 360px"],
  [style*="width:320px"],
  [style*="width: 320px"] { width: 100% !important; max-width: 100% !important; }

  img, video { max-width: 100%; height: auto; }
}