@font-face{
  font-family:"Yapari";
  src:url("assets/fonts/yapari-regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Yapari";
  src:url("assets/fonts/yapari-bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#050505;
  --acid:#a8ff60;
  --white:#fff;
  --muted:#8b8b8b;
  --line:rgba(255,255,255,.09);
  --display:"Yapari", ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--white);
  font-family:"Geist Mono", ui-monospace, monospace;
  padding:20px;
  min-height:100%;
  overflow:hidden;
}
@media (max-width:900px){ body{ overflow:auto; } }

/* ---------- frame ---------- */
.frame{
  position:relative;
  height:calc(100dvh - 40px);
  min-height:640px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--bg);
  perspective:1600px;              /* for TV parallax */
}

/* moving background video */
.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.5;
  filter:saturate(.75) brightness(.6) contrast(1.05);
  transform:scale(1.08);
  animation:bgpan 34s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes bgpan{
  0%{ transform:scale(1.08) translate(0,0); }
  100%{ transform:scale(1.16) translate(-2.5%,-1.5%); }
}
.bg-vignette{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(115% 80% at 74% 44%, rgba(60,60,60,.35) 0%, rgba(5,5,5,0) 52%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

.hero{
  position:relative; z-index:2;
  height:100%;
  padding:clamp(24px,4vw,64px);
}

/* ---------- logo ---------- */
.logo{
  position:absolute; top:clamp(24px,4vw,60px); left:clamp(24px,4vw,64px);
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--white);
}
.logo-mark{
  height:34px; width:auto; display:block;
  filter:drop-shadow(0 0 10px rgba(168,255,96,.5));
  transition:filter .25s ease, transform .25s ease;
}
.logo:hover .logo-mark{
  filter:drop-shadow(0 0 16px rgba(168,255,96,.85));
  transform:translateY(-1px);
}
.logo-word{
  font-family:var(--display);
  font-weight:400; letter-spacing:.14em; font-size:20px;
}

/* ---------- copy ---------- */
.copy{
  position:absolute; top:50%; left:clamp(24px,4vw,64px);
  transform:translateY(-50%);
  max-width:min(48vw,660px);
}
.headline{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px,3.6vw,56px);
  line-height:1.08; letter-spacing:-.005em;
  white-space:nowrap;
}
.headline span{ display:block; }
.sub{
  margin-top:28px; max-width:34em;
  color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(11px,1vw,14px); line-height:1.7;
}
.cta{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Geist Mono",monospace;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; font-weight:600; text-decoration:none;
  padding:16px 26px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease,
             background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .btn-txt{ position:relative; z-index:2; transition:transform .18s ease; }
/* shine sweep */
.btn::before{
  content:""; position:absolute; top:0; left:-120%;
  width:70%; height:100%; z-index:1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before{ left:150%; }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.985); }

.btn-acid{ background:var(--acid); color:#000; box-shadow:0 0 0 rgba(168,255,96,.0); }
.btn-acid:hover{ background:#bcff82; box-shadow:0 10px 30px -6px rgba(168,255,96,.55), 0 0 40px rgba(168,255,96,.35); }
.btn-acid:hover .btn-txt{ transform:scale(1.02); }

.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.28); }
.btn-ghost::before{ background:linear-gradient(100deg, transparent, rgba(168,255,96,.25), transparent); }
.btn-ghost:hover{ border-color:var(--acid); color:var(--acid); box-shadow:0 10px 26px -8px rgba(168,255,96,.4); }

/* ---------- agent slot (right, replaces TV) ---------- */
.agent-slot{
  position:absolute; top:47%; right:clamp(24px,6vw,96px);
  transform:translateY(-50%);
  z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.agent-btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:min(42vw,420px); aspect-ratio:1/1;
  padding:36px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:22px;
  background:
    radial-gradient(120% 120% at 50% 32%, rgba(168,255,96,.05), transparent 60%),
    rgba(10,10,10,.5);
  backdrop-filter:blur(7px);
  color:var(--muted);
  cursor:not-allowed;
  transition:border-color .3s ease, box-shadow .35s ease, background .3s ease;
}
/* default face: lock + label */
.agent-face{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  transition:opacity .28s ease, transform .28s ease;
}
.agent-lock{ color:rgba(255,255,255,.5); transition:color .3s ease, transform .3s ease; }
.agent-txt{
  font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.7vw,21px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--white);
}
/* hover reveal: entry requirement */
.agent-hint{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  opacity:0; transform:scale(.96);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.hint-label{
  text-transform:uppercase; letter-spacing:.24em; font-size:11px; color:var(--muted);
}
.hint-value{
  font-family:var(--display); font-weight:400;
  font-size:clamp(24px,3vw,38px); letter-spacing:.05em; color:var(--white);
  text-transform:uppercase;
}
.hint-value .tok{ color:var(--acid); }

.agent-btn:hover{
  border-color:rgba(168,255,96,.42);
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(168,255,96,.08), transparent 62%),
    rgba(12,14,10,.6);
  box-shadow:0 24px 70px -22px rgba(0,0,0,.85), inset 0 0 44px rgba(168,255,96,.06);
}
.agent-btn:hover .agent-face{ opacity:0; transform:translateY(-8px); }
.agent-btn:hover .agent-hint{ opacity:1; transform:scale(1); }

/* corner brackets on the slot */
.agent-btn .bracket{
  position:absolute; width:24px; height:24px;
  border:2px solid rgba(255,255,255,.28);
  transition:border-color .3s ease;
}
.agent-btn:hover .bracket{ border-color:rgba(168,255,96,.5); }
.agent-btn .bracket.tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.agent-btn .bracket.tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.agent-btn .bracket.bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.agent-btn .bracket.br{ bottom:16px; right:16px; border-left:0; border-top:0; }

/* ---------- powered ---------- */
.powered{
  position:absolute; left:clamp(24px,4vw,64px); bottom:clamp(24px,4vw,56px);
  display:flex; align-items:center; gap:12px; color:var(--muted);
}
.powered-label{ text-transform:uppercase; letter-spacing:.14em; font-size:11px; }
.powered-brand{
  font-family:"Oxanium",sans-serif; font-weight:700;
  letter-spacing:.12em; font-size:16px; color:var(--white);
}

/* ---------- entry ---------- */
.entry{
  position:absolute; right:clamp(24px,4vw,64px); bottom:clamp(24px,4vw,56px);
  border:1px solid var(--line); border-radius:10px;
  padding:14px 20px; background:rgba(10,10,10,.62); backdrop-filter:blur(6px);
  text-align:right; min-width:160px; z-index:6;
}
.powered{ z-index:6; }
.entry-label{ display:block; text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:var(--muted); margin-bottom:6px; }
.entry-value{ font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.04em; text-transform:uppercase; }
.entry-value .tok{ color:var(--acid); }

/* ---------- grain ---------- */
.noise{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:100; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .frame{ height:auto; min-height:0; perspective:none; }
  .hero{ display:flex; flex-direction:column; gap:26px; min-height:100dvh; padding-top:88px; }
  .copy,.agent-slot,.powered,.entry,.logo{ position:static; transform:none; max-width:none; }
  .headline{ white-space:normal; }
  .agent-slot{ order:1; justify-content:center; }
  .agent-btn{ width:min(80vw,340px); }
  .copy{ order:2; } .cta{ order:3; } .powered,.entry{ order:4; }
}
@media (prefers-reduced-motion:reduce){
  .bg-video,.vhs-bar,.vhs-chroma{ animation:none; }
}