/* Lotse · shared base CSS for all post visuals
 * Each post's visual.html references this file.
 * Open any visual.html in a browser, then screen-record the viewport.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800;12..96,900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --brand:      #2f5d44;
  --brand-dark: #1e3528;
  --brand-deep: #0c1612;
  --brand-light:#87b596;
  --brand-mint: #c7e7d3;
  --ink:        #0f172a;
  --paper:      #f4f3ef;
  --hot:        #ff5722;
  --ease:       cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; overflow: hidden; height: 100vh; width: 100vw; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the stage holds the actual post visual at its native aspect ratio.
 * it scales to fill the viewport while preserving aspect ratio. */
.stage {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  color: #fff;
}

/* aspect-ratio sized variants */
.stage.landscape { aspect-ratio: 1.91 / 1; }
.stage.square    { aspect-ratio: 1 / 1; }
.stage.vertical  { aspect-ratio: 9 / 16; }

/* size to fit viewport */
.stage.landscape { width: min(100vw, calc(100vh * 1.91)); height: auto; }
.stage.square    { width: min(100vw, 100vh); height: auto; }
.stage.vertical  { height: 100vh; width: auto; }

/* deep forest backdrop */
.bg-deep {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 25%, #1e3528 0%, #0c1612 65%, #060c08 100%);
}
.bg-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle 1px at 12% 24%, rgba(255,255,255,.45), transparent 80%),
    radial-gradient(circle 1px at 78% 18%, rgba(255,255,255,.4), transparent 80%),
    radial-gradient(circle 0.8px at 32% 65%, rgba(255,255,255,.28), transparent 80%),
    radial-gradient(circle 1px at 88% 72%, rgba(255,255,255,.34), transparent 80%),
    radial-gradient(circle 0.8px at 56% 14%, rgba(255,255,255,.3), transparent 80%),
    radial-gradient(circle 1px at 44% 38%, rgba(255,255,255,.32), transparent 80%),
    radial-gradient(circle 0.8px at 22% 80%, rgba(255,255,255,.36), transparent 80%);
  animation: bg-twinkle 5s ease-in-out infinite;
}
@keyframes bg-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* wordmark + pip · locked brand */
.wm-pip { position: relative; display: inline-block; padding-right: 0.22em; }
.wm-pip::after {
  content: ""; position: absolute;
  top: 0.04em; right: 0;
  width: 0.16em; height: 0.16em;
  border-radius: 50%;
  background: var(--brand-light);
}

/* shared keyframes */
@keyframes word-rise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pip-pulse-anim {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}
@keyframes count-up {
  0%   { opacity: 0; transform: translateY(20px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}


}