/* ========================================
   Layout & Components
   ======================================== */
header {
    text-align: center;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    position: relative;
    z-index: var(--z-header);
}

#main-title {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--space-sm);
    transition: transform var(--duration-base) var(--ease-pop);
}

#main-title:hover {
    transform: rotate(-1.5deg) scale(1.02);
}

#countdown {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    animation: pulse 2.4s ease-in-out infinite;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
    border: 2px solid var(--border-soft);
    display: inline-block;
    min-width: 300px;
}

.countdown-unit {
    display: inline-block;
}

.countdown-num {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--accent-color);
}

.countdown-label {
    font-size: 0.65em;
    opacity: 0.7;
    margin-left: 1px;
}

.countdown-suffix {
    font-size: 0.85em;
    opacity: 0.8;
    margin-left: 4px;
}

.countdown-payday {
    margin-left: 4px;
    color: var(--accent-color);
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-start, not center: centering made short content (weekend) float in a
       big dead gap below the header while tall content (payday Friday) packed
       edge-to-edge — the vertical rhythm felt inconsistent between day states.
       Starting from the top keeps the gap under the header constant; any
       leftover space collects at the bottom instead, which reads more natural. */
    justify-content: flex-start;
    padding: var(--space-md) var(--space-md) var(--space-md);
    text-align: center;
    gap: var(--space-sm);
}

/* ========================================
   "Sticker" surface — the shared card treatment for
   the message and media containers. Hard offset shadow
   in the accent color (not blurred glass) so it reads
   clearly against the dark canvas.
   ======================================== */
#message-container h2,
#media-container {
    background: var(--surface);
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop-accent);
    transition: transform var(--duration-base) var(--ease-pop),
                box-shadow var(--duration-base) var(--ease-pop);
}

#media-container {
    position: relative;
    margin-top: var(--space-sm);
    /* Extra bottom margin, beyond the flex `gap` on main: the hard "pop" shadow
       renders outside the box (box-shadow doesn't take up layout space), so it
       was eating most of the gap and making the card look like it touched the
       button below it. */
    margin-bottom: var(--space-md);
    width: min(90%, 800px);
    overflow: hidden;
    padding: var(--space-md);
}

#media-container:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 0 var(--accent-color);
}

#media-container img,
#media-container iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    transition: transform var(--duration-base) var(--ease-base);
}

#media-container img.friday-gif,
#media-container img.seal-img {
    margin-bottom: var(--space-md);
}

#media-container img.seal-img {
    max-height: 21vh;
    width: auto;
}

#media-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

#media-container img:hover,
#day-gif-container img:hover {
    transform: scale(1.03);
}

/* Shared "not Friday" reaction gif slot — used on both weekend and weekday
   (same asset, same job). Deliberately NOT the sticker-card treatment: it's a
   small decorative accent, not a content card, so a bordered box around it
   alone reads as an orphaned UI element. A soft drop-shadow keeps it grounded
   instead. */
#day-gif-container {
    margin: var(--space-sm) 0;
}

/* Friday leaves this container empty — collapse it entirely instead of
   leaving dead margin + flex-gap around nothing. */
#day-gif-container:empty {
    display: none;
}

#day-gif-container img {
    max-width: min(60%, 320px);
    border-radius: var(--radius-md);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
    transition: transform var(--duration-base) var(--ease-pop);
}

/* ========================================
   Interactive Button Component
   ======================================== */
#share-button {
    background: var(--accent-color);
    color: var(--on-accent);
    padding: var(--space-md) var(--space-xl);
    border: 3px solid var(--on-accent);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-pop),
                box-shadow var(--duration-base) var(--ease-pop);
    box-shadow: var(--shadow-pop-dark);
}

#share-button:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 0 rgba(0, 0, 0, 0.45);
}

#share-button:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

#share-button:focus-visible {
    outline: 3px solid var(--text-color);
    outline-offset: 4px;
}

/* ========================================
   Message Container
   ======================================== */
#message-container {
    font-size: var(--fs-xl);
    font-family: var(--font-display);
    font-weight: 700;
    padding: var(--space-md);
    min-height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#message-container h2 {
    margin: 0;
    padding: var(--space-md) var(--space-xl);
}

/* ========================================
   Animation Keyframes
   ======================================== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.92;
    }
}

@keyframes glow {
    0%, 100% {
        text-shadow:
            0 0 10px var(--accent-color),
            0 0 24px var(--accent-color);
    }
    50% {
        text-shadow:
            0 0 18px var(--accent-color),
            0 0 40px var(--accent-color),
            0 0 60px var(--accent-color);
    }
}

.glowing-friday {
    animation: glow 2s ease-in-out infinite;
}

@keyframes content-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.content-ready {
    animation: content-fade-in var(--duration-bounce) var(--ease-pop) both;
}

/* ========================================
   Responsive Design (Mobile-First)
   ======================================== */
@media (max-width: 768px) {
    header {
        padding: var(--space-lg) var(--space-md) var(--space-sm);
    }

    #countdown {
        min-width: auto;
        width: 90%;
    }

    #media-container {
        padding: var(--space-md);
    }

    #share-button {
        padding: var(--space-sm) var(--space-lg);
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    main {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    #media-container {
        width: 95%;
        padding: var(--space-sm);
    }
}

/* ========================================
   Accessibility & Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .confetti,
    .heart,
    .sparkle,
    .sparkling-star,
    .balloon,
    .geometric-shape,
    .drop,
    .shape,
    .wave,
    .star,
    .money-bill,
    .dollar-sign,
    .golden-confetti {
        animation: none !important;
        display: none;
    }

    #countdown {
        animation: none !important;
    }

    #main-title:hover {
        transform: none;
    }

    .glowing-friday {
        animation: none !important;
        text-shadow: 0 0 10px var(--accent-color) !important;
    }
}

/* Focus visible for better keyboard navigation */
:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --surface: rgba(255, 255, 255, 0.18);
        --surface-strong: rgba(255, 255, 255, 0.28);
        --border-soft: rgba(255, 255, 255, 0.4);
    }

    #share-button {
        border-width: 4px;
    }
}