/* ============================================================
   REELTIME — shared design tokens & components
   Black / lime-green, Apple-glass, Helvetica display + mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* surfaces */
  --bg:        #070707;
  --bg-1:      #0c0c0c;
  --bg-2:      #111111;

  /* ink */
  --ink:       #f1eee4;            /* cream headline */
  --ink-body:  rgba(241,238,228,.74);
  --ink-dim:   rgba(241,238,228,.50);
  --ink-mute:  rgba(241,238,228,.34);

  /* lime */
  --lime:      #c8f534;
  --lime-2:    #d9ff63;
  --lime-deep: #9bc315;
  --lime-glow: rgba(200,245,52,.35);

  /* lines / glass */
  --line:      rgba(241,238,228,.10);
  --line-2:    rgba(241,238,228,.16);
  --glass:     rgba(255,255,255,.045);
  --glass-2:   rgba(255,255,255,.07);
  --glass-brd: rgba(255,255,255,.10);

  /* type */
  --display: "Helvetica Neue", Helvetica, "Arial", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1320px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--lime); color:#070707; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:32px; }
@media (max-width:640px){ .wrap{ padding-inline:20px; } }

/* ---- mono label ---- */
.mono{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.mono--lime{ color:var(--lime); }

/* lime dot accent (the reference "period") */
.dot{
  display:inline-block;
  width:.62em; height:.62em;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 24px var(--lime-glow);
  vertical-align:baseline;
}
.dot--pulse{ animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--lime-glow); }
  50%{ box-shadow:0 0 0 10px rgba(200,245,52,0); }
}

/* ---- glass ---- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--glass-brd);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 40px 90px -40px rgba(0,0,0,.9);
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
  padding:15px 26px;
  border-radius:100px;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--lime{
  background:var(--lime);
  color:#070707;
  box-shadow:0 0 0 0 var(--lime-glow), 0 18px 40px -16px var(--lime-glow);
}
.btn--lime:hover{
  background:var(--lime-2);
  transform:translateY(-2px);
  box-shadow:0 0 36px -2px var(--lime-glow), 0 22px 50px -18px var(--lime-glow);
}
.btn--ghost{
  background:var(--glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
  color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-2px); }

/* ---- reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0ms); }
.reveal.in{ opacity:1; transform:none; }
.reveal--scale{ transform:translateY(28px) scale(.97); }
.reveal--scale.in{ transform:none; }

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

/* ---- grain / vignette helpers ---- */
.grain::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* brand mark */
.logo__mark{ width:1.35em; height:1.35em; align-self:center; margin-right:.45em; display:inline-block; }