/* LPつくるん アニメーションプリセット 10種
 * data-anim="<name>" 属性で発火。
 * data-anim-delay="ms", data-anim-duration="ms", data-anim-once="true" 可
 * IntersectionObserverで .in-view クラス付与時に再生する設計。
 */

/* =============================================
 * View Transitions API（ネイティブ遷移）
 * Chrome 126+/Edge 126+ でページ遷移が自動的にクロスフェード
 * 非対応ブラウザは素通り（副作用なし）
 * ============================================= */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: .25s both vt-fade-out; }
::view-transition-new(root){ animation: .32s cubic-bezier(.2,.8,.2,1) both vt-fade-in; }
@keyframes vt-fade-out{to{opacity:0;transform:translateY(-8px);}}
@keyframes vt-fade-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

:root{
  --anim-duration:700ms;
  --anim-ease:cubic-bezier(.22,.61,.36,1);
}

[data-anim]{
  opacity:0;
  will-change:transform,opacity;
  animation-duration:var(--anim-duration);
  animation-timing-function:var(--anim-ease);
  animation-fill-mode:both;
  animation-play-state:paused;
}
[data-anim].in-view{animation-play-state:running;}

/* 1. fade-in */
[data-anim="fade-in"]{animation-name:a-fade;}
@keyframes a-fade{from{opacity:0;}to{opacity:1;}}

/* 2. fade-up */
[data-anim="fade-up"]{animation-name:a-fade-up;}
@keyframes a-fade-up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* 3. fade-down */
[data-anim="fade-down"]{animation-name:a-fade-down;}
@keyframes a-fade-down{from{opacity:0;transform:translateY(-24px);}to{opacity:1;transform:none;}}

/* 4. slide-left */
[data-anim="slide-left"]{animation-name:a-slide-left;}
@keyframes a-slide-left{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}}

/* 5. slide-right */
[data-anim="slide-right"]{animation-name:a-slide-right;}
@keyframes a-slide-right{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:none;}}

/* 6. zoom-in */
[data-anim="zoom-in"]{animation-name:a-zoom;}
@keyframes a-zoom{from{opacity:0;transform:scale(.88);}to{opacity:1;transform:none;}}

/* 7. pop */
[data-anim="pop"]{animation-name:a-pop;animation-timing-function:cubic-bezier(.2,1.6,.4,1);}
@keyframes a-pop{0%{opacity:0;transform:scale(.6);}60%{opacity:1;transform:scale(1.05);}100%{transform:scale(1);}}

/* 8. rise-blur */
[data-anim="rise-blur"]{animation-name:a-rise-blur;}
@keyframes a-rise-blur{from{opacity:0;transform:translateY(20px);filter:blur(8px);}to{opacity:1;transform:none;filter:none;}}

/* 9. tilt-in */
[data-anim="tilt-in"]{animation-name:a-tilt;animation-duration:900ms;}
@keyframes a-tilt{from{opacity:0;transform:perspective(900px) rotateX(30deg) translateY(30px);}to{opacity:1;transform:none;}}

/* 10. flip-y */
[data-anim="flip-y"]{animation-name:a-flip;animation-duration:900ms;}
@keyframes a-flip{from{opacity:0;transform:perspective(900px) rotateY(-60deg);}to{opacity:1;transform:none;}}

/* ===== 常時ループアニメ（装飾用） ===== */

/* float（浮遊） */
.anim-float{animation:a-float 4s ease-in-out infinite;}
@keyframes a-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* pulse-ring（CTAハイライト） */
.anim-pulse-ring{position:relative;}
.anim-pulse-ring::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid currentColor;opacity:.4;animation:a-pulse-ring 1.8s ease-out infinite;pointer-events:none;}
@keyframes a-pulse-ring{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.25);opacity:0;}}

/* shimmer（ローディング） */
.anim-shimmer{background:linear-gradient(90deg,#eef0f7 0%,#f8faff 50%,#eef0f7 100%);background-size:200% 100%;animation:a-shimmer 1.4s linear infinite;}
@keyframes a-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* typing cursor */
.anim-caret::after{content:"|";margin-left:2px;color:currentColor;animation:a-caret 1s step-end infinite;}
@keyframes a-caret{50%{opacity:0;}}

/* gradient-shift（バックグラウンドグラデ動） */
.anim-gradient-bg{background-size:200% 200%;animation:a-grad 10s ease infinite;}
@keyframes a-grad{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}

/* stagger delays（子要素に順次delay） */
.anim-stagger>*[data-anim]{animation-delay:calc(var(--stagger-base,80ms) * var(--i,0));}
.anim-stagger>*:nth-child(1){--i:1;}
.anim-stagger>*:nth-child(2){--i:2;}
.anim-stagger>*:nth-child(3){--i:3;}
.anim-stagger>*:nth-child(4){--i:4;}
.anim-stagger>*:nth-child(5){--i:5;}
.anim-stagger>*:nth-child(6){--i:6;}
.anim-stagger>*:nth-child(7){--i:7;}
.anim-stagger>*:nth-child(8){--i:8;}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  [data-anim]{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;}
  .anim-float,.anim-pulse-ring::after,.anim-shimmer,.anim-caret::after,.anim-gradient-bg{animation:none!important;}
}

/* =============================================
 * Scroll-driven animations (WX差別化)
 * ネイティブCSS scroll-timeline 対応ブラウザで有効
 * 非対応は既存 IntersectionObserver 版にフォールバック
 * ============================================= */
@supports (animation-timeline:view()){
  [data-sda="reveal"]{animation:sda-reveal linear both;animation-timeline:view();animation-range:entry 10% cover 30%;}
  @keyframes sda-reveal{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
  [data-sda="parallax"]{animation:sda-parallax linear both;animation-timeline:view();animation-range:cover;}
  @keyframes sda-parallax{from{transform:translateY(60px);}to{transform:translateY(-60px);}}
  [data-sda="scale-in"]{animation:sda-scale linear both;animation-timeline:view();animation-range:entry 0% cover 40%;}
  @keyframes sda-scale{from{transform:scale(.88);opacity:.6;}to{transform:scale(1);opacity:1;}}
  [data-sda="progress"]{animation:sda-progress linear both;animation-timeline:scroll(root);transform-origin:left;}
  @keyframes sda-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}

/* =============================================
 * Micro-interactions（売れる体験の細部）
 * ============================================= */

/* Ripple - ボタンクリック時の波紋 */
.btn-ripple{position:relative;overflow:hidden;isolation:isolate;}
.btn-ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.45) 0%,transparent 40%);opacity:0;transition:opacity .6s;pointer-events:none;z-index:-1;}
.btn-ripple:active::after{opacity:1;transition:opacity .05s;}

/* Magnetic hover - 慣性のあるhover */
.mag-hover{transition:transform .25s cubic-bezier(.2,.8,.2,1.05);}
.mag-hover:hover{transform:translateY(-3px) scale(1.01);}
.mag-hover:active{transform:translateY(-1px) scale(.99);transition-duration:.08s;}

/* Success burst - 成功フィードバック */
.burst{position:relative;}
.burst::before,.burst::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;opacity:0;pointer-events:none;}
.burst.fire::before{animation:burst-ring .7s ease-out forwards;}
.burst.fire::after{animation:burst-ring .7s .15s ease-out forwards;}
@keyframes burst-ring{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.6);opacity:0;}}

/* Tilt - 3D傾きカード */
.tilt{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;}
.tilt:hover{transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);}

/* Underline sweep */
.link-sweep{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1);}
.link-sweep:hover{background-size:100% 1px;}

/* Press - tap-to-scale */
.press{transition:transform .08s;}
.press:active{transform:scale(.97);}

/* Skeleton loader */
.skeleton{background:linear-gradient(90deg,#eef0f7 0%,#f8faff 50%,#eef0f7 100%);background-size:200% 100%;animation:sk-shine 1.4s linear infinite;border-radius:8px;color:transparent!important;user-select:none;}
@keyframes sk-shine{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton *{visibility:hidden;}

/* =============================================
 * Dark mode（システム設定連動）
 * LPを読み込むだけでダーク対応、opt-out は html[data-theme="light"]
 * ============================================= */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    color-scheme:dark;
    --_dm-bg:#0b0d1f;
    --_dm-surface:#12152f;
    --_dm-surface-2:#1a1e3f;
    --_dm-border:#2a2e55;
    --_dm-text:#eef1ff;
    --_dm-text-dim:#a8adcf;
    --_dm-heading:#ffffff;
  }
  html:not([data-theme="light"]) body{background:var(--_dm-bg);color:var(--_dm-text);}
  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3{color:var(--_dm-heading);}
  /* ブランドLP系トークン上書き（--heading/--body/--border/--bg/--bg-alt 系のみ） */
  html:not([data-theme="light"]){
    --heading:var(--_dm-heading);
    --body:var(--_dm-text-dim);
    --label:var(--_dm-text);
    --border:var(--_dm-border);
    --bg:var(--_dm-surface);
    --bg-alt:var(--_dm-bg);
  }
  html:not([data-theme="light"]) img:not([data-keep-tone]){filter:brightness(.94);}
  html:not([data-theme="light"]) .skeleton{background:linear-gradient(90deg,#1a1e3f 0%,#232856 50%,#1a1e3f 100%);background-size:200% 100%;}
}
/* opt-in ダーク */
html[data-theme="dark"]{color-scheme:dark;}
html[data-theme="dark"] body{background:#0b0d1f;color:#eef1ff;}

/* =============================================
 * PLAYFUL LAYER（遊び心レイヤー）
 * 資料感を壊して"作品"にする装飾群
 * ============================================= */

/* ---- Display Typography utilities ---- */
/* 使い方: <h1 class="display-serif-en">...</h1> */
.display-serif-en{font-family:'Fraunces','Noto Serif JP',serif;font-weight:600;letter-spacing:-2.5px;font-feature-settings:"ss01","ss02";}
.display-serif-jp{font-family:'Shippori Mincho','Noto Serif JP',serif;font-weight:700;letter-spacing:0;}
.display-sans-jp{font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-weight:900;letter-spacing:-1.5px;}
.display-sans-en{font-family:'Outfit','Inter',sans-serif;font-weight:700;letter-spacing:-2px;}
.display-hand{font-family:'Caveat','Yuji Syuku',cursive;font-weight:600;letter-spacing:0;}
.display-pixel{font-family:'DotGothic16','Zen Kaku Gothic New',sans-serif;font-weight:400;letter-spacing:1px;}
.display-ornate{font-family:'Yuji Syuku','Shippori Mincho',serif;font-weight:400;letter-spacing:0;}
.kanji-hugesize{font-size:clamp(4rem,12vw,9rem);line-height:.95;letter-spacing:-.02em;}
.vertical-rl{writing-mode:vertical-rl;text-orientation:upright;}
.text-outline{-webkit-text-stroke:1.5px currentColor;color:transparent;}
.text-gradient{background:linear-gradient(90deg,var(--brand,#533afd),var(--accent,#ff6bae));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- Kinetic Typography ---- */
/* data-kinetic="word" / "char" を要素に付与、animations.js が span分割してstaggerで発火 */
[data-kinetic] .k-w,[data-kinetic] .k-c{display:inline-block;opacity:0;transform:translateY(.5em) rotate(6deg);animation:k-reveal .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k-i,0) * 40ms);}
@keyframes k-reveal{to{opacity:1;transform:none;}}
.k-scramble{font-variant-numeric:tabular-nums;}

/* ---- Marquee ---- */
/* 業種別速度: --marquee-speed CSS変数で個別調整可。デフォルト 30s。
   飲食/ウェルネス系は遅め (45s)、SaaS/marketing系は速め (24s) を推奨 */
.marquee{overflow:hidden;display:flex;gap:24px;padding:14px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.marquee-track{display:flex;gap:24px;animation:marquee var(--marquee-speed,30s) linear infinite;white-space:nowrap;will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-item{font-size:22px;font-weight:600;display:inline-flex;align-items:center;gap:10px;flex-shrink:0;letter-spacing:-.3px;}
.marquee-item::after{content:"●";color:var(--brand,#533afd);font-size:8px;margin-left:16px;}
.marquee-reverse .marquee-track{animation-direction:reverse;}
.marquee-slow{--marquee-speed:45s;}
.marquee-fast{--marquee-speed:18s;}

/* ---- Blob morphing（背景モーフィング） ---- */
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;animation:blob-morph 14s ease-in-out infinite;will-change:transform,border-radius;}
@keyframes blob-morph{
  0%,100%{border-radius:50% 50% 50% 50%;transform:translate(0,0) scale(1);}
  25%{border-radius:60% 40% 55% 45%;transform:translate(20px,-18px) scale(1.08);}
  50%{border-radius:45% 55% 40% 60%;transform:translate(-15px,22px) scale(.94);}
  75%{border-radius:55% 45% 60% 40%;transform:translate(18px,14px) scale(1.04);}
}
/* モバイルでは blob の filter:blur を軽量化 (GPU負荷対策) */
@media(max-width:640px){
  .blob{filter:blur(24px)!important;opacity:.45;}
  .marquee-item{font-size:16px;}
}

/* ---- Noise / grain overlay ---- */
.noise::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:240px 240px;z-index:0;}
.noise>*{position:relative;z-index:1;}

/* ---- Doodle stickers ---- */
.doodle-circle{position:relative;display:inline-block;}
.doodle-circle::after{content:"";position:absolute;inset:-12% -6%;border:2.5px solid var(--brand,#533afd);border-radius:50%;transform:rotate(-3deg) skewX(-8deg);opacity:0;animation:doodle-draw .7s .3s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes doodle-draw{0%{opacity:0;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);}100%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}}
.doodle-arrow{position:relative;}
.doodle-arrow::before{content:"↓";position:absolute;right:-40px;top:0;color:var(--brand,#533afd);font-size:32px;transform:rotate(15deg);font-family:'Caveat',cursive;font-weight:700;}
.doodle-star{position:relative;}
.doodle-star::before{content:"✦";position:absolute;color:#ffb400;font-size:18px;left:-20px;top:-8px;animation:a-float 3s ease-in-out infinite;}
.doodle-star::after{content:"✦";position:absolute;color:#ffb400;font-size:12px;right:-14px;bottom:-4px;animation:a-float 3s .8s ease-in-out infinite;}
.doodle-highlight{background:linear-gradient(transparent 60%,rgba(255,220,0,.5) 60%);padding:0 4px;}
.doodle-strike{position:relative;}
.doodle-strike::after{content:"";position:absolute;left:-4%;right:-4%;top:48%;height:3px;background:var(--brand,#533afd);transform:rotate(-2deg);opacity:0;animation:strike-in .5s .4s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes strike-in{from{transform:rotate(-2deg) scaleX(0);transform-origin:left;opacity:1;}to{transform:rotate(-2deg) scaleX(1);transform-origin:left;opacity:1;}}

/* ---- Wobble / squash-stretch ---- */
.wobble{animation:wobble 2.4s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes wobble{0%,100%{transform:rotate(0) scale(1,1);}15%{transform:rotate(-3deg) scale(1.02,.97);}30%{transform:rotate(2deg) scale(.98,1.03);}45%{transform:rotate(-2deg) scale(1.01,.99);}60%{transform:rotate(1deg) scale(1,1);}}
.squash:hover{animation:squash .5s ease;}
@keyframes squash{0%{transform:scaleY(1) scaleX(1);}30%{transform:scaleY(.85) scaleX(1.1);}60%{transform:scaleY(1.08) scaleX(.95);}100%{transform:scaleY(1) scaleX(1);}}

/* ---- Stroke drawing（SVGパス手描き風） ---- */
.stroke-draw path,.stroke-draw line,.stroke-draw polyline{stroke-dasharray:300;stroke-dashoffset:300;animation:stroke-in 1.6s cubic-bezier(.4,0,.2,1) both;}
@keyframes stroke-in{to{stroke-dashoffset:0;}}

/* ---- Spotlight cursor（デスクトップのみ） ---- */
@media(hover:hover){
  body.has-spotlight{position:relative;}
  body.has-spotlight::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--mx,-500px) var(--my,-500px),rgba(123,108,252,.12),transparent 60%);z-index:9998;transition:background .2s;}
}

/* ---- Color wash section ---- */
.wash{background:linear-gradient(180deg,var(--wash-from,transparent),var(--wash-to,var(--bg-alt,#f8f9fc)));transition:background 1.2s;}

/* =============================================
 * IMPACT LAYER（巨大インパクト要素）
 * ============================================= */

/* 巨大ディスプレイ数字（FV背景に半透明で配置） */
.bg-numeral{position:absolute;font-family:'Outfit','Inter',sans-serif;font-weight:900;font-size:clamp(180px,30vw,420px);line-height:.85;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--brand,#533afd);opacity:.06;pointer-events:none;user-select:none;z-index:0;mix-blend-mode:multiply;}
.bg-numeral.tr{top:-20px;right:-30px;}
.bg-numeral.bl{bottom:-40px;left:-20px;}

/* 流体グラデ（mesh + animated） */
.mesh-bg{position:absolute;inset:-10%;background:
  radial-gradient(at 20% 30%,rgba(123,108,252,.55),transparent 50%),
  radial-gradient(at 80% 20%,rgba(255,107,174,.45),transparent 55%),
  radial-gradient(at 40% 80%,rgba(74,222,128,.4),transparent 50%),
  radial-gradient(at 80% 80%,rgba(255,180,0,.4),transparent 55%);
  filter:blur(40px) saturate(1.2);
  animation:mesh-drift 20s ease-in-out infinite alternate;
  pointer-events:none;z-index:0;
}
@keyframes mesh-drift{
  0%{transform:scale(1) translate(0,0);}
  50%{transform:scale(1.15) translate(-30px,20px);}
  100%{transform:scale(1.05) translate(20px,-30px);}
}
@media(max-width:640px){.mesh-bg{filter:blur(28px) saturate(1.1);}}

/* 巨大グラデーションテキスト */
.huge-gradient{font-family:'Outfit','Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-weight:900;font-size:clamp(3.5rem,9vw,7rem);line-height:1;letter-spacing:-3.5px;background:linear-gradient(135deg,#7b6cfc 0%,#ff6bae 50%,#ffb400 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:huge-shine 6s ease infinite;background-size:200% 200%;}
@keyframes huge-shine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* スクラッチ風アンダーライン（強調） */
.scratch-underline{position:relative;display:inline-block;}
.scratch-underline::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-8px;height:18px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'><path d='M2 14 Q 50 2 100 12 T 198 8' stroke='%23533afd' stroke-width='4' fill='none' stroke-linecap='round'/></svg>");background-size:100% 100%;background-repeat:no-repeat;}

/* =========================================================
 * もと拡張: 6カテゴリ完全対応（2026-04-18追加・ADD-ONLY）
 * 参照：knowledge/animation.md
 * ========================================================= */

/* ===== ① ローディング系 ===== */
.load-spinner{display:inline-block;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

.load-dots{display:inline-flex;gap:4px;align-items:center;height:18px;}
.load-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;animation:dot-bounce 1.2s infinite ease-in-out;}
.load-dots span:nth-child(2){animation-delay:0.15s;}
.load-dots span:nth-child(3){animation-delay:0.3s;}
@keyframes dot-bounce{0%,80%,100%{transform:scale(0.6);opacity:0.4;}40%{transform:scale(1);opacity:1;}}

.load-skeleton{display:block;background:linear-gradient(90deg,#e8edf5 0%,#f4f7fb 50%,#e8edf5 100%);background-size:200% 100%;border-radius:8px;animation:sk-shimmer 1.4s linear infinite;}
.load-skeleton.line{height:12px;margin:6px 0;}
.load-skeleton.line-sm{height:8px;width:60%;}
.load-skeleton.box{height:120px;}
@keyframes sk-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.load-progress{display:block;width:100%;height:6px;background:#e8edf5;border-radius:100px;overflow:hidden;}
.load-progress::before{content:"";display:block;height:100%;width:var(--p,0%);background:var(--brand,#533afd);border-radius:100px;transition:width 0.4s cubic-bezier(.4,0,.2,1);}

/* ===== ② スクロール連動系 追加 ===== */
[data-anim="reveal-right"]{animation-name:a-reveal-right;animation-duration:900ms;}
@keyframes a-reveal-right{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}

[data-anim="slide-up"]{animation-name:a-slide-up;}
@keyframes a-slide-up{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}

[data-anim="split-in"]{animation-name:a-split-in;animation-duration:900ms;}
@keyframes a-split-in{from{opacity:0;transform:translateY(20px) rotateX(-30deg);}to{opacity:1;transform:none;}}

/* スクロール進捗バー（記事等） */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--brand,#533afd);z-index:999;transition:width 0.1s linear;width:0;}

/* スクロールインジケーター（FV下部矢印） */
.scroll-indicator{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:22px;height:36px;border:2px solid currentColor;border-radius:100px;opacity:0.5;}
.scroll-indicator::before{content:"";position:absolute;top:6px;left:50%;width:3px;height:8px;background:currentColor;border-radius:100px;transform:translateX(-50%);animation:scroll-bounce 1.8s infinite;}
@keyframes scroll-bounce{0%,20%{transform:translate(-50%,0);opacity:1;}80%,100%{transform:translate(-50%,12px);opacity:0;}}

/* ===== ③ ホバー/インタラクション系 ===== */
.hover-lift{transition:transform 0.2s cubic-bezier(.4,0,.2,1),box-shadow 0.2s;}
.hover-lift:hover{transform:translateY(-3px);}

.hover-scale{transition:transform 0.3s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.hover-scale:hover{transform:scale(1.03);}
.hover-scale img{transition:transform 0.4s cubic-bezier(.4,0,.2,1);}
.hover-scale:hover img{transform:scale(1.08);}

.hover-color{transition:color 0.2s;}
.hover-color:hover{color:var(--brand,#533afd);}

.hover-shadow{transition:box-shadow 0.25s,transform 0.25s;}
.hover-shadow:hover{box-shadow:0 20px 40px -18px rgba(50,50,93,.25),0 10px 20px -10px rgba(0,0,0,.1);transform:translateY(-2px);}

.hover-rotate{transition:transform 0.3s cubic-bezier(.4,0,.2,1);}
.hover-rotate:hover{transform:rotate(12deg);}

.hover-glow{position:relative;transition:box-shadow 0.3s;}
.hover-glow:hover{box-shadow:0 0 0 3px rgba(83,58,253,.25),0 12px 28px -10px rgba(83,58,253,.4);}

/* ===== ④ トランジション系 ===== */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;}
.modal[data-state="open"]{display:flex;animation:modal-fade-in 0.25s both;}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(4px);}
.modal-content{position:relative;background:#fff;border-radius:16px;max-width:560px;width:100%;padding:32px;box-shadow:0 30px 60px -20px rgba(0,0,0,.3);animation:modal-zoom-in 0.3s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes modal-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes modal-zoom-in{from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;}}

details.accordion{border:1px solid #e2e8f0;border-radius:10px;margin:8px 0;background:#fff;overflow:hidden;}
details.accordion summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;}
details.accordion summary::-webkit-details-marker{display:none;}
details.accordion summary::after{content:"+";font-size:20px;transition:transform 0.25s;color:var(--brand,#533afd);}
details.accordion[open] summary::after{transform:rotate(45deg);}
details.accordion[open] .accordion-body{animation:acc-slide 0.3s ease;}
@keyframes acc-slide{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.accordion-body{padding:0 20px 18px;color:#475569;font-size:0.93rem;line-height:1.75;}

.tabs-wrap{border-radius:10px;overflow:hidden;}
.tabs-head{display:flex;border-bottom:1px solid #e2e8f0;}
.tabs-head button{flex:1;background:none;border:none;padding:12px 16px;font-weight:600;color:#64748b;cursor:pointer;position:relative;transition:color 0.2s;}
.tabs-head button[aria-selected="true"]{color:var(--brand,#533afd);}
.tabs-head button::after{content:"";position:absolute;bottom:-1px;left:50%;right:50%;height:2px;background:var(--brand,#533afd);transition:left 0.25s,right 0.25s;}
.tabs-head button[aria-selected="true"]::after{left:0;right:0;}
.tabs-panel{display:none;padding:20px;}
.tabs-panel[data-active="true"]{display:block;animation:a-fade 0.3s;}

/* ===== ⑤ フィードバック系 ===== */
.fx-shake{animation:fx-shake 0.4s cubic-bezier(.36,.07,.19,.97);}
@keyframes fx-shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}

.fx-check{width:48px;height:48px;border-radius:50%;background:#10b981;display:inline-grid;place-items:center;animation:fx-check-pop 0.4s cubic-bezier(.2,1.4,.4,1);}
.fx-check svg{width:24px;height:24px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:fx-check-draw 0.4s 0.1s ease-out forwards;}
@keyframes fx-check-pop{from{transform:scale(0);}to{transform:scale(1);}}
@keyframes fx-check-draw{to{stroke-dashoffset:0;}}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);background:#0f172a;color:#fff;padding:12px 22px;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 12px 32px -8px rgba(0,0,0,.3);z-index:1100;opacity:0;transition:transform 0.35s cubic-bezier(.2,1.2,.4,1),opacity 0.3s;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.toast.success{background:#10b981;}
.toast.error{background:#dc2626;}

.input-error{border-color:#dc2626!important;background:#fef2f2;}
.input-ok{border-color:#10b981!important;}
.input-error-msg{color:#dc2626;font-size:12px;margin-top:4px;}

/* ===== ⑥ マイクロインタラクション ===== */
[data-countup]{font-variant-numeric:tabular-nums;}

.toggle-switch{appearance:none;width:40px;height:22px;background:#cbd5e1;border-radius:100px;position:relative;cursor:pointer;transition:background 0.25s;}
.toggle-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform 0.25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px rgba(0,0,0,.2);}
.toggle-switch:checked{background:var(--brand,#533afd);}
.toggle-switch:checked::after{transform:translateX(18px);}

/* accessibility fallback */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}
  .load-spinner,.load-dots span,.load-skeleton,.scroll-indicator::before,.mesh-bg,.huge-gradient{animation:none!important;}
}