/* ==========================================================================
   BARFUSS.ZONE · CI 2026 (c) · immersion layer on top of (b)
   Same layout, same texts. Adds: full-bleed image breaks, mask reveals,
   gentle page transitions, lighter/larger headings, calmer service blocks.
   Everything visible without JS; motion only with html.ci-motion.
   ========================================================================== */

/* ---------- Test: hero without gold frame (gold hairlines elsewhere stay) ---------- */
.hero::after { content: none !important; display: none !important; animation: none !important; }
.hero { border: 0 !important; }

/* ---------- Typography: larger, lighter, more air (wording untouched) ---------- */
.section { padding-top: clamp(4.5rem, 9vw, 8.5rem); padding-bottom: clamp(4.5rem, 9vw, 8.5rem); }
.section-header { max-width: 900px; margin-bottom: clamp(2.75rem, 5vw, 4.75rem); }
.section-title, .zigzag-content h2 {
    font-weight: 400; letter-spacing: -.012em; line-height: 1.1;
    font-size: clamp(2.05rem, 4.7vw, 4.1rem); margin-bottom: 1.35rem;
    overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
.section-title em, .zigzag-content h2 em { font-weight: 400; letter-spacing: -.005em; }
h3.section-title { font-size: clamp(1.75rem, 3vw, 2.6rem) !important; }
.eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .3em; margin-bottom: 1.05rem; }
.section-subtitle { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.85; font-weight: 300; max-width: 720px; margin-left: auto; margin-right: auto; text-wrap: pretty; }
.section-header[style*="text-align:left"] .section-subtitle, .section-header[style*="text-align: left"] .section-subtitle { margin-left: 0; }
.section-header::after { width: 56px; margin-top: 1.6rem; opacity: .7; }
.offer-card h3, .pricing-name, .finder-rec-title, .contact-info-card h3, .contact-form-card h3 { font-weight: 400; letter-spacing: 0; }

/* ---------- Full-bleed image breaks (index) ---------- */
.bfz-break {
    position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden;
    height: clamp(380px, 78vh, 820px); background: #0C0B09; isolation: isolate;
}
.bfz-break-frame { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.bfz-break-frame canvas.bfz-clean-canvas, .bfz-break-frame > img:not(.bfz-protected-img) {
    position: absolute; left: 0; top: -9%; width: 100%; height: 118%; display: block;
    object-fit: cover; object-position: var(--bfz-pos, center 40%); pointer-events: none !important;
}
.bfz-break-frame canvas.bfz-clean-canvas { opacity: 0; transition: opacity 1.2s var(--ease); }
.bfz-break-frame canvas.bfz-clean-canvas.is-drawn { opacity: 1; }
/* soft blend into the black page at top & bottom */
.bfz-break::before {
    content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 11, 9, .9) 0%, rgba(12, 11, 9, 0) 14%, rgba(12, 11, 9, 0) 84%, rgba(12, 11, 9, .92) 100%);
}
.bfz-break-credit {
    position: absolute; right: clamp(14px, 3vw, 40px); bottom: clamp(16px, 4vh, 36px); z-index: 9;
    font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(230, 210, 181, .72);
    background: rgba(12, 11, 9, .5); border: 1px solid rgba(212, 175, 55, .32); border-radius: 999px; padding: .45rem .9rem;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.bfz-break-credit:hover { color: #F5E8D2; border-color: var(--gold); }
@media (max-width: 760px) {
    .bfz-break { height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
    .bfz-break-frame canvas.bfz-clean-canvas, .bfz-break-frame > img:not(.bfz-protected-img) { object-position: var(--bfz-pos-m, var(--bfz-pos, center)); top: -5%; height: 110%; }
    .bfz-break-credit { font-size: .6rem; letter-spacing: .12em; }
}

/* ---------- Calmer service parts: prices, process, vouchers (all info kept) ---------- */
.pricing-grid { gap: 1.1rem; }
.pricing-card { padding: 1.9rem 1.5rem 1.6rem; background: #110F0C; border-color: rgba(175, 128, 80, .22); box-shadow: none; }
.pricing-card:hover { transform: none; border-color: rgba(212, 175, 55, .5); box-shadow: none; }
.pricing-card.featured { box-shadow: 0 14px 36px rgba(0, 0, 0, .45) !important; }
.pricing-tier { font-size: .64rem !important; letter-spacing: .22em; font-weight: 500; margin-bottom: .7rem; }
.pricing-name { font-size: 1.45rem; margin-bottom: .35rem; }
.pricing-price { font-weight: 400; font-size: clamp(1.9rem, 2.4vw, 2.3rem); letter-spacing: -.01em; margin-bottom: .9rem; padding-bottom: .9rem; position: relative; }
.pricing-price::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 1px; background: var(--g-line); opacity: .7; }
.pricing-desc { font-size: .9rem; line-height: 1.65; margin-bottom: 1.15rem; }
.pricing-card .feature-list li, .addons-info-box .feature-list li { font-size: .86rem; line-height: 1.55; color: var(--text-muted); }
.pricing-card .feature-list li strong { font-weight: 500; }
.pricing-card .feature-list { margin-bottom: 1.25rem; }
.pricing-card .feature-list li + li { border-top: 1px solid rgba(175, 128, 80, .14); padding-top: .55rem; margin-top: .55rem; }
.pricing-card .btn, .pricing-card .btn-outline { margin-top: auto; }

.addons-info-box {
    background: transparent !important; border: 1px solid rgba(175, 128, 80, .22) !important;
    border-left: 1px solid rgba(175, 128, 80, .22) !important; padding: clamp(1.4rem, 3vw, 2.1rem) !important; position: relative;
}
.addons-info-box::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--g-line); opacity: .55; }
.addons-info-box > div[style*="grid"] > div { background: transparent !important; border-color: rgba(175, 128, 80, .18) !important; }
.addons-info-box h3 { font-weight: 400; }
.addons-info-box h4 { font-weight: 500; font-family: var(--font-heading); }

.voucher-home-banner {
    background: #100E0B !important; border: 1px solid rgba(212, 175, 55, .32) !important; box-shadow: none !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
}
.voucher-home-banner h3 { font-weight: 400; }
.voucher-home-banner > a { border: 1px solid rgba(212, 175, 55, .4) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .6) !important; }

.delivery-step-card { box-shadow: none !important; }
.finder-box { box-shadow: none; }
.finder-question { font-weight: 400; }

/* ---------- Mask / curtain reveals (only when JS enabled motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
    html.ci-motion [data-ci-mask] {
        clip-path: inset(10% 0 10% 0); opacity: 1 !important; translate: none !important;
        transition: clip-path 1.5s cubic-bezier(.65, 0, .25, 1) var(--ci-delay, 0s);
    }
    html.ci-motion [data-ci-mask] canvas.bfz-clean-canvas { scale: 1.1; transition: scale 2.2s cubic-bezier(.22, .61, .36, 1) var(--ci-delay, 0s), opacity 1.2s ease, transform .65s ease, filter .5s ease; }
    html.ci-motion [data-ci-mask].is-in { clip-path: inset(0 0 0 0); }
    html.ci-motion [data-ci-mask].is-in canvas.bfz-clean-canvas { scale: 1; }
    html.ci-motion [data-ci-par][data-ci-mask] canvas.bfz-clean-canvas, html.ci-motion [data-ci-par][data-ci-mask].is-in canvas.bfz-clean-canvas { scale: 1.08; }
    /* image breaks: curtain opens from the centre */
    html.ci-motion .bfz-break[data-ci-mask] { clip-path: inset(0 8% 0 8%); }
    html.ci-motion .bfz-break[data-ci-mask].is-in { clip-path: inset(0 0 0 0); }
    html.ci-motion .bfz-break[data-ci-mask] canvas.bfz-clean-canvas { scale: 1.14; }
    html.ci-motion .bfz-break[data-ci-mask].is-in canvas.bfz-clean-canvas { scale: 1.04; }
    html.ci-motion .bfz-break canvas.bfz-clean-canvas { translate: 0 var(--bfz-py, 0px); will-change: translate; }
    /* headings: soft mask wipe upward */
    html.ci-motion .section-header[data-ci-reveal] .section-title { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .25, 1) .12s; }
    html.ci-motion .section-header[data-ci-reveal].is-in .section-title { clip-path: inset(-10% -6% -20% -6%); }

    /* gentle page transition (cross-document, where supported) */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: ciPageOut .45s cubic-bezier(.4, 0, .2, 1) both; }
    ::view-transition-new(root) { animation: ciPageIn .7s cubic-bezier(.22, .61, .36, 1) both; }
    @keyframes ciPageOut { to { opacity: 0; } }
    @keyframes ciPageIn { from { opacity: 0; } }
    html.ci-leaving body { opacity: 0; transition: opacity .35s ease; }
}
@media (prefers-reduced-motion: reduce) {
    [data-ci-mask], .section-title { clip-path: none !important; }
    .bfz-break canvas.bfz-clean-canvas { translate: none !important; scale: 1 !important; }
}