/* ======================================================================= Concept View — Meteor Shower Mode（流星群モード）コンセプトビュー全体に降り注ぐ高品質な流星群の演出。 site_settings によって有効化されたときだけに .concept-meteor-active が付与され、この CSS が機能する。 ======================================================================= */ /* ---- レイヤー全体 ---- */ .meteor_layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 49; /* ヘッダー(高z)より下、コンテンツより上 */ overflow: hidden; opacity: 0; transition: opacity 1.2s ease; } .concept-meteor-active .meteor_layer { opacity: 1; } /* 流星群モード時は背景をわずかに深い夜空へ寄せ、流星を引き立てる */ .concept-meteor-active .concept_s1_nebula { opacity: 0.7; } /* ---- 個々の流星 ---- */ .meteor { position: absolute; top: 0; left: 0; width: var(--len, 160px); height: 2px; /* 進行方向（右上 → 左下）に伸びるトレイル。先端が右側 */ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(190, 215, 255, 0.28) 38%, rgba(246, 220, 159, 0.78) 82%, rgba(255, 255, 255, 0.95) 100%); border-radius: 999px; filter: drop-shadow(0 0 5px rgba(190, 215, 255, 0.4)); transform-origin: right center; transform: translate3d(var(--x0), var(--y0), 0) rotate(var(--angle)); opacity: 0; will-change: transform, opacity; animation: meteorFly var(--dur, 1.4s) var(--delay, 0s) cubic-bezier(0.4, 0, 0.7, 1) forwards; } /* 流星の頭（光球） */ .meteor::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px rgba(255, 255, 255, 0.85), 0 0 16px 5px rgba(246, 220, 159, 0.4), 0 0 26px 9px rgba(160, 190, 255, 0.2); } /* 大きめの流星（火球）はトレイルが太く明るい（出現は控えめ） */ .meteor.meteor--bright { height: 3px; filter: drop-shadow(0 0 8px rgba(246, 220, 159, 0.55)); } .meteor.meteor--bright::after { width: 6px; height: 6px; box-shadow: 0 0 11px 3px rgba(255, 255, 255, 0.95), 0 0 22px 8px rgba(246, 220, 159, 0.5), 0 0 38px 14px rgba(160, 190, 255, 0.24); } @keyframes meteorFly { 0% { opacity: 0; transform: translate3d(var(--x0), var(--y0), 0) rotate(var(--angle)) scaleX(0.2); } 16% { opacity: 0.92; } 78% { opacity: 0.92; } 100% { opacity: 0; transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--angle)) scaleX(1); } } /* 放射点付近で瞬く微光（背景の輝き） */ .meteor_radiant { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 215, 255, 0.10) 0%, transparent 65%); pointer-events: none; animation: meteorRadiantPulse 6s ease-in-out infinite; } @keyframes meteorRadiantPulse { 0%, 100% { opacity: 0.32; transform: scale(0.94); } 50% { opacity: 0.7; transform: scale(1.04); } } @media screen and (max-width: 400px) { .meteor_radiant { width: 260px; height: 260px; } } /* アニメーションを抑制したいユーザーには配慮 */ @media (prefers-reduced-motion: reduce) { .meteor { animation-duration: 2.6s !important; } .meteor_radiant { animation: none; } }