/* ==========================================================================
   Worcester — hover states and motion
   The Figma file shows one item per group in its "active" look (yellow
   Commercial card, highlighted why-us row, open FAQ with a minus, yellow
   next arrow, yellow X social icon). Those looks are used here as the hover
   and focus states. Everything respects prefers-reduced-motion (base.css).
   ========================================================================== */

/* ---------- Header ---------- */
@media (min-width: 1101px) {
	.nav__list > .nav__item > .nav__link { position: relative; }
	.nav__list > .nav__item > .nav__link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
		height: 2px;
		border-radius: 2px;
		background: var(--primary);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.35s var(--ease);
	}
	.nav__list > .nav__item > .nav__link:hover::after,
	.nav__list > .nav__item:focus-within > .nav__link::after,
	.nav__list > .nav__item > .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
}
.navbar__phone .icon { transition: transform 0.4s var(--ease); }
.navbar__phone:hover .icon { animation: ring 0.6s var(--ease); }
@keyframes ring {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-14deg); }
	40% { transform: rotate(12deg); }
	60% { transform: rotate(-8deg); }
	80% { transform: rotate(5deg); }
}
.brand__badge { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.brand:hover .brand__badge { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 17, 14, 0.12); }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--dark);
	transform: translateY(101%);
	transition: transform 0.35s var(--ease);
}
.btn--yellow:hover, .btn--white:hover { background: var(--primary); color: var(--white); }
.btn--yellow:hover::before, .btn--white:hover::before,
.btn--yellow:focus-visible::before, .btn--white:focus-visible::before { transform: none; }
.btn--yellow:focus-visible, .btn--white:focus-visible { color: var(--white); }
.btn--dark::before { background: var(--primary); }
.btn--dark:hover { color: var(--dark); }
.btn--dark:hover::before { transform: none; }
.btn--soft::before { display: none; }

/* ---------- Service cards: hover = the yellow "Commercial" look ---------- */
.service-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease); }
.service-card__icon { transition: background-color 0.35s var(--ease), transform 0.35s var(--ease); }
.service-card__icon .icon { transition: transform 0.5s var(--ease); }
.service-card__text { transition: color 0.35s var(--ease); }
@media (hover: hover) {
	.service-card:hover { background: var(--primary); }
	.service-card:hover .service-card__icon { background: var(--white); }
	.service-card:hover .service-card__icon .icon { transform: rotate(-8deg) scale(1.08); }
	.service-card:hover .service-card__text { color: var(--dark); }
	/* While another card is hovered, the highlighted card steps back to white. */
	.services__grid:has(.service-card:hover) .service-card--highlight:not(:hover),
	.card-grid:has(.service-card:hover) .service-card--highlight:not(:hover) { background: var(--white); }
	.services__grid:has(.service-card:hover) .service-card--highlight:not(:hover) .service-card__icon,
	.card-grid:has(.service-card:hover) .service-card--highlight:not(:hover) .service-card__icon { background: rgba(253, 226, 104, 0.3); }
	.services__grid:has(.service-card:hover) .service-card--highlight:not(:hover) .service-card__text,
	.card-grid:has(.service-card:hover) .service-card--highlight:not(:hover) .service-card__text { color: var(--body); }
}
.service-card:focus-within { background: var(--primary); }
.service-card:focus-within .service-card__icon { background: var(--white); }

/* ---------- About cards ---------- */
.about__card--cutout { transition: background-color 0.4s var(--ease); }
.about__card--cream:hover { background: var(--primary); }
.about__card--shade:hover { background: #e9e4da; }

/* ---------- Projects stack ---------- */
.stack__slide[data-pos="0"] .stack__img { transition: transform 1.2s var(--ease); }
.stack__slide[data-pos="0"]:hover .stack__img { transform: scale(1.04); }
.stack__slide:not([data-pos="0"]) { cursor: pointer; }
.stack__dot { position: relative; }
.stack__dot::before { content: ""; position: absolute; inset: -14px -5px; }
.stack__dot:hover:not([aria-current="true"]) { background: rgba(255, 255, 255, 0.6); }
.icon-btn { transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- Working process ---------- */
.process__step { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.process__num { transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.45s var(--ease); }
@media (hover: hover) {
	.process__step:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(17, 17, 14, 0.08); }
	.process__step:hover .process__num { transform: scale(1.12) rotate(-8deg); }
}

/* ---------- Why us / Mission rows ---------- */
.why__icon .icon, .mission__icon .icon { transition: transform 0.45s var(--ease); }
.why__item.is-active .why__icon .icon, .mission__item.is-active .mission__icon .icon { transform: scale(1.08); }
.why__title { transition: color 0.3s; }
.why__item.is-active .why__title { color: var(--primary); }
.why__photo img, .contact__photo img { transition: transform 1.2s var(--ease); }
.why__photo:hover img, .contact__photo:hover img { transform: scale(1.04); }

/* ---------- Reviews: arrows swap dark and yellow (design shows both looks) ---------- */
.icon-btn--dark:hover { background: var(--primary); color: var(--dark); }
.icon-btn--yellow:hover { background: var(--dark); color: var(--primary); }
.icon-btn--glass:hover { background: var(--primary); color: var(--dark); }
.icon-btn .icon { transition: transform 0.25s var(--ease); }
.reviews__prev:hover .icon, [data-stack-prev]:hover .icon { transform: translateX(-3px); }
.reviews__next:hover .icon, [data-stack-next]:hover .icon { transform: translateX(3px); }
.review.is-from-left { animation-name: review-from-left; }
.review.is-from-right { animation-name: review-from-right; }
@keyframes review-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes review-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.review__stars .icon { transition: transform 0.3s var(--ease); }
.review:hover .review__stars .icon { transform: translateY(-2px); }
.review:hover .review__stars .icon:nth-child(2) { transition-delay: 0.04s; }
.review:hover .review__stars .icon:nth-child(3) { transition-delay: 0.08s; }
.review:hover .review__stars .icon:nth-child(4) { transition-delay: 0.12s; }
.review:hover .review__stars .icon:nth-child(5) { transition-delay: 0.16s; }

/* ---------- Start a project picker ---------- */
.start__option { transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease); }
.start__option:hover:not([aria-pressed="true"]) { background: var(--primary-shade); border-color: var(--dark); }
.start__option:active { transform: scale(0.98); }
.start__option[aria-pressed="true"]::before { animation: dot-in 0.35s var(--ease); }
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- FAQ: plus turns into the design's minus, answer slides open ---------- */
.faq__item { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq__item:hover { border-color: rgba(17, 17, 14, 0.25); }
.faq__item[open] { box-shadow: 0 16px 32px rgba(17, 17, 14, 0.06); }
.faq__toggle .plus__v { transform-box: fill-box; transform-origin: center; transition: transform 0.3s var(--ease); }
.faq__item[open] .faq__toggle .plus__v { transform: scaleY(0); }
.faq__a { overflow: hidden; }
.faq__card { transition: transform 0.4s var(--ease); }
.faq__card-bg { transition: transform 1.2s var(--ease), filter 0.6s; }
.faq__card:hover .faq__card-bg { transform: scale(1.12); filter: blur(1px); }
.faq__bulb { transition: transform 0.5s var(--ease); }
.faq__card:hover .faq__bulb { transform: rotate(-12deg) scale(1.08); }

/* ---------- Blog cards: Read More fills yellow ---------- */
.post-card { transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s; }
@media (hover: hover) {
	.post-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 40px rgba(17, 17, 14, 0.08); }
	.post-card:hover .post-card__more { background: var(--primary); }
	.post-card:hover .post-card__more .btn__icon { transform: translateX(3px); }
}

/* ---------- Team, contact, project cards ---------- */
.member__card { transition: transform 0.45s var(--ease), background-color 0.45s var(--ease); }
@media (hover: hover) {
	.member:hover .member__card { transform: translateY(-8px); background: rgba(17, 17, 14, 0.82); }
}
.member__socials a:hover { color: var(--primary); transform: translateY(-2px); }
.contact-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.contact-card__icon .icon { transition: transform 0.45s var(--ease); }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(17, 17, 14, 0.06); }
.contact-card:hover .contact-card__icon .icon { transform: scale(1.12) rotate(-6deg); }
.project-card__info { transition: transform 0.45s var(--ease); }
.project-card:hover .project-card__info { transform: translateY(-6px); }

/* ---------- Footer: social icons turn yellow (the design's X icon) ---------- */
.socials__link { transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.socials__link:hover { transform: translateY(-3px); }
.footer-menu a { position: relative; transition: opacity 0.2s, padding-left 0.3s var(--ease); }
.footer-menu a:hover { padding-left: 6px; color: var(--primary); }

/* ---------- Hero entrance ---------- */
.js .hero__line { display: block; animation: rise 0.9s var(--ease) both; }
.js .hero__line--end { animation-delay: 0.12s; }
.js .hero__media { animation: fade-in 1s 0.15s var(--ease) both; }
.js .hero__card { animation: rise 0.9s 0.45s var(--ease) both; }
.js .page-hero__title { animation: rise 0.9s 0.1s var(--ease) both; }
.hero__img { transition: transform 1.6s var(--ease); }
.hero__media:hover .hero__img { transform: scale(1.02); }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Scroll reveal stagger (classes added by main.js) ---------- */
.js [data-reveal] { transition-delay: var(--reveal-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
	.js .hero__line, .js .hero__media, .js .hero__card, .js .page-hero__title { animation: none; }
}