/* ==========================================================================
   Procevo — motion/hero-field.css

   ヒーロー背景の WebGL「点の面」用スタイル。main.css は触らない。
   読み込みは functions.php（is_front_page のときだけ、procevo-style のあと）。

   既定は opacity:0（未初期化＝WebGL不可のときはこのまま何も見えず、
   既存の .hero__bg::after の方眼がそのまま見える）。JS 側で初期化に
   成功すると .hero に has-field が付き、canvas がフェードインしつつ
   方眼は弱める。
   ========================================================================== */

.hero__field {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s ease;

    /* 左端〜中央は透明。既存の .hero__bg::after の楕円マスクと同じ考え方（右寄りだけ見せる） */
    -webkit-mask-image: radial-gradient(ellipse 62% 90% at 80% 58%, #000 22%, transparent 74%);
    mask-image: radial-gradient(ellipse 62% 90% at 80% 58%, #000 22%, transparent 74%);
}

.hero.has-field .hero__field {
    opacity: 1;
}

/* 点の面が動き出したら、既存の方眼は弱めて重なりを避ける */
.hero.has-field .hero__bg::after {
    opacity: 0;
    transition: opacity .9s ease;
}

@media (max-width: 767px) {
    .hero__field {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        height: 55%;

        /* 縦長キャンバス用に中心位置を調整（JS側の uXOffset とだいたい揃える） */
        -webkit-mask-image: radial-gradient(ellipse 82% 78% at 78% 45%, #000 14%, transparent 80%);
        mask-image: radial-gradient(ellipse 82% 78% at 78% 45%, #000 14%, transparent 80%);
    }

    .hero.has-field .hero__field {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__field,
    .hero.has-field .hero__bg::after {
        transition: none;
    }
}