/* tokens */
:root{
  --rainbow:linear-gradient(90deg,#ff0040,#ff8a00,#ffe600,#31d843,#1ecde1,#7b61ff,#ff2bd6,#ff0040);
  --ink:#0f0f14;
  --muted:rgba(0,0,0,.72);
  --panel:rgba(255,255,255,.78);
  --panel-strong:rgba(255,255,255,.9);
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.12);
}

/* helpers*/
.discord-link{font-weight:800;text-decoration:none;}
.about-image{max-width:520px;width:100%;height:auto;border-radius:12px;display:block;margin:1rem auto 0;}

/* Shared hover motion */
:where(.explore-card,.project-card,button,#playButton,.btn,.social-icons a img,.toc-link){
  transition:transform .18s ease, box-shadow .18s ease, filter .2s ease, background .2s ease;
}

/* raibow frame */
:where(
  .section-card,.explore-card,.project-card,.badge,.tag,
  details.accordion>summary,details.accordion .accordion-content,
  button,#playButton,.btn,
  input[type="text"],input[type="search"],input[type="email"],textarea,select,
  .comment,.blog-post,.social-icons a img,.index-card,.status-panel
){
  --rb-fill:var(--panel);
  --rb-speed:22s;

  background:
    linear-gradient(0deg,var(--rb-fill),var(--rb-fill)) padding-box,
    var(--rainbow) border-box;
  background-size:100% 100%,400% 400%;
  border:2px solid transparent;
  animation:rainbow-flow var(--rb-speed) linear infinite;
}

/* page cards */
.section-card{
  margin:1.25rem auto;
  padding:1.15rem 1.15rem 1.35rem;
  border-radius:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(2px);
  --rb-speed:26s;
}
.section-card .section-title{margin:0 0 .25rem;text-align:center;font-weight:900;}
.section-card .section-subtitle{margin:0 0 .9rem;text-align:center;opacity:.85;}

/* home - explore*/
.home-explore{margin:4rem auto 3rem;text-align:center;max-width:1100px;padding:0 1rem;}
.home-explore h2{font-size:1.8rem;margin-bottom:.5rem;}
.home-explore-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}

.explore-card{
  text-decoration:none;color:#000;
  padding:1.6rem;border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  --rb-fill:rgba(255,255,255,.9);
}
.explore-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.18);filter:saturate(1.05);}
.explore-card h3{margin:0 0 .6rem;font-size:1.3rem;}
.explore-card p{opacity:.85;line-height:1.4;}
.explore-cta{display:inline-block;margin-top:1rem;font-weight:800;}

/* project cards */
.project-card{
  position:relative;
  width:320px;
  padding:.95rem;
  border-radius:var(--radius);
  box-shadow:0 8px 18px rgba(0,0,0,.11);
  --rb-fill:rgba(255,255,255,.88);
  --rb-speed:20s;
}
.project-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.16);filter:saturate(1.03);}
.project-image{width:100%;height:180px;object-fit:cover;border-radius:12px;}

.project-content h3{color:var(--ink);margin:.65rem 0 .35rem;font-weight:900;letter-spacing:.2px;}
.project-content p{margin:.35rem 0;color:var(--muted);line-height:1.35;}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:.35rem 0 .55rem;}
.tag{
  display:inline-block;
  font-size:.78rem;font-weight:800;
  padding:.18rem .55rem;border-radius:999px;color:#000;
  --rb-fill:rgba(255,255,255,.9);
  --rb-speed:18s;
}

/* accordion*/
details.accordion{margin:1rem 0;border-radius:14px;overflow:hidden;}
details.accordion>summary{
  list-style:none;cursor:pointer;user-select:none;
  padding:.65rem .9rem;margin:0;text-align:center;font-weight:900;
  border-radius:14px;position:relative;
  transition:filter .2s ease;
  --rb-fill:rgba(255,255,255,.82);
  --rb-speed:18s;
}
details.accordion>summary::-webkit-details-marker{display:none;}
details.accordion>summary:hover{filter:brightness(1.06);}
details.accordion>summary::after{
  content:"▾";
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  font-weight:900;transition:transform .2s ease;
}
details.accordion[open]>summary::after{transform:translateY(-50%) rotate(180deg);}
details.accordion[open]>summary{border-radius:14px 14px 0 0;}

details.accordion .accordion-content{
  padding:1rem;border-radius:0 0 14px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  backdrop-filter:blur(2px);
  --rb-fill:rgba(255,255,255,.72);
  --rb-speed:24s;
}

/* buttons */
:is(button,#playButton,.btn){
  appearance:none;
  font-weight:800;font-size:1rem;
  cursor:pointer;
  padding:.6rem 1.05rem;
  border-radius:12px;
  color:#000;
  --rb-fill:rgba(255,255,255,.86);
  --rb-speed:18s;
}
:is(button,#playButton,.btn):hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.btn.primary{
  background:var(--rainbow);
  background-size:400% 400%;
  animation:rainbow-flow 12s linear infinite;
  border:0;
}
.btn.primary:hover{filter:brightness(1.06);}
.btn.ghost{--rb-fill:rgba(255,255,255,.12);}

/* FORMS */
:is(input[type="text"],input[type="search"],input[type="email"],textarea,select){
  width:100%;
  padding:10px 12px;
  margin-bottom:8px;
  border-radius:10px;
  color:inherit;
  --rb-fill:rgba(255,255,255,.95);
  --rb-speed:26s;
}


/* blog */
.blog-post{
  border-radius:14px;
  padding:20px;
  margin-bottom:40px;
  box-shadow:var(--shadow);
  --rb-fill:#fefefe;
  --rb-speed:22s;
}
.blog-post h3{color:var(--ink);}

/* icons */
.social-icons{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap;}
.social-icons a img{
  width:50px;height:50px;border-radius:12px;padding:3px;
  --rb-fill:#fff;--rb-speed:24s;
}
.social-icons a:hover img{transform:scale(1.12);box-shadow:0 8px 18px rgba(0,0,0,.15);}

/* inspiration cards */
.inspo-card{padding:1rem;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.12);backdrop-filter:blur(2px);color:#000;}
.inspo-card h3{margin:.4rem 0 .25rem;font-weight:900;}
.inspo-card p{margin:0;opacity:.9;}
.inspo-avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(0,0,0,.25);}

/* about */
.profile-pic{width:280px;height:280px;border-radius:50%;border:4px solid #1a1a1a;object-fit:cover;box-shadow:0 0 10px rgba(0,0,0,.2);}
.about-container{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding:2rem;}
.bio-and-links{flex:1;min-width:280px;}

/* proect index*/
.index-card{
  position:sticky;top:24px;align-self:flex-start;
  width:240px;padding:16px 14px;border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  --rb-fill:rgba(255,255,255,.9);
  --rb-speed:30s;
}
.index-card .toc-title{text-align:center;font-weight:900;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid rgba(0,0,0,.1);}

.toc-link{
  display:block;
  margin:8px 0;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  color:#000;
  background:rgba(255,255,255,.85);
  border:2px solid rgba(0,0,0,.08);
}
.toc-link.toc-sub{margin-left:14px;font-size:.92rem;font-weight:700;opacity:.9;}
.toc-link:hover{
  background:var(--rainbow);
  background-size:400% 400%;
  animation:rainbow-flow 8s linear infinite;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transform:translateY(-1px);
}
.toc-top{margin-top:12px;width:100%;}
@media (max-width:980px){.index-card{display:none;}}

.status-panel{
  position:relative;
  overflow:hidden;
  max-width:1100px;
  margin:1.25rem auto 2rem;
  padding:1.25rem 1.25rem 1.1rem;
  border-radius:22px;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
  color:#000;
  background: none !important;
  border: 0 !important;
  animation: none !important;
}

/* animated rainbow border */
.status-panel::before{
  content:"";
  position:absolute;
  inset:-2px;                
  border-radius:24px;
  background:var(--rainbow);
  background-size:400% 400%;
  animation:rainbow-flow 22s linear infinite;
  opacity:.55;             
  z-index:0;
}

/* pastel interior */
.status-panel::after{
  content:"";
  position:absolute;
  inset:2px;                
  border-radius:20px;
  background:linear-gradient(90deg,
    rgba(255,214,231,.55),    
    rgba(255,246,204,.55),     
    rgba(204,255,235,.55),    
    rgba(204,238,255,.55),   
    rgba(233,214,255,.55)     
  );
  z-index:0;
}

.status-panel > *{position:relative; z-index:1;}

.status-head{text-align:center;margin-bottom:.9rem;}
.status-title{
  margin:0;
  font-weight:900;
  letter-spacing:.6px;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.status-sub{margin:.35rem 0 0; opacity:.85;}

/* divider */
.status-panel hr,
.status-panel .status-rule{
  height:2px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  opacity:.45;
  margin:12px auto 16px;
  width:min(820px,92%);
}

.status-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}
.status-card{
  border-radius:14px;
  padding:.95rem 1rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}
.status-card h3{margin:0 0 .35rem; font-weight:900;}