/* ==========================================
   TERASU Lab — Stylesheet
   TERASU本体（terasu.scale-group.co.jp）デザインシステム準拠
   ========================================== */

:root {
  /* TERASU本体カラー */
  --bg: #08080a;
  --w: #fff;
  --w2: rgba(255, 255, 255, .5);
  --w3: rgba(255, 255, 255, .22);
  --w4: rgba(255, 255, 255, .07);
  --w-soft: rgba(255, 255, 255, .55);
  --w-text: rgba(255, 255, 255, .85);

  /* TERASU本体グロー（暖色アクセント） */
  --glow: rgba(255, 200, 120, .12);
  --glow2: rgba(255, 180, 80, .08);
  --gold: rgba(255, 210, 140, 1);
  --gold-soft: rgba(255, 210, 140, .4);
  --gold-bg: rgba(255, 200, 120, .15);

  /* フォント（TERASU本体準拠） */
  --ff: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --fd: 'Cormorant Garamond', serif;

  /* レイアウト */
  --container: 1200px;
  --transition: .3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--ff);
  color: var(--w3);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.85;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; display: block; }
::selection { background: var(--gold-bg); color: #fff; }

/* ==========================================
   HEADER
   ========================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  padding: .85rem clamp(1.5rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 8, 10, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--w4);
}

.header-inner {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--fd);
}

.brand-logo {
  width: 26px;
  height: 26px;
}

.brand-text {
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--w-text);
  font-weight: 400;
}

.brand-accent {
  font-style: italic;
  color: var(--w2);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .12em;
}

.nav-top {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-top a {
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--w-text);
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
  padding: .5rem .9rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

.nav-top a:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, .04);
}

.nav-top .nav-all {
  font-family: var(--fd);
  font-style: italic;
  color: var(--w2);
  margin-left: .5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--w4);
  border-radius: 0 6px 6px 0;
}

.nav-top .nav-all:hover {
  color: var(--gold);
  background: transparent;
}

@media (max-width: 1100px) {
  .nav-top { display: none; }
}

/* ==========================================
   HERO
   ========================================== */

.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 9rem clamp(1.5rem, 5vw, 3rem) 5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  top: -120px;
  right: -120px;
  pointer-events: none;
  animation: heroGlow 6s ease-in-out infinite;
}

.hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow2), transparent 70%);
  bottom: -100px;
  left: -100px;
  pointer-events: none;
}

@keyframes heroGlow {
  0%, 100% { transform: scale(.95); opacity: .65; }
  50% { transform: scale(1.05); opacity: 1; }
}

.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  z-index: 1;
}

.hero-eyebrow {
  font-family: var(--fd);
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--w2);
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-weight: 400;
}

.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--w3);
}

.hero-title {
  font-family: var(--fd);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 300;
  color: var(--w);
  line-height: 1.2;
  letter-spacing: .015em;
  margin-bottom: 1.75rem;
  max-width: 900px;
}

.hero-title em {
  font-style: italic;
  color: var(--w2);
  font-weight: 300;
}

.hero-desc {
  font-size: .82rem;
  color: var(--w-soft);
  line-height: 2.1;
  max-width: 540px;
  margin-bottom: 3.5rem;
  letter-spacing: .01em;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--w4);
  max-width: 720px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.meta-label {
  font-family: var(--fd);
  font-size: .5rem;
  font-weight: 400;
  color: var(--w3);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.meta-value {
  font-family: var(--fd);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--w);
  letter-spacing: .02em;
  line-height: 1;
}

/* ==========================================
   CATEGORIES
   ========================================== */

.categories {
  padding: 0 clamp(1.5rem, 5vw, 3rem) clamp(5rem, 10vw, 8rem);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
}

.loading {
  text-align: center;
  padding: 6rem 0;
  color: var(--w3);
  font-family: var(--fd);
  font-size: .8rem;
  letter-spacing: .15em;
  font-style: italic;
}

.category {
  margin-bottom: clamp(5rem, 8vw, 7rem);
  scroll-margin-top: 80px;
}

.category-header {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--w4);
}

.category-num {
  font-family: var(--fd);
  font-size: .58rem;
  font-weight: 400;
  color: var(--w3);
  letter-spacing: .25em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.category-title {
  font-family: var(--fd);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--w);
  letter-spacing: .03em;
  flex: 1;
}

.category-title-en {
  font-family: var(--fd);
  font-style: italic;
  color: var(--w3);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing: .04em;
  margin-left: .9rem;
}

.category-count {
  font-family: var(--fd);
  font-size: .55rem;
  font-weight: 400;
  color: var(--w3);
  letter-spacing: .25em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.category-desc {
  color: var(--w-soft);
  font-size: .78rem;
  line-height: 2;
  margin: 1.75rem 0 2.5rem;
  max-width: 720px;
  letter-spacing: .01em;
}

/* ==========================================
   CATEGORY HEADER LINK (TOP page)
   ========================================== */

.category-title-link {
  display: inline;
  color: inherit;
  transition: color .2s;
}

.category-title-link:hover {
  color: var(--gold);
}

.category-title-link:hover .category-title-en {
  color: rgba(255, 210, 140, .6);
}

/* ==========================================
   PAGE HEAD (category.html)
   ========================================== */

.page-head {
  position: relative;
  padding: 9rem clamp(1.5rem, 5vw, 3rem) 4rem;
  overflow: hidden;
}

.page-head::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  top: -150px;
  right: -150px;
  pointer-events: none;
  animation: heroGlow 6s ease-in-out infinite;
}

.page-head-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  z-index: 1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fd);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--w3);
  margin-bottom: 2rem;
}

.breadcrumb a {
  color: var(--w3);
  transition: color .2s;
}

.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { color: var(--w4); }
.breadcrumb-current { color: var(--w-text); }

.page-eyebrow {
  font-family: var(--fd);
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--w2);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-weight: 400;
}

.page-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--w3);
}

.page-title {
  font-family: var(--fd);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300;
  color: var(--w);
  line-height: 1.15;
  letter-spacing: .02em;
  margin-bottom: 1.5rem;
}

.page-title-en {
  font-family: var(--fd);
  font-style: italic;
  color: var(--w3);
  font-weight: 300;
  font-size: .55em;
  letter-spacing: .04em;
  margin-left: 1rem;
  display: inline-block;
}

.page-desc {
  font-size: .85rem;
  color: var(--w-soft);
  line-height: 2.05;
  max-width: 720px;
  letter-spacing: .01em;
}

/* ==========================================
   CATEGORY FOOTER (TOP page)
   ========================================== */

.category-footer {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.view-all {
  position: relative;
  font-family: var(--fd);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--w);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2.2rem;
  background: linear-gradient(135deg, rgba(255,210,140,.08), rgba(255,210,140,.02));
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  transition: var(--transition);
  overflow: hidden;
  min-width: 280px;
  justify-content: space-between;
}

.view-all::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold), rgba(255,180,100,1));
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}

.view-all-label,
.view-all-arrow {
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.view-all-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--gold-bg);
  color: var(--gold);
}

.view-all:hover {
  border-color: var(--gold);
  color: #1a1208;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,210,140,.18);
}

.view-all:hover::before {
  opacity: 1;
}

.view-all:hover .view-all-arrow {
  background: rgba(0,0,0,.15);
  color: #1a1208;
  transform: translateX(4px);
}

/* ==========================================
   ITEMS GRID
   ========================================== */

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px;
  background: var(--w4);
  border: 1px solid var(--w4);
}

.item-card {
  background: var(--bg);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
  min-height: 175px;
  overflow: hidden;
}

.item-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--glow2), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.item-card:hover {
  background: rgba(255, 255, 255, .015);
}

.item-card:hover::after {
  opacity: 1;
}

.item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  position: relative;
  z-index: 1;
}

.item-name {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--w);
  letter-spacing: .02em;
  line-height: 1.3;
}

/* フォントカテゴリ用: フォント名自体をそのフォントで表示（サイズ大きめ） */
.item-name-font {
  font-size: 1.55rem;
  letter-spacing: .01em;
  line-height: 1.25;
}

/* ==========================================
   FILTER BAR（カテゴリ詳細ページ・タグ絞り込み）
   ========================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--w4);
}

.filter-chip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--w4);
  color: var(--w-text);
  font-family: var(--fd);
  font-size: .68rem;
  letter-spacing: .14em;
  padding: .45rem .85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  font-weight: 400;
}

.filter-chip:hover {
  border-color: rgba(255, 210, 140, .3);
  color: var(--gold);
}

.filter-chip-active {
  background: var(--gold-bg);
  border-color: var(--gold-soft);
  color: var(--gold);
}

.filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  color: var(--w3);
  letter-spacing: 0;
  font-feature-settings: 'tnum';
}

.filter-chip-active .filter-count {
  color: var(--gold);
  opacity: .75;
}

.filter-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--w3);
  font-family: var(--fd);
  font-size: .85rem;
  letter-spacing: .15em;
  font-style: italic;
}

@media (max-width: 768px) {
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 1.25rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
}

/* ==========================================
   UNIVERSAL MEDIA CARD（画像/アイコン/イラスト共通）
   ========================================== */

.items-grid:has(.card-media) {
  background: transparent;
  border: none;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card-media {
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}

.card-media:hover {
  border-color: var(--border2);
  background: var(--bg3);
}

.media-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

.media-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.media-canvas:hover img {
  transform: scale(1.04);
}

.media-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.1rem .55rem;
}

.media-name {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 400;
  color: var(--w);
  letter-spacing: .02em;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.media-name-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  letter-spacing: .04em;
  font-feature-settings: 'tnum';
}

.media-actions {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
}

.icon-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--w4);
  color: var(--w-text);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  text-decoration: none;
}

.icon-btn:hover {
  border-color: var(--gold-soft);
  color: var(--gold);
  background: rgba(255, 200, 120, .06);
}

.icon-btn-mini {
  width: 26px;
  height: 26px;
}

.item-head-actions {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
}

.media-note {
  padding: 0 1.1rem .85rem;
  font-size: .72rem;
  color: var(--w-soft);
  line-height: 1.85;
  letter-spacing: .01em;
}

.media-note-tight {
  padding-top: 0;
  font-family: var(--fd);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--w3);
}

.card-media .item-meta {
  padding: 0 1.1rem 1rem;
  margin: 0;
}

/* 画像系: aspect-ratio をやや低く */
.card-media-image .media-canvas { aspect-ratio: 16 / 10; cursor: zoom-in; }

/* アイコン: 正方形・大きく中央表示 */
.card-media-icon .media-canvas {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  cursor: pointer;
  transition: background .2s ease;
}

.card-media-icon .media-canvas:hover {
  background: rgba(255, 200, 120, .04);
}

.card-media-icon .media-canvas svg {
  color: var(--w);
  width: 44px;
  height: 44px;
  transition: color .25s ease, transform .25s ease;
}

.card-media-icon .media-canvas:hover svg {
  color: var(--gold);
  transform: scale(1.08);
}

.items-grid:has(.card-media-icon) {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}

/* イラスト: 視認性重視・ニュートラルダーク背景 + ゴールドのアクセント */
.card-media-illust .media-canvas {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at top right, rgba(255, 200, 120, .14), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255, 200, 120, .06), transparent 60%),
    linear-gradient(135deg, #15161b, #1c1d24);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  position: relative;
  overflow: hidden;
}

.card-media-illust .media-canvas::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
  border-radius: 2px;
}

.card-media-illust .media-canvas svg {
  width: 100%;
  height: 100%;
  max-height: 280px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(255, 210, 140, .25));
}

/* 参考HP: SANKOU!風・スクショ大表示 + ホバーで詳細オーバーレイ */
.items-grid:has(.card-inspiration) {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
}

.card-inspiration {
  border: 1px solid var(--border);
  background: var(--bg2);
  overflow: hidden;
}

.card-inspiration .media-canvas {
  aspect-ratio: 16 / 10;
  background: var(--bg3);
  position: relative;
  cursor: pointer;
  display: block;
}

.card-inspiration .media-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .5s ease;
}

.card-inspiration .media-canvas:hover img {
  transform: scale(1.03);
}

/* スクショ上のホバーオーバーレイ */
.inspiration-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 10, .35), rgba(8, 8, 10, .92) 60%);
  opacity: 0;
  transition: opacity .35s ease;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  pointer-events: none;
}

.card-inspiration .media-canvas:hover .inspiration-overlay,
.card-inspiration .media-canvas:focus-visible .inspiration-overlay {
  opacity: 1;
}

.inspiration-overlay-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.hp-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.hp-highlights li {
  font-family: var(--fd);
  font-size: .8rem;
  font-style: italic;
  color: var(--w);
  letter-spacing: .02em;
  padding-left: 1rem;
  position: relative;
  line-height: 1.55;
}

.hp-highlights li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
}

.hp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.hp-tags .item-tag {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  color: var(--w);
}

.hp-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fd);
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  align-self: flex-start;
  padding-top: .35rem;
  border-top: 1px solid rgba(255, 210, 140, .25);
}

/* スクショ下のメタ（常時表示） */
.inspiration-foot {
  padding: 1rem 1.1rem 1rem;
}

/* サムネ上の会社名ラベル（常時表示・サムネ未読込でも識別可） */
.inspiration-label-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.inspiration-label-name {
  display: inline-block;
  background: rgba(8, 8, 10, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .4rem .8rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-label-industry {
  display: inline-block;
  background: rgba(255, 210, 140, .9);
  color: #08080a;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .25rem .6rem;
  border-radius: 999px;
  text-transform: uppercase;
}

/* サムネ読込失敗時のフォールバック（ホスト名すら見えない場合に名前を中央に大表示） */
.inspiration-fallback-name {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a22, #15161b);
  color: rgba(255, 210, 140, .9);
  font-family: var(--fd);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-align: center;
  padding: 1rem;
  z-index: 1;
}

.inspiration-canvas.img-fallback .inspiration-fallback-name {
  display: flex;
}

/* ===== UI Pattern Card (UIデザイン辞書) ===== */
.items-grid:has(.card-ui-pattern) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.card-ui-pattern {
  background: #fafafa;
  border: 1px solid #dcdce4;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex;
  flex-direction: column;
}
.card-ui-pattern:hover {
  border-color: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.card-ui-pattern { cursor: pointer; }

/* === UI Pattern Mini helpers (元サイト互換) === */
.ui-pat-preview .mini { font-family: inherit; font-size: 10px; color: #555566; }
.ui-pat-preview .mini * { box-sizing: border-box; }
.ui-pat-preview .mini-btn { display: inline-block; padding: 4px 12px; background: #4f46e5; color: #fff; border-radius: 4px; font-size: 9px; font-weight: 600; }
.ui-pat-preview .mini-btn-outline { display: inline-block; padding: 3px 11px; border: 1px solid #c8c8d2; color: #555566; border-radius: 4px; font-size: 9px; }
.ui-pat-preview .mini-btn-ghost { display: inline-block; padding: 4px 12px; color: #4f46e5; font-size: 9px; font-weight: 500; }
.ui-pat-preview .mini-input { display: block; width: 100%; padding: 4px 8px; background: #fff; border: 1px solid #dcdce4; border-radius: 3px; color: #333; font-size: 9px; }
.ui-pat-preview .mini-bar { height: 4px; background: #ececf0; border-radius: 2px; overflow: hidden; }
.ui-pat-preview .mini-bar-fill { height: 100%; border-radius: 2px; }
.ui-pat-preview .mini-avatar { width: 24px; height: 24px; border-radius: 50%; background: #4f46e5; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }
.ui-pat-preview .mini-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 8px; font-weight: 600; }
.ui-pat-preview .mini-card { background: #fff; border: 1px solid #dcdce4; border-radius: 6px; padding: 8px; width: 100%; }
.ui-pat-preview .mini-divider { border: none; border-top: 1px solid #dcdce4; margin: 4px 0; }
.ui-pat-preview .mini-skeleton { background: linear-gradient(90deg, #ececf0 25%, #dcdce4 50%, #ececf0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 3px; }
.ui-pat-preview .material-icons-outlined { font-family: 'Material Icons Outlined'; vertical-align: middle; font-size: 18px; color: #555566; }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* === Layout pattern animations === */
@keyframes lp-fade-up {
  0%, 10% { opacity: 0; transform: translateY(10px); }
  30%, 70% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes lp-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .55); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); transform: scale(1.05); }
}
@keyframes lp-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes lp-slide-in {
  0%, 12% { transform: translateX(-105%); }
  35%, 65% { transform: translateX(0); }
  88%, 100% { transform: translateX(-105%); }
}
@keyframes lp-tab-switch {
  0%, 30% { transform: translateX(0); }
  35%, 65% { transform: translateX(100%); }
  70%, 100% { transform: translateX(200%); }
}
@keyframes lp-bar-fill {
  0%, 5% { width: 0; }
  50%, 80% { width: 100%; }
  95%, 100% { width: 0; }
}
@keyframes lp-counter {
  0%, 5% { content: '0'; }
  10% { content: '120'; }
  20% { content: '300'; }
  35% { content: '600'; }
  50%, 80% { content: '1000+'; }
}
@keyframes lp-zoom-in-out {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes lp-arrow-z {
  0%, 5% { stroke-dashoffset: 280; }
  50%, 70% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: -280; }
}
@keyframes lp-stagger-fade {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  30%, 70% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes lp-flash {
  0%, 60%, 100% { background-color: var(--surface); }
  10%, 50% { background-color: rgba(79, 70, 229, .12); }
}
@keyframes lp-acc-toggle {
  0%, 30% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
  40%, 70% { max-height: 18px; opacity: 1; padding-top: 5px; padding-bottom: 5px; }
  80%, 100% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
}
@keyframes lp-modal-in {
  0%, 12% { opacity: 0; transform: scale(.85) translateY(10px); }
  30%, 70% { opacity: 1; transform: scale(1) translateY(0); }
  88%, 100% { opacity: 0; transform: scale(.85) translateY(10px); }
}
@keyframes lp-input-focus {
  0%, 25%, 75%, 100% { border-color: #d4d4d8; box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
  35%, 65% { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
}
@keyframes lp-hover-lift {
  0%, 100% { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
  40%, 70% { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,.12); }
}

/* helpers */
.lp-anim-fadeup { animation: lp-fade-up 3s ease-in-out infinite; }
.lp-anim-cta { animation: lp-cta-pulse 2.2s ease-in-out infinite; }
.lp-anim-marquee { animation: lp-marquee 8s linear infinite; }
.lp-anim-slide { animation: lp-slide-in 3.6s cubic-bezier(.2,.6,.2,1) infinite; }
.lp-anim-bar { animation: lp-bar-fill 3.5s ease-in-out infinite; }
.lp-anim-zoom { animation: lp-zoom-in-out 4s ease-in-out infinite; }
.lp-anim-stagger > * { animation: lp-stagger-fade 3.2s ease-in-out infinite; }
.lp-anim-stagger > *:nth-child(2) { animation-delay: .15s; }
.lp-anim-stagger > *:nth-child(3) { animation-delay: .3s; }
.lp-anim-stagger > *:nth-child(4) { animation-delay: .45s; }
.lp-anim-flash { animation: lp-flash 4s ease-in-out infinite; }
.lp-anim-acc-body { animation: lp-acc-toggle 4s ease-in-out infinite; overflow: hidden; }
.lp-anim-modal { animation: lp-modal-in 4s ease-in-out infinite; }
.lp-anim-input { animation: lp-input-focus 3s ease-in-out infinite; }
.lp-anim-lift { animation: lp-hover-lift 3.4s ease-in-out infinite; }

@keyframes lp-nav-indicator {
  0%, 15%   { left: 0%; width: 18%; }
  25%, 40%  { left: 22%; width: 18%; }
  50%, 65%  { left: 44%; width: 18%; }
  75%, 90%  { left: 66%; width: 18%; }
  100%      { left: 0%; width: 18%; }
}
.lp-anim-nav-ind {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #4f46e5;
  border-radius: 2px;
  animation: lp-nav-indicator 5s ease-in-out infinite;
}
@keyframes lp-mega-drop {
  0%, 20%   { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  35%, 75%  { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-6px); }
}
.lp-anim-mega { animation: lp-mega-drop 4s ease-in-out infinite; transform-origin: top center; }

@keyframes lp-arrow-f {
  0%, 5%   { stroke-dashoffset: 320; }
  55%, 75% { stroke-dashoffset: 0; }
  95%,100% { stroke-dashoffset: -320; }
}
@keyframes lp-toc-active {
  0%, 15%   { top: 0%; }
  25%, 40%  { top: 25%; }
  50%, 65%  { top: 50%; }
  75%, 90%  { top: 75%; }
  100%      { top: 0%; }
}
.lp-anim-toc-ind {
  position: absolute;
  left: 0;
  width: 2px;
  height: 25%;
  background: #4f46e5;
  border-radius: 2px;
  animation: lp-toc-active 5s ease-in-out infinite;
}

.ui-pat-preview {
  /* 元サイトのライトテーマ CSS変数をローカルにスコープ */
  --bg: #f0f0f4;
  --surface: #ffffff;
  --surface2: #f7f7fa;
  --surface3: #ececf0;
  --border: #dcdce4;
  --border2: #c8c8d2;
  --text: #333333;
  --text2: #555566;
  --text3: #888898;
  --accent: #4f46e5;
  --accent2: #6366f1;
  --accent-glow: rgba(79, 70, 229, .08);
  --green: #16a34a;
  --orange: #d97706;
  --red: #dc2626;
  --cyan: #0891b2;
  --pink: #db2777;
  --purple: #9333ea;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  background: #f7f7fa;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-bottom: 1px solid #dcdce4;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  overflow: hidden;
}
.ui-pat-preview .mini { width: 100%; max-width: 100%; }
.ui-pat-preview * { box-sizing: border-box; }

.ui-pat-info {
  padding: .85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
  color: #333;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
}
.ui-pat-head {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: flex-start;
}
.ui-pat-name {
  font-size: .95rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 .15rem;
  letter-spacing: .01em;
}
.ui-pat-en {
  font-size: .68rem;
  color: #888898;
  font-family: 'Inter', sans-serif;
  letter-spacing: .03em;
}
.ui-pat-cat {
  flex-shrink: 0;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .25rem .55rem;
  background: rgba(79, 70, 229, .12);
  color: #4f46e5;
  border-radius: 999px;
  text-transform: uppercase;
}
.ui-pat-desc {
  font-size: .73rem;
  color: #555566;
  line-height: 1.65;
  margin: 0;
}
.ui-pat-usage, .ui-pat-examples {
  font-size: .7rem;
  color: #555566;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  line-height: 1.5;
}
.ui-pat-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #888898;
  text-transform: uppercase;
  padding: .15rem .5rem;
  background: #ececf0;
  border-radius: 4px;
}
.ui-pat-example {
  font-size: .65rem;
  color: #555566;
  background: #ececf0;
  padding: .15rem .55rem;
  border-radius: 999px;
}
.card-ui-pattern .item-meta { padding-top: .25rem; }
.card-ui-pattern .item-tag {
  background: #ececf0;
  color: #555566;
  border: 1px solid #dcdce4;
  font-size: .62rem;
}

/* === UI Pattern Modal === */
.ui-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: uiModalFade .2s ease;
}
.ui-modal-overlay.active { display: flex; }
@keyframes uiModalFade { from { opacity: 0; } to { opacity: 1; } }

.ui-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  color: #333;
  animation: uiModalSlide .25s cubic-bezier(.2, .8, .4, 1);
}
@keyframes uiModalSlide {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ui-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #dcdce4;
  flex-shrink: 0;
}
.ui-modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  letter-spacing: .01em;
}
.ui-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #888898;
  cursor: pointer;
  padding: 0 .4rem;
  line-height: 1;
  border-radius: 4px;
  transition: all .15s;
}
.ui-modal-close:hover { background: #ececf0; color: #333; }

.ui-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.ui-modal-preview {
  background: #f7f7fa;
  border: 1px solid #dcdce4;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.25rem;
  min-height: 220px;
  height: auto;
}
.ui-modal-section {
  margin-bottom: 1rem;
}
.ui-modal-section h4 {
  font-size: .8rem;
  font-weight: 700;
  color: #555566;
  margin: 0 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ui-modal-section p {
  font-size: .85rem;
  color: #555566;
  line-height: 1.65;
  margin: 0;
}
.ui-modal-section ul {
  padding-left: 1.2rem;
  margin: 0;
}
.ui-modal-section ul li {
  font-size: .85rem;
  color: #555566;
  line-height: 1.7;
}
.ui-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.ui-modal-tags span {
  font-size: .7rem;
  background: rgba(79, 70, 229, .1);
  color: #4f46e5;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-weight: 500;
}

/* iframe 埋め込みカテゴリ */
.iframe-embed-wrap {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}
.iframe-embed-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 .25rem;
}
.iframe-embed-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--w3);
  text-decoration: none;
  padding: .35rem .75rem;
  border: 1px solid var(--w4);
  border-radius: 4px;
  transition: all .2s;
}
.iframe-embed-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.iframe-embed-frame {
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 600px;
  border: 1px solid var(--w4);
  border-radius: 6px;
  background: #fff;
  display: block;
}

.inspiration-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
}

.inspiration-name-block {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  flex: 1;
}

.inspiration-industry {
  display: inline-block;
  align-self: flex-start;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  padding: .2rem .55rem;
  background: rgba(255, 210, 140, .12);
  color: rgba(255, 210, 140, .9);
  border: 1px solid rgba(255, 210, 140, .25);
  border-radius: 999px;
  text-transform: uppercase;
}

.inspiration-domain {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .04em;
  color: var(--w3);
  margin-top: .35rem;
}

/* ==========================================
   UI COMPONENT CARD
   ========================================== */

.items-grid:has(.card-uicomp) {
  background: transparent;
  border: none;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

.card-uicomp {
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui-preview {
  background: var(--bg);
  padding: 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-preview > * { width: 100%; }

/* デモ用 UI components */
.ui-demo-hero {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.ui-demo-eyebrow {
  font-family: var(--fd);
  font-size: .55rem;
  letter-spacing: .3em;
  color: var(--w2);
  text-transform: uppercase;
}

.ui-demo-title {
  font-family: var(--fd);
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--w);
  letter-spacing: .02em;
  margin: 0;
  line-height: 1.2;
}

.ui-demo-title em {
  font-style: italic;
  color: var(--gold);
}

.ui-demo-desc {
  font-size: .75rem;
  color: var(--w-soft);
  line-height: 1.85;
  margin: 0;
}

.ui-demo-btns {
  display: flex;
  gap: .5rem;
  margin-top: .35rem;
}

.ui-demo-btn-primary, .ui-demo-btn-secondary {
  font-family: var(--fd);
  font-size: .65rem;
  letter-spacing: .12em;
  padding: .55rem 1.25rem;
  border: 1px solid;
  cursor: pointer;
  text-transform: uppercase;
  transition: var(--transition);
}

.ui-demo-btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.ui-demo-btn-secondary {
  background: transparent;
  color: var(--w-text);
  border-color: var(--w4);
}

.ui-demo-pricing {
  text-align: center;
  padding: 1.25rem 1rem;
  border: 1px solid var(--w4);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  align-items: center;
}

.ui-demo-pricing-label {
  font-family: var(--fd);
  font-size: .55rem;
  letter-spacing: .25em;
  color: var(--gold);
  text-transform: uppercase;
}

.ui-demo-pricing-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 600;
  color: var(--w);
  letter-spacing: -.01em;
}

.ui-demo-pricing-price span {
  font-size: .65rem;
  color: var(--w3);
  font-weight: 400;
  margin-left: .25rem;
}

.ui-demo-pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .7rem;
  color: var(--w-soft);
  line-height: 2;
}

.ui-demo-faq {
  width: 100%;
  border-bottom: 1px solid var(--w4);
  padding-bottom: .75rem;
}

.ui-demo-faq summary {
  font-family: var(--fd);
  font-size: .85rem;
  color: var(--w);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

.ui-demo-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--gold);
  transition: transform .25s ease;
  font-size: 1.1em;
}

.ui-demo-faq[open] summary::after {
  transform: rotate(45deg);
}

.ui-demo-faq-body {
  margin-top: .65rem;
  font-size: .7rem;
  color: var(--w-soft);
  line-height: 1.85;
}

.ui-demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  text-align: center;
}

.ui-demo-stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--w);
  letter-spacing: -.02em;
  font-feature-settings: 'tnum';
}

.ui-demo-stat-num span {
  font-size: .55em;
  color: var(--w3);
  margin-left: .15em;
}

.ui-demo-stat-label {
  font-family: var(--fd);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w3);
  margin-top: .2rem;
}

/* Code Toggle */
.code-toggle {
  border-top: 1px solid var(--border);
  padding: 0 1.1rem;
}

.code-toggle summary {
  font-family: var(--fd);
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--w3);
  text-transform: uppercase;
  cursor: pointer;
  padding: .65rem 0;
  list-style: none;
}

.code-toggle summary:hover { color: var(--gold); }

.code-block {
  background: var(--bg);
  border: 1px solid var(--w4);
  padding: .8rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  line-height: 1.7;
  color: var(--w-text);
  overflow-x: auto;
  margin: 0 0 1rem;
  border-radius: 4px;
}

/* ==========================================
   ANIMATION PREVIEW (autoplay loop)
   ========================================== */

.anim-stage {
  width: 100%;
  height: 140px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--w4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.anim-stage::after {
  content: '▶ クリックで再生';
  position: absolute;
  bottom: .55rem;
  right: .65rem;
  font-family: var(--fd);
  font-size: .55rem;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}

.anim-stage:hover::after {
  opacity: 1;
}

.anim-stage-row { gap: .55rem; }

.anim-stage-glow {
  background: radial-gradient(circle, rgba(255, 200, 120, .08), rgba(255, 255, 255, .015));
}

.anim-stage-cursor {
  cursor: none;
  font-family: var(--fd);
  font-size: .85rem;
  color: var(--w-soft);
  letter-spacing: .2em;
}

.anim-stage-curtain {
  background: rgba(255, 210, 140, .08);
}

.anim-target {
  width: 56px;
  height: 56px;
  background: var(--gold);
  display: inline-block;
}

.anim-target-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 20%, rgba(255, 210, 140, 1) 80%);
}

.anim-target-text {
  font-family: var(--fd);
  font-size: 2.2rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: .25em;
}

.anim-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.04em;
  font-feature-settings: 'tnum';
}

.anim-curtain {
  position: absolute;
  inset: 0;
  background: #08080a;
  z-index: 2;
}

.anim-curtain-text {
  position: relative;
  z-index: 1;
  font-family: var(--fd);
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: .25em;
}

.anim-cursor-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .14s ease-out, opacity .2s;
  opacity: 0;
  box-shadow: 0 0 20px rgba(255, 210, 140, .6);
  z-index: 5;
}

/* === keyframes（オートループ：表示→消えるサイクル） === */

.anim-fadeIn.is-running { animation: animFadeIn 2.4s ease-in-out infinite; }
.anim-slideUp.is-running { animation: animSlideUp 2.6s cubic-bezier(.2, .6, .2, 1) infinite; }
.anim-scaleIn.is-running { animation: animScaleIn 2.4s ease-in-out infinite; }
.anim-staggerItem.is-running { animation: animSlideUp 2.4s cubic-bezier(.2, .6, .2, 1) infinite; }
.anim-pulse.is-running { animation: animPulse 2.2s ease-in-out infinite; }
.anim-glowSun.is-running { animation: animGlowSun 3.2s ease-in-out infinite; }
.anim-revealMask.is-running { animation: animRevealMask 3s cubic-bezier(.7, 0, .2, 1) infinite; }

.anim-stage-curtain .anim-curtain { animation: animCurtain 4s ease-in-out infinite; }

.anim-magnetic { transition: transform .3s cubic-bezier(.2, .6, .4, 1); cursor: pointer; }
.anim-magnetic:hover { transform: translateY(-6px) scale(1.04); }

.anim-hoverLift { transition: transform .35s ease, box-shadow .35s ease; cursor: pointer; }
.anim-hoverLift:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(255, 200, 120, .25); }

@keyframes animFadeIn {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateY(8px); }
  35%, 65% { opacity: 1; transform: translateY(0); }
}

@keyframes animSlideUp {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateY(50px); }
  35%, 65% { opacity: 1; transform: translateY(0); }
}

@keyframes animScaleIn {
  0%, 8%, 92%, 100% { opacity: 0; transform: scale(.7); }
  35%, 65% { opacity: 1; transform: scale(1); }
}

@keyframes animPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 140, .6); }
  50% { box-shadow: 0 0 0 22px rgba(255, 210, 140, 0); }
}

@keyframes animGlowSun {
  0%, 100% { transform: scale(.8); opacity: .55; box-shadow: 0 0 30px 8px rgba(255, 210, 140, .3); }
  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 60px 30px rgba(255, 210, 140, .5); }
}

@keyframes animRevealMask {
  0%, 5% { clip-path: inset(0 100% 0 0); }
  40%, 70% { clip-path: inset(0 0 0 0); }
  95%, 100% { clip-path: inset(0 0 0 100%); }
}

@keyframes animCurtain {
  0%, 25% { transform: translateY(0); }
  50%, 80% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* === extended autoloop animations === */
.anim-bounceIn.is-running { animation: animBounceIn 2.4s ease-in-out infinite; }
.anim-spin.is-running { animation: animSpin 2.4s linear infinite; }
.anim-wave.is-running { animation: animWave 2s ease-in-out infinite; transform-origin: 70% 70%; }
.anim-shake.is-running { animation: animShake 2.5s ease-in-out infinite; }
.anim-float.is-running { animation: animFloat 3s ease-in-out infinite; }
.anim-fadeSlide.is-running { animation: animFadeSlide 2.6s ease infinite; }
.anim-flip.is-running { animation: animFlip 2.6s ease infinite; transform-style: preserve-3d; }
.anim-zoomPop.is-running { animation: animZoomPop 2.4s cubic-bezier(.2,.8,.4,1.4) infinite; }
.anim-gradientShift.is-running { background: linear-gradient(120deg, #ffd28c, #ff8a4d, #ff5599, #7c3aed, #ffd28c); background-size: 300% 300%; animation: animGradientShift 4s ease infinite; }
.anim-borderTrace.is-running { position: relative; background: transparent !important; }
.anim-borderTrace.is-running::before, .anim-borderTrace.is-running::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--gold); }
.anim-borderTrace.is-running::before { animation: animBorderTraceTopRight 2.4s linear infinite; }
.anim-borderTrace.is-running::after { animation: animBorderTraceBottomLeft 2.4s linear infinite; }
.anim-skeleton.is-running { background: linear-gradient(90deg, rgba(255,255,255,.06) 20%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.06) 80%); background-size: 200% 100%; animation: animSkeleton 1.6s linear infinite; }
.anim-typewriter.is-running { color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 1rem; letter-spacing: .05em; white-space: nowrap; overflow: hidden; border-right: 2px solid var(--gold); animation: animTypewriter 2.5s steps(20) infinite, animBlink .7s step-end infinite; }
.anim-slideLeft.is-running { animation: animSlideLeft 2.6s cubic-bezier(.2,.6,.2,1) infinite; }
.anim-slideRight.is-running { animation: animSlideRight 2.6s cubic-bezier(.2,.6,.2,1) infinite; }
.anim-rotateSlow.is-running { animation: animSpin 8s linear infinite; }
.anim-heartbeat.is-running { animation: animHeartbeat 1.6s ease-in-out infinite; transform-origin: center; }
.anim-tada.is-running { animation: animTada 2.4s ease-in-out infinite; transform-origin: center; }
.anim-rollIn.is-running { animation: animRollIn 2.6s ease-in-out infinite; }
.anim-lightSpeed.is-running { animation: animLightSpeed 2.4s ease-out infinite; }
.anim-wobble.is-running { animation: animWobble 2.4s ease-in-out infinite; transform-origin: bottom; }
.anim-jello.is-running { animation: animJello 2.4s ease-in-out infinite; transform-origin: center; }
.anim-swing.is-running { animation: animSwing 2.4s ease-in-out infinite; transform-origin: top center; }

/* === new animation classes === */
.anim-pop.is-running { animation: animPop 1.8s ease-out infinite; }
.anim-blur-in.is-running { animation: animBlurIn 2.4s ease infinite; }
.anim-color-cycle.is-running { animation: animColorCycle 4s ease-in-out infinite; }
.anim-bounce-y.is-running { animation: animBounceY 1.4s ease-in-out infinite; }
.anim-tilt.is-running { animation: animTilt 2.6s ease-in-out infinite; transform-origin: center; }
.anim-elastic.is-running { animation: animElastic 2.4s cubic-bezier(.5,2,.4,.6) infinite; }
.anim-jelly-stretch.is-running { animation: animJellyStretch 2.4s ease-in-out infinite; transform-origin: bottom; }
.anim-glitch.is-running { animation: animGlitch 1.4s steps(8) infinite; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; }
.anim-neon-pulse.is-running { color: var(--gold); font-family: var(--fd); font-size: 1.6rem; letter-spacing: .25em; animation: animNeonPulse 2s ease-in-out infinite; }
.anim-ring-loader.is-running { width: 56px; height: 56px; border: 4px solid rgba(255,210,140,.2); border-top-color: var(--gold); border-radius: 50%; background: transparent !important; animation: animSpin 1.2s linear infinite; }
.anim-dots-loader { display: flex; gap: .5rem; background: transparent !important; }
.anim-dots-loader > i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); animation: animBounceY 1.2s ease-in-out infinite; }
.anim-dots-loader > i:nth-child(2) { animation-delay: .15s; }
.anim-dots-loader > i:nth-child(3) { animation-delay: .3s; }
.anim-progress-bar { width: 75%; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; position: relative; overflow: hidden; background-color: rgba(255,255,255,.08) !important; height: 6px !important; }
.anim-progress-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--gold); border-radius: 3px; animation: animProgress 2s ease-in-out infinite; }
.anim-checkmark.is-running { width: 60px; height: 60px; background: var(--gold) !important; border-radius: 50%; position: relative; animation: animPop 2.4s ease-out infinite; }
.anim-checkmark.is-running::after { content: ''; position: absolute; left: 18px; top: 14px; width: 12px; height: 22px; border-right: 4px solid #08080a; border-bottom: 4px solid #08080a; transform: rotate(45deg); animation: animCheckmark 2.4s ease-out infinite; }
.anim-text-reveal.is-running { color: var(--gold); font-family: var(--fd); font-size: 1.6rem; letter-spacing: .25em; clip-path: inset(0 100% 0 0); animation: animTextReveal 3s cubic-bezier(.7,0,.2,1) infinite; }
.anim-stagger-fade .anim-target { animation: animFadeIn 2s ease-in-out infinite; }
.anim-stagger-fade .anim-target:nth-child(2) { animation-delay: .15s; }
.anim-stagger-fade .anim-target:nth-child(3) { animation-delay: .3s; }
.anim-stagger-fade .anim-target:nth-child(4) { animation-delay: .45s; }
.anim-3d-rotate.is-running { animation: anim3dRotate 4s ease-in-out infinite; transform-style: preserve-3d; }
.anim-pendulum.is-running { transform-origin: top center; animation: animPendulum 2.4s ease-in-out infinite; }
.anim-zoom-out.is-running { animation: animZoomOut 2.4s ease-in-out infinite; }
.anim-roll-out.is-running { animation: animRollOut 2.4s ease-in-out infinite; }
.anim-shake-x.is-running { animation: animShakeX 1.6s ease-in-out infinite; }
.anim-shake-y.is-running { animation: animShakeY 1.6s ease-in-out infinite; }
.anim-fade-out.is-running { animation: animFadeOut 2.4s ease-in-out infinite; }
.anim-slide-down.is-running { animation: animSlideDown 2.6s cubic-bezier(.2,.6,.2,1) infinite; }
.anim-puff-in.is-running { animation: animPuffIn 2.4s ease-out infinite; filter: blur(0); }
.anim-vibrate.is-running { animation: animVibrate .3s linear infinite; }
.anim-rubber-band.is-running { animation: animRubberBand 2.4s ease-in-out infinite; transform-origin: center; }
.anim-wiggle.is-running { animation: animWiggle 1.8s ease-in-out infinite; transform-origin: center; }
.anim-pop-up.is-running { animation: animPopUp 2.4s ease-out infinite; }
.anim-back-in.is-running { animation: animBackIn 2.4s cubic-bezier(.2,.8,.4,1.4) infinite; }
.anim-bounce-out.is-running { animation: animBounceOut 2.4s ease-in-out infinite; }
.anim-zoom-y.is-running { animation: animZoomY 2.2s ease-in-out infinite; transform-origin: center; }
.anim-zoom-x.is-running { animation: animZoomX 2.2s ease-in-out infinite; transform-origin: center; }

/* keyframes */
@keyframes animBounceIn {
  0%, 8% { opacity: 0; transform: scale(.3); }
  20% { opacity: 1; transform: scale(1.15); }
  35% { transform: scale(.95); }
  45%, 65% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes animSpin { to { transform: rotate(360deg); } }
@keyframes animWave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-5deg); }
}
@keyframes animShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}
@keyframes animFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes animFadeSlide {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateX(-30px); }
  35%, 65% { opacity: 1; transform: translateX(0); }
}
@keyframes animFlip {
  0%, 8% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  35%, 65% { opacity: 1; transform: perspective(400px) rotateY(0); }
  92%, 100% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
}
@keyframes animZoomPop {
  0%, 8% { opacity: 0; transform: scale(0); }
  35% { opacity: 1; transform: scale(1.2); }
  50%, 65% { transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes animGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes animBorderTraceTopRight {
  0% { clip-path: inset(0 100% 100% 0); }
  25% { clip-path: inset(0 0 100% 0); }
  50% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes animBorderTraceBottomLeft {
  0%, 50% { clip-path: inset(100% 0 0 100%); }
  75% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes animSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes animTypewriter {
  0% { width: 0; }
  50% { width: 12ch; }
  90%, 100% { width: 12ch; }
}
@keyframes animBlink {
  50% { border-color: transparent; }
}
@keyframes animSlideLeft {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateX(60px); }
  35%, 65% { opacity: 1; transform: translateX(0); }
}
@keyframes animSlideRight {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateX(-60px); }
  35%, 65% { opacity: 1; transform: translateX(0); }
}
@keyframes animHeartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  70% { transform: scale(1); }
}
@keyframes animTada {
  0%, 100% { transform: scale(1) rotate(0); }
  10%, 20% { transform: scale(.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
@keyframes animRollIn {
  0%, 8% { opacity: 0; transform: translateX(-100%) rotate(-180deg); }
  35%, 65% { opacity: 1; transform: translateX(0) rotate(0); }
  92%, 100% { opacity: 0; transform: translateX(100%) rotate(180deg); }
}
@keyframes animLightSpeed {
  0%, 8% { opacity: 0; transform: translateX(100%) skewX(-30deg); }
  30% { opacity: 1; transform: skewX(20deg); }
  50% { opacity: 1; transform: skewX(-5deg); }
  70%, 100% { opacity: 0; transform: translateX(-100%) skewX(0); }
}
@keyframes animWobble {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-25px) rotate(-5deg); }
  30% { transform: translateX(20px) rotate(3deg); }
  45% { transform: translateX(-15px) rotate(-3deg); }
  60% { transform: translateX(10px) rotate(2deg); }
  75% { transform: translateX(-5px) rotate(-1deg); }
}
@keyframes animJello {
  0%, 100% { transform: skew(0deg, 0deg); }
  22.2% { transform: skew(-12.5deg, -12.5deg); }
  33.3% { transform: skew(6.25deg, 6.25deg); }
  44.4% { transform: skew(-3.125deg, -3.125deg); }
  55.5% { transform: skew(1.5deg, 1.5deg); }
  66.6% { transform: skew(-.78deg, -.78deg); }
}
@keyframes animSwing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
}
@keyframes animPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  70% { transform: scale(.95); }
  85%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes animBlurIn {
  0%, 8%, 92%, 100% { opacity: 0; filter: blur(12px); }
  35%, 65% { opacity: 1; filter: blur(0); }
}
@keyframes animColorCycle {
  0% { background: #ffd28c; }
  25% { background: #ff8a4d; }
  50% { background: #ff5599; }
  75% { background: #7c3aed; }
  100% { background: #ffd28c; }
}
@keyframes animBounceY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes animTilt {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-8deg); }
}
@keyframes animElastic {
  0%, 8% { opacity: 0; transform: scale(.3); }
  35%, 65% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes animJellyStretch {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  30% { transform: scaleY(.7) scaleX(1.2); }
  50% { transform: scaleY(1.2) scaleX(.85); }
  70% { transform: scaleY(.95) scaleX(1.05); }
}
@keyframes animGlitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); text-shadow: 2px 0 #ff5599, -2px 0 #00ffff; }
  40% { transform: translate(3px, -1px); text-shadow: -2px 0 #ff5599, 2px 0 #00ffff; }
  60% { transform: translate(-2px, 1px); text-shadow: 2px 0 #ff5599, -2px 0 #00ffff; }
  80% { transform: translate(2px, -2px); text-shadow: -2px 0 #ff5599, 2px 0 #00ffff; }
  100% { transform: translate(0); text-shadow: none; }
}
@keyframes animNeonPulse {
  0%, 100% { text-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold), 0 0 20px var(--gold); opacity: .85; }
  50% { text-shadow: 0 0 20px var(--gold), 0 0 30px var(--gold), 0 0 40px var(--gold); opacity: 1; }
}
@keyframes animProgress {
  0% { left: -30%; }
  60%, 100% { left: 100%; }
}
@keyframes animCheckmark {
  0%, 30% { opacity: 0; transform: rotate(45deg) scale(0); }
  60%, 90% { opacity: 1; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) scale(0); }
}
@keyframes animTextReveal {
  0%, 5% { clip-path: inset(0 100% 0 0); }
  35%, 65% { clip-path: inset(0 0 0 0); }
  95%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes anim3dRotate {
  0%, 100% { transform: perspective(400px) rotateY(0deg); }
  50% { transform: perspective(400px) rotateY(180deg); }
}
@keyframes animPendulum {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}
@keyframes animZoomOut {
  0%, 8% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.4); opacity: .3; }
  92%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes animRollOut {
  0%, 8% { opacity: 1; transform: translateX(0) rotate(0); }
  50% { opacity: 1; transform: translateX(0); }
  80%, 100% { opacity: 0; transform: translateX(100%) rotate(180deg); }
}
@keyframes animShakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
@keyframes animShakeY {
  0%, 100% { transform: translateY(0); }
  20%, 60% { transform: translateY(-8px); }
  40%, 80% { transform: translateY(8px); }
}
@keyframes animFadeOut {
  0%, 30% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@keyframes animSlideDown {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateY(-50px); }
  35%, 65% { opacity: 1; transform: translateY(0); }
}
@keyframes animPuffIn {
  0%, 8% { opacity: 0; transform: scale(2); filter: blur(8px); }
  35%, 65% { opacity: 1; transform: scale(1); filter: blur(0); }
  92%, 100% { opacity: 0; transform: scale(2); filter: blur(8px); }
}
@keyframes animVibrate {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}
@keyframes animRubberBand {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  30% { transform: scaleX(1.25) scaleY(.75); }
  40% { transform: scaleX(.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(.85); }
  65% { transform: scaleX(.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(.95); }
}
@keyframes animWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}
@keyframes animPopUp {
  0%, 8% { opacity: 0; transform: translateY(40px) scale(.6); }
  40% { opacity: 1; transform: translateY(0) scale(1.1); }
  60%, 70% { transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(40px) scale(.6); }
}
@keyframes animBackIn {
  0%, 8% { opacity: 0; transform: translateZ(-200px) scale(.5); }
  35%, 65% { opacity: 1; transform: translateZ(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateZ(-200px) scale(.5); }
}
@keyframes animBounceOut {
  0% { opacity: 1; transform: scale(1); }
  20% { transform: scale(.9); }
  50%, 55% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(.3); }
}
@keyframes animZoomY {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.5); }
}
@keyframes animZoomX {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.5); }
}

/* === practical UI animations === */
.anim-cta-button { background: var(--gold) !important; color: #08080a; padding: .8rem 1.6rem; border-radius: 999px; font-family: var(--fd); font-size: .8rem; letter-spacing: .12em; font-weight: 600; cursor: pointer; border: none; width: auto !important; height: auto !important; animation: animCtaPulse 2s ease-in-out infinite; }
@keyframes animCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,140,.6); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(255,210,140,0); transform: scale(1.04); }
}

.anim-modal-stage { background: rgba(0,0,0,.4); }
.anim-modal { background: #15161b !important; width: 60%; height: 70%; border-radius: 8px; border: 1px solid var(--w4); position: relative; animation: animModalIn 2.4s ease-in-out infinite; }
@keyframes animModalIn {
  0%, 8%, 92%, 100% { opacity: 0; transform: scale(.85) translateY(20px); }
  35%, 65% { opacity: 1; transform: scale(1) translateY(0); }
}

.anim-drawer-stage { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; }
.anim-drawer { background: var(--gold) !important; width: 50%; height: 100%; animation: animDrawerSlide 2.6s cubic-bezier(.2,.6,.2,1) infinite; }
@keyframes animDrawerSlide {
  0%, 8%, 92%, 100% { transform: translateX(-100%); }
  35%, 65% { transform: translateX(0); }
}

.anim-toast-stage { padding: 0 !important; align-items: flex-end !important; justify-content: flex-end !important; }
.anim-toast { background: #15161b !important; color: var(--gold); padding: .65rem 1rem; border-radius: 6px; border: 1px solid var(--w4); font-family: 'JetBrains Mono', monospace; font-size: .7rem; margin: .8rem; width: auto !important; height: auto !important; animation: animToastIn 3s ease-in-out infinite; }
@keyframes animToastIn {
  0%, 8%, 92%, 100% { opacity: 0; transform: translateY(20px); }
  20%, 75% { opacity: 1; transform: translateY(0); }
}

.anim-tooltip-stage { padding: 0 !important; }
.anim-tooltip-host { position: relative; padding: .5rem 1rem; border: 1px solid var(--w4); border-radius: 4px; color: var(--w-soft); font-family: 'JetBrains Mono', monospace; font-size: .7rem; cursor: pointer; background: transparent !important; width: auto !important; height: auto !important; }
.anim-tooltip-host::after { content: 'tooltip'; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--gold); color: #08080a; padding: 4px 8px; border-radius: 4px; font-size: .65rem; white-space: nowrap; animation: animTooltip 2.4s ease-in-out infinite; }
@keyframes animTooltip {
  0%, 25%, 75%, 100% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  35%, 65% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.anim-accordion { background: transparent !important; width: 70%; height: auto !important; }
.anim-accordion-row { border: 1px solid var(--w4); border-radius: 4px; margin-bottom: .35rem; padding: .55rem .8rem; color: var(--w-soft); font-family: 'JetBrains Mono', monospace; font-size: .7rem; overflow: hidden; }
.anim-accordion-row span { display: block; color: var(--w3); font-size: .6rem; margin-top: .35rem; animation: animAccord 2.4s ease-in-out infinite; }
@keyframes animAccord {
  0%, 25%, 75%, 100% { max-height: 0; opacity: 0; }
  35%, 65% { max-height: 30px; opacity: 1; }
}

.anim-tab-stage { padding: 0 !important; }
.anim-tabs { width: 70%; background: transparent !important; height: auto !important; }
.anim-tab-bar { display: flex; border-bottom: 1px solid var(--w4); position: relative; }
.anim-tab-bar > button { background: transparent; border: none; color: var(--w-soft); font-family: 'JetBrains Mono', monospace; font-size: .7rem; padding: .5rem 1rem; cursor: pointer; }
.anim-tab-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--gold); width: 80px; left: 0; animation: animTabSwitch 3.6s ease-in-out infinite; }
@keyframes animTabSwitch {
  0%, 30% { left: 0; }
  35%, 65% { left: 80px; }
  70%, 100% { left: 160px; }
}

.anim-toggle { background: rgba(255,255,255,.1) !important; width: 56px; height: 28px !important; border-radius: 14px; position: relative; cursor: pointer; animation: animToggleBg 2.4s ease-in-out infinite; }
.anim-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; animation: animTogglePeg 2.4s ease-in-out infinite; }
@keyframes animToggleBg {
  0%, 25%, 75%, 100% { background: rgba(255,255,255,.1); }
  35%, 65% { background: var(--gold); }
}
@keyframes animTogglePeg {
  0%, 25%, 75%, 100% { left: 3px; }
  35%, 65% { left: 31px; }
}

.anim-checkbox { width: 28px; height: 28px !important; border: 2px solid var(--gold); border-radius: 4px; background: transparent !important; position: relative; animation: animCheckBg 2.4s ease-in-out infinite; }
.anim-checkbox::after { content: ''; position: absolute; left: 7px; top: 3px; width: 8px; height: 14px; border-right: 3px solid #08080a; border-bottom: 3px solid #08080a; transform: rotate(45deg); opacity: 0; animation: animCheckMark 2.4s ease-in-out infinite; }
@keyframes animCheckBg {
  0%, 25%, 75%, 100% { background: transparent; }
  35%, 65% { background: var(--gold); }
}
@keyframes animCheckMark {
  0%, 30% { opacity: 0; transform: rotate(45deg) scale(0); }
  40%, 65% { opacity: 1; transform: rotate(45deg) scale(1); }
  75%, 100% { opacity: 0; transform: rotate(45deg) scale(0); }
}

.anim-input-focus-stage { padding: 0 !important; }
.anim-input-focus { width: 220px; height: 36px !important; padding: 0 .8rem; border: 1px solid var(--w4); border-radius: 4px; background: transparent !important; color: var(--w-soft); font-family: 'JetBrains Mono', monospace; font-size: .75rem; line-height: 36px; animation: animInputFocus 2.4s ease-in-out infinite; }
@keyframes animInputFocus {
  0%, 25%, 75%, 100% { border-color: rgba(255,255,255,.1); box-shadow: 0 0 0 0 rgba(255,210,140,0); }
  35%, 65% { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,210,140,.15); }
}

.anim-search-expand { width: 36px; height: 36px !important; background: transparent !important; border: 1px solid var(--w4); border-radius: 999px; position: relative; animation: animSearchExpand 3s ease-in-out infinite; overflow: hidden; }
.anim-search-expand::before { content: ''; position: absolute; right: 12px; top: 12px; width: 8px; height: 8px; border: 2px solid var(--w-soft); border-radius: 50%; }
.anim-search-expand::after { content: ''; position: absolute; right: 8px; top: 22px; width: 6px; height: 2px; background: var(--w-soft); transform: rotate(45deg); }
@keyframes animSearchExpand {
  0%, 25%, 75%, 100% { width: 36px; }
  35%, 65% { width: 220px; }
}

.anim-hamburger { width: 32px; height: 32px !important; background: transparent !important; position: relative; cursor: pointer; }
.anim-hamburger > i { display: block; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--gold); border-radius: 1px; }
.anim-hamburger > i:nth-child(1) { top: 8px; animation: animHam1 2.4s ease-in-out infinite; }
.anim-hamburger > i:nth-child(2) { top: 15px; animation: animHam2 2.4s ease-in-out infinite; }
.anim-hamburger > i:nth-child(3) { top: 22px; animation: animHam3 2.4s ease-in-out infinite; }
@keyframes animHam1 {
  0%, 25%, 75%, 100% { transform: translateY(0) rotate(0); }
  35%, 65% { transform: translateY(7px) rotate(45deg); }
}
@keyframes animHam2 {
  0%, 25%, 75%, 100% { opacity: 1; }
  35%, 65% { opacity: 0; }
}
@keyframes animHam3 {
  0%, 25%, 75%, 100% { transform: translateY(0) rotate(0); }
  35%, 65% { transform: translateY(-7px) rotate(-45deg); }
}

.anim-card-hover-lift-stage { perspective: 800px; }
.anim-card-hover-lift { width: 80px; height: 110px !important; background: var(--gold) !important; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: animCardHoverLift 2.6s ease-in-out infinite; }
@keyframes animCardHoverLift {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
  50% { transform: translateY(-12px) scale(1.04); box-shadow: 0 20px 40px rgba(255,210,140,.3); }
}

.anim-image-zoom { width: 100px; height: 100px !important; background: var(--gold) !important; overflow: hidden; }
.anim-image-zoom > i { display: block; width: 100%; height: 100%; background: linear-gradient(45deg, #ffd28c 0%, #ff8a4d 50%, #ffd28c 100%); animation: animImageZoom 2.6s ease-in-out infinite; }
@keyframes animImageZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.anim-underline { color: var(--w); font-family: var(--fd); font-size: 1.2rem; letter-spacing: .12em; padding: .3rem 0; position: relative; background: transparent !important; width: auto !important; height: auto !important; }
.anim-underline::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: left; animation: animUnderline 2.4s ease-in-out infinite; }
@keyframes animUnderline {
  0%, 25%, 75%, 100% { transform: scaleX(0); transform-origin: right; }
  35%, 65% { transform: scaleX(1); transform-origin: left; }
}

.anim-rotate-y-card { width: 90px; height: 130px !important; background: var(--gold) !important; transform-style: preserve-3d; animation: animRotateYCard 4s ease-in-out infinite; }
@keyframes animRotateYCard {
  0%, 100% { transform: perspective(600px) rotateY(0); }
  50% { transform: perspective(600px) rotateY(180deg); }
}

.anim-heart-pop-stage { padding: 0 !important; }
.anim-heart-pop { width: 36px; height: 36px !important; background: transparent !important; position: relative; animation: animHeartPop 2.4s ease-in-out infinite; }
.anim-heart-pop::before { content: ''; position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; background: #ff4d6d; clip-path: path('M12 21s-7-5-9-11c-1-3 1-6 4-6 1 0 3 1 5 3 2-2 4-3 5-3 3 0 5 3 4 6-2 6-9 11-9 11z'); animation: animHeartScale 2.4s ease-in-out infinite; }
@keyframes animHeartPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes animHeartScale {
  0%, 25%, 75%, 100% { background: transparent; outline: 1px solid #ff4d6d; }
  35%, 65% { background: #ff4d6d; }
}

.anim-stars-rating { display: flex; gap: 4px; background: transparent !important; width: auto !important; height: auto !important; }
.anim-stars-rating > i { display: block; width: 22px; height: 22px; background: rgba(255,255,255,.15); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: animStarFill 2.5s ease-in-out infinite; }
.anim-stars-rating > i:nth-child(2) { animation-delay: .15s; }
.anim-stars-rating > i:nth-child(3) { animation-delay: .3s; }
.anim-stars-rating > i:nth-child(4) { animation-delay: .45s; }
.anim-stars-rating > i:nth-child(5) { animation-delay: .6s; }
@keyframes animStarFill {
  0%, 20%, 80%, 100% { background: rgba(255,255,255,.15); transform: scale(1); }
  35%, 65% { background: var(--gold); transform: scale(1.15); }
}

.anim-badge { background: var(--gold) !important; color: #08080a; padding: .35rem .8rem; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 700; width: auto !important; height: auto !important; animation: animBadgePop 2.4s ease-in-out infinite; }
@keyframes animBadgePop {
  0%, 25%, 75%, 100% { transform: scale(1); }
  35%, 65% { transform: scale(1.15); box-shadow: 0 4px 16px rgba(255,210,140,.4); }
}

.anim-notification-dot { width: 32px; height: 32px !important; background: transparent !important; border: 1px solid var(--w4); border-radius: 8px; position: relative; }
.anim-notification-dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; background: #ff4d6d; border-radius: 50%; animation: animNotifDot 1.6s ease-in-out infinite; }
@keyframes animNotifDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,.8); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(255,77,109,0); transform: scale(1.15); }
}

.anim-circular-progress { width: 60px; height: 60px !important; background: transparent !important; border-radius: 50%; position: relative; }
.anim-circular-progress::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--gold) 0deg, rgba(255,255,255,.08) 0deg); animation: animCircular 2.4s linear infinite; }
.anim-circular-progress::after { content: ''; position: absolute; inset: 8px; background: var(--bg); border-radius: 50%; }
@keyframes animCircular {
  0% { background: conic-gradient(var(--gold) 0deg, rgba(255,255,255,.08) 0deg); }
  100% { background: conic-gradient(var(--gold) 360deg, rgba(255,255,255,.08) 360deg); }
}

.anim-skeleton-card { width: 75%; background: rgba(255,255,255,.04) !important; border-radius: 6px; padding: .8rem; height: auto !important; }
.anim-skeleton-line { height: 10px; background: linear-gradient(90deg, rgba(255,255,255,.04) 20%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.04) 80%); background-size: 200% 100%; border-radius: 4px; margin-bottom: 6px; animation: animSkeleton 1.6s linear infinite; }
.anim-skeleton-line:nth-child(2) { width: 60%; }
.anim-skeleton-line:nth-child(3) { width: 80%; }

.anim-pulse-dot { width: 12px; height: 12px !important; background: #00ff88 !important; border-radius: 50%; animation: animPulseDot 1.5s ease-in-out infinite; }
@keyframes animPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,.6); }
  50% { box-shadow: 0 0 0 14px rgba(0,255,136,0); }
}

.anim-scroll-indicator { width: 22px; height: 38px !important; border: 2px solid var(--gold); border-radius: 14px; background: transparent !important; position: relative; }
.anim-scroll-indicator::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: var(--gold); border-radius: 2px; transform: translateX(-50%); animation: animScrollIndicator 1.8s ease-in-out infinite; }
@keyframes animScrollIndicator {
  0%, 100% { opacity: 0; top: 5px; }
  50% { opacity: 1; top: 18px; }
}

.anim-arrow-down { width: 24px; height: 24px !important; background: transparent !important; position: relative; animation: animArrowDown 1.4s ease-in-out infinite; }
.anim-arrow-down::before, .anim-arrow-down::after { content: ''; position: absolute; width: 12px; height: 2px; background: var(--gold); top: 12px; }
.anim-arrow-down::before { left: 0; transform: rotate(45deg); transform-origin: right center; }
.anim-arrow-down::after { right: 0; transform: rotate(-45deg); transform-origin: left center; }
@keyframes animArrowDown {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50% { transform: translateY(8px); opacity: 1; }
}

.anim-link-arrow { color: var(--gold); font-family: var(--fd); font-size: .9rem; letter-spacing: .15em; background: transparent !important; width: auto !important; height: auto !important; cursor: pointer; }
.anim-link-arrow::after { content: '→'; display: inline-block; margin-left: .35rem; animation: animLinkArrow 1.4s ease-in-out infinite; }
@keyframes animLinkArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.anim-spinner-bars { display: flex; gap: 3px; align-items: flex-end; height: 32px !important; background: transparent !important; width: auto !important; }
.anim-spinner-bars > i { display: block; width: 4px; height: 100%; background: var(--gold); border-radius: 2px; animation: animBars 1s ease-in-out infinite; }
.anim-spinner-bars > i:nth-child(2) { animation-delay: .12s; }
.anim-spinner-bars > i:nth-child(3) { animation-delay: .24s; }
.anim-spinner-bars > i:nth-child(4) { animation-delay: .36s; }
@keyframes animBars { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

.anim-loading-bg { width: 100% !important; height: 8px !important; background: linear-gradient(90deg, rgba(255,210,140,.2), var(--gold), rgba(255,210,140,.2)) !important; background-size: 200% 100% !important; animation: animLoadingBg 1.5s linear infinite; border-radius: 4px; }
@keyframes animLoadingBg { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }

.anim-rotate-glow { width: 48px; height: 48px !important; background: transparent !important; border-radius: 50%; position: relative; }
.anim-rotate-glow::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(transparent 0deg, var(--gold) 90deg, transparent 180deg); animation: animSpin 2s linear infinite; }
.anim-rotate-glow::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg); }

.anim-gradient-text { font-family: var(--fd); font-size: 1.8rem; font-weight: 700; letter-spacing: .15em; background: linear-gradient(120deg, #ffd28c, #ff5599, #7c3aed, #ffd28c); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: animGradientText 4s linear infinite; width: auto !important; height: auto !important; }
@keyframes animGradientText { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

.anim-zoom-fade { width: 56px; height: 56px !important; background: var(--gold) !important; animation: animZoomFade 2.6s ease-in-out infinite; }
@keyframes animZoomFade {
  0%, 100% { opacity: 0; transform: scale(1.4); }
  50% { opacity: 1; transform: scale(1); }
}

.anim-confetti-stage { position: relative; }
.anim-confetti-stage > i { position: absolute; width: 8px; height: 8px; top: -10px; }
.anim-confetti-stage > i:nth-child(1) { left: 20%; background: var(--gold); animation: animConfetti 3s linear infinite; }
.anim-confetti-stage > i:nth-child(2) { left: 35%; background: #ff5599; animation: animConfetti 3s linear infinite .3s; border-radius: 50%; }
.anim-confetti-stage > i:nth-child(3) { left: 50%; background: #7c3aed; animation: animConfetti 3s linear infinite .6s; }
.anim-confetti-stage > i:nth-child(4) { left: 65%; background: #00ff88; animation: animConfetti 3s linear infinite .9s; border-radius: 50%; }
.anim-confetti-stage > i:nth-child(5) { left: 80%; background: var(--gold); animation: animConfetti 3s linear infinite 1.2s; }
@keyframes animConfetti {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  10%, 80% { opacity: 1; }
  100% { transform: translateY(180px) rotate(720deg); opacity: 0; }
}

.anim-ripple-stage { position: relative; cursor: pointer; }
.anim-ripple-target { width: 70px; height: 70px !important; background: var(--gold) !important; border-radius: 50%; position: relative; }
.anim-ripple-target::before, .anim-ripple-target::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: animRipple 2.2s ease-out infinite; }
.anim-ripple-target::after { animation-delay: 1.1s; }
@keyframes animRipple {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.anim-emoji-bounce { font-size: 2rem; background: transparent !important; width: auto !important; height: auto !important; animation: animEmojiBounce 1.4s ease-in-out infinite; }
@keyframes animEmojiBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px) rotate(-5deg); }
}

.anim-marquee-stage { padding: 0 !important; overflow: hidden; }
.anim-marquee { display: flex; gap: 2rem; color: var(--gold); font-family: var(--fd); font-size: .9rem; letter-spacing: .2em; white-space: nowrap; background: transparent !important; width: auto !important; height: auto !important; animation: animMarquee 8s linear infinite; }
@keyframes animMarquee { from { transform: translateX(60%); } to { transform: translateX(-60%); } }

/* ==========================================
   TYPOGRAPHY CARD
   ========================================== */

.card-typo .typo-preview {
  background: var(--bg);
  padding: 2.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-height: 220px;
}

.typo-eyebrow {
  font-family: var(--fd);
  font-size: .5rem;
  letter-spacing: .3em;
  color: var(--w3);
  text-transform: uppercase;
}

.typo-title {
  color: var(--w);
  margin: 0;
}

.typo-subtitle {
  font-family: var(--fd);
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--w2);
  text-transform: uppercase;
}

.typo-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .8rem;
  line-height: 1.95;
  color: var(--w-soft);
  letter-spacing: .01em;
}

/* ==========================================
   FONT SAMPLE BLOCK
   ========================================== */

.font-sample-numbers {
  font-size: 1rem;
  font-weight: 500;
  color: var(--w-text);
  letter-spacing: .04em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1.2;
  padding: .5rem 0 .45rem;
  border-top: 1px solid var(--w4);
  margin: -0.25rem 0 0;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.font-sample-block {
  margin: 0 0 .25rem;
  padding: .85rem 0;
  border-top: 1px solid var(--w4);
  border-bottom: 1px solid var(--w4);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: relative;
  z-index: 1;
}

.font-sample-en {
  font-size: 1.05rem;
  color: var(--w-text);
  line-height: 1.4;
  letter-spacing: .005em;
}

.font-sample-ja {
  font-size: .92rem;
  color: var(--w-soft);
  line-height: 1.55;
  letter-spacing: .01em;
}

/* ==========================================
   IMAGE CARDS
   ========================================== */

.item-card-image {
  padding: 0;
  cursor: default;
  min-height: auto;
  overflow: hidden;
}

.item-card-image:hover { background: var(--bg); }
.item-card-image::after { display: none; }

.image-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg3);
  cursor: zoom-in;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.image-thumb:hover img {
  transform: scale(1.04);
}

.image-body {
  padding: 1.25rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.action-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: 1px solid var(--w4);
  color: var(--w-text);
  font-family: var(--fd);
  font-size: .62rem;
  letter-spacing: .15em;
  padding: .45rem .7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-transform: uppercase;
  transition: var(--transition);
  text-decoration: none;
}

.action-btn:hover {
  border-color: var(--gold-soft);
  color: var(--gold);
  background: rgba(255, 200, 120, .04);
}

.action-btn svg {
  flex-shrink: 0;
}

/* ==========================================
   ICON CARDS
   ========================================== */

.items-grid:has(.item-card-icon) {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.item-card-icon {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: none;
  border-right: 1px solid var(--w4);
  border-bottom: 1px solid var(--w4);
  margin: 0;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem .75rem;
  min-height: 150px;
  font-family: inherit;
  color: var(--w-text);
  position: relative;
  transition: background .2s ease;
}

.item-card-icon::after { display: none; }

.item-card-icon:hover {
  background: rgba(255, 255, 255, .02);
}

.item-card-icon:hover .icon-preview {
  color: var(--gold);
  transform: scale(1.05);
}

.item-card-icon:hover .icon-copy-hint {
  opacity: 1;
}

.icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--w);
  transition: transform .25s ease, color .25s ease;
}

.icon-preview svg {
  width: 28px;
  height: 28px;
}

.icon-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--w-text);
  letter-spacing: .04em;
  font-feature-settings: 'tnum';
}

.icon-label-ja {
  font-family: var(--fd);
  font-size: .58rem;
  color: var(--w3);
  letter-spacing: .12em;
}

.icon-copy-hint {
  font-family: var(--fd);
  font-size: .5rem;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ==========================================
   PALETTE CARDS
   ========================================== */

.item-card-palette {
  cursor: default;
  min-height: auto;
  padding: 1.5rem 1.4rem 1.3rem;
}

.item-card-palette:hover {
  background: rgba(255, 255, 255, .015);
}

.item-card-palette::after { display: none; }

.palette-swatches {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--w4);
  border: 1px solid var(--w4);
  margin-top: .25rem;
}

.swatch {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: none;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  cursor: pointer;
  position: relative;
  transition: background .2s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--w-text);
}

.swatch:hover {
  background: rgba(255, 255, 255, .03);
}

.swatch:hover .swatch-copy-icon {
  opacity: 1;
  color: var(--gold);
}

.swatch-color {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: var(--swatch-bg, transparent);
  border: 1px solid rgba(255, 255, 255, .15);
  flex-shrink: 0;
  display: block;
}

.swatch-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.swatch-label {
  font-family: var(--fd);
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--w3);
  text-transform: uppercase;
}

.swatch-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--w-text);
  letter-spacing: .02em;
  font-feature-settings: 'tnum';
}

.swatch-copy-icon {
  color: var(--w3);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .2s ease, color .2s ease;
}

/* ==========================================
   PALETTE SPECTRUM (色相グラデ)
   ========================================== */

.palette-swatches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px;
  background: transparent;
  border: none;
  margin-top: .25rem;
}

.swatch.swatch-tile {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--w4);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}

.swatch.swatch-tile:hover {
  border-color: var(--gold, #c8a35c);
  background: var(--bg);
}

.swatch.swatch-tile .swatch-copy-icon {
  display: none;
}

.swatch-tile-color {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 52px;
  background: var(--swatch-bg, transparent);
  border: none;
  border-radius: 0;
  padding: 4px 6px;
  position: relative;
}

.swatch-tile-shade {
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem;
  letter-spacing: .02em;
  color: rgba(0, 0, 0, .55);
  background: rgba(255, 255, 255, .55);
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 600;
  mix-blend-mode: normal;
}

.swatch-tile-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  letter-spacing: .02em;
  color: var(--w-text);
  padding: 5px 6px 6px;
  text-align: center;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg);
}

.item-card-spectrum .item-name {
  font-size: .95rem;
}

@media (max-width: 640px) {
  .palette-swatches-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }
  .swatch-tile-color { height: 44px; }
}

/* ==========================================
   TOAST
   ========================================== */

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(8, 8, 10, .94);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-family: 'JetBrains Mono', var(--fd), monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .65rem 1.25rem;
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

.toast.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.item-link-icon {
  color: var(--w3);
  flex-shrink: 0;
  transition: var(--transition);
  margin-top: 4px;
}

.item-card:hover .item-link-icon {
  color: var(--gold);
  transform: translateX(2px) translateY(-2px);
}

.item-note {
  font-size: .72rem;
  color: var(--w-soft);
  line-height: 1.95;
  flex: 1;
  position: relative;
  z-index: 1;
  letter-spacing: .01em;
}

.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-top: .25rem;
}

.item-tag {
  font-family: var(--fd);
  font-size: .55rem;
  font-weight: 400;
  color: var(--w3);
  letter-spacing: .18em;
  padding: .15rem .55rem;
  border: 1px solid var(--w4);
  text-transform: uppercase;
}

.item-tag.tag-primary {
  color: var(--gold);
  border-color: var(--gold-soft);
  background: var(--gold-bg);
}

.item-license {
  font-family: var(--fd);
  font-size: .58rem;
  color: var(--w3);
  letter-spacing: .12em;
  font-style: italic;
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
  border-top: 1px solid var(--w4);
  padding: 2.5rem clamp(1.5rem, 5vw, 3rem) 1.5rem;
  margin-top: 4rem;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.footer-logo {
  width: 18px;
  height: 18px;
  opacity: .35;
}

.footer-brand span {
  font-family: var(--fd);
  font-size: .58rem;
  color: var(--w3);
  letter-spacing: .22em;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
}

.footer-meta span {
  font-family: var(--fd);
  font-size: .58rem;
  color: var(--w3);
  letter-spacing: .15em;
}

.footer-tagline {
  font-style: italic;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
  .hero { padding: 6.5rem 1.25rem 4rem; min-height: auto; }
  .hero-meta { gap: 1.5rem; padding-top: 1.5rem; }
  .meta-value { font-size: 1.15rem; }
  .meta-label { font-size: .48rem; }
  .category-header { flex-wrap: wrap; }
  .category-title-en { display: block; margin-left: 0; margin-top: .25rem; font-size: .8rem; }
  .items-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { align-items: flex-start; }
}

/* ============================================
   Claude指示テンプレ（Prompt Card）
   ============================================ */
.card-prompt {
  background: var(--bg2, rgba(255,255,255,.02));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.35rem 1.1rem;
  position: relative;
  transition: var(--transition);
}

.card-prompt:hover {
  border-color: var(--gold-soft);
  background: rgba(255, 210, 140, .03);
}

.prompt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}

.prompt-name {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--w);
  letter-spacing: .02em;
  line-height: 1.3;
}

.prompt-copy-btn {
  flex-shrink: 0;
}

.prompt-body {
  font-family: var(--ff);
  font-size: .82rem;
  line-height: 1.85;
  color: var(--w-text);
  background: rgba(255, 210, 140, .04);
  border-left: 2px solid var(--gold-soft);
  padding: .9rem 1rem;
  margin: 0 0 .85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt-note {
  font-size: .72rem;
  color: var(--w-soft);
  line-height: 1.65;
  margin-bottom: .65rem;
}

.card-prompt .item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: auto;
  padding-top: .25rem;
}
/* ===== catalog animations (auto-imported) ===== */

/* カタログのカードデザイン (.ac- prefix で lab CSS と隔離) */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.ac-card {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
}
.ac-card:hover {
  border-color: #444;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.ac-demo {
  height: 200px;
  position: relative;
  overflow: hidden;
  background: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-info { padding: 14px 16px; }
.ac-info h3 {
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Hiragino Sans', sans-serif;
}
.ac-level {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: normal;
  letter-spacing: .05em;
}
.ac-level.basic { background: rgba(74, 170, 255, .2); color: #4af; }
.ac-level.medium { background: rgba(255, 200, 74, .2); color: #fc4; }
.ac-level.advanced { background: rgba(244, 74, 170, .2); color: #f4a; }
.ac-en {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
  letter-spacing: .05em;
}
.ac-card p {
  font-size: 12px;
  line-height: 1.6;
  color: #bbb;
  margin-bottom: 8px;
}
.ac-use {
  font-size: 11px;
  color: #6a9;
  padding-top: 8px;
  border-top: 1px solid #2a2a2a;
}
.ac-tech {
  font-size: 10px;
  color: #666;
  margin-top: 4px;
}
.ac-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.ac-btn {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.ac-btn:hover { color: var(--gold); border-color: var(--gold); }

/* lab の items-grid を catalog グリッドへ自動適合（animations カテゴリ用） */
.items-grid:has(.ac-card) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

/* === 元 catalog の demo-* CSS（そのまま、クラス名は十分ユニーク） === */

/* ============================================
     1. ENTRANCE 系
     ============================================ */
  .demo-fadein .item {
    color: #fff; font-size: 24px;
    animation: fadeIn 2s ease infinite;
  }
  @keyframes fadeIn {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }

  .demo-slidein .item {
    color: #fff; font-size: 22px;
    animation: slideIn 2.5s ease infinite;
  }
  @keyframes slideIn {
    0% { transform: translateX(-150%); opacity: 0; }
    50%, 80% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(150%); opacity: 0; }
  }

  .demo-zoomin .item {
    color: #fff; font-size: 24px;
    animation: zoomIn 2.5s ease infinite;
  }
  @keyframes zoomIn {
    0% { transform: scale(0); opacity: 0; }
    50%, 80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
  }

  .demo-blurin .item {
    color: #fff; font-size: 22px;
    animation: blurIn 3s ease infinite;
  }
  @keyframes blurIn {
    0% { filter: blur(20px); opacity: 0; }
    50% { filter: blur(0); opacity: 1; }
    100% { filter: blur(20px); opacity: 0; }
  }

  .demo-flip { perspective: 600px; }
  .demo-flip .item {
    color: #fff; font-size: 22px;
    animation: flipIn 3s ease infinite;
    transform-style: preserve-3d;
  }
  @keyframes flipIn {
    0% { transform: rotateY(90deg); opacity: 0; }
    50%, 80% { transform: rotateY(0); opacity: 1; }
    100% { transform: rotateY(-90deg); opacity: 0; }
  }

  .demo-bounce .item {
    color: #fff; font-size: 24px;
    animation: bounce 2s cubic-bezier(0.68,-0.55,0.265,1.55) infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(-100px); opacity: 0; }
    50% { transform: translateY(0); opacity: 1; }
  }

  .demo-reveal { perspective: 800px; }
  .demo-reveal .text {
    display: flex; gap: 4px;
    overflow: hidden; padding: 10px 0;
  }
  .demo-reveal .text span {
    display: inline-block; color: #fff; font-size: 22px;
    animation: revealUp 3s ease infinite;
  }
  .demo-reveal .text span:nth-child(1) { animation-delay: 0s; }
  .demo-reveal .text span:nth-child(2) { animation-delay: 0.1s; }
  .demo-reveal .text span:nth-child(3) { animation-delay: 0.2s; }
  .demo-reveal .text span:nth-child(4) { animation-delay: 0.3s; }
  .demo-reveal .text span:nth-child(5) { animation-delay: 0.4s; }
  .demo-reveal .text span:nth-child(6) { animation-delay: 0.5s; }
  @keyframes revealUp {
    0% { transform: translateY(100%); opacity: 0; }
    40%, 70% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
  }

  .demo-typewriter .item {
    color: #fff; font-size: 16px;
    font-family: 'Courier New', monospace;
    border-right: 2px solid #fff;
    overflow: hidden; white-space: nowrap;
    width: 0;
    animation: type 3s steps(15) infinite;
  }
  @keyframes type {
    0% { width: 0; }
    50%, 90% { width: 14ch; }
    100% { width: 0; }
  }

  .demo-mask {
    background: #1a1a1a;
  }
  .demo-mask .item {
    position: relative;
    color: #fff; font-size: 24px;
    overflow: hidden;
    padding: 8px 4px;
  }
  .demo-mask .item::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #4af;
    animation: maskWipe 2.5s ease infinite;
  }
  @keyframes maskWipe {
    0% { transform: translateX(-100%); }
    40% { transform: translateX(0); }
    50% { transform: translateX(0); }
    90% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
  }

  .demo-cliptext {
    background: #1a1a1a;
  }
  .demo-cliptext .item {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(90deg, transparent 0%, transparent 30%, #fff 50%, transparent 70%, transparent 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgba(255,255,255,0.1);
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
    animation: shineText 3s linear infinite;
  }
  @keyframes shineText {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ============================================
     2. CONTINUOUS 系
     ============================================ */
  .demo-kenburns {
    background: linear-gradient(45deg, #1a3a52, #4a8fb5, #2d5f7c);
    background-size: 200% 200%;
    animation: kenburns 8s ease-in-out infinite alternate;
  }
  .demo-kenburns::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%);
    animation: kenburns 8s ease-in-out infinite alternate;
  }
  @keyframes kenburns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.3) translate(-5%, -5%); }
  }
  .demo-kenburns .label {
    position: relative; z-index: 2; color: #fff; font-size: 14px;
    background: rgba(0,0,0,0.5); padding: 6px 12px; border-radius: 4px;
  }

  .demo-parallax { background: #1a1a2e; }
  .demo-parallax .layer { position: absolute; width: 100%; height: 100%; }
  .demo-parallax .layer1 {
    background: radial-gradient(circle at 20% 50%, #4af 0, transparent 8%),
                radial-gradient(circle at 70% 30%, #f4a 0, transparent 6%),
                radial-gradient(circle at 90% 80%, #af4 0, transparent 7%);
    animation: para1 4s linear infinite;
  }
  .demo-parallax .layer2 {
    background: radial-gradient(circle at 10% 20%, #fff 0, transparent 3%),
                radial-gradient(circle at 80% 60%, #fff 0, transparent 2%),
                radial-gradient(circle at 50% 90%, #fff 0, transparent 3%);
    animation: para2 4s linear infinite;
  }
  @keyframes para1 { from { transform: translateX(0); } to { transform: translateX(-40px); } }
  @keyframes para2 { from { transform: translateX(0); } to { transform: translateX(-100px); } }
  .demo-parallax .label {
    position: relative; z-index: 2; color: #fff; font-size: 14px;
    background: rgba(0,0,0,0.5); padding: 6px 12px; border-radius: 4px;
  }

  .demo-scroll-indicator { background: #222; }
  .demo-scroll-indicator .line {
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 50px;
    background: rgba(255,255,255,0.2); overflow: hidden;
  }
  .demo-scroll-indicator .line::after {
    content: '';
    position: absolute; top: 0;
    width: 100%; height: 25px; background: #fff;
    animation: scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
  }
  .demo-scroll-indicator .text {
    position: absolute; bottom: 90px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px; letter-spacing: 0.3em; opacity: 0.7;
  }

  .demo-marquee { overflow: hidden; background: #111; }
  .demo-marquee .strip {
    display: flex; gap: 30px;
    white-space: nowrap;
    animation: marquee 8s linear infinite;
    font-size: 28px; font-weight: bold; color: #fff;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .demo-gradient {
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
  }
  @keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .demo-gradient .label {
    color: #fff; font-size: 14px;
    background: rgba(0,0,0,0.4); padding: 6px 12px; border-radius: 4px;
  }

  .demo-particle { background: #000; }
  .demo-particle .p {
    position: absolute; width: 4px; height: 4px;
    background: #fff; border-radius: 50%;
    animation: float 3s linear infinite;
  }
  .demo-particle .p:nth-child(1) { left: 10%; animation-delay: 0s; }
  .demo-particle .p:nth-child(2) { left: 25%; animation-delay: 0.5s; }
  .demo-particle .p:nth-child(3) { left: 40%; animation-delay: 1s; }
  .demo-particle .p:nth-child(4) { left: 55%; animation-delay: 1.5s; }
  .demo-particle .p:nth-child(5) { left: 70%; animation-delay: 2s; }
  .demo-particle .p:nth-child(6) { left: 85%; animation-delay: 2.5s; }
  @keyframes float {
    0% { bottom: -10px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { bottom: 100%; opacity: 0; }
  }
  .demo-particle .label {
    position: relative; z-index: 2; color: #fff; font-size: 14px;
  }

  .demo-pulse .item {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: #4af;
    position: relative;
  }
  .demo-pulse .item::before,
  .demo-pulse .item::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid #4af;
    animation: pulseRing 2s ease-out infinite;
  }
  .demo-pulse .item::after { animation-delay: 1s; }
  @keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  .demo-wave {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 100%);
  }
  .demo-wave svg { width: 100%; height: 100%; position: absolute; bottom: 0; }
  .demo-wave path {
    fill: rgba(74,170,255,0.4);
    animation: waveMove 5s ease-in-out infinite;
  }
  @keyframes waveMove {
    0%, 100% { d: path("M0,100 Q50,80 100,100 T200,100 T300,100 T400,100 L400,200 L0,200 Z"); }
    50% { d: path("M0,100 Q50,120 100,100 T200,100 T300,100 T400,100 L400,200 L0,200 Z"); }
  }
  .demo-wave .label {
    position: relative; z-index: 2; color: #fff; font-size: 14px;
  }

  /* ============================================
     3. INTERACTION 系
     ============================================ */
  .demo-hover .btn {
    padding: 12px 30px;
    background: transparent; color: #fff;
    border: 1px solid #fff; border-radius: 30px;
    cursor: pointer; position: relative;
    overflow: hidden;
    transition: color 0.4s;
  }
  .demo-hover .btn::before {
    content: '';
    position: absolute; inset: 0;
    background: #fff;
    transform: translateY(100%);
    transition: transform 0.4s;
    z-index: -1;
  }
  .demo-hover .btn:hover { color: #000; }
  .demo-hover .btn:hover::before { transform: translateY(0); }

  .demo-ripple { background: #1a1a1a; cursor: pointer; }
  .demo-ripple .label { color: #fff; font-size: 13px; pointer-events: none; }
  .ripple {
    position: absolute; border-radius: 50%;
    background: rgba(74, 170, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.8s ease-out;
    pointer-events: none;
  }
  @keyframes ripple {
    to { transform: scale(4); opacity: 0; }
  }

  .demo-magnetic { background: #1a1a1a; }
  .demo-magnetic .btn {
    padding: 14px 24px;
    background: #4af; color: #fff;
    border: none; border-radius: 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
    font-size: 13px;
  }

  .demo-cursor { background: #1a1a1a; cursor: none; position: relative; }
  .demo-cursor .label { color: #fff; font-size: 12px; }
  .cursor-dot {
    position: absolute;
    width: 30px; height: 30px;
    border: 1px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.3s, height 0.3s;
    mix-blend-mode: difference;
  }

  .demo-tilt {
    background: #1a1a1a;
    perspective: 1000px;
  }
  .demo-tilt .card3d {
    width: 140px; height: 90px;
    background: linear-gradient(135deg, #4af, #f4a);
    border-radius: 12px;
    transform-style: preserve-3d;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }

  .demo-spotlight {
    background: #0a0a0a;
    cursor: pointer;
    position: relative;
  }
  .demo-spotlight .label {
    color: #fff; font-size: 14px; position: relative; z-index: 2;
  }
  .demo-spotlight .light {
    position: absolute; pointer-events: none;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(74,170,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    opacity: 0;
  }

  .demo-magnify {
    background: #1a1a1a;
    cursor: zoom-in;
  }
  .demo-magnify .img {
    width: 100%; height: 100%;
    background:
      linear-gradient(45deg, #333 25%, transparent 25%),
      linear-gradient(-45deg, #333 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #333 75%),
      linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 30px 30px;
    background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
    background-color: #1a1a1a;
    transition: transform 0.4s ease;
  }
  .demo-magnify:hover .img { transform: scale(1.3); }

  .demo-drag {
    background: #1a1a1a;
  }
  .demo-drag .draggable {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, #4af, #f4a);
    border-radius: 12px;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    transition: box-shadow 0.2s;
  }
  .demo-drag .draggable:active { cursor: grabbing; }

  /* ============================================
     4. SCROLL 系
     ============================================ */
  .demo-scroll-fade { background: #1a1a1a; }
  .demo-scroll-fade .item {
    color: #fff; font-size: 14px; text-align: center;
    animation: scrollFade 3s ease infinite;
  }
  @keyframes scrollFade {
    0% { opacity: 0; transform: translateY(40px); }
    50%, 80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-40px); }
  }

  .demo-stagger {
    background: #1a1a1a;
    flex-direction: column;
    gap: 8px;
  }
  .demo-stagger .row {
    width: 60%; height: 12px;
    background: #4af; border-radius: 3px;
    animation: staggerIn 3s ease infinite;
    transform: translateX(-100%); opacity: 0;
  }
  .demo-stagger .row:nth-child(1) { animation-delay: 0s; }
  .demo-stagger .row:nth-child(2) { animation-delay: 0.15s; width: 80%; }
  .demo-stagger .row:nth-child(3) { animation-delay: 0.3s; width: 70%; }
  .demo-stagger .row:nth-child(4) { animation-delay: 0.45s; width: 50%; }
  @keyframes staggerIn {
    0% { transform: translateX(-100%); opacity: 0; }
    30%, 70% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
  }

  .demo-sticky { background: #1a1a1a; }
  .demo-sticky .header {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 8px;
    background: rgba(74, 170, 255, 0.9);
    text-align: center; font-size: 11px; color: #fff;
    backdrop-filter: blur(10px);
  }
  .demo-sticky .body {
    color: #fff; font-size: 12px;
    padding: 30px; text-align: center;
    line-height: 1.8; opacity: 0.7;
  }

  .demo-counter .num {
    color: #4af; font-size: 50px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
  }

  .demo-progress {
    background: #1a1a1a;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }
  .demo-progress .bar {
    width: 80%;
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
  }
  .demo-progress .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4af, #f4a);
    width: 0%;
    animation: fillBar 3s ease-in-out infinite;
  }
  @keyframes fillBar {
    0% { width: 0%; }
    50%, 80% { width: 75%; }
    100% { width: 0%; }
  }
  .demo-progress .label {
    color: #fff; font-size: 11px; opacity: 0.7;
  }

  .demo-horizontal {
    background: #1a1a1a;
    overflow: hidden;
  }
  .demo-horizontal .track {
    display: flex;
    gap: 12px;
    animation: hScroll 6s ease-in-out infinite;
  }
  .demo-horizontal .item {
    flex-shrink: 0;
    width: 80px; height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
  }
  .demo-horizontal .item:nth-child(1) { background: #4af; }
  .demo-horizontal .item:nth-child(2) { background: #f4a; }
  .demo-horizontal .item:nth-child(3) { background: #4fa; }
  .demo-horizontal .item:nth-child(4) { background: #fa4; }
  .demo-horizontal .item:nth-child(5) { background: #af4; }
  @keyframes hScroll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-200px); }
  }

  .demo-pin {
    background: #1a1a1a;
    flex-direction: column;
    gap: 8px;
  }
  .demo-pin .pinned {
    background: #4af;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
  }
  .demo-pin .scroll {
    color: #fff;
    font-size: 11px;
    opacity: 0.6;
    animation: pinScroll 3s ease infinite;
  }
  @keyframes pinScroll {
    0%, 100% { transform: translateY(20px); opacity: 0; }
    50% { transform: translateY(0); opacity: 0.6; }
  }

  /* ============================================
     5. ADVANCED / トレンド系
     ============================================ */
  .demo-glitch .item {
    color: #fff; font-size: 26px; font-weight: bold;
    position: relative;
    animation: glitch 2s infinite;
  }
  @keyframes glitch {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    20% { text-shadow: -2px 0 #f0f, 2px 0 #0ff; }
    40% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
    60% { text-shadow: 0 0 0 transparent; }
  }

  .demo-morph .shape {
    width: 90px; height: 90px;
    background: linear-gradient(45deg, #4af, #f4a);
    animation: morph 4s ease-in-out infinite;
  }
  @keyframes morph {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
  }

  .demo-3d { perspective: 600px; }
  .demo-3d .cube {
    width: 80px; height: 80px;
    background: linear-gradient(45deg, #4af, #f4a);
    animation: rotate3d 4s linear infinite;
    transform-style: preserve-3d;
  }
  @keyframes rotate3d {
    from { transform: rotateY(0) rotateX(0); }
    to { transform: rotateY(360deg) rotateX(360deg); }
  }

  .demo-loading .spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #4af;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .demo-skeleton {
    background: #1a1a1a;
    flex-direction: column; gap: 8px; padding: 20px;
  }
  .demo-skeleton .sk {
    height: 12px;
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton 1.5s infinite;
  }
  .demo-skeleton .sk:nth-child(1) { width: 100%; }
  .demo-skeleton .sk:nth-child(2) { width: 80%; }
  .demo-skeleton .sk:nth-child(3) { width: 60%; }
  @keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .demo-glass {
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5);
    background-size: 200% 200%;
    animation: gradient 6s ease infinite;
  }
  .demo-glass .glass-card {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 20px 30px; border-radius: 12px;
    color: #fff; font-size: 14px;
  }

  .demo-noise { background: #1a1a1a; }
  .demo-noise::before {
    content: '';
    position: absolute; inset: 0;
    background: 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.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.5;
    animation: noiseShift 0.2s steps(2) infinite;
  }
  @keyframes noiseShift {
    0% { transform: translate(0,0); }
    50% { transform: translate(2px, -2px); }
    100% { transform: translate(0,0); }
  }
  .demo-noise .label {
    position: relative; z-index: 2; color: #fff; font-size: 14px;
  }

  .demo-neon .item {
    color: #fff; font-size: 28px; font-weight: bold;
    text-shadow:
      0 0 10px #4af,
      0 0 20px #4af,
      0 0 30px #4af;
    animation: neon 1.5s ease-in-out infinite alternate;
  }
  @keyframes neon {
    from { text-shadow: 0 0 10px #4af, 0 0 20px #4af, 0 0 30px #4af; }
    to { text-shadow: 0 0 5px #4af, 0 0 10px #4af, 0 0 15px #4af; }
  }

  .demo-liquid {
    background: #1a1a1a;
  }
  .demo-liquid svg {
    width: 100px; height: 100px;
  }
  .demo-liquid .blob {
    fill: url(#blobGrad);
    animation: blobMorph 6s ease-in-out infinite;
  }
  @keyframes blobMorph {
    0%, 100% { d: path("M50,10 C70,10 90,30 90,50 C90,70 70,90 50,90 C30,90 10,70 10,50 C10,30 30,10 50,10 Z"); }
    33% { d: path("M50,10 C75,15 88,35 85,55 C82,75 60,90 45,85 C25,80 10,65 15,45 C20,25 35,8 50,10 Z"); }
    66% { d: path("M50,15 C68,8 85,25 90,48 C92,68 75,88 55,90 C32,92 12,72 12,52 C12,30 30,18 50,15 Z"); }
  }

  .demo-tunnel {
    background: #000;
    overflow: hidden;
  }
  .demo-tunnel .ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 50px; height: 50px;
    margin: -25px 0 0 -25px;
    border: 2px solid #4af;
    border-radius: 50%;
    animation: tunnel 2s linear infinite;
  }
  .demo-tunnel .ring:nth-child(2) { animation-delay: 0.5s; }
  .demo-tunnel .ring:nth-child(3) { animation-delay: 1s; }
  .demo-tunnel .ring:nth-child(4) { animation-delay: 1.5s; }
  @keyframes tunnel {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(8); opacity: 0; }
  }

  .demo-orb {
    background: radial-gradient(circle at center, #1a0033 0%, #000 100%);
  }
  .demo-orb .orb {
    width: 80px; height: 80px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 30%, #fff, #4af 30%, #048 80%);
    box-shadow:
      0 0 40px rgba(74,170,255,0.6),
      inset 0 0 20px rgba(255,255,255,0.3);
    animation: orbFloat 4s ease-in-out infinite;
  }
  @keyframes orbFloat {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
  }

  /* ============================================
     6. UI / マイクロインタラクション
     ============================================ */
  .demo-toggle {
    background: #1a1a1a;
  }
  .demo-toggle .toggle {
    width: 60px; height: 32px;
    background: #4af;
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
  }
  .demo-toggle .toggle::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 24px; height: 24px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
  }
  .demo-toggle .toggle.on::after { transform: translateX(28px); }

  .demo-checkbox {
    background: #1a1a1a;
  }
  .demo-checkbox .check {
    width: 30px; height: 30px;
    border: 2px solid #4af;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
  }
  .demo-checkbox .check.checked {
    background: #4af;
  }
  .demo-checkbox .check::after {
    content: '';
    position: absolute;
    top: 4px; left: 9px;
    width: 7px; height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s;
  }
  .demo-checkbox .check.checked::after {
    transform: rotate(45deg) scale(1);
  }

  .demo-heart {
    background: #1a1a1a;
  }
  .demo-heart .heart {
    width: 40px; height: 36px;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s;
  }
  .demo-heart .heart svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: #f4a;
    stroke-width: 2;
    transition: fill 0.3s;
  }
  .demo-heart .heart.liked svg {
    fill: #f4a;
    animation: heartPop 0.5s ease;
  }
  @keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  .demo-ham {
    background: #1a1a1a;
  }
  .demo-ham .ham {
    width: 30px; height: 22px;
    position: relative;
    cursor: pointer;
  }
  .demo-ham .ham span {
    display: block;
    position: absolute;
    height: 2px; width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s ease;
  }
  .demo-ham .ham span:nth-child(1) { top: 0; }
  .demo-ham .ham span:nth-child(2) { top: 10px; }
  .demo-ham .ham span:nth-child(3) { top: 20px; }
  .demo-ham .ham.open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
  .demo-ham .ham.open span:nth-child(2) { opacity: 0; }
  .demo-ham .ham.open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

  .demo-tooltip {
    background: #1a1a1a;
    overflow: visible;
  }
  .demo-tooltip .target {
    color: #4af;
    font-size: 13px;
    cursor: help;
    position: relative;
    border-bottom: 1px dashed #4af;
  }
  .demo-tooltip .tip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    color: #000;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    margin-bottom: 8px;
  }
  .demo-tooltip .tip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
  }
  .demo-tooltip .target:hover .tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .demo-accordion {
    background: #1a1a1a;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    align-items: stretch;
  }
  .demo-accordion .acc-item {
    background: #2a2a2a;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
  }
  .demo-accordion .acc-head {
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
  }
  .demo-accordion .acc-head::after {
    content: '+';
    transition: transform 0.3s;
  }
  .demo-accordion .acc-item.open .acc-head::after {
    transform: rotate(45deg);
  }
  .demo-accordion .acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: #aaa;
    font-size: 11px;
  }
  .demo-accordion .acc-body p {
    padding: 0 12px 8px;
  }
  .demo-accordion .acc-item.open .acc-body { max-height: 100px; }

  .demo-tabs {
    background: #1a1a1a;
    flex-direction: column;
    width: 100%;
    padding: 20px;
  }
  .demo-tabs .tab-head {
    display: flex;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
    width: 100%;
  }
  .demo-tabs .tab-btn {
    padding: 8px 16px;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    transition: color 0.3s;
  }
  .demo-tabs .tab-btn.active { color: #4af; }
  .demo-tabs .indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: #4af;
    transition: all 0.3s ease;
  }
  .demo-tabs .tab-content {
    color: #ccc;
    font-size: 11px;
    padding: 8px 0;
  }

  .demo-modal {
    background: #1a1a1a;
    overflow: hidden;
    cursor: pointer;
  }
  .demo-modal .modal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: #fff;
    color: #000;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 12px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .demo-modal .backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .demo-modal.open .modal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .demo-modal.open .backdrop { opacity: 1; }
  .demo-modal .label { color: #fff; font-size: 12px; opacity: 0.7; }

  /* ============================================
     7. PAGE TRANSITION 系
     ============================================ */
  .demo-curtain { background: #1a1a1a; overflow: hidden; }
  .demo-curtain .curtain {
    position: absolute;
    inset: 0;
    background: #4af;
    animation: curtain 3s ease-in-out infinite;
  }
  @keyframes curtain {
    0% { transform: translateY(-100%); }
    33% { transform: translateY(0); }
    66% { transform: translateY(0); }
    100% { transform: translateY(100%); }
  }
  .demo-curtain .label {
    position: relative; z-index: 2;
    color: #fff; font-size: 14px; font-weight: bold;
  }

  .demo-circle-trans {
    background: #1a1a1a;
    overflow: hidden;
  }
  .demo-circle-trans .circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #4af;
    transform: translate(-50%, -50%);
    animation: circleExpand 3s ease-in-out infinite;
  }
  @keyframes circleExpand {
    0% { width: 0; height: 0; }
    40% { width: 600px; height: 600px; }
    60% { width: 600px; height: 600px; }
    100% { width: 0; height: 0; }
  }

  .demo-page-load {
    background: #000;
    overflow: hidden;
  }
  .demo-page-load .bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #4af;
    transform-origin: left;
    animation: pageBar 3s ease infinite;
  }
  .demo-page-load .num {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
  }
  @keyframes pageBar {
    0% { transform: scaleX(0); }
    80% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
  }

  /* ============================================
     8. SVG / 描画系
     ============================================ */
  .demo-draw svg {
    width: 100px; height: 100px;
  }
  .demo-draw path {
    fill: none;
    stroke: #4af;
    stroke-width: 2;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw 3s ease-in-out infinite;
  }
  @keyframes draw {
    0% { stroke-dashoffset: 300; }
    50%, 80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -300; }
  }

  .demo-svg-fill svg {
    width: 100px; height: 100px;
  }
  .demo-svg-fill .star-outline {
    fill: none;
    stroke: #4af;
    stroke-width: 2;
  }
  .demo-svg-fill .star-fill {
    fill: #4af;
    clip-path: inset(100% 0 0 0);
    animation: svgFill 3s ease-in-out infinite;
  }
  @keyframes svgFill {
    0% { clip-path: inset(100% 0 0 0); }
    50%, 80% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(100% 0 0 0); }
  }

  .demo-line-trace {
    background: #1a1a1a;
  }
  .demo-line-trace svg {
    width: 80%; height: 80px;
  }
  .demo-line-trace .line {
    stroke: #4af;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: traceLine 4s ease-in-out infinite;
  }
  @keyframes traceLine {
    0% { stroke-dashoffset: 500; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -500; }
  }

  /* ============================================
     9. 物理ベース
     ============================================ */
  .demo-spring .item {
    width: 60px; height: 60px;
    background: #4af; border-radius: 50%;
    animation: spring 1.5s cubic-bezier(0.68,-0.55,0.265,1.55) infinite;
  }
  @keyframes spring {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
  }

  .demo-elastic .item {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #4af, #f4a);
    border-radius: 12px;
    animation: elastic 2s ease-in-out infinite;
  }
  @keyframes elastic {
    0%, 100% { transform: scale(1, 1); }
    25% { transform: scale(1.3, 0.7); }
    50% { transform: scale(0.8, 1.2); }
    75% { transform: scale(1.1, 0.9); }
  }

  .demo-pendulum {
    background: #1a1a1a;
    overflow: hidden;
  }
  .demo-pendulum .rope {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    background: #444;
    transform-origin: top center;
    animation: pendulum 2s ease-in-out infinite alternate;
  }
  .demo-pendulum .ball {
    position: absolute;
    bottom: -15px;
    left: -14px;
    width: 30px; height: 30px;
    background: #4af;
    border-radius: 50%;
  }
  @keyframes pendulum {
    0% { transform: rotate(-30deg); }
    100% { transform: rotate(30deg); }
  }

  footer {
    text-align: center;
    padding: 40px 20px;
    color: #555;
    font-size: 12px;
    border-top: 1px solid #222;
    margin-top: 30px;
  }
  footer p { margin-bottom: 8px; }

  @media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
  }


/* ===== more catalog animations ===== */

.demo-mydrop .item { animation: myDrop 2.4s cubic-bezier(.5,1.7,.4,.9) infinite; }
@keyframes myDrop {
  0% { transform: translateY(-200%); opacity: 0; }
  20% { transform: translateY(0); opacity: 1; }
  30% { transform: translateY(-30px); }
  45% { transform: translateY(0); }
  55% { transform: translateY(-12px); }
  65%, 80% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-200%); opacity: 0; }
}


.demo-myslidecross .item { animation: mySlideCross 3s ease infinite; }
@keyframes mySlideCross { 0% { transform: translateX(-100px); opacity: 0; } 35%, 65% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100px); opacity: 0; } }


.demo-myrevealdiag .item { animation: myRevealDiag 3s ease infinite; }
@keyframes myRevealDiag {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  40%, 70% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}


.demo-myblinds { perspective: 600px; }
.demo-myblinds .blinds { position: relative; width: 200px; height: 60px; transform-style: preserve-3d; }
.demo-myblinds .blinds i { position: absolute; left: 0; right: 0; height: 12px; background: #4af; animation: myBlinds 3s ease infinite; }
.demo-myblinds .blinds i:nth-child(1) { top: 0; }
.demo-myblinds .blinds i:nth-child(2) { top: 12px; animation-delay: .1s; }
.demo-myblinds .blinds i:nth-child(3) { top: 24px; animation-delay: .2s; }
.demo-myblinds .blinds i:nth-child(4) { top: 36px; animation-delay: .3s; }
.demo-myblinds .blinds i:nth-child(5) { top: 48px; animation-delay: .4s; }
.demo-myblinds .blinds .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
@keyframes myBlinds { 0%, 30% { transform: rotateX(0); } 60%, 90% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }


.demo-mybreath .dot { width: 80px; height: 80px; background: radial-gradient(circle, #ffd28c, transparent 70%); border-radius: 50%; animation: myBreath 3s ease-in-out infinite; }
@keyframes myBreath { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }


.demo-myorbit { position: relative; }
.demo-myorbit .center { width: 24px; height: 24px; background: #ffd28c; border-radius: 50%; box-shadow: 0 0 20px #ffd28c; }
.demo-myorbit .orb { position: absolute; inset: 0; animation: myOrbit 3.5s linear infinite; }
.demo-myorbit .orb i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; background: #4af; border-radius: 50%; transform: translateY(-50%); }
@keyframes myOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }


.demo-mysoundwave .wave { display: flex; gap: 4px; align-items: flex-end; height: 80px; }
.demo-mysoundwave .wave i { width: 6px; background: linear-gradient(to top, #4af, #f4a); border-radius: 3px; animation: mySoundwave 1.2s ease-in-out infinite; }
.demo-mysoundwave .wave i:nth-child(1) { animation-delay: 0s; }
.demo-mysoundwave .wave i:nth-child(2) { animation-delay: .1s; }
.demo-mysoundwave .wave i:nth-child(3) { animation-delay: .2s; }
.demo-mysoundwave .wave i:nth-child(4) { animation-delay: .3s; }
.demo-mysoundwave .wave i:nth-child(5) { animation-delay: .2s; }
.demo-mysoundwave .wave i:nth-child(6) { animation-delay: .1s; }
.demo-mysoundwave .wave i:nth-child(7) { animation-delay: 0s; }
@keyframes mySoundwave { 0%, 100% { height: 20%; } 50% { height: 100%; } }


.demo-mytwinkle { position: relative; width: 200px; height: 100px; }
.demo-mytwinkle i { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px #fff; animation: myTwinkle 2s ease-in-out infinite; }
.demo-mytwinkle i:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.demo-mytwinkle i:nth-child(2) { top: 60%; left: 25%; animation-delay: .4s; }
.demo-mytwinkle i:nth-child(3) { top: 30%; left: 50%; animation-delay: .8s; }
.demo-mytwinkle i:nth-child(4) { top: 70%; left: 70%; animation-delay: 1.2s; }
.demo-mytwinkle i:nth-child(5) { top: 40%; left: 85%; animation-delay: 1.6s; }
@keyframes myTwinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.4); } }


.demo-myaurora { position: relative; overflow: hidden; }
.demo-myaurora::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, #4af, #f4a, #ffd28c, #4af); filter: blur(40px); animation: myAurora 6s linear infinite; }
@keyframes myAurora { from { transform: rotate(0); } to { transform: rotate(360deg); } }


.demo-myswitch .switch { width: 64px; height: 32px; background: rgba(255,255,255,.1); border-radius: 16px; position: relative; animation: mySwitchBg 2.4s ease-in-out infinite; }
.demo-myswitch .switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: #fff; border-radius: 50%; animation: mySwitchPeg 2.4s ease-in-out infinite; }
@keyframes mySwitchBg { 0%,30%,70%,100% { background: rgba(255,255,255,.1); } 40%,60% { background: #4af; } }
@keyframes mySwitchPeg { 0%,30%,70%,100% { left: 4px; } 40%,60% { left: 36px; } }


.demo-mymodal { position: relative; }
.demo-mymodal .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: myFadeBg 3.6s ease infinite; }
.demo-mymodal .dialog { position: relative; padding: 16px 24px; background: #161616; border: 1px solid #333; border-radius: 8px; color: #fff; font-size: 14px; animation: myModalIn 3.6s cubic-bezier(.2,.8,.4,1.4) infinite; }
@keyframes myFadeBg { 0%,15%,85%,100% { opacity: 0; } 30%,70% { opacity: 1; } }
@keyframes myModalIn { 0%,15%,85%,100% { opacity: 0; transform: scale(.85) translateY(20px); } 30%,70% { opacity: 1; transform: scale(1) translateY(0); } }


.demo-mydrawer { position: relative; padding: 0; }
.demo-mydrawer .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: #4af; animation: myDrawer 3s cubic-bezier(.2,.6,.2,1) infinite; }
@keyframes myDrawer { 0%,15%,85%,100% { transform: translateX(100%); } 30%,70% { transform: translateX(0); } }


.demo-mysnackbar .bar { background: #161616; color: #fff; padding: 10px 16px; border-radius: 8px; border: 1px solid #333; font-size: 13px; animation: mySnackbar 3.5s ease infinite; }
@keyframes mySnackbar { 0%,12%,88%,100% { opacity: 0; transform: translateY(40px); } 20%,80% { opacity: 1; transform: translateY(0); } }


.demo-mybadge .wrap { position: relative; }
.demo-mybadge .icon { font-size: 36px; }
.demo-mybadge .count { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: #f4a; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; animation: myBadge 1.6s ease-in-out infinite; }
@keyframes myBadge { 0%,100% { box-shadow: 0 0 0 0 rgba(244,74,170,.6); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(244,74,170,0); transform: scale(1.15); } }


.demo-myflipcard { perspective: 800px; }
.demo-myflipcard .inner { width: 120px; height: 80px; position: relative; transform-style: preserve-3d; animation: myFlip 4s ease-in-out infinite; }
.demo-myflipcard .face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-weight: 700; letter-spacing: .15em; backface-visibility: hidden; }
.demo-myflipcard .front { background: #4af; }
.demo-myflipcard .back { background: #f4a; transform: rotateY(180deg); }
@keyframes myFlip { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }


.demo-myloadbars .bars { display: flex; gap: 6px; align-items: flex-end; height: 50px; }
.demo-myloadbars .bars i { width: 8px; height: 100%; background: #4af; border-radius: 4px; animation: myLoadBars .9s ease-in-out infinite; }
.demo-myloadbars .bars i:nth-child(2) { animation-delay: .12s; }
.demo-myloadbars .bars i:nth-child(3) { animation-delay: .24s; }
.demo-myloadbars .bars i:nth-child(4) { animation-delay: .36s; }
@keyframes myLoadBars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }


.demo-myprogstrip .bar { width: 75%; height: 18px; background: linear-gradient(45deg, rgba(74,170,255,.3) 25%, rgba(74,170,255,.6) 25%, rgba(74,170,255,.6) 50%, rgba(74,170,255,.3) 50%, rgba(74,170,255,.3) 75%, rgba(74,170,255,.6) 75%); background-size: 28px 28px; border-radius: 9px; animation: myProgStrip 1s linear infinite; }
@keyframes myProgStrip { from { background-position: 0 0; } to { background-position: 28px 0; } }


.demo-myspinner .spinner { width: 60px; height: 60px; border: 4px solid transparent; border-top-color: #4af; border-bottom-color: #f4a; border-radius: 50%; animation: mySpinDual 1.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes mySpinDual { to { transform: rotate(360deg); } }


.demo-mypulsecta .btn { background: #4af; color: #fff; padding: 12px 24px; border: none; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; animation: myPulseCta 2s ease-in-out infinite; }
@keyframes myPulseCta { 0%,100% { box-shadow: 0 0 0 0 rgba(74,170,255,.6); transform: scale(1); } 50% { box-shadow: 0 0 0 16px rgba(74,170,255,0); transform: scale(1.04); } }


.demo-myheartbeat .heart { font-size: 48px; color: #f4a; animation: myHeartBeat 1.4s ease-in-out infinite; }
@keyframes myHeartBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 28% { transform: scale(1); } 42% { transform: scale(1.2); } 70% { transform: scale(1); } }


.demo-mystars { display: flex; gap: 6px; }
.demo-mystars i { width: 24px; height: 24px; background: rgba(255,255,255,.15); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: myStarFill 3s ease-in-out infinite; }
.demo-mystars i:nth-child(2) { animation-delay: .15s; }
.demo-mystars i:nth-child(3) { animation-delay: .3s; }
.demo-mystars i:nth-child(4) { animation-delay: .45s; }
.demo-mystars i:nth-child(5) { animation-delay: .6s; }
@keyframes myStarFill { 0%,15%,85%,100% { background: rgba(255,255,255,.15); transform: scale(1); } 30%,70% { background: #ffd28c; transform: scale(1.15); } }


.demo-myglitch .item { animation: myGlitch 1.4s steps(8) infinite; }
@keyframes myGlitch { 0%, 100% { transform: translate(0); text-shadow: none; } 20% { transform: translate(-3px, 2px); text-shadow: 2px 0 #f4a, -2px 0 #4af; } 40% { transform: translate(3px, -1px); text-shadow: -2px 0 #f4a, 2px 0 #4af; } 60% { transform: translate(-2px, 1px); text-shadow: 2px 0 #f4a, -2px 0 #4af; } 80% { transform: translate(2px, -2px); text-shadow: -2px 0 #f4a, 2px 0 #4af; } }


.demo-myneon .item { animation: myNeon 2s ease-in-out infinite; }
@keyframes myNeon { 0%,100% { text-shadow: 0 0 4px #4af, 0 0 12px #4af, 0 0 24px #4af; opacity: .85; } 50% { text-shadow: 0 0 8px #4af, 0 0 24px #4af, 0 0 48px #4af, 0 0 72px #4af; opacity: 1; } }


.demo-myliquid .blob { width: 100px; height: 100px; background: radial-gradient(circle at 30% 30%, #4af, #f4a); animation: myLiquid 6s ease-in-out infinite; }
@keyframes myLiquid { 0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); } 33% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(120deg); } 66% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; transform: rotate(240deg); } }


.demo-mysweep .item { animation: mySweep 3s linear infinite; }
@keyframes mySweep { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }


.demo-mywavy { display: flex; gap: 8px; }
.demo-mywavy .ch { font-size: 36px; font-weight: 700; color: #4af; display: inline-block; animation: myWavy 1.6s ease-in-out infinite; }
.demo-mywavy .ch:nth-child(1) { animation-delay: 0s; }
.demo-mywavy .ch:nth-child(2) { animation-delay: .15s; }
.demo-mywavy .ch:nth-child(3) { animation-delay: .3s; }
.demo-mywavy .ch:nth-child(4) { animation-delay: .45s; }
@keyframes myWavy { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }


.demo-mydecode { position: relative; font-family: 'Courier New', monospace; font-size: 22px; color: #4af; }
.demo-mydecode .line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; letter-spacing: .12em; }
.demo-mydecode .line1 { animation: myDecodeOff 2.4s steps(1) infinite; }
.demo-mydecode .line2 { animation: myDecodeOn 2.4s steps(1) infinite; }
@keyframes myDecodeOff { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes myDecodeOn { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } }


.demo-myscrollhint { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.demo-myscrollhint .mouse { width: 22px; height: 38px; border: 2px solid #4af; border-radius: 14px; position: relative; }
.demo-myscrollhint .mouse span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #4af; border-radius: 2px; transform: translateX(-50%); animation: myScrollDot 1.8s ease-in-out infinite; }
.demo-myscrollhint .label { font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: .3em; color: #888; }
@keyframes myScrollDot { 0%,100% { opacity: 0; top: 5px; } 50% { opacity: 1; top: 18px; } }


.demo-mypend .wrap { position: relative; transform-origin: top center; animation: myPend 2s ease-in-out infinite; }
.demo-mypend .line { width: 2px; height: 80px; background: #888; margin: 0 auto; }
.demo-mypend .ball { width: 24px; height: 24px; background: #ffd28c; border-radius: 50%; }
@keyframes myPend { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(25deg); } }


.demo-myspring .ball { width: 50px; height: 50px; background: #4af; border-radius: 50%; animation: mySpring 2.4s cubic-bezier(.5,1.7,.4,.9) infinite; }
@keyframes mySpring { 0% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(-80px) scale(.9, 1.1); } 40% { transform: translateY(0) scale(1.4, .6); } 60% { transform: translateY(-30px) scale(.95, 1.05); } 80% { transform: translateY(0) scale(1.1, .9); } 100% { transform: translateY(0) scale(1, 1); } }


.demo-myfall { position: relative; overflow: hidden; }
.demo-myfall i { position: absolute; top: -20px; width: 14px; height: 14px; background: #ffd28c; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: myFall 4s linear infinite; }
.demo-myfall i:nth-child(1) { left: 15%; animation-delay: 0s; }
.demo-myfall i:nth-child(2) { left: 35%; background: #f4a; animation-delay: 1s; }
.demo-myfall i:nth-child(3) { left: 60%; background: #ff8a4d; animation-delay: 2s; }
.demo-myfall i:nth-child(4) { left: 85%; animation-delay: 3s; }
@keyframes myFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(220px) rotate(360deg); opacity: 0; } }


.demo-mywipeup { position: relative; }
.demo-mywipeup .wipe { position: absolute; inset: 0; background: #4af; animation: myWipeUp 3s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes myWipeUp { 0%, 20% { transform: translateY(100%); } 40%, 60% { transform: translateY(0); } 80%, 100% { transform: translateY(-100%); } }


.demo-myiris { position: relative; }
.demo-myiris .iris { position: absolute; inset: 0; background: #161616; animation: myIris 3s ease infinite; }
@keyframes myIris { 0%, 20% { clip-path: circle(0% at 50% 50%); } 50% { clip-path: circle(75% at 50% 50%); } 80%, 100% { clip-path: circle(0% at 50% 50%); } }


.demo-mydraw svg path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: myDraw 3s ease-in-out infinite; }
@keyframes myDraw { 0%, 10% { stroke-dashoffset: 200; } 50%, 70% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: -200; } }


.demo-mymorph .shape { width: 90px; height: 90px; background: linear-gradient(135deg, #4af, #f4a); animation: myMorph 5s ease-in-out infinite; }
@keyframes myMorph { 0%, 100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } 25% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } 50% { clip-path: circle(50% at 50% 50%); } 75% { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); } }

/* ===== FV/hero animations ===== */

.demo-fvmask .item { animation: fvMask 3s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes fvMask { 0%, 8% { clip-path: inset(0 100% 0 0); } 40%, 70% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 0 0 100%); } }


.demo-fvwords .line { display: flex; gap: 12px; overflow: hidden; }
.demo-fvwords .line span { display: inline-block; color: #fff; font-size: 24px; animation: fvWordIn 3s cubic-bezier(.2,.6,.2,1) infinite; transform: translateY(100%); }
.demo-fvwords .line span:nth-child(1) { animation-delay: 0s; }
.demo-fvwords .line span:nth-child(2) { animation-delay: .15s; }
@keyframes fvWordIn { 0%, 8% { transform: translateY(100%); } 40%, 70% { transform: translateY(0); } 92%, 100% { transform: translateY(-100%); } }


.demo-fvletters { display: flex; gap: 4px; }
.demo-fvletters .ch { display: inline-block; color: #fff; font-size: 36px; font-weight: 300; letter-spacing: .1em; animation: fvLetter 3s cubic-bezier(.2,.6,.2,1) infinite; opacity: 0; }
.demo-fvletters .ch:nth-child(1) { animation-delay: 0s; }
.demo-fvletters .ch:nth-child(2) { animation-delay: .08s; }
.demo-fvletters .ch:nth-child(3) { animation-delay: .16s; }
.demo-fvletters .ch:nth-child(4) { animation-delay: .24s; }
.demo-fvletters .ch:nth-child(5) { animation-delay: .32s; }
.demo-fvletters .ch:nth-child(6) { animation-delay: .4s; }
@keyframes fvLetter { 0%, 5% { opacity: 0; transform: translateY(30px); } 35%, 70% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(-30px); } }


.demo-fvsplit { position: relative; height: 60px; overflow: hidden; }
.demo-fvsplit span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 36px; font-weight: 300; letter-spacing: .15em; color: #fff; }
.demo-fvsplit .top { top: 0; clip-path: inset(0 0 50% 0); animation: fvSplitTop 3s ease infinite; }
.demo-fvsplit .bot { bottom: 0; clip-path: inset(50% 0 0 0); animation: fvSplitBot 3s ease infinite; }
@keyframes fvSplitTop { 0% { transform: translate(-50%, -100%); } 40%, 70% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -100%); } }
@keyframes fvSplitBot { 0% { transform: translate(-50%, 100%); } 40%, 70% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 100%); } }


.demo-fvgradflow .item { font-size: 32px; font-weight: 700; letter-spacing: .05em; background: linear-gradient(120deg, #ffd28c 0%, #ff8a4d 25%, #ff5599 50%, #7c3aed 75%, #ffd28c 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fvGradFlow 5s linear infinite; }
@keyframes fvGradFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }


.demo-fvbignum .num { font-family: 'Cormorant Garamond', serif; font-size: 80px; font-weight: 300; color: #ffd28c; letter-spacing: -.02em; animation: fvBigNum 3s cubic-bezier(.2,.6,.2,1) infinite; display: inline-block; }
@keyframes fvBigNum { 0%, 5% { opacity: 0; transform: translateY(40px) scale(.95); letter-spacing: .2em; } 35%, 70% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -.02em; } 95%, 100% { opacity: 0; transform: translateY(-40px) scale(1.05); letter-spacing: .2em; } }


.demo-fvspot { position: relative; }
.demo-fvspot::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,210,140,.4), transparent 50%); animation: fvSpot 4s ease-in-out infinite; }
@keyframes fvSpot { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }


.demo-fvmesh { position: relative; overflow: hidden; }
.demo-fvmesh::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 20% 30%, rgba(74,170,255,.5), transparent 40%), radial-gradient(at 75% 25%, rgba(244,74,170,.4), transparent 40%), radial-gradient(at 50% 80%, rgba(255,210,140,.4), transparent 50%); animation: fvMesh 8s ease-in-out infinite; filter: blur(20px); }
@keyframes fvMesh { 0%, 100% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.2) translate(20px, -10px); } }


.demo-fvgrid { position: relative; }
.demo-fvgrid .hl { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,210,140,.4); transform: scaleX(0); transform-origin: left; animation: fvGridH 4s ease-out infinite; }
.demo-fvgrid .vl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,210,140,.4); transform: scaleY(0); transform-origin: top; animation: fvGridV 4s ease-out infinite; }
.demo-fvgrid .vl:nth-child(4) { animation-delay: .1s; }
.demo-fvgrid .vl:nth-child(5) { animation-delay: .2s; }
.demo-fvgrid .vl:nth-child(6) { animation-delay: .3s; }
.demo-fvgrid .hl:nth-child(2) { animation-delay: .15s; }
.demo-fvgrid .hl:nth-child(3) { animation-delay: .3s; }
@keyframes fvGridH { 0%, 5% { transform: scaleX(0); } 30%, 70% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes fvGridV { 0%, 5% { transform: scaleY(0); } 30%, 70% { transform: scaleY(1); } 95%, 100% { transform: scaleY(0); transform-origin: bottom; } }


.demo-fvparticles { position: relative; overflow: hidden; }
.demo-fvparticles i { position: absolute; width: 4px; height: 4px; background: #ffd28c; border-radius: 50%; box-shadow: 0 0 8px #ffd28c; animation: fvParticle 6s linear infinite; }
.demo-fvparticles i:nth-child(1) { left: 10%; animation-delay: 0s; }
.demo-fvparticles i:nth-child(2) { left: 25%; animation-delay: 1s; }
.demo-fvparticles i:nth-child(3) { left: 40%; animation-delay: 2s; }
.demo-fvparticles i:nth-child(4) { left: 55%; animation-delay: 3s; }
.demo-fvparticles i:nth-child(5) { left: 70%; animation-delay: 4s; }
.demo-fvparticles i:nth-child(6) { left: 85%; animation-delay: 5s; }
.demo-fvparticles i:nth-child(7) { left: 30%; animation-delay: 2.5s; width: 6px; height: 6px; }
.demo-fvparticles i:nth-child(8) { left: 60%; animation-delay: 4.5s; width: 6px; height: 6px; }
@keyframes fvParticle { 0% { bottom: -10px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { bottom: 110%; opacity: 0; } }


.demo-fvwaves { position: relative; overflow: hidden; }
.demo-fvwaves .w1 { animation: fvWaveSlide 4s linear infinite; }
.demo-fvwaves .w2 { animation: fvWaveSlide 6s linear infinite reverse; }
.demo-fvwaves .w3 { animation: fvWaveSlide 8s linear infinite; }
@keyframes fvWaveSlide { from { transform: translateX(0); } to { transform: translateX(-100px); } }


.demo-fvstripes { background: repeating-linear-gradient(45deg, #4af 0 20px, #f4a 20px 40px); background-size: 56.5px 56.5px; animation: fvStripes 4s linear infinite; }
@keyframes fvStripes { from { background-position: 0 0; } to { background-position: 113px 0; } }


.demo-fvsweep .item { animation: fvSweep 3s linear infinite; }
@keyframes fvSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


.demo-fvstat .wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.demo-fvstat .num { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: #ffd28c; animation: fvStat 3s cubic-bezier(.2,.8,.4,1.4) infinite; display: inline-block; }
.demo-fvstat .unit { font-size: 36px; color: #ffd28c; vertical-align: top; }
.demo-fvstat .cap { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: .4em; color: #888; }
@keyframes fvStat { 0%, 5% { transform: scale(.5); opacity: 0; } 35%, 70% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(1.3); opacity: 0; } }


.demo-fvburst svg { animation: fvBurstRotate 12s linear infinite; }
.demo-fvburst svg .rays line { animation: fvBurstRays 2.4s ease-in-out infinite; transform-origin: 40px 40px; }
@keyframes fvBurstRotate { to { transform: rotate(360deg); } }
@keyframes fvBurstRays { 0%, 100% { stroke-dasharray: 0 12; } 50% { stroke-dasharray: 12 0; } }


.demo-fvlogodraw svg path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: fvLogoDraw 3s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes fvLogoDraw { 0%, 5% { stroke-dashoffset: 200; } 40%, 70% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: -200; } }


.demo-fvchevron { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.demo-fvchevron i { width: 18px; height: 18px; border-right: 2px solid #ffd28c; border-bottom: 2px solid #ffd28c; transform: rotate(45deg); animation: fvChevron 1.6s ease-in-out infinite; }
.demo-fvchevron i:nth-child(2) { animation-delay: .15s; }
.demo-fvchevron i:nth-child(3) { animation-delay: .3s; }
@keyframes fvChevron { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }


.demo-fvkb { overflow: hidden; }
.demo-fvkb .img { width: 100%; height: 100%; background: linear-gradient(135deg, #4af, #f4a, #ffd28c); animation: fvKB 8s ease-in-out infinite alternate; }
@keyframes fvKB { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.15) translate(-3%, -3%); } }


.demo-fvcinema { position: relative; overflow: hidden; }
.demo-fvcinema .top, .demo-fvcinema .bot { position: absolute; left: 0; right: 0; height: 40%; background: #000; }
.demo-fvcinema .top { top: 0; animation: fvCinemaTop 4s cubic-bezier(.7,0,.2,1) infinite; }
.demo-fvcinema .bot { bottom: 0; animation: fvCinemaBot 4s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes fvCinemaTop { 0%, 8% { transform: translateY(-100%); } 30% { transform: translateY(0); } 60% { transform: translateY(0); } 92%, 100% { transform: translateY(-100%); } }
@keyframes fvCinemaBot { 0%, 8% { transform: translateY(100%); } 30% { transform: translateY(0); } 60% { transform: translateY(0); } 92%, 100% { transform: translateY(100%); } }


.demo-fvtype .line { font-family: 'Hiragino Sans', sans-serif; font-size: 16px; color: #ffd28c; letter-spacing: .15em; border-right: 2px solid #ffd28c; white-space: nowrap; overflow: hidden; width: 0; animation: fvType 3.5s steps(8) infinite, fvCursor .7s step-end infinite; }
@keyframes fvType { 0%, 5% { width: 0; } 50%, 80% { width: 8em; } 95%, 100% { width: 0; } }
@keyframes fvCursor { 50% { border-color: transparent; } }


.demo-fveyebrow .wrap { display: flex; align-items: center; gap: 12px; }
.demo-fveyebrow .line { width: 40px; height: 1px; background: #ffd28c; transform-origin: left; animation: fvEyeLine 3s ease infinite; }
.demo-fveyebrow .label { font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: .4em; color: #ffd28c; animation: fvEyeFade 3s ease infinite; }
@keyframes fvEyeLine { 0%, 5% { transform: scaleX(0); } 35%, 70% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes fvEyeFade { 0%, 15% { opacity: 0; transform: translateX(-8px); } 35%, 70% { opacity: 1; transform: translateX(0); } 90%, 100% { opacity: 0; } }


.demo-fvcurtain { position: relative; overflow: hidden; }
.demo-fvcurtain .left, .demo-fvcurtain .right { position: absolute; top: 0; bottom: 0; width: 50%; background: #161616; border-left: 1px solid rgba(255,210,140,.2); }
.demo-fvcurtain .left { left: 0; animation: fvCurtainL 4s cubic-bezier(.7,0,.2,1) infinite; }
.demo-fvcurtain .right { right: 0; animation: fvCurtainR 4s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes fvCurtainL { 0%, 10% { transform: translateX(0); } 40%, 70% { transform: translateX(-100%); } 95%, 100% { transform: translateX(0); } }
@keyframes fvCurtainR { 0%, 10% { transform: translateX(0); } 40%, 70% { transform: translateX(100%); } 95%, 100% { transform: translateX(0); } }


.demo-fvload { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 70%; }
.demo-fvload .label { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: .4em; color: #ffd28c; }
.demo-fvload .bar { width: 100%; height: 2px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.demo-fvload .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #ffd28c; animation: fvLoadFill 3s cubic-bezier(.5,.1,.2,1) infinite; }
.demo-fvload .pct { font-family: 'Cormorant Garamond', serif; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .2em; }
@keyframes fvLoadFill { 0%, 5% { width: 0; } 60%, 80% { width: 100%; } 95%, 100% { width: 0; opacity: 0; } }


.demo-fvtilt { perspective: 800px; }
.demo-fvtilt .card { width: 120px; height: 160px; background: linear-gradient(135deg, #4af, #f4a); border-radius: 12px; box-shadow: 0 16px 40px rgba(74,170,255,.4); animation: fvTilt 5s ease-in-out infinite; }
@keyframes fvTilt { 0%, 100% { transform: rotateY(-15deg) rotateX(8deg) translateY(0); } 50% { transform: rotateY(15deg) rotateX(-8deg) translateY(-10px); } }


.demo-fvrays { position: relative; overflow: hidden; }
.demo-fvrays i { position: absolute; top: -10%; left: 50%; width: 6px; height: 130%; background: linear-gradient(to bottom, transparent, rgba(255,210,140,.6), transparent); transform-origin: top center; }
.demo-fvrays i:nth-child(1) { transform: translateX(-50%) rotate(-30deg); animation: fvRays 3s ease-in-out infinite; }
.demo-fvrays i:nth-child(2) { transform: translateX(-50%) rotate(-15deg); animation: fvRays 3s ease-in-out infinite .2s; }
.demo-fvrays i:nth-child(3) { transform: translateX(-50%) rotate(0); animation: fvRays 3s ease-in-out infinite .4s; }
.demo-fvrays i:nth-child(4) { transform: translateX(-50%) rotate(15deg); animation: fvRays 3s ease-in-out infinite .6s; }
.demo-fvrays i:nth-child(5) { transform: translateX(-50%) rotate(30deg); animation: fvRays 3s ease-in-out infinite .8s; }
@keyframes fvRays { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }


.demo-fvshapes { position: relative; overflow: hidden; }
.demo-fvshapes i { position: absolute; }
.demo-fvshapes .s1 { top: 20%; left: 15%; width: 40px; height: 40px; background: rgba(74,170,255,.4); border-radius: 50%; animation: fvFloat1 6s ease-in-out infinite; }
.demo-fvshapes .s2 { top: 60%; left: 75%; width: 30px; height: 30px; background: rgba(244,74,170,.4); transform: rotate(45deg); animation: fvFloat2 7s ease-in-out infinite; }
.demo-fvshapes .s3 { top: 35%; left: 60%; width: 50px; height: 50px; background: rgba(255,210,140,.3); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); animation: fvFloat3 8s ease-in-out infinite; }
@keyframes fvFloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -15px); } }
@keyframes fvFloat2 { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(225deg) translate(-15px, 10px); } }
@keyframes fvFloat3 { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-20px, 20px) rotate(180deg); } }


.demo-fvblock { position: relative; overflow: hidden; }
.demo-fvblock div { position: absolute; }
.demo-fvblock .b1 { top: 10%; left: 5%; width: 40%; height: 30%; background: #4af; animation: fvBlock1 4s cubic-bezier(.7,0,.2,1) infinite; }
.demo-fvblock .b2 { bottom: 15%; right: 10%; width: 30%; height: 35%; background: #f4a; animation: fvBlock2 4s cubic-bezier(.7,0,.2,1) infinite .2s; }
.demo-fvblock .b3 { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20%; height: 25%; background: #ffd28c; animation: fvBlock3 4s cubic-bezier(.7,0,.2,1) infinite .4s; }
@keyframes fvBlock1 { 0%, 10% { transform: translateX(-100%); } 35%, 70% { transform: translateX(0); } 95%, 100% { transform: translateX(-100%); } }
@keyframes fvBlock2 { 0%, 10% { transform: translateX(100%); } 35%, 70% { transform: translateX(0); } 95%, 100% { transform: translateX(100%); } }
@keyframes fvBlock3 { 0%, 10% { transform: translate(-50%, 100%); } 35%, 70% { transform: translate(-50%, -50%); } 95%, 100% { transform: translate(-50%, 100%); } }