:root {
    color-scheme: light;
    --ink: #28352e;
    --paper: #fff8e9;
    --berry: #8c2737;
    --berry-dark: #611926;
    --pine: #184936;
    --gold: #c9a875;
    --serif: "Cormorant Garamond", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    position: relative;
    margin: 0;
    color: var(--ink);
    background: #112539;
    font: 1rem/1.5 "DM Sans", Arial, sans-serif;
}

/* Film artwork from the Apple TV listing for Tom and Jerry: A Nutcracker Tale. */
body::before {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(180deg, #10253c24 30%, #10253c62 100%),
        url("nutcracker-background.jpg");
    background-size: cover;
    background-position: center;
    pointer-events: none;
    content: "";
}

main {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 3rem 1.25rem;
}

.cover {
    width: min(100%, 39rem);
    text-align: center;
}

.envelope {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 21rem;
    align-items: end;
    padding: 10.5rem 2rem 3.4rem;
    border: 1px solid #c9a875;
    border-radius: 7px;
    background: #dfbd88;
    box-shadow: 0 1.75rem 4.75rem #071810a6, inset 0 0 2rem #ae795742;
    perspective: 900px;
}

.envelope::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, #f0d9ad, #fff5df 54%, #f0dbb6);
    clip-path: polygon(0 100%, 0 10%, 50% 52%, 100% 10%, 100% 100%);
    content: "";
}

.flap {
    position: absolute;
    z-index: -1;
    inset: -1px -1px auto;
    height: 49%;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(165deg, #367459, #23523e 55%, #143b2d);
    clip-path: polygon(0 0, 100% 0, 53% 96%, 50% 100%, 47% 96%);
    transform-origin: top center;
    transition: transform 380ms ease;
}

/* The tree is a clipped shape inside a small postage stamp. */
.holiday-stamp {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    display: grid;
    width: 3.1rem;
    height: 3.65rem;
    place-items: center;
    border: 3px dotted #fff2d7;
    background: #f2dfb9;
    box-shadow: 0 2px 6px #10261f4d, inset 0 0 0 1px #b39465;
    transform: rotate(7deg);
}

.holiday-stamp span {
    width: 1.35rem;
    height: 1.65rem;
    background: var(--pine);
    clip-path: polygon(50% 0, 75% 36%, 65% 36%, 89% 62%, 78% 62%, 100% 85%, 58% 85%, 58% 100%, 42% 100%, 42% 85%, 0 85%, 22% 62%, 11% 62%, 35% 36%, 25% 36%);
}

.seal {
    position: absolute;
    top: 47%;
    left: 50%;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: 2px solid #bb5b60;
    border-radius: 46% 51% 47% 48%;
    background: radial-gradient(circle at 35% 25%, #bc565d, #782437 73%);
    box-shadow: 0 4px 8px #50201954, inset 0 0 0 4px #8a293b;
    color: #ffdeb0;
    font: italic 1.65rem/1 var(--serif);
    transform: translate(-50%, -50%) rotate(-9deg);
    transition: opacity 180ms ease;
}

.opening .flap { transform: rotateX(155deg); }
.opening .seal { opacity: 0; }

h1 {
    position: relative;
    margin: 1.1rem 0 0;
    font: 400 clamp(1.6rem, 5vw, 2.45rem)/1.15 var(--serif);
    color: var(--pine);
    text-wrap: balance;
}

h1 span {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.58em;
    font-style: italic;
    color: var(--berry);
}

button {
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button:disabled { cursor: wait; }

button:focus-visible, input:focus-visible {
    outline: 3px solid var(--berry);
    outline-offset: 3px;
}

.open-button {
    position: relative;
    margin-top: 1.7rem;
    border-color: #f2dcb9;
    background: #f2dcb9;
    color: var(--pine);
}

.open-button:hover { background: #fff0d7; }
.open-button:focus-visible { outline-color: #f2dcb9; }

form {
    position: relative;
    width: min(100%, 29rem);
    margin: 1.4rem auto 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: var(--paper);
    text-align: left;
}

label { font-weight: 700; }

.hint {
    margin: 0.3rem 0 0.8rem;
    color: #4e594d;
    font-size: 0.9rem;
}

.password-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

input {
    flex: 1 1 10rem;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    border: 1px solid #8e9988;
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    background: #fffdfa;
    color: var(--ink);
    font: inherit;
}

input[aria-invalid="true"] { border-color: var(--berry); }

.unlock-button {
    background: var(--pine);
    color: #fff8eb;
}

.unlock-button:hover { background: #103726; }

.feedback {
    margin: 0.55rem 0 0;
    color: var(--berry-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

.feedback:empty { margin: 0; }
noscript p { color: var(--paper); }

.letter {
    position: relative;
    width: min(100%, 44rem);
    padding: clamp(1.65rem, 6vw, 4rem);
    border: 1px solid #e3c69d;
    border-radius: 4px;
    background: linear-gradient(135deg, #fffaf0, #fff2db);
    box-shadow: 0 1.75rem 4.75rem #071810a6, inset 0 0 0 6px #f1dfbd;
    animation: unfold 400ms ease-out;
}

.letter::before {
    position: absolute;
    inset: 7px 7px auto;
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--pine) 0 9px, #fff7e6 9px 15px, var(--berry) 15px 24px, #fff7e6 24px 30px);
    content: "";
}

.letter h2 {
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gold);
    color: var(--pine);
    font: 400 clamp(1.85rem, 5vw, 2.7rem)/1.15 var(--serif);
}

.letter h2:focus { outline: none; }

.letter p {
    margin: 0 0 1rem;
    font: 1.08rem/1.75 var(--serif);
}

.signature {
    display: inline-block;
    color: var(--berry);
    font-style: italic;
}

.close-button {
    margin-top: 0.35rem;
    border-color: #87947d;
    background: transparent;
    color: var(--pine);
}

.close-button:hover { background: #eee6cf; }

@keyframes unfold {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1000px) {
    .cover {
        justify-self: start;
        width: min(45vw, 39rem);
        margin-left: 4vw;
        margin-top: min(36vh, 22rem);
    }
}

@media (max-width: 999px) {
    body::before {
        position: absolute;
        height: 56.25vw;
        background-image:
            linear-gradient(180deg, transparent 70%, #112539 100%),
            url("nutcracker-background.jpg");
        background-size: 100% 100%;
    }

    .cover, .letter { margin-top: min(40vw, 19rem); }
}

@media (max-width: 420px) {
    main { padding: 1.6rem 1rem; }
    .envelope { min-height: 17rem; padding: 7.8rem 0.8rem 2rem; }
    .holiday-stamp { width: 2.55rem; height: 3rem; }
    .seal { width: 2.85rem; height: 2.85rem; font-size: 1.35rem; }
    .unlock-button { flex-grow: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}