/* =============================
   DADA NEOCITIES — COMPILED CHAOS
   Elements 1 + 2
   ============================= */

/* VARIABLES & RESET */
:root{
  --h: 48vh;
  --accent1: #ff0066;
  --accent2: #00ffcc;
  --accent3: #ffd300;
  --bg: #0a0a0a;
}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:6vh 4vw;
  box-sizing:border-box;
}

/* =============================
   ELEMENT 1 — COLLAGE HEAD
   ============================= */
.collage{
  position:relative;
  width:96vw;
  max-width:1400px;
  min-height:var(--h);
  overflow:visible;
  border:6px dashed rgba(255,255,255,0.03);
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03), transparent 8%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%);
  isolation:isolate;
}

/* NOISE BACKGROUND */
.collage::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:overlay;
  filter:contrast(130%) saturate(120%);
  opacity:0.45;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, rgba(20,10,30,0.15), rgba(255,255,255,0.02));
  -webkit-mask: radial-gradient(circle at 80% 20%, transparent 0 28%, black 28%);
  transform:translateZ(0);
  backdrop-filter: blur(0.5px);
  z-index:1;
  filter:url('#turb');
}

/* NEON RIBBONS */
.ribbon{
  position:absolute;
  width:220%;
  height:30%;
  left:-60%;
  top:-12%;
  transform-origin:center;
  transform:rotate(-12deg);
  mix-blend-mode:screen;
  opacity:0.95;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,0,102,0.9) 0 20%,
    rgba(0,255,204,0.8) 40% 60%,
    rgba(255,211,0,0.9) 80% 100%);
  filter:blur(8px) saturate(180%);
  animation:ribbon-sway 6s ease-in-out infinite;
}
.ribbon.alt{
  top:18%;
  left:-20%;
  transform:rotate(6deg) scaleX(0.9);
  animation-duration:4.6s;
  mix-blend-mode:difference;
  opacity:0.85;
  filter:blur(6px) contrast(120%);
}
@keyframes ribbon-sway{
  0%{transform:rotate(-12deg) translateX(0)}
  50%{transform:rotate(-8deg) translateX(4%)}
  100%{transform:rotate(-12deg) translateX(0)}
}

/* SHARDS */
.shard{
  position:absolute;
  width:28vmax;
  height:18vmax;
  background:linear-gradient(120deg, rgba(255,255,255,0.06), rgba(30,0,60,0.12));
  transform-origin:center;
  clip-path:polygon(0 12%,70% 0,100% 38%,86% 100%,10% 86%);
  mix-blend-mode:overlay;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,0.6)) blur(0.8px);
  z-index:3;
  pointer-events:none;
}
.shard.one{left:6%;top:10%;transform:rotate(-6deg) scale(1.02);
  background:linear-gradient(145deg, rgba(255,0,102,0.08), rgba(0,255,204,0.03));}
.shard.two{right:8%;top:-4%;transform:rotate(18deg) scale(0.86);
  background:linear-gradient(45deg, rgba(0,0,0,0.06), rgba(255,211,0,0.05));
  mix-blend-mode:difference;}
.shard.three{left:20%;bottom:-6%;transform:rotate(-24deg) scale(0.9);
  background:linear-gradient(220deg, rgba(255,255,255,0.02), rgba(0,10,40,0.12));}

/* SHOUTS */
.shouts{position:absolute;inset:0;z-index:6;pointer-events:none;}
.shout{
  position:absolute;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:clamp(18px,5.6vmin,88px);
  line-height:0.88;
  transform-origin:center;
  mix-blend-mode:screen;
  opacity:0.95;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.6));
  white-space:nowrap;
  will-change:transform,filter,opacity;
}
.shout.one{left:6%;top:12%;color:var(--accent1);
  transform:rotate(-9deg) scale(1.05);
  animation:float 5s ease-in-out infinite,color-shift 3.2s linear infinite;}
.shout.two{right:4%;top:22%;color:var(--accent2);
  transform:rotate(18deg) scale(1.14);
  mix-blend-mode:difference;
  animation:float 6.2s ease-in-out alternate infinite,glitch 2.6s steps(4) infinite;}
.shout.three{left:32%;top:34%;color:var(--accent3);
  transform:rotate(-16deg);
  animation:float 4.6s ease-in-out infinite;
  font-size:clamp(16px,4.5vmin,56px);
  mix-blend-mode:overlay;}
@keyframes float{
  0%{transform:translateY(0) rotate(var(--r)) scale(var(--s));}
  30%{transform:translateY(-6%) rotate(calc(var(--r)*1.06)) scale(calc(var(--s)*1.02));}
  60%{transform:translateY(2%) rotate(calc(var(--r)*0.98)) scale(var(--s));}
  100%{transform:translateY(0) rotate(var(--r)) scale(var(--s));}
}
@keyframes color-shift{
  0%{filter:hue-rotate(0deg) saturate(1)}
  50%{filter:hue-rotate(120deg) saturate(1.6)}
  100%{filter:hue-rotate(0deg) saturate(1)}
}
@keyframes glitch{
  0%{transform:translateX(0)}
  5%{transform:translateX(-6px) skewX(-2deg)}
  10%{transform:translateX(8px) skewX(2deg)}
  12%{transform:translateX(0)}
  40%{transform:translateX(0)}
  70%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

/* GLITCH OVERLAY */
.glitch-overlay,
.glitch-overlay::after,
.glitch-overlay::before{
  position:absolute;
  left:0;top:0;inset:0;
  pointer-events:none;
  z-index:7;
  mix-blend-mode:lighter;
  opacity:0.12;
  background:linear-gradient(90deg,transparent 0%,rgba(255,10,60,0.08) 25%,rgba(10,255,200,0.06) 75%,transparent 100%);
  animation:overlay-shift 8s linear infinite;
}
.glitch-overlay::before{
  content:"";
  mix-blend-mode:screen;
  opacity:0.08;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.06));
  transform:translateY(-4px);
}
.glitch-overlay::after{
  content:"";
  mix-blend-mode:difference;
  opacity:0.06;
  transform:translateX(6px);
}
@keyframes overlay-shift{
  0%{transform:translateX(0)}
  50%{transform:translateX(-8%)}
  100%{transform:translateX(0)}
}

/* RESPONSIVE */
@media (max-width:700px){
  .shard{width:54vmax;height:28vmax;}
  .ribbon{height:38%;}
}

/* =============================
   ELEMENT 2 — SCROLLING TAPE
   ============================= */
.scroll-tape{
  position:relative;
  width:100%;
  height:60vh;
  overflow:hidden;
  background:linear-gradient(180deg,#ff0066 0%,#00ffcc 60%,#ffd300 100%);
  mix-blend-mode:exclusion;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:8;
  border-top:6px solid rgba(255,255,255,0.06);
  border-bottom:6px solid rgba(255,255,255,0.06);
  box-shadow:inset 0 0 40px rgba(0,0,0,0.8);
}
.scroll-inner{
  display:flex;
  flex-direction:column;
  animation:scroll-up 12s linear infinite;
}
.tape-line{
  font-size:clamp(18px,5vmin,60px);
  text-transform:uppercase;
  font-weight:900;
  color:white;
  text-shadow:0 0 6px rgba(0,0,0,0.4);
  letter-spacing:0.1em;
  margin:1rem 0;
  mix-blend-mode:difference;
  animation:flicker 3s infinite steps(4) alternate;
  transform-origin:center;
}
.tape-line:nth-child(2n){transform:rotate(3deg) scaleY(-1);color:#ff0066;}
.tape-line:nth-child(3n){transform:rotate(-4deg) scaleX(-1);color:#00ffcc;}
.tape-line:nth-child(4n){transform:rotate(7deg) scale(1.1);color:#ffd300;}

@keyframes scroll-up{
  0%{transform:translateY(100%)}
  100%{transform:translateY(-100%)}
}
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;filter:hue-rotate(0deg);}
  20%,22%,24%,55%{opacity:0.6;filter:hue-rotate(180deg) invert(1);}
}