/* Bricksnstone: page and scroll animations. Loads last, after style.css and pages.css.
   Everything is progressive: without JavaScript, or with "reduce motion" on, content is simply shown. */

:root { --bns-ease: cubic-bezier(0.2, 0.65, 0.2, 1); }

/* ---- Page transitions (browsers that support cross-page view transitions) ---- */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root) { animation: 0.22s ease both bnsVtOut; }
::view-transition-new(root) { animation: 0.38s ease both bnsVtIn; }
@keyframes bnsVtOut { to { opacity: 0; } }
@keyframes bnsVtIn { from { opacity: 0; } }

/* ---- Page load ---- */
@keyframes bnsPageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnsFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bnsKen { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes bnsPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

.site-main { animation: bnsPageIn 0.6s ease both; }

.bns-hero { overflow: hidden; }
.bns-hero__media { inset: -8% 0; will-change: transform; }
.bns-hero__media img { animation: bnsKen 20s ease-out both; }
.bns-hero__content > *, .bns-pagehero__inner > * { animation: bnsFadeUp 0.9s var(--bns-ease) both; }
.bns-hero__content > :nth-child(1), .bns-pagehero__inner > :nth-child(1) { animation-delay: 0.1s; }
.bns-hero__content > :nth-child(2), .bns-pagehero__inner > :nth-child(2) { animation-delay: 0.22s; }
.bns-hero__content > :nth-child(3), .bns-pagehero__inner > :nth-child(3) { animation-delay: 0.34s; }
.bns-hero__content > :nth-child(4), .bns-pagehero__inner > :nth-child(4) { animation-delay: 0.46s; }
.bns-whatsapp-float { animation: bnsPop 0.6s var(--bns-ease) 1.2s both; }

/* ---- Header: compact with a soft shadow once the page scrolls ---- */
.site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.site-header__inner { transition: min-height 0.3s ease; }
.site-header .custom-logo { transition: max-height 0.3s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(12, 31, 51, 0.09); }
.site-header.is-scrolled .site-header__inner { min-height: 4rem; }
.site-header.is-scrolled .custom-logo { max-height: 2.75rem; }

/* ---- Scroll progress bar ---- */
.bns-progress { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 3px; background: var(--bns-color-blue); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---- Menu link underline ---- */
.primary-navigation a { padding-bottom: 0.3rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s ease, color 0.2s ease; }
.primary-navigation a:hover, .primary-navigation a:focus-visible, .primary-navigation .current-menu-item a { background-size: 100% 1px; }

/* ---- Buttons ---- */
.bns-button { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) {
	.bns-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12, 31, 51, 0.18); }
}

/* ---- Scroll reveal (only while JavaScript is active) ---- */
html.bns-js :is(
	.bns-section-head, .bns-svc__head, .bns-about__head, .bns-gr-head, .bns-partners__head, .bns-filter,
	.bns-card, .bns-pillar, .bns-panel, .bns-step, .bns-split__text, .bns-split__media,
	.bns-cta-band__inner, .bns-svc__intro, .bns-fact, .bns-svc__panel, .bns-svc__card,
	.bns-about__card, .bns-value, .bns-principle, .bns-about__lead,
	.bns-gr, .bns-vt, .bns-contact__info, .bns-form, .bns-map, .bns-empty,
	.site-footer__brand, .site-footer__visit, .site-footer__contact
) {
	opacity: 0;
	translate: 0 28px;
	transition: opacity 0.8s var(--bns-ease), translate 0.8s var(--bns-ease), transform 0.35s ease, box-shadow 0.35s ease;
}
html.bns-js :is(
	.bns-section-head, .bns-svc__head, .bns-about__head, .bns-gr-head, .bns-partners__head, .bns-filter,
	.bns-card, .bns-pillar, .bns-panel, .bns-step, .bns-split__text, .bns-split__media,
	.bns-cta-band__inner, .bns-svc__intro, .bns-fact, .bns-svc__panel, .bns-svc__card,
	.bns-about__card, .bns-value, .bns-principle, .bns-about__lead,
	.bns-gr, .bns-vt, .bns-contact__info, .bns-form, .bns-map, .bns-empty,
	.site-footer__brand, .site-footer__visit, .site-footer__contact
).is-visible {
	opacity: 1;
	translate: 0 0;
	transition-delay: var(--bns-d, 0ms), var(--bns-d, 0ms), 0ms, 0ms;
}

/* ---- Hover lift for cards ---- */
@media (hover: hover) {
	.bns-card:hover, .bns-panel:hover, .bns-svc__card:hover, .bns-svc__panel:hover, .bns-gr:hover, .bns-about__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 36px rgba(12, 31, 51, 0.1);
	}
}

/* ---- Printing and reduced motion: no animation, everything visible ---- */
@media print {
	html.bns-js :is(.bns-section-head, .bns-card, .bns-pillar, .bns-panel, .bns-step, .bns-fact, .bns-svc__card, .bns-svc__panel, .bns-value, .bns-principle, .bns-gr, .bns-vt, .bns-form) { opacity: 1 !important; translate: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.bns-progress { display: none; }
}