/* =========================================
   THE NEUROPLASTIC – METALLIC GRUNGE VIBES
   ========================================= */

/* ======  CUSTOM FONTS  ====== */
@font-face {
  font-family: 'Neuroplastic';
  src: url('../fonts/neuroplastic.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Interstate';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.neuro { font-family: 'Neuroplastic', 'Orbitron', sans-serif; }
.interstate { font-family: 'Interstate', 'Courier Prime', monospace; }

/* ======  APPLY THEM  ====== */
/* headers */
h1, h2, h3, .logo-glitch, .tagline {
  font-family: 'Neuroplastic', 'Orbitron', sans-serif;
}

/* body / paragraph text */
body, p, .show-item, .date, .venue, .location, footer {
  font-family: 'Interstate', 'Courier Prime', monospace;
}

:root {
  --purple-deep: #0b1f32;   /* almost-black navy */
  --purple-glow: #00ffff;   /* bright cyan */
  --silver-grime: #c0c0c0;
  --silver-dark: #7a7a7a;
  --noise-overlay: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBudW1PY3RhdmVzPSIxMCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iMC4xIi8+PC9zdmc+');
}

/* ---------- AUTO-REPLACE OLD ACCENTS ---------- */
h2,
.glitch,                     /* keeps old class name, now cyan */
.tagline,
.date,
.social-links a:hover,
.show-item:hover {
  color: var(--purple-glow);
  text-shadow: 0 0 10px var(--purple-glow);
}

/* ---------- BANDCAMP PLAYER BORDER ---------- */
.bandcamp-embed {
  border-color: var(--purple-glow);
  box-shadow: 0 0 20px var(--purple-glow);
}

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

/* ========= HYPER-SENSITIVE SCROLL FOIL ========= */
body {
  --purple-deep: #3a0e6b;
  --toxic-orange: #ff3b1f;

  background-image:
    /* 1) hi-frequency noise = tiny folds */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),
    /* 2) fast-moving specular */
    linear-gradient(
      105deg,
      transparent 35%,
      rgba(255,59,31,.55) 45%,
      rgba(255,200,50,.75) 50%,
      rgba(199,125,255,.45) 55%,
      transparent 65%
    ),
    /* 3) base purple→orange */
    linear-gradient(135deg, var(--purple-deep) 0%, #902b4f 40%, var(--toxic-orange) 100%);

  background-size:
    128px 128px,   /* small tiles = dense folds */
    150% 150%,     /* specular gradient */
    100% 100%;

  background-blend-mode: overlay, screen, normal;
  background-attachment: scroll, scroll, scroll;

  /* 1 second = full travel → super sensitive */
  animation: microCrinkle 1s linear paused;
  filter: saturate(1.3) contrast(1.35);
}

@keyframes microCrinkle {
  0%   { background-position: 0 0, 0% 0%, 50% 50%; }
  100% { background-position: 256px 512px, 100% 100%, 50% 50%; }
}

/* same play-state switch */
body.scrolling { animation-play-state: running; }

/* ========== PARTICLE CANVAS ========== */
#particleCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    opacity: 0.4;
}

/* ========== SCANLINES ========== */
.scanlines {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.15) 0px,
        rgba(0,0,0,0.15) 1px,
        transparent 1px,
        transparent 4px
    );
    animation: scanMove 8s linear infinite;
}

/* ========== GLITCH TEXT ========== */
.glitch {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    color: var(--silver-grime);
    text-shadow: 0 0 10px var(--purple-glow);
    position: relative;
    animation: glitch 3s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.glitch::before {
    animation: glitch-1 .5s infinite;
    color: var(--purple-glow);
    z-index: -1;
}

.glitch::after {
    animation: glitch-2 .5s infinite;
    color: #fff;
    z-index: -2;
}

.tagline {
    font-size: 1.2rem;
    margin-top: 10px;
    letter-spacing: 5px;
    opacity: 0.8;
}

/* ---------- LOGO GLITCH ---------- */
.logo-glitch {
  display: inline-block;
  position: relative;
  filter: drop-shadow(0 0 10px var(--purple-glow));
  animation: logo-glitch-anim 2.5s infinite steps(1);
}

.logo-glitch img {
  width: 420px;            /* tweak to taste */
  max-width: 90vw;
  height: auto;
}

/* glitch slices */
.logo-glitch::before,
.logo-glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/logo.png") no-repeat center/contain;
  mix-blend-mode: screen;
}

.logo-glitch::before {
  animation: logo-glitch-1 .15s infinite;
  clip: rect(0, 999px, 0, 0);
  transform: translateX(-2px);
  filter: hue-rotate(180deg) brightness(1.2);
}

.logo-glitch::after {
  animation: logo-glitch-2 .15s infinite;
  clip: rect(0, 999px, 0, 0);
  transform: translateX(2px);
  filter: hue-rotate(-120deg) brightness(1.3);
}

/* keyframes */
@keyframes logo-glitch-anim {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

@keyframes logo-glitch-1 {
  0%   { clip: rect(12px, 999px, 65px, 0); }
  20%  { clip: rect(45px, 999px, 90px, 0); }
  40%  { clip: rect(5px, 999px, 40px, 0); }
  60%  { clip: rect(70px, 999px, 120px, 0); }
  80%  { clip: rect(30px, 999px, 80px, 0); }
  100% { clip: rect(90px, 999px, 150px, 0); }
}

@keyframes logo-glitch-2 {
  0%   { clip: rect(50px, 999px, 110px, 0); }
  20%  { clip: rect(10px, 999px, 60px, 0); }
  40%  { clip: rect(80px, 999px, 140px, 0); }
  60%  { clip: rect(25px, 999px, 75px, 0); }
  80%  { clip: rect(95px, 999px, 135px, 0); }
  100% { clip: rect(15px, 999px, 55px, 0); }
}

/* keeps it purple-cyan-silver like the rest of the site */
@media (prefers-color-scheme: dark) {
  .logo-glitch img { filter: brightness(.95) contrast(1.05); }
}

.logo-glitch:hover {
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 25px var(--purple-glow));
  transition: filter .3s;
}

.logo-glitch {
  display: block;
  text-align: center;
  margin: 0 auto;
}
	
.logo-glitch img {
  width: 546px;               /* 420 px * 1.3 */
  max-width: 90vw;
  height: auto;
}

.tagline {
  font-family: 'Interstate', 'Courier Prime', monospace;
  margin-top: -45px;
  margin-bottom: -45px;
  font-size: 1.1rem;
  letter-spacing: 5px;
  text-align: center;
  color: var(--purple-glow);
  text-shadow: 0 0 10px var(--purple-glow);
}

/* ========== SECTIONS ========== */
section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    color: var(--purple-glow);
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 0 0 15px var(--purple-glow);
}

/* ========== BANDCAMP ========== */
.bandcamp-embed {
    display: flex;
    justify-content: center;
    padding: 30px;
    background: rgba(58, 14, 107, 0.3);
    border: 2px solid var(--silver-grime);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(199, 125, 255, 0.5);
}

.bandcamp-embed iframe {
    width: 100%;
    max-width: 700px;
    height: 208px;
    border: none;
}

/* ---- fishbowl container ---- */
.gallery-section {
  position: relative;
  max-width: 1000px;
  margin: 80px auto;
  text-align: center;
  overflow: hidden;
}

#fishbowl {
  width: 100%;
  height: auto;
  max-width: 900px;
  cursor: grab;
  display: block;
  margin: 0 auto;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 60%, transparent 100%);
}

#fishbowl:active { cursor: grabbing; }

.sub-hint {
  margin: -55px 0 15px 0;   /* pull up 5 px, then 15 px down-space */
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--purple-glow);
  text-shadow: 0 0 8px var(--purple-glow);
  text-align: center;
  font-family: 'Interstate', 'Courier Prime', monospace;
}

/* ========== ANIMATIONS ========== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes glitch-1 {
    0%, 100% { clip: rect(0, 900px, 0, 0); }
    25% { clip: rect(0, 900px, 20px, 0); }
    50% { clip: rect(50px, 900px, 90px, 0); }
    75% { clip: rect(30px, 900px, 60px, 0); }
}

@keyframes glitch-2 {
    0%, 100% { clip: rect(0, 900px, 0, 0); }
    25% { clip: rect(20px, 900px, 40px, 0); }
    50% { clip: rect(70px, 900px, 100px, 0); }
    75% { clip: rect(10px, 900px, 50px, 0); }
}

@keyframes scanMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .glitch { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .bandcamp-embed { padding: 15px; }
    .polaroid { border-bottom-width: 30px; }
}

/* ========= MOSS-FRAME BANDCAMP ========= */
.bandcamp-embed {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 40px 30px 30px;
  background: rgba(11, 31, 50, .45);
  border-radius: 8px;
  overflow: visible;
}

/* moss border (four sides) */
.bandcamp-embed::before {
  content: "";
  position: absolute;
  inset: -12px;               /* grow outside padding */
  border-radius: 12px;
  background:
    /* top edge */
    radial-gradient(ellipse 100% 40% at 50% 0,    #2e7d32 0%, transparent 60%),
    /* right edge */
    radial-gradient(ellipse 40% 100% at 100% 50%,  #388e3c 0%, transparent 60%),
    /* bottom edge */
    radial-gradient(ellipse 100% 40% at 50% 100%, #4caf50 0%, transparent 60%),
    /* left edge */
    radial-gradient(ellipse 40% 100% at 0 50%,    #2e7d32 0%, transparent 60%);
  z-index: -1;
  animation: mossGrow 6s ease-in-out infinite alternate;
}

/* glowing spores */
.bandcamp-embed::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  box-shadow:
    0 0 8px 2px #4caf50,
    0 0 12px 4px #66bb6a,
    0 0 16px 6px #81c784;
  opacity: 0.7;
  animation: sporePulse 3s infinite;
  z-index: -2;
}

@keyframes mossGrow {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.02) rotate(.5deg); }
}

@keyframes sporePulse {
  0%, 100% { opacity: .5; filter: blur(0px); }
  50%      { opacity: .9; filter: blur(1px); }
}

/* keep player inside the moss */
.bandcamp-embed iframe {
  width: 100%;
  max-width: 700px;
  height: 208px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 0, 0, .5);
}

.about-section { max-width: 1200px; margin: 80px auto; padding: 0 20px; text-align:center; }
.about-box      { background:rgba(58,14,107,.3); border:2px solid var(--silver-grime);
                  border-radius:8px; padding:20px; box-shadow:0 0 20px rgba(199,125,255,.5);
                  color:var(--silver-grime); font-family:'Interstate','Courier Prime',monospace; }
summary        { cursor:pointer; font-weight:bold; letter-spacing:2px;
                  color:var(--purple-glow); text-shadow:0 0 10px var(--purple-glow); }
details[open]  { animation:fadeIn .4s; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* make ABOUT text cyan + glow */
.about-box,
.about-box p,
.about-box summary {
  color: var(--purple-glow);
  text-shadow: 0 0 10px var(--purple-glow);
}

/* Add this class to wrap the canvas in your HTML */
.fishbowl-wrapper {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  flex-direction: column; /* Stacks children vertically */
  width: 100%; /* Full width of the parent */
  max-width: 900px; /* Max width */
  margin: 0 auto; /* Centers the wrapper */
}

/* Adjust the canvas styles if needed */
#fishbowl {
  width: 100%; /* Full width of the wrapper */
  height: auto; /* Adjust height automatically */
  max-height: 600px; /* Max height */
}

.videos-section { max-width:1200px; margin:80px auto; padding:0 20px; text-align:center; }

.dream-track {
  display:flex;
  gap:2rem;
  overflow-x:auto;
  padding:40px 10px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--purple-glow) transparent;
  -webkit-mask:radial-gradient(ellipse 90% 70% at 50% 50%, #000 60%, transparent 100%);
  mask:radial-gradient(ellipse 90% 70% at 50% 50%, #000 60%, transparent 100%);
}

.dream-track::-webkit-scrollbar { height:6px; }
.dream-track::-webkit-scrollbar-thumb { background:var(--purple-glow); border-radius:3px; }

.dream-slide {
  flex:0 0 360px;               /* slightly smaller for curved illusion */
  height:270px;
  scroll-snap-align:start;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 25px rgba(199,125,255,.55);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  filter:saturate(1.1) contrast(1.05);
}

/* spherical pop on hover / focus */
.dream-slide:hover,
.dream-slide:focus-within {
  transform:scale(1.08) translateZ(20px);
  box-shadow:0 0 40px 8px rgba(0,255,255,.45);
}

.dream-slide iframe {
  width:100%; height:100%; border:none;
  border-radius:inherit;
}

/* ========== SHOWS ========== */
.shows-list {
    background: rgba(0,0,0,0.6);
    border: 2px solid var(--purple-glow);
    border-radius: 8px;
    padding: 30px;
    font-size: 1.1rem;
}

.show-item {
    padding: 15px;
    margin-bottom: 15px;
    background: rgba(58, 14, 107, 0.4);
    border-left: 4px solid var(--silver-grime);
    transition: all 0.3s;
}

.show-item:hover {
    border-left-color: var(--purple-glow);
    transform: translateX(5px);
    box-shadow: -5px 0 15px rgba(199, 125, 255, 0.5);
}

.date { color: var(--purple-glow); font-weight: bold; }
.venue { color: var(--silver-grime); margin: 5px 0; }
.location { opacity: 0.7; font-size: 0.9rem; }

/* ========== FOOTER ========== */
footer {
    text-align: center;
    padding: 40px;
    background: rgba(0,0,0,0.5);
    border-top: 2px solid var(--silver-grime);
}

.social-links a {
    color: var(--silver-grime);
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--purple-glow);
    text-shadow: 0 0 10px var(--purple-glow);
}