/* ============================================================
   Virxact Brand — splash page
   Palette: ink #0B0B0E · paper #EDE8DD · blood #E60012
   Typography: Bebas Neue · Noto Sans SC · IBM Plex Mono
   ============================================================ */

:root {
  --ink: #0B0B0E;
  --ink-soft: #15151A;
  --paper: #EDE8DD;
  --paper-dim: #D9D2C4;
  --ash: #8F887B;
  --blood: #E60012;
  --blood-dim: #8E0010;
  --hairline: rgba(237, 232, 221, 0.12);

  --font-display: 'Bebas Neue', Impact, 'Noto Sans SC', sans-serif;
  --font-cn: 'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --tracking-meta: 0.28em;
}

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

html {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: #0B0B0E;
  color: #EDE8DD;
  font-family: var(--font-cn);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  position: relative;
}

::selection { background: #E60012; color: #EDE8DD; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ============================================================
   Background layers (all position: fixed)
   ============================================================ */

.bg-halftone {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(230, 0, 18, 0.6) 1px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.bg-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url('/assets/grain.svg');
  background-size: 180px 180px;
}

.bg-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse 100% 75% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.6) 100%);
}

.accent-line {
  position: fixed;
  height: 2px;
  background: #E60012;
  pointer-events: none;
  z-index: 4;
  opacity: 0.55;
}
.accent-line--top-left {
  top: 86px;
  left: -10px;
  width: 90px;
  transform: rotate(-6deg);
}
.accent-line--bottom-right {
  bottom: 86px;
  right: -14px;
  width: 72px;
  transform: rotate(-10deg);
  opacity: 0.4;
}

/* ============================================================
   Shell — full viewport, 3-row grid
   ============================================================ */

.shell {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding: 28px 48px;
}

@media (max-width: 768px) {
  .shell { padding: 20px 22px; }
}

/* ============================================================
   Header
   ============================================================ */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.brand-logo {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  vertical-align: middle;
}

.brand-logo--horizontal {
  -webkit-mask-image: url('/assets/virxact-horizontal.svg');
          mask-image: url('/assets/virxact-horizontal.svg');
  width: 142px;
  height: 32px;
  color: #EDE8DD;
  transition: color 0.3s ease;
}

.nav__brand:hover .brand-logo--horizontal { color: #E60012; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: #0B0B0E;
  background: #EDE8DD;
  transition: background 0.2s ease, color 0.2s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.nav__cta:hover {
  background: #E60012;
  color: #EDE8DD;
}
.nav__cta svg { transition: transform 0.2s ease; }
.nav__cta:hover svg { transform: translateX(3px); }

/* ============================================================
   Stage — centered logo + corner rails
   ============================================================ */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 10;
  min-height: 0; /* allow overflow to clip inside grid row */
}

.rail {
  position: absolute;
  font-family: var(--font-mono);
  z-index: 11;
  animation: railFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
.rail__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: rgba(237, 232, 221, 0.4);
  margin-bottom: 6px;
}
.rail__value {
  font-size: 11px;
  color: rgba(237, 232, 221, 0.75);
  letter-spacing: 0.04em;
}
.rail--tl { top: 20px; left: 0; }
.rail--tr { top: 20px; right: 0; text-align: right; }
.rail--bl { bottom: 22px; left: 0; }
.rail--br { bottom: 22px; right: 0; text-align: right; }

.rail--tl::before,
.rail--bl::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: #E60012;
  margin-bottom: 10px;
  opacity: 0.8;
}
.rail--tr::before,
.rail--br::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: #E60012;
  margin-bottom: 10px;
  margin-left: auto;
  opacity: 0.8;
}

@media (max-width: 900px) {
  .rail { display: none; }
}

@keyframes railFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Mark — the hero visual
   ============================================================ */

.mark-wrap {
  position: relative;
  width: min(56vh, 52vw);
  aspect-ratio: 265 / 248;
  display: grid;
  place-items: center;
  animation: markIntro 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes markIntro {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

.mark-halo {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(230, 0, 18, 0.28) 0%, rgba(230, 0, 18, 0.08) 40%, transparent 68%);
  filter: blur(10px);
  animation: haloPulse 5.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes haloPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}

/* ============================================================
   Orbit rings — rotate around the (static) mark
   ============================================================ */

.orbit {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.orbit--outer {
  inset: -18%;
  animation: orbitSpin 42s linear infinite;
}
.orbit--mid {
  inset: -9%;
  animation: orbitSpin 28s linear infinite reverse;
}
.orbit--inner {
  inset: 6%;
  animation: orbitSpin 18s linear infinite;
}
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   MARK — body stays still. Constant RGB split (TikTok vibe)
          + subtle continuous jitter + occasional big glitch.
   Two layered animations: `markJitter` drives transform,
   `markPulse` drives filter. They don't conflict.
   ============================================================ */

.mark {
  position: relative;
  width: 100%;
  height: 100%;
  color: #EDE8DD;
  z-index: 2;
  will-change: transform, filter;
  animation:
    markJitter 0.55s steps(6) infinite,
    markPulse 4.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Micro-jitter — CRT-like tremor, never stops */
@keyframes markJitter {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(0.5px, -0.4px); }
  33%  { transform: translate(-0.4px, 0.3px); }
  50%  { transform: translate(0.3px, 0.5px); }
  66%  { transform: translate(-0.3px, -0.2px); }
  83%  { transform: translate(0.2px, 0.3px); }
  100% { transform: translate(0, 0); }
}

/* Filter track — constant RGB split, with occasional "big flash" */
@keyframes markPulse {
  /* baseline: gentle cyan+red split, always on */
  0%, 78%, 100% {
    filter:
      drop-shadow(-1.5px 0 0 rgba(0, 230, 240, 0.55))
      drop-shadow(1.5px 0 0 rgba(230, 0, 18, 0.65))
      drop-shadow(0 0 22px rgba(230, 0, 18, 0.22));
  }
  /* big flash #1 — fat split */
  80% {
    filter:
      drop-shadow(-6px 0 0 rgba(0, 230, 240, 0.95))
      drop-shadow(6px 0 0 rgba(230, 0, 18, 0.95))
      drop-shadow(0 0 30px rgba(230, 0, 18, 0.4));
  }
  82% {
    filter:
      drop-shadow(-1.5px 0 0 rgba(0, 230, 240, 0.55))
      drop-shadow(1.5px 0 0 rgba(230, 0, 18, 0.65))
      drop-shadow(0 0 22px rgba(230, 0, 18, 0.22));
  }
  /* big flash #2 — diagonal + wider */
  86% {
    filter:
      drop-shadow(-8px 2px 0 rgba(0, 230, 240, 1))
      drop-shadow(8px -2px 0 rgba(230, 0, 18, 1));
  }
  88% {
    filter:
      drop-shadow(-1.5px 0 0 rgba(0, 230, 240, 0.55))
      drop-shadow(1.5px 0 0 rgba(230, 0, 18, 0.65))
      drop-shadow(0 0 22px rgba(230, 0, 18, 0.22));
  }
  /* strobe-like flicker */
  92% { opacity: 0.6; }
  93% { opacity: 1; }
  94% { opacity: 0.75; }
  95% { opacity: 1; }
}

/* ============================================================
   Wordmark — under the mark
   ============================================================ */

.wordmark {
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
  text-align: center;
  animation: wordmarkIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
  z-index: 12;
}

@keyframes wordmarkIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wordmark__line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: rgba(237, 232, 221, 0.55);
}
.wordmark__marker {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: #E60012;
}

.wordmark__title {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  font-weight: 400;
  font-family: var(--font-display);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #EDE8DD;
}
.wordmark__en { font-family: var(--font-display); }
.wordmark__sep {
  color: #E60012;
  font-family: var(--font-display);
  transform: translateY(-3px);
}
.wordmark__cn {
  font-family: var(--font-cn);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: 0.02em;
}

.wordmark__slogan {
  margin-top: 12px;
  font-family: var(--font-cn);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  color: rgba(237, 232, 221, 0.6);
  letter-spacing: 0.05em;
}
.wordmark__slogan-en {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: rgba(237, 232, 221, 0.35);
  margin-left: 6px;
}

/* ============================================================
   Legal strip
   ============================================================ */

.legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: rgba(237, 232, 221, 0.35);
}
.legal__dot { width: 6px; height: 6px; background: #E60012; }
.legal__divider { width: 1px; height: 10px; background: rgba(237, 232, 221, 0.2); }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .orbit,
  .mark,
  .mark-halo,
  .mark-wrap,
  .rail,
  .wordmark { animation: none; }
  #particles { display: none; }
}