/*
  landingPage.css — SCOPED & FLUID VERSION
  ══════════════════════════════════════════════════════════════════
  All selectors are namespaced under .landing-page.
  Rigid pixels have been replaced with clamp(), %, and dvh/vw to
  ensure the interface scales infinitely across all screen sizes.
  ══════════════════════════════════════════════════════════════════
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Barlow:wght@400;500;600&display=swap');

/* ── ROOT WRAPPER ─────────────────────────────────────────────── */
.landing-page {
  position: relative; 
  overflow: hidden;
  width: 100%;
  
  /* FLUID FIX: 'dvh' accounts for mobile browser address bars shrinking/growing */
  height: 100dvh; 
  
  background: black;
  font-family: 'Barlow', sans-serif;
  color: var(--lp-text);

  /* CSS custom properties */
  --lp-purple:        #6b4fa0;
  --lp-purple-dark:   #3b2560;
  --lp-green-neon:    #7fff00;
  --lp-teal:          #00e5c0;
  --lp-ui-line:       rgba(180,220,255,0.25);
  --lp-text:          #f0eeff;
  --lp-navbar-color:  rgba(188,188,188,0.163);
}

/* ── RESET (scoped) ───────────────────────────────────────────── */
.landing-page *, .landing-page *::before, .landing-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── HUD OVERLAY ──────────────────────────────────────────────── */
.landing-page .user-interface {
  width: 100%;
  height: 100%; 
  position: absolute; 
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

/* ── HERO & BACKGROUND ────────────────────────────────────────── */
.landing-page #hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.landing-page .hero-bg {
  position: absolute; inset: 0;
  background-image: url('../assets/HomepageAssets/DJIANG.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.landing-page .hero-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
}

.landing-page #heroCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ── FLUID UI DECORATIONS ─────────────────────────────────────── */
/* UI Corners */
.landing-page .ui-corner {
  position: absolute;
  /* FLUID FIX: Corners scale down slightly on phones so they aren't clunky */
  width: clamp(20px, 3vw, 40px);
  aspect-ratio: 1; /* Keeps them perfectly square */
  border-color: var(--lp-teal);
  border-style: solid;
  opacity: .6;
}

/* FLUID FIX: Padding from the edge scales with the screen */
.landing-page .ui-corner.tl { top: clamp(10px, 2vh, 25px);    left: clamp(10px, 2vw, 25px);  border-width: 2px 0 0 2px; }
.landing-page .ui-corner.tr { top: clamp(10px, 2vh, 25px);    right: clamp(10px, 2vw, 25px); border-width: 2px 2px 0 0; }
.landing-page .ui-corner.bl { bottom: clamp(10px, 2vh, 25px); left: clamp(10px, 2vw, 25px);  border-width: 0 0 2px 2px; }
.landing-page .ui-corner.br { bottom: clamp(10px, 2vh, 25px); right: clamp(10px, 2vw, 25px); border-width: 0 2px 2px 0; }

/* Left Crosshair */
.landing-page .ui-crosshair {
  position: absolute;
  left: clamp(15px, 2vw, 30px); 
  top: 50%;
  transform: translateY(-50%);
  width: clamp(20px, 2vw, 28px); 
  height: clamp(20px, 2vw, 28px);
  opacity: .5;
}
.landing-page .ui-crosshair::before,
.landing-page .ui-crosshair::after {
  content: '';
  position: absolute;
  background: var(--lp-teal);
}
.landing-page .ui-crosshair::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.landing-page .ui-crosshair::after  { height: 2px; width: 100%; top: 50%; transform: translateY(-50%); }

/* Background Floating Numbers */
.landing-page .ui-counter {
  position: absolute;
  /* FLUID FIX: Fonts scale naturally */
  font-size: clamp(10px, 1vw, 15px);
  letter-spacing: 1.5px;
  color: var(--lp-teal);
  opacity: .6;
  font-family: 'Barlow Condensed', sans-serif;
}
/* FLUID FIX: Replaced fixed px positions with percentages so they never float off-screen! */
.landing-page .ui-counter.c1 { top: 15%; left: 20%; }
.landing-page .ui-counter.c2 { top: 30%; left: 32%; }
.landing-page .ui-counter.c3 { top: 45%; left: 10%; }

/* Bottom Left Camera Icon */
.landing-page .ui-camera {
  position: absolute;
  bottom: clamp(12px, 2vh, 20px); 
  left: clamp(15px, 2vw, 30px);
  width: clamp(16px, 1.5vw, 22px); 
  height: clamp(12px, 1vw, 16px);
  border: 1.5px solid var(--lp-teal);
  border-radius: 2px;
  opacity: .5;
}
.landing-page .ui-camera::before {
  content: ''; position: absolute;
  right: -7px; top: 50%; transform: translateY(-50%);
  border: clamp(3px, 0.4vw, 5px) solid transparent;
  border-left: clamp(4px, 0.5vw, 6px) solid var(--lp-teal);
}

/* ── TEXT CONTENT ─────────────────────────────────────────────── */
.landing-page .hero-blurb {
  position: absolute;
  top: clamp(60px, 10vh, 100px); /* Pushes down gently based on screen height */
  left: 9vw;
  max-width: clamp(200px, 30vw, 400px); /* Lets the paragraph get wider on large screens */
  font-size: clamp(10px, 1vw, 14px); /* Fluid text sizing */
  line-height: 1.6;
  color: #fff;
  letter-spacing: .5px;
  z-index: 20;
}

.landing-page .hero-headline {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1200px;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.landing-page .hero-headline .line {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  line-height: 0.8;
  letter-spacing: -2px;
  text-shadow: 0 10px 40px rgba(0,0,0,0.9);
  opacity: 0;
  transform: translateY(40px);
  animation: lp-slideUp .7s forwards;
}

/* Staggered fluid sizing for the three giant words */
.landing-page .hero-headline .line:nth-child(1) { font-size: clamp(60px, 12vw, 180px); margin-left: 20%; animation-delay: .1s;  }
.landing-page .hero-headline .line:nth-child(2) { font-size: clamp(80px, 14vw, 210px); margin-left: 40%; animation-delay: .25s; }
.landing-page .hero-headline .line:nth-child(3) { font-size: clamp(100px, 16vw, 250px); margin-left: 5%;  animation-delay: .4s;  }

@keyframes lp-slideUp {
  to { opacity: 1; transform: translateY(0); }
}

.landing-page .scroll-hint {
  position: absolute;
  bottom: clamp(15px, 3vh, 30px); 
  right: clamp(15px, 3vw, 65px);
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(8px, 0.8vw, 10px); 
  letter-spacing: 2px;
  text-transform: uppercase; opacity: .55;
}
.landing-page .scroll-hint svg { 
  width: clamp(8px, 1vw, 12px);
  animation: lp-bounce .9s ease-in-out infinite alternate; 
}
@keyframes lp-bounce { to { transform: translateY(5px); } }

/* ── RESPONSIVE EXCEPTIONS ────────────────────────────────────── */
@media (max-width: 768px) {
  .landing-page .hero-blurb { display: none; } /* Hide the tiny text on phones to keep it clean */
  .landing-page .hero-headline .line { letter-spacing: -1px; } /* Less aggressive squish on mobile */
}

.hero-scanlines {
  /* Existing code... */
  
  /* 1. Force the browser to use the GPU */
  transform: translateZ(0); 
  
  /* 2. Tell the browser exactly what will change ahead of time */
  will-change: transform, opacity; 
  
  /* 3. NEVER animate background-position. If it moves, use transform: translateY() */
  pointer-events: none; /* Stops it from capturing taps and slowing down scrolling */
}