/* ============================================================
   LENS — design tokens, type, motion
   Reconstructed from "Figbuild 2026" Figma
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

:root{
  /* surfaces */
  --bg-top:#FDF6EF;
  --bg-bot:#FFF9EC;
  --paper:#FDF9ED;

  /* ink */
  --ink:#494643;          /* primary warm charcoal */
  --ink-soft:#515151;
  --brown:#A0755D;        /* accent / buttons */
  --amber:#9F6309;
  --muted:#A2A2A2;
  --muted-2:#C4C4C4;

  /* glass card */
  --card:rgba(255,211,164,0.15);
  --card-ring:inset 0 0 0 1px rgba(255,255,255,0.65);
  --card-shadow:0 0 30px rgba(0,0,0,0.05), 0 8px 15px rgba(0,0,0,0.05);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.45,.05,.25,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; height:100%;
  background:#0b0a09;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}

/* full-viewport stage that letterboxes the device */
#stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, #1b1916 0%, #0b0a09 70%);
}
#scaler{ transform-origin:center center; }

button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }

/* ---------- screen base ---------- */
.screen{
  position:absolute; inset:0;
  width:393px; height:852px;
  background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bot) 100%);
  overflow:hidden;
}

/* ---------- typography helpers ---------- */
.t-display{ font-weight:300; color:var(--ink); letter-spacing:.2px; }
.t-title{ font-weight:400; color:var(--ink); line-height:1.18; }
.t-body{ font-weight:300; color:var(--ink); }
.t-label{ font-weight:300; color:var(--muted); }
.t-mono{ font-variant-numeric:tabular-nums; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}
@keyframes breathe-lg{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}
@keyframes floatA{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }
@keyframes floatB{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-20px) } }
@keyframes floatC{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(8px,-11px) } }
@keyframes floatD{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-7px,-16px) } }

@keyframes spinSlow{ to{ transform:rotate(360deg) } }
@keyframes spinRev{ to{ transform:rotate(-360deg) } }

@keyframes ripple{
  0%{ transform:scale(.7); opacity:.55 }
  70%{ opacity:0 }
  100%{ transform:scale(2.1); opacity:0 }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:translateY(0) }
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{
  0%{ opacity:0; transform:scale(.82) }
  100%{ opacity:1; transform:scale(1) }
}
@keyframes glowPulse{
  0%,100%{ opacity:.5 }
  50%{ opacity:.95 }
}
@keyframes shimmer{
  0%,100%{ transform:scaleY(.35) }
  50%{ transform:scaleY(1) }
}
@keyframes fogDrift{
  0%{ transform:translateX(-4%) scale(1.1); opacity:.0 }
  40%{ opacity:.9 }
  100%{ transform:translateX(4%) scale(1.25); opacity:0 }
}
@keyframes dash{
  to{ stroke-dashoffset:0 }
}

/* entrance helper — VISIBLE by default; motion driven via Web Animations API
   (WAAPI is invisible to html-to-image clones, so captures show the rest state) */
.enter{ }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* hide scrollbars inside scroll areas */
.noscroll::-webkit-scrollbar{ display:none; }
.noscroll{ -ms-overflow-style:none; scrollbar-width:none; }