/* BrizeFix — hover states and motion.
 * The Figma file shows hover states statically (one card or row drawn in its
 * hover/active state); this file applies those states to every matching
 * element and adds the transitions between them. Loaded after the layout files.
 * Everything that moves is switched off for prefers-reduced-motion.
 */

/* Header ----------------------------------------------------------------- */

/* Inner pages: frosted bar behind the header (Figma: white 5% + background blur). */
body:not(.home) .site-header:not(.is-stuck) {
	background-color: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Nav links: lime underline grows from the left. */
@media (min-width: 1101px) {
	.menu--primary > li > a,
	.menu__parent {
		position: relative;
	}
	.menu--primary > li > a::after,
	.menu__parent::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4px;
		height: 1.5px;
		border-radius: 2px;
		background: var(--c-lime);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.35s var(--ease);
	}
	.menu--primary > li > a:hover::after,
	.menu--primary > li > a:focus-visible::after,
	.menu__parent:hover::after,
	.menu-item-has-children:hover > .menu__parent::after {
		transform: scaleX(1);
		transform-origin: left;
	}
	.menu__parent::after {
		right: 15px;
	}
	.menu--primary .sub-menu a {
		transition: background-color 0.2s, color 0.2s, padding-left 0.25s var(--ease);
	}
	.menu--primary .sub-menu a:hover {
		padding-left: 20px;
	}
}

/* Hero: content rises in on page load. ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.hero__title-main,
	.hero__lead > *,
	.hero__title-side,
	.hero__chips .chip,
	.center-hero__inner > *,
	.page-hero__inner > *,
	.detail-hero__title,
	.project-hero > *,
	.contact-hero__intro,
	.form-card,
	.not-found__inner > * {
		animation: rise-in 0.9s var(--ease) both;
	}
	.hero__title-side,
	.center-hero__inner > :nth-child(2),
	.page-hero__inner > :nth-child(2),
	.project-hero > :nth-child(2),
	.form-card,
	.not-found__inner > :nth-child(2) {
		animation-delay: 0.12s;
	}
	.hero__lead > :first-child,
	.page-hero__inner > :nth-child(3),
	.not-found__inner > :nth-child(3) {
		animation-delay: 0.22s;
	}
	.hero__lead > :last-child,
	.hero__chips .chip:nth-child(1),
	.page-hero__inner > :nth-child(4),
	.not-found__inner > :nth-child(4) {
		animation-delay: 0.3s;
	}
	.hero__chips .chip:nth-child(2) {
		animation-delay: 0.38s;
	}
	.hero__chips .chip:nth-child(3) {
		animation-delay: 0.46s;
	}
	.hero__img,
	.center-hero__img,
	.page-hero__img,
	.detail-hero__img,
	.contact-hero__img {
		animation: hero-zoom 1.8s var(--ease) both;
	}
}
@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes hero-zoom {
	from {
		scale: 1.08;
	}
	to {
		scale: 1;
	}
}

/* Hero badges */
.chip {
	transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-2px);
}
.chip__icon {
	transition: transform 0.5s var(--ease);
}
.chip:hover .chip__icon {
	transform: rotate(-12deg) scale(1.1);
}

/* Section labels: the rule draws in when the section scrolls into view. --- */
@media (prefers-reduced-motion: no-preference) {
	.js .sec-label {
		border-bottom-color: transparent;
		background-image: linear-gradient(var(--line), var(--line));
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 0% 1px;
		transition: background-size 1.2s var(--ease);
	}
	.js .sec-label--dark {
		background-image: linear-gradient(var(--line-dark), var(--line-dark));
	}
	.js .sec-label.is-visible {
		background-size: 100% 1px;
	}
}

/* Services accordion: the photo eases in when a row opens. ---------------- */
.svc__img {
	transform: scale(1.08);
	transition: transform 0.9s var(--ease);
}
.svc.is-open .svc__img {
	transform: none;
}
.svc__link {
	display: inline-block;
	transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}
.svc:not(.is-open) .svc__link:hover {
	transform: translateX(8px);
}

/* Project cards: zoom + lime "view" badge over the photo. ----------------- */
.project-card__media {
	position: relative;
}
.project-card__media::after {
	content: "";
	position: absolute;
	top: 16px;
	right: 16px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--c-lime) url("../icons/arrow-up-right-dark.svg") no-repeat center / 18px 18px;
	opacity: 0;
	transform: scale(0.6) rotate(-45deg);
	transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.project-card:hover .project-card__media::after,
.project-card:focus-within .project-card__media::after {
	opacity: 1;
	transform: none;
}
.project-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left 100%;
	background-size: 0% 1.5px;
	transition: background-size 0.4s var(--ease);
}
.project-card:hover .project-card__title a,
.project-card__title a:focus-visible {
	background-size: 100% 1.5px;
	text-decoration: none;
}
.project-card .tag {
	transition: background-color 0.25s, border-color 0.25s;
}
.project-card:hover .tag {
	border-color: #dfe6c4;
}

/* Process step cards (Figma: dark cards; hover lifts and lights the step pill). */
.step-card {
	border: 1px solid transparent;
	transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s var(--ease);
}
.step-card__num {
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.step-card:hover {
	transform: translateY(-6px);
	border-color: rgba(219, 242, 144, 0.25);
	background: rgba(255, 255, 255, 0.08);
}
.step-card:hover .step-card__num {
	border-color: var(--c-lime);
	background: var(--c-lime);
	color: var(--c-dark);
}

/* Team: socials drop in one after another (Figma shows the hover card). --- */
.member__socials li {
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}
.member:hover .member__socials li,
.member:focus-within .member__socials li {
	opacity: 1;
	transform: none;
}
.member__socials li:nth-child(2) {
	transition-delay: 0.05s;
}
.member__socials li:nth-child(3) {
	transition-delay: 0.1s;
}
.member__socials li:nth-child(4) {
	transition-delay: 0.15s;
}
.member__social {
	transition: background-color 0.2s, transform 0.25s var(--ease);
}
.member__social:hover {
	transform: translateY(-3px);
}
@media (hover: none) {
	.member__socials li {
		opacity: 1;
		transform: none;
	}
}

/* Testimonials: slider buttons swap colors on hover (Figma: lime = active). */
.slider-btn {
	color: var(--c-lime);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.slider-btn--next {
	color: var(--c-dark);
}
.slider-btn--prev:hover {
	background: var(--c-lime);
	color: var(--c-dark);
}
.slider-btn--next:hover {
	background: var(--c-dark);
	color: var(--c-lime);
}
.slider-btn svg {
	transition: transform 0.25s var(--ease);
}
.slider-btn--prev:hover svg {
	transform: translateX(-3px);
}
.slider-btn--next:hover svg {
	transform: translateX(3px);
}
.marquee:hover .marquee__track {
	animation-play-state: paused;
}

/* Blog cards */
.post-card__title a {
	transition: color 0.25s;
}
.post-card:hover .post-card__title a {
	color: #3d4a46;
}

/* About: Why choose us — icon circle fills lime on hover. ----------------- */
.why__icon {
	transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s var(--ease);
}
.why__icon img {
	transition: filter 0.35s var(--ease);
}
.why__item h3 {
	transition: color 0.3s;
}
.why__item:hover .why__icon {
	border-color: var(--c-lime);
	background: var(--c-lime);
	transform: rotate(-8deg) scale(1.05);
}
.why__item:hover .why__icon img {
	filter: brightness(0) saturate(100%);
}
.why__item:hover h3 {
	color: var(--c-lime);
}

/* About photo cards: caption rises a little. */
.photo-card__caption {
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.photo-card:hover .photo-card__caption {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(20, 31, 29, 0.18);
}

/* FAQ: smooth open and close (only when JavaScript runs; without it every answer shows). */
.accordion__item {
	transition: background-color 0.25s, border-color 0.25s;
}
.accordion__item:hover {
	border-color: #dfe5c8;
}
.accordion__item.is-open {
	border-color: #e3e8d2;
}
.js .accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--ease);
}
.js .accordion__item.is-open .accordion__panel {
	grid-template-rows: 1fr;
}
.accordion__inner {
	min-height: 0;
	overflow: hidden;
}
.js .accordion__answer {
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}
.js .accordion__item.is-open .accordion__answer {
	opacity: 1;
	transition-delay: 0.1s;
}
.accordion__icon::before,
.accordion__icon::after {
	transition: transform 0.4s var(--ease);
}
.accordion__item.is-open .accordion__icon::before {
	transform: rotate(180deg);
}
.accordion__item.is-open .accordion__icon::after {
	transform: rotate(180deg);
}
.faq-promo__img {
	transition: transform 0.9s var(--ease);
}
.faq-promo:hover .faq-promo__img {
	transform: scale(1.05);
}

/* Contact cards and form */
.info-card {
	transition: background-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.info-card__icon {
	transition: background-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.info-card:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-3px);
}
.info-card:hover .info-card__icon {
	background: var(--c-lime);
	transform: rotate(-8deg);
}
.field :is(input, select, textarea):hover {
	border-color: #c9d2db;
}

/* Footer */
.footer-list a {
	display: inline-block;
	transition: color 0.2s, transform 0.3s var(--ease);
}
.footer-list a:hover {
	transform: translateX(4px);
}
.newsletter__icon {
	transition: transform 0.35s var(--ease);
}
.newsletter__submit:hover .newsletter__icon {
	transform: rotate(-12deg);
}

/* Reduced motion: keep color changes, drop movement. ---------------------- */
@media (prefers-reduced-motion: reduce) {
	.step-card:hover,
	.info-card:hover,
	.chip:hover,
	.photo-card:hover .photo-card__caption,
	.why__item:hover .why__icon,
	.member__social:hover,
	.footer-list a:hover,
	.svc:not(.is-open) .svc__link:hover {
		transform: none;
	}
	.svc__img,
	.faq-promo:hover .faq-promo__img {
		transform: none;
	}
	.js .accordion__panel {
		transition: none;
	}
}