/* ============================================================= animations.css — Utsubo風アニメーション補助スタイル GSAP が動作しない環境向けの CSS フォールバックを含む @package MyShop ============================================================= */ /* ── 1. 初期非表示（GSAP が制御する要素の初期状態） ─────── */ /* GSAP が読み込まれると fromTo() で opacity/transform を直接制御するため CSS の初期値は "表示済み" にしておく（GSAP が上書き前に一瞬見えるのを防ぐ） → DOMContentLoaded 前に GSAP が読まれるよう に配置する */ [data-animate] { will-change: transform, opacity; } /* ── 2. テキストリビール用ラッパー ─────────────────────── */ /* splitLines() で生成される構造:

テキスト

*/ .split-line { display: block; overflow: hidden; /* inner が上から流れ込む */ line-height: 1.3; } .split-inner { display: block; will-change: transform; } /* ── 3. CSS Intersection Observer フォールバック ───────── JS が読み込まれない or GSAP が利用不可な場合、 .js-animate クラスをフックにした純CSS アニメーションに切り替える */ /* 初期状態 */ .js-animate { opacity: 0; transform: translateY(50px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .js-animate.is-visible { opacity: 1; transform: translateY(0); } /* スタガー遅延（1〜8番目まで） */ .js-animate:nth-child(1) { transition-delay: 0.00s; } .js-animate:nth-child(2) { transition-delay: 0.10s; } .js-animate:nth-child(3) { transition-delay: 0.20s; } .js-animate:nth-child(4) { transition-delay: 0.30s; } .js-animate:nth-child(5) { transition-delay: 0.40s; } .js-animate:nth-child(6) { transition-delay: 0.50s; } .js-animate:nth-child(7) { transition-delay: 0.60s; } .js-animate:nth-child(8) { transition-delay: 0.70s; } /* 左スライド variant */ .js-animate-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .js-animate-left.is-visible { opacity: 1; transform: translateX(0); } /* スケール variant */ .js-animate-scale { opacity: 0; transform: scale(0.94) translateY(40px); transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), transform 1.0s cubic-bezier(0.16, 1, 0.3, 1); } .js-animate-scale.is-visible { opacity: 1; transform: scale(1) translateY(0); } /* ── 4. セクションラベル（clip-path リビール） ───────────── */ .section-label { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .section-label.is-visible, [data-animate="heading"].is-visible .section-label { clip-path: inset(0 0% 0 0); } /* ── 5. ページ遷移フェード ───────────────────────────────── */ html.is-leaving { pointer-events: none; } html.is-leaving body { animation: pageFadeOut 0.35s ease forwards; } @keyframes pageFadeOut { to { opacity: 0; } } /* ── 6. Hero ローディング時の CSS アニメーション ───────── GSAP 読み込み前に一瞬でも Hero が見えるよう CSS でも初期アニメーションを定義（GSAP が上書きする） */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .hero-section [data-hero="label"] { animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both; } /* GSAP 読み込み済みの場合は CSS アニメーションをリセット (gsap-ready クラスを body に付与することで切り替え) */ body.gsap-ready .hero-section [data-hero="label"] { animation: none; } /* ── 7. スクロールインジケーター 矢印アニメーション ───────── */ .hero-scroll-line span { animation: scrollPulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite; } @keyframes scrollPulse { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 40% { opacity: 1; transform: scaleY(1); } 80% { opacity: 0; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } } /* ── 8. ローディングオーバーレイ（初回のみ） ─────────────── */ #page-loader { position: fixed; inset: 0; z-index: 9999; background: #0c2340; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } #page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-logo { color: #ffffff; font-size: 1.5rem; font-weight: 900; animation: loaderPulse 1.2s ease infinite; } @keyframes loaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .loader-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: #2563eb; animation: loaderProgress 1.4s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes loaderProgress { from { width: 0; } to { width: 100%; } } /* ── 9. prefers-reduced-motion: すべて無効化 ──────────── */ @media (prefers-reduced-motion: reduce) { [data-animate], .js-animate, .js-animate-left, .js-animate-scale, .section-label, .split-inner, .hero-section [data-hero] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ── 10. ホバーマイクロアニメーション ────────────────────── */ /* ナビリンク */ .site-nav a { position: relative; transition: color 0.2s ease; } /* カード: ボーダーグロー */ .card-hover { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(12,35,64,.12); } /* ボタン: 光沢スイープ */ .btn-sweep { position: relative; overflow: hidden; } .btn-sweep::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1); } .btn-sweep:hover::after { transform: translateX(100%); } /* 商品カード画像ズーム */ .product-card .thumb { overflow: hidden; } .product-card .thumb img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); } .product-card:hover .thumb img { transform: scale(1.07); } /* フィーチャーカードアイコン: 回転 */ .feature-icon { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), background-color 0.3s ease; } .group:hover .feature-icon { transform: rotate(6deg) scale(1.08); }