.vertical-text { writing-mode: vertical-rl; }
.fade-in { animation: fadeIn 1.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.glass { background: rgba(240, 249, 255, 0.8); /* sky-50/80 */ backdrop-filter: blur(12px); }
.handwritten-circle {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards;
}
.bg-char-water::before {
    content: '水';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30rem;
    font-family: "Shippori Mincho", serif;
    color: rgba(14, 165, 233, 0.05); /* sky-500/5 */
    z-index: 0;
}
.washi-texture {
    background-color: #F0F9FF; /* bg-sky-50 */
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.005) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.005) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.005) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.005) 75%);
    background-size: 4px 4px;
}
/* Gold Marker Style */
.gold-marker {
    background: linear-gradient(to top, rgba(184, 155, 114, 0.5) 40%, transparent 40%);
    padding: 0 0.1em;
    margin: 0 -0.1em;
}
.gold-marker-hover {
    background-size: 100% 100%;
    background-image: linear-gradient(to top, rgba(184, 155, 114, 0.5) 35%, transparent 35%);
    transition: background-size .3s;
}
.group:hover .gold-marker-hover, .gold-marker-hover:hover {
    background-size: 100% 80%;
}
.gold-marker-dark {
    background: linear-gradient(to top, rgba(184, 155, 114, 0.5) 40%, transparent 40%);
}
/* Mobile Floating CTA */
@media (max-width: 768px) {
    .mobile-floating-cta {
        display: flex;
    }
}
@media (min-width: 769px) {
    .mobile-floating-cta {
        display: none;
    }
}
/* For hiding scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Custom Animations (from Tailwind config) */
@keyframes fade-in-up {
    '0%': { opacity: '0', transform: 'translateY(30px)', filter: 'blur(10px)' },
    '100%': { opacity: '1', transform: 'translateY(0)', filter: 'blur(0)' },
}
@keyframes subtle-breath {
    '0%, 100%': { transform: 'scale(1)' },
    '50%': { transform: 'scale(1.015)' },
}
@keyframes draw {
    'to': { strokeDashoffset: '0' },
}
@keyframes float {
    '0%, 100%': { transform: 'translateY(0)' },
    '50%': { transform: 'translateY(-20px)' },
}
@keyframes liquid-morph {
    '0%, 100%': { borderRadius: '40% 60% 70% 30% / 40% 40% 60% 60%' },
    '34%': { borderRadius: '70% 30% 50% 50% / 30% 30% 70% 70%' },
    '67%': { borderRadius: '100% 60% 60% 100% / 100% 100% 60% 60%' },
}
@keyframes breathe {
    '0%, 100%': { transform: 'scale(1)' },
    '50%': { transform: 'scale(1.05)' },
}