/* ============================================================
   BELLA TECH — enhance.css
   ============================================================
   Phase 1: hero-3d の配置 / WebGL fallback / reduced-motion 統合
   Phase 2/3 予約（マグネティックボタン、View Transitions 等）
   ============================================================ */

/* --- hero 3D canvas --- */
#hero-3d{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1; /* #hero-particles(0) の上、.hero-content(10) の下 */
  display:block;
  will-change:opacity,transform;
  opacity:1;
  transition:opacity .6s ease;
}

/* --- fallback: WebGL 不可 / fps demote / 例外時 --- */
#hero-3d.is-fallback{
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(203,211,222,0.32) 0%,
      rgba(138,152,168,0.12) 30%,
      transparent 62%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(230,233,239,0.10),
      rgba(203,211,222,0.20),
      rgba(43,50,59,0.14),
      rgba(230,233,239,0.10));
  filter:blur(28px);
  animation:bella-iridescent 14s ease-in-out infinite alternate;
  opacity:.85;
}
@keyframes bella-iridescent{
  0%{transform:scale(1)    rotate(0deg)  translate(0,0);   opacity:.55}
  50%{transform:scale(1.06) rotate(8deg)  translate(-2%,1%); opacity:.92}
  100%{transform:scale(.98) rotate(-4deg) translate(1%,-1%); opacity:.7}
}

/* --- accessibility: 動きを抑える設定時は全レイヤー停止 --- */
@media (prefers-reduced-motion:reduce){
  #hero-3d,
  #hero-particles,
  #bg-particles{display:none !important}
  #hero-3d.is-fallback{animation:none}
}

/* --- Lenis 用リセット（導入時に body を固定しない） --- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* --- hero: wordmark のみに絞る（旧ラベル・tagline を非表示） --- */
#heroLabel,#heroDesc{display:none}