/* BOSH Group — Custom styles */

/* Swoop divider used between sections */
.swoop-top {
    position: relative;
    margin-top: -2px;
}

.swoop-bottom {
    position: relative;
    margin-bottom: -2px;
}

/* Hero gradient */
.hero-bg {
    background: linear-gradient(135deg, #114e72 0%, #0d3d5a 60%, #092d43 100%);
}

/* Hero top section gentle fade-in on page load */
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-fade { animation: heroFadeIn 4.5s ease-out both; }
@media (prefers-reduced-motion: reduce) { .hero-fade { animation: none; } }

/* Reveal-on-scroll for public-page sections (.reveal-scope wraps page content in
   header/footer). Progressive enhancement: the hidden start state only applies under
   .js-reveal (added by JS), so with JS off every section shows normally. Sections
   fade + rise as they enter the viewport (above-the-fold ones animate on load).
   Mark a section .reveal-skip (kept static, e.g. + z-10) if it has overflowing
   dividers that would tear/blend against neighbours while animating. */
.js-reveal .reveal-scope > section { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
.js-reveal .reveal-scope > section.in { opacity: 1; transform: none; }
/* A section with overflowing swoop dividers must never animate: while it's semi-
   transparent or moving its swoops blend/tear against the neighbours. Keep it fully
   opaque and still; its solid swoops just sit over the neighbours as they reveal. */
.js-reveal .reveal-scope > section.reveal-skip { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal-scope > section { opacity: 1; transform: none; transition: none; } }

/* Card hover lift */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(17, 78, 114, 0.15);
}

/* Hide Alpine elements before init to prevent flash */
[x-cloak] { display: none !important; }

/* Smooth transitions */
a, button {
    transition-property: color, background-color, border-color, opacity;
    transition-duration: 150ms;
}

/* Rendered Markdown (product descriptions) */
.bosh-md h2 { font-size: 1.1rem; font-weight: 700; color: rgb(var(--bosh-dark, 17 78 114)); margin: 1rem 0 .5rem; }
.bosh-md h3 { font-size: 1rem;  font-weight: 600; color: rgb(var(--bosh-dark, 17 78 114)); margin: .75rem 0 .4rem; }
.bosh-md h4 { font-weight: 600; color: rgb(var(--bosh-dark, 17 78 114)); margin: .6rem 0 .3rem; }
.bosh-md p  { margin: .5rem 0; }
.bosh-md ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.bosh-md ol { list-style: decimal; padding-left: 1.25rem; margin: .5rem 0; }
.bosh-md li { margin: .2rem 0; }
.bosh-md strong { font-weight: 600; color: rgb(var(--bosh-dark, 17 78 114)); }
.bosh-md a { color: rgb(var(--bosh-blue, 0 174 239)); text-decoration: underline; }
.bosh-md code { background: #f1f5f9; padding: 0 .25rem; border-radius: .25rem; font-size: .9em; }