/* ========================================
   MOTYW — CHRZEST ŚWIĘTY: PASTELE, BIEL I ZŁOTO
   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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Pinyon+Script&family=Jost:wght@300;400;500;600&display=swap');

/* ---- PALETA ---- */
:root {
    --kosc:     #fbf8f3;   /* ciepła biel — tło */
    --roz:      #f3dfe2;   /* pudrowy róż */
    --roz-mocny:#e2b7bf;
    --blekit:   #dce8f4;   /* pudrowy błękit */
    --zloto:    #c49a4c;
    --zloto-jasne: #e3c98f;
    --grafit:   #4d4550;   /* tekst */

    --font-display: 'Cormorant Garamond', serif;
    --font-body:    'Jost', sans-serif;
    --font-script:  'Pinyon Script', cursive;
    --display-weight: 500;

    --bg: var(--kosc);
    --bg-open:
        radial-gradient(ellipse at 10% 0%, var(--roz) 0%, transparent 45%),
        radial-gradient(ellipse at 90% 30%, var(--blekit) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 90%, var(--blekit) 0%, transparent 40%),
        var(--kosc);
    --bg-envelope: linear-gradient(170deg, var(--blekit) 0%, var(--kosc) 45%, var(--roz) 100%);
    --ink: var(--grafit);
    --accent: var(--zloto);
    --shadow: 120, 95, 70;

    --card-bg: #fffdf9;
    --card-ink: var(--grafit);
    --card-accent: var(--zloto);
    --card-line: var(--zloto-jasne);
    --card-radius: 6px;

    --btn-bg: var(--zloto);
    --btn-ink: #fff;
    --btn-shadow: 0 2cqw 5cqw rgba(196, 154, 76, 0.35);

    --ui-bg: rgba(255, 253, 249, 0.9);
    --ui-ink: var(--grafit);
    --ui-accent: var(--zloto);
    --ui-border: 1px solid var(--zloto-jasne);

    --panel-bg: #fffdf9;
    --panel-ink: var(--grafit);
    --field-bg: #f7f1ea;
    --field-border: #e8dccb;
    --focus-ring: rgba(196, 154, 76, 0.25);
    --overlay: rgba(77, 69, 80, 0.45);

    --deco-opacity: 0.85;
}

/* ========================================
   EKRAN Z KOPERTĄ
   ======================================== */

.clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.clouds img {
    position: absolute;
    width: 220px;
    opacity: 0.9;
    animation: cloud-drift 38s linear infinite;
}
.clouds img:nth-child(1) { top: 8%;  left: -240px; }
.clouds img:nth-child(2) { top: 62%; left: -240px; width: 300px; animation-duration: 52s; animation-delay: -20s; }
.clouds img:nth-child(3) { top: 30%; left: -240px; width: 160px; animation-duration: 44s; animation-delay: -34s; opacity: 0.7; }

@keyframes cloud-drift {
    to { transform: translateX(calc(100vw + 480px)); }
}

.envelope-intro .intro-kicker {
    font-size: 0.8rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--zloto);
}

.envelope-intro .intro-name {
    font-family: var(--font-script);
    font-size: 5.6rem;
    line-height: 1.25;
    color: var(--grafit);
}

.envelope-intro .intro-date {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
    letter-spacing: 2px;
    color: var(--zloto);
}

.envelope {
    /* koperta: kolory papieru, podszewki i pieczęci */
    --env-paper:   #fffdf9;
    --env-paper-2: #efe6da;
    --env-edge:    rgba(196, 154, 76, 0.35);
    --env-liner:   #f7e4e7;
    --env-liner-2: #e3c98f;
    --env-seal:    #c9a14f;
    --env-seal-2:  #87652a;
    --env-seal-3:  #f5e2ad;
    --env-seal-ink:#6f5220;
    --env-letter:  #fffdf9;
    --env-ink:     var(--grafit);
    /* satynowa wstążka z kokardą zamiast pieczęci */
    --env-ribbon:   #f0d2d7;
    --env-ribbon-2: #d9aab2;
    --env-ribbon-3: #fcf0f2;
}
.env-address { bottom: 4.5%; }
.env-letter { box-shadow: inset 0 0 0 6px #fffdf9, inset 0 0 0 7px var(--zloto-jasne), 0 1px 6px rgba(var(--shadow), 0.18); }

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

/* ========================================
   KARTY — podwójna złota ramka
   ======================================== */

.card::before,
.card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
.card::before { inset: 3.5cqw; border: 0.5cqw solid var(--zloto-jasne); }
.card::after  { inset: 5cqw;   border: 0.2cqw solid var(--zloto-jasne); }
.card.has-img::before,
.card.has-img::after { display: none; }

.card.tint-roz    { --card-bg: linear-gradient(180deg, #fffdf9 55%, #fbeef0 100%); }
.card.tint-blekit { --card-bg: linear-gradient(180deg, #fffdf9 55%, #edf3fa 100%); }

.c-kicker { letter-spacing: 1cqw; }
.c-h { font-size: 9cqw; font-style: italic; }
.c-script { font-size: 15cqw; color: var(--grafit); }
.c-text { font-size: 4.1cqw; }
.c-rule { width: 22cqw; border-top-width: 0.3cqw; }

.ornament {
    display: flex;
    align-items: center;
    gap: 2cqw;
    color: var(--zloto);
    font-size: 3.4cqw;
}
.ornament::before,
.ornament::after {
    content: '';
    width: 12cqw;
    border-top: 0.3cqw solid var(--zloto-jasne);
}

.c-icon { width: 16cqw; height: 16cqw; color: var(--zloto); }

.c-timeline li { grid-template-columns: 14cqw 1fr; }
.c-timeline time { font-family: var(--font-display); font-size: 4.6cqw; font-weight: 600; }

/* ---- karta 1: zdjęcie maluszka w łuku ---- */

.card-title .card-inner { gap: 1.4cqw; padding-top: 9cqw; }

.baby-photo {
    position: relative;
    width: 58cqw;
    aspect-ratio: 5 / 6;
    border-radius: 29cqw 29cqw 2cqw 2cqw;
    overflow: hidden;
    border: 0.8cqw solid #fff;
    box-shadow: 0 0 0 0.4cqw var(--zloto-jasne), 0 3cqw 6cqw rgba(var(--shadow), 0.18);
    margin-bottom: 2cqw;
}
.baby-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.title-name {
    font-family: var(--font-script);
    font-size: 17cqw;
    line-height: 1.1;
    margin-top: -1cqw;
}

.title-date {
    font-family: var(--font-display);
    font-size: 4.4cqw;
    font-style: italic;
    color: var(--zloto);
    letter-spacing: 0.3cqw;
}

/* ---- karta rodziców chrzestnych ---- */

.godparent { display: flex; flex-direction: column; gap: 0.6cqw; }
.godparent small {
    font-size: 2.9cqw;
    letter-spacing: 0.8cqw;
    text-transform: uppercase;
    color: var(--zloto);
}
.godparent b {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 10cqw;
    line-height: 1.15;
}

.heart { color: var(--roz-mocny); font-size: 5cqw; line-height: 1; }

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

.closing .verse-orn { color: var(--zloto); font-size: 1.6rem; }
.closing .verse {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 0.6rem 0;
}
.closing .verse-src { font-size: 0.8rem; letter-spacing: 3px; color: var(--zloto); text-transform: uppercase; }
.closing .signature { font-family: var(--font-script); font-size: 2.6rem; margin-top: 1.2rem; }

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

.sheet-title { font-style: italic; font-size: 2.3rem; }
.countdown-title { font-style: italic; }
.countdown-item b { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; }

@media (max-width: 768px) {
    .envelope-intro .intro-name { font-size: 4rem; }
    .envelope-intro .intro-date { font-size: 1rem; }
    .clouds img { width: 140px; }
    .closing .verse { font-size: 1.25rem; }
    .countdown-item b { font-size: 1.2rem; }
}