/* ===========================================================
   Scene — shared stacking context for mailbox + envelope
   =========================================================== */

/*
   Both #mailbox-container and #envelope-wrapper share grid-area: 1 / 1
   so they occupy the same cell. The mailbox paints first (behind), the
   envelope wrapper paints on top. No absolute positioning needed.
*/
#scene {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
}

#mailbox-container {
    grid-area: 1 / 1;
    width: 100%;
    max-width: 560px;
    align-self: center;
    justify-self: center;
    margin-top: 4rem;
}

#mailbox-container svg {
    height: auto;
    display: block;
}

/* #envelope-wrapper never moves — it receives the clip-path during
   the animation so the envelope appears to slide into the slot. */
#envelope-wrapper {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#logo {
    width: auto;
    max-width: 200px;
    height: auto;
}
/* ===========================================================
Card / envelope container
=========================================================== */

#envelope {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto 1fr;
    justify-self: center;
    width: 90vw;
    max-width: 1090px;
    height: 100%;
    gap: 1.5rem;
    background: var(--secondary-brand-green);
    box-shadow: 0 4px 6px rgb(0 0 0 / 0.25);
    padding: 2rem 1.5rem 2.5rem;
    overflow: clip;
    /* Smooth background color transition between themes */
    transition: background-color 0.4s ease;
    /* Fallback to the existing brand green so the initial state
       matches the green theme before JS runs. */
    --theme-accent: var(--primary-brand-green);
    --theme-accent-text: var(--text-green);
}

@media (width >= 768px) {
    #scene {
        padding: 2rem 1rem 4rem;
    }

    #mailbox-container {
        margin-top: 5rem;
    }
    #logo {
        max-width: 250px;
    }

    #envelope {
        gap: 0 1rem;
        padding: 2.5rem 3rem 3rem;
    }
}

/* ===========================================================
   Success message — fades in after the envelope animates away
   =========================================================== */

#success-message {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: center;
    text-align: center;
    padding: 2rem;
    z-index: 2;
}

#success-message p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-green);
}

#success-message[hidden] {
    display: none;
}

/* Stamp letter paths pick up --stamp-letter-color; transition the fill smoothly */
#stamp svg path {
    transition: fill 0.4s ease;
}

.logo-link {
    display: inline-block;
    justify-self: center;
    line-height: 0;
}

.logo-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

#brittneyLauren {
    width: 100%;
    max-width: 320px;
    height: auto;
}

#signup-heading {
    font-family: var(--text-font);
    font-size: 1.5rem;
}

@media (width >= 768px) {
    .logo-link {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-self: start;
        align-self: start;
    }

    #brittneyLauren {
        max-width: 280px;
    }
}

/* ===========================================================
   Stamp (top-right, decorative)
   =========================================================== */

#stamp {
    display: grid;
    justify-self: end;
    width: 90px;
    height: 90px;
}

.stamp-border {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

@media (width >= 768px) {
    #stamp {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-self: end;
        align-self: start;
    }
}

/* ===========================================================
   Sign-up block: heading, form, supporting copy
   =========================================================== */

#signup {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    justify-items: center;
    gap: 1.25rem;
    padding-top: 1rem;
}

@media (width >= 768px) {
    #signup {
        padding-top: 2rem;
    }
}

#comingsoon {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 320px;
}

/* ===========================================================
   Form
   =========================================================== */

#signup-form {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 0.75rem;
}

.field {
    display: grid;
    text-align: left;
}

.field label {
    font-family: var(--text-font);
    font-size: 0.95rem;
    color: var(--text-green);
    background: var(--white);
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    padding: 0 1rem;
    pointer-events: none;
    transition: transform 0.12s ease, font-size 0.12s ease;
    transform-origin: left center;
}

.field input {
    grid-row: 1;
    grid-column: 1;
    font-family: var(--text-font);
    font-size: 1rem;
    color: var(--text-green);
    background: var(--white);
    border: none;
    border-bottom: 2px solid var(--theme-accent);
    padding: 1.1rem 1rem 0.5rem;
    width: 100%;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
    transform: translateY(-0.85rem) scale(0.72);
}

.field input::placeholder {
    color: transparent;
}

.field-error {
    margin-top: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--error-red);
}

.field--error input,
[aria-invalid="true"] {
    border-bottom-color: var(--error-red) !important;
}

#signup-form button {
    font-family: var(--text-font);
    font-size: 1rem;
    color: var(--theme-accent-text);
    background: transparent;
    border: 2px solid var(--theme-accent);
    padding: 0.85rem 1rem;
    cursor: pointer;
    margin-top: 0.25rem;
}

#signup-form button:hover:not(:disabled) {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--white);
}

#signup-form button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.form-status {
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.form-status--error {
    color: var(--error-red);
}

/* ===========================================================
   Theme illustration (bottom, decorative)
   =========================================================== */

#theme-illustration {
    width: 120px;
    height: auto;
    justify-self: var(--justify);
    align-self: end;
    width: auto;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}