:root {
  --bg: #071021;
  --text: #e6eef7;
  --accent: #66a8ff;
  --muted: #adb5bd;
  --card-bg: #0f1720;
  --overlay-bg: rgba(0,0,0,0.85);
}

/* Remove background and color from html and body */
html, body {
  height: 100%;
  margin: 0;
  font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #071021;
  color: #e6eef7;
}

/* page spacing and theme application */
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 78px 16px 48px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.page-container.theme-dark {
  --bg: #071021;
  --text: #e6eef7;
  --accent: #66a8ff;
  --muted: #adb5bd;
  --card-bg: #0f1720;
  --overlay-bg: rgba(0,0,0,0.85);
  background: var(--bg);
  color: var(--text);
}

.page-container.theme-light {
  --bg: #ffffff;
  --text: #111827;
  --accent: #1b6ec2;
  --muted: #6c757d;
  --card-bg: #ffffff;
  --overlay-bg: rgba(0,0,0,0.75);
  background: var(--bg);
  color: var(--text);
}

section {
    margin: 6rem 1rem 3rem 1rem;
}

section h2, section h3 {
    margin: 2rem 0rem 0rem 0rem;
}

section p {
    margin: 1rem 0rem;
}

/* reveal animation */
.revealable {
  opacity:1;
  transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
}
.revealable.revealed { opacity:1; transform:none; }

/* artist bio */
.artist-info {margin:0 2rem;}
.artist-bio {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    align-items: center;
    margin: 2rem 0;
}

.artist-photo {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
}

/* Apply rounded style when enabled via JS/config */
.rounded-profile-pic .artist-photo {
    border-radius: 50%;
}

/* socials */
.social-links { display:flex; gap:.5rem; margin-top:.5rem; }
.social-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--muted); background:transparent; text-decoration:none;
  border:1px solid transparent;
}
.social-link svg { width:22px; height:22px; fill:currentColor; }

/* gallery grid - increased thumbnail size */
.gallery-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); margin:0rem 0rem; }
.album-card { background:var(--card-bg); border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid rgba(0,0,0,0.06); transition:transform .12s ease, box-shadow .12s ease; margin: 2rem 0rem;}
.album-card:hover { /*transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.12);*/ }
/* square album thumbnail using aspect-ratio with slow hover zoom and opacity transition */
.album-cover {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;

  /* start semi-transparent */
  opacity: 0.60;

  /* slow zoom on hover and slow opacity transition (4s) */
  transition: transform 3s ease-in-out, opacity 1.5s ease-in-out;
  will-change: transform, opacity;
}

/* apply gentle zoom while hovered and fade out opacity to 0 over 4s — reverses smoothly on mouse leave */
.album-card:hover .album-cover {
  transform: scale(1.06);
  opacity: 1.0;
}

.album-card .caption{
    margin-top:1rem;
}

/* modal carousel */
.carousel-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--overlay-bg); z-index:2000; padding:1rem; }
.carousel-container { width:100%; max-width:1200px; color:var(--text); outline:none; }
.carousel-stage { display:flex; align-items:center; gap:1rem; }
.carousel-image { max-width:100%; max-height:70vh; object-fit:contain; border-radius:8px; }

/* caption under main carousel image */
.carousel-caption { position:static !important; padding-top: 0rem; text-align:center; color:var(--text); }
.carousel-caption h3 { margin:0; font-size:1.05rem; }
.carousel-caption p { margin:.25rem 0 0; color:var(--muted); font-size:.95rem; }

/* thumbs - enlarged */
.carousel-thumbs { display:flex; gap:.5rem; margin-top:.75rem; overflow:auto; }
.carousel-thumbs img { width:120px; height:80px; object-fit:cover; border-radius:6px; opacity:.8; cursor:pointer; border:2px solid transparent; }
.carousel-thumbs img.active { opacity:1; border-color:var(--accent); }

/* Image fade transitions (kept for compatibility with fade classes) */
.carousel-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;

  opacity: 1;
  transform: none;
  transition: opacity .26s ease, transform .26s ease;
}

/* fade out shrinks and fades the image (override animation when leaving) */
.carousel-image.fade-out {
  opacity: 0;
  transform: scale(.98) !important;
  transition: opacity .22s ease, transform .22s ease;
}

/* fade in restores image visibility */
.carousel-image.fade-in {
  opacity: 1;
  transform: none;
}

/* --- slow zoom effect applied when focused --- */
.carousel-image.zoom {
  /* small, slow zoom-in */
  animation: slow-zoom 12s ease-in-out forwards;
  /* ensure the image still participates in the opacity/transform transitions */
  will-change: transform;
}

/* keyframes: gentle zoom-in from scale(1) to scale(1.06) */
@keyframes slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* When fading out we rely on .fade-out to force the leaving transform (uses !important above) */
/* responsive */
@media (max-width:768px) {
    .artist-bio { grid-template-columns:1fr; }
    .artist-photo { margin:0 auto; width:120px; height:120px; }
    /* reduce album thumbnails on narrow screens */
    .gallery-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
    .album-cover { aspect-ratio:1/1; }
    .carousel-thumbs img { width:92px; height:62px; }
}

/* 18+ Legal Modal Styles */
#legal-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

#legal-modal .modal-content {
  background: #181a1b;
  border-radius: 12px;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 50rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  text-align: center;
}

#legal-modal h2 {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
}

#legal-modal p {
  margin-bottom: 2rem;
  color: #e0e0e0;
}

#legal-modal .modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

#legal-modal .modal-actions .btn {
  min-width: 12rem;
}

/* Loading spinner overlay */
.spinner-overlay {
  position: fixed;
  z-index: 99998;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #071021);
  transition: background 0.2s;
}

/* Modern dual ring spinner */
.spinner {
  width: 64px;
  height: 64px;
  display: inline-block;
  position: relative;
  background: transparent;
}

.spinner::after, .spinner::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: var(--accent, #66a8ff);
  border-right-color: var(--accent, #66a8ff);
  animation: spin-modern 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.spinner::before {
  border: 6px solid transparent;
  border-bottom-color: var(--muted, #adb5bd);
  border-left-color: var(--muted, #adb5bd);
  animation-delay: 0.5s;
}

@keyframes spin-modern {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Light theme link styles */
a:link, a:visited {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.2s;
}

a:hover, a:focus {
    color: #174a7c;
    text-decoration: underline;
}

/* Dark theme link styles */
.theme-dark a:link,
.theme-dark a:visited {
    color: #82cfff; /* Brighter blue for dark backgrounds */
    text-decoration: underline;
    transition: color 0.2s;
}

.theme-dark a:hover,
.theme-dark a:focus {
    color: #ffd166; /* Warm yellow for high contrast on hover */
    text-decoration: underline;
}

.body-theme-dark {
    background-color: #071021 !important;
    color: #e6eef7 !important;
}

.body-theme-light {
    background-color: #ffffff !important;
    color: #111827 !important;
}