/*
 * Pagina „În curând” de pe kidslife.ro (templates/home.html.twig): cardul din
 * mijloc, între header-ul și footer-ul comune. Culorile și fonturile vin din
 * public.css; aici e doar cardul, cu norii și stelele lui.
 */
.coming-soon { display: flex; align-items: flex-start; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
.coming-soon .cloud, .coming-soon .star { position: fixed; pointer-events: none; z-index: -1; }
.coming-soon .cloud { width: 120px; height: 40px; background: #fff; border-radius: 40px; opacity: .75; animation: drift 45s linear infinite; }
.coming-soon .cloud::before, .coming-soon .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.coming-soon .cloud::before { width: 50px; height: 50px; top: -24px; left: 18px; }
.coming-soon .cloud::after { width: 36px; height: 36px; top: -16px; left: 62px; }
.coming-soon .c1 { top: 8%; left: -150px; }
.coming-soon .c2 { top: 72%; left: -150px; animation-duration: 60s; animation-delay: -25s; transform: scale(.7); }
.coming-soon .star { font-size: 22px; color: var(--violet); opacity: .6; animation: twinkle 3s ease-in-out infinite; }
.coming-soon .s1 { top: 12%; right: 12%; }
.coming-soon .s2 { top: 30%; left: 8%; animation-delay: 1s; }
.coming-soon .s3 { bottom: 14%; right: 18%; animation-delay: 2s; }
@keyframes drift { to { transform: translateX(calc(100vw + 300px)); } }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.8); } }

.coming-soon__card {
    position: relative;
    max-width: 540px;
    width: 100%;
    padding: 36px 28px 34px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}
.coming-soon__card > * { margin: 0; }
.coming-soon__card .logo { width: min(320px, 80%); height: auto; display: block; margin: 0 auto 6px; }
.coming-soon__card .kid { width: 190px; max-width: 60%; height: auto; margin: 6px auto 4px; display: block; animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.coming-soon__card h1 { margin: 14px 0 8px; font-size: clamp(1.6rem, 5.5vw, 2.1rem); line-height: 1.2; color: var(--deep); }
.coming-soon__card p { color: var(--muted); line-height: 1.6; font-size: 1.05rem; }
.coming-soon__card .quote { margin-top: 16px; font-style: italic; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .coming-soon * { animation: none !important; } }