/* =========================
   THEME TOKENS（明るめ）
========================= */
:root{
  --bg:#171322;          /* 深いバイオレットグレー */
  --bg-2:#221b35;        /* カード背景 */
  --card:#221b35;
  --text:#f7f4ff;        /* ほんのり紫がかった白 */
  --muted:#c09bff;       /* 明るい補助見出し */
  --line:#3a2c58;        /* 枠線 */
  --purple:#a368f6;      /* oklch(.65 .25 300) 基準（#a368f6） */
  --purple-2:#c09bff;    /* ハイライト紫 */
  --magenta:#e879f9;     /* アクセント */
  --cyan:#7dd3fc;        /* クール補色 */
  --glow:0 0 22px rgba(163,104,246,.6), 0 0 64px rgba(192,155,255,.25);
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 700px at 75% -10%, #2c2148 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 100%, #21193a 0%, transparent 60%),
    var(--bg);
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  line-height:1.6;
}

/* =========================
   GLOBAL UI
========================= */
.container{width:min(1200px,92vw); margin-inline:auto}
.section{padding:72px 0}
.section-header{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin:0 0 20px;
}
.h-label{
  font-family:"Orbitron", sans-serif; letter-spacing:.08em;
  color:var(--muted); font-size:.9rem; text-transform:uppercase;
}
.h-title{
  font-family:"Orbitron", sans-serif; font-size:clamp(22px,2.2vw,30px);
  margin:.2rem 0 0;
}

/* Pill Buttons with neon glow */
.btn{
  --bcol: color-mix(in srgb, var(--purple) 70%, white 0%);
  --bgA: rgba(163,104,246,.20);
  --bgB: rgba(163,104,246,.06);
  display:inline-flex; align-items:center; gap:.6em;
  border:1px solid var(--bcol);
  background: linear-gradient(180deg, var(--bgA), var(--bgB));
  color:var(--text); padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:700; letter-spacing:.02em;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 8px rgba(163,104,246,.45), 0 0 22px rgba(192,155,255,.20);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position:relative; isolation:isolate;
}
.btn::after{
  /* 光の走るライン */
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(120px 40px at -10% 50%, rgba(125,211,252,.35), transparent 60%),
    radial-gradient(120px 40px at 110% 50%, rgba(232,121,249,.35), transparent 60%);
  border-radius:inherit; z-index:-1; opacity:.0; transition:opacity .18s ease;
}
.btn:hover{
  transform: translateY(-1px) scale(1.02);
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--purple) 45%);
  box-shadow: 0 0 28px var(--magenta), 0 0 80px rgba(163,104,246,.8);
  background: linear-gradient(180deg, rgba(163,104,246,.28), rgba(163,104,246,.10));
}
.btn:hover::after{opacity:.8}
.btn:active{transform:translateY(0) scale(.99)}

/* Link-ish hover */
a{color:inherit}
a:hover{color:var(--purple-2)}

/* =========================
   NAV
========================= */
.nav{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:50;
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(23,19,34,.92), rgba(23,19,34,.35) 90%);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav .inner{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand-dot{
  width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 12%, var(--purple) 25% 60%, transparent 62%);
  box-shadow: var(--glow);
}
.brand-name{font-family:"Orbitron", sans-serif; font-weight:700; letter-spacing:.05em}
.nav ul{display:flex; gap:18px; margin:0; padding:0; list-style:none}
.nav a{opacity:.9; text-decoration:none}
.nav a:hover{opacity:1; text-shadow:0 0 18px rgba(192,155,255,.55)}
@media (max-width:860px){ .nav ul{display:none} }

/* =========================
   HERO
========================= */
.hero{
  position:relative; padding-top:72px; min-height:calc(100svh - 64px);
  display:grid; place-items:center; overflow:clip;
}
.hero::before{
  content:""; position:absolute; inset:-10% -10% auto; height:72%;
  background:
    radial-gradient(900px 500px at 65% 0%, rgba(192,155,255,.26), transparent 60%),
    radial-gradient(800px 500px at 12% 80%, rgba(125,211,252,.18), transparent 60%);
  filter: blur(16px);
  pointer-events:none;
}
.hero-wrap{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:min(6vw,48px);
  align-items:center; width:min(1200px, 92vw); margin-inline:auto;
}
@media (max-width:960px){ .hero-wrap{grid-template-columns:1fr; padding:48px 0 16px} }

.hero-visual{
  position:relative; aspect-ratio:16/10; border-radius:24px; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 85% 0%, rgba(192,155,255,.30), transparent 60%),
    linear-gradient(145deg, #281e44 0%, #1c1631 60%);
  border:1px solid var(--line); box-shadow: var(--glow);
}
.hero-visual .artist{
  position:absolute; inset:0;
  background:
    radial-gradient(500px 360px at 75% 10%, rgba(163,104,246,.35), transparent 60%),
    url('../img/profile.jpg') center/cover no-repeat; /* ← 差し替え推奨 */
  filter:saturate(1.05) contrast(1.05);
  mix-blend-mode: screen; opacity:.96;
}
.hero-visual .bulb{
  position:absolute; right:3%; top:10%;
  width:18px; height:26px; border-radius:9px 9px 12px 12px / 9px 9px 16px 16px;
  background:
    radial-gradient(circle at 40% 35%, #fff 0 20%, var(--purple-2) 35%, rgba(163,104,246,.22) 66%),
    radial-gradient(circle at 50% 120%, rgba(163,104,246,.9), transparent 60%);
  box-shadow: 0 0 30px rgba(163,104,246,.95), 0 0 60px rgba(163,104,246,.55);
  animation: blink 3.8s ease-in-out infinite;
}
@keyframes blink{
  0%, 12%, 100% { filter:brightness(1); opacity:.95 }
  15%{ filter:brightness(1.35); opacity:1 }
  60%{ filter:brightness(.85); opacity:.86 }
}

.hero-copy h1{
  font-family:"Orbitron", sans-serif;
  font-size:clamp(28px,4.6vw,56px);
  line-height:1.1; margin:0 0 10px; letter-spacing:.01em
}
.kicker{ color:var(--muted); font-size:.95rem; margin-bottom:16px; letter-spacing:.06em }
.catch{ font-size:clamp(18px,2vw,22px); opacity:.96; margin:0 0 28px }
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

/* =========================
   MUSIC CARDS（明るめ）
========================= */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{
  grid-column:span 3; min-height:220px;
  background:
    linear-gradient(180deg, rgba(88,57,150,.32), rgba(58,36,94,.28)),
    radial-gradient(380px 240px at 30% 0%, rgba(192,155,255,.28), transparent 60%),
    var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--purple) 65%, white 0%);
  box-shadow: 0 0 28px rgba(232,121,249,.7), 0 0 80px rgba(163,104,246,.7);
}
.card .art{
  aspect-ratio:1/1; width:100%;
  background:
    radial-gradient(120px 80px at 30% 30%, #ffffffaa, transparent 40%),
    conic-gradient(from 210deg, #a368f6, #e879f9, #a368f6 90%);
  mask: radial-gradient(120% 120% at 50% 50%, #000 68%, transparent 69%);
}
.card .meta{ padding:12px 14px 16px }
.card .title{ font-weight:800; letter-spacing:.02em }
.card .date{ color:#e8e2ff; opacity:.78; font-size:.9rem }
@media (max-width:1100px){ .card{grid-column:span 4} }
@media (max-width:720px){ .card{grid-column:span 12} }

/* =========================
   ABOUT
========================= */
.about{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center;
  background:linear-gradient(180deg, rgba(163,104,246,.10), rgba(163,104,246,.04));
  border:1px solid var(--line); border-radius:20px; padding:24px;
}
.about .ph{
  aspect-ratio: 4/3; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:
    radial-gradient(420px 280px at 80% 0%, rgba(192,155,255,.30), transparent 60%),
    url('https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; /* ← 差し替え */
  box-shadow: var(--glow);
}
.about h3{ margin:.2rem 0 .6rem; font-family:"Orbitron", sans-serif }
.about p{ opacity:.96 }

/* =========================
   VIDEOS
========================= */
.videos{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.vcard{
  grid-column:span 4; position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(420px 280px at 80% 0%, rgba(163,104,246,.25), transparent 60%),
    linear-gradient(160deg, #2a2047, #1c1631 60%);
  aspect-ratio:16/9; box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vcard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--purple) 65%, white 0%);
  box-shadow: 0 0 24px rgba(163,104,246,.6), 0 0 70px rgba(192,155,255,.5);
}
.vcard .play{
  position:absolute; inset:auto 12px 12px auto;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:rgba(23,19,34,.6);
  border:1px solid var(--purple); box-shadow: var(--glow);
}
.vcard .play::before{
  content:""; width:0; height:0; border-left:14px solid var(--purple-2);
  border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:2px;
}
.vtitle{ margin:.5rem 0 0; font-weight:800 }
@media (max-width:1000px){ .vcard{grid-column:span 6} }
@media (max-width:720px){ .vcard{grid-column:span 12} }

/* =========================
   NEWS
========================= */
.news{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px}
.newslist{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(163,104,246,.09), rgba(163,104,246,.03));
}
.newslist li{
  display:flex; gap:14px; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--line)
}
.newslist li:last-child{border-bottom:none}
.tag{
  font-size:.75rem; letter-spacing:.06em; color:#efe9ff;
  border:1px solid var(--line); border-radius:999px; padding:4px 8px;
  background: linear-gradient(180deg, rgba(163,104,246,.22), rgba(163,104,246,.08));
}
.date{color:#efe9ff; opacity:.7; font-size:.9rem}
.news-hero{
  border:1px solid var(--line); border-radius:16px; min-height:220px;
  background:
    radial-gradient(300px 220px at 20% 10%, rgba(192,155,255,.35), transparent 60%),
    url('https://images.unsplash.com/photo-1520367745676-40738e85aa1c?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; /* 差し替え可 */
}

/* =========================
   FOOTER
========================= */
footer{
  margin-top:64px; padding:28px 0 60px; border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(163,104,246,.08))
}
.links{display:flex; gap:10px; flex-wrap:wrap}
.link-pill{
  display:inline-flex; align-items:center; gap:.6em; padding:8px 12px;
  border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--text);
  opacity:.9; background:linear-gradient(180deg, rgba(163,104,246,.10), rgba(163,104,246,.04));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.link-pill:hover{
  opacity:1; border-color:var(--purple); box-shadow: var(--glow);
  transform: translateY(-1px);
}
small{color:#efe9ff; opacity:.75}

/* Scroll reveal */
.reveal{opacity:0; transform: translateY(10px); transition:.6s ease}
.reveal.active{opacity:1; transform:none}

/* 動きを苦手とする環境に配慮 */
@media (prefers-reduced-motion: reduce){
  .btn, .card, .vcard, .reveal { transition:none }
  .hero-visual .bulb{ animation:none }
}