/* ================================================================== THE366 Experience System ― 「光＝想い」（/fx.css） 2026-10-01 新設（10/1 1時用 修正依頼 ⑩） THE366 の光は装飾ではなく「人が誰かを想うことで生まれるもの」。 画面ごとに別の「それっぽい金の光」を作らず、ここにある ・Effect Token（色・透明度・ぼかし・粒の大きさ・速さ・呼吸の周期・イージング） ・光の文法（生まれる／集まる／宿る／届ける／受け取る／つながる／残す／存在する） ・強さの3段階（Level 1 Ambient／Level 2 Action／Level 3 Emotional Peak） を使う。新しい光を足すときは「この光は何を意味しているか」を下の文法のどれかで説明できること。 光の文法（クラス名＝意味） .fx-born 想いが生まれる … 小さな光が現れる .fx-gather 想いを託す … 周囲の光が対象へ集まる（粒は /fx.js の particles(...,'gather')） .fx-inner 想いが宿る … 対象の内側から静かに発光 .fx-travel 想いを届ける … 光が方向を持って移動（--fx-dx / --fx-dy） .fx-spread 想いを受け取る … 神使から受け取る側へ光が広がる .fx-link 想いがつながる … 光と光が線／流れとして結ばれる .fx-settle 想いを残す … 光がその場所へ静かに定着 .fx-breathe 想いが存在する … 微弱な光が呼吸するように揺らぐ 強さ（親または自身に data-fx="1|2|3"） 1 Ambient 弱い・遅い・静か・継続的（THE366 TOP／想いの杜／ログレター／背景の光） 2 Action 行為に反応して集まる・移動する（宿す・贈る・つながる・残す・鳥居） 3 Emotional Peak タグレター開封 → 神使登場 → 神使が想いを届ける（THE366の最高峰） ほかの画面が Level 3 より派手にならないよう、係数 --fx-k で一律に強さを決める。 ================================================================== */ :root{ /* ---- 色（THE366 Gold / Navy を基準） ---- */ --fx-core:#FFF8E6; /* 光の中心（ほぼ白の生成り） */ --fx-gold:245,214,140; /* 光の金（rgb の3値。rgba(var(--fx-gold),a) で使う） */ --fx-gold-deep:212,175,55; /* 光の縁の金（--gold-bright と同じ） */ --fx-navy:28,46,74; /* THE366 Navy（光の沈む先） */ /* ---- 透明度・ぼかし・粒 ---- */ --fx-glow-a:.55; /* Glow の最大の濃さ（Level 係数を掛けて使う） */ --fx-blur:18px; /* Glow のぼかし */ --fx-particle:6px; /* 粒の大きさ */ --fx-particle-n:14; /* 粒の数（/fx.js が読む。Level で増減） */ /* ---- 時間・動き ---- */ --fx-fade:700ms; /* 現れる／消える */ --fx-move:1100ms; /* 光が移動する */ --fx-breath:6.4s; /* 存在する光の呼吸 */ --fx-ease:cubic-bezier(.2,.7,.3,1); /* 集まる・広がる */ --fx-ease-soft:cubic-bezier(.45,.05,.4,1); --fx-k:1; /* 強さの係数（下の data-fx で変わる） */ } /* ---- 強さの3段階 ---- */ [data-fx="1"]{--fx-k:.45;--fx-particle-n:6; --fx-breath:8s; --fx-move:1600ms;} [data-fx="2"]{--fx-k:.75;--fx-particle-n:12;--fx-breath:6.4s;--fx-move:1100ms;} [data-fx="3"]{--fx-k:1; --fx-particle-n:22;--fx-breath:5.2s;--fx-move:1000ms;} /* ---- 共通の光の形（中心が白く、外へ金→透明） ---- */ .fx-light{position:absolute;border-radius:50%;pointer-events:none; background:radial-gradient(circle,var(--fx-core) 0%,rgba(var(--fx-gold),.9) 38%,rgba(var(--fx-gold),0) 72%);} .fx-glow{position:absolute;inset:-30%;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(var(--fx-gold),calc(var(--fx-glow-a) * var(--fx-k))) 0%, rgba(var(--fx-gold-deep),calc(.18 * var(--fx-k))) 46%,rgba(var(--fx-gold-deep),0) 74%);} /* 想いが生まれる：小さな光が現れる */ .fx-born{animation:fxBorn var(--fx-fade) var(--fx-ease) both;} @keyframes fxBorn{0%{opacity:0;transform:scale(.2);}60%{opacity:1;}100%{opacity:1;transform:scale(1);}} /* 想いを託す：周囲の粒が対象の中心へ集まる（粒の出発点は --fx-x / --fx-y。/fx.js が置く） */ .fx-dot{position:absolute;left:50%;top:50%;width:var(--fx-particle);height:var(--fx-particle); margin:calc(var(--fx-particle) / -2) 0 0 calc(var(--fx-particle) / -2);border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle,var(--fx-core) 0%,rgba(var(--fx-gold),.9) 45%,rgba(var(--fx-gold),0) 78%); box-shadow:0 0 calc(10px * var(--fx-k)) rgba(var(--fx-gold),.7);} .fx-dot.g{animation:fxGather var(--fx-move) var(--fx-ease-soft) var(--fx-delay,0ms) both;} @keyframes fxGather{0%{opacity:0;transform:translate(var(--fx-x),var(--fx-y)) scale(.6);} 25%{opacity:calc(.95 * var(--fx-k) + .05);}100%{opacity:0;transform:translate(0,0) scale(.2);}} /* 想いを受け取る：神使から外へ、受け取る側へ広がる */ .fx-dot.s{animation:fxSpread calc(var(--fx-move) * 1.5) var(--fx-ease) var(--fx-delay,0ms) both;} @keyframes fxSpread{0%{opacity:0;transform:translate(0,0) scale(.3);}20%{opacity:1;} 100%{opacity:0;transform:translate(var(--fx-x),var(--fx-y)) scale(1);}} /* 想いが存在する：その場で呼吸する粒 */ .fx-dot.a{animation:fxFloat var(--fx-breath) ease-in-out var(--fx-delay,0ms) infinite; left:var(--fx-l,50%);top:var(--fx-t,50%);} @keyframes fxFloat{0%,100%{opacity:0;transform:translateY(0) scale(.7);} 50%{opacity:calc(.8 * var(--fx-k));transform:translateY(-12px) scale(1);}} /* 想いが宿る：対象の内側から静かに発光（filter の光は対象の形に沿う） */ .fx-inner{animation:fxInner calc(var(--fx-fade) * 2) ease-out both;} @keyframes fxInner{0%{filter:drop-shadow(0 0 0 rgba(var(--fx-gold),0)) brightness(1);} 100%{filter:drop-shadow(0 0 calc(var(--fx-blur) * var(--fx-k)) rgba(var(--fx-gold),calc(.75 * var(--fx-k)))) brightness(calc(1 + .1 * var(--fx-k)));}} /* 想いを届ける：光が方向を持って移動する（--fx-dx / --fx-dy） */ .fx-travel{animation:fxTravel var(--fx-move) var(--fx-ease-soft) both;} @keyframes fxTravel{0%{opacity:0;transform:translate(0,0) scale(.6);}15%{opacity:1;} 100%{opacity:0;transform:translate(var(--fx-dx,0),var(--fx-dy,-40vh)) scale(.25);}} /* 想いを受け取る：中心から外へ柔らかく広がる光の輪 */ .fx-spread{animation:fxRing calc(var(--fx-move) * 1.6) var(--fx-ease) both;} @keyframes fxRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.2);}25%{opacity:calc(.9 * var(--fx-k));} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);}} /* 想いがつながる：光の線が流れる */ .fx-link{background:linear-gradient(90deg,rgba(var(--fx-gold),0),rgba(var(--fx-gold),calc(.8 * var(--fx-k))),rgba(var(--fx-gold),0)); background-size:200% 100%;animation:fxLink calc(var(--fx-breath) * .6) linear infinite;} @keyframes fxLink{0%{background-position:100% 0;}100%{background-position:-100% 0;}} /* 想いを残す：光がその場所へ降りて定着する */ .fx-settle{animation:fxSettle calc(var(--fx-move) * 1.4) var(--fx-ease) both;} @keyframes fxSettle{0%{opacity:0;transform:translateY(-18px) scale(1.3);filter:blur(4px);} 100%{opacity:1;transform:none;filter:none;}} /* 想いが存在する：微弱な光の呼吸 */ .fx-breathe{animation:fxBreathe var(--fx-breath) ease-in-out infinite;} @keyframes fxBreathe{0%,100%{opacity:calc(.55 * var(--fx-k) + .2);transform:scale(1);} 50%{opacity:calc(.9 * var(--fx-k) + .1);transform:scale(1.05);}} /* ---- 動きを減らす設定：移動と明滅を止め、静かなフェードだけにする ---- */ @media (prefers-reduced-motion: reduce){ .fx-dot{display:none !important;} .fx-breathe,.fx-link{animation:none !important;} .fx-travel,.fx-spread,.fx-settle,.fx-born{animation-duration:1ms !important;} .fx-inner{animation-duration:400ms !important;} } /* ================================================================== 2026-10-01（10時）⑩の仕上げ：既存の光をこの Effect Token へ置き換えた画面 画面 光の意味 Level 使っている値 THE366 TOP（index.html） 世界に存在する想い／集まる／届く 1 --fx-gold・--fx-gold-deep・--fx-core・--fx-move・--fx-breath・--fx-fade（body[data-fx=1]） 想いの行方（tagletter #c15） 人から人へ連なった想いの系譜 1 光の点＝rgb(--fx-gold)・線＝--fx-gold-deep・自分＝--fx-core（#c15[data-fx=1]） ログレター／想いの杜 残された想いが宿っている 1 環境の光 llAmb＝--fx-breath・新着の光＝--fx-move（body[data-fx=1]） ログレター 鳥居 想いを残す場所へ入る 2 .lla[data-fx=2]（garden.js が付ける）・粒の移動＝--fx-move タグレター 託す／贈る／つながる 2 （7時の回） タグレター 開封・神使が届ける 3 （7時の回・THE366の最高峰） 画面ごとの「それっぽい金」（#F5D68C・#ffe4a6・rgba(255,220,140,…) など）は残していない。 ================================================================== */