/* ============================================================
   portal-landing-page-styles.css
   v52 :: NEURAL GRID 3D — hacker / cyber portal
   Layers: video + matrix rain + 3D grid floor + HUD + 3D nodes
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  --void: #050814;
  --void-2: #0a0f24;
  --ink: #d8faff;
  --ink-dim: #7aa2b8;
  --cy: #00ffd1;       /* primary neon teal */
  --cy-2: #0ef0ff;     /* secondary cyan */
  --mg: #ff00aa;       /* magenta accent */
  --am: #ffb300;       /* amber warning */
  --red: #ff3b5c;

  --grid-line: rgba(0, 255, 209, 0.28);
  --hud-line: rgba(0, 255, 209, 0.55);

  --f-display: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --f-mono: "Share Tech Mono", ui-monospace, monospace;
  --f-ui: "Rajdhani", system-ui, sans-serif;
}

/* ===== RESET / BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-ui);
  -webkit-tap-highlight-color: transparent;
}

body {
  /* Global 3D stage */
  perspective: 1400px;
  perspective-origin: 50% 55%;
  transform-style: preserve-3d;
}

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

/* ============================================================
   BACKGROUND STACK — video, tint, vignette, rain, grid, scan
   ============================================================ */
.bg-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
}
.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) hue-rotate(165deg) brightness(0.45) contrast(1.1);
}

.bg-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(0, 255, 209, 0.12), transparent 60%),
    radial-gradient(ellipse at 85% 90%, rgba(255, 0, 170, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(5, 8, 20, 0.6), rgba(5, 8, 20, 0.85));
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.matrix-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  mix-blend-mode: screen;
}

/* ---- 3D GRID FLOOR (pure CSS, perspective) ---- */
.grid-floor {
  position: absolute;
  left: 50%;
  bottom: -12vh;
  width: 220vw;
  height: 70vh;
  transform: translateX(-50%) perspective(720px) rotateX(62deg);
  transform-origin: 50% 100%;
  overflow: hidden;
  opacity: 0.8;
}

.grid-floor__mesh {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 100%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 0%, transparent 80%);
  animation: gridScroll 8s linear infinite;
  will-change: transform;
}

@keyframes gridScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(56px); }
}

/* ---- SCAN LINES / SWEEP / NOISE ---- */
.scan-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 209, 0.035) 0px,
    rgba(0, 255, 209, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.scan-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 209, 0.08) 48%,
    rgba(0, 255, 209, 0.18) 50%,
    rgba(0, 255, 209, 0.08) 52%,
    transparent 100%
  );
  height: 140%;
  top: -140%;
  animation: sweep 6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  mix-blend-mode: screen;
}

@keyframes sweep {
  0%   { transform: translateY(0); }
  100% { transform: translateY(140%); }
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  mix-blend-mode: overlay;
}

/* ============================================================
   HUD CHROME — corners, rails, status dots
   ============================================================ */
.hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  font-family: var(--f-mono);
  color: var(--cy);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.hud__corner {
  position: absolute;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-shadow: 0 0 8px rgba(0, 255, 209, 0.4);
}
.hud__corner::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--hud-line);
}
.hud__corner--tl { top: 14px; left: 14px; }
.hud__corner--tl::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud__corner--tr { top: 14px; right: 14px; align-items: flex-end; }
.hud__corner--tr::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud__corner--bl { bottom: 14px; left: 14px; }
.hud__corner--bl::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud__corner--br { bottom: 14px; right: 14px; align-items: flex-end; }
.hud__corner--br::before { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hud__tag { opacity: 0.85; }
.hud__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cy-2);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy), 0 0 2px var(--cy);
  animation: pulseDot 1.6s ease-in-out infinite;
}
.dot--warn {
  background: var(--am);
  box-shadow: 0 0 10px var(--am);
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.hud__rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 10px;
  color: var(--ink-dim);
  writing-mode: vertical-rl;
  letter-spacing: 0.28em;
}
.hud__rail--left  { left: 10px; }
.hud__rail--right { right: 10px; color: rgba(255, 0, 170, 0.65); }

/* ============================================================
   MAIN 3D SCENE
   ============================================================ */
.scene {
  position: relative;
  z-index: 10;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  padding: 72px 24px 110px;
  transform-style: preserve-3d;
}

/* ---- TERMINAL PROMPT ---- */
.term {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--cy);
  letter-spacing: 0.06em;
  text-shadow: 0 0 6px rgba(0, 255, 209, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 255, 209, 0.25);
  background: rgba(5, 8, 20, 0.55);
  backdrop-filter: blur(4px);
  clip-path: polygon(
    0 0, calc(100% - 10px) 0, 100% 10px,
    100% 100%, 10px 100%, 0 calc(100% - 10px)
  );
}
.term__prompt { color: var(--mg); opacity: 0.9; }
.term__caret {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--cy);
  animation: blink 1s steps(2) infinite;
  box-shadow: 0 0 6px var(--cy);
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- HOLOGRAPHIC LOGO (3D rings + glitch) ---- */
.logo-holo {
  position: relative;
  margin-top: 22px;
  width: min(86vw, 520px);
  aspect-ratio: 4 / 1;
  transform-style: preserve-3d;
  animation: hoverY 6s ease-in-out infinite;
}

@keyframes hoverY {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50%      { transform: translateY(-6px) rotateX(3deg); }
}

.logo-holo__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(0, 255, 209, 0.55))
    drop-shadow(0 0 2px rgba(0, 255, 209, 0.9));
}

.logo-holo__ring {
  position: absolute;
  inset: -14% -6%;
  border: 1px solid rgba(0, 255, 209, 0.35);
  border-radius: 50%;
  transform: translateZ(-40px) rotateX(72deg);
  animation: ringSpin 14s linear infinite;
}
.logo-holo__ring--2 {
  inset: -26% -12%;
  border-color: rgba(255, 0, 170, 0.28);
  animation-duration: 22s;
  animation-direction: reverse;
  transform: translateZ(-70px) rotateX(72deg) rotateZ(30deg);
}
@keyframes ringSpin {
  to { transform: translateZ(-40px) rotateX(72deg) rotateZ(360deg); }
}

.logo-holo__glitch {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 209, 0.25),
    transparent
  );
  mix-blend-mode: screen;
  animation: glitchBar 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glitchBar {
  0%, 92%, 100% { opacity: 0; transform: translateX(-40%); }
  94%           { opacity: 1; transform: translateX(0); }
  96%           { opacity: 0.4; transform: translateX(40%); }
}

/* ---- FLOATING 3D CUBE ACCENT ---- */
.cube {
  --s: 44px;
  position: absolute;
  top: 118px;
  right: 8%;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  animation: cubeSpin 14s linear infinite;
  pointer-events: none;
}
.cube__face {
  position: absolute;
  inset: 0;
  border: 1px solid var(--cy);
  background: rgba(0, 255, 209, 0.06);
  box-shadow: inset 0 0 12px rgba(0, 255, 209, 0.3);
}
.cube__face--front  { transform: translateZ(calc(var(--s) / 2)); }
.cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); border-color: var(--mg); box-shadow: inset 0 0 12px rgba(255, 0, 170, 0.3); }
.cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); border-color: var(--am); }
.cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

@keyframes cubeSpin {
  to { transform: rotateX(360deg) rotateY(720deg); }
}

/* ---- COUNTRY NODE GRID (3D tilting cards) ---- */
.nodes {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: min(960px, 92vw);
  transform-style: preserve-3d;
}

.node {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 255, 209, 0.04),
    rgba(255, 0, 170, 0.04) 70%,
    rgba(0, 0, 0, 0.55)
  );
  border: 1px solid rgba(0, 255, 209, 0.28);
  clip-path: polygon(
    0 0, calc(100% - 14px) 0, 100% 14px,
    100% 100%, 14px 100%, 0 calc(100% - 14px)
  );
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.3s, background 0.3s;
  will-change: transform;
}

.node:hover,
.node:focus-visible {
  border-color: var(--cy);
  background: linear-gradient(
    180deg,
    rgba(0, 255, 209, 0.12),
    rgba(255, 0, 170, 0.08) 70%,
    rgba(0, 0, 0, 0.6)
  );
}

.node__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--cy);
}
.node__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.node__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-color: var(--mg); }
.node__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-color: var(--mg); }
.node__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.node__id {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cy);
  opacity: 0.85;
  align-self: flex-start;
}

.node__flag-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translateZ(18px);
  transition: transform 0.3s;
}
.node:hover .node__flag-wrap { transform: translateZ(32px); }

.node__flag {
  width: 76%;
  height: 76%;
  object-fit: cover;
  border: 1px solid rgba(0, 255, 209, 0.45);
  border-radius: 4px;
  filter: contrast(1.05) saturate(1.1)
          drop-shadow(0 6px 18px rgba(0, 255, 209, 0.25));
}

.node__ring {
  position: absolute;
  inset: 6%;
  border: 1px dashed rgba(0, 255, 209, 0.45);
  border-radius: 50%;
  animation: ringSlow 18s linear infinite;
}
@keyframes ringSlow { to { transform: rotate(360deg); } }

.node__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-shadow: 0 0 10px rgba(0, 255, 209, 0.35);
  transform: translateZ(8px);
}

.node__meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}

/* ---- BOTTOM BANNER / CTA ---- */
.banner {
  position: relative;
  width: min(820px, 94vw);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding: 12px 16px;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(5, 8, 20, 0.85),
    rgba(10, 15, 36, 0.65)
  );
  border: 1px solid rgba(255, 0, 170, 0.35);
  clip-path: polygon(
    0 0, calc(100% - 18px) 0, 100% 18px,
    100% 100%, 18px 100%, 0 calc(100% - 18px)
  );
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.banner:hover {
  transform: translateY(-3px);
  border-color: var(--cy);
  box-shadow: 0 10px 40px rgba(0, 255, 209, 0.18);
}

.banner__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--mg);
}
.banner__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.banner__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-color: var(--cy); }

.banner__frame {
  overflow: hidden;
  border: 1px solid rgba(0, 255, 209, 0.25);
  aspect-ratio: 3 / 1;
  position: relative;
}
.banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}

.banner__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.banner__kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--cy);
}
.banner__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-shadow: 0 0 8px rgba(0, 255, 209, 0.35);
  line-height: 1.25;
}
.banner__cta {
  margin-top: 6px;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--mg);
  padding: 4px 10px;
  border: 1px solid var(--mg);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  transition: background 0.2s, color 0.2s;
}
.banner:hover .banner__cta {
  background: var(--mg);
  color: var(--void);
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 1024px) {
  .hud__rail { display: none; }
  .cube { --s: 34px; top: 96px; right: 6%; }
  .node__name { font-size: 14px; }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 768px) {
  .scene {
    padding: calc(56px + env(safe-area-inset-top, 0px)) 14px
             calc(86px + env(safe-area-inset-bottom, 0px));
  }
  .term { font-size: 10px; padding: 5px 10px; }
  .logo-holo { width: 80vw; margin-top: 12px; }
  .cube { display: none; }

  .nodes {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 94vw;
  }
  .node { padding: 12px 8px 10px; }
  .node__name { font-size: 14px; }
  .node__meta { font-size: 9px; }

  .banner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .banner__title { font-size: 13px; }

  .hud__corner { padding: 7px 10px; font-size: 10px; }
  .hud__corner::before { width: 14px; height: 14px; }
}

/* Small iPhone SE / 8 */
@media (max-width: 420px) and (max-height: 720px) {
  .logo-holo { width: 72vw; }
  .node__flag-wrap { aspect-ratio: 1.1; }
  .banner__title { font-size: 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scan-sweep,
  .grid-floor__mesh,
  .logo-holo,
  .cube,
  .node__ring,
  .logo-holo__ring,
  .logo-holo__glitch { animation: none !important; }
}