/* === Fonts (originals + heading fonts) === */
@import url('https://fonts.googleapis.com/css2?family=Balthazar&family=Fascinate&family=Kurale&family=Comic+Neue:wght@300;400;700&family=Fredoka:wght@300;400;500;600&family=Quicksand:wght@300;400;500;600;700&display=swap');

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

:root{
  /* — Muted (~30% less bright) but still vibrant — */
  --primary-pink:   #e88bbf;  /* was #ffb3d9 */
  --primary-purple: #b889e6;  /* was #d4a5ff */
  --primary-blue:   #7fb8e6;  /* was #a8d8ff */
  --primary-yellow: #f3e57a;  /* was #fff4a8 */
  --primary-green:  #9edb91;  /* was #c4ffb3 */

  --bg-cream:       #f6f4ee;  /* was #fffef7 */
  --bg-light-pink:  #f7e0ec;  /* was #fff0f7 */
  --bg-deep-pink:   #7c224a;  /* NEW: dark pink base */

  --text-dark:   #433d46;     /* slightly deeper neutral */
  --text-purple: #7a56ac;     /* toned down */
  --border-purple: #a07acc;   /* toned down */
  --shadow-color: rgba(160, 122, 204, 0.22); /* softer shadow */
}

body{
  font-family: 'Quicksand','Comic Neue',sans-serif;
  /* Solid dark-pink base so the “very background” is dark pink */
background-image: url('https://i.gifer.com/QFNv.gif');
  background-attachment: fixed;
  color: var(--text-dark);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* === Global heading font overrides === */
h1{ font-family:"Fascinate", cursive !important; font-weight:400; }
h2{ font-family:"Kurale", ui-serif, Georgia, "Times New Roman", serif !important; font-weight:400; }
h3{ font-family:"Balthazar", ui-serif, Georgia, "Times New Roman", serif !important; font-weight:400; }

/* Soft, low-opacity accent clouds on top of dark pink */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(232,139,191,0.06) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(184,137,230,0.06) 0%, transparent 55%),
    radial-gradient(circle at 40% 20%, rgba(127,184,230,0.06) 0%, transparent 55%);
  pointer-events:none; z-index:-1;
}

/* Sparkles (slightly softer) */
.sparkle-container{ position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden }
.sparkle{ position:absolute; width:8px; height:8px; pointer-events:none; animation:sparkleFloat 1.5s ease-out forwards }
.sparkle::before,.sparkle::after{ content:''; position:absolute; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(232,139,191,.65) 50%, transparent 100%) }
.sparkle::before{ width:8px; height:2px; top:50%; left:0; transform:translateY(-50%) }
.sparkle::after{ width:2px; height:8px; left:50%; top:0; transform:translateX(-50%) }
@keyframes sparkleFloat{ 0%{opacity:1; transform:translateY(0) scale(0)} 50%{opacity:1; transform:translateY(-20px) scale(1)} 100%{opacity:0; transform:translateY(-40px) scale(0)} }

/* Navbar (muted gradient) */
.navbar{
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-pink) 100%);
  border-bottom:4px solid var(--border-purple);
  box-shadow:0 4px 15px var(--shadow-color);
  padding:1rem 2rem; position:sticky; top:0; z-index:1000;
}
.navbar::after{
  content:''; position:absolute; bottom:-4px; left:0; right:0; height:4px;
  background: repeating-linear-gradient(90deg,
    rgba(243,229,122,.9) 0px, rgba(243,229,122,.9) 10px,
    rgba(127,184,230,.9) 10px, rgba(127,184,230,.9) 20px,
    rgba(158,219,145,.9) 20px, rgba(158,219,145,.9) 30px,
    rgba(232,139,191,.9) 30px, rgba(232,139,191,.9) 40px,
    rgba(184,137,230,.9) 40px, rgba(184,137,230,.9) 50px);
  background-size:50px 4px; animation:stripeScroll 2s linear infinite;
}
@keyframes stripeScroll{ 0%{background-position:0 0} 100%{background-position:50px 0} }

.nav-content{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem }
.nav-logo{ font-family:'Fredoka','Comic Neue',sans-serif }
.logo-text{ font-size:1.5rem; font-weight:600; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(255,255,255,.35); letter-spacing:1px }
.nav-links{ list-style:none; display:flex; gap:.5rem; flex-wrap:wrap }
.nav-link{
  text-decoration:none; color:#fff; font-weight:600; padding:.6rem 1.2rem; border-radius:20px;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.35); transition:.3s; display:inline-block; position:relative; overflow:hidden
}
.nav-link::before{ content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,.28); transition:.4s; transform:translate(-50%,-50%); z-index:-1 }
.nav-link:hover::before{ width:300px; height:300px }
.nav-link:hover{ background:rgba(255,255,255,.26); border-color:#fff; transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.22) }
.nav-link.active{ background:#fff; color:var(--text-purple); border-color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15) }

.container{ max-width:1200px; margin:2rem auto; padding:0 1.5rem }
.page{ display:none; animation:fadeIn .5s ease } .page.active{ display:block }
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

.page-header{ text-align:center; margin-bottom:2rem }
.page-header h1{
  font-family:"Fascinate", cursive !important;
  font-size:2.5rem; color:var(--bg-cream);
  text-shadow: 1px 1px 0 rgba(232,139,191,.85), 3px 3px 0 rgba(127,184,230,.7);
  margin-bottom:1rem;
}

/* Decorative line (muted sweep) */
.decorative-line{
  width:200px; height:4px; margin:0 auto; border-radius:2px; position:relative; animation:rainbowSlide 8s linear infinite;
  background:linear-gradient(90deg,
    var(--primary-pink) 0%,
    var(--primary-purple) 25%,
    var(--primary-blue) 50%,
    var(--primary-green) 75%,
    var(--primary-yellow) 100%);
  background-size:200% 100%;
}
@keyframes rainbowSlide{ 0%{background-position:0% 0%} 100%{background-position:200% 0%} }
.decorative-line::before,.decorative-line::after{ content:'★'; position:absolute; top:50%; transform:translateY(-64%); color:var(--primary-purple); font-size:1.1rem }
.decorative-line::before{ left:-30px } .decorative-line::after{ right:-30px }

.content-box{
  background:#ffffff;
  border:3px dashed var(--border-purple);
  border-radius:20px; padding:2rem;
  box-shadow:0 8px 20px var(--shadow-color), inset 0 0 0 8px var(--bg-light-pink);
  position:relative;
}

/* ---------- Profile ---------- */
.profile-section{ display:grid; grid-template-columns:300px 1fr; gap:2rem; margin-bottom:2rem }
.profile-image-container{ position:relative }
.profile-image{ width:100%; border-radius:15px; border:4px solid var(--primary-pink); box-shadow:0 4px 15px rgba(0,0,0,.12); display:block }
.image-border{ position:absolute; inset:-6px; border:2px dotted var(--primary-purple); border-radius:calc(15px + 4px + 6px); pointer-events:none }

.intro-text h2{ font-family:"Kurale", ui-serif, Georgia, "Times New Roman", serif !important; color:var(--text-purple); margin-bottom:1rem; font-size:1.8rem }
.intro-text p{ margin-bottom:1rem; font-size:1.1rem; color:#514b56 }
.intro-text strong{ color:var(--text-purple); font-weight:600 }
.intro-text em{ color:var(--primary-purple); font-style:normal; font-weight:500 }

.support-box{
  background: linear-gradient(135deg, rgba(232,139,191,.95) 0%, rgba(184,137,230,.95) 100%);
  padding:1rem; border-radius:15px; border:3px solid rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(0,0,0,.12); margin-top:1.5rem
}
.support-box p{ color:#fff; font-weight:600; margin:0; text-align:center }

.cute-link{ color:inherit; text-decoration:none; border-bottom:2px dotted currentColor; transition:.3s; font-weight:600 }
.cute-link:hover{ border-bottom-style:solid; opacity:.85 }
.support-box .cute-link{ color:var(--primary-yellow); border-bottom-color:var(--primary-yellow) }

.fun-facts-section,.music-section{
  background: var(--bg-light-pink); padding:1.5rem; border-radius:15px; border:2px solid var(--primary-pink); margin-top:2rem
}
.fun-facts-section h2,.music-section h2,.examples-section > h2{
  font-family:"Kurale", ui-serif, Georgia, "Times New Roman", serif !important; color:var(--text-purple); margin-bottom:1rem; text-align:center
}
.fun-facts-list{ list-style:none; padding-left:0 }
.fun-facts-list li{ padding:.5rem 0; padding-left:2rem; position:relative; color:#50485a }
.fun-facts-list li::before{ content:'★'; position:absolute; left:0; color:var(--primary-purple); font-size:1.1rem }

/* ---------- Commissions ---------- */
.commission-status{ text-align:center; margin-bottom:2rem }
.status-badge{ display:inline-block; padding:.6rem 2rem; border-radius:30px; font-weight:700; font-size:1.2rem; border:3px solid; box-shadow:0 4px 15px rgba(0,0,0,.12) }
.status-badge.open{ background:var(--primary-green); border-color:#79bd6e; color:#254d25 }
.status-icon{ font-size:1.5rem; margin-right:.5rem }

.commission-types{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1.5rem; margin:2rem 0 }
.comm-card{
  background: linear-gradient(135deg, var(--bg-light-pink) 0%, #ffffff 100%);
  padding:.5rem; border-radius:15px; border:3px solid var(--primary-pink);
  box-shadow:0 4px 10px rgba(0,0,0,.12); transition:.3s
}
.comm-card:hover{ transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,.18) }
.comm-card h3{ font-family:"Balthazar", ui-serif, Georgia, "Times New Roman", serif !important; color:var(--text-purple); margin-bottom:.5rem }
.comm-card ul{ list-style:none; padding-left:0 }
.comm-card li{ padding:.3rem 0; padding-left:1.5rem; position:relative; color:#534c57 }
.comm-card li::before{ content:'•'; position:absolute; left:0; color:var(--primary-purple); font-size:1.5rem; line-height:1 }

.contact-section{
  background: #eadc7a; /* muted yellow */
  padding:1.5rem; border-radius:15px; border:3px dashed var(--text-purple); margin-top:2rem; text-align:center
}
.contact-section h3{ font-family:"Balthazar", ui-serif, Georgia, "Times New Roman", serif !important; color:var(--text-purple); margin-bottom:.5rem }

/* ---------- Examples ---------- */
.examples-section{ margin-top:3rem }
.example-category{ background:var(--bg-light-pink); padding:1.5rem; border-radius:15px; border:2px solid var(--primary-pink); margin-bottom:2rem }
.example-category h3{ font-family:"Balthazar", ui-serif, Georgia, "Times New Roman", serif !important; color:var(--text-purple); margin-bottom:1rem; text-align:center }
.example-images{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1rem }
.example-item{ aspect-ratio:1; border-radius:12px; overflow:hidden; transition:transform .3s, box-shadow .3s }
.example-item.placeholder{ background: linear-gradient(135deg, #ffffff 0%, var(--primary-pink) 100%); border:3px dashed var(--primary-purple); display:flex; align-items:center; justify-content:center; cursor:default }
.example-item.placeholder:hover{ transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,.12) }
.example-placeholder-content{ text-align:center; padding:1rem; color:var(--text-purple) }
.example-placeholder-content span{ display:block; font-weight:700; font-size:1.1rem; margin-bottom:.5rem }
.example-placeholder-content p{ font-size:.9rem; color:var(--primary-purple) }

/* ---------- Galleries (smaller + exactly 3 across) ---------- */
.gallery-intro{ text-align:center; font-size:1.1rem; color:var(--text-purple); font-weight:600; margin-bottom:2rem }
.gallery-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; max-width:980px; margin:0 auto }
.gallery-item{
  position:relative; border-radius:12px; overflow:hidden;
  border:3px solid var(--primary-pink);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  cursor:pointer; transition:transform .3s, box-shadow .3s; aspect-ratio:1
}
.gallery-item:hover{ transform:translateY(-5px) rotate(1deg); box-shadow:0 8px 20px rgba(0,0,0,.18) }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block }
.gallery-overlay{ position:absolute; inset:0; background:rgba(184,137,230,.88); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s }
.gallery-item:hover .gallery-overlay{ opacity:1 }
.gallery-overlay span{ color:#fff; font-size:1.3rem; font-weight:700; font-family:"Balthazar", ui-serif, Georgia, "Times New Roman", serif; text-shadow:2px 2px 4px rgba(0,0,0,.35) }

.gallery-item.placeholder{ background: linear-gradient(135deg, var(--bg-light-pink) 0%, var(--primary-pink) 100%); border-style:dashed; cursor:default; display:flex; align-items:center; justify-content:center }
.gallery-item.placeholder:hover{ transform:none }
.placeholder-content{ text-align:center; color:var(--text-purple); font-weight:600; font-size:1.1rem; padding:1rem }

/* ---------- Lightbox ---------- */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:10000; align-items:center; justify-content:center }
.lightbox.active{ display:flex }
.lightbox-content{ position:relative; max-width:90%; max-height:90% }
.lightbox-close{ position:absolute; top:-40px; right:0; color:#fff; font-size:40px; font-weight:700; cursor:pointer; transition:color .3s }
.lightbox-close:hover{ color:var(--primary-pink) }
#lightbox-image{ max-width:100%; max-height:80vh; border-radius:10px; border:4px solid var(--primary-pink); box-shadow:0 0 30px rgba(232,139,191,.45) }
.lightbox-nav{ display:flex; justify-content:space-between; margin-top:1rem; gap:1rem }
.lightbox-prev,.lightbox-next{
  background: var(--primary-purple); color:#fff; border:none; padding:.8rem 1.5rem; border-radius:25px;
  font-weight:700; cursor:pointer; transition: all .3s; flex:1
}
.lightbox-prev:hover,.lightbox-next:hover{ background:var(--primary-pink); transform:scale(1.05) }

/* ---------- Links ---------- */
.links-intro{ text-align:center; font-size:1.2rem; color:var(--bg-cream); font-weight:600; margin-bottom:2rem }
.links-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:1.5rem; margin-bottom:3rem }
.link-button{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1rem; border-radius:20px; border:4px solid; text-decoration:none; transition:.3s;
  box-shadow:0 4px 10px rgba(0,0,0,.12); min-height:150px
}
.link-button:hover{ transform:translateY(-5px) rotate(-2deg); box-shadow:0 8px 20px rgba(0,0,0,.18) }
.link-icon{ font-size:3rem; margin-bottom:.5rem }
.link-text{ font-weight:700; font-size:1.1rem; font-family:'Fredoka', sans-serif }

.link-button.kofi{ background: linear-gradient(135deg, #d34d4d 0%, #e37a7a 100%); border-color:#c13c3c; color:#fff }
.link-button.bandcamp{ background: linear-gradient(135deg, #178aa6 0%, #4fb6cf 100%); border-color:#147c95; color:#fff }
.link-button.commissions{ background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-pink) 100%); border-color:var(--border-purple); color:#fff }
.link-button.placeholder{ background: linear-gradient(135deg, var(--bg-light-pink) 0%, #ffffff 100%); border-color:var(--primary-pink); border-style:dashed; color:var(--text-purple); cursor:default }
.link-button.placeholder:hover{ transform:none }

.webring-section{ text-align:center; margin-top:3rem; padding-top:2rem; border-top:2px dashed var(--border-purple) }
.webring-text{ font-family:"Balthazar", ui-serif, Georgia, "Times New Roman", serif !important; color:#e8ddea; font-size:1.05rem; }
.webring-credit{ color:#d8cfe0; font-size:.95rem }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .decorative-line, .navbar::after{ animation:none }
  .nav-content{ flex-direction:column; text-align:center; gap:.5rem }
  .nav-links{ justify-content:center; gap:.3rem }
  .page-header h1{ font-size:2rem }

  .profile-section{ grid-template-columns:1fr; gap:1.5rem }
  .profile-image-container{ max-width:300px; margin:0 auto }

  .commission-types{ grid-template-columns:1fr; gap:1rem }
  .example-images{ grid-template-columns:1fr; gap:1rem }

  .gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; max-width:720px }

  .links-grid{ grid-template-columns:1fr; gap:1rem }
  .content-box{ padding:1.5rem; margin-bottom:1.5rem }
  .fun-facts-section, .music-section, .example-category{ padding:1rem }
  .container{ padding:0 1rem }
}

@media (max-width:480px){
  .navbar{ padding:.8rem 1rem }
  .logo-text{ font-size:1.1rem }
  .nav-link{ padding:.5rem .8rem; font-size:.85rem }
  .page-header h1{ font-size:1.6rem; text-shadow:1px 1px 0 rgba(232,139,191,.85), 2px 2px 0 rgba(127,184,230,.7) }
  .content-box{ padding:1rem }
  .content-box::before, .content-box::after{ font-size:1.5rem }

.gallery-grid{ 
    grid-template-columns: repeat(2, minmax(0,1fr)); 
    gap: .5rem; 
    max-width: 420px; 
  }  .example-images{ grid-template-columns:1fr }
  .links-grid{ grid-template-columns:1fr }
  .link-button{ padding:1.5rem 1rem; min-height:120px }
  .commission-types{ gap:1rem }
  .comm-card{ padding:1rem }
}