/* ============================================================
   ONCE HUMAN – PRE-LANDER v4  |  style.css
   ============================================================ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --green:   #4dff85;
  --cyan:    #00e5ff;
  --red:     #ff2d2d;
  --bg:      #03080a;
  --glow-g:  rgba(77,255,133,0.45);
  --glow-c:  rgba(0,229,255,0.3);
  --text:    #d8f0e0;
  --muted:   rgba(216,240,224,0.48);
  --border:  rgba(77,255,133,0.2);
  --bar-h:   62px;
  --ease:    cubic-bezier(0.16,1,0.3,1);
}

html,body {
  width:100%; height:100%; overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── BACKGROUND ────────────────────────────────────────────── */
.bg-wrap { position:fixed; inset:0; z-index:0; overflow:hidden; }

#bg-video {
  width:100%; height:100%; object-fit:cover;
  opacity:0.32; filter:saturate(0.45) brightness(0.42);
  transform:scale(1.05);
}
.bg-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(3,8,10,0.97) 0%,
      rgba(3,8,10,0.52) 44%,
      rgba(3,8,10,0.78) 100%),
    linear-gradient(180deg,
      rgba(3,8,10,0.88) 0%,
      transparent 28%,
      transparent 68%,
      rgba(3,8,10,0.96) 100%);
}
.scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 3px
  );
  animation:scanShift 14s linear infinite;
}
@keyframes scanShift { to { background-position:0 300px; } }

/* ── PARTICLES ──────────────────────────────────────────────── */
#particles { position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4.5vw,56px);
  background:rgba(3,8,10,0.72);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid rgba(77,255,133,0.1);
}
.topbar::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--green) 20%, var(--cyan) 80%, transparent 100%);
  animation:barLine 3.5s ease-in-out infinite;
}
@keyframes barLine {
  0%,100%{ opacity:0.35; }
  50%    { opacity:1; filter:brightness(1.4); }
}

/* Logo */
.logo-link { display:flex; align-items:center; text-decoration:none; outline:none; }
.logo-link:focus-visible { outline:2px solid var(--green); outline-offset:4px; border-radius:3px; }

#logo-img {
  height:38px; width:auto; max-width:200px;
  object-fit:contain; display:block;
  /* No filter—show logo exactly as-is */
}

/* ── NAV BUTTON ─────────────────────────────────────────────── */
.btn--nav {
  position:relative; display:inline-flex; align-items:center;
  text-decoration:none; cursor:pointer; outline:none;
  font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  font-size:0.78rem; border:none; border-radius:4px;
  color:#030a03; padding:11px 26px; overflow:hidden;
  transition:transform 0.18s var(--ease);
  isolation:isolate;
}
.btn--nav:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.btn--nav:hover { transform:scale(1.07) translateY(-2px); }
.btn--nav:active { transform:scale(0.95); }

/* Animated fill */
.nav-fill {
  position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
}

/* Spinning outer ring */
.nav-border {
  position:absolute; inset:-3px; z-index:-1; border-radius:6px;
  background:conic-gradient(
    from 0deg,
    var(--green), var(--cyan), var(--green), transparent, transparent
  );
  animation:ringRotate 2.2s linear infinite;
}
@keyframes ringRotate {
  to { transform:rotate(360deg); }
}

/* Glow burst */
.nav-glow {
  position:absolute; inset:-10px; z-index:-2; border-radius:10px;
  background:radial-gradient(ellipse, var(--glow-g) 0%, transparent 72%);
  animation:glowPulse 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse {
  0%,100%{ opacity:0.5; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.18); }
}

.btn-content {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:8px;
}
.live-pip {
  width:7px; height:7px; border-radius:50%;
  background:rgba(3,8,10,0.8);
  animation:pipBlink 1.2s ease-in-out infinite; flex-shrink:0;
}
@keyframes pipBlink {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.25; transform:scale(0.6); }
}
.btn--nav svg { transition:transform 0.2s var(--ease); }
.btn--nav:hover svg { transform:translateX(5px); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.stage {
  position:relative; z-index:10;
  height:100vh; padding-top:var(--bar-h);
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; overflow:hidden;
}

/* ── LEFT COL ───────────────────────────────────────────────── */
.col-left {
  display:flex; flex-direction:column;
  padding:clamp(12px,2.2vh,24px) clamp(22px,3.8vw,52px) clamp(12px,2.2vh,24px) clamp(28px,4.5vw,64px);
  gap:clamp(10px,1.5vh,16px);
  animation:fromLeft 0.9s var(--ease) both;
}
@keyframes fromLeft {
  from { opacity:0; transform:translateX(-26px); }
  to   { opacity:1; transform:translateX(0); }
}

.kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--green); border:1px solid var(--border); border-radius:3px;
  padding:4px 12px; width:fit-content; background:rgba(77,255,133,0.06);
}
.kicker-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green);
  animation:pipBlink 1.8s ease-in-out infinite;
}

.headline {
  display:flex; flex-direction:column;
  font-size:clamp(2rem,4.2vw,3.7rem);
  font-weight:900; line-height:1.03; letter-spacing:-0.025em; gap:0.02em;
}
.hl { display:block; }
.hl-1 { color:var(--text);  animation:slideUp .55s var(--ease) .08s both; }
.hl-2 { color:var(--green); text-shadow:0 0 36px rgba(77,255,133,0.55);
         animation:slideUp .55s var(--ease) .18s both; }
.hl-3 { color:var(--cyan);  font-size:.63em; font-weight:700; letter-spacing:.04em;
         animation:slideUp .55s var(--ease) .28s both; }
@keyframes slideUp {
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Glitch */
.glitch { position:relative; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; inset:0; }
.glitch::before {
  color:var(--cyan);
  clip-path:polygon(0 25%,100% 25%,100% 46%,0 46%);
  animation:gA 6s infinite steps(1); opacity:0;
}
.glitch::after {
  color:var(--red);
  clip-path:polygon(0 57%,100% 57%,100% 74%,0 74%);
  animation:gB 6s infinite steps(1); opacity:0;
}
@keyframes gA {
  0%,84%,89%,100%{opacity:0;transform:none;}
  85%{opacity:1;transform:translateX(-5px) skewX(-4deg);}
  88%{opacity:0;}
}
@keyframes gB {
  0%,85%,90%,100%{opacity:0;transform:none;}
  86%{opacity:1;transform:translateX(5px) skewX(3deg);}
  89%{opacity:0;}
}

.sub {
  font-size:clamp(.77rem,1.38vw,.93rem); color:var(--muted); max-width:420px;
  animation:slideUp .55s var(--ease) .36s both;
}
.sub strong { color:var(--green); font-weight:700; }

.bullets {
  list-style:none; display:flex; flex-direction:column;
  gap:clamp(4px,.8vh,8px);
  animation:slideUp .55s var(--ease) .44s both;
}
.bullet {
  display:flex; align-items:center; gap:10px;
  font-size:clamp(.74rem,1.3vw,.86rem); color:var(--muted);
  padding:6px 12px; border-radius:3px; border-left:2px solid transparent;
  background:rgba(77,255,133,0.04);
  transition:border-color .2s,background .2s,color .2s;
}
.bullet:hover { border-left-color:var(--green); background:rgba(77,255,133,0.09); color:var(--text); }
.bi {
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:rgba(77,255,133,0.1); flex-shrink:0;
}
.bullet strong { color:var(--text); font-weight:700; }

/* ── HERO CTA AREA ──────────────────────────────────────────── */
.cta-area {
  display:flex; flex-direction:column; gap:10px;
  animation:slideUp .55s var(--ease) .54s both;
}

/* ██ HERO BUTTON ██ */
.btn--hero {
  position:relative; display:inline-flex;
  align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer; outline:none; border:none;
  border-radius:5px; overflow:visible;
  font-family:inherit;
  transition:transform .22s var(--ease);
  isolation:isolate;
}
.btn--hero:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
.btn--hero:active { transform:scale(0.95) !important; }
.btn--hero:hover  { transform:translateY(-5px) scale(1.04); }

/* 3 expanding aura rings */
.aura {
  position:absolute; inset:0; border-radius:7px;
  border:1px solid rgba(77,255,133,0.4);
  pointer-events:none; z-index:0;
}
.aura-1 { animation:aura 2.4s ease-out infinite; }
.aura-2 { border-color:rgba(0,229,255,0.3); animation:aura 2.4s ease-out .8s infinite; }
.aura-3 { border-color:rgba(77,255,133,0.2); animation:aura 2.4s ease-out 1.6s infinite; }
@keyframes aura {
  0%   { opacity:.9; transform:scale(1); }
  100% { opacity:0;  transform:scale(1.55); }
}

/* Animated corner brackets */
.hbc {
  position:absolute; width:14px; height:14px; z-index:6; pointer-events:none;
  transition:width .25s var(--ease),height .25s var(--ease);
}
.btn--hero:hover .hbc { width:22px; height:22px; }
.hbc-tl { top:-4px;   left:-4px;   border-top:2px solid var(--green); border-left:2px solid var(--green); }
.hbc-tr { top:-4px;   right:-4px;  border-top:2px solid var(--cyan);  border-right:2px solid var(--cyan); }
.hbc-bl { bottom:-4px;left:-4px;   border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.hbc-br { bottom:-4px;right:-4px;  border-bottom:2px solid var(--green); border-right:2px solid var(--green); }

/* Inner fill + glow */
.btn--hero .btn-content {
  position:relative; z-index:5;
  display:flex; align-items:center; gap:14px;
  padding:clamp(13px,1.8vh,17px) clamp(26px,3.8vw,46px);
  background:linear-gradient(135deg, #1bff72 0%, #00d4ff 100%);
  border-radius:5px; color:#030a03;
  font-weight:900; font-size:clamp(.9rem,1.65vw,1.05rem);
  letter-spacing:.09em; text-transform:uppercase;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 0 40px rgba(77,255,133,.6),
    0 0 80px rgba(0,229,255,.22),
    0 8px 30px rgba(0,0,0,.65);
  animation:heroPulse 2.2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%,100%{
    box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,
      0 0 30px rgba(77,255,133,.5),0 0 60px rgba(0,229,255,.15),0 8px 26px rgba(0,0,0,.6);
  }
  50%{
    box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,
      0 0 58px rgba(77,255,133,.75),0 0 110px rgba(0,229,255,.38),0 12px 36px rgba(0,0,0,.7);
  }
}

/* Scan sweep inside button */
.scan-wrap {
  position:absolute; inset:0; border-radius:5px;
  overflow:hidden; pointer-events:none; z-index:4;
}
.scan-wrap::after {
  content:''; position:absolute;
  top:-60%; left:0; right:0; height:50%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.13), transparent);
  animation:scanSlide 3.2s ease-in-out infinite;
}
@keyframes scanSlide {
  0%,100%{ transform:translateY(0); opacity:0; }
  25%    { opacity:1; }
  65%    { transform:translateY(290%); opacity:0; }
}

/* Shine on hover */
.shine {
  position:absolute; inset:0; border-radius:5px;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none; z-index:6;
}
.btn--hero:hover .shine { transform:translateX(120%); }

/* Play icon circle */
.play-ring {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.2); flex-shrink:0;
  animation:breathe 3s ease-in-out infinite;
}
@keyframes breathe {
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.14); }
}

.hero-txt { display:flex; flex-direction:column; align-items:flex-start; }
.hero-label{ font-size:clamp(.9rem,1.65vw,1.05rem); font-weight:900; letter-spacing:.1em; line-height:1.1; }
.hero-sub  { font-size:.6rem; font-weight:600; opacity:.62; letter-spacing:.06em; line-height:1; text-transform:none; }

.btn--hero .arrow { transition:transform .22s var(--ease); flex-shrink:0; }
.btn--hero:hover .arrow { transform:translateX(5px); }

/* ── RIGHT COL ──────────────────────────────────────────────── */
.col-right {
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,2.2vh,24px) clamp(28px,4.5vw,56px) clamp(12px,2.2vh,24px) clamp(12px,2vw,20px);
  height:100%;
  animation:fromRight 1s var(--ease) .1s both;
}
@keyframes fromRight {
  from{ opacity:0; transform:translateX(28px) scale(.97); }
  to  { opacity:1; transform:translateX(0)    scale(1); }
}

.frame-wrap {
  position:relative; width:100%;
  max-width:580px; max-height:calc(100vh - var(--bar-h) - 32px);
  border-radius:6px; overflow:hidden; cursor:pointer;
}
.frame-wrap:hover .game-img { transform:scale(1.05); filter:saturate(1.1) contrast(1.07) brightness(1.06); }

/* Corners */
.fc { position:absolute; width:18px; height:18px; z-index:10; pointer-events:none; }
.fc-tl{ top:-1px;   left:-1px;   border-top:2px solid var(--green); border-left:2px solid var(--green); }
.fc-tr{ top:-1px;   right:-1px;  border-top:2px solid var(--cyan);  border-right:2px solid var(--cyan); }
.fc-bl{ bottom:-1px;left:-1px;   border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.fc-br{ bottom:-1px;right:-1px;  border-bottom:2px solid var(--green); border-right:2px solid var(--green); }

/* Animated edge lines */
.edge { position:absolute; z-index:9; pointer-events:none; }
.edge-t{ top:0;    left:18px; right:18px; height:1px;
  background:linear-gradient(90deg,transparent,var(--green),var(--cyan),transparent);
  animation:edgePulse 3.2s ease-in-out infinite; }
.edge-b{ bottom:0; left:18px; right:18px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--green),transparent);
  animation:edgePulse 3.2s ease-in-out 1.6s infinite; }
@keyframes edgePulse{ 0%,100%{opacity:.3;}50%{opacity:.95;} }

.game-img {
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:6px; filter:saturate(.9) contrast(1.04);
  transition:transform .7s var(--ease), filter .4s ease;
}

.frame-scan {
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:6px;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 4px,rgba(77,255,133,.018) 4px,rgba(77,255,133,.018) 5px
  );
}
.frame-vig {
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:6px;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(3,8,10,.62) 100%);
}
.frame-glint {
  position:absolute; inset:0; z-index:4; border-radius:6px; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);
  animation:glintSlide 7s ease-in-out infinite;
}
@keyframes glintSlide{ 0%,100%{transform:translateX(-130%);}45%,55%{transform:translateX(130%);} }

.frame-badge {
  position:absolute; bottom:12px; left:12px; z-index:5;
  display:flex; align-items:center; gap:6px;
  font-size:.58rem; font-weight:800; letter-spacing:.22em; color:var(--green);
  background:rgba(3,8,10,.78); border:1px solid var(--border);
  border-radius:2px; padding:4px 10px; backdrop-filter:blur(10px);
}
.fbdot{ width:5px; height:5px; border-radius:50%; background:var(--green);
        box-shadow:0 0 7px var(--green); animation:pipBlink 1s ease-in-out infinite; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media(max-width:820px){
  html,body{ overflow-y:auto; }
  .stage{ grid-template-columns:1fr; height:auto; min-height:100vh; }
  .col-right{ order:-1; padding:72px 20px 8px; max-height:44vh; }
  .col-left { padding:12px 22px 30px; }
  .headline { font-size:clamp(1.8rem,8vw,2.8rem); }
  .cta-area { align-items:center; }
}
@media(max-height:620px) and (min-width:821px){
  :root{ --bar-h:50px; }
  .headline{ font-size:clamp(1.5rem,3.1vw,2.4rem); }
  .col-left{ gap:6px; }
  .bullets{ gap:3px; }
  .bullet{ padding:4px 10px; }
  .kicker{ display:none; }
  .hero-sub{ display:none; }
}