@font-face {
  font-family: "Everett Light";
  src: url("fonts/Everett-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b0c07;
  --surface: #14150f;
  --card: #212119;
  --line: #33332e;
  --white: #fffdf7;
  --gray: #a2a297;
  --muted: #5c5c52;
  --lime: #c8f915;

  /* Everett only ships Light + Regular (no bold cut) — headings/time/labels
     use the Light face at its natural weight (400) for display size, body
     copy uses Regular. Never force 700/900 on either: the browser would
     synthesize (faux) bold, which Everett doesn't have a real cut for. */
  --font-display: "Everett Light", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Everett", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 1920px;
  height: 1080px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.frame {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- shared chrome: corner bug, live clock, ticker ---------- */

.logo-bug {
  position: absolute;
  top: 68px;
  left: 56px;
  width: 231px;
  height: 53px;
  color: var(--white);
  z-index: 20;
}

.logo-bug svg { display: block; width: 100%; height: 100%; }

.note-icon { position: relative; display: inline-block; }
.note-icon svg { display: block; width: 100%; height: 100%; }

.live-clock {
  position: absolute;
  top: 60px;
  right: 56px;
  text-align: right;
  z-index: 20;
}

.live-clock .live-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.live-clock .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
}

.live-clock .live-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--lime);
}

.live-clock .clock-time {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--white);
}

.ticker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 58px;
  background: rgba(11, 12, 7, 0.72);
  z-index: 30;
  overflow: hidden;
}

.ticker::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lime);
}

.ticker .tag {
  position: absolute;
  left: 0; top: 3px;
  width: 176px;
  height: 55px;
  background: var(--lime);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ticker .marquee-viewport {
  position: absolute;
  left: 208px; top: 3px;
  width: 1712px; height: 55px;
  overflow: hidden;
}

.ticker .marquee-track {
  position: absolute;
  top: 0; left: 0; height: 55px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll linear infinite;
}

.ticker .marquee-track span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
  padding-right: 64px;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- ambient glow orb (frame 1 pulses, frame 2 drifts) ---------- */

.glow-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--lime);
  filter: blur(130px);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.glow-orb.pulse {
  animation: glow-pulse 5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.08; }
  50%      { transform: scale(1.2); opacity: 0.16; }
}

.glow-orb.drift {
  animation: glow-drift 13s ease-in-out infinite;
}

@keyframes glow-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-36px, 22px); }
  50%  { transform: translate(18px, 44px); }
  75%  { transform: translate(34px, -18px); }
  100% { transform: translate(0, 0); }
}