@charset "utf-8";
/* =========================================================================
J診断 — 炎と、山本さんの顔6段階（スレッドA）
effects.css : .j-face 系 / .j-flame 系
style.css の後に読み込むこと。
■ .j-face の作り
1枚しかない写真（img/yamamoto-face.jpg・穏やかな微笑み）に
CSSだけを当てて6段階の表情をつくる。仕掛けは3層。
.j-face … 器。外側の光（box-shadow）と鼓動を担当
.j-face::before … 写真そのもの。background-blend-mode で色を殺し／乗せ、
filter で明暗を決める。円にクリップされる
.j-face::after … 演出層（雨・ひび・炎・光輪）。円の外へはみ出せる
各段階は下の変数を差し替えるだけで成立するようにしてある。
--j-face-filter … ::before 全体の明暗（色を壊す指定はここに書かない）
--j-face-tint … 最前面の光。--j-face-tint-blend とセット
--j-face-mono … 彩度を殺す層。color ブレンドで単色寄せする
--j-face-vignette … 外周を黒く落として背景の緑を消す
■ 推奨マークアップ
写真は CSS 側で読むので中身は空でよい。
![]()
でも色調だけは効くが、演出層は出ない。
■ CONTRACT.md で固定されたクラス名は変更しない。
========================================================================= */
:root{
/* feTurbulence を data URI の SVG として持ち、マスクに使う。
外部ファイル参照ではないのでブラウザ差が出にくい。 */
/* 炎の舌 — 縦に伸びた粗いノイズ */
--j-noise-flame:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='600'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.045'%20numOctaves='4'%20seed='11'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='2.6'%20intercept='-0.85'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='400'%20height='600'%20filter='url(%23f)'/%3E%3C/svg%3E");
/* 手前の小さい炎 — もう少し細かく、種を変える */
--j-noise-flame2:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='480'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.075'%20numOctaves='3'%20seed='29'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='3'%20intercept='-1.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='320'%20height='480'%20filter='url(%23f)'/%3E%3C/svg%3E");
/* 悲しみ其の二のひび割れ */
--j-crack:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='%23cfdcee'%20stroke-width='.55'%20stroke-linecap='round'%20opacity='.55'%3E%3Cpath%20d='M63,2L59,24L67,37L60,53L68,71L62,99'/%3E%3Cpath%20d='M59,24L45,29M67,37L80,32M60,53L47,60M68,71L82,68M62,99L53,100'/%3E%3Cpath%20d='M28,8L33,23L26,34M33,23L20,19'/%3E%3Cpath%20d='M80,32L88,44'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23070a10'%20stroke-width='1.4'%20stroke-linecap='round'%20opacity='.4'%3E%3Cpath%20d='M63,3L59,25L67,38L60,54L68,72L62,99'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================================
1. .j-face — 基底
========================================================================= */
.j-face{
/* 差し替え用の変数。段階ごとに上書きする */
--j-face-size: 184px;
--j-face-zoom: 118%; /* 写真の寄り */
--j-face-y: 56%; /* 顔が円の中心に来る位置 */
--j-face-rotate: 0deg;
--j-face-filter: contrast(1.04) brightness(.97);
--j-face-tint: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
--j-face-tint-blend: normal;
--j-face-mono: linear-gradient(rgba(138,127,128,.5),rgba(138,127,128,.5));
--j-face-mono-blend: color; /* 背景の緑を殺す既定処理 */
--j-face-vignette:
radial-gradient(circle at 50% 44%,
rgba(8,5,6,0) 30%,
rgba(8,5,6,.34) 54%,
rgba(8,5,6,.86) 78%,
rgba(8,5,6,1) 100%);
--j-face-ring: 0 0 0 1px rgba(255,255,255,.06);
--j-face-glow: 0 26px 54px -26px rgba(0,0,0,.95);
position:relative;
display:inline-block;
vertical-align:middle;
width:var(--j-face-size);
height:var(--j-face-size);
flex:0 0 auto;
border-radius:50%;
background:transparent;
box-shadow:var(--j-face-ring), var(--j-face-glow);
}
/* 写真の層 */
.j-face::before{
content:"";
position:absolute;
inset:0;
z-index:1;
border-radius:50%;
background-image:
var(--j-face-vignette),
var(--j-face-tint),
var(--j-face-mono),
url("img/yamamoto-face.jpg");
background-blend-mode:
normal,
var(--j-face-tint-blend),
var(--j-face-mono-blend),
normal;
background-size:cover, cover, cover, var(--j-face-zoom);
background-position:50% 50%, 50% 50%, 50% 50%, 50% var(--j-face-y);
background-repeat:no-repeat;
filter:var(--j-face-filter);
transform:rotate(var(--j-face-rotate)) scale(1.02);
transform-origin:50% 50%;
}
/* 演出の層。既定では何も描かない */
.j-face::after{
content:"";
position:absolute;
inset:0;
z-index:2;
border-radius:50%;
pointer-events:none;
}
/* ![]()
で使われた場合の保険。色調だけは効かせる */
img.j-face{
object-fit:cover;
object-position:50% 42%;
background:var(--j-black);
filter:var(--j-face-filter);
}
/* .j-face の中に ![]()
を置かれても二重に見えないようにする */
.j-face > img{ display:none; }
/* 画面ごとの大きさ */
.j-page--result .j-face{ --j-face-size:216px; }
@media (min-width:600px){
.j-page--result .j-face{ --j-face-size:264px; }
}
@media (max-width:380px){
.j-face{ --j-face-size:160px; }
.j-page--result .j-face{ --j-face-size:196px; }
}
/* =========================================================================
2. 六段階
========================================================================= */
/* --- 0-10% 絶望 -------------------------------------------------------
完全なモノクロを青へ寄せ、上から重い影を落とす。
写真をわずかに傾け、額を多めに見せることで「うつむき」を作る。 */
.j-face--sorrow{
--j-face-y:34%;
--j-face-rotate:-3.5deg;
--j-face-filter:brightness(.7) contrast(1.2);
--j-face-mono:linear-gradient(rgba(92,112,142,1),rgba(92,112,142,1));
--j-face-mono-blend:color;
/* 目のあたり（円の 50% 前後）に影の底が来るようにする。
口元だけがわずかに光を拾い、伏し目に見える */
--j-face-tint:
linear-gradient(180deg,
rgba(3,6,12,.78) 0%,
rgba(3,6,12,.62) 30%,
rgba(3,6,12,.30) 52%,
rgba(3,6,12,.10) 64%,
rgba(3,6,12,0) 74%);
--j-face-tint-blend:multiply;
--j-face-vignette:
radial-gradient(circle at 50% 46%,
rgba(4,5,9,0) 26%,
rgba(4,5,9,.5) 50%,
rgba(4,5,9,.94) 76%,
rgba(4,5,9,1) 100%);
--j-face-ring:0 0 0 1px rgba(120,140,170,.12);
--j-face-glow:0 22px 44px -24px rgba(0,0,0,1);
}
/* 底に溜まる冷たい暗がり。ごくゆっくり沈む */
.j-face--sorrow::after{
background:
radial-gradient(ellipse 120% 62% at 50% 112%, rgba(6,10,20,.9), rgba(6,10,20,0) 70%),
linear-gradient(180deg, rgba(120,150,190,.05) 0%, rgba(0,0,0,0) 34%);
animation:j-sorrow-sink 7s ease-in-out infinite;
}
@keyframes j-sorrow-sink{
0%,100%{ opacity:.85; transform:translateY(0); }
50% { opacity:1; transform:translateY(3px); }
}
/* --- 20-30% 悲しみ其の二 ----------------------------------------------
絶望より明度はあるが、体温がない。ひび割れと雨。 */
.j-face--sorrow2{
--j-face-y:44%;
--j-face-rotate:-1.5deg;
--j-face-filter:brightness(.84) contrast(1.12);
--j-face-mono:linear-gradient(rgba(112,132,158,.88),rgba(112,132,158,.88));
--j-face-mono-blend:color;
--j-face-tint:
linear-gradient(196deg,
rgba(168,196,232,.20) 0%,
rgba(40,56,80,.28) 44%,
rgba(8,12,20,.55) 100%);
--j-face-tint-blend:soft-light;
--j-face-vignette:
radial-gradient(circle at 50% 44%,
rgba(6,9,14,0) 28%,
rgba(6,9,14,.38) 54%,
rgba(6,9,14,.9) 78%,
rgba(6,9,14,1) 100%);
--j-face-ring:0 0 0 1px rgba(150,175,205,.14);
}
/* ひび1層＋雨2層。雨だけ位置を動かす */
.j-face--sorrow2::after{
background-image:
var(--j-crack),
repeating-linear-gradient(76deg,
rgba(198,220,255,0) 0 5px,
rgba(198,220,255,.16) 5px 6px,
rgba(198,220,255,0) 6px 14px),
repeating-linear-gradient(72deg,
rgba(214,232,255,0) 0 9px,
rgba(214,232,255,.10) 9px 10px,
rgba(214,232,255,0) 10px 26px);
background-size:100% 100%, 160% 160%, 220% 200%;
background-position:50% 50%, 0% 0%, 0% 0%;
opacity:.85;
animation:j-rain 1.15s linear infinite;
}
@keyframes j-rain{
from{ background-position:50% 50%, 0% -60%, 0% -40%; }
to { background-position:50% 50%, -18% 100%, -9% 110%; }
}
/* --- 40-50% ニュートラル ----------------------------------------------
素の写真に近い。緑だけ抜いて、わずかに赤を差す。 */
.j-face--normal{
--j-face-filter:contrast(1.05) brightness(.99);
--j-face-mono:linear-gradient(rgba(146,130,128,.52),rgba(146,130,128,.52));
--j-face-mono-blend:color;
--j-face-tint:
radial-gradient(circle at 50% 38%,
rgba(214,84,84,.16) 0%,
rgba(140,40,44,.14) 46%,
rgba(30,12,14,.34) 100%);
--j-face-tint-blend:soft-light;
--j-face-ring:0 0 0 1px rgba(196,30,46,.16);
}
.j-face--normal::after{
background:radial-gradient(circle at 50% 50%, transparent 68%, rgba(196,30,46,.10) 88%, transparent 100%);
}
/* --- 60-70% 好調 ------------------------------------------------------
暖色へ寄せ、明度を上げ、外側に柔らかい光の輪を置く。 */
.j-face--smile{
--j-face-y:52%;
--j-face-filter:brightness(1.13) contrast(1.03) saturate(1.04);
--j-face-mono:linear-gradient(rgba(168,132,110,.34),rgba(168,132,110,.34));
--j-face-mono-blend:color;
--j-face-tint:
radial-gradient(circle at 50% 26%,
rgba(255,222,170,.44) 0%,
rgba(255,160,90,.22) 42%,
rgba(120,40,26,.20) 72%,
rgba(26,10,10,.40) 100%);
--j-face-tint-blend:soft-light;
--j-face-vignette:
radial-gradient(circle at 50% 42%,
rgba(14,8,8,0) 36%,
rgba(14,8,8,.24) 58%,
rgba(12,7,8,.78) 80%,
rgba(10,7,8,1) 100%);
--j-face-ring:0 0 0 1px rgba(201,164,76,.28);
--j-face-glow:0 0 34px -6px rgba(255,178,96,.36), 0 26px 52px -26px rgba(0,0,0,.9);
}
.j-face--smile::after{
inset:-9%;
background:radial-gradient(circle,
rgba(255,196,130,0) 56%,
rgba(255,196,130,.16) 64%,
rgba(255,214,160,.22) 70%,
rgba(255,196,130,.07) 78%,
rgba(255,196,130,0) 88%);
mix-blend-mode:screen;
animation:j-smile-breathe 4.6s ease-in-out infinite;
}
@keyframes j-smile-breathe{
0%,100%{ opacity:.72; transform:scale(.985); }
50% { opacity:1; transform:scale(1.015); }
}
/* --- 80-90% 情熱 ------------------------------------------------------
下から強いオレンジで焚き上げる。炎は円の後ろから立ち上る。 */
.j-face--passion{
--j-face-y:54%;
--j-face-filter:contrast(1.14) brightness(1.03) saturate(.98);
--j-face-mono:linear-gradient(rgba(150,110,96,.40),rgba(150,110,96,.40));
--j-face-mono-blend:color;
--j-face-tint:
radial-gradient(ellipse 94% 74% at 50% 110%,
rgba(255,182,74,.92) 0%,
rgba(240,84,34,.62) 34%,
rgba(158,22,26,.34) 58%,
rgba(22,6,8,.62) 92%);
--j-face-tint-blend:hard-light;
--j-face-vignette:
radial-gradient(circle at 50% 40%,
rgba(12,5,6,0) 34%,
rgba(12,5,6,.28) 58%,
rgba(10,4,5,.84) 80%,
rgba(10,4,5,1) 100%);
--j-face-ring:0 0 0 1px rgba(255,140,60,.34);
--j-face-glow:0 0 40px -4px rgba(224,60,40,.5), 0 26px 56px -26px rgba(0,0,0,.95);
animation:j-passion-heat 3.4s ease-in-out infinite;
}
@keyframes j-passion-heat{
0%,100%{ box-shadow:0 0 0 1px rgba(255,140,60,.30), 0 0 36px -6px rgba(224,60,40,.42), 0 26px 56px -26px rgba(0,0,0,.95); }
50% { box-shadow:0 0 0 1px rgba(255,170,80,.5), 0 0 56px 0 rgba(240,90,40,.6), 0 26px 56px -26px rgba(0,0,0,.95); }
}
/* 顔の後ろから立ち上る炎 */
.j-face--passion::after{
z-index:0;
inset:-16% -20% -34%;
border-radius:0;
background:linear-gradient(to top,
rgba(255,246,214,.0) 0%,
rgba(255,186,72,.88) 13%,
rgba(232,72,32,.72) 38%,
rgba(150,18,22,.30) 62%,
rgba(120,14,18,0) 82%);
-webkit-mask-image:var(--j-noise-flame);
mask-image:var(--j-noise-flame);
-webkit-mask-size:170% 145%;
mask-size:170% 145%;
-webkit-mask-repeat:repeat;
mask-repeat:repeat;
filter:blur(4px) contrast(2.3);
mix-blend-mode:screen;
animation:j-flame-rise 2.5s linear infinite;
}
/* --- 100% 神 ----------------------------------------------------------
逆光の縁取り、金の光輪、回る光条、そして鼓動。 */
.j-face--god{
--j-face-y:52%;
--j-face-filter:brightness(1.12) contrast(1.05) saturate(.92) sepia(.16);
--j-face-mono:linear-gradient(rgba(190,158,96,.34),rgba(190,158,96,.34));
--j-face-mono-blend:color;
/* 中心は素通し、外周だけを白熱させて逆光をつくる */
--j-face-tint:
radial-gradient(circle at 50% 44%,
rgba(255,244,214,0) 38%,
rgba(255,226,150,.30) 62%,
rgba(255,198,74,.72) 82%,
rgba(255,240,196,.96) 100%);
--j-face-tint-blend:screen;
/* 逆光の縁を潰さないよう、神だけヴィネットを薄くする。
外周は screen で白熱しているので、これでも背景の緑は残らない */
--j-face-vignette:
radial-gradient(circle at 50% 42%,
rgba(16,10,4,0) 44%,
rgba(16,10,4,.10) 66%,
rgba(14,9,4,.20) 84%,
rgba(12,8,4,.3) 100%);
animation:j-god-beat 2.6s ease-in-out infinite;
}
.j-face--god::after{
z-index:0;
inset:-34%;
background-image:
/* 光の粒子 */
radial-gradient(circle at 22% 26%, rgba(255,244,206,.95) 0 1.3px, transparent 2px),
radial-gradient(circle at 78% 20%, rgba(255,236,186,.85) 0 1.1px, transparent 1.8px),
radial-gradient(circle at 88% 62%, rgba(255,244,206,.9) 0 1.4px, transparent 2.1px),
radial-gradient(circle at 12% 68%, rgba(255,232,180,.8) 0 1.1px, transparent 1.8px),
radial-gradient(circle at 50% 8%, rgba(255,248,220,.95) 0 1.6px, transparent 2.4px),
radial-gradient(circle at 34% 92%, rgba(255,236,186,.75) 0 1.2px, transparent 1.9px),
radial-gradient(circle at 68% 88%, rgba(255,244,206,.85) 0 1.3px, transparent 2px),
/* 光条 */
repeating-conic-gradient(from 0deg,
rgba(255,216,140,.22) 0deg 1.3deg,
rgba(255,216,140,0) 1.3deg 9deg),
/* 光輪 */
radial-gradient(circle,
rgba(255,214,120,0) 52%,
rgba(255,206,104,.30) 60%,
rgba(255,182,66,.16) 70%,
rgba(196,30,46,.10) 82%,
transparent 94%);
-webkit-mask-image:radial-gradient(closest-side, transparent 0 56%, rgba(0,0,0,.9) 65%, rgba(0,0,0,.6) 84%, transparent 98%);
mask-image:radial-gradient(closest-side, transparent 0 56%, rgba(0,0,0,.9) 65%, rgba(0,0,0,.6) 84%, transparent 98%);
mix-blend-mode:screen;
animation:j-god-rays 28s linear infinite, j-god-shimmer 2.6s ease-in-out infinite;
}
@keyframes j-god-rays{
from{ transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
@keyframes j-god-shimmer{
0%,100%{ opacity:.78; }
46% { opacity:1; }
}
@keyframes j-god-beat{
0%,100%{
transform:scale(1);
box-shadow:
0 0 0 1px rgba(201,164,76,.34),
0 0 34px -6px rgba(255,196,90,.42),
0 0 96px 8px rgba(196,30,46,.14),
0 26px 56px -28px rgba(0,0,0,.95);
}
46%{
transform:scale(1.026);
box-shadow:
0 0 0 1px rgba(240,211,138,.62),
0 0 58px 0 rgba(255,206,110,.72),
0 0 140px 26px rgba(224,80,40,.26),
0 26px 56px -28px rgba(0,0,0,.95);
}
}
/* =========================================================================
3. .j-flame — 部分演出
親に position が要る。.j-page / .j-card / .j-qitem / .j-face は指定済み。
========================================================================= */
.j-flame{
position:absolute;
left:0; right:0; bottom:0;
height:var(--j-flame-h, 132px);
z-index:1;
pointer-events:none;
overflow:hidden;
mix-blend-mode:screen;
/* 足元に溜まる熱 */
background:radial-gradient(84% 116% at 50% 122%,
rgba(255,132,44,.34) 0%,
rgba(196,30,46,.18) 42%,
rgba(107,15,22,0) 74%);
}
.j-flame::before,
.j-flame::after{
content:"";
position:absolute;
inset:-8% -6% -22%;
-webkit-mask-repeat:repeat;
mask-repeat:repeat;
}
/* 奥の大きい炎 */
.j-flame::before{
background:linear-gradient(to top,
rgba(255,240,196,.92) 0%,
rgba(255,158,44,.88) 17%,
rgba(224,54,40,.68) 42%,
rgba(140,16,22,.26) 66%,
rgba(107,15,22,0) 88%);
-webkit-mask-image:var(--j-noise-flame);
mask-image:var(--j-noise-flame);
-webkit-mask-size:190% 150%;
mask-size:190% 150%;
filter:blur(3px) contrast(2.2);
opacity:.9;
animation:j-flame-rise 2.6s linear infinite;
}
/* 手前の小さい炎。速く、明るい芯 */
.j-flame::after{
background:linear-gradient(to top,
rgba(255,250,226,.95) 0%,
rgba(255,186,70,.9) 20%,
rgba(230,78,34,.44) 50%,
rgba(200,40,30,0) 76%);
-webkit-mask-image:var(--j-noise-flame2);
mask-image:var(--j-noise-flame2);
-webkit-mask-size:128% 122%;
mask-size:128% 122%;
filter:blur(2px) contrast(2.6);
opacity:.78;
animation:j-flame-rise2 1.75s linear infinite;
}
@keyframes j-flame-rise{
from{ -webkit-mask-position:0% 130%; mask-position:0% 130%; }
to { -webkit-mask-position:0% -60%; mask-position:0% -60%; }
}
@keyframes j-flame-rise2{
from{ -webkit-mask-position:40% 140%; mask-position:40% 140%; }
to { -webkit-mask-position:24% -70%; mask-position:24% -70%; }
}
/* 上向きに焚きたい場合の高さ調整用（任意） */
.j-flame--sm{ --j-flame-h:74px; }
.j-flame--lg{ --j-flame-h:210px; }
/* =========================================================================
4. .j-flame--full — 100%（key:"god"）専用。画面全体を炎で包む
擬似要素で描くので、次のどちらの当て方でも同じ結果になる。
中央は必ず素通しにして、本文の可読性を落とさない。
========================================================================= */
.j-flame--full{ overflow:visible; }
/* 単体の div として置かれた場合 */
div.j-flame.j-flame--full{
position:fixed;
inset:0;
width:auto; height:auto;
background:none;
mix-blend-mode:normal;
}
.j-flame--full::before,
.j-flame--full::after{
content:"";
position:fixed;
inset:0;
z-index:60;
pointer-events:none;
mix-blend-mode:screen;
}
/* 下辺から全幅で立ち上る炎＋四隅の熱 */
.j-flame--full::before{
background-image:
linear-gradient(to top,
rgba(255,244,206,.9) 0%,
rgba(255,164,52,.82) 9%,
rgba(226,56,40,.6) 24%,
rgba(140,16,22,.22) 42%,
rgba(107,15,22,0) 62%);
background-repeat:no-repeat;
background-size:100% 78vh;
background-position:50% 100%;
-webkit-mask-image:var(--j-noise-flame);
mask-image:var(--j-noise-flame);
-webkit-mask-size:64vw 92vh;
mask-size:64vw 92vh;
-webkit-mask-repeat:repeat;
mask-repeat:repeat;
filter:blur(5px) contrast(2.1);
opacity:.92;
animation:j-flame-rise 3.2s linear infinite;
}
/* 画面の縁を焼く光と、舞い上がる火の粉 */
.j-flame--full::after{
background-image:
/* 火の粉 */
radial-gradient(circle at 14% 80%, rgba(255,214,140,.9) 0 1.6px, transparent 2.4px),
radial-gradient(circle at 31% 62%, rgba(255,184,88,.8) 0 1.2px, transparent 2px),
radial-gradient(circle at 47% 88%, rgba(255,232,180,.85) 0 1.8px, transparent 2.6px),
radial-gradient(circle at 63% 55%, rgba(255,176,80,.75) 0 1.3px, transparent 2.1px),
radial-gradient(circle at 79% 84%, rgba(255,220,150,.9) 0 1.5px, transparent 2.3px),
radial-gradient(circle at 91% 66%, rgba(255,190,96,.7) 0 1.1px, transparent 1.9px),
radial-gradient(circle at 22% 40%, rgba(255,208,130,.6) 0 1.2px, transparent 2px),
radial-gradient(circle at 71% 34%, rgba(255,222,160,.55) 0 1.4px, transparent 2.2px),
/* 縁の熱 */
radial-gradient(120% 70% at 50% 118%, rgba(255,120,40,.30), rgba(255,120,40,0) 62%),
radial-gradient(70% 52% at -8% 46%, rgba(196,30,46,.26), rgba(196,30,46,0) 70%),
radial-gradient(70% 52% at 108% 46%, rgba(196,30,46,.26), rgba(196,30,46,0) 70%),
radial-gradient(110% 46% at 50% -12%, rgba(201,164,76,.20), rgba(201,164,76,0) 68%);
background-size:
52vw 74vh, 44vw 62vh, 60vw 82vh, 40vw 58vh,
56vw 78vh, 46vw 66vh, 50vw 70vh, 42vw 60vh,
100% 100%, 100% 100%, 100% 100%, 100% 100%;
background-repeat:repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
no-repeat, no-repeat, no-repeat, no-repeat;
animation:j-embers 9s linear infinite;
}
/* 火の粉だけを上へ流す。最後の4層（縁の熱）は動かさない */
@keyframes j-embers{
from{
background-position:
0 100%, 0 100%, 0 100%, 0 100%,
0 100%, 0 100%, 0 100%, 0 100%,
50% 100%, 0 50%, 100% 50%, 50% 0;
}
to{
background-position:
-6vw -60%, 5vw -70%, -9vw -80%, 7vw -55%,
-4vw -75%, 8vw -65%, -7vw -85%, 3vw -60%,
50% 100%, 0 50%, 100% 50%, 50% 0;
}
}
/* 全画面炎が出ている間は、下の本文を少し暖色へ引き寄せる（任意の相乗効果） */
.j-page--result.j-flame--full .j-card{
border-color:rgba(201,164,76,.26);
box-shadow:
var(--j-shadow),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 60px -22px rgba(255,140,60,.4);
}
/* =========================================================================
5. モーション配慮
動きを止めても、各段階の「らしさ」は静止画として残るようにする。
========================================================================= */
@media (prefers-reduced-motion:reduce){
.j-face--sorrow::after,
.j-face--sorrow2::after,
.j-face--smile::after,
.j-face--passion,
.j-face--passion::after,
.j-face--god,
.j-face--god::after,
.j-flame::before,
.j-flame::after,
.j-flame--full::before,
.j-flame--full::after{
animation:none !important;
}
/* 止まった状態の見え方を整える */
.j-face--sorrow2::after{ background-position:50% 50%, -8% 30%, 4% 46%; }
.j-face--smile::after{ opacity:.9; transform:none; }
.j-face--god{
transform:none;
box-shadow:
0 0 0 1px rgba(240,211,138,.5),
0 0 48px -4px rgba(255,200,100,.6),
0 0 120px 18px rgba(224,80,40,.2),
0 26px 56px -28px rgba(0,0,0,.95);
}
.j-face--god::after{ opacity:.92; transform:none; }
.j-face--passion{
box-shadow:
0 0 0 1px rgba(255,150,70,.42),
0 0 48px -4px rgba(232,74,40,.52),
0 26px 56px -26px rgba(0,0,0,.95);
}
.j-flame::before{ -webkit-mask-position:0% 24%; mask-position:0% 24%; }
.j-flame::after{ -webkit-mask-position:32% 36%; mask-position:32% 36%; }
.j-face--passion::after{ -webkit-mask-position:0% 28%; mask-position:0% 28%; }
.j-flame--full::before{ -webkit-mask-position:0% 30%; mask-position:0% 30%; }
}
/* =========================================================================
6. 印刷では演出を落とす
========================================================================= */
@media print{
.j-flame,
.j-flame--full::before,
.j-flame--full::after,
.j-face::after{ display:none; }
}