/* =========================================================
   ARTIST PORTFOLIO — grunge / paint-splash design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,600;9..144,700;9..144,900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --black: #000000;
  --black-soft: #131313;
  --white: #f2f2ee;
  --pink: #ef1e79;
  --lime: #c6d92c;
  --cyan: #1ecbdd;
  --grey: #8a8a86;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Space Grotesk', Arial, sans-serif;

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --nav-height: 68px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; overflow-x: hidden; background-color: var(--black); }

body{
  margin: 0;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
  position: relative;
}

/* everything after the hero — the texture starts exactly where the hero
   image ends (this div's own top edge), so the two always line up
   regardless of the hero's fluid height, then fades to black below */
.app-bg{
  background-color: var(--black);
  background-image: url("../assets/img/backgrounds/grunge-bg.jpg");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

/* film-grain overlay across the whole page */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0; }

a{ color: inherit; text-decoration: none; }

img, svg{ max-width: 100%; display: block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.section{
  position: relative;
  padding: clamp(1rem, 2.5vw, 2rem) 0;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--lime);
}

.marker{
  background: linear-gradient(120deg, transparent 0%, transparent 4%, currentColor 4%, currentColor 96%, transparent 96%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.05em 0.15em;
  color: var(--black);
}
.marker--lime{ color: var(--black); background-image: linear-gradient(120deg, transparent 0%, transparent 3%, var(--lime) 3%, var(--lime) 97%, transparent 97%); }
.marker--pink{ color: var(--black); background-image: linear-gradient(120deg, transparent 0%, transparent 3%, var(--pink) 3%, var(--pink) 97%, transparent 97%); }
.marker--cyan{ color: var(--black); background-image: linear-gradient(120deg, transparent 0%, transparent 3%, var(--cyan) 3%, var(--cyan) 97%, transparent 97%); }

.text-outline{
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
}

/* ---------- grunge stripe decorations — colored via mask so any Stripe_*.svg
   can be recolored freely with a plain background-color ---------- */
.splash{
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- hand-drawn doodles — small, scattered, gently swaying ---------- */
.doodle{
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: var(--doodle-size, 44px);
  height: auto;
  opacity: var(--doodle-opacity, 0.8);
  transform: rotate(var(--doodle-rot, 0deg));
  animation: doodle-sway var(--doodle-dur, 4s) ease-in-out infinite;
  animation-delay: var(--doodle-delay, 0s);
}
@keyframes doodle-sway{
  0%   { transform: rotate(calc(var(--doodle-rot, 0deg) - 16deg)) translate(-10px, 6px) scale(0.94); }
  25%  { transform: rotate(calc(var(--doodle-rot, 0deg) + 10deg)) translate(8px, -16px) scale(1.05); }
  50%  { transform: rotate(calc(var(--doodle-rot, 0deg) + 18deg)) translate(12px, 4px) scale(0.96); }
  75%  { transform: rotate(calc(var(--doodle-rot, 0deg) - 10deg)) translate(-8px, -12px) scale(1.04); }
  100% { transform: rotate(calc(var(--doodle-rot, 0deg) - 16deg)) translate(-10px, 6px) scale(0.94); }
}

/* ---------- buttons — rough torn-paper style, not neat pills ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.9em 1.6em;
  border: 3px solid var(--white);
  border-radius: 3px 16px 4px 18px / 16px 4px 20px 3px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transform: rotate(-1deg);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.6);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--black);
  transform: translate(-2px,-2px) rotate(1deg);
  box-shadow: 7px 7px 0 rgba(0,0,0,0.6);
}
.btn--solid{
  background: var(--pink);
  border-color: var(--pink);
  color: var(--black);
}
.btn--solid:hover{ background: var(--white); border-color: var(--white); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: rgba(10,10,10,0.92);
  border-bottom: 1px solid rgba(242,242,238,0.12);
}
.nav__logo{
  display: flex;
  align-items: center;
}
.nav__logo-svg{
  height: 30px;
  width: auto;
  fill: var(--white);
}
.nav__links{
  display: flex;
  gap: clamp(1rem, 2vw, 2.2rem);
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__links a{
  position: relative;
  padding-bottom: 4px;
}
.nav__links a::after{
  content:"";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0%;
  background: var(--lime);
  transition: width 0.25s ease;
}
.nav__links a:hover::after{ width: 100%; }

.nav__toggle{
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width: 780px){
  .nav__links{
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--black);
    flex-direction: column;
    padding: 2rem var(--gutter);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__toggle{ display: block; }
}

/* =========================================================
   HERO — full-bleed supplied artwork, edge-to-edge, flush under nav
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
}
.hero__bg{
  display: block;
  width: 100%;
  height: auto;
}

.hero__title{
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  text-transform: uppercase;
}
.hero__tagline{
  margin-top: 1.5rem;
  max-width: 30ch;
  font-size: 1.05rem;
  color: var(--grey);
}
.hero__cta{
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* section directly stitched onto the hero image — no gap/margin above,
   the actual texture now lives on <body> so it runs underneath the whole app */
.section--textured{
  margin-top: 0;
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: 1.5rem;
}
/* wider content area just for Muziek — the 1.5x bigger track cards (see
   .track-card / .tracks-grid) need more room than the standard 1280px
   container to actually show 4 full-size columns on desktop */
#muziek{ --container: 1900px; }

/* Muziek and Bio sit almost flush, just a small gap between them */
#bio{ padding-top: 1.5rem; }

/* =========================================================
   TRACK CARDS — paginated grid, max 2 rows, centered
   ========================================================= */
.tracks-carousel{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
.tracks-grid{
  --cols: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 450px));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-content: center;
}

/* grunge arrow buttons — step through the pages of tracks */
.tracks-next,
.tracks-prev{
  flex: none;
  width: 74px;
  height: 74px;
  border: 3px solid var(--lime);
  border-radius: 48% 42% 55% 38% / 45% 55% 40% 50%;
  background: transparent;
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(-3deg);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.6);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.tracks-prev{
  border-color: var(--cyan);
  color: var(--cyan);
  transform: rotate(3deg);
}
.tracks-next:hover{
  background: var(--lime);
  color: var(--black);
  transform: translate(-2px,-2px) rotate(3deg);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.6);
}
.tracks-prev:hover{
  background: var(--cyan);
  color: var(--black);
  transform: translate(2px,-2px) rotate(-3deg);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.6);
}
.tracks-next svg,
.tracks-prev svg{ width: 30px; height: 30px; }
.tracks-prev.is-hidden{
  visibility: hidden;
  pointer-events: none;
}

.track-card{
  width: min(450px, 100%);
  background: var(--black-soft);
  border: 3px solid var(--white);
  border-radius: 3px 22px 4px 26px / 22px 4px 26px 3px;
  padding: 0.9rem;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.track-card:hover{
  transform: translate(-4px,-4px) rotate(0deg) !important;
  box-shadow: 14px 14px 0 rgba(0,0,0,0.55);
}
.track-card__cover{
  border-radius: 2px 12px 3px 14px / 12px 3px 14px 2px;
  overflow: hidden;
  border: 1px solid rgba(242,242,238,0.15);
}
.track-card__cover--empty{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: repeating-linear-gradient(45deg, rgba(242,242,238,0.04) 0 10px, transparent 10px 20px);
}
.track-card__meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.8rem;
}
.track-card__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.track-card__num{
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--lime);
  letter-spacing: 0.1em;
}

/* rotation variants for organic pinned feel */
.rot-1{ transform: rotate(-4deg); }
.rot-2{ transform: rotate(3deg); }
.rot-3{ transform: rotate(-2deg); }
.rot-4{ transform: rotate(5deg); }
.rot-5{ transform: rotate(-6deg); }
.rot-6{ transform: rotate(2deg); }
.accent-pink{ border-color: var(--pink); }
.accent-lime{ border-color: var(--lime); }
.accent-cyan{ border-color: var(--cyan); }

/* ---------- custom audio player ---------- */
.player{
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.player__btn{
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.track-card.accent-pink .player__btn{ color: var(--pink); }
.track-card.accent-lime .player__btn{ color: var(--lime); }
.track-card.accent-cyan .player__btn{ color: var(--cyan); }
.player__btn:hover{ background: currentColor; }
.player__btn:hover svg{ fill: var(--black); }
.player__btn svg{ width: 14px; height: 14px; fill: currentColor; transition: fill 0.2s ease; }
.player__btn .icon-pause{ display: none; }
.player__btn.is-playing .icon-play{ display: none; }
.player__btn.is-playing .icon-pause{ display: block; }

.player__body{ flex: 1; min-width: 0; }
.player__bar{
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(242,242,238,0.15);
  cursor: pointer;
}
.player__bar-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: currentColor;
}
.track-card.accent-pink .player__bar-fill{ color: var(--pink); }
.track-card.accent-lime .player__bar-fill{ color: var(--lime); }
.track-card.accent-cyan .player__bar-fill{ color: var(--cyan); }
.player__time{
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--grey);
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   BIO
   ========================================================= */
.bio__layout{
  display: grid;
  grid-template-columns: 0.8fr 1.6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.bio__subtitle{
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: -0.85em;
  transform: rotate(-2deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.bio__text p{
  margin-top: 1.2rem;
  color: var(--grey);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
  white-space: pre-line;
}
.bio__photo{
  position: relative;
}
.bio__photo img{
  width: 145%;
  max-width: none;
  height: auto;
  display: block;
}

@media (max-width: 900px){
  .bio__layout{ grid-template-columns: 1fr; }
  .bio__photo{ order: -1; max-width: none; margin: 0; overflow: visible; }
  .bio__photo img{ width: 145%; max-width: none; margin-left: -22%; }
}
/* =========================================================
   TOUR
   ========================================================= */
.tour-list{
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 2px solid rgba(242,242,238,0.15);
}
.tour-item{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 2px solid rgba(242,242,238,0.15);
}
.tour-item__date{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--lime);
}
.tour-item__venue strong{ display:block; font-size: 1.1rem; }
.tour-item__venue span{ color: var(--grey); font-size: 0.85rem; }

@media (max-width: 640px){
  .tour-item{ grid-template-columns: 1fr; gap: 0.4rem; }
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: 3rem;
}
.gallery-item{
  position: relative;
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.gallery-item:hover{
  transform: translate(-3px,-3px);
}
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-empty{
  margin-top: 2rem;
  color: var(--grey);
  font-size: 0.95rem;
}
/* photos only (not videos) — max 3 per row at any width */
#gallery .gallery-grid{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px){
  #gallery .gallery-grid{ gap: 0.5rem; }
}

/* =========================================================
   PLAY / SYNTH PADS
   ========================================================= */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.pad-rig{
  position: relative;
  width: min(380px, 80vw);
  margin: 2.5rem auto 0;
  filter: drop-shadow(10px 14px 0 rgba(0,0,0,0.5));
}
@media (min-width: 901px){
  .pad-rig{ width: min(760px, 60vw); }
}
.pad-rig__img{
  display: block;
  width: 100%;
  height: auto;
}
.pad-rig__pad{
  position: absolute;
  background: transparent;
  border: none;
  border-radius: 14%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: background 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}
.pad-rig__pad:hover{ background: rgba(255,255,255,0.06); }
.pad-rig__pad.is-active{
  background: rgba(255,150,40,0.4);
  box-shadow: 0 0 24px 6px rgba(255,150,40,0.55);
  transform: scale(0.96);
}
.pad-grid__hint{
  margin: 1rem 0 0;
  color: var(--grey);
  font-size: 0.9rem;
  text-align: center;
}

/* =========================================================
   CATGPT
   ========================================================= */
/* Hit-area measured directly off assets/img/catgpt/computer.png
   (3740x2992) as percentages of the image box — keeps the screen aligned
   with the photo regardless of how large it's displayed. */
.pc-rig{
  position: relative;
  width: 100%;
  margin: 2.5rem auto 0;
}
@media (max-width: 900px){
  /* let it bleed past the viewport edges on mobile — html/body already clip
     horizontal overflow, so this is a safe, deliberate "too big to fit" look. */
  .pc-rig{ width: 160%; margin-left: -30%; }
}
.pc-rig__img{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.pc-rig__screen-wrap{
  position: absolute;
  top: 17.71%;
  left: 28.61%;
  width: 36.9%;
  height: 34.1%;
  overflow: hidden;
}
/* CatGPT's own layout is a fixed-width desktop app (260px sidebar + chat) —
   loading it at that natural size and scaling the whole iframe down (via JS,
   see initPcScreens in main.js) keeps it readable instead of squeezing the
   sidebar to fit a ~250px-wide screen. 1000x739 matches the wrap box's true
   pixel aspect ratio (36.9%/34.1% of the image's own 3740x2992 — NOT 36.9/34.1
   directly, since those percentages are relative to different base
   dimensions) so the uniform scale fills it exactly with no gap or clipping. */
.pc-rig__screen{
  display: block;
  width: 1000px;
  height: 739px;
  border: none;
  background: #212121;
  transform-origin: top left;
}
@media (max-width: 900px){
  /* mobile loads the iframe in "compact" mode (sidebar hidden, see main.js +
     catgpt/index.html) — a smaller natural size means the transform scale
     (wrap width / this width) comes out larger, so the chat content reads
     bigger instead of just the sidebar-less layout reflowing into the same
     tiny scale. Aspect ratio (500/369.7) still matches the wrap box. */
  .pc-rig__screen{ width: 500px; height: 369.7px; }
}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact__form{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  margin: 3rem auto 0;
}
.contact__form input, .contact__form textarea{
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(242,242,238,0.3);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.2rem;
}
.contact__form input:focus, .contact__form textarea:focus{
  outline: none;
  border-color: var(--pink);
}
.contact__form textarea{ resize: vertical; min-height: 100px; }

footer{
  position: relative;
  padding: 2.5rem var(--gutter) 3rem;
  border-top: 1px solid rgba(242,242,238,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer__admin{
  position: absolute;
  right: var(--gutter);
  bottom: 1.4rem;
  color: var(--grey);
  display: flex;
  transition: color 0.2s ease, transform 0.4s ease;
}
.footer__admin:hover{ color: var(--lime); transform: rotate(45deg); }
.footer__admin svg{ width: 18px; height: 18px; }
.footer__meta{ font-size: 0.8rem; color: var(--grey); letter-spacing: 0.05em; }

@media (max-width: 900px){
  .tracks-carousel{ flex-direction: column; }
  /* stacked layout: a hidden prev arrow would otherwise still reserve its
     height above the grid, pushing the first row of cards down for no
     reason — collapse it out of flow instead (desktop keeps visibility:
     hidden so it still balances the centered row against the next arrow). */
  .tracks-prev.is-hidden{ display: none; }
}

/* =========================================================
   MSN TOAST — nostalgic "new message" popup
   ========================================================= */
.msn-toast{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: min(320px, calc(100vw - 2.5rem));
  z-index: 5000;
  cursor: pointer;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.2,.9,.3,1.3), opacity 0.3s ease;
  pointer-events: none;
}
.msn-toast.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.msn-toast__img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.msn-toast__close{
  position: absolute;
  top: 8%;
  right: 4%;
  width: 16%;
  height: 22%;
  background: transparent;
  border: none;
  cursor: pointer;
}