/* =========================
   1. PENGATURAN DASAR
========================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --blue: #b9ddff;
    --purple: #c9b5ff;
    --pink: #f4d5ff;
    --white: #ffffff;
    --text: #f8f6ff;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    color: var(--text);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(128, 185, 255, 0.35),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(193, 142, 255, 0.35),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #10162f,
            #252044,
            #182b4c
        );
}

button {
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* =========================
   2. LAYAR PEMBUKA
========================= */

.opening {
    position: fixed;
    inset: 0;
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    text-align: center;

    background:
        radial-gradient(
            circle at top left,
            rgba(126, 182, 255, 0.3),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(202, 153, 255, 0.3),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #11172f,
            #282044,
            #172c4a
        );

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.opening-content {
    width: 100%;
    max-width: 600px;
    animation: floatIn 1.3s ease both;
}

.small-text {
    margin-bottom: 18px;
    color: #d8d3ff;
    font-size: 0.7rem;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.opening h1,
.scene h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(3rem, 9vw, 5.5rem);
    line-height: 1.1;

    background: linear-gradient(
        100deg,
        #ffffff,
        #c9e5ff,
        #e6c9ff
    );

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    filter: drop-shadow(0 0 18px rgba(187, 191, 255, 0.2));
}

.opening-content > p:not(.small-text) {
    max-width: 430px;
    margin: 24px auto 30px;
    color: #dedff5;
    font-size: 0.95rem;
    line-height: 1.9;
}

/* =========================
   3. TOMBOL
========================= */

#startButton,
.next-button,
#replayButton,
#musicButton {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;

    color: #252044;
    background: linear-gradient(
        120deg,
        #c6e4ff,
        #e0c9ff
    );

    padding: 13px 27px;
    font-size: 0.85rem;
    font-weight: 500;

    box-shadow: 0 8px 30px rgba(170, 157, 255, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

#startButton:hover,
.next-button:hover,
#replayButton:hover,
#musicButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(187, 175, 255, 0.3);
    filter: brightness(1.08);
}

#startButton:active,
.next-button:active,
#replayButton:active,
#musicButton:active {
    transform: scale(0.97);
}

/* =========================
   4. ISI WEBSITE
========================= */

.hidden {
    display: none !important;
}

#website {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.scene {
    position: absolute;
    inset: 0;

    min-height: 100vh;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 35px 24px 95px;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(25px) scale(0.98);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease,
        visibility 0.9s ease;
}

.scene.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0) scale(1);
}

.scene h1 {
    max-width: 850px;
    margin-bottom: 24px;
    font-size: clamp(2.8rem, 8vw, 5rem);
}

.scene > p:not(.small-text):not(.signature) {
    max-width: 570px;
    color: #e2e3f6;
    font-size: 0.95rem;
    line-height: 2;
    font-weight: 300;
}

.scene .next-button,
.scene #replayButton {
    margin-top: 30px;
}

/* =========================
   5. FOTO KENANGAN
========================= */

.memory-photo {
    width: min(260px, 75vw);
    height: 220px;
    margin-top: 24px;

    object-fit: cover;

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(184, 181, 255, 0.12);

    transition: transform 0.5s ease;
}

.memory-photo:hover {
    transform: rotate(-2deg) scale(1.03);
}

/* =========================
   6. TANDA TANGAN
========================= */

.signature {
    margin-top: 30px;
    color: #e4d9ff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    line-height: 1.8;
}

.signature strong {
    color: #d8c5ff;
    font-size: 2rem;
    font-weight: 600;
}

/* =========================
   7. KONTROL MUSIK
========================= */

.music-control {
    position: fixed;
    right: 22px;
    bottom: 20px;
    z-index: 5;
}

#musicButton {
    padding: 10px 18px;
    font-size: 0.78rem;
    background: rgba(224, 217, 255, 0.9);
    backdrop-filter: blur(12px);
}

/* =========================
   8. ANIMASI
========================= */

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

/* =========================
   9. TAMPILAN HP
========================= */

@media (max-width: 600px) {
    .small-text {
        font-size: 0.62rem;
        letter-spacing: 3px;
    }

    .opening-content > p:not(.small-text),
    .scene > p:not(.small-text):not(.signature) {
        font-size: 0.85rem;
        line-height: 1.9;
    }

    .scene {
        padding: 25px 22px 90px;
    }

    .scene h1 {
        margin-bottom: 18px;
    }

    .memory-photo {
        height: 180px;
    }

    .music-control {
        right: 14px;
        bottom: 14px;
    }
}

/* =========================
   10. PENGURANGAN ANIMASI
========================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}