/* =========================================================
   css/2025npr.css
   Nipponeer / TDCS landing
   - Animated grain overlay (assets/grain.png)
   - Boot red + blur-to-video
   - Desktop: dock cluster near bottom, icons row
   - Mobile: 4 icons only (first 4), compact CTAs, no giant menu
   - Mobile: footer logo (NIPPONEER) smaller
   - Version: 20251222_fix
   ========================================================= */

:root{
  --brand-accent: 255 140 0;

  --glass-bg: rgba(0,0,0,.62);
  --glass-border: rgba(255,255,255,.20);
  --shadow: 0 10px 24px rgba(0,0,0,.5);

  --dock-max: 920px;
  --icon: clamp(36px, 5vmin, 54px);
  --icon-red-filter: brightness(0) saturate(100%) invert(16%) sepia(95%) saturate(5980%) hue-rotate(355deg) brightness(96%) contrast(108%);

  --txt: rgba(255,255,255,.92);
  --txt-dim: rgba(255,255,255,.72);

  /* Grain */
  --grain-blend: overlay;     /* soft-light / overlay */
  --grain-opacity: .28;       /* overlayなら .18〜.24推奨 */

  /* Boot red */
  --boot-red: #d51b19;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,body{
  margin:0; padding:0;
  width:100%;
  min-height:100%;
  background: var(--boot-red);
  color: var(--txt);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body{
  overflow:auto;
  overscroll-behavior: auto;
  touch-action: auto;
}

body.landing-page{
  overflow:hidden;
  overscroll-behavior: none;
  touch-action: none;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

.stage{
  position:relative;
  width:100%;
  min-height:100dvh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;

  padding-top:max(16px, env(safe-area-inset-top));
  padding-bottom:max(16px, env(safe-area-inset-bottom));

  overflow:hidden;
  isolation:isolate;
  background:var(--boot-red);
}

/* ---- Gradient base (background) ---- */
.stage::before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(70% 70% at 24% 58%, rgba(18,120,95,0.95), transparent 62%),
    radial-gradient(62% 60% at 55% 55%, rgba(135,38,34,0.95), transparent 60%),
    radial-gradient(60% 60% at 82% 52%, rgba(178,115,45,0.95), transparent 62%),
    radial-gradient(48% 48% at 96% 40%, rgba(125,82,25,0.8), transparent 62%),
    radial-gradient(55% 70% at 0% 50%, rgba(0,0,0,0.9), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,0.92), rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.88));
  filter: blur(34px) saturate(118%);
  transform: scale(1.12);
  z-index:0;
}

/* ---- Animated grain + vignette (assets/grain.png)
   IMPORTANT: UIに被せない（再現の“読みやすさ”優先）
   背景だけに乗せるなら z-index=2 / UIは z=5 のまま
---- */
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(80% 65% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.68) 100%),
    url("../assets/grain.png"),
    url("../assets/grain.png");

  background-repeat: no-repeat, repeat, repeat;
  background-size: auto, 140px 140px, 320px 320px;
  background-position: center, 0 0, 80px 40px;

  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
  filter: blur(18px) contrast(140%) brightness(115%);

  z-index:2;
  will-change: background-position, transform, opacity;
  animation: grainMove 1.15s steps(1,end) infinite;
}

@keyframes grainMove{
  0%   { background-position: center,   0px   0px,   80px  40px; opacity: calc(var(--grain-opacity) * .93); transform: translateZ(0) scale(1.01); }
  12%  { background-position: center,  40px -60px, -40px  20px; opacity: calc(var(--grain-opacity) * 1.07); }
  24%  { background-position: center, -80px  30px, 120px -50px; opacity: calc(var(--grain-opacity) * .90); }
  36%  { background-position: center, 120px  80px, -10px -90px; opacity: calc(var(--grain-opacity) * 1.03); }
  48%  { background-position: center, -30px -90px,  60px  70px; opacity: calc(var(--grain-opacity) * .97); }
  60%  { background-position: center,  90px  10px, -90px -10px; opacity: calc(var(--grain-opacity) * 1.09); }
  72%  { background-position: center, -120px 60px,  10px 110px; opacity: calc(var(--grain-opacity) * .92); }
  84%  { background-position: center,  20px 120px, -120px 10px; opacity: calc(var(--grain-opacity) * 1.06); }
  100% { background-position: center,   0px   0px,   80px  40px; opacity: calc(var(--grain-opacity) * .93); transform: translateZ(0) scale(1.01); }
}

@media (prefers-reduced-motion: reduce){
  .stage::after{ animation:none; }
  .video-layer::before,
  video.bg{ animation:none; }
  video.bg{ filter:none; transform:none; }
  .sb-badge:hover{ transform:none; }
  .sb-badge:hover img{ animation:none; }
  .sb-badge,
  .actions{ transition:none; }
  .logo-top,
  .artwork-strip,
  .sb-callout,
  .social-links,
  .logo-bottom,
  .logo-center{ transition:none; }
  .artwork-strip{ filter:none; transform:none; }
  .video-ready .logo-center img{ animation:none; opacity:0; }
}

/* ---- Background video ---- */
.video-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  opacity:1;
  transform: scale(1.02);
  background: var(--boot-red);
  pointer-events:none;
}
.video-ready .video-layer{ background: var(--boot-red); }
.video-ready .video-layer{ opacity:1; }
video.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  filter: blur(18px) saturate(110%);
  transform: scale(1.02);
  opacity: 0;
  transition: opacity .6s ease;
}
.video-playing video.bg{
  opacity: 1;
}
video.bg::-webkit-media-controls,
video.bg::-webkit-media-controls-panel,
video.bg::-webkit-media-controls-enclosure,
video.bg::-webkit-media-controls-play-button,
video.bg::-webkit-media-controls-start-playback-button,
video.bg::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance: none;
  opacity: 0;
  visibility: hidden;
}

.video-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--boot-red);
  opacity:1;
  z-index:2;
}
.video-booted .video-layer::before{
  opacity:.22;
}

.video-playing.video-ready video.bg{
  animation: video-unblur 2.4s ease forwards;
}

.video-playing.video-ready .video-layer::before{
  animation: boot-fade 2.4s ease forwards;
}

@keyframes video-unblur{
  0%{ filter: blur(18px) saturate(110%); transform: scale(1.02); }
  100%{ filter: blur(0px) saturate(110%); transform: scale(1); }
}

@keyframes boot-fade{
  0%{ opacity:1; }
  100%{ opacity:.22; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 700px){
  .video-layer{ transform:none; }
  video.bg{
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
  }
  .video-playing.video-ready video.bg{
    animation: video-unblur 2.4s ease forwards;
  }
}

@keyframes video-unblur-contain{
  0%{ filter: blur(18px) saturate(110%); }
  100%{ filter: blur(0px) saturate(110%); }
}

/* ---- Top / Bottom logos ---- */
.logo-top,
.logo-bottom{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  z-index:5;
}

.logo-top{
  margin:0;
  padding:0;
  margin-top: clamp(10px, 4vh, 50px);
}
.logo-top img{
  width: clamp(220px, 28vw, 420px);
  filter: none;
}

.logo-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6;
  pointer-events:none;
}
.logo-center img{
  width: clamp(220px, 28vw, 420px);
  opacity:.95;
  filter:none;
  transform: scale(1);
  transform-origin: center;
}

.logo-bottom{
  margin-bottom: clamp(12px, 3.2vh, 24px);
}
.logo-bottom img{
  width: clamp(150px, 16vmin, 230px);
  opacity:.92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

.logo-top,
.sb-callout,
.badge-social,
.logo-bottom{
  opacity:0;
  filter: blur(14px);
  transform: translateY(-6px);
  transition: opacity 1.4s ease, filter 1.6s ease, transform 1.2s ease;
  pointer-events:none;
}

.ui-soft .logo-top,
.ui-soft .sb-callout,
.ui-soft .badge-social,
.ui-soft .logo-bottom,
.boot-ui .logo-top,
.boot-ui .sb-callout,
.boot-ui .badge-social,
.boot-ui .logo-bottom{
  opacity:1;
  filter: none;
  transform: translateY(0);
}

.boot-ui .logo-top,
.boot-ui .sb-callout,
.boot-ui .badge-social,
.boot-ui .logo-bottom{
  pointer-events:auto;
}

.video-ready .logo-center img{
  animation: logo-bloom 2.2s ease forwards;
}
.video-booted .logo-center img{
  animation: none;
  opacity: 0;
}

@keyframes logo-bloom{
  0%{ transform: scale(1); filter: blur(0px); opacity:.95; }
  55%{ opacity:.9; }
  100%{ transform: scale(2.7); filter: blur(26px); opacity:0; }
}

/* ---- Spacer pushes dock down (desktop look) ---- */
.spacer{ flex:1; min-height: 10px; }

/* ---- Dock container ---- */
.dock-container{
  width: min(92vw, var(--dock-max));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 1.8vh, 16px);
  z-index:5;
  margin-bottom: clamp(16px, 3.4vh, 28px);
}

/* ---- Artwork strip (Amazon Music vibe) ---- */
.artwork-strip{
  width: min(110vw, 1500px);
  overflow:hidden;
  position:relative;
  z-index:4;
  padding: 14px 0 22px;
  margin-bottom: -18px;
  opacity: 0;
  visibility: hidden;
  filter: blur(12px);
  transform: translate3d(-26px, 0, 0);
  transition: opacity .5s ease, filter .6s ease, transform .8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.artwork-strip.is-ready{
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.artwork-strip.is-loading{
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: translate3d(-18px, 0, 0);
}

@media (prefers-reduced-motion: reduce){
  .artwork-strip{
    transition: none;
    filter: none;
    transform: none;
  }
  .artwork-item__cluster,
  .artwork-item__inf path{
    animation: none;
  }
}

.artwork-track{
  display:flex;
  align-items:center;
  gap: clamp(10px, 1.3vmin, 14px);
  will-change: transform;
  transform: translate3d(0,0,0);
}

.artwork-item{
  width: clamp(96px, 11vmin, 160px);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  pointer-events:auto;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .25s ease;
}

.artwork-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: transform .18s ease, opacity .25s ease;
}

.artwork-item.is-loaded img{
  opacity: 1;
}

.artwork-item.is-loaded{
  box-shadow: 0 0 0 1px rgba(0,0,0,.32);
}

.artwork-item__loader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity .25s ease;
  pointer-events: none;
  mix-blend-mode: normal;
}

.artwork-item.is-loaded .artwork-item__loader{
  opacity: 0;
  visibility: hidden;
}
.artwork-item.is-loaded .artwork-item__cluster,
.artwork-item.is-loaded .artwork-item__inf path{
  animation: none;
}

.artwork-item__cluster{
  position: relative;
  width: clamp(28px, 4vmin, 48px);
  height: clamp(28px, 4vmin, 48px);
  animation: inf-cluster-spin 2.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}

.artwork-item__inf{
  position: absolute;
  inset: -10%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(calc(var(--i) * 72deg));
}
.artwork-item__inf svg{
  width: 120%;
  height: auto;
  display: block;
}
.artwork-item__inf path{
  stroke: rgba(255,255,255,var(--alpha,0.75));
  stroke-width: var(--stroke,2.4);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 150 80;
  fill: none;
  animation: inf-draw 1.2s ease-in-out infinite;
}
.artwork-item__inf:nth-child(1){ --alpha: .25; --stroke: 1.4; }
.artwork-item__inf:nth-child(2){ --alpha: .4; --stroke: 1.8; }
.artwork-item__inf:nth-child(3){ --alpha: .6; --stroke: 2.2; }
.artwork-item__inf:nth-child(4){ --alpha: .78; --stroke: 2.6; }
.artwork-item__inf:nth-child(5){ --alpha: .5; --stroke: 2.0; }

.artwork-strip.is-ready .artwork-item:hover,
.artwork-strip.is-ready .artwork-item:focus-within{
  transform: scale(1.04);
}

@keyframes inf-cluster-spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes inf-draw{
  0%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -230; }
}
}

/* ---- SoundBetter callout ---- */
.sb-callout{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 2vh, 18px);
  position: relative;
  z-index:5;
}

.badge-social{
  width: min(92vw, var(--dock-max));
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:center;
  gap: clamp(12px, 2.4vmin, 22px);
  margin-top: clamp(10px, 2vh, 18px);
  margin-bottom: clamp(6px, 1.2vh, 12px);
}

.sb-badge{
  width: clamp(220px, 18vmin, 320px);
  position: relative;
  display: inline-block;
  isolation: isolate;
  transform-origin: 50% 55%;
  transition: transform .22s ease;
}
.sb-badge img{
  width:100%;
  filter: none;
  transform-origin: 50% 55%;
  transition: filter .2s ease;
}

.sb-badge:hover{
  transform: scale(1.04);
}

.sb-badge:hover img{
  filter: saturate(1.16) hue-rotate(-5deg);
  animation: sb-wobble .6s ease;
}

@keyframes sb-wobble{
  0%{ transform: rotate(0deg); filter: blur(0px) saturate(1) hue-rotate(0deg); }
  35%{ transform: rotate(-5deg); filter: blur(.8px) saturate(1.18) hue-rotate(-5deg); }
  70%{ transform: rotate(4deg); filter: blur(.7px) saturate(1.18) hue-rotate(-5deg); }
  100%{ transform: rotate(0deg); filter: blur(0px) saturate(1.1) hue-rotate(-3deg); }
}

/* ---- CTA buttons ---- */
.actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(10px, 1.6vmin, 16px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: clamp(8px, 1.2vmin, 11px) clamp(14px, 2.2vmin, 22px);
  border-radius: 999px;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);

  font-weight: 400;            /* ★普通の太さ */
  letter-spacing: .01em;
  white-space: nowrap;
  font-size: clamp(12px, 1.4vmin, 14px);
  line-height: 1.1;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 56px rgba(0,0,0,.55);
  background: rgba(0,0,0,.58);
}

.sb-word{
  position:relative;
  font-weight: 600;           /* ★強調だけ太く */
  padding-bottom:2px;
}
.sb-word::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:2px;
  background: rgb(var(--brand-accent));
  opacity:.85;
}

/* ---- Social icons (Desktop: row, Mobile: 4 icons only) ---- */
.social-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap: clamp(10px, 1.6vmin, 14px);
  width: fit-content;
  max-width: min(92vw, var(--dock-max));
}

/* Desktopは“行”に寄せる（幅が足りない時だけ折返し） */
@media (min-width: 901px){
  .social-links{
    flex-wrap: nowrap;
  }
  .logo-top img{ width: clamp(240px, 32vw, 460px); }
}

.social-links a{
  --dock-scale: 1;
  --dock-lift: 0px;
  --icon-ink: 0;
  --icon-color: rgb(var(--brand-accent));
  --icon-glow: rgba(var(--brand-accent), .35);
  --icon-mask: none;

  width: var(--icon);
  aspect-ratio: 1/1;
  display:grid;
  place-items:center;

  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);

  transform: translateY(var(--dock-lift)) scale(var(--dock-scale));
  transform-origin: 50% 80%;
  will-change: transform;

  transition: transform .12s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.social-links a::after{
  content:"";
  position:absolute;
  width: 62%;
  height: 62%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--icon-color);
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events:none;
  z-index: 1;
}

.social-links a:hover,
.social-links a:focus-visible{
  --dock-lift: -2px;
  background: rgba(0,0,0,.56);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 10px 18px var(--icon-glow);
}

.social-links img{
  width: 62%;
  height: 62%;
  object-fit: contain;
  position: relative;
  z-index: 0;
  transition: opacity .2s ease;
}

.social-links a:hover::after,
.social-links a:focus-visible::after{
  opacity: var(--icon-ink);
}

@supports ((-webkit-mask: url("")) or (mask: url(""))){
  .social-links a:hover img,
  .social-links a:focus-visible img{
    opacity: 0;
  }
}

@media (hover: none){
  .social-links a:active{
    --dock-lift: -1px;
    background: rgba(0,0,0,.56);
    border-color: rgba(255,255,255,.32);
    box-shadow: 0 10px 18px var(--icon-glow);
  }
  .social-links a:active::after{
    opacity: var(--icon-ink);
  }
}

.social-links a[href*="instagram"]{
  --icon-ink: 1;
  --icon-color: #e1306c;
  --icon-glow: rgba(225,48,108,.4);
  --icon-mask: url("../assets/thumbs/instagram100.png?v=20251222");
}
.social-links a[href*="spotify"]{
  --icon-ink: 1;
  --icon-color: #1db954;
  --icon-glow: rgba(29,185,84,.4);
  --icon-mask: url("../assets/thumbs/spotify100.png?v=20251222");
}
.social-links a[href*="music.apple.com"]{
  --icon-ink: 1;
  --icon-color: #fa57c1;
  --icon-glow: rgba(250,87,193,.4);
  --icon-mask: url("../assets/thumbs/applemusic100.png?v=20251222");
}
.social-links a[href*="youtube.com"]{
  --icon-ink: 1;
  --icon-color: #ff0000;
  --icon-glow: rgba(255,0,0,.4);
  --icon-mask: url("../assets/thumbs/youtube100.png?v=20251222");
}
.social-links a[href*="bandcamp.com"]{
  --icon-ink: 1;
  --icon-color: #1da0c3;
  --icon-glow: rgba(29,160,195,.4);
  --icon-mask: url("../assets/thumbs/bandcamp100.png?v=20251222");
}
.social-links a[href*="soundcloud.com"]{
  --icon-ink: 1;
  --icon-color: #ff5500;
  --icon-glow: rgba(255,85,0,.4);
  --icon-mask: url("../assets/thumbs/soundcloud100.png?v=20251222");
}
.social-links a[href*="facebook.com"]{
  --icon-ink: 1;
  --icon-color: #1877f2;
  --icon-glow: rgba(24,119,242,.4);
  --icon-mask: url("../assets/thumbs/facebook100.png?v=20251222");
}
.social-links a[href*="pinterest.com"]{
  --icon-ink: 1;
  --icon-color: #e60023;
  --icon-glow: rgba(230,0,35,.42);
  --icon-mask: url("../assets/thumbs/pinterest100.png?v=20251229");
}
.social-links a[href*="soundbetter.com"]{
  --icon-ink: 1;
  --icon-color: #ff7a00;
  --icon-glow: rgba(255,122,0,.4);
  --icon-mask: url("../assets/thumbs/soundbetter100.png?v=20251222");
}
.social-links a[href*="x.com"]{
  --icon-ink: 1;
  --icon-color: #00c2ff;
  --icon-glow: rgba(0,194,255,.4);
  --icon-mask: url("../assets/thumbs/x100.png?v=20251222");
}
.social-links a[href*="discogs.com"]{
  --icon-ink: 1;
  --icon-color: #4a90e2;
  --icon-glow: rgba(74,144,226,.4);
  --icon-mask: url("../assets/thumbs/discogs100.png?v=20251222");
}
.social-links a[href*="linktr.ee"]{
  --icon-ink: 1;
  --icon-color: #43e660;
  --icon-glow: rgba(67,230,96,.4);
  --icon-mask: url("../assets/thumbs/linktree100.png?v=20251222");
}
.social-links a[data-icon="pinterest"]{
  --icon-ink: 1;
  --icon-color: #e60023;
  --icon-glow: rgba(230,0,35,.42);
  --icon-mask: url("../assets/thumbs/pinterest100.png?v=20251229");
}

.social-links a[data-icon="soundbetter"]{ display:none; }

/* ---- full-area click overlay (under buttons/icons/logos) ---- */
.cover-enter{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  pointer-events:none;
}

.footer-note{
  margin: 8px auto 0;
  padding: 0 10px;
  max-width: min(760px, 92vw);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.70);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.copyright-note{
  margin: 6px auto 0;
  padding: 0 10px;
  max-width: min(760px, 92vw);
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.55);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

.copyline{
  display:block;
  margin: 8px auto 0;
  text-align:center;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.65);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
  opacity: 0;
  filter: blur(14px);
  transform: translateY(-6px);
  transition: opacity 1.4s ease, filter 1.6s ease, transform 1.2s ease;
  pointer-events: none;
}

.ui-soft .copyline,
.boot-ui .copyline{
  opacity: 1;
  filter: none;
  transform: translateY(0);
}

/* Dock footer stagger: footer-note -> logo-bottom -> copyright */
.ui-soft .dock-container .footer-note.copyline,
.boot-ui .dock-container .footer-note.copyline{
  transition-delay: 0ms;
}

.ui-soft .dock-container .logo-bottom,
.boot-ui .dock-container .logo-bottom{
  transition-delay: 160ms;
}

.ui-soft .dock-container .copyright-note.copyline,
.boot-ui .dock-container .copyright-note.copyline{
  transition-delay: 320ms;
}

body:not(.releases-page):not(.landing-page) .logo-bottom{
  position: absolute;
  bottom: max(105px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, -15px);
  margin: 0;
  z-index: 5;
  opacity: 0.9;
  animation: rise .8s ease both;
  animation-delay: .2s;
}

body:not(.releases-page):not(.landing-page) .logo-bottom img{
  width: clamp(120px, 24vw, 220px);
  max-height: 10vh;
  object-fit: contain;
}

/* keep interactive elements above cover-enter */
.logo-top, .dock-container, .logo-bottom{ z-index:5; }

/* ---- Mobile tuning ---- */
@media (max-width: 599px){
  body.landing-page{ overflow:hidden; }

  .logo-top{ margin-top: clamp(10px, 3vh, 18px); margin-bottom: clamp(5px, 1.4vh, 12px); }
  .logo-top img{ width: clamp(220px, 72vw, 420px); }
  .logo-center img{
    width: clamp(200px, 70vw, 360px);
    transform: translateY(5px);
  }

  .artwork-strip{ display:block; }

  /* バッジ画像はモバイルでは消す（巨大化の元） */
  .sb-badge{ display:none; }

  /* CTAは縦積み + コンパクト（“デカいメニュー”化させない） */
  .actions{
    flex-direction: column;
    width: min(92vw, 320px);
    gap: 10px;
    margin-top: clamp(8px, 2vh, 12px);
    margin-bottom: clamp(6px, 1.4vh, 10px);
  }
  .btn{
    width: 100%;
    font-size: 12.5px;
    padding: 10px 12px;
    font-weight: 400;
  }

  /* アイコンは「4個だけ」＋ 4列固定 */
  .social-links{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(92vw, 320px);
    justify-items:center;
    gap: 12px;
    margin-top: clamp(6px, 1.6vh, 10px);
  }
  .social-links a{
    width: 50px;              /* 少し締める */
    border-radius: 14px;
  }
  .social-links a{ display:none; }
  .social-links a[data-icon="instagram"],
  .social-links a[data-icon="spotify"],
  .social-links a[data-icon="applemusic"],
  .social-links a[data-icon="soundbetter"]{
    display:grid;
  }

  /* ★フッター(NIPPONEER)だけモバイルで小さくする */
  .logo-bottom img{
    width: clamp(120px, 40vw, 190px);
  }
  .logo-bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .sb-callout{
    margin-top: clamp(22px, 4.6vh, 34px);
    margin-bottom: clamp(4px, 0.8vh, 8px);
  }
  .badge-social{
    margin-top: clamp(4px, 1vh, 8px);
    margin-bottom: clamp(4px, 1vh, 10px);
  }
  .footer-note{
    margin-top: clamp(8px, 1.6vh, 12px);
  }
  .copyline{
    margin-top: clamp(6px, 1.2vh, 10px);
  }
  .copyright-note{
    margin-top: clamp(4px, 0.8vh, 8px);
    margin-bottom: clamp(0px, 0.4vh, 4px);
  }
  .spacer{ flex:1; min-height: 6px; height: clamp(6px, 1.6vh, 12px); }
  .dock-container{
    gap: clamp(5px, 1.2vh, 10px);
    margin-top: clamp(10px, 2.4vh, 20px);
    margin-bottom: clamp(8px, 2vh, 16px);
  }
  .artwork-strip{
    margin-bottom: clamp(6px, 1.3vh, 10px);
    padding-bottom: clamp(4px, 1vh, 8px);
  }
  .footer-note{ font-size: 11px; }
  .copyright-note{ font-size: 10px; }
}

/* ---- Tablet tuning (layout fits without squeezing icons) ---- */
@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1024px){
  :root{ --icon: clamp(32px, 4.4vmin, 46px); }

  .logo-top{ margin-top: clamp(6px, 2vh, 18px); }
  .logo-top img{ width: clamp(170px, 24vw, 300px); }
  .spacer{ display:block; flex: 0.8; min-height: 20px; }

  .dock-container{
    width: 100%;
    gap: clamp(10px, 1.6vh, 14px);
    margin-bottom: clamp(8px, 1.6vh, 14px);
    flex: 1;
    min-height: 0;
    justify-content: flex-end;
    padding-bottom: clamp(4px, 1vh, 8px);
  }

  .sb-callout{
    width: min(96vw, 960px);
    margin-inline: auto;
  }

  .actions{
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 1.2vmin, 12px);
  }
  .btn{
    font-size: 12.5px;
    padding: 8px 12px;
  }

  .badge-social{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap: nowrap;
    width: min(96vw, 960px);
    margin-inline: auto;
    margin-top: clamp(6px, 1.4vh, 12px);
    margin-bottom: clamp(4px, 1vh, 8px);
    gap: clamp(8px, 1.4vmin, 12px);
    transform: translateY(clamp(8px, 1.6vh, 14px));
  }

  .sb-badge{
    width: clamp(120px, 14vmin, 175px);
    flex: 0 0 auto;
  }

  .social-links{
    max-width: 100%;
    width: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(6px, 1.2vmin, 10px);
  }

  .artwork-strip{
    width: 110vw;
    max-width: 110vw;
    padding: 8px 0 10px;
    margin-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .artwork-item{
    width: clamp(80px, 9vmin, 130px);
  }

  .logo-bottom{
    margin-top: 0;
    margin-bottom: clamp(6px, 1.2vh, 12px);
  }
  .logo-bottom img{ width: clamp(160px, 18vmin, 250px); }
}

@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1024px) and (orientation: portrait){
  .dock-container{
    padding-bottom: clamp(14px, 3vh, 26px);
    gap: clamp(6px, 1vh, 10px);
  }
  .sb-callout{
    margin-top: 10px;
  }
  .spacer{
    flex: 1;
    min-height: 12px;
  }
  .logo-top img{
    width: clamp(255px, 36vw, 450px);
  }
  .badge-social{
    margin-top: clamp(4px, 1vh, 8px);
    margin-bottom: clamp(2px, 0.8vh, 6px);
  }
  .sb-badge{
    width: clamp(100px, 12vmin, 150px);
  }
  .artwork-strip{
    padding: 10px 0 clamp(18px, 4vh, 28px);
    margin-top: clamp(-14px, -2vh, -8px);
    margin-bottom: clamp(10px, 2vh, 16px);
  }
  .artwork-item{
    width: clamp(92px, 11.5vmin, 150px);
  }
  .artwork-strip.is-ready{
    transform: translate3d(0, 6px, 0);
  }
  .artwork-strip.is-loading{
    transform: translate3d(-18px, 6px, 0);
  }
  .stage{
    padding-bottom: max(24px, env(safe-area-inset-bottom) + 18px);
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1024px) and (orientation: landscape){
  .spacer{
    flex: 1.6;
    min-height: 20px;
  }
  .dock-container{
    justify-content: flex-end;
    gap: clamp(6px, 1vh, 10px);
    padding-bottom: clamp(8px, 1.6vh, 14px);
    padding-top: 0;
  }
  .badge-social{
    align-items: center;
    margin-top: clamp(4px, 1vh, 8px);
    margin-bottom: clamp(2px, 0.8vh, 6px);
    transform: translateY(clamp(8px, 1.6vh, 14px));
  }
  .sb-badge{
    width: clamp(100px, 12vmin, 150px);
  }
  .actions{
    justify-content: center;
    transform: translateY(0);
  }
  .artwork-strip{
    padding: 10px 0 14px;
    margin-bottom: 6px;
    transform: translate3d(-26px, 0, 0);
  }
  .artwork-strip.is-loading{
    transform: translate3d(-18px, 0, 0);
  }
  .artwork-strip.is-ready{
    transform: translate3d(0, 0, 0);
  }
  .artwork-item{
    width: clamp(86px, 9.2vmin, 130px);
  }
  .logo-top{
    margin-top: clamp(0px, 0.6vh, 7px);
  }
  .logo-bottom{
    position: relative;
    top: 0;
  }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape){
  .badge-social{
    margin-top: clamp(4px, 1vh, 8px);
    margin-bottom: clamp(2px, 0.8vh, 6px);
    transform: translateY(clamp(8px, 1.6vh, 14px));
  }
  .sb-badge{
    width: clamp(100px, 12vmin, 150px);
  }
}

@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape){
  .spacer{
    flex: 1.6;
    min-height: 20px;
  }
  .dock-container{
    padding-bottom: clamp(8px, 1.6vh, 14px);
    padding-top: 0;
  }
  .badge-social{
    align-items: center;
    margin-top: clamp(4px, 1vh, 8px);
    margin-bottom: clamp(2px, 0.8vh, 6px);
    transform: none;
  }
  .sb-badge{
    width: clamp(100px, 12vmin, 150px);
  }
  .artwork-strip{
    padding: 10px 0 14px;
    margin-bottom: 6px;
  }
  .artwork-strip.is-loading{
    transform: translate3d(-18px, 0, 0);
  }
  .artwork-strip.is-ready{
    transform: translate3d(0, 0, 0);
  }
  .actions{
    transform: translateY(0);
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait){
  body.landing-page{
    overflow:hidden;
    height: 100dvh;
    min-height: 100dvh;
    touch-action: none;
  }
  body.landing-page .stage{
    overflow:hidden;
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* ---- Short height safety (landscape phones etc) ---- */
@media (max-height: 640px){
  body:not(.landing-page){ overflow:auto; }
  .stage{ overflow-y:auto; height:auto; min-height:100dvh; }
}

@media (max-height: 640px){
  body.landing-page{
    overflow:hidden;
    height: 100dvh;
    min-height: 100dvh;
    touch-action: none;
  }
  body.landing-page .stage{
    overflow:hidden;
    height: 100dvh;
    min-height: 100dvh;
  }
}

@media (max-width: 599px){
  html{
    height: 100dvh;
    min-height: 100dvh;
  }
  body.landing-page{
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
  body.landing-page .stage{
    min-height: 100dvh;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1024px) and (orientation: landscape){
  body:not(.landing-page){ overflow:auto; }
  .stage{ overflow-y:auto; height:auto; min-height:100dvh; }
}

@media (hover: none) and (pointer: coarse) and (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape){
  body:not(.landing-page){ overflow:auto; }
  .stage{ overflow-y:auto; height:auto; min-height:100dvh; }
}

/* JS無効時は表示を保つ */
.no-js:not(.js-on) .logo-top,
.no-js:not(.js-on) .artwork-strip,
.no-js:not(.js-on) .sb-callout,
.no-js:not(.js-on) .badge-social,
.no-js:not(.js-on) .social-links,
.no-js:not(.js-on) .logo-bottom{
  opacity:1;
  visibility: visible;
  filter:none;
  transform:none;
  pointer-events:auto;
}

.no-js:not(.js-on) .copyline{
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: none;
}

.no-js:not(.js-on) .logo-center{
  opacity:1;
  filter:none;
  transform:none;
  pointer-events:none;
}

/* ---- Optional: GrainをUIにも被せたい時（君の“荒い映画感”方向）
   下のコメントを外すと、グレインがUIの上に来る（読みやすさは少し落ちる）
*/
.stage::after{ z-index:7; }

/* ---- Releases page ---- */
.releases-page{
  --bgA: #16090c;
  --bgB: #2a0b11;
  --bgC: #0b0608;
  --mx: 50%;
  --my: 30%;
  --spotlight-opacity: .55;
  --viewer-scale: .92;
  --tiltX: 0deg;
  --tiltY: 0deg;
  background:
    linear-gradient(180deg, var(--bgA) 0%, var(--bgB) 58%, var(--bgC) 100%);
  color: #f4f0f0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.releases-page::before,
.releases-page::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.releases-page::before{
  opacity: var(--spotlight-opacity);
  background:
    radial-gradient(620px 520px at var(--mx) var(--my), rgba(255, 92, 78, .28), rgba(10, 6, 8, 0) 70%);
  mix-blend-mode: soft-light;
}

.releases-page::after{
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-position: 0 0;
  animation: grain-drift 22s linear infinite;
}

.releases-page.is-index-open{
  overflow: hidden;
}

@keyframes grain-drift{
  0%{ background-position: 0 0; }
  50%{ background-position: 120px 80px; }
  100%{ background-position: 240px 160px; }
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  z-index: 30;
}

.skip-link:focus{ left: 12px; }

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.split-text span{
  display: inline-block;
  white-space: pre;
}

.releases-header{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(18px, 6vw, 48px);
  background: rgba(10, 8, 10, .6);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}

.releases-header__center{
  display: flex;
  gap: 10px;
  align-items: center;
}

.releases-home{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

.header-pill{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.header-pill:hover{
  border-color: rgba(255,255,255,.45);
}

.releases-spotify{
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(24,10,12,.6);
}

.releases-shell{
  max-width: 1200px;
  margin: 0 auto;
  width: min(1200px, 100%);
  padding: clamp(20px, 6vw, 70px) clamp(18px, 6vw, 70px) clamp(80px, 10vh, 140px);
  position: relative;
  z-index: 1;
}

.releases-main{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
}

.releases-list{
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 8vh, 88px);
}

.releases-empty{
  font-size: 14px;
  color: rgba(255,255,255,.7);
}

.release-section{
  --p: 0;
  background: rgba(12, 10, 14, .48);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: clamp(18px, 3.4vmin, 28px);
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
  transform: translateY(calc((1 - var(--p)) * 36px));
  opacity: calc(0.35 + var(--p) * 0.65);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.release-section:focus-visible{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 4px;
}

.release-section.is-active{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 60px rgba(0,0,0,.38);
}

.section-kicker{
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.section-title{
  font-size: clamp(22px, 3.6vw, 36px);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 8px 0 6px;
}

.section-title span{
  opacity: var(--cp, 0);
  transform: translateY(calc((1 - var(--cp, 0)) * 24px));
  filter: blur(calc((1 - var(--cp, 0)) * 6px));
  transition: filter .2s ease;
}

.section-meta{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.section-intro{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  white-space: pre-wrap;
}

.section-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.section-link{
  text-decoration: none;
  color: #fff;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  transition: border-color .2s ease, transform .2s ease;
}

.section-link:hover{
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
}

.section-link[aria-disabled="true"]{
  opacity: .4;
  pointer-events: none;
}

.section-variants{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.variant-pill{
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(12,10,14,.6);
}

.variant-pill::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--variant-bg);
  background-size: cover;
  background-position: center;
  opacity: .2;
  transition: opacity .2s ease;
}

.variant-pill span{
  position: relative;
  z-index: 1;
}

.variant-pill.is-active{
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}

.variant-pill.is-active::before{
  opacity: .45;
}

.releases-viewer{
  position: sticky;
  top: calc(60px + 24px);
  align-self: start;
}

.viewer-media{
  position: relative;
  width: min(420px, 36vw);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.viewer-cover,
.viewer-canvas,
.viewer-canvas-image{
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10, 8, 10, .6);
}

.viewer-cover{
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) scale(var(--viewer-scale));
  transition: transform .35s ease, opacity .35s ease;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}

.viewer-canvas{
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.viewer-canvas-image{
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.releases-page.is-canvas-active .viewer-canvas{
  opacity: 1;
  pointer-events: auto;
}

.releases-page.is-canvas-active .viewer-cover{
  opacity: 0;
  pointer-events: none;
}

.releases-page.is-canvas-image .viewer-canvas-image{
  opacity: 1;
  pointer-events: auto;
}

.releases-page.is-canvas-image .viewer-cover{
  opacity: 0;
  pointer-events: none;
}

.viewer-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}

.viewer-image.is-active{ opacity: 1; }

.viewer-media__controls{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.viewer-toggle{
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(8,8,10,.65);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.viewer-toggle.is-secondary{
  background: rgba(255,255,255,.08);
}

.viewer-meta{
  margin-top: 20px;
  text-align: left;
}

.viewer-catalog{
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.viewer-title{
  margin: 10px 0 6px;
  font-size: clamp(20px, 3.2vw, 32px);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.viewer-sub,
.viewer-genre{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.floating-pill{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(12, 10, 14, .72);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  z-index: 30;
}

.pill-catalog{
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}

.pill-actions{
  display: flex;
  gap: 8px;
  align-items: center;
}

.pill-link,
.pill-button{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

.index-overlay{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .2s ease;
}

.index-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.index-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(6,6,8,.6);
  backdrop-filter: blur(6px);
}

.index-panel{
  position: relative;
  max-width: min(720px, 92vw);
  margin: 8vh auto 0;
  background: rgba(12, 10, 14, .94);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 82vh;
}

.index-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.index-sub{
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

.index-close{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.index-input{
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,8,10,.6);
  color: #fff;
  font-size: 13px;
}

.index-list{
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.index-item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,12,16,.55);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  display: grid;
  gap: 4px;
}

.index-item__cat{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.index-item__title{
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.index-item__meta{
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

.releases-footer{
  text-align: center;
  padding: 24px 0 40px;
  position: relative;
  z-index: 1;
}

.releases-back{
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (max-width: 900px){
  .release-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-120%);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--release-nav-height) + 1rem) 1.5rem 2rem;
    gap: 1rem;
    background: rgba(3,1,5,.95);
    transition: transform .45s ease;
  }
  .release-nav__link{
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: .6rem;
  }
  .releases-page.is-menu-open .release-nav{
    transform: translateY(0);
  }
  .release-menu-toggle{
    display: inline-flex;
  }
}

@media (max-width: 600px){
  .release-hero{
    padding: 1.8rem;
  }
  .release-controls{
    flex-direction: column;
    align-items: stretch;
  }
  .release-controls__actions{
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
  .release-card,
  .release-header,
  .release-nav,
  .release-hero,
  .release-controls__toggle,
  .release-nav-backdrop{
    transition: none;
  }
}

/* =========================================
   Dream Machine Style FX (浮遊感 + スクロール連動)
   ========================================= */

/* 1. ゆらゆら浮遊するアニメーション (常時稼働) */
@keyframes dreamFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-6px) rotate(0.5deg); }
    66% { transform: translateY(4px) rotate(-0.5deg); }
}

/* ジャケット画像に浮遊感を適用 */
.release-section__cover img,
.viewer-image {
    animation: dreamFloat 8s ease-in-out infinite;
    will-change: transform;
}

/* 2. スクロール連動のベーススタイル */
.release-section {
    /* 初期状態: 少し小さく、薄く */
    transform: scale(0.92) translateY(20px);
    opacity: 0.5;
    /* ヌルっと動くための設定 */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s ease;
    will-change: transform, opacity;
}

/* JSで「画面中央に来た」と判定された時のスタイル */
.release-section.is-dream-focus {
    transform: scale(1.02) translateY(0); /* ふわっと拡大して定位置へ */
    opacity: 1;                           /* くっきり表示 */
    z-index: 10;                          /* 前に出す */
}