/* ================================================================
   LANDING.CSS — Cyberpunk 2077 Portfolio
   Landing page (index.html) styles
   ================================================================ */

:root {
  --cyan: #00f5ff;
  --yellow: #ffe500;
  --red: #ff003c;
  --purple: #7b2fff;
  --dark-bg: #050508;
  --dark-mid: #0a0a12;
  --glass-bg: rgba(0, 245, 255, 0.04);
  --glass-border: rgba(0, 245, 255, 0.25);
  --font-primary: 'Orbitron', monospace;
  --font-body: 'Rajdhani', sans-serif;
  --font-display: 'Audiowide', monospace;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: var(--dark-bg);
  overflow: hidden;
  cursor: crosshair;
}

/* ============================================================
   VIDEO BACKGROUND
   ============================================================ */

.video-container {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#landing-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Darkened to 40% brightness */
  filter: brightness(0.4) saturate(1.3);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 8, 0.6) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(5, 5, 8, 0.8) 100%
  );
  z-index: 1;
}

/* ============================================================
   SCANLINES
   ============================================================ */

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  animation: scanline-drift 8s linear infinite;
}

@keyframes scanline-drift {
  0% { background-position-y: 0; }
  100% { background-position-y: 200px; }
}

/* ============================================================
   GLITCH OVERLAY
   ============================================================ */

.glitch-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: glitch-flicker 5s infinite;
}

.glitch-overlay::before,
.glitch-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
}

.glitch-overlay::before {
  background: rgba(255, 0, 60, 0.08);
  transform: translateX(-3px);
  mix-blend-mode: screen;
  animation: rgb-split-r 3s infinite step-start;
}

.glitch-overlay::after {
  background: rgba(0, 245, 255, 0.08);
  transform: translateX(3px);
  mix-blend-mode: screen;
  animation: rgb-split-b 3s infinite step-start;
}

@keyframes glitch-flicker {
  0%, 90%, 100% { opacity: 0; }
  91%, 93% { opacity: 1; }
  92% { opacity: 0; }
  94%, 96% { opacity: 1; }
  95% { opacity: 0; }
}

@keyframes rgb-split-r {
  0%, 40%, 100% { transform: translateX(0); }
  41% { transform: translateX(-6px) scaleY(0.98); }
  42% { transform: translateX(4px); }
  43% { transform: translateX(0); }
}

@keyframes rgb-split-b {
  0%, 40%, 100% { transform: translateX(0); }
  41% { transform: translateX(6px) scaleY(1.02); }
  42% { transform: translateX(-4px); }
  43% { transform: translateX(0); }
}

/* ============================================================
   NOISE TEXTURE
   ============================================================ */

.noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  animation: noise-shift 0.3s steps(5) infinite;
}

@keyframes noise-shift {
  0% { background-position: 0 0; }
  20% { background-position: -10px 5px; }
  40% { background-position: 7px -8px; }
  60% { background-position: -5px 10px; }
  80% { background-position: 12px -3px; }
  100% { background-position: 0 0; }
}

/* ============================================================
   HUD CORNERS
   ============================================================ */

.hud-corner {
  position: absolute;
  z-index: 6;
  width: 80px;
  height: 80px;
  pointer-events: none;
}

.hud-corner.top-left {
  top: 20px; left: 20px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  box-shadow: -2px -2px 10px rgba(0, 245, 255, 0.3);
}

.hud-corner.top-right {
  top: 20px; right: 20px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  box-shadow: 2px -2px 10px rgba(0, 245, 255, 0.3);
}

.hud-corner.bottom-left {
  bottom: 20px; left: 20px;
  border-bottom: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  box-shadow: -2px 2px 10px rgba(0, 245, 255, 0.3);
}

.hud-corner.bottom-right {
  bottom: 20px; right: 20px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  box-shadow: 2px 2px 10px rgba(0, 245, 255, 0.3);
}

/* ============================================================
   STATUS BARS
   ============================================================ */

.status-bar {
  position: fixed;
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  gap: 24px;
  padding: 8px 100px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0, 245, 255, 0.6);
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 245, 255, 0.15);
}

.top-bar {
  top: 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.15);
  justify-content: space-between;
}

.bottom-bar {
  bottom: 0;
  border-top: 1px solid rgba(0, 245, 255, 0.15);
  justify-content: center;
}

.status-item { color: rgba(0, 245, 255, 0.6); }
.neon-yellow { color: var(--yellow); font-weight: 700; }
.neon-red { color: var(--red); font-weight: 700; }

/* ============================================================
   CENTER CONTENT
   ============================================================ */

.center-content {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 60px 20px;
}

/* ============================================================
   ENTER BUTTON
   ============================================================ */

.enter-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}

.btn-wrapper {
  position: relative;
}

.enter-btn {
  position: relative;
  padding: 22px 60px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

.enter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 245, 255, 0.04);
  border: 1px solid rgba(0, 245, 255, 0.3);
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  transition: background 0.2s;
}

.enter-btn:hover::before {
  background: rgba(0, 245, 255, 0.08);
}

.enter-btn:active::before,
.enter-btn.holding::before {
  background: rgba(255, 229, 0, 0.08);
  border-color: rgba(255, 229, 0, 0.5);
}

.btn-text {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
  transition: color 0.2s, text-shadow 0.2s;
  position: relative;
  z-index: 1;
}

.enter-btn.holding .btn-text {
  color: var(--yellow);
  text-shadow: 0 0 20px rgba(255, 229, 0, 0.9);
}

.btn-sub {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 4px;
  color: rgba(0, 245, 255, 0.5);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* Animated borders */
.btn-border {
  position: absolute;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.btn-border.top, .btn-border.bottom {
  height: 2px;
  width: 0;
  left: 0;
  transition: none;
}
.btn-border.top { top: 0; animation: border-slide-h 3s linear infinite; }
.btn-border.bottom { bottom: 0; animation: border-slide-h 3s linear infinite reverse; }

.btn-border.left, .btn-border.right {
  width: 2px;
  height: 0;
  top: 0;
  transition: none;
}
.btn-border.right { right: 0; animation: border-slide-v 3s linear infinite; }
.btn-border.left { left: 0; animation: border-slide-v 3s linear infinite reverse; }

@keyframes border-slide-h {
  0% { width: 0; left: 0; }
  50% { width: 100%; left: 0; }
  51% { width: 100%; left: 0; }
  100% { width: 0; left: 100%; }
}

@keyframes border-slide-v {
  0% { height: 0; top: 0; }
  50% { height: 100%; top: 0; }
  51% { height: 100%; top: 0; }
  100% { height: 0; top: 100%; }
}

/* Corner sparks */
.corner-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--yellow);
  border-style: solid;
  animation: spark-pulse 2s ease-in-out infinite;
}

.corner-spark.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.corner-spark.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.corner-spark.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.corner-spark.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

@keyframes spark-pulse {
  0%, 100% { box-shadow: 0 0 3px var(--yellow); opacity: 0.6; }
  50% { box-shadow: 0 0 10px var(--yellow), 0 0 20px var(--yellow); opacity: 1; }
}

/* ============================================================
   LOADING BAR
   ============================================================ */

.loader-container {
  width: 420px;
  max-width: 90vw;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.loader-container.visible {
  opacity: 1;
  transform: translateY(0);
}

.loader-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(0, 245, 255, 0.7);
}

.loader-percent {
  color: var(--yellow);
  font-weight: 700;
}

.loader-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(0, 245, 255, 0.1);
  border: 1px solid rgba(0, 245, 255, 0.2);
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--yellow));
  transition: width 0.05s linear;
  position: relative;
}

.loader-glow {
  position: absolute;
  top: -4px;
  left: 0;
  height: 14px;
  width: 30px;
  background: radial-gradient(ellipse, rgba(0, 245, 255, 0.6), transparent);
  pointer-events: none;
  transform: translateX(-50%);
  filter: blur(3px);
}

.loader-segments {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.loader-segments span {
  flex: 1;
  height: 3px;
  background: rgba(0, 245, 255, 0.15);
  transition: background 0.1s;
}

.loader-segments span.lit {
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan);
}

.loader-status {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(0, 245, 255, 0.5);
  margin-top: 8px;
  text-align: center;
  animation: blink-text 1s step-end infinite;
}

@keyframes blink-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================================
   WARNING TEXT
   ============================================================ */

.warning-text {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 0, 60, 0.5);
  text-transform: uppercase;
  margin-top: 10px;
  text-align: center;
}

/* ============================================================
   BLINK UTILITIES
   ============================================================ */

.blink-slow {
  animation: blink 2s step-end infinite;
}

.blink-fast {
  animation: blink 0.6s step-end infinite;
}

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

/* ============================================================
   TRANSITION OVERLAY
   ============================================================ */

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--dark-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.transition-overlay.active {
  pointer-events: all;
  animation: transition-in 1.2s ease forwards;
}

@keyframes transition-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}

.transition-glitch-h {
  position: absolute;
  inset: 0;
  animation: trans-glitch-h 1.2s steps(1) forwards;
  pointer-events: none;
}

@keyframes trans-glitch-h {
  0% { background: none; }
  20% { background: repeating-linear-gradient(0deg, transparent 0px, transparent 40px, rgba(0,245,255,0.05) 40px, rgba(0,245,255,0.05) 42px); }
  40% { background: repeating-linear-gradient(0deg, transparent 0px, transparent 20px, rgba(255,0,60,0.05) 20px, rgba(255,0,60,0.05) 22px); }
  60% { background: none; }
  80% { background: rgba(0,245,255,0.03); }
  100% { background: none; }
}

.transition-glitch-v {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: trans-glitch-v 1.2s steps(1) forwards;
}

@keyframes trans-glitch-v {
  0%, 100% { clip-path: none; }
  15% { clip-path: inset(20% 0 30% 0); background: rgba(255,229,0,0.03); }
  30% { clip-path: none; }
  45% { clip-path: inset(60% 0 10% 0); background: rgba(0,245,255,0.03); }
  60% { clip-path: none; }
}

.transition-text {
  font-family: var(--font-primary);
  font-size: 2rem;
  letter-spacing: 0.5em;
  color: var(--cyan);
  text-shadow: 0 0 30px var(--cyan);
  z-index: 1;
  animation: trans-text 1.2s ease forwards;
}

@keyframes trans-text {
  0% { opacity: 0; transform: scale(1.2); }
  30% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.95); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .status-bar { padding: 6px 20px; font-size: 9px; gap: 12px; }
  .title-decoration { display: none; }
  .deco-line { width: 60px; }
  .enter-btn { padding: 18px 40px; }
  .loader-container { width: 320px; }
  .hud-corner { width: 50px; height: 50px; }
}