/*
 * amarea redesign — home page styles
 * Виокремлено з redesign/home.html inline-<style> (home-секції).
 * Завантажується ПІСЛЯ tokens.css + base.css + components.css + layout.css.
 * Header/footer/mobile menu — у layout.css; cards/badges/swatches/btn — у components.css.
 */

/* ============================================================
 *  HERO — Ken Burns cross-fade slideshow + editorial typography
 * ============================================================ */
.am-hero {
	position: relative;
	min-height: 380px;
	overflow: hidden;
	color: var(--c-paper);
	isolation: isolate;
	background: var(--c-ink);
}
@media (min-width: 768px)  { .am-hero { min-height: 420px; } }
@media (min-width: 1024px) { .am-hero { min-height: 460px; } }
.am-hero__slides { position: absolute; inset: 0; z-index: 0; }
.am-hero__slide,
.am-hero__slide picture {
	position: absolute; inset: 0;
}
.am-hero__slide img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%;
	transform: scale(1.04);
	animation: hero-zoom 28s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes hero-zoom {
	0%   { transform: scale(1.04) translateX(0); }
	100% { transform: scale(1.12) translateX(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
	.am-hero__slide img { animation: none; transform: scale(1.04); }
}

.am-hero__veil {
	position: absolute; inset: 0; z-index: 1;
	/* Mobile: сильніший нижній scrim, бо subhead/CTA читаються над фото пляжу
	   з низьким контрастом. На ≥1024px композиція має negative-space праворуч,
	   тому повертаємо легший трискладовий градієнт. */
	background:
		linear-gradient(180deg, rgba(43,38,36,0.50) 0%, rgba(43,38,36,0.05) 22%, rgba(43,38,36,0.35) 55%, rgba(43,38,36,0.75) 100%);
	pointer-events: none;
}
@media (min-width: 1024px) {
	.am-hero__veil {
		background:
			linear-gradient(180deg, rgba(43,38,36,0.55) 0%, rgba(43,38,36,0.10) 30%, rgba(43,38,36,0.55) 100%);
	}
}

.am-hero__content {
	position: relative; z-index: 2;
	height: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-5) var(--container-pad-mobile);
	display: grid;
	grid-template-rows: 1fr;
	align-items: end;
}
@media (min-width: 1024px) {
	.am-hero__content { padding: var(--space-6) var(--container-pad-desktop); }
}

.am-hero__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-7);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.am-hero__meta-no {
	display: inline-flex; align-items: center; gap: var(--space-3);
}
.am-hero__meta-no::before {
	content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}
.am-hero__meta-loc {
	display: inline-flex; align-items: center; gap: var(--space-2);
	opacity: 0.85;
}
.am-hero__meta-loc::after {
	content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}

.am-hero__center {
	display: grid;
	align-content: end;
	max-width: 40rem;
}

.am-hero__eyebrow {
	display: inline-flex; align-items: center; gap: var(--space-3);
	font-size: var(--text-body-s);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	margin-bottom: var(--space-5);
	opacity: 0.92;
}
.am-hero__eyebrow::before {
	content: ""; width: 40px; height: 1px; background: var(--c-accent);
}

.am-hero__display {
	display: grid;
	grid-template-columns: auto;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0;
}
.am-hero__display-1 {
	font-family: var(--font-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(2.75rem, 8vw, 6rem);
	line-height: 0.88;
	letter-spacing: -0.04em;
	color: var(--c-paper);
}
.am-hero__display-2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.75rem, 8vw, 6rem);
	line-height: 0.88;
	letter-spacing: -0.05em;
	color: var(--c-accent);
	font-feature-settings: "lnum" on;
}

@media (min-width: 768px) {
	.am-hero__display {
		grid-template-columns: auto auto;
		gap: clamp(var(--space-4), 2vw, var(--space-6));
	}
}

.am-hero__sub {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-top: var(--space-6);
	align-items: end;
}
@media (min-width: 768px) {
	.am-hero__sub { grid-template-columns: 1fr auto; }
}
.am-hero__caption {
	max-width: 32rem;
	font-size: var(--text-body);
	line-height: 1.5;
	opacity: 0.95;
	text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
@media (min-width: 1024px) {
	.am-hero__caption { text-shadow: none; opacity: 0.9; }
}
.am-hero__caption strong {
	font-weight: var(--fw-regular);
	font-style: italic;
	font-family: var(--font-display);
	color: var(--c-paper);
	text-decoration: underline;
	text-decoration-color: var(--c-accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}
.am-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid currentColor;
	font-size: var(--text-ui);
	letter-spacing: var(--tracking-loose);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	transition: gap var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.am-hero__cta:hover { gap: var(--space-5); color: var(--c-accent); }
.am-hero__cta svg { width: 20px; height: 20px; }

.am-hero__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(250,248,244,0.18);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.am-hero__scroll {
	display: inline-flex; align-items: center; gap: var(--space-3);
	opacity: 0.85;
}
.am-hero__scroll-line {
	display: inline-block;
	width: 40px; height: 1px;
	background: currentColor;
	position: relative; overflow: hidden;
}
.am-hero__scroll-line::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--c-accent);
	transform: translateX(-100%);
	animation: scroll-line 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-line {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}

/* ============================================================
 *  MARQUEE strip below hero
 * ============================================================ */
.am-marquee {
	background: var(--c-ink);
	color: var(--c-paper);
	padding-block: var(--space-3);
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
	border-bottom: 1px solid rgba(250,248,244,0.10);
}
.am-marquee__track {
	display: inline-flex;
	gap: var(--space-7);
	animation: marquee 50s linear infinite;
	white-space: nowrap;
	padding-left: var(--space-7);
}
.am-marquee__item {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	letter-spacing: -0.02em;
	opacity: 0.92;
}
.am-marquee__item--accent { color: var(--c-accent); }
.am-marquee__sep {
	font-family: var(--font-mono);
	font-size: var(--text-body);
	align-self: center;
	opacity: 0.5;
}

/* ============================================================
 *  SECTION — generic editorial header
 * ============================================================ */
.am-section { padding-block: var(--space-8); position: relative; }
@media (min-width: 1024px) { .am-section { padding-block: var(--space-10); } }

.am-section__overline {
	display: inline-flex; align-items: center; gap: var(--space-3);
	font-size: var(--text-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase;
	color: var(--c-ink-soft);
	margin-bottom: var(--space-4);
}
.am-section__overline::before { content: ""; width: 32px; height: 1px; background: var(--c-accent); }

.am-section__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
}
.am-section__title em {
	font-style: italic; font-weight: 300; color: var(--c-accent-ink);
}

.am-section__head {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
	align-items: end;
	margin-bottom: var(--space-7);
}
@media (min-width: 768px) { .am-section__head { grid-template-columns: 1fr auto; } }

.am-section__link {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font-size: var(--text-ui); font-weight: var(--fw-medium); letter-spacing: var(--tracking-loose);
	text-transform: uppercase;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--c-ink);
	transition: gap var(--duration-base) var(--ease-out);
}
.am-section__link:hover { gap: var(--space-4); }
.am-section__link svg { width: 18px; height: 18px; }

/* ============================================================
 *  COLLECTIONS — magazine spread, asymmetric
 * ============================================================ */
.am-collections {
	display: grid;
	gap: var(--space-4);
	/* minmax(0,1fr), не 1fr: інакше min-content картки (img) роздуває трек і
	   на вузьких екранах (390px) виникає горизонтальний скрол. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .am-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }

.am-collection {
	position: relative;
	display: flex; flex-direction: column;
	text-decoration: none;
}
.am-collection__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--c-paper-2);
}
.am-collection__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--ease-out);
}
.am-collection:hover .am-collection__media img { transform: scale(1.04); }

.am-collection__no {
	position: absolute;
	top: var(--space-3); left: var(--space-3);
	z-index: 1;
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	color: var(--c-ink);
	background: rgba(250, 248, 244, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
}
.am-collection__body {
	display: flex; flex-direction: column;
	padding-top: var(--space-4);
	gap: var(--space-2);
}
.am-collection__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.am-collection__title em { font-style: italic; font-weight: 300; }
.am-collection__meta {
	display: flex; align-items: center; gap: var(--space-3);
	color: var(--c-ink-soft);
	font-size: var(--text-body-s);
}
.am-collection__meta-count { font-variant-numeric: tabular-nums; }

/* All cards equal in the regular 3×2 grid — фідбек власника: каталог має
   бути очевидним, не magazine-spread. */

/* The "Collezioni" oversized word watermark on the right */
.am-collections-block { position: relative; }
.am-collections-block::before {
	content: "Collezioni";
	position: absolute;
	right: calc(var(--container-pad-desktop) * -0.5);
	top: -0.65em;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(6rem, 14vw, 13rem);
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--c-paper-2);
	pointer-events: none;
	z-index: -1;
	white-space: nowrap;
}
@media (max-width: 1023px) {
	.am-collections-block::before { display: none; }
}

/* ============================================================
 *  NEW ARRIVALS — clean product grid with editorial header
 * ============================================================ */
.am-product-grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .am-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .am-product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
 *  USP — dark, numbered, full-bleed
 * ============================================================ */
.am-usp-section {
	background: var(--c-ink);
	color: var(--c-paper);
	padding-block: var(--space-9);
	position: relative;
	overflow: hidden;
}
.am-usp-section__lead {
	max-width: 32rem;
	margin-bottom: var(--space-8);
}
.am-usp-section__lead h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-3);
}
.am-usp-section__lead h2 em { font-style: italic; font-weight: 300; color: var(--c-accent); }
.am-usp-section__lead p { color: rgba(250,248,244,0.70); font-size: var(--text-body); max-width: 28rem; }

.am-usp-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .am-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .am-usp-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-7); } }

.am-usp__no {
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	color: var(--c-accent);
	display: flex; align-items: center; gap: var(--space-3);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgba(250,248,244,0.16);
}
.am-usp__no svg { width: 18px; height: 18px; opacity: 0.8; margin-left: auto; }
.am-usp__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: 1.2;
	margin-bottom: var(--space-3);
}
.am-usp__heading em { font-style: italic; font-weight: 300; }
.am-usp__text {
	font-size: var(--text-body-s);
	line-height: 1.55;
	color: rgba(250,248,244,0.70);
}

/* ============================================================
 *  EDITORIAL STORY — layered, asymmetric
 * ============================================================ */
.am-story {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 1024px) {
	.am-story { grid-template-columns: 5fr 6fr; gap: var(--space-10); }
}
.am-story__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.am-story__media img { width: 100%; height: 100%; object-fit: cover; }
.am-story__media-label {
	position: absolute;
	bottom: var(--space-4); left: var(--space-4);
	color: var(--c-paper);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	mix-blend-mode: difference;
}
.am-story__copy { position: relative; }
.am-story__lead {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.875rem, 3vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin-bottom: var(--space-6);
}
.am-story__lead em { font-style: italic; font-weight: 300; color: var(--c-accent-ink); }
.am-story__text { color: var(--c-ink-soft); max-width: 32rem; margin-bottom: var(--space-5); }
.am-story__sign {
	display: flex; flex-direction: column; gap: 2px;
	font-size: var(--text-body-s);
	color: var(--c-ink-soft);
	margin-top: var(--space-5);
}
.am-story__sign-name { color: var(--c-ink); font-weight: var(--fw-medium); }

/* ============================================================
 *  INSTAGRAM strip
 * ============================================================ */
.am-insta-wrap { background: var(--c-paper-2); padding-block: var(--space-7); margin-top: var(--space-7); }
.am-insta {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .am-insta { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .am-insta { grid-template-columns: repeat(6, 1fr); } }
.am-insta a {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
	display: block;
	background: var(--c-paper);
}
@media (min-width: 1024px) { .am-insta a { aspect-ratio: 1 / 1; } }
/* Masonry на desktop: 1-й та 4-й елементи — великі 2×2, решта 1×1. */
@media (min-width: 1024px) {
	.am-insta a:nth-child(1),
	.am-insta a:nth-child(4) {
		grid-column: span 2;
		grid-row: span 2;
	}
}
.am-insta img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 700ms var(--ease-out), filter 400ms var(--ease-out);
}
.am-insta a:hover img { transform: scale(1.04); filter: saturate(1.05) brightness(0.96); }
/* Постійний bottom scrim — щоб caption завжди читався, але верх фото лишався чистим. */
.am-insta a::before {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
	background: linear-gradient(to top, rgba(43,38,36,0.55), rgba(43,38,36,0));
	pointer-events: none;
	z-index: 1;
}
.am-insta__cap {
	position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
	display: flex; align-items: baseline; gap: var(--space-3);
	color: var(--c-paper);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	z-index: 2;
}
.am-insta__cap-no { opacity: 0.7; }
.am-insta__cap-label { font-family: var(--font-sans); letter-spacing: var(--tracking-normal); text-transform: none; font-size: var(--text-body-s); }
.am-insta__cap-arrow {
	margin-left: auto;
	width: 14px; height: 14px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.am-insta a:hover .am-insta__cap-arrow { opacity: 1; transform: translateX(0); }

/* ============================================================
 *  Reveal on scroll
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	.am-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
		transition-delay: var(--reveal-delay, 0ms);
	}
	.am-reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}