/* Abrxas.Network — luxury-tech cinematic landing (gold + black), Tron-inspired typography */

:root{
  --bg: #050506;
  --bg2:#000000;

  --gold:#d8b56a;
  --gold2:#f1d08a;
  --gold3:#a57a2c;

  --text:#f6f0e6;
  --muted: rgba(246,240,230,0.62);

  --glowA: rgba(216,181,106,0.55);
  --glowB: rgba(241,208,138,0.35);

  --stroke: rgba(241,208,138,0.22);
  --stroke2: rgba(216,181,106,0.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 50% 44%, #0b0b0c 0%, var(--bg) 45%, var(--bg2) 100%);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

.stage{
  position:relative;
  width:100%;
  height:100%;
  isolation:isolate;
}

#fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.copy{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

/* Anchor point is the cinematic core center (screen center). */
/* Title sits BELOW the nucleus so the core stays unobstructed. */
.brand{
  display:grid;
  grid-template-rows: auto auto auto;
  justify-items:center;
  gap: 18px;
  transform: translateY(48px);
  width:min(740px, 92vw);
}

.title{
  margin:0;
  display:grid;
  gap: 8px;
  line-height:1;
  position:relative;
  width:100%;
  text-transform:uppercase;
  letter-spacing:0.26em;
}

\n.brand{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(740px, 92vw);
  display:grid;
  place-items:center;
}\n\n.title{
  margin:0;
  margin-top: clamp(200px, 24vh, 320px);
  display:grid;
  gap: 8px;
  line-height:1;
  position:relative;
  width:100%;
  text-transform:uppercase;
  letter-spacing:0.26em;
  text-align:center;
}\n\n.line{
  display:block;
  font-weight:640;
  font-size: clamp(34px, 5.2vw, 74px);
  color: rgba(246,240,230,0.90);
  transform: translateX(0.13em); /* compensates tracking so it stays visually centered */
  position:relative;
  filter: drop-shadow(0 0 18px rgba(216,181,106,0.10));
}

/* Tron-inspired inline/outline look (gold, not neon) */
.line::before{
  content: attr(data-text);
  position:absolute;
  inset:0;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke);
  text-stroke: 1px var(--stroke);
  opacity:0.95;
  filter:
    drop-shadow(0 0 12px rgba(241,208,138,0.18))
    drop-shadow(0 0 28px rgba(216,181,106,0.10));
  pointer-events:none;
}

.line::after{
  /* subtle “glass” highlight */
  content:"";
  position:absolute;
  left:-6%;
  top:15%;
  width:112%;
  height:30%;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(241,208,138,0.08) 35%,
    rgba(241,208,138,0.14) 50%,
    rgba(241,208,138,0.06) 65%,
    rgba(0,0,0,0) 100%);
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  opacity:0.55;
  pointer-events:none;
  animation: highlightSweep 6.4s ease-in-out infinite;
}

.line-b{
  font-weight:560;
  letter-spacing:0.34em;
  color: rgba(246,240,230,0.78);
}

@keyframes highlightSweep{
  0%,100%{ transform: translateX(-4%) skewX(-18deg); opacity:0.30; }
  50%{ transform: translateX(4%) skewX(-18deg); opacity:0.65; }
}

.accent{
  position:absolute;
  left:50%;
  top: calc(50% - 2px);
  width: min(520px, 78vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(216,181,106,0.18) 18%,
    rgba(241,208,138,0.30) 50%,
    rgba(216,181,106,0.18) 82%,
    rgba(0,0,0,0) 100%);
  box-shadow: 0 0 16px rgba(216,181,106,0.16);
  opacity:0.9;
}

.hint{
  margin: 2px 0 0;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0.92;
  transition: opacity 600ms ease;
}

.hint.hidden{ opacity:0; }

  50%{ transform: scale(1.18); filter: saturate(1.25); }
}

/* Filmic overlays */
.vignette{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(1200px 900px at 50% 48%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.86) 100%);
  z-index:2;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.grain{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0.20;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014), rgba(255,255,255,0.014) 1px, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.0) 4px),
    radial-gradient(circle at 30% 20%, rgba(241,208,138,0.014) 0%, rgba(0,0,0,0) 55%);
  animation: grainMove 1.2s steps(2) infinite;
  mix-blend-mode:overlay;
}

.scan{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0.16;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(241,208,138,0.08) 50%, rgba(0,0,0,0.0) 100%);
  transform: translateY(-40%);
  animation: scanPass 7.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes scanPass{
  0%,100%{ transform: translateY(-45%); opacity:0.08; }
  50%{ transform: translateY(45%); opacity:0.20; }
}

@keyframes grainMove{
  0%{ transform: translate3d(0,0,0); }
  25%{ transform: translate3d(-1%, 1%, 0); }
  50%{ transform: translate3d(1%, -1%, 0); }
  75%{ transform: translate3d(-1%, -1%, 0); }
  100%{ transform: translate3d(0,0,0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .grain,.scan,.mark-ring,.mark-core,.mark-spokes,.line::after{ animation:none !important; }
}