/* ===========================================================
DOPE Effects — 既存 LP に重ねる軽強化 CSS
モノクロ × Swiss スタイル × ダークアクセント
prefers-reduced-motion / mobile を完全考慮
=========================================================== */
:root {
--dope-accent: #0f172a; /* メインアクセント（紺寄り黒）*/
--dope-accent-mid: #475569;
--dope-accent-low: #94a3b8;
--dope-bg-soft: #fafaf9;
--dope-border: #e2e8f0;
}
/* ===========================================================
1. soft-shadow — 5 段階の柔らかシャドウ
=========================================================== */
.dope-shadow-1 { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.06); }
.dope-shadow-2 { box-shadow: 0 4px 8px -2px rgba(15,23,42,.06), 0 2px 4px -1px rgba(15,23,42,.04); }
.dope-shadow-3 { box-shadow: 0 12px 24px -8px rgba(15,23,42,.08), 0 6px 12px -4px rgba(15,23,42,.06); }
.dope-shadow-4 { box-shadow: 0 24px 48px -16px rgba(15,23,42,.12), 0 12px 24px -8px rgba(15,23,42,.08); }
.dope-shadow-5 { box-shadow: 0 48px 96px -24px rgba(15,23,42,.18), 0 24px 48px -16px rgba(15,23,42,.12); }
/* ホバーで一段浮き上がる */
.dope-shadow-hover {
transition: transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.dope-shadow-hover:hover {
transform: translateY(-4px);
box-shadow: 0 28px 56px -16px rgba(15,23,42,.18),
0 14px 28px -8px rgba(15,23,42,.10);
}
/* ===========================================================
2. grain-texture — 極薄のフィルム粒子（全画面 or 要素単位）
=========================================================== */
.dope-grain {
position: relative;
isolation: isolate;
}
.dope-grain::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: .04;
pointer-events: none;
z-index: 1;
}
/* ボディ全画面用（fixed）
※ mix-blend-mode は暗色背景セクションを更に暗くする事故が起きるため不使用
※ ダークセクションでは無効化する（後述） */
.dope-grain-body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: .02;
}
/* ===========================================================
3. mask-reveal — viewport 入りで下からスライドアップ
=========================================================== */
.dope-reveal {
overflow: hidden;
display: inline-block;
position: relative;
}
.dope-reveal > * {
display: inline-block;
transform: translateY(110%);
transition: transform 1s cubic-bezier(.65,.05,.36,1);
}
.dope-reveal.is-visible > * {
transform: translateY(0);
}
/* ブロック要素全体をフェード + 上がり */
.dope-fadeup {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s cubic-bezier(.2,.8,.2,1),
transform .8s cubic-bezier(.2,.8,.2,1);
}
.dope-fadeup.is-visible {
opacity: 1;
transform: translateY(0);
}
/* スタガー（連続フェード）*/
.dope-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity .7s cubic-bezier(.2,.8,.2,1),
transform .7s cubic-bezier(.2,.8,.2,1);
}
.dope-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.dope-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .08s; }
.dope-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .16s; }
.dope-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: .24s; }
.dope-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: .32s; }
.dope-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: .40s; }
.dope-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: .48s; }
.dope-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: .56s; }
/* ===========================================================
4. kinetic-typo（CSS 部）— 文字単位の transition セット
実際の文字分割は JS（dope-effects.js）で行う
=========================================================== */
.dope-kinetic > span {
display: inline-block;
opacity: 0;
transform: translateY(120%);
transition: transform .8s cubic-bezier(.2,.8,.2,1),
opacity .6s ease;
}
.dope-kinetic.is-visible > span {
opacity: 1;
transform: translateY(0);
}
/* ===========================================================
5. magnetic-cursor — JS 制御の transition 下地
=========================================================== */
.dope-magnetic {
transition: transform .3s cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
/* ===========================================================
bonus: スクロール時に大型見出しが視差で滑る
=========================================================== */
.dope-slide {
transition: transform .2s linear;
will-change: transform;
}
/* ===========================================================
bonus: テキストアンダーライン waved on hover
=========================================================== */
.dope-underline {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .4s cubic-bezier(.2,.8,.2,1);
text-decoration: none;
}
.dope-underline:hover {
background-size: 100% 1px;
}
/* ===========================================================
📊 スクロール進捗バー（ページ上部の細い線）
を body 直下に配置
=========================================================== */
.dope-scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--dope-accent) 0%, #06b6d4 50%, var(--dope-accent) 100%);
background-size: 200% 100%;
z-index: 99999;
transition: width .12s linear;
pointer-events: none;
box-shadow: 0 0 12px rgba(6, 182, 212, .35);
}
/* ===========================================================
✨ 数字カウントアップ完了時の光スイープ
¥198,000
IntersectionObserver で .is-shined を付与
=========================================================== */
.dope-shine {
position: relative;
display: inline-block;
overflow: hidden;
isolation: isolate;
}
.dope-shine::after {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, .8) 50%,
transparent 100%
);
transform: skewX(-20deg);
pointer-events: none;
z-index: 1;
}
.dope-shine.is-shined::after {
animation: dope-shine-sweep 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes dope-shine-sweep {
to { left: 220%; }
}
/* ===========================================================
➡️ リンク・ボタン内の矢印が自動で右に動く
無料相談 →
=========================================================== */
.dope-arrow > span,
.dope-arrow::after {
display: inline-block;
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
will-change: transform;
}
.dope-arrow:hover > span,
.dope-arrow:hover::after {
transform: translateX(6px);
}
/* ===========================================================
📏 セクション間の罫線アニメ（左から右へ伸びる）
=========================================================== */
.dope-rule {
border: 0;
border-top: 1px solid var(--dope-border);
margin: 48px 0;
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s cubic-bezier(.65, .05, .36, 1);
}
.dope-rule.is-visible {
transform: scaleX(1);
}
/* ===========================================================
🎯 ヘッダー縮小（スクロール時にコンパクトに）