/* ==========================================================================
   Fade-in on scroll
   ========================================================================== */
.shimaoptics-renewal .shimaoptics-renewal-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.shimaoptics-renewal .shimaoptics-renewal-fade-in.shimaoptics-renewal-fade-in--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .shimaoptics-renewal .shimaoptics-renewal-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   TOPページ FVのロゴreveal演出
   左→右へmask-imageで一度だけrevealし、完了後はそのまま表示し続ける
   （要素自体はfront-page.phpのみに存在するため、TOPページでのみ発生する）
   ========================================================================== */
.shimaoptics-renewal .shimaoptics-renewal-hero__loading-logo {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: shimaoptics-renewal-hero-logo-reveal 1.5s ease forwards;
}

@keyframes shimaoptics-renewal-hero-logo-reveal {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shimaoptics-renewal .shimaoptics-renewal-hero__loading-logo {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}