/*
Theme Name: HiToNaMi
Theme URI: https://x.com/Hitonami_info
Author: HiToNaMi
Description: 「君の部屋をライブハウスに」 VRChat発ロックバンド HiToNaMi 公式サイトテーマ。ライブスケジュール専用投稿タイプ搭載で更新がかんたん。
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: hitonami
*/

/* ==========================================================
   0. Tokens
   ========================================================== */
:root{
  --bg:#05070c;
  --bg2:#0a0f1a;
  --panel:#0d1422;
  --line:#1d2940;
  --fg:#eef3fa;
  --muted:#8fa1b8;
  --aurora:#3fe0a8;
  --cyan:#36c6e8;
  --red:#ff2e3f;
  --grad:linear-gradient(100deg,var(--aurora),var(--cyan));
  --skew:-8deg;
  --font-head:'Oswald','Zen Kaku Gothic New',sans-serif;
  --font-body:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
}

/* ==========================================================
   1. Base
   ========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
  overflow-x:hidden;
}
body::before{ /* scanlines */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aurora);text-decoration:none;transition:.25s}
a:hover{color:var(--cyan)}
ul{list-style:none}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* heading style: angular slab */
.sec-title{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,6vw,4rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1;
  margin-bottom:.4em;
  position:relative;
  display:inline-block;
  transform:skewX(var(--skew));
}
.sec-title::after{
  content:"";display:block;height:6px;width:60%;margin-top:10px;
  background:var(--grad);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.sec-title .ja{
  font-size:.85rem;letter-spacing:.5em;color:var(--muted);
  display:block;margin-top:8px;font-family:var(--font-body);font-weight:400;
}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:36px}

.btn{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg);
  background:transparent;
  border:1px solid var(--aurora);
  padding:.7em 2.2em;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  position:relative;overflow:hidden;
  transition:.3s;
}
.btn:hover{background:var(--aurora);color:#04130d;transform:translateY(-2px)}
.btn--red{border-color:var(--red)}
.btn--red:hover{background:var(--red);color:#fff}

/* ==========================================================
   2. Header / Nav
   ========================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(180deg,rgba(5,7,12,.92),rgba(5,7,12,.55) 70%,transparent);
  backdrop-filter:blur(6px);
  transition:.3s;
}
.site-header.is-scrolled{background:rgba(5,7,12,.95);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand img.brand-logo{height:30px;width:auto;filter:drop-shadow(0 0 8px rgba(63,224,168,.35));transition:.3s}
.brand:hover img.brand-logo{filter:drop-shadow(0 0 14px rgba(63,224,168,.8))}
.global-nav ul{display:flex;gap:6px}
.global-nav a{
  font-family:var(--font-head);font-weight:500;letter-spacing:.12em;text-transform:lowercase;
  color:var(--fg);padding:8px 14px;display:block;position:relative;
}
.global-nav a::after{
  content:"";position:absolute;left:14px;right:100%;bottom:4px;height:2px;
  background:var(--grad);transition:right .3s;
}
.global-nav a:hover::after{right:14px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;z-index:1100}
.nav-toggle span{display:block;width:30px;height:2px;background:var(--fg);margin:7px 0;transition:.3s}

@media(max-width:900px){
  .nav-toggle{display:block}
  .global-nav{
    position:fixed;inset:0;background:rgba(5,7,12,.97);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:.3s;
  }
  .global-nav.is-open{opacity:1;pointer-events:auto}
  .global-nav ul{flex-direction:column;text-align:center;gap:18px}
  .global-nav a{font-size:1.6rem}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
}

/* ==========================================================
   3. Hero
   ========================================================== */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;animation:kvzoom 18s ease-in-out infinite alternate}
@keyframes kvzoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero::before{ /* tint */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,7,12,.55),rgba(5,7,12,.15) 40%,rgba(5,7,12,.92) 92%),
    linear-gradient(115deg,rgba(63,224,168,.16),transparent 45%,rgba(255,46,63,.14));
}
.hero-inner{width:100%;max-width:1100px;margin:0 auto;padding:0 24px 11vh}
/* 公式ロゴ（SVG）をマスクで重ねてグリッチ */
.hero-logo{
  position:relative;
  width:min(760px,88%);
  aspect-ratio:203.37/57.76;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.55));
}
.hero-logo .layer{
  position:absolute;inset:0;background:#fff;
  -webkit-mask:url(assets/logo.svg) no-repeat center/contain;
  mask:url(assets/logo.svg) no-repeat center/contain;
}
.hero-logo .layer.r{background:var(--red);animation:gl1 2.8s infinite steps(1)}
.hero-logo .layer.c{background:var(--cyan);animation:gl2 3.6s infinite steps(1)}
.hero-logo .layer.base{z-index:3}
@keyframes gl1{
  0%,86%{transform:none;clip-path:inset(0 0 0 0)}
  87%{transform:translate(-6px,3px);clip-path:inset(10% 0 55% 0)}
  90%{transform:translate(5px,-2px);clip-path:inset(60% 0 8% 0)}
  93%{transform:none;clip-path:inset(0)}
}
@keyframes gl2{
  0%,78%{transform:none;clip-path:inset(0)}
  80%{transform:translate(7px,2px);clip-path:inset(35% 0 35% 0)}
  84%{transform:translate(-5px,-3px);clip-path:inset(0 0 75% 0)}
  88%{transform:none;clip-path:inset(0)}
}
.hero-copy{
  margin-top:22px;font-size:clamp(1rem,2.4vw,1.45rem);letter-spacing:.3em;
  color:var(--fg);text-shadow:0 0 18px rgba(63,224,168,.6);
}
.hero-sub{color:var(--muted);letter-spacing:.18em;margin-top:8px;font-size:.85rem}
.hero-scroll{
  position:absolute;right:28px;bottom:28px;
  font-family:var(--font-head);letter-spacing:.4em;font-size:.7rem;color:var(--muted);
  writing-mode:vertical-rl;
}
.hero-scroll::after{
  content:"";display:block;width:1px;height:64px;margin-top:12px;margin-left:4px;
  background:linear-gradient(180deg,var(--aurora),transparent);
  animation:scrl 1.8s infinite;
}
@keyframes scrl{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1);transform-origin:top}}

/* marquee */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);
  overflow:hidden;white-space:nowrap;padding:10px 0;
  transform:skewY(-1.2deg);margin:-1px 0 0;
}
.marquee-inner{display:inline-block;animation:mq 28s linear infinite;font-family:var(--font-head);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.marquee-inner em{color:var(--aurora);font-style:normal;margin:0 1.2em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================
   4. Sections
   ========================================================== */
.section{padding:110px 0}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 18%,var(--bg2) 82%,var(--bg) 100%)}

/* fade-in on scroll */
.fx{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.fx.is-in{opacity:1;transform:none}

/* ---- news list ---- */
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{
  display:flex;gap:26px;align-items:baseline;padding:20px 8px;color:var(--fg);
  position:relative;overflow:hidden;flex-wrap:wrap;
}
.news-list a:hover{background:rgba(63,224,168,.05);padding-left:18px}
.news-date{font-family:var(--font-head);color:var(--aurora);letter-spacing:.1em;font-size:.95rem;min-width:7.2em}
.news-cat{
  font-size:.68rem;letter-spacing:.2em;color:#04130d;background:var(--grad);
  padding:2px 12px;font-weight:700;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.news-title{flex:1;min-width:50%}

/* ---- live cards ---- */
.live-grid{display:grid;gap:22px}
.live-card{
  display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center;
  background:var(--panel);border:1px solid var(--line);
  padding:26px 30px;position:relative;overflow:hidden;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:.3s;
}
.live-card:hover{border-color:var(--aurora);transform:translateY(-3px)}
.live-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);
}
.live-date{
  font-family:var(--font-head);text-align:center;line-height:1.05;
  transform:skewX(var(--skew));
}
.live-date .y{display:block;font-size:.75rem;color:var(--muted);letter-spacing:.2em}
.live-date .md{display:block;font-size:2.4rem;font-weight:700;color:var(--aurora)}
.live-date .dow{display:block;font-size:.8rem;color:var(--muted);letter-spacing:.3em}
.live-info h3{font-size:1.25rem;letter-spacing:.06em;margin-bottom:6px}
.live-info h3 a{color:var(--fg)}
.live-info h3 a:hover{color:var(--aurora)}
.live-meta{color:var(--muted);font-size:.88rem;display:flex;flex-wrap:wrap;gap:4px 22px}
.live-meta span::before{content:"■ ";color:var(--aurora);font-size:.6em;vertical-align:.25em}
.live-card.is-past{filter:saturate(.25) opacity(.6)}
.live-card .badge{
  position:absolute;top:0;right:0;font-size:.62rem;letter-spacing:.25em;font-weight:700;
  padding:4px 16px;color:#fff;background:var(--red);
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%);
}
.live-card .badge--end{background:#36404f}
@media(max-width:700px){
  .live-card{grid-template-columns:1fr;gap:10px;padding:22px}
  .live-date{text-align:left;display:flex;align-items:baseline;gap:10px}
}

/* ---- discography ---- */
.disco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px}
.disco-card{position:relative}
.disco-card .jacket{
  aspect-ratio:1/1;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.disco-card .jacket img{width:100%;height:100%;object-fit:cover;transition:.5s}
.disco-card:hover .jacket img{transform:scale(1.07)}
.disco-card .jacket .noimg{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);color:var(--muted);letter-spacing:.2em;
  background:linear-gradient(135deg,var(--panel),#101a2e);
}
.disco-card h3{font-size:1.05rem;margin-top:14px}
.disco-card h3 a{color:var(--fg)}
.disco-card .disco-meta{color:var(--muted);font-size:.8rem;letter-spacing:.1em}
.disco-type{
  display:inline-block;font-size:.62rem;letter-spacing:.25em;font-weight:700;color:#04130d;
  background:var(--grad);padding:1px 10px;margin-right:8px;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}

/* ---- movie ---- */
.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.movie-card .frame{
  position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.movie-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.movie-card h3{font-size:.98rem;margin-top:12px;color:var(--fg)}

/* ---- biography ---- */
.bio-lead{font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:2.4;letter-spacing:.12em}
.bio-lead strong{color:var(--aurora)}
.member-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;margin-top:60px}
.member-card{
  background:var(--panel);border:1px solid var(--line);padding:34px 26px;text-align:center;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:.3s;position:relative;overflow:hidden;
}
.member-card:hover{border-color:var(--aurora);transform:translateY(-4px)}
.member-card .part{
  font-family:var(--font-head);font-size:.72rem;letter-spacing:.35em;color:#04130d;
  background:var(--grad);display:inline-block;padding:2px 14px;font-weight:700;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.member-card h3{font-size:1.4rem;margin:16px 0 4px;letter-spacing:.1em}
.member-card .sns{color:var(--muted);font-size:.82rem}

/* ---- link page ---- */
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.link-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);border:1px solid var(--line);padding:24px 28px;color:var(--fg);
  font-family:var(--font-head);letter-spacing:.15em;font-weight:600;font-size:1.05rem;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:.3s;
}
.link-card small{display:block;font-family:var(--font-body);font-weight:400;color:var(--muted);font-size:.75rem;letter-spacing:.08em}
.link-card .arw{color:var(--aurora);font-size:1.4rem;transition:.3s}
.link-card:hover{border-color:var(--aurora);transform:translateY(-3px);color:var(--fg)}
.link-card:hover .arw{transform:translateX(6px)}

/* ---- single / page content ---- */
.entry-header{padding:160px 0 50px;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.entry-title{
  font-size:clamp(1.7rem,4.5vw,2.8rem);line-height:1.3;letter-spacing:.05em;
}
.entry-meta{color:var(--muted);font-family:var(--font-head);letter-spacing:.12em;margin-top:14px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.entry-content{padding:50px 0 110px}
.entry-content>*+*{margin-top:1.5em}
.entry-content h2{
  font-size:1.5rem;border-left:5px solid var(--aurora);padding-left:16px;margin-top:2.4em;
}
.entry-content h3{font-size:1.2rem;color:var(--aurora);margin-top:2em}
.entry-content blockquote{border-left:3px solid var(--line);padding-left:20px;color:var(--muted)}
.entry-content img{border:1px solid var(--line)}
.entry-content iframe{max-width:100%}
.entry-content ul{list-style:square;padding-left:1.4em}
.entry-content ol{padding-left:1.4em}
.entry-content a{text-decoration:underline;text-underline-offset:4px}

/* live single spec table */
.live-spec{width:100%;border-collapse:collapse;margin-top:10px}
.live-spec th,.live-spec td{border:1px solid var(--line);padding:14px 18px;text-align:left;vertical-align:top}
.live-spec th{
  width:11em;background:var(--panel);font-family:var(--font-head);
  letter-spacing:.15em;color:var(--aurora);font-weight:600;white-space:nowrap;
}
@media(max-width:600px){
  .live-spec th,.live-spec td{display:block;width:100%;border-top:0}
  .live-spec tr:first-child th{border-top:1px solid var(--line)}
}
.ticket-cta{margin-top:36px;text-align:center}
.ticket-cta .btn{font-size:1.1rem;padding:1em 3.4em}

/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:60px}
.pagination .page-numbers{
  font-family:var(--font-head);border:1px solid var(--line);padding:8px 16px;color:var(--fg);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--aurora);color:#04130d;border-color:var(--aurora)}

/* ==========================================================
   5. Footer
   ========================================================== */
.site-footer{
  border-top:1px solid var(--line);background:var(--bg2);
  padding:70px 0 30px;text-align:center;position:relative;overflow:hidden;
}
.footer-watermark{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  width:min(900px,96%);opacity:.05;pointer-events:none;
}
.footer-logo{width:min(300px,70%);margin:0 auto 18px;position:relative;filter:drop-shadow(0 0 16px rgba(63,224,168,.3))}
.footer-copy{letter-spacing:.3em;color:var(--muted);font-size:.8rem;margin-top:6px}
.footer-sns{display:flex;justify-content:center;gap:22px;margin:26px 0 34px;position:relative}
.footer-sns a{
  font-family:var(--font-head);letter-spacing:.15em;color:var(--fg);font-size:.85rem;
  border-bottom:1px solid transparent;
}
.footer-sns a:hover{color:var(--aurora);border-color:var(--aurora)}
.copyright{color:#566378;font-size:.72rem;letter-spacing:.15em;position:relative}

/* ==========================================================
   6. Utility
   ========================================================== */
.center{text-align:center}
.mt-l{margin-top:56px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nothing{color:var(--muted);letter-spacing:.2em;padding:30px 0}

/* ==========================================================
   7. ド派手レイヤー（OP演出・カーソル・粒子・グリッチ）
   ========================================================== */

/* ---- opening animation ---- */
#htnm-intro{
  position:fixed;inset:0;z-index:99999;background:#030509;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
  cursor:pointer;overflow:hidden;
}
#htnm-intro::before{ /* scanline */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.03) 3px 4px);
  animation:intro-flicker .12s infinite;
}
#htnm-intro::after{ /* aurora sweep */
  content:"";position:absolute;inset:-30%;
  background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(63,224,168,.16) 60deg,rgba(54,198,232,.14) 120deg,transparent 200deg);
  animation:intro-sweep 3.2s linear infinite;
  filter:blur(30px);
}
@keyframes intro-flicker{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes intro-sweep{to{transform:rotate(360deg)}}
.intro-logo{
  position:relative;width:min(640px,80vw);aspect-ratio:203.37/57.76;z-index:2;
  opacity:0;animation:intro-in .25s steps(2) .35s forwards;
}
@keyframes intro-in{
  0%{opacity:0;transform:translateX(-14px) skewX(-18deg)}
  50%{opacity:1;transform:translateX(9px)}
  100%{opacity:1;transform:none}
}
.intro-logo .layer{
  position:absolute;inset:0;background:#fff;
  -webkit-mask:url(assets/logo.svg) no-repeat center/contain;
  mask:url(assets/logo.svg) no-repeat center/contain;
}
.intro-logo .layer.r{background:var(--red);animation:gl1 1.1s infinite steps(1)}
.intro-logo .layer.c{background:var(--cyan);animation:gl2 1.4s infinite steps(1)}
.intro-logo .layer.base{z-index:3}
.intro-copy{
  z-index:2;font-family:var(--font-body);letter-spacing:.42em;color:var(--fg);
  font-size:clamp(.8rem,2.4vw,1.05rem);text-indent:.42em;
  opacity:0;animation:intro-copy .5s ease 1s forwards;
  text-shadow:0 0 16px rgba(63,224,168,.8);
}
@keyframes intro-copy{from{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.42em}}
.intro-skip{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--font-head);font-size:.65rem;letter-spacing:.4em;color:var(--muted);
  animation:intro-flicker 1.2s infinite;
}
/* 出口：斜めワイプ */
#htnm-intro.is-out{
  animation:intro-out .65s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes intro-out{
  to{clip-path:polygon(0 0,100% 0,100% 0,0 0);transform:translateY(-2%)}
}
#htnm-intro.is-out .intro-logo{animation:intro-zoom .65s ease forwards}
@keyframes intro-zoom{to{transform:scale(1.12);opacity:0}}
body.intro-lock{overflow:hidden}

/* ---- custom cursor ---- */
@media (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button{cursor:none}
  .cur-dot,.cur-ring{
    position:fixed;top:0;left:0;z-index:100000;pointer-events:none;
    border-radius:50%;transform:translate(-50%,-50%);
  }
  .cur-dot{
    width:8px;height:8px;background:var(--aurora);
    box-shadow:0 0 12px var(--aurora),0 0 30px rgba(63,224,168,.5);
  }
  .cur-ring{
    width:38px;height:38px;border:1px solid rgba(63,224,168,.7);
    transition:width .25s,height .25s,border-color .25s,background .25s;
    mix-blend-mode:screen;
  }
  body.cur-hover .cur-ring{
    width:64px;height:64px;border-color:var(--cyan);
    background:rgba(54,198,232,.12);
  }
  body.cur-down .cur-ring{width:26px;height:26px;border-color:var(--red)}
  .cur-spark{
    position:fixed;z-index:100000;pointer-events:none;width:5px;height:5px;
    background:var(--aurora);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
    animation:spark .55s ease-out forwards;
  }
  @keyframes spark{
    to{transform:translate(var(--sx),var(--sy)) rotate(200deg) scale(0);opacity:0}
  }
}

/* ---- hero particles canvas ---- */
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen}
.hero-inner,.hero-scroll{position:relative;z-index:2}
.hero-inner{position:static}
.hero .hero-inner{z-index:2}

/* ---- glitch flash（ヒーロー全体がたまに乱れる） ---- */
.hero-glitchflash{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 6px,rgba(63,224,168,.08) 6px 8px),
    linear-gradient(90deg,rgba(255,46,63,.12),transparent 30%,rgba(54,198,232,.12));
  animation:gflash 7s infinite steps(1);
}
@keyframes gflash{
  0%,93%{opacity:0;transform:none}
  94%{opacity:1;transform:translateX(-8px) skewX(2deg)}
  95.5%{opacity:1;transform:translateX(6px)}
  97%{opacity:0;transform:none}
}

/* ---- grain ---- */
.grain{
  position:fixed;inset:-100%;z-index:9001;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,3%)}
  30%{transform:translate(6%,-14%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-10%,6%)}
  60%{transform:translate(12%,0)}70%{transform:translate(0,10%)}80%{transform:translate(-12%,-2%)}90%{transform:translate(8%,5%)}
}

/* ---- sec-title hover glitch ---- */
.sec-title:hover{animation:title-gl .3s steps(2) 2}
@keyframes title-gl{
  0%{transform:skewX(var(--skew)) translateX(0)}
  25%{transform:skewX(var(--skew)) translateX(-5px);text-shadow:3px 0 var(--red),-3px 0 var(--cyan)}
  75%{transform:skewX(var(--skew)) translateX(4px);text-shadow:-3px 0 var(--red),3px 0 var(--cyan)}
  100%{transform:skewX(var(--skew))}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  #htnm-intro,.grain,.hero-glitchflash,.hero-fx,.cur-dot,.cur-ring{display:none!important}
  body.intro-lock{overflow:auto}
  .fx{opacity:1;transform:none}
  *{animation-duration:.01s!important}
}

/* ---- member photos ---- */
.member-card{padding-top:0;overflow:hidden}
.member-photo{
  margin:0 -26px 20px;aspect-ratio:1/1;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#101a2e,var(--panel));
}
.member-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:.45s}
.member-card:hover .member-photo img{transform:scale(1.06);filter:saturate(1.1)}
.member-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(13,20,34,.92));
}
.member-photo .noface{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:3rem;color:var(--line);
}
.member-card .part{position:relative;z-index:2;margin-top:-34px}
.member-note{color:var(--muted);font-size:.8rem;margin-top:10px;line-height:1.7}