/* bg.css — mounts the living navy-glass WebGL background behind the cero site. Navy surfaces go transparent so the fixed canvas shows through; light "paper" surfaces (forms / legal / long-form) stay opaque for readability. Cards/panels keep their own navy fills and read as glass panels floating over the living depth. Palette unchanged: navy base + white light in the canvas, lime stays a DOM-only CTA accent. */ #cero-bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none; background:var(--navy); /* paint before the GL first frame arrives */ } /* reveal the canvas through the navy surfaces */ body.has-cero-bg .hero{ background:transparent; isolation:auto; } body.has-cero-bg .hero__bg, body.has-cero-bg .hero__glow, body.has-cero-bg .dot-field{ display:none; } body.has-cero-bg .section--navy, body.has-cero-bg .section--panel, body.has-cero-bg .cta-band{ background:transparent; } body.has-cero-bg .cta-band__glow{ display:none; } /* footer sits over the settled deep-navy bottom of the canvas */ body.has-cero-bg .site-footer{ background:transparent; } /* paper sections also show the canvas: the shader paints them white and inverts its palette there (navy ink in white glass), so the cursor effect keeps working on light sections. Idle is exactly #FFFFFF, so this is seamless against the opaque cards that sit on top. */ body.has-cero-bg .section--paper{ background:transparent; } /* the fallback body navy stays as the base if WebGL is unavailable */ body.has-cero-bg{ background:var(--navy); } /* ------------------------------------------------------------- Image fluid smear — the visuals the cursor drags (data-smear in the markup). The WebGL UI layer takes the visual over so the Navier-Stokes dye can smear it (compositor 20-tap), which means the DOM has to hand over the slot: the art itself is hidden and the card's fill goes transparent (the plane carries both — the fill is baked into its texture). .is-smeared is added by cero-bg.js ONLY once that element's plane is actually up, so a raster or WebGL failure — and every phone/tablet, where the smear is gated off — keeps the plain SVG. The border/radius stay in the DOM and draw over the plane, which rounds its own corners to match. ------------------------------------------------------------- */ body.has-cero-bg .is-smeared{ background:transparent; } body.has-cero-bg .is-smeared > svg, body.has-cero-bg .is-smeared > img{ visibility:hidden; } /* ★synapse挿入版のみ（2026-07-21 ボス要望）: スメア面が引き継いだカードの DOM 枠線を消す。 canonical(relief)は枠線をDOMに残して面の上に描く設計だが、スメア中に中身だけ動いて枠が固定枠として 浮いて見える。WebGL面は塗り＋角丸を自前で持ち、ラスタ済みテクスチャに枠は含まれないので枠は不要。 border-color/box-shadow を透明化（border-box寸法は維持＝面と1:1のまま・再ラスタ不要）。 */ body.has-cero-bg .is-smeared{ border-color:transparent; box-shadow:none; } /* ------------------------------------------------------------- Legibility over the revealed web — "text floats in a calm clearing" ① a soft deep-navy pool sits behind key copy (invisible over the plain-navy idle; only reads once the network lights up under the cursor → text keeps its contrast). ② a faint navy halo (text-shadow) on white copy as the fine safety net. All within brand (navy + white); no effect at idle. ------------------------------------------------------------- */ body.has-cero-bg:not(.home) .hero__inner{ background:radial-gradient(44% 40% at 50% 45%, rgba(4,9,28,.56) 0%, rgba(4,9,28,.22) 36%, rgba(4,9,28,0) 62%); } body.has-cero-bg:not(.home) .cta-band .container{ background:radial-gradient(54% 96% at 50% 50%, rgba(4,9,28,.5) 0%, rgba(4,9,28,.2) 44%, rgba(4,9,28,0) 72%); } body.has-cero-bg:not(.home) .hero .display, body.has-cero-bg:not(.home) .hero__sub, body.has-cero-bg:not(.home) .section--navy .h-sec, body.has-cero-bg:not(.home) .section--navy .eyebrow, body.has-cero-bg:not(.home) .section--navy .lede, body.has-cero-bg:not(.home) .cta-band .h-sec, body.has-cero-bg:not(.home) .section--navy .news-row__title, body.has-cero-bg:not(.home) .page-hero__title, body.has-cero-bg:not(.home) .page-hero__jp, body.has-cero-bg:not(.home) .app-hero .display, body.has-cero-bg:not(.home) .app-hero .h-sec, body.has-cero-bg:not(.home) .app-hero .lede, body.has-cero-bg:not(.home) .section--navy .info-table th, body.has-cero-bg:not(.home) .section--navy .info-table td{ text-shadow:0 1px 2px rgba(4,9,28,.45), 0 3px 30px rgba(4,9,28,.55); } /* long-form reading surfaces (legal / news article) get a calm frosted-navy panel over the living bg so dense body text is always readable, whatever the cursor reveals behind it. */ body.has-cero-bg .legal, body.has-cero-bg .article{ background:rgba(8,21,63,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:var(--radius-lg); padding:clamp(1.5rem,3.5vw,3rem); } /* company info table = a dense block → same calm frosted panel (side padding keeps rows off the edge) */ body.has-cero-bg .info-table{ background:rgba(8,21,63,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:var(--radius-lg); padding:.2rem clamp(1.2rem,3vw,2.2rem); } /* mirror of ② for the inverted (white) sections: a white halo behind navy copy. Invisible while the paper is plain white; only earns its keep once navy ink surfaces under the cursor. */ body.has-cero-bg:not(.home) .section--paper .h-sec, body.has-cero-bg:not(.home) .section--paper .eyebrow, body.has-cero-bg:not(.home) .section--paper .lede, body.has-cero-bg:not(.home) .section--paper .h-3, body.has-cero-bg:not(.home) .section--paper .muted{ text-shadow:0 1px 2px rgba(255,255,255,.6), 0 3px 26px rgba(255,255,255,.75); } @media (prefers-reduced-motion:reduce){ /* the canvas renders ONE static frame, so its paper bands can't track scroll — keep the light sections opaque here instead (there is no cursor effect in this mode anyway). */ body.has-cero-bg .section--paper{ background:var(--paper); } } /* ============================================================= ★ HOME — the legibility shield. Home only for now. Everything below is DRIVEN by --shield (cero-bg.js). Nothing on this page paints protection unless the cursor's effect is actually on the text — the rules above are scoped :not(.home) for exactly that reason. ============================================================= */ /* the wide pools are off here — a 40%-of-the-hero pool is exactly the "too wide" the boss means, and measured, it does not save 20px copy anyway. Replaced by the two things below. */ body.has-cero-bg.home .hero__inner, body.has-cero-bg.home .cta-band .container{ background:none; } /* ── the shield: the GLYPH itself, nothing else ───────────────────────────────── Boss 2026-07-17: 「厳密に文字だけにかかるように」. Not the element's box. Not the line box. The letterform. • -webkit-text-stroke + `paint-order: stroke fill` gives every glyph a solid navy collar that is drawn UNDER its own fill — so the letter keeps its exact weight and shape, and the collar is the letter's own outline. It cannot land on empty space: it has no box to spill into. Zero blur means zero dilution — this is what a filament actually breaks against. • The text-shadow stack behind it is only the soft falloff at the collar's edge. • Both are gated on --shield, which cero-bg.js sets per element each frame from the cursor's DISC only — it leaves the moment the head of the effect has passed, even while the trail is still lying over the text (boss: 「本丸だけに適用」). Exactly 0 at idle. rgba() alpha takes a var, so it fades in and out with no class switching and nothing to pop. Nothing here positions or wraps anything — an earlier version used a positioned ::after and its `position:relative` silently broke .scroll-cue, which is absolutely positioned. This has no box. The list lives in cero-bg.js (SHIELD_SEL) and tags .shielded. One source of truth. Brand-safe: navy on the dark sections, white on the inverted light one. No new colour. */ body.has-cero-bg.home .shielded{ --ink:4,9,28; } body.has-cero-bg.home .section--paper .shielded{ --ink:255,255,255; } /* ★ Strength lives here. Halved twice on 2026-07-17 (boss: 8px → 4px → 2px): the collar's reach is what reads as strength, and the falloff radii come down with it. The alphas stay — what the collar does cover is still solid navy, there is just a quarter as much of it as when this started. */ body.has-cero-bg.home .shielded{ --shield-w:2px; } body.has-cero-bg.home .shielded.h-sec{ --shield-w:1.25px; } @supports (paint-order: stroke){ /* without paint-order the stroke would paint OVER the fill and turn the copy into a blob */ body.has-cero-bg.home .shielded{ paint-order:stroke fill; -webkit-text-stroke:var(--shield-w) rgba(var(--ink),var(--shield,0)); } } body.has-cero-bg.home .shielded{ text-shadow: 0 0 0 rgba(var(--ink),var(--shield,0)), 0 0 .5px rgba(var(--ink),calc(.95 * var(--shield,0))), 0 0 1px rgba(var(--ink),calc(.9 * var(--shield,0))), 0 0 2px rgba(var(--ink),calc(.7 * var(--shield,0))), 0 0 3.5px rgba(var(--ink),calc(.45 * var(--shield,0))); } /* The hero title is split per WORD, not per character, and words are a space apart — its collar cannot reach a neighbour, so it takes the full width like body copy. */ /* ============================================================= ★ synapse 挿入版（2026-07-21 試作） 当初は「synapseは白セクションを塗らない」ので不透明白に戻していたが、 2026-07-21 に synapse エンジンへ paper反転合成(paperQuad)を移植し、キャンバス自身が 白セクションを #FFFFFF で塗り、カーソル下だけネイビーインクを刷るようになった（relief と等価）。 → 上の canonical ルール（.section--paper{ background:transparent }）をそのまま活かす＝ここでの上書きは撤去。 reduced-motion 時のみ上の @media が白不透明に戻す（ループ無しでバンドが固まるため。relief と同一）。 これは試作コピー限定。正規 site/ の bg.css は無改変。 ============================================================= */