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

:root{
  --yellow: #f5d800;
  --orange: #ff6a00;
  --red:    #e3000f;
  --cyan:   #00e5ff;
  --dark:   #080608;
  --dark2:  #0d0a0e;
  --text:   #c8b88a;
  --dim:    rgba(200,184,138,0.38);
}

html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:var(--dark);
  font-family:'Share Tech Mono',monospace;
  color:var(--text);
  cursor:none;
}

/* ── CANVAS (rain + bg) ── */
#bg{ position:fixed;inset:0;z-index:0; }

/* ── NOISE TEXTURE ── */
.noise{
  position:fixed;inset:0;z-index:2;
  opacity:0.055;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ── SCANLINES ── */
.scan{
  position:fixed;inset:0;z-index:3;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,transparent 3px,
    rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px
  );
  pointer-events:none;
  animation:flicker 7s infinite;
}
@keyframes flicker{
  0%,93%,95.5%,98%,100%{opacity:1;}
  94%{opacity:0.78;}
  95%{opacity:1;}
  96%{opacity:0.85;}
  97%{opacity:1;}
  99%{opacity:0.9;}
}

/* ── VIGNETTE ── */
.vig{
  position:fixed;inset:0;z-index:3;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 15%, transparent 80%, rgba(0,0,0,0.6) 100%);
  pointer-events:none;
}

/* ── DIAGONAL STRIPE ACCENT (CP2077 style) ── */
.stripe-overlay{
  position:fixed;inset:0;z-index:4;
  pointer-events:none;
  overflow:hidden;
}
.stripe-overlay::before{
  content:'';
  position:absolute;
  top:-50%;left:-10%;
  width:3px;height:200%;
  background:linear-gradient(to bottom, transparent, rgba(245,216,0,0.18), transparent);
  transform:rotate(-18deg);
  box-shadow: 40px 0 0 rgba(245,216,0,0.07), -40px 0 0 rgba(245,216,0,0.05);
  animation: stripe-drift 12s ease-in-out infinite alternate;
}
@keyframes stripe-drift{
  from{left:-10%;}
  to{left:5%;}
}

/* ── CENTRE CONTENT ── */
.center{
  position:fixed;inset:0;z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
}

/* ── EYEBROW ── */
.eyebrow{
  font-size:clamp(0.5rem,1.1vw,0.62rem);
  letter-spacing:0.5em;
  color:var(--red);
  text-shadow:0 0 12px rgba(227,0,15,0.8);
  opacity:0;
  animation:rise 0.7s 0.4s forwards;
  margin-bottom:1.2rem;
  text-transform:uppercase;
}

/* ── MAIN TITLE ── */
.title-wrap{
  position:relative;
  opacity:0;
  animation:rise 0.9s 0.7s forwards;
}

.title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900;
  font-style:italic;
  font-size:clamp(4rem,14vw,12rem);
  line-height:0.85;
  letter-spacing:-0.01em;
  color:#fff;
  text-transform:uppercase;
  position:relative;
  user-select:none;
  text-shadow:
    0 0 0 #000,
    2px 2px 0 #1a1200,
    0 0 30px rgba(245,216,0,0.35),
    0 0 80px rgba(245,216,0,0.12);
}

.title .hi{
  color:var(--yellow);
  text-shadow:
    0 0 20px rgba(245,216,0,0.9),
    0 0 60px rgba(245,216,0,0.4),
    0 0 120px rgba(245,216,0,0.15),
    2px 2px 0 rgba(100,80,0,0.8);
}

/* glitch layers */
.title::before,
.title::after{
  content: attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;
  font-family:inherit;font-weight:inherit;font-style:inherit;
  font-size:inherit;line-height:inherit;letter-spacing:inherit;
  text-transform:inherit;
  opacity:0;
  pointer-events:none;
}
.title::before{
  color:var(--cyan);
  clip-path:polygon(0 0,100% 0,100% 40%,0 40%);
  text-shadow:none;
}
.title::after{
  color:var(--red);
  clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);
  text-shadow:none;
}
.glitching .title::before{
  animation:glitch-top 0.12s steps(1) forwards;
}
.glitching .title::after{
  animation:glitch-bot 0.12s steps(1) forwards;
}
@keyframes glitch-top{
  0%{opacity:1;transform:translate(-4px,0);}
  33%{transform:translate(4px,0);}
  66%{transform:translate(-2px,0);}
  100%{opacity:0;transform:translate(0,0);}
}
@keyframes glitch-bot{
  0%{opacity:1;transform:translate(4px,0);}
  33%{transform:translate(-4px,0);}
  66%{transform:translate(2px,0);}
  100%{opacity:0;transform:translate(0,0);}
}

/* ── SUBTITLE BAR ── */
.sub-bar{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:1.4rem;
  opacity:0;
  animation:rise 0.7s 1.3s forwards;
}
.sub-line{
  flex:1;
  height:1px;
  width:60px;
  background:linear-gradient(90deg, transparent, var(--yellow));
}
.sub-line.r{ background:linear-gradient(90deg, var(--yellow), transparent); }
.sub-text{
  font-size:clamp(0.55rem,1.2vw,0.68rem);
  letter-spacing:0.4em;
  color:var(--yellow);
  text-shadow:0 0 10px rgba(245,216,0,0.6);
  white-space:nowrap;
}

/* ── TAGLINE ── */
.tagline{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:300;
  font-size:clamp(0.9rem,2.2vw,1.3rem);
  letter-spacing:0.18em;
  color:var(--dim);
  text-transform:uppercase;
  margin-top:1rem;
  opacity:0;
  animation:rise 0.7s 1.7s forwards;
}

/* ── RED ACCENT BAR ── */
.accent-bar{
  width:0;height:3px;
  background:linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
  margin-top:2rem;
  position:relative;
  opacity:0;
  animation: bar-in 0.8s 2s forwards;
}
@keyframes bar-in{
  0%{opacity:0;width:0;}
  10%{opacity:1;}
  100%{opacity:1;width:min(480px,60vw);}
}
.accent-bar::after{
  content:'';
  position:absolute;inset:-2px;
  filter:blur(6px);
  background:inherit;
  opacity:0.5;
}

/* ── STATUS ROW ── */
.status{
  position:fixed;
  bottom:2rem;left:50%;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  gap:2rem;
  align-items:center;
  font-size:clamp(0.48rem,0.9vw,0.58rem);
  letter-spacing:0.22em;
  color:rgba(200,184,138,0.3);
  opacity:0;
  animation:rise 0.7s 2.4s forwards;
  white-space:nowrap;
}
.dot{
  display:inline-block;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 8px var(--yellow);
  animation:blink 2.2s ease-in-out infinite;
  margin-right:0.4rem;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.15;}}

/* ── CORNER UI ── */
.corner{
  position:fixed;z-index:20;
  width:56px;height:56px;
  opacity:0;
  animation:rise 0.5s 2.5s forwards;
}
.corner.tl{top:1.4rem;left:1.4rem;}
.corner.tr{top:1.4rem;right:1.4rem;transform:scaleX(-1);}
.corner.bl{bottom:1.4rem;left:1.4rem;transform:scaleY(-1);}
.corner.br{bottom:1.4rem;right:1.4rem;transform:scale(-1,-1);}

/* ── SIDE TEXT ── */
.side-text{
  position:fixed;
  z-index:20;
  font-size:0.5rem;
  letter-spacing:0.35em;
  color:rgba(245,216,0,0.2);
  text-transform:uppercase;
  opacity:0;
  animation:rise 0.5s 2.7s forwards;
}
.side-text.left{
  left:2rem;top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center center;
}
.side-text.right{
  right:2rem;top:50%;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:center center;
}

/* ── CUSTOM CURSOR ── */
#cur{
  position:fixed;z-index:9999;pointer-events:none;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid var(--yellow);
  transform:translate(-6px,-5px);
  filter:drop-shadow(0 0 4px var(--yellow));
  mix-blend-mode:screen;
}

/* ── KEYFRAMES ── */
@keyframes rise{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}