:root {
    --gold: #c9a057;
    --gold-glow: rgba(201, 160, 87, 0.25);
    --white: #f5f0e8;
    --shadow: rgba(0, 0, 0, 0.9);
    --overlay: rgba(10, 8, 6, 0.5);
    --fade-ms: 1400ms;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0806;
}

/* ── Slideshow ───────────────────────────────────────── */

.slideshow {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--fade-ms) ease-in-out;
    will-change: opacity;
}

.slide.active {
    opacity: 1;
}

/* ── Overlay & Vignette ──────────────────────────────── */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(10, 8, 6, 0.38);
    pointer-events: none;
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        ellipse 90% 90% at 50% 50%,
        transparent 45%,
        rgba(0, 0, 0, 0.22) 78%,
        rgba(0, 0, 0, 0.48) 100%
    );
    pointer-events: none;
}

/* ── Film Grain ──────────────────────────────────────── */

.grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    z-index: 3;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    animation: grainDrift 9s steps(1) infinite;
}

@keyframes grainDrift {
    0%   { transform: translate(0, 0); }
    11%  { transform: translate(-6%, -11%); }
    22%  { transform: translate(-14%, 6%); }
    33%  { transform: translate(8%, -24%); }
    44%  { transform: translate(-4%, 26%); }
    55%  { transform: translate(-16%, 11%); }
    66%  { transform: translate(14%, 0); }
    77%  { transform: translate(0, 14%); }
    88%  { transform: translate(4%, 34%); }
    100% { transform: translate(0, 0); }
}

/* ── Logo ────────────────────────────────────────────── */

.logo-header {
    position: fixed;
    top: clamp(14px, 2.4vw, 30px);
    left: clamp(14px, 2.4vw, 30px);
    z-index: 20;
}

.logo {
    display: block;
    height: clamp(34px, 5vw, 64px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
    opacity: 0;
    animation: logoAppear 1.4s ease 0.3s forwards;
}

@keyframes logoAppear {
    to { opacity: 1; }
}

/* ── Message Stage ───────────────────────────────────── */

.stage {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message {
    text-align: center;
    color: var(--white);
    padding: clamp(16px, 4vw, 40px) clamp(20px, 6vw, 60px);
    max-width: min(700px, 88vw);
    opacity: 0;
    transform: translateY(22px);
    animation: messageReveal 2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

@keyframes messageReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Japanese Text ───────────────────────────────────── */

.text-ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: clamp(0.76rem, 1.75vw, 0.98rem);
    line-height: 2.3;
    letter-spacing: 0.15em;
    text-shadow:
        0 1px 2px var(--shadow),
        0 3px 14px var(--shadow),
        0 0 48px rgba(0, 0, 0, 0.55);
}

/* ── Ornament Divider ────────────────────────────────── */

.ornament {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(18px, 3.2vw, 34px) auto;
    max-width: 240px;
}

.ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.ornament-mark {
    font-size: 0.42rem;
    color: var(--gold);
    filter: drop-shadow(0 0 5px var(--gold));
    flex-shrink: 0;
}

/* ── English Text ────────────────────────────────────── */

.text-en {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(0.84rem, 1.95vw, 1.08rem);
    line-height: 2;
    letter-spacing: 0.04em;
    text-shadow:
        0 1px 2px var(--shadow),
        0 3px 14px var(--shadow),
        0 0 48px rgba(0, 0, 0, 0.55);
}

.brand-name {
    display: block;
    margin-top: 1em;
    font-style: italic;
    font-size: clamp(0.94rem, 2.3vw, 1.28rem);
    font-weight: 400;
    letter-spacing: 0.09em;
    color: var(--gold);
    text-shadow:
        0 1px 2px var(--shadow),
        0 0 22px var(--gold-glow),
        0 0 48px rgba(0, 0, 0, 0.55);
}

/* ── Mobile adjustments ──────────────────────────────── */

@media (max-width: 540px) {
    .message {
        padding-left: clamp(10px, 3.5vw, 18px);
        padding-right: clamp(10px, 3.5vw, 18px);
        max-width: 96vw;
    }

    .text-ja {
        font-size: clamp(0.82rem, 3.8vw, 0.98rem);
        letter-spacing: 0.06em;
        line-height: 2.1;
    }

    .text-en {
        font-size: clamp(0.84rem, 3.8vw, 1.08rem);
        letter-spacing: 0.02em;
    }

    .brand-name {
        font-size: clamp(0.9rem, 4vw, 1.28rem);
        letter-spacing: 0.05em;
    }
}