:root{
  --bg:#0a0a0a; --fg:#f2f2f2;
  --accent1:#00ffd5; --accent2:#ff2e9f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.site-nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);border-bottom:1px solid #161616}
.site-nav .brand{font-family:'Bangers',system-ui;letter-spacing:.04em;font-size:1.25rem}
.site-nav nav a{margin-left:1rem;opacity:.85}
.site-nav nav a:hover{opacity:1}

.hero{min-height:70vh;display:grid;place-items:center;position:relative;overflow:hidden;background:#111}
.hero::after{z-index:0;content:"";position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center;opacity:.55;filter:contrast(1.05) saturate(1.05)}
.hero .hero-inner{position:relative;text-align:center;padding:3rem 1rem;z-index:1}
.graffiti-hero{font-family:'Bangers',system-ui;font-size:clamp(3rem,12vw,7rem);margin:0;text-shadow:-2px -2px 0 rgba(0,0,0,.35),2px -2px 0 rgba(0,0,0,.35),-2px 2px 0 rgba(0,0,0,.35),2px 2px 0 rgba(0,0,0,.35),0 0 28px rgba(0,0,0,.5);color:transparent;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text}
.tagline{margin:.25rem 0 1rem;font-family:'Permanent Marker',system-ui;font-size:1.2rem;opacity:.95}
.cta{display:inline-block;padding:.7rem 1.1rem;border:1px solid #3a3a3a;border-radius:999px;background:#0f0f0f;box-shadow:0 0 0 2px rgba(255,255,255,.02);}
.cta:hover{box-shadow:0 0 18px rgba(0,255,213,.25),0 0 28px rgba(255,46,159,.2)}

.panel{padding:3rem 1rem;max-width:1100px;margin:0 auto}
.panel-head{text-align:center;margin-bottom:1rem}
.panel-head h2{font-family:'Bangers',system-ui;font-size:2.2rem;letter-spacing:.03em;margin:.2rem 0}
.panel-head p{font-family:'Permanent Marker',system-ui;margin:0;opacity:.9}

.music-grid,.video-grid{display:grid;place-items:center;margin-top:.75rem}
.platform-row{display:flex;gap:.6rem;justify-content:center;margin-top:.75rem;flex-wrap:wrap}
.btn{padding:.65rem 1rem;border-radius:999px;border:1px solid #2a2a2a;background:#121212}
.btn.ghost{background:transparent}

.merch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.card{background:#0f0f0f;border:1px solid #1b1b1b;border-radius:16px;padding:1rem;text-align:center}
.thumb.placeholder{height:160px;border-radius:12px;background:linear-gradient(135deg,#151515,#0f0f0f);border:1px dashed #2a2a2a}

.empty-tour{display:flex;gap:.75rem;justify-content:center;margin-top:.5rem;flex-wrap:wrap}

.site-footer{padding:2.2rem 1rem;text-align:center;border-top:1px solid #1a1a1a;position:relative;overflow:hidden}
.follow-label{ text-transform:uppercase;font-size:.85rem;letter-spacing:.25em;color:#fff;text-align:center;margin-top:1.2rem;margin-bottom:.8rem;position:relative;display:inline-block;left:50%;transform:translateX(-50%);padding:.25rem .75rem;z-index:1;
  text-shadow:0 0 6px rgba(0,255,213,.8),0 0 12px rgba(255,46,159,.6),0 0 20px rgba(0,255,213,.5)}
.follow-label::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,255,213,.2), rgba(255,46,159,.2));filter:blur(8px);z-index:-1;transform:skewX(-12deg)}
.socials.icons{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:.5rem;position:relative;z-index:2}
.socials.icons .social{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;color:#cfcfcf;background:#0d0d0d;border:1px solid #1c1c1c;transition:transform .15s ease, color .15s ease, filter .15s ease, box-shadow .15s ease; position:relative; overflow:visible}
.socials.icons .social svg{width:24px;height:24px}
.socials.icons .social::before{content:""; position:absolute; inset:-6px; border-radius:inherit; box-shadow:0 0 0 0 rgba(0,255,213,0), 0 0 0 0 rgba(255,46,159,0); transition: box-shadow .2s ease;}
.socials.icons .social:hover{color:#fff; transform:translateY(-1px) rotate(-0.5deg); filter: drop-shadow(0 0 8px rgba(0,255,213,.3)) drop-shadow(0 0 16px rgba(255,46,159,.2)); box-shadow: 0 0 0 2px rgba(255,255,255,.06), inset 0 0 20px rgba(255,255,255,.03);}
.socials.icons .social:hover::before{ box-shadow: 0 0 24px 10px rgba(0,255,213,.15), 0 0 40px 16px rgba(255,46,159,.12);}
.copyright{margin-top:1rem;opacity:.7;font-size:.9rem}

/* Neon splatter effects across sections */
.hero::before{content:"";position:absolute;top:-80px;left:50%;width:900px;height:500px;background:
  radial-gradient(circle at 40% 40%, rgba(0,255,213,.22) 0%, transparent 60%),
  radial-gradient(circle at 65% 60%, rgba(255,46,159,.20) 0%, transparent 65%);
filter:blur(70px); transform:translateX(-50%) rotate(-6deg); pointer-events:none; z-index:0;}
#music.panel{position:relative;overflow:hidden}
#music.panel::before{content:""; position:absolute; top:-40px; left:50%; width:900px; height:260px; background:
  radial-gradient(circle at 30% 60%, rgba(0,255,213,.16) 0%, transparent 70%),
  radial-gradient(circle at 70% 40%, rgba(255,46,159,.16) 0%, transparent 70%);
filter:blur(70px); transform:translateX(-50%) rotate(-4deg); pointer-events:none; z-index:0;}
#live.panel{position:relative;overflow:hidden}
#live.panel::before{content:""; position:absolute; inset:auto 0 0 50%; width:800px; height:360px; background:
  radial-gradient(circle at 30% 50%, rgba(0,255,213,.18) 0%, transparent 70%),
  radial-gradient(circle at 70% 70%, rgba(255,46,159,.18) 0%, transparent 75%);
filter:blur(80px); transform:translateX(-50%) rotate(4deg); pointer-events:none; z-index:0;}
#merch.panel{position:relative;overflow:hidden}
#merch.panel::before{content:""; position:absolute; inset:0 0 -120px 50%; width:1000px; height:520px; background:
  radial-gradient(circle at 30% 60%, rgba(0,255,213,.17) 0%, transparent 70%),
  radial-gradient(circle at 70% 40%, rgba(255,46,159,.17) 0%, transparent 70%),
  radial-gradient(circle at 50% 80%, rgba(255,214,0,.11) 0%, transparent 75%);
filter:blur(85px); transform:translateX(-50%) rotate(-3deg); pointer-events:none; z-index:0;}
.site-footer::before{content:""; position:absolute; top:-40px; left:50%; width:600px; height:300px; background:
  radial-gradient(circle at 30% 30%, rgba(0,255,213,.25) 0%, transparent 70%),
  radial-gradient(circle at 70% 60%, rgba(255,46,159,.25) 0%, transparent 70%),
  radial-gradient(circle at 40% 80%, rgba(0,255,213,.2) 0%, transparent 80%);
filter:blur(60px); transform:translateX(-50%) rotate(-8deg); pointer-events:none; z-index:0;}

/* Mobile tweaks */
@media (max-width:700px){
  .site-nav nav a{margin-left:.7rem}
  .panel{padding:2.2rem 1rem}
}


/* ==== Cloud Visualizer ==== */

.hero .hero-inner{position:relative; z-index:2}




/* CSS-only moving clouds fallback */
.hero::after{
  animation: panClouds 45s linear infinite alternate, zoomClouds 22s ease-in-out infinite alternate;
  background-size: 120% 120%;
  background-position: 50% 40%;
}
@keyframes panClouds{
  0%{ background-position: 45% 35%; }
  50%{ background-position: 55% 50%; }
  100%{ background-position: 60% 45%; }
}
@keyframes zoomClouds{
  0%{ transform: scale(1.02); }
  100%{ transform: scale(1.07); }
}


/* === Bubble Graffiti Headers === */
.site-nav .brand,
.graffiti-hero,
.panel-head h2{
  font-family: 'Rubik Wet Paint', system-ui, sans-serif !important;
  letter-spacing: .02em;
}
/* Strong, legible outline */
.graffiti-hero,
.panel-head h2,
.site-nav .brand{
  text-shadow:
    -2px -2px 0 rgba(0,0,0,.6),
     2px -2px 0 rgba(0,0,0,.6),
    -2px  2px 0 rgba(0,0,0,.6),
     2px  2px 0 rgba(0,0,0,.6),
     0    0   22px rgba(0,0,0,.35);
}
/* Keep hero colorful */
.graffiti-hero{
  color: transparent;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
}
/* Section headings: monochrome with subtle neon hover for links (if any) */
.panel-head h2{
  color:#f6f6f6;
}


@font-face{
  font-family:"FVTCVT-Street";
  src:url("assets/fonts/DocallismeOnStreet-ZVO1Z.otf") format("opentype");
  font-display:swap;
}

/* Dual-layer merged font effect */
.dual-font{
  position:relative;
  display:inline-block;
  font-family:"FVTCVT-Bubble", system-ui, sans-serif;
  color:transparent;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  letter-spacing:.02em;
}
.dual-font::after{
  content:attr(data-text);
  position:absolute; inset:0;
  font-family:"FVTCVT-Street", system-ui, sans-serif;
  color:transparent;
  -webkit-text-stroke: 2px rgba(0,0,0,.75);
  text-shadow:
    0 0 10px rgba(0,255,213,.25),
    0 0 16px rgba(255,46,159,.2);
  pointer-events:none;
}

/* Apply to brand, hero, and section headings */
.site-nav .brand.dual-font,
.graffiti-hero.dual-font,
.panel-head h2.dual-font{
  text-shadow:
    -2px -2px 0 rgba(0,0,0,.45),
     2px -2px 0 rgba(0,0,0,.45),
    -2px  2px 0 rgba(0,0,0,.45),
     2px  2px 0 rgba(0,0,0,.45);
}


/* === FVTCVT Bubble Font (primary display) === */
@font-face{
  font-family:"FVTCVT-Bubble";
  src:url("assets/fonts/FluffyblitzdemoRegular-yY415.otf") format("opentype");
  font-display:swap;
}

/* Apply to brand, hero, and section headings */
.site-nav .brand,
.graffiti-hero,
.panel-head h2{
  font-family:"FVTCVT-Bubble", system-ui, sans-serif !important;
  letter-spacing:.02em;
}

/* Strengthen legibility over images (WCAG contrast helpers) */

.graffiti-hero, .panel-head h2{
  text-shadow: 1px 1px 0 rgba(0,0,0,.8), 2px 2px 0 rgba(0,0,0,.6); }
.graffiti-hero{
  color:transparent;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
}


/* === Docallisme Display (3D Neon) === */
@font-face{
  font-family:"FVTCVT-Doc";
  src:url("assets/fonts/DocallismeOnStreet-ZVO1Z.otf") format("opentype");
  font-display:swap;
}
.site-nav .brand,
.graffiti-hero,
.panel-head h2{
  font-family:"FVTCVT-Doc", system-ui, sans-serif !important;
  letter-spacing:.02em;
  color:transparent;
  background: linear-gradient(90deg, var(--accent1) 0%, #ff2e9f 40%, #a23bff 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:
    0.5px 0.5px 0 rgba(0,0,0,.8),
    1px 1px 0 rgba(0,0,0,.8),
    1.5px 1.5px 0 rgba(0,0,0,.75),
    2px 2px 0 rgba(0,0,0,.7),
    2.5px 2.5px 0 rgba(0,0,0,.6),
    0 0 18px rgba(0,255,213,.25),
    0 0 28px rgba(255,46,159,.18);
}
/* Slightly larger section titles for presence */
.panel-head h2{ font-size: clamp(2rem, 6vw, 3rem); }
.graffiti-hero{ font-size: clamp(3.5rem, 12vw, 7.5rem); }
.site-nav .brand{ font-size: 1.35rem; }


/* === Chrome Graffiti Effects === */
.chrome-word{display:inline-flex; gap:.06em; align-items:flex-end}
.chrome-letter{
  position:relative; display:inline-block;
  font-family:"FVTCVT-Doc", system-ui, sans-serif;
  font-size:1em; /* inherits from parent heading */
  line-height:1; letter-spacing:.01em;
  color:transparent;
  -webkit-background-clip:text; background-clip:text;
  /* 3D depth */
  text-shadow:
    0.5px 0.5px 0 #000,
    1px 1px 0 #000,
    1.5px 1.5px 0 #000,
    2px 2px 0 #000,
    2.5px 2.5px 0 #000,
    0 0 12px rgba(0,255,213,.22),
    0 0 20px rgba(255,46,159,.18);
}
/* Per-letter chrome fills */
.c-cyan{ background-image: linear-gradient(180deg,#bffcff 0%,#74e7f0 35%,#e6ffff 50%,#5ac7d6 65%,#0eb0c9 100%); }
.c-magenta{ background-image: linear-gradient(180deg,#ffd0f3 0%,#ff87d0 35%,#fff0fb 50%,#ff61c1 65%,#e02ea2 100%); }
.c-purple{ background-image: linear-gradient(180deg,#efddff 0%,#be8cff 35%,#ffffff 50%,#a56bff 65%,#7a35ff 100%); }
.c-green{ background-image: linear-gradient(180deg,#d6ffea 0%,#94f7c0 35%,#ffffff 50%,#63e6a2 65%,#21c97a 100%); }
.c-gold{ background-image: linear-gradient(180deg,#fff2c2 0%,#ffd86a 35%,#ffffff 50%,#ffc93d 65%,#ffb300 100%); }
.c-red{ background-image: linear-gradient(180deg,#ffd6d6 0%,#ff8a8a 35%,#ffffff 50%,#ff6a6a 65%,#e03030 100%); }

/* Animated chrome shine */


  50%{ opacity:1; }
  100%{ transform: translateX(140%) rotate(8deg); opacity:.7; }
}

/* Drips (subtle) */
.chrome-letter::before{
  content:""; position:absolute; bottom:-0.18em; left:35%;
  width:.16em; height:.4em; border-radius:.16em;
  background: currentColor; filter: blur(0.5px); opacity:.85;
  box-shadow: 0 0 8px rgba(0,0,0,.4);
  transform: translateX(-50%);
  display:none; /* default off for cleanliness */
}
/* Enable drips for hero only for impact */
.graffiti-hero .chrome-letter::before{ display:block; }

/* Scale letters inside headings */
.graffiti-hero .chrome-letter{ font-size: clamp(3.5rem, 12vw, 7.5rem); }
.site-nav .brand .chrome-letter{ font-size: 1.35rem; }
.panel-head h2.chrome-title{ font-family:"FVTCVT-Doc", system-ui, sans-serif; }
.panel-head h2.chrome-title{ 
  color:transparent; 
  background-image: linear-gradient(180deg,#f8f8f8 0%,#cfcfcf 35%,#ffffff 50%,#b3b3b3 65%,#8e8e8e 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:
    0.5px 0.5px 0 #000,
    1px 1px 0 #000,
    1.5px 1.5px 0 #000,
    0 0 12px rgba(0,255,213,.18);
  position:relative; display:inline-block;
}



/* === Solid Bold Neon Letter Fills === */
.c-cyan{ color:#00eaff; background:none !important; -webkit-background-clip:initial; }
.c-magenta{ color:#ff2ea6; background:none !important; -webkit-background-clip:initial; }
.c-purple{ color:#a23bff; background:none !important; -webkit-background-clip:initial; }
.c-green{ color:#21c97a; background:none !important; -webkit-background-clip:initial; }
.c-gold{ color:#ffb300; background:none !important; -webkit-background-clip:initial; }
.c-red{ color:#ff4040; background:none !important; -webkit-background-clip:initial; }

.chrome-letter{
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000;
}


/* === Final: Multicolor per-letter section headers === */
.c-cyan{ color:#00eaff }
.c-magenta{ color:#ff2ea6 }
.c-purple{ color:#a23bff }
.c-green{ color:#21c97a }
.c-gold{ color:#ffb300 }
.c-red{ color:#ff4040 }

.panel-head h2{ color:inherit; }
.h2-letter{
  display:inline-block; position:relative; line-height:1;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000;
  margin-right:.02em;
}


/* === Solid Bold Neon Letter Fills for All Headers === */
.c-cyan{ color:#00eaff !important; background:none !important; -webkit-background-clip:initial; }
.c-magenta{ color:#ff2ea6 !important; background:none !important; -webkit-background-clip:initial; }
.c-purple{ color:#a23bff !important; background:none !important; -webkit-background-clip:initial; }
.c-green{ color:#21c97a !important; background:none !important; -webkit-background-clip:initial; }
.c-gold{ color:#ffb300 !important; background:none !important; -webkit-background-clip:initial; }
.c-red{ color:#ff4040 !important; background:none !important; -webkit-background-clip:initial; }

.h-letter{
  display:inline-block; position:relative; line-height:1;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000;
  margin-right:.02em;
}


/* === Global: Solid per-letter neon fills for headers & subheaders === */
.c-cyan{ color:#00eaff }
.c-magenta{ color:#ff2ea6 }
.c-purple{ color:#a23bff }
.c-green{ color:#21c97a }
.c-gold{ color:#ffb300 }
.c-red{ color:#ff4040 }

.multi-letter{
  display:inline-block; position:relative; line-height:1.05;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000;
  margin-right:.02em;
}


/* === Force graffiti font letters to show CSS colors === */
.multi-letter{
  display:inline-block;
  position:relative;
  line-height:1.05;
  margin-right:.02em;
  color:inherit;
  -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000;
}


/* === FORCE neon fill over graffiti font === */
.multi-letter{
  -webkit-text-fill-color: currentColor;
  text-fill-color: currentColor; /* non-webkit fallbacks where supported */
  color: inherit; /* color is set by per-letter classes below */
}
.c-cyan{ color:#00eaff !important; }
.c-magenta{ color:#ff2ea6 !important; }
.c-purple{ color:#a23bff !important; }
.c-green{ color:#21c97a !important; }
.c-gold{ color:#ffb300 !important; }
.c-red{ color:#ff4040 !important; }
.panel-head h2, .panel-head p{
  -webkit-text-fill-color: inherit;
}