/* Hello Romy — shared style foundation (see docs/ROMY_STYLE_BRIEF.md).
 * Step 1 of the restyle: fonts + motion only. Nothing here targets an
 * existing element, so loading this file changes nothing on screen yet.
 * Colours are NOT defined here: the --{world}-{bg|light|ink|soft|mid|brand}
 * variables come from applyTheme() in romy-theme.js, fed by tenant config.
 */
/* Anton blocks until loaded so headlines never paint in a fallback face and jump;
   Hanken swaps (its fallback is metrically close). */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=block');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Defaults; brand.js overrides these from the tenant's config.fonts. */
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- Motion (exact timings from the brief) ---- */
.rise  { animation: rise .75s cubic-bezier(.2,.8,.2,1) both; }
.pop   { animation: pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.lift  { animation: lift .75s cubic-bezier(.2,.9,.25,1.12) backwards; }
.fade  { animation: fade .5s ease both; }
.grow  { transform-origin: left center; animation: grow 1.3s cubic-bezier(.2,.8,.2,1) both; }
.fill  { transform-origin: center bottom; animation: fillUp 1.5s cubic-bezier(.3,1.35,.5,1) both; }
.enterR { animation: enterR .5s cubic-bezier(.2,.8,.2,1) both; }
.enterL { animation: enterL .5s cubic-bezier(.2,.8,.2,1) both; }

@keyframes rise   { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes pop    { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lift   { from { transform: translateY(90px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fillUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes enterR { from { transform: translateX(120px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes enterL { from { transform: translateX(-120px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .lift, .fade, .grow, .fill, .enterR, .enterL { animation: none; }
}