/* =========================================================================
   📋 1. CONFIGURARE GLOBALĂ ȘI IMPORTURI
   ========================================================================= */
@charset "UTF-8";

/* Importuri */
@import "frame.css";
@import "main.css";
@import "flower.css";
@import "envelope.css";
@import "player.css";
@import "lock.css";
@import "messages.css";
@import "counter.css";
@import "responsive.css";
@import "petals.css";
@import "daily-message.css";
@import "night-mode.css";
@import "stars.css";


/* =========================================================================
   VARIABILE GLOBALE ȘI RESET
   ========================================================================= */
:root {
    --bg-main: #fff0f3;
    --text-main: #3f37c9;
    --decor-color: #ffb7b2;
    --water-1: rgba(255, 183, 178, 0.55);
    --water-2: rgba(226, 211, 240, 0.65);
}

html,
body {
    margin: 0;
    padding: 0;
    border: none !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* =========================================================================
   ANIMAȚII COMUNE (folosite în mai multe locuri)
   ========================================================================= */
@keyframes mainMasterFloat {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    50% { transform: translateY(-15px) translateX(8px) rotate(-1deg); }
    100% { transform: translateY(-30px) translateX(-4px) rotate(1deg); }
}

@keyframes pearlescentShine {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes frameSuperPulse {
    0% {
        outline-color: color-mix(in srgb, var(--decor-color) 60%, #c5a880);
        box-shadow:
            inset 0 4px 10px rgba(255, 255, 255, 0.9),
            inset 0 0 35px rgba(184, 146, 106, 0.35),
            inset 0 0 0 2px rgba(255, 255, 255, 0.8),
            0 12px 25px rgba(0, 0, 0, 0.05),
            0 3px 8px rgba(184, 146, 106, 0.12),
            0 0 40px color-mix(in srgb, var(--water-1) 15%, transparent);
        border-color: #fbf9f5 !important;
    }
    100% {
        outline-color: color-mix(in srgb, var(--decor-color) 90%, #ffd700);
        outline-offset: -13px;
        box-shadow:
            inset 0 6px 14px rgba(255, 255, 255, 1),
            inset 0 0 50px rgba(184, 146, 106, 0.5),
            inset 0 0 0 2px rgba(255, 255, 255, 0.9),
            0 20px 45px rgba(184, 146, 106, 0.12),
            0 4px 12px rgba(184, 146, 106, 0.22),
            0 0 60px color-mix(in srgb, var(--decor-color) 35%, transparent);
        border-color: #fcfbf9 !important;
    }
}

@keyframes spinIndividualClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spinIndividualCounter {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* ==========================================
   👆 INDICATOR LÂNGĂ PLIC
   ========================================== */

.envelope-hint {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Dancing Script', cursive;
    font-size: 1.2rem;
    color: #b892a6;
    background: rgba(255, 253, 250, 0.85);
    backdrop-filter: blur(8px);
    padding: 6px 18px;
    border-radius: 30px;
    border: 1px solid rgba(255, 183, 178, 0.3);
    box-shadow: 0 4px 12px rgba(200, 170, 180, 0.1);
    white-space: nowrap;
    animation: hintBounce 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 6;
}

@keyframes hintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}

/* Dacă plicul este deschis, ascundem indicatorul */
.envelope-wrapper.open ~ .envelope-hint,
.envelope-wrapper.open + .envelope-hint {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Adaptare pentru ecrane mici */
@media (max-width: 480px) {
    .envelope-hint {
        font-size: 1rem;
        padding: 4px 14px;
        bottom: -16px;
    }
}