/* Custom CSS for Rindo Kai Dojo */

/* Smooth Scrolling is handled by Tailwind's 'scroll-smooth' class on html */

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Utilities not covered by Tailwind config or specific overrides */

/* Navigation Link Underline Effect */
nav a {
    position: relative;
    padding-bottom: 2px;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FF6B35;
    /* Secondary Color */
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

/* Animations using Intersection Observer classes will be defined here if we weren't using JS to add classes, 
   but we'll use utility classes for the actual animation states.
   Here we define the base states of elements before they enter the viewport.
*/

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

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

/* Delay utilities */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* Image Overlay Gradients */
/* Ensure text remains readable on images */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Mobile Hero Image Panning Animation */
/* Mobile Hero Image Panning Animation */
@keyframes pan-image-mobile {
    0% {
        object-position: 30% 50%;
        /* 左側を表示 */
    }

    100% {
        object-position: 70% 50%;
        /* 右側を表示 */
    }
}

.animate-pan-mobile {
    animation: pan-image-mobile 20s ease-in-out infinite alternate;
    will-change: object-position;
    /* モバイルでのデフォルト */
    transform: scale(1.2);
}

@media (min-width: 768px) {
    .animate-pan-mobile {
        animation: none;
        object-position: center;
        transform: scale(1.1);
        /* PCは1.1倍のみ */
    }
}