/* Custom styles to complement Tailwind CSS */
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hero section canvas for background animation */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Custom gradient text */
.gradient-text {
    background: linear-gradient(90deg, #5aa1f2, #4a90e2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero title line height */
.hero-title {
    line-height: 1.4 !important;
}

/* Custom styles for glowing border effect on cards */
.glow-border {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb; /* border-gray-200 */
}

.glow-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.75rem; /* Corresponds to rounded-xl */
    border: 1px solid transparent;
    background: linear-gradient(120deg, #4a90e2, #8b5cf6, #5aa1f2) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.glow-border:hover::before {
    opacity: 0.5;
}

/* Fade-in animation classes */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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