/* ============================================================
   SelfAssay — shared brand system for feature clips
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --cream:      #F2EFE6;
  --cream-deep: #ECE7DA;
  --cream-rail: #F6F3EB;
  --surface:    #FCFBF8;
  --surface-2:  #FAF8F2;
  --ink:        #26231E;
  --ink-soft:   #4A453D;
  --muted:      #8C8676;
  --faint:      #ABA593;
  --line:       #E5E0D4;
  --line-soft:  #EDE9DE;
  --green:      #51663C;
  --green-deep: #3E5232;
  --green-bg:   #E9ECDE;
  --gold:       #B0934F;
  --gold-bg:    #F0E7D2;
  --amber:      #9C6B3E;
  --amber-bg:   #F1E4D6;
  --red:        #A6452F;
  --red-bg:     #F0DDD6;

  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-card: 16px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(40,36,28,.04), 0 12px 30px -16px rgba(40,36,28,.18);
  --shadow-lift: 0 6px 14px rgba(40,36,28,.10), 0 22px 48px -20px rgba(40,36,28,.30);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--cream);
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ---------- Stage scaffolding (720x720 square, scaled to fit) ---------- */
.viewport{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--cream);
}
.stage{
  position:absolute;
  top:0; left:0;
  width:720px; height:720px;
  transform-origin:top left;
  background:
    radial-gradient(120% 90% at 18% 8%, #F6F3EB 0%, var(--cream) 55%);
  overflow:hidden;
}
.scene{
  position:absolute;
  inset:0;
  padding:46px 46px 0 46px;
  display:flex;
  flex-direction:column;
}

/* ---------- Eyebrow / nav rail hint ---------- */
.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }

/* ---------- Caption block ---------- */
.caption{
  position:absolute;
  left:46px; right:46px; bottom:42px;
  display:flex; flex-direction:column; gap:8px;
}
.caption h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:38px;
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--ink);
}
.caption h2 em{ font-style:italic; }
.caption p{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
  max-width:540px;
}

/* ---------- Generic primitives ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  font-family:var(--sans);
  font-size:14px; color:var(--ink-soft);
  white-space:nowrap;
}
.chip .n{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.mono{ font-family:var(--mono); }
.label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill);
}
.badge.green{ color:var(--green); background:var(--green-bg); }
.badge.gold{ color:var(--gold); background:var(--gold-bg); }
.badge.amber{ color:var(--amber); background:var(--amber-bg); }

/* ---------- Cursor ---------- */
.cursor{
  position:absolute; top:0; left:0;
  width:24px; height:24px;
  z-index:50;
  pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(40,36,28,.28));
  will-change:transform;
}
.cursor svg{ display:block; width:100%; height:100%; }
.cursor.tap::after{
  content:""; position:absolute; left:2px; top:2px;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:2px solid var(--ink);
  opacity:0; transform:scale(.2);
}

/* ---------- Loop crossfade veil (covers the hard reset) ---------- */
.veil{
  position:absolute; inset:0; z-index:60;
  background:var(--cream);
  opacity:0; pointer-events:none;
}

/* Reduced motion: freeze every clip on its fully-populated frame (t≈7.2s of the
   9s loop = the hold), rather than its empty starting frame. Hide the loop veil. */
@media (prefers-reduced-motion: reduce){
  .stage *{ animation-delay:-7.2s !important; animation-play-state:paused !important; }
  .veil{ display:none !important; }
}