/* ========================================
   MOTYW — BABY SHOWER: SZAŁWIA I BEŻ
   Tu zmieniasz kolory, czcionki i wygląd kart.
   Szkielet strony (układ, okna, formularze) jest w css/baza.css.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;1,9..144,300;1,9..144,500&family=Nunito:wght@400;600;700&family=Caveat:wght@500&display=swap');

/* ---- PALETA ---- */
:root {
    --mleko:    #fbf7f1;   /* tło */
    --bez:      #efe5d7;
    --szalwia:  #9fb298;   /* główny akcent */
    --szalwia-ciemna: #6f8468;
    --roz:      #ecc9c0;
    --orzech:   #5c5046;   /* tekst */

    --font-display: 'Fraunces', serif;
    --font-body:    'Nunito', sans-serif;
    --font-script:  'Caveat', cursive;
    --display-weight: 300;

    --bg: var(--mleko);
    --bg-open:
        radial-gradient(circle at 12% 18%, rgba(159, 178, 152, 0.25) 0 18%, transparent 19%),
        radial-gradient(circle at 88% 70%, rgba(236, 201, 192, 0.3) 0 16%, transparent 17%),
        radial-gradient(circle at 80% 10%, rgba(239, 229, 215, 0.9) 0 12%, transparent 13%),
        var(--mleko);
    --bg-envelope: linear-gradient(180deg, #eef1ea 0%, var(--mleko) 60%, #f6ebe4 100%);
    --ink: var(--orzech);
    --accent: var(--szalwia-ciemna);
    --shadow: 92, 80, 70;

    --card-bg: #fffdf9;
    --card-ink: var(--orzech);
    --card-accent: var(--szalwia-ciemna);
    --card-line: var(--szalwia);
    --card-radius: 22px;

    --btn-bg: var(--szalwia-ciemna);
    --btn-ink: #fff;
    --btn-shadow: 0 2cqw 5cqw rgba(111, 132, 104, 0.35);

    --ui-bg: rgba(255, 253, 249, 0.92);
    --ui-ink: var(--orzech);
    --ui-accent: var(--szalwia-ciemna);
    --ui-border: 1px solid #dfe5da;

    --panel-bg: #fffdf9;
    --panel-ink: var(--orzech);
    --panel-radius: 28px;
    --field-bg: #f4efe7;
    --field-border: #e4dccf;
    --focus-ring: rgba(111, 132, 104, 0.22);
    --overlay: rgba(92, 80, 70, 0.4);

    --deco-opacity: 0.9;
}

/* ========================================
   EKRAN Z KOPERTĄ — unoszące się baloniki
   ======================================== */

.balloons { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.balloons img {
    position: absolute;
    bottom: -220px;
    width: 90px;
    animation: balloon-up 16s linear infinite;
}
.balloons img:nth-child(1) { left: 8%;  animation-delay: 0s; }
.balloons img:nth-child(2) { left: 22%; animation-delay: -6s; width: 70px; }
.balloons img:nth-child(3) { left: 74%; animation-delay: -3s; width: 100px; }
.balloons img:nth-child(4) { left: 88%; animation-delay: -10s; width: 75px; }
.balloons img:nth-child(5) { left: 55%; animation-delay: -13s; width: 60px; }

@keyframes balloon-up {
    0%   { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(20px, -60vh) rotate(4deg); }
    90%  { opacity: 1; }
    100% { transform: translate(-10px, -125vh) rotate(-3deg); opacity: 0; }
}

.envelope-intro .intro-kicker {
    font-family: var(--font-script);
    font-size: 2rem;
    color: var(--szalwia-ciemna);
}

.envelope-intro .intro-name {
    font-family: var(--font-display);
    font-size: 4.4rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.1;
}

.envelope-intro .intro-date {
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--szalwia-ciemna);
    margin-top: 0.4rem;
}

.envelope {
    /* koperta: kolory papieru, podszewki i pieczęci */
    --env-paper:   #bccab4;
    --env-paper-2: #a5b69c;
    --env-edge:    rgba(80, 100, 70, 0.3);
    --env-liner:   #f7e8e2;
    --env-liner-2: #e4bcb0;
    --env-seal:    #efe0cf;
    --env-seal-2:  #bca283;
    --env-seal-3:  #fffaf3;
    --env-seal-ink:#6f8468;
    --env-letter:  #fffdf9;
    --env-ink:     #4d5a47;
}

.tap-text { color: var(--szalwia-ciemna); }

/* ========================================
   KARTY
   ======================================== */

.card { border: 0; }
.card.t-szalwia { --card-bg: linear-gradient(180deg, #e8eee4, #dbe4d5); }
.card.t-bez     { --card-bg: linear-gradient(180deg, #f6efe5, #efe5d7); }
.card.t-roz     { --card-bg: linear-gradient(180deg, #fbefeb, #f5dfd8); --card-accent: #b0786a; --btn-bg: #b98476; }

/* przerywana „szyta" ramka jak na kocyku */
.card::before {
    content: '';
    position: absolute;
    inset: 4cqw;
    border: 0.45cqw dashed color-mix(in srgb, var(--card-line) 70%, transparent);
    border-radius: 3.5cqw;
    pointer-events: none;
}
.card.has-img::before { display: none; }

.c-kicker { font-weight: 700; }
.c-h { font-size: 9.5cqw; font-style: italic; }
.c-script { font-size: 11cqw; color: var(--card-accent); }
.c-icon { width: 24cqw; height: auto; }

.c-timeline time { font-weight: 700; }

/* ---- karta tytułowa ---- */

.card-title .card-inner { gap: 1cqw; }

.balloon-bunch { position: relative; width: 50cqw; height: 40cqw; margin-bottom: 2cqw; }
.balloon-bunch img { position: absolute; width: 20cqw; }
.balloon-bunch img:nth-child(1) { left: 4cqw;  top: 4cqw;  transform: rotate(-12deg); }
.balloon-bunch img:nth-child(2) { left: 15cqw; top: 0;     width: 22cqw; z-index: 1; }
.balloon-bunch img:nth-child(3) { right: 4cqw; top: 5cqw;  transform: rotate(12deg); }

.title-kicker { font-family: var(--font-script); font-size: 10cqw; color: var(--szalwia-ciemna); line-height: 1; }
.title-name { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 22cqw; line-height: 1; }
.title-sub { font-size: 3.8cqw; letter-spacing: 0.3cqw; margin-top: 1cqw; }
.title-date {
    margin-top: 4cqw;
    padding: 2cqw 5cqw;
    border-radius: 99px;
    background: var(--szalwia);
    color: #fff;
    font-size: 3.4cqw;
    font-weight: 700;
    letter-spacing: 0.6cqw;
}

/* ---- zgadywanka ---- */

.guess-row { display: flex; gap: 3cqw; margin: 2cqw 0; }
.guess-row span {
    width: 15cqw;
    height: 15cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 7cqw;
    background: #fff;
    box-shadow: 0 1cqw 3cqw rgba(var(--shadow), 0.12);
}

/* ---- zakończenie ---- */

.closing .closing-big { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 2.4rem; }
.closing .signature { font-family: var(--font-script); font-size: 2.2rem; color: var(--szalwia-ciemna); margin-top: 0.4rem; }

/* ---- dekoracje ---- */

.deco { width: 190px; }
.deco.balloon-deco { width: 90px; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* ---- okna ---- */

.sheet-title { font-style: italic; font-weight: 300; font-size: 2.2rem; }
.countdown-title { font-family: var(--font-script); font-size: 1.3rem; }
.countdown-item b { font-family: var(--font-display); font-weight: 500; }

@media (max-width: 768px) {
    .envelope-intro .intro-name { font-size: 3rem; }
    .balloons img { width: 60px; }
    .closing .closing-big { font-size: 1.8rem; }
    .deco.balloon-deco { width: 13vw; }
    .countdown-title { font-size: 1rem; }
}