/* Advertising landing pages (templates/documents/public/landing.html). Colours come from the theme variables. */

.landing-highlight { color: var(--color-primary); }

.landing-prose p + p,
.landing-prose p + ul,
.landing-prose ul + ul,
.landing-prose ul + p { margin-top: 1rem; }
.landing-prose strong { font-weight: 700; color: var(--color-text); }
.landing-prose-dark strong { color: #fff; }

.landing-checklist { display: grid; gap: .5rem; }
.landing-checklist li { display: flex; align-items: flex-start; gap: .55rem; }
.landing-check { margin-top: .3rem; height: 1.05rem; width: 1.05rem; flex-shrink: 0; color: var(--color-primary); }
.landing-prose-dark .landing-check { color: #fff; }

/* Sections rise in when they reach the screen (x-intersect adds .is-visible). */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
    [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* "Where do I type?": every #cerca link glides to the search bar, dims the page around it, zooms the bar in and out
   and sends two rings out of it (static/js/landing.js). The bar sits above the next section so the province list can
   open over it, and above the dimmed page while highlighted (the z-index drops only after the veil has faded). */
.landing-search { position: relative; z-index: 30; transition: z-index 0s .6s; }
.landing-search.is-highlighted { z-index: 61; transition-delay: 0s; }
.landing-veil {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    background: rgb(15 23 42 / .42); opacity: 0; transition: opacity .6s ease;
}
.landing-veil.is-on { opacity: 1; transition-duration: .3s; }

.landing-search .doc-search-card { transition: border-color .5s ease, box-shadow .5s ease; }
.landing-search.is-highlighted .doc-search-card {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 28px 60px -16px rgb(15 23 42 / .45);
}
@media (prefers-reduced-motion: no-preference) {
    .landing-search.is-highlighted .doc-search-card { animation: landing-search-zoom .95s cubic-bezier(.2, .8, .2, 1); }
    /* Outline rings: unlike borders or transforms they never widen the page on phones. */
    .landing-search.is-highlighted .doc-search-card::before,
    .landing-search.is-highlighted .doc-search-card::after {
        content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        outline: 2px solid var(--color-primary); animation: landing-search-ring 1.3s cubic-bezier(.2, .8, .2, 1) .15s both;
    }
    .landing-search.is-highlighted .doc-search-card::after { animation-delay: .5s; }
}
@keyframes landing-search-zoom {
    0% { transform: scale(1); }
    30% { transform: scale(1.045); }
    55% { transform: scale(.99); }
    78% { transform: scale(1.012); }
    100% { transform: scale(1); }
}
@keyframes landing-search-ring {
    from { outline-offset: 0; opacity: .9; }
    to { outline-offset: 26px; opacity: 0; }
}