/* Narwal Music Microsite - style.css (Final Version v3 - with Curtain Transition) */
:root {
    --color-bg: #F9F6EE; --color-primary: #223343; --color-primary-hover: #2A4258;
    --color-surface: #FFFFFF; --color-text-primary: #1C1F24; --color-text-secondary: #7A8491;
    --color-border: #E6E8EB; --color-focus: #2A6CF6; --color-disabled-bg: #A9B3BD;
    --font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --radius-m: 12px; --radius-l: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-family-base); background-color: var(--color-bg); color: var(--color-text-primary); }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.site-header { padding: 24px 0; }
.site-header > .container { display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 18px; font-weight: 600; color: var(--color-primary); cursor: pointer; }
.header-title { font-size: 16px; font-weight: 500; color: var(--color-text-secondary); }
.site-footer { text-align: center; padding: 72px 20px; color: var(--color-text-secondary); font-size: 14px; }
.slogan { margin-top: 8px; font-style: italic; }

.page-intro { text-align: center; margin: 16px 0 48px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }

.playlist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 500px) {
    .playlist-grid { grid-template-columns: 1fr 1fr; }
}

.playlist-card {
    background-color: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-l); overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.playlist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.08);
}

.card-cover img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.card-content { padding: 24px; }
.card-id { display: block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 8px; font-weight: 500; }
.card-title { font-size: 22px; font-weight: 600; margin: 0 0 8px 0; }
.card-mood { font-size: 16px; color: var(--color-text-secondary); margin: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 52px; padding: 0 24px; border: none; border-radius: var(--radius-m);
    background-color: var(--color-primary); color: white;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn:hover { background-color: var(--color-primary-hover); }
.btn:active { transform: scale(0.98); }
.btn.disabled { background-color: var(--color-disabled-bg); cursor: not-allowed; pointer-events: none; }

.playlist-detail-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .playlist-detail-layout { grid-template-columns: 2fr 3fr; gap: 72px; align-items: start; } }
.cover-image { width: 100%; border-radius: var(--radius-l); aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.playlist-title { font-size: 28px; font-weight: 700; color: var(--color-primary); margin: 0 0 16px 0; line-height: 1.2; }
@media (min-width: 768px) { .playlist-title { font-size: 36px; } }
.playlist-description { font-size: 16px; line-height: 1.6; margin-bottom: 32px; }
.info-table { margin-bottom: 32px; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.info-row:first-child { border-top: 1px solid var(--color-border); }
.info-label { color: var(--color-text-secondary); }
.info-value { font-weight: 500; text-align: right; }
.platform-buttons { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .platform-buttons { grid-template-columns: 1fr 1fr; } }

/* === Final Awwwards Animation === */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--color-bg); color: var(--color-primary);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; pointer-events: none;
    transition: opacity 0.5s ease;
}
.intro-text {
    font-size: 6vw; font-weight: 600; text-align: center; line-height: 1.3;
    transition: opacity 0.5s ease;
}
@media (min-width: 768px) { .intro-text { font-size: 48px; } }
.intro-text .line { overflow: hidden; display: block; }
.intro-text .word {
    display: inline-block; transform: translateY(100%);
    animation: revealWord 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.intro-text .word:nth-child(1) { animation-delay: 0.1s; } .intro-text .word:nth-child(2) { animation-delay: 0.2s; }
.intro-text .word:nth-child(3) { animation-delay: 0.3s; } .intro-text .word:nth-child(4) { animation-delay: 0.4s; }
.intro-text .word:nth-child(5) { animation-delay: 0.5s; } .intro-text .word:nth-child(6) { animation-delay: 0.6s; }
@keyframes revealWord { from { transform: translateY(100%); } to { transform: translateY(0%); } }

.curtain {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; z-index: 10000; pointer-events: none;
}
.curtain .panel {
    flex: 1; height: 100%; background-color: var(--color-primary);
    transform: translateY(-100%);
    transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
}

body.loading .intro-text { opacity: 1; }
body.loading .curtain .panel { transform: translateY(0); }
body.loaded #preloader { opacity: 0; }
body.loaded .intro-text { opacity: 0; }
body.loaded .curtain .panel { transform: translateY(-100%); }

body.loading .curtain .panel:nth-child(1) { transition-delay: 1.8s; } body.loading .curtain .panel:nth-child(2) { transition-delay: 1.9s; }
body.loading .curtain .panel:nth-child(3) { transition-delay: 2.0s; } body.loading .curtain .panel:nth-child(4) { transition-delay: 2.1s; }
body.loading .curtain .panel:nth-child(5) { transition-delay: 2.2s; }

body.loaded .curtain .panel:nth-child(1) { transition-delay: 0.4s; } body.loaded .curtain .panel:nth-child(2) { transition-delay: 0.3s; }
body.loaded .curtain .panel:nth-child(3) { transition-delay: 0.2s; } body.loaded .curtain .panel:nth-child(4) { transition-delay: 0.1s; }
body.loaded .curtain .panel:nth-child(5) { transition-delay: 0s; }

#main-content { opacity: 0; transition: opacity 0.8s ease; }
body.loaded #main-content { opacity: 1; transition-delay: 0.8s; }