/*
 * AHF image-optimize.css
 * 画像表示最適化・パフォーマンス改善
 * 2026-03-22
 */

/* ── 共通画像最適化 ── */
img {
  max-width: 100%;
  height: auto;
  /* GPUコンポジット層昇格で描画を高速化 */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── ヒーロー・タイガー画像（LCP最優先） ── */
.hero__tiger {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  /* ぼかしプレースホルダーから鮮明に */
  filter: blur(0);
  transition: opacity 0.3s ease, filter 0.4s ease;
  will-change: transform;
  /* aspect-ratio で事前にスペース確保 → レイアウトシフト防止 */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.hero__tiger.img-loading {
  filter: blur(8px);
  opacity: 0.6;
}
.hero__tiger.img-loaded {
  filter: blur(0);
  opacity: 1;
}

/* ── フローティングCTA マスコット（小サイズ） ── */
.fcta__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  /* 遅延フェードイン */
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
  will-change: opacity;
}
.fcta__img.img-loaded,
.fcta__img[data-loaded="true"] {
  opacity: 1;
}

/* ── スマホメニュー内マスコット ── */
.sp-menu .mascot-img,
.sp-menu img[src*="mascot"] {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sp-menu .mascot-img.img-loaded,
.sp-menu img[src*="mascot"].img-loaded {
  opacity: 1;
}

/* ── フォーム完了 マスコット ── */
#formDone img,
.form-done img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
#formDone img.img-loaded,
.form-done img.img-loaded {
  opacity: 1;
}

/* ── SVGアイコン代替（mascotが未ロード時に表示） ── */
.mascot-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #f9ba1a, #f0940a);
  border-radius: 50%;
  font-size: 22px;
  color: #050d1a;
  font-weight: 900;
}

/* ── ブログ・ニュースカード画像 ── */
.blog-card img,
.news-card img,
.blog-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.04);
  /* skeleton loading */
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.04) 80%
  );
  background-size: 200% 100%;
  animation: imgSkeleton 1.4s ease infinite;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 8px 8px 0 0;
}
.blog-card img.img-loaded,
.news-card img.img-loaded {
  animation: none;
  background: none;
  opacity: 1;
}
@keyframes imgSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── OGP画像 ── */
.ogp-img {
  max-width: 100%;
  height: auto;
}

/* ── サムネイル（管理画面）── */
.thumb {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8edf5;
}

/* ── picture要素対応（WebP時代準備） ── */
picture {
  display: contents;
}
picture img {
  width: 100%;
  height: auto;
}

/* ── lazyload フェードイン共通 ── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.35s ease;
}
img[loading="lazy"].img-loaded {
  opacity: 1;
}

/* ── intersection observer 用 ── */
.img-observe {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.img-observe.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── プレースホルダー ── */
.img-placeholder {
  background: linear-gradient(135deg,
    rgba(29,92,232,0.08) 0%,
    rgba(240,148,10,0.06) 100%
  );
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 2rem;
}

/* ── Hero右カラム最適化（余白確保でCLS防止） ── */
.hero__right {
  min-height: 380px;
}
@media (max-width: 768px) {
  .hero__right {
    min-height: 240px;
  }
}

/* ── 画像コンテナのアスペクト比固定 ── */
.img-wrap-16-9 {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 8px;
}
.img-wrap-16-9 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-wrap-1-1 {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 50%;
}
.img-wrap-1-1 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}