:root{
  --brand-red:#d51b19;
  --blur-start:18px;
  --blur-end:0px;
}

html,body{
  margin:0; padding:0;
  height:100%;
  overflow:hidden;            /* スクロール禁止 */
  background:#000;
  overscroll-behavior:none;
}

.stage{
  position:fixed; inset:0;
  width:100vw; height:100dvh;
  min-height:100svh;
  background:var(--brand-red);
  overflow:hidden;
}

/* グレイン */
.stage::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:url("/assets/grain.png") repeat center/128px 128px;
  mix-blend-mode:overlay; opacity:.28; pointer-events:none;
}

/* 動画 */
.video-layer{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .7s ease; }
.video-ready .video-layer{ opacity:1; }
video.bg{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:#000;
}

/* ロゴ（ブラー→フェードイン） */
.logo-top,.logo-bottom{
  position:absolute; left:0; right:0;
  display:flex; justify-content:center;
  z-index:5;
  filter:blur(var(--blur-start)); opacity:0;
  transform:translateY(-6px);
  transition:filter .8s ease, opacity .8s ease, transform .6s ease;
}
.video-ready .logo-top,.video-ready .logo-bottom{
  filter:blur(var(--blur-end)); opacity:1; transform:translateY(0);
}

/* 位置 */
.logo-top{ top:5svh; }
.logo-bottom{ bottom:calc(env(safe-area-inset-bottom) + 4svh); }

/* サイズ */
.logo-top img{ width:clamp(240px,36vw,620px); height:auto; }
.logo-bottom img{ width:clamp(160px,14vw,260px); height:auto; }

/* モバイル */
@media (max-width:600px){
  .logo-top{ top:9svh; }
  .logo-top img{ width:clamp(200px,58vw,380px); }
  .logo-bottom img{ width:clamp(150px,40vw,220px); }
}

/* reduce-motion */
@media (prefers-reduced-motion:reduce){
  .video-layer,.logo-top,.logo-bottom{ transition:none; }
}

/* 全面クリック用の透明リンク */
.cover-enter{
  position:absolute; inset:0; z-index:2;
  background:transparent;
  text-indent:-9999px;
  outline:none; border:0;
}

/* =====================================================
   SNSリンク（ロゴと同じくブラー→フェードインで登場）
   ===================================================== */
.social-links{
  position:absolute;
  left:0; right:0;
  bottom:calc(env(safe-area-inset-bottom) + 12svh); /* PC基準：ロゴの少し上 */
  display:flex; justify-content:center; gap:2vw; flex-wrap:wrap;
  z-index:9;

  /* 初期は隠す → .video-ready で見せる */
  filter:blur(var(--blur-start));
  opacity:0;
  transform:translateY(4px);
  transition:filter .8s ease, opacity .8s ease, transform .6s ease;
  pointer-events:none;
}
.video-ready .social-links{
  filter:blur(var(--blur-end));
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ベース（PC既定）：文字/背景はオフ、正方形アイコン小さめ */
.social-links a{
  display:inline-block;
  padding:0; border:0; border-radius:0;
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  color:transparent; text-decoration:none; font-size:0; line-height:0; text-indent:0;
  box-shadow:none; outline:0;
  width:clamp(26px,3vw,34px); aspect-ratio:1/1;
  transition:transform .2s ease, filter .2s ease, opacity .2s ease;
}
.social-links a > img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center;
  background:transparent !important;
  -webkit-user-drag:none; user-select:none;
  opacity:1; mix-blend-mode:normal;
}

/* PCホバー */
@media (hover:hover){
  .social-links a:hover img{ transform:scale(1.10); filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
}
.social-links a:focus img,
.social-links a:active img{ transform:scale(1.10); filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }

/* =====================================================
   並び順固定（PC/モバイル共通）
   ===================================================== */
@supports selector(a:has(img)) {
  .social-links a{ order:99; }
  .social-links a:has(img[src*="instagram"])  { order:1; }
  .social-links a:has(img[src*="spotify"])    { order:2; }
  .social-links a:has(img[src*="applemusic"]){ order:3; }
  .social-links a:has(img[src*="youtube"])    { order:4; }
}
@supports not selector(a:has(img)) {
  .social-links a{ order:99; }
  .social-links a[href*="instagram"]{ order:1; }
  .social-links a[href*="spotify"]  { order:2; }
  .social-links a[href*="apple"]    { order:3; } /* music.apple.com 等 */
  .social-links a[href*="youtube"]  { order:4; }
}

/* =====================================================
   モバイル：4つだけ（Inst→Spotify→Apple Music→YouTube）
   ===================================================== */
@media (max-width:600px){
  .social-links{
    bottom:calc(env(safe-area-inset-bottom) + 14svh);
    gap:clamp(8px,3.5vw,14px);
  }

  /* いったん全消し → 4つだけ出す（href 判定） */
  .social-links a{ display:none !important; }
  .social-links a:is([href*="instagram"],[href*="spotify"],[href*="apple"],[href*="youtube"]){
    display:inline-block !important;
  }

  /* :has(img) が使える環境の保険（画像名） */
  @supports selector(a:has(img)){
    .social-links a:has(img[src*="instagram"]){ display:inline-block !important; }
    .social-links a:has(img[src*="spotify"]){ display:inline-block !important; }
    .social-links a:has(img[src*="applemusic"]){ display:inline-block !important; }
    .social-links a:has(img[src*="youtube"]){ display:inline-block !important; }
  }

  /* サイズはさらに小さく */
  .social-links a{
    width:clamp(40px,15vw,56px) !important;
    aspect-ratio:1/1;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    padding:0 !important;
  }

  .social-links a > img{ opacity:1; mix-blend-mode:normal; }

  @media (hover:hover){
    .social-links a:hover img{ transform:scale(1.06); }
  }
  .social-links a:focus img,
  .social-links a:active img{ transform:scale(1.06); }
}

/* アニメ苦手環境 */
@media (prefers-reduced-motion:reduce){
  .social-links,
  .social-links a,
  .social-links a > img{ transition:none !important; }
}

/* PCだけアイコンを約1.2倍 */
@media (min-width:601px){
  .social-links a{
    width:clamp(31px, 3.6vw, 41px); /* 26→31 / 3vw→3.6vw / 34→41 */
  }
}