html {
  scroll-behavior: smooth;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Dynamic floating dots animation */
@keyframes float {
    0% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-20px) translateX(10px); }
    100% { transform: translateY(0px) translateX(0px); }
}
.dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: float 6s ease-in-out infinite;
}



/* Infinite Marquee Animation */
@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.animate-marquee {
    animation: marquee 22.6s linear infinite; /* 速度を10%早く（25.1sから約10%短縮） */
    display: flex;
    width: max-content;
    will-change: transform; /* レンダリングのスムーズ化（GPUアクセラレーションを有効化） */
    transform: translateZ(0); /* ハードウェアアクセラレーションの強制適用 */
}

/* 子要素（傾きと影を持つ画像カード）のGPU描画最適化 */
.animate-marquee > div {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* マウスホバー時に画像が一時停止しないように明示的に設定 */
.animate-marquee:hover {
    animation-play-state: running;
}


/* Hide scrollbar for carousel */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}


/* Floating & Orbiting Dots Animation */
@keyframes orbit1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(30px, 50px) rotate(360deg); }
}
@keyframes orbit2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-40px, -30px) rotate(-360deg); }
}
@keyframes floatUp {
    0% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-60px) translateX(20px); }
    100% { transform: translateY(0) translateX(0); }
}
.dot-orbit1 { animation: orbit1 20s infinite alternate ease-in-out; }
.dot-orbit2 { animation: orbit2 25s infinite alternate ease-in-out; }
.dot-float { animation: floatUp 15s infinite ease-in-out; }

@keyframes mobile-crossfade {
    0%, 25% { opacity: 0; }
    45%, 75% { opacity: 1; }
    95%, 100% { opacity: 0; }
}
@media (max-width: 767px) {
    .mobile-auto-fade {
        animation: mobile-crossfade 8s ease-in-out infinite;
    }
    .delay-0 { animation-delay: 0s; }
    .delay-2 { animation-delay: -2s; }
    .delay-4 { animation-delay: -4s; }
    .delay-6 { animation-delay: -6s; }
}