/* ===== [Daughter's Name]'s Art Lair — space & spooky theme =====
   COLORS live in :root below. Change these to recolor the WHOLE site. */
:root{
  --bg-top:#0b0718;
  --bg-bottom:#0a1726;
  --purple:#b15cff;
  --blue:#5cc8ff;
  --teal:#34e3c4;
  --ink:#ece9ff;        /* main text */
  --muted:#a7a0d6;      /* softer text */
  --panel:rgba(20,12,40,.55);
  --panel-line:rgba(177,92,255,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(177,92,255,.20), transparent 60%),
    radial-gradient(1000px 600px at 92% 8%, rgba(92,200,255,.16), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(52,227,196,.14), transparent 60%),
    linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background-image:url("stars.svg");
  background-repeat:repeat;
  opacity:.85;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.5}to{opacity:.95}}

/* ---- top bar ---- */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:.7rem 1.2rem;
  background:rgba(8,6,18,.6);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--panel-line);
}
.brand{
  font-family:'Creepster',cursive; font-size:1.7rem; letter-spacing:1px;
  color:#fff; text-shadow:0 0 10px var(--purple),0 0 22px rgba(177,92,255,.6);
}
.nav{display:flex; gap:.4rem; flex-wrap:wrap}
.nav a{
  color:var(--ink); text-decoration:none; padding:.4rem .85rem;
  border-radius:999px; border:1px solid transparent; transition:.2s;
}
.nav a:hover{ border-color:var(--teal); box-shadow:0 0 12px rgba(52,227,196,.5); color:var(--teal); }

/* ---- hero ---- */
.hero{ position:relative; text-align:center; padding:3.5rem 1.2rem 4rem; overflow:hidden; }
.moon{
  width:160px; height:160px; margin:0 auto 1.2rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #d8d2ff 55%, #b9a9ff 100%);
  box-shadow:0 0 50px rgba(177,92,255,.6),0 0 90px rgba(92,200,255,.35), inset -18px -14px 30px rgba(80,40,120,.5);
  display:grid; place-items:center;
}
.moon .wolf{ width:118px; height:118px; margin-top:18px; }
.hero h1{
  font-family:'Creepster',cursive; font-size:clamp(2rem,6vw,3.4rem);
  margin:.2rem 0 .6rem; color:#fff;
  text-shadow:0 0 14px var(--purple),0 0 30px rgba(92,200,255,.5);
}
.hero p{ max-width:620px; margin:.4rem auto 1.4rem; color:var(--muted); font-size:1.05rem; line-height:1.6; }
.btn{
  display:inline-block; text-decoration:none; font-weight:800; color:#0b0718;
  background:linear-gradient(90deg,var(--purple),var(--blue));
  padding:.7rem 1.4rem; border-radius:999px;
  box-shadow:0 0 18px rgba(177,92,255,.6); transition:.2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 0 26px rgba(52,227,196,.7); }

/* ---- section titles & cards ---- */
.section-title{
  font-family:'Creepster',cursive; text-align:center;
  font-size:clamp(1.6rem,4vw,2.4rem); color:#fff;
  text-shadow:0 0 12px var(--teal); margin:2rem 0 1rem;
}
.card{
  max-width:520px; margin:0 auto; background:var(--panel);
  border:1px solid var(--panel-line); border-radius:18px; padding:1.2rem;
  box-shadow:0 0 30px rgba(92,200,255,.15); backdrop-filter:blur(4px);
}
.card svg{ width:100%; height:auto; border-radius:12px; display:block; }
.card .caption{ margin-top:.7rem; color:var(--muted); text-align:center; font-style:italic; }

/* ---- gallery grid ---- */
.gallery{
  display:grid; gap:1.2rem; max-width:1000px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin:1.5rem auto; padding:0 1.2rem;
}
.art{
  margin:0; background:var(--panel); border:1px solid var(--panel-line);
  border-radius:16px; overflow:hidden; transition:.2s;
  position:relative; cursor:pointer;
}
.art:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; }
.art::after{
  content:"🔍 click to zoom";
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%);
  background:rgba(8,6,18,.82); color:var(--teal); border:1px solid var(--panel-line);
  font-size:.78rem; padding:.25rem .6rem; border-radius:999px;
  opacity:0; transition:.2s; pointer-events:none; white-space:nowrap;
}
.art:hover::after{ opacity:1; }
.art:hover{ transform:translateY(-4px); box-shadow:0 0 26px rgba(177,92,255,.5); border-color:var(--teal); }
.art img, .art svg{ width:100%; height:210px; object-fit:cover; display:block; background:#0c0a18; }
.art .label{ padding:.6rem .8rem; color:var(--muted); font-size:.95rem; text-align:center; }
.placeholder{ display:grid; place-items:center; color:var(--muted); }
.placeholder svg{ height:130px; width:auto; opacity:.8; object-fit:contain; background:transparent; }

/* ---- floating animal friends ---- */
.float{ position:absolute; opacity:.55; filter:drop-shadow(0 0 8px rgba(177,92,255,.5)); animation:bob 5s ease-in-out infinite; }
.float.cat{ left:3%; bottom:5%; width:92px; animation-delay:.5s; }
.float.fox{ right:4%; top:16%; width:104px; animation-delay:1.2s; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@media(max-width:600px){ .float{ display:none; } }

/* ---- footer ---- */
.site-footer{ text-align:center; color:var(--muted); padding:2.5rem 1rem; margin-top:2rem; border-top:1px solid var(--panel-line); }
.site-footer a{ color:var(--teal); text-decoration:none; }

/* ---- lightbox (click a drawing to zoom) ---- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:2rem;
  background:rgba(6,4,14,.9); backdrop-filter:blur(6px);
  animation:fade .2s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lightbox.open{ display:flex; }
.lightbox .lb-inner{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  max-width:94vw;
}
.lightbox .lb-media{
  border-radius:16px; background:#0c0a18; overflow:hidden;
  box-shadow:0 0 44px rgba(177,92,255,.6),0 0 80px rgba(52,227,196,.25);
  display:grid; place-items:center; max-width:94vw; max-height:76vh;
}
.lightbox .lb-media svg, .lightbox .lb-media img{ display:block; }
.lightbox .lb-media svg{ width:min(88vw,820px); height:auto; max-height:76vh; }
.lightbox .lb-media img{ max-width:94vw; max-height:76vh; width:auto; height:auto; }
/* placeholders are not clickable */
.art.placeholder{ cursor:default; }
.art.placeholder::after{ display:none; }
.lightbox .lb-caption{ color:var(--ink); font-size:1.1rem; text-align:center; }
.lightbox .lb-close{
  position:absolute; top:1rem; right:1.2rem; width:46px; height:46px;
  border:none; border-radius:50%; cursor:pointer; font-size:1.4rem; font-weight:800;
  color:#0b0718; background:linear-gradient(90deg,var(--purple),var(--blue));
  box-shadow:0 0 16px rgba(52,227,196,.6); transition:.2s; z-index:101;
}
.lightbox .lb-close:hover{ box-shadow:0 0 28px rgba(52,227,196,.95); transform:scale(1.05); }
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border:none; border-radius:50%; cursor:pointer;
  font-size:1.8rem; font-weight:800; line-height:1; color:#0b0718;
  background:linear-gradient(90deg,var(--purple),var(--blue));
  box-shadow:0 0 16px rgba(52,227,196,.6); transition:.2s; z-index:101;
  display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-nav:hover{ box-shadow:0 0 28px rgba(52,227,196,.95); transform:translateY(-50%) scale(1.08); }
.lightbox .lb-prev{ left:1.2rem; }
.lightbox .lb-next{ right:1.2rem; }
.lightbox .lb-count{ color:var(--muted); font-size:.9rem; text-align:center; }
@media(max-width:600px){
  .lightbox .lb-nav{ width:44px; height:44px; font-size:1.4rem; }
  .lightbox .lb-prev{ left:.5rem; }
  .lightbox .lb-next{ right:.5rem; }
}