/*
 * MarinaNova site CSS (loaded without blocking first paint, see inc/assets.php).
 * Contents: scroll-driven reveals, section helpers, product cards/rows (shared by home and catalog),
 * image skeleton shimmer, footer. (The marquee strip is in home-critical.css: it sits right under the hero.)
 * Tokens only (see theme.json); aliases (--mn-*) are defined in critical.css.
 * Motion: transform/opacity only; hover rules inside (hover: hover); all off under prefers-reduced-motion.
 */

/* ---------- Scroll-driven reveals (pure CSS). Where unsupported, content is simply visible. ---------- */
@keyframes mn-rise {
	from {
		opacity: 0;
		transform: translateY(36px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes mn-pop {
	from {
		transform: translateY(28px) scale(0.96);
	}
	to {
		transform: none;
	}
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mn-reveal {
			animation: mn-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
		/* Children rise one after another (transform only, so cards are never "invisible"). */
		.mn-tiles > li,
		.mn-row .wc-block-product,
		.mn-steps > * {
			animation: mn-pop linear both;
			animation-timeline: view();
			animation-range: entry calc(var(--i, 0) * 5%) entry calc(30% + var(--i, 0) * 5%);
		}
		.mn-tiles > li:nth-child(2), .mn-row .wc-block-product:nth-child(2), .mn-steps > *:nth-child(2) { --i: 1; }
		.mn-tiles > li:nth-child(3), .mn-row .wc-block-product:nth-child(3), .mn-steps > *:nth-child(3) { --i: 2; }
		.mn-tiles > li:nth-child(4), .mn-row .wc-block-product:nth-child(4) { --i: 3; }
		.mn-row .wc-block-product:nth-child(n + 5) { --i: 4; }
	}
}

/* ---------- Section helpers ---------- */
.mn-section {
	padding-block: var(--wp--preset--spacing--70);
	content-visibility: auto;
	contain-intrinsic-size: auto 40rem;
}
.mn-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.mn-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--mn-tap);
	color: var(--mn-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--mn-cyan-ink);
}
.mn-link-arrow--text {
	border-bottom: 0;
}
.mn-link-arrow:hover {
	color: var(--mn-cyan-ink);
}
.mn-link-arrow .mn-icon {
	width: 1.125rem;
	height: 1.125rem;
	transition: transform var(--mn-base) var(--mn-spring);
}
@media (hover: hover) {
	.mn-link-arrow:hover .mn-icon {
		transform: translateX(4px);
	}
}
.mn-on-cyan {
	background: var(--mn-cyan);
	color: var(--mn-ink);
}

/* ---------- Image skeleton shimmer (JS adds .is-loaded; a CSS failsafe hides it after 5 s) ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.wc-block-components-product-image:not(.is-loaded)::after,
	.mn-hero__media:not(.is-loaded):has(img)::after,
	.mn-tile:not(.is-loaded):has(img)::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--mn-paper) 75%, transparent) 50%, transparent 70%);
		transform: translateX(-100%);
		animation: mn-shimmer 1.4s linear infinite, mn-skel-off 0s linear 5s forwards;
	}
}
@keyframes mn-shimmer {
	to {
		transform: translateX(100%);
	}
}
@keyframes mn-skel-off {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* ---------- Product rows and cards (WooCommerce Product Collection styled as rounded cards) ----------
   Used on the home page now; the catalog (next phase) reuses it by adding the class mn-row. */
.mn-row .wc-block-product-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mn-row .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.mn-row .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container > li {
	position: relative;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 48em) {
	.mn-row .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 64em) {
	.mn-row .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}
/* Phones: the row becomes a horizontal scroll-snap strip (no JS). */
@media (max-width: 47.999em) {
	.mn-row .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 72%;
		gap: var(--wp--preset--spacing--40);
		margin-inline: calc(var(--mn-gutter) * -1);
		padding-inline: var(--mn-gutter);
		padding-bottom: 0.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--mn-gutter);
		scrollbar-width: none;
	}
	.mn-row .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}
	.mn-row .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container > li {
		scroll-snap-align: start;
	}
}
.mn-row .wc-block-components-product-image {
	position: relative;
	isolation: isolate;
	margin: 0 0 0.85rem;
	overflow: hidden;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
}
.mn-row .wc-block-components-product-image a {
	display: block;
}
.mn-row .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	padding: 4%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mn-xl) var(--mn-expo), opacity var(--mn-slow) var(--mn-ease);
}
.mn-row .wc-block-components-product-sale-badge {
	position: absolute;
	z-index: 3;
	top: 0.7rem;
	left: 0.7rem;
	right: auto;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border: 0;
	border-radius: var(--mn-r-pill);
	background: var(--mn-ink);
	color: var(--mn-paper);
	font: 700 0.75rem / 1 var(--mn-font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mn-row .wp-block-post-title {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.mn-row .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.mn-row .wp-block-woocommerce-product-price {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.mn-row .wp-block-woocommerce-product-price del {
	color: var(--mn-muted);
	font-weight: 400;
}
.mn-row .wp-block-woocommerce-product-price ins {
	text-decoration: none;
}
/* "Novo" badge (printed by PHP only when the owner sets a number of days). */
.mn-card__new {
	position: absolute;
	z-index: 3;
	top: 0.7rem;
	right: 0.7rem;
	padding: 0.3rem 0.65rem;
	border-radius: var(--mn-r-pill);
	background: var(--mn-cyan);
	color: var(--mn-ink);
	font: 700 0.75rem / 1 var(--mn-font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Second image (printed by PHP) and available-size chips: devices that can hover only. */
.mn-card__img2,
.mn-card__sizes {
	display: none;
}
@media (hover: hover) {
	.mn-row .wc-block-product:hover .wc-block-components-product-image img:first-of-type {
		transform: scale(1.06);
	}
	.mn-row .mn-card__img2 {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		padding: 4%;
		object-fit: contain;
		mix-blend-mode: multiply;
		opacity: 0;
		transform: scale(1.02);
	}
	.mn-row .wc-block-product:hover .mn-card__img2 {
		opacity: 1;
		transform: scale(1.06);
	}
	.mn-row .wc-block-product:hover .wc-block-components-product-image:has(.mn-card__img2) img:first-of-type {
		opacity: 0;
	}
	.mn-row .mn-card__sizes {
		position: absolute;
		right: 0.6rem;
		bottom: 0.6rem;
		left: 0.6rem;
		z-index: 3;
		display: flex;
		flex-wrap: wrap;
		gap: 0.3rem;
		padding: 0.55rem;
		border-radius: var(--mn-r-md);
		background: var(--mn-paper);
		box-shadow: var(--mn-shadow-md);
		transform: translateY(calc(100% + 1rem));
		transition: transform var(--mn-slow) var(--mn-expo);
	}
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.mn-row .mn-card__sizes {
			background: var(--mn-glass);
			-webkit-backdrop-filter: blur(var(--mn-blur));
			backdrop-filter: blur(var(--mn-blur));
		}
	}
	.mn-row .wc-block-product:hover .mn-card__sizes,
	.mn-row .wc-block-product:focus-within .mn-card__sizes {
		transform: none;
	}
	.mn-card__sizes span {
		padding: 0.2rem 0.6rem;
		border: 1px solid var(--mn-line-strong);
		border-radius: var(--mn-r-pill);
		font-size: 0.75rem;
		font-weight: 600;
	}
	.mn-row .wc-block-product:hover .wp-block-post-title a {
		text-decoration: underline;
		text-decoration-color: var(--mn-cyan-ink);
		text-underline-offset: 0.2em;
	}
}

/* ---------- Footer (dark, rounded top) ---------- */
.mn-footer {
	--mn-logo-ink: var(--mn-paper);
	--mn-logo-knockout: var(--mn-ink);
	margin-top: var(--wp--preset--spacing--40);
	border-radius: var(--mn-r-xl) var(--mn-r-xl) 0 0;
	background: var(--mn-ink);
	color: var(--mn-paper);
	font-size: var(--wp--preset--font-size--small);
}
.mn-footer a {
	color: var(--mn-paper);
	text-decoration: none;
}
.mn-footer p {
	margin: 0;
}
.mn-footer__info {
	display: grid;
	gap: 1.5rem;
	padding-block: 2.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line-on-dark);
}
.mn-footer__info-item {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}
.mn-footer__info-icon {
	margin-top: 0.1rem;
}
.mn-footer__info-title {
	font-weight: 600;
}
.mn-footer__info-text {
	color: var(--wp--preset--color--footer-muted);
}
.mn-footer__main {
	display: grid;
	gap: 2.5rem;
	padding-block: 3rem;
}
.mn-footer .mn-logo {
	width: 11rem;
}
.mn-footer__about {
	max-width: 28rem;
	margin-top: 1.25rem !important;
	color: var(--wp--preset--color--footer-muted);
}
.mn-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mn-tap);
	margin-top: 0.5rem;
}
.mn-footer__title {
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--footer-muted);
	font: 600 var(--wp--preset--font-size--x-small) / 1.2 var(--mn-font-text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.mn-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mn-footer__col li {
	padding-block: 0.3rem;
}
.mn-footer__col li a {
	position: relative;
	display: inline-block;
	padding-block: 0.25rem;
}
.mn-footer__col li a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mn-base) var(--mn-expo);
}
.mn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--line-on-dark);
	color: var(--wp--preset--color--footer-muted);
	font-size: var(--wp--preset--font-size--x-small);
}
@media (hover: hover) {
	.mn-footer__col li a:hover::after {
		transform: scaleX(1);
	}
	.mn-footer__social:hover span {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}
@media (min-width: 48em) {
	.mn-footer__info {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
	.mn-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 64em) {
	.mn-footer__main {
		grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
		gap: 3rem;
	}
}