/* ════════════════════════════════════════════════════
   ÉCHO D'ARIA  ·  C418 Minecraft Ambient
   ════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;
  font-family:'Georgia','Times New Roman',serif;
}

/* ── Hero wrapper ──────────────────────────────────── 
   このdivがヒーロー演出のスクロール上の基準になります。
   高さは画面の高さ(100vh)固定で、これより下はページ本来の
   コンテンツが通常通りスクロールして現れます。 */
#echo-hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#0a2a52 url('/topmovie/back.png') center center / cover no-repeat;
  cursor:none;
}

#echo-hero canvas{position:absolute;inset:0;width:100%;height:100%}

#bg-video{
  position:absolute;
  top:50%;left:50%;
  width:102%;height:102%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  z-index:0;
}

/* 白×ブルーの爽やかなグラデーションフィルター */
#bg-overlay{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    linear-gradient(160deg,
      rgba(255,255,255,.58) 0%,
      rgba(225,240,255,.36) 30%,
      rgba(150,200,250,.28) 60%,
      rgba(120,175,235,.38) 100%);
}

#cv-bg {z-index:1}
#cv-mid{z-index:2}

/* ── Center copy (vertical text) ──────────────────── */
#copy-text{
  position:absolute;
  top:30%;left:50%;
  transform:translate(-50%,0);
  z-index:4;
  display:flex;
  flex-direction:row-reverse;
  gap:clamp(13px,2.3vw,28px);
  pointer-events:none;
  user-select:none;
}
#copy-text span{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:'Shippori Mincho','Georgia',serif;
  font-weight:500;
  font-size:clamp(11px,2.5vw,20px);
  letter-spacing:.38em;
  color:#ffffff;
  text-shadow:
    0 0 6px rgba(255,255,255,.85),
    0 0 16px rgba(255,255,255,.65),
    0 0 34px rgba(180,215,255,.55),
    0 0 60px rgba(140,195,255,.35);
}

#cv-fg {z-index:5}

/* ── Mute toggle ───────────────────────────────────── */
#mute-toggle{
  position:absolute;top:18px;left:20px;z-index:50;
  display:flex;align-items:center;gap:7px;
  background:transparent;border:none;
  color:#1e3a6e;
  font-family:'Georgia','Times New Roman',serif;
  font-size:11px;letter-spacing:.16em;
  cursor:none;
  padding:4px 2px;
  opacity:.62;
  transition:opacity .3s;
}
#mute-toggle:hover{opacity:1}
#mute-toggle svg{flex:none;display:block}
.mute-label{text-transform:uppercase}

/* ── Custom cursor ─────────────────────────────────── */
#cursor{
  position:absolute;left:0;top:0;width:20px;height:20px;
  border:1px solid rgba(240,232,200,.55);border-radius:50%;
  transform:translate(var(--cx,-999px),var(--cy,-999px)) translate(-50%,-50%);
  will-change:transform;
  pointer-events:none;z-index:100;
  transition:border-color .2s;
}
#cursor::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:3px;height:3px;
  background:rgba(240,232,200,.80);border-radius:50%;
}
#cursor.pressing{transform:translate(var(--cx,-999px),var(--cy,-999px)) translate(-50%,-50%) scale(.62);border-color:rgba(240,232,200,.9)}
#cursor.ready   {border-color:rgba(180,230,200,.80)}

/* ── Note label ────────────────────────────────────── */
#nlabel{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:rgba(240,232,200,0);font-size:10px;
  letter-spacing:.40em;text-transform:uppercase;
  z-index:20;pointer-events:none;
  transition:color .12s,opacity .5s;
}
#nlabel.show{color:rgba(240,232,200,.50)}

/* ── Mobile adjustments ────────────────────────────── */
@media (max-width:768px){
  #echo-hero{
    height:60vh;
    min-height:60svh; /* 対応ブラウザではアドレスバー変動の影響を受けにくいsvhを優先 */
  }
  #copy-text{
    gap:14px;
  }
  #copy-text span{
    font-size:22px;
  }
  #mute-toggle{
    color:#1e3a6e;
    opacity:.85;
    font-size:20px;
    text-shadow:none;
  }
  #mute-toggle svg{
    width:24px;height:24px;
  }
}