/* =========================================================
   THE ROYAL LETTER — design tokens
   Palette   : midnight plum, aged gold, deep wine accent
   Display   : Cinzel (regal, small-caps rhythm)
   Body/Letter: Cormorant Garamond italic (handwritten-letter feel)
   Signature : parchment letter panel revealed from a wax-seal button
   ========================================================= */

:root {
    --bg-deep: #170022;
    --bg-mid: #3a1a56;
    --gold-light: #f6e2a6;
    --gold: #d9ab52;
    --gold-deep: #9c7223;
    --wine: #5c1030;
    --wine-light: #7a2048;
    --parchment: #f3e6c8;
    --parchment-edge: #e6d3a3;
    --ink: #3b2a14;
    --cream-text: #f1e6cf;

    --font-display: "Cinzel", "Georgia", serif;
    --font-body: "Cormorant Garamond", "Georgia", serif;
}

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

html,
body {
    width: 100%;
    min-height: 100vh;
    background: var(--bg-deep);
    overflow-x: hidden;
    font-family: var(--font-body);
    color: var(--cream-text);

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

/* Background kerajaan */
.background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;

    background:
        radial-gradient(ellipse at 50% -10%, rgba(217, 171, 82, 0.12), transparent 55%),
        linear-gradient(135deg, #170022, #3a1a56 45%, #170022);
    overflow: hidden;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("assets/sparkle.webp");
    background-repeat: repeat;
    background-size: 40px;
    opacity: 0.22;
    animation: moveStars 30s linear infinite;
}

/* ---------- Kartu utama ---------- */
.container {
    position: relative;
    width: 90%;
    max-width: 480px;
    margin: 4vh 0;
    padding: 44px 32px 38px;

    text-align: center;

    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(217, 171, 82, .3);
    border-radius: 18px;

    box-shadow:
        0 0 0 1px rgba(217, 171, 82, .08),
        0 0 40px rgba(217, 171, 82, .1),
        0 25px 60px rgba(0, 0, 0, .5);

    animation: fadeIn .9s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: none; }
}

/* Ornamen sudut ala undangan kerajaan */
.corner {
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
}
.corner::before, .corner::after {
    content: "";
    position: absolute;
    background: var(--gold);
    opacity: .55;
}
.corner-tl { top: 10px; left: 10px; }
.corner-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.corner-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.corner-br { bottom: 10px; right: 10px; transform: scale(-1, -1); }
.corner::before { top: 0; left: 0; width: 100%; height: 1.5px; }
.corner::after { top: 0; left: 0; width: 1.5px; height: 100%; }

/* Mahkota */
.crown {
    width: 92px;
    margin-bottom: 6px;
    animation:
        float 3.6s ease-in-out infinite,
        glow 2.4s infinite alternate;
}

@keyframes glow {
    from { filter: drop-shadow(0 0 8px rgba(217, 171, 82, .55)); }
    to   { filter: drop-shadow(0 0 22px rgba(246, 226, 166, .85)); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Judul */
.title {
    font-family: var(--font-display);
    color: var(--gold-light);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(217, 171, 82, .45);
    margin-top: 4px;
}

.subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 16px;
    color: rgba(241, 230, 207, .65);
    letter-spacing: .5px;
    margin-top: 6px;
    margin-bottom: 28px;
}

/* ---------- Surat (parchment reveal) ---------- */
.letter {
    display: none;
    min-height: 260px;
    margin-top: 6px;
    padding: 34px 26px;

    text-align: left;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 19px;
    line-height: 1.85;
    color: var(--ink);

    background:
        linear-gradient(rgba(243, 230, 200, .94), rgba(243, 230, 200, .94)),
        url("assets/paper.png");
    background-size: cover;
    background-blend-mode: normal;

    border-radius: 8px;
    border: 1px solid var(--parchment-edge);
    box-shadow:
        inset 0 0 50px rgba(59, 42, 20, .18),
        0 18px 35px rgba(0, 0, 0, .45);
}

/* ---------- Tombol (wax seal) ---------- */
.open-btn {
    position: relative;
    margin-top: 30px;
    padding: 14px 40px;

    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: var(--gold-light);
    background: linear-gradient(180deg, var(--wine-light), var(--wine) 70%);
    border: 1px solid rgba(217, 171, 82, .6);
    border-radius: 30px;

    box-shadow:
        0 0 0 1px rgba(217, 171, 82, .15),
        0 10px 25px rgba(92, 16, 48, .45),
        inset 0 1px 0 rgba(255, 255, 255, .15);

    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}

.open-btn::before {
    content: "✦";
    display: inline-block;
    margin-right: 8px;
    color: var(--gold);
}

.open-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px rgba(217, 171, 82, .3),
        0 14px 30px rgba(92, 16, 48, .55),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.open-btn:disabled {
    opacity: .7;
    cursor: default;
    transform: none;
}

/* ---------- Sparkle dekorasi ---------- */
.sparkle {
    position: absolute;
    width: 42px;
    opacity: .8;
    animation: sparkle 2.4s infinite alternate;
}

.sparkle-left { left: 14px; top: 26px; }
.sparkle-right { right: 14px; bottom: 26px; }

@keyframes sparkle {
    from { opacity: .35; transform: scale(0.8) rotate(0deg); }
    to   { opacity: .9; transform: scale(1.15) rotate(12deg); }
}

/* ---------- Transisi halaman surat ---------- */
.page-change {
    animation: pageChange .6s ease;
}

@keyframes pageChange {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes moveStars {
    from { background-position: 0 0; }
    to { background-position: 500px 500px; }
}

/* ---------- Responsif ---------- */
@media (max-width: 380px) {
    .container { padding: 34px 20px 30px; }
    .title { font-size: 26px; letter-spacing: 2px; }
    .crown { width: 76px; }
    .letter { font-size: 17px; padding: 26px 18px; }
}