/* =========================================================================== GlitchFX — ページ全体にかかる演出レイヤー（ARG汎用） 固有名詞・素材を一切含まない、完全オリジナルの汎用エフェクト集。 overlay は 直下に置くため、body を transform/filter しても巻き込まない。 =========================================================================== */ .gfx-root{ position: fixed; inset: 0; pointer-events: none; /* 演出はクリックを奪わない */ overflow: hidden; /* z-index は JS から設定 */ } .gfx-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; /* 砂嵐をドット感のまま拡大 */ image-rendering: crisp-edges; } .gfx-canvas--noise{ mix-blend-mode: normal; } .gfx-canvas--screen{ mix-blend-mode: screen; } /* 光・色帯は加算的に乗る */ /* 走査線（常時オン/オフのモード切替用） */ .gfx-scanlines{ position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; background: repeating-linear-gradient( 0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,.30) 2px, rgba(0,0,0,.30) 3px ); } .gfx-scanlines.on{ opacity: 1; } /* CRT 電源オフ（線→点に収束） */ .gfx-crtoff{ position: absolute; inset: 0; display: none; background: rgba(0,0,0,0); } .gfx-crtoff.on{ display: block; } .gfx-crtoff-bar{ position: absolute; left: 0; right: 0; top: 50%; height: 100%; background: #fff; opacity: 0; transform: translateY(-50%) scaleY(1); transform-origin: center center; box-shadow: 0 0 24px 6px rgba(255,255,255,.6); } /* ---- body（またはターゲット）に付けるクラス ---- */ @keyframes gfx-shake{ 0% { transform: translate(0,0); } 20% { transform: translate(-4px, 3px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, -4px); } 80% { transform: translate(4px, 2px); } 100% { transform: translate(0,0); } } .gfx-shake{ animation: gfx-shake .18s steps(2, end) infinite; } .gfx-shake--hard{ animation-duration: .09s; } @keyframes gfx-distort{ 0% { filter: none; } 20% { filter: contrast(1.4) hue-rotate(8deg); } 35% { filter: invert(1); } 42% { filter: none; } 60% { filter: saturate(3) contrast(1.5); } 78% { filter: hue-rotate(-12deg) brightness(1.2); } 100% { filter: none; } } .gfx-distort{ animation: gfx-distort .3s steps(4, end) infinite; } .gfx-invert{ filter: invert(1) hue-rotate(180deg); } /* 照明明滅（壊れかけの蛍光灯のように明暗がパチパチする） */ @keyframes gfx-flicker{ 0%,100%{ filter:brightness(1); } 8%{ filter:brightness(.15); } 10%{ filter:brightness(1); } 28%{ filter:brightness(.5); } 29%{ filter:brightness(1); } 52%{ filter:brightness(.08); } 56%{ filter:brightness(.9); } 68%{ filter:brightness(1.35); } 70%{ filter:brightness(.4); } 73%{ filter:brightness(1); } 88%{ filter:brightness(.25); } 90%{ filter:brightness(1); } } .gfx-flicker{ animation: gfx-flicker .85s steps(1,end) infinite; } /* 息づき（部屋がゆっくり呼吸しているような拡縮） */ @keyframes gfx-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.028); } } .gfx-breathe{ animation: gfx-breathe 3.6s ease-in-out infinite; transform-origin:center center; } /* じわ寄りズーム（ゆっくり迫る不安） */ @keyframes gfx-dread{ from{ transform: scale(1); } to{ transform: scale(1.16); } } .gfx-dread{ animation: gfx-dread linear forwards; transform-origin:center center; } /* ---- CRTモード（古いブラウン管の質感を画面全体に） ---- */ .gfx-crt{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease; overflow:hidden; } .gfx-crt.on{ opacity:1; } /* 走査線 ＋ シャドウマスク（RGBの縦縞） */ .gfx-crt::before{ content:''; position:absolute; inset:-2px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 3px), repeating-linear-gradient(90deg, rgba(255,0,0,.05) 0 2px, rgba(0,255,0,.05) 2px 4px, rgba(0,0,255,.05) 4px 6px); } /* 四隅ビネット ＋ 画面湾曲の暗み ＋ ガラスの光沢 */ .gfx-crt::after{ content:''; position:absolute; inset:0; box-shadow: inset 0 0 140px 36px rgba(0,0,0,.62); background: radial-gradient(130% 130% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.55) 100%), radial-gradient(60% 45% at 30% 18%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%); border-radius: 18px / 12px; } /* ゆっくり流れる輝線（リフレッシュのビーム） */ .gfx-crt-beam{ position:absolute; left:0; right:0; height:18%; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 100%); animation: gfx-crtbeam 7s linear infinite; } @keyframes gfx-crtbeam{ 0%{ top:-20%; } 100%{ top:100%; } } @media (prefers-reduced-motion: reduce){ .gfx-dread, .gfx-crt-beam{ animation: none; } } /* ---- 要素単位グリッチ（ページの文字・画像など個々をグリッチさせる。これがメイン） ---- transform/clip-path/opacity だけを使うのでレイアウトは崩れない（リフローしない）。 */ @keyframes gfx-elg{ 0% { transform: translate(0,0) skewX(0); clip-path: inset(0 0 0 0); } 12% { transform: translate(-10px,1px) skewX(-9deg); clip-path: inset(16% 0 56% 0); } 24% { transform: translate(11px,-2px) skewX(6deg); clip-path: inset(62% 0 10% 0); } 36% { transform: translate(-7px,2px) skewX(0); clip-path: inset(4% 0 80% 0); } 48% { transform: translate(8px,-1px) skewX(7deg); clip-path: inset(44% 0 30% 0); } 60% { transform: translate(-5px,1px) skewX(-5deg); clip-path: inset(78% 0 6% 0); } 72% { transform: translate(6px,2px) skewX(4deg); clip-path: inset(28% 0 50% 0); } 86% { transform: translate(-3px,0) skewX(0); clip-path: inset(60% 0 20% 0); } 100% { transform: translate(0,0) skewX(0); clip-path: inset(0 0 0 0); } } .gfx-el-glitch{ animation: gfx-elg .45s steps(7,end) 1 both; will-change: transform, clip-path; } /* テキストは RGB 分離（赤シアンのにじみ）を重ねる */ .gfx-el-text.gfx-el-glitch{ text-shadow: 2px 0 #ff003c, -2px 0 #00eaff; } /* 画像は色相/コントラストのフラッシュで“信号が乱れた”感じに */ .gfx-el-img.gfx-el-glitch{ animation: gfx-elg .4s steps(2,end) 1 both, gfx-elimg .4s steps(3,end) 1 both; } @keyframes gfx-elimg{ 0%{ filter:none; } 25%{ filter:hue-rotate(40deg) contrast(1.4) saturate(2); } 50%{ filter:invert(.12) hue-rotate(-30deg); } 75%{ filter:contrast(1.7) saturate(3); } 100%{ filter:none; } } /* マイクログリッチ＝文字単位の“部分”グリッチ。テキストの数文字だけに入る。 ブロックごとの点滅/揺れ/スライスはやらない（安っぽいので廃止）。 */ /* 部分テキスト（数文字だけ）に当てる短命の見た目。動かさない＝色・文字化けのみ */ .gfx-p-rgb{ text-shadow: 1px 0 rgba(255,0,60,.9), -1px 0 rgba(0,234,255,.9); } /* 数文字だけ色収差 */ .gfx-p-ghost{ text-shadow: 3px 0 rgba(255,255,255,.5); } /* 数文字だけ残像 */ /* 画像は動かさず色だけ乱す（スライスなし） */ .gfx-im-chroma{ filter: drop-shadow(2px 0 rgba(255,0,60,.55)) drop-shadow(-2px 0 rgba(0,234,255,.55)); } /* 色収差 */ @keyframes gfx-im-hue{ 0%,100%{filter:none} 45%{filter:hue-rotate(35deg) contrast(1.2)} 75%{filter:saturate(1.8)} } .gfx-im-hue{ animation: gfx-im-hue .3s ease 1 both; } @media (prefers-reduced-motion: reduce){ .gfx-el-glitch, .gfx-im-hue{ animation-duration:.12s; } } /* ---- 全画面テキスト乱射（バババッ。全文字 同じ見え方で、わざと見づらく＋グリッチ） ---- */ .gfx-textroot{ position:absolute; inset:0; overflow:hidden; } .gfx-word{ position:absolute; white-space:nowrap; font-weight:800; font-family:"Arial Black","Hiragino Kaku Gothic ProN",sans-serif; color:rgba(226,230,234,.5); /* 薄め */ letter-spacing:.02em; transform:translate(-50%,-50%) rotate(var(--rot,0deg)); filter:blur(2.2px); /* ぼかして見づらく */ opacity:0; animation:gfx-wordpop .6s linear forwards; /* 表示時間=JSがanimationDurationで指定 */ pointer-events:none; /* 走査線で文字を深く切って、さらに見づらく */ -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.06) 2px 4px); mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.06) 2px 4px); } /* 文字自体のグリッチ：赤・シアンのゴーストがスライスしながらジャンプ */ .gfx-word::before, .gfx-word::after{ content:attr(data-text); position:absolute; left:0; top:0; white-space:nowrap; mix-blend-mode:screen; } .gfx-word::before{ color:#ff2d55; animation:gfx-gl-r .42s steps(3,end) infinite; } .gfx-word::after { color:#19e6ff; animation:gfx-gl-c .37s steps(3,end) infinite; } @keyframes gfx-wordpop{ 0% { opacity:0; } 18% { opacity:var(--o,.5); } 70% { opacity:var(--o,.5); } 100% { opacity:0; } } @keyframes gfx-gl-r{ 0%,100%{ clip-path:inset(0 0 82% 0); transform:translate(-3px,0); } 20% { clip-path:inset(38% 0 40% 0); transform:translate(3px,0); } 40% { clip-path:inset(68% 0 12% 0); transform:translate(-4px,0); } 60% { clip-path:inset(8% 0 70% 0); transform:translate(2px,0); } 80% { clip-path:inset(52% 0 24% 0); transform:translate(-2px,0); } } @keyframes gfx-gl-c{ 0%,100%{ clip-path:inset(60% 0 18% 0); transform:translate(3px,0); } 25% { clip-path:inset(20% 0 60% 0); transform:translate(-3px,0); } 50% { clip-path:inset(80% 0 4% 0); transform:translate(4px,0); } 75% { clip-path:inset(34% 0 44% 0); transform:translate(-2px,0); } } @media (prefers-reduced-motion: reduce){ .gfx-shake, .gfx-distort, .gfx-flicker, .gfx-breathe{ animation: none; } .gfx-word{ animation-duration:.25s; } .gfx-word::before, .gfx-word::after{ animation: none; } }