/* Base Resets & Overrides */
html {
    scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════
   Japanese Design Elements — 和風デザイン
   ═══════════════════════════════════════════ */

/* ── Tategaki 縦書き (Vertical writing) ── */
.jp-tategaki {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.35em;
    font-family: "Noto Serif JP", serif;
}

/* ── Hanko 印鑑 (Red stamp seal) ── */
.jp-hanko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2.5px solid var(--color-brand-red, #C13838);
    border-radius: 6px;
    color: var(--color-brand-red, #C13838);
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transform: rotate(-6deg);
    opacity: 0.85;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 10px rgba(193, 56, 56, 0.1);
}

.jp-hanko:hover {
    transform: rotate(0deg) scale(1.05);
    opacity: 1;
}

/* ── Japanese Decorative Divider ── */
.jp-divider {
    width: 48px;
    height: 2px;
    background-color: var(--color-brand-red, #C13838);
    margin-left: auto;
    margin-right: auto;
}

/* ── Authentic Ukiyo-e Background Patterns ── */
.jp-pattern-geo {
    position: relative;
    z-index: 1;
}

.jp-pattern-geo::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Use data URI for pattern so it is completely standalone */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════ */

/* ── Ensō circle — slow rotation ── */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.hero-enso {
    animation: spin-slow 45s linear infinite;
}

/* ── Reveal Animations ── */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
}

.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; }
.delay-600 { transition-delay: 600ms; }

/* ── Sakura Petals Falling Animation ── */
@keyframes floatDown {
    0% { top: -10%; opacity: 0; transform: scale(0.5) rotate(0deg); }
    15% { opacity: 0.8; transform: scale(1) rotate(45deg); }
    85% { opacity: 0.6; transform: scale(0.8) rotate(180deg); }
    100% { top: 110%; opacity: 0; transform: scale(0.5) rotate(220deg); }
}

@keyframes swayPetal {
    0% { margin-left: 0px; }
    25% { margin-left: 30px; }
    50% { margin-left: -20px; }
    75% { margin-left: 25px; }
    100% { margin-left: -30px; }
}

.sakura-petal {
    position: absolute;
    /* Soft pink to brand red gradient for petal look */
    background: linear-gradient(135deg, #FFD1DC 0%, #C13838 100%);
    /* Distinct petal shape: rounded on two opposite corners, pointed on others */
    border-radius: 15px 0px 15px 0px;
    pointer-events: none;
    z-index: 2;
    animation: floatDown linear infinite, swayPetal ease-in-out infinite alternate;
    mix-blend-mode: multiply;
    box-shadow: 2px 2px 6px rgba(193, 56, 56, 0.15);
}