/* Mr.Transfer — Block 1 Hero: crossfade + ken-burns slider, centered headline */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	touch-action: pan-y;   /* horizontal swipe → JS slider; vertical → page scroll */
}

/* ---- Slider ---- */
.hero__slider { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide-img {
	position: absolute; inset: 0;
	background-image: var(--bg-d);
	background-size: cover;
	background-position: center 42%;
	transform: scale(1.04);
}
/* mobile: use the subject-framed vertical crop so it reads clearly on a tall screen */
@media (max-width: 640px) {
	.hero__slide-img { background-image: var(--bg-m); background-position: center center; }
}
/* ken-burns only on the active slide */
.hero__slide.is-active .hero__slide-img {
	animation: heroKenburns 7s ease-out forwards;
}
@keyframes heroKenburns {
	from { transform: scale(1.04); }
	to   { transform: scale(1.16); }
}

.hero__scrim {
	position: absolute; inset: 0; z-index: 1;   /* above the slide photos, still behind the headline */
	background:
		linear-gradient(180deg, rgba(14,14,16,0) 26%, rgba(14,14,16,.5) 50%, rgba(14,14,16,0) 74%),   /* central band for the headline */
		radial-gradient(120% 90% at 50% 55%, rgba(14,14,16,.32) 0%, rgba(14,14,16,.58) 70%, rgba(14,14,16,.9) 100%),
		linear-gradient(180deg, rgba(14,14,16,.5) 0%, rgba(14,14,16,.12) 35%, rgba(14,14,16,.62) 100%);
}

/* ---- Headline ---- */
.hero__inner { position: relative; z-index: 1; padding: 6rem 1.5rem 0; width: 100%; }

.hero__title {
	margin: 0;
	color: #fff;
	display: flex; flex-direction: column; align-items: center;
	line-height: .98;
	text-shadow: 0 6px 50px rgba(0,0,0,.45);
}
.hero__line { display: block; }
/* hero title in the logo style — Bebas Neue, MR. gold + TRANSFER white, all caps */
.hero__line--1 {
	font-family: "Bebas Neue", var(--font-body);
	font-weight: 400; font-synthesis: none;
	font-size: clamp(3.6rem, 2rem + 8.5vw, 9.5rem);
	letter-spacing: 1px; text-transform: uppercase;
	display: inline-flex; align-items: baseline; justify-content: center;
	-webkit-font-smoothing: antialiased;
}
/* solid gold — cleaner than a gradient on the large hero text */
.hero__line--1 .hero__mr { color: var(--c-gold); }
/* square gold dot — solid gold, bottom on the baseline (level with the letters) */
.hero__line--1 .hero__dot {
	display: inline-block; vertical-align: baseline; align-self: baseline;
	width: .12em; height: .12em; border-radius: 2px;
	margin: 0 .06em;
	background: var(--c-gold);
}
.hero__line--1 .hero__tr { color: #fff; }
.hero__line--2 {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.25rem, .9rem + 1.8vw, 2.4rem);
	margin-top: .35em;
	letter-spacing: .04em;
	color: var(--c-gold-soft);
}

/* contact under the headline (minimal) */
.hero__contact {
	display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
	margin-top: clamp(2rem, 4vh, 3.2rem);
	color: #fff;
}
.hero__contact:hover { color: #fff; }
.hero__contact-label {
	font-size: .72rem; font-weight: 600; letter-spacing: var(--tracking-wide);
	text-transform: uppercase; color: var(--c-gold);
}
.hero__contact-num {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 600; letter-spacing: .01em;
}
.hero__contact-num svg { color: var(--c-gold); }
.hero__contact:hover .hero__contact-num { color: var(--c-gold-soft); }

/* text reveal animation */
.hero__line, .hero__contact { opacity: 0; transform: translateY(34px); }
.hero[data-hero].is-ready .hero__line--1 { animation: heroLineIn 1s var(--ease-out) .25s forwards; }
.hero[data-hero].is-ready .hero__line--2 { animation: heroLineIn 1s var(--ease-out) .5s forwards; }
.hero[data-hero].is-ready .hero__contact { animation: heroLineIn 1s var(--ease-out) .5s forwards; }
@keyframes heroLineIn {
	from { opacity: 0; transform: translateY(34px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Dots (no arrows) ---- */
.hero__dots {
	position: absolute; left: 50%; bottom: clamp(2.5rem, 6vh, 4.5rem); transform: translateX(-50%);
	z-index: 2; display: inline-flex; gap: .7rem;
}
.hero__dot {
	width: 30px; height: 3px; padding: 0; border: 0; cursor: pointer; border-radius: 2px;
	background: rgba(245,245,240,.3);
	transition: background var(--dur-fast) var(--ease-out);
	position: relative; overflow: hidden;
}
.hero__dot:hover { background: rgba(245,245,240,.55); }
.hero__dot.is-active { background: rgba(245,245,240,.3); }
.hero__dot.is-active::after {
	content: ""; position: absolute; inset: 0; width: 0; background: var(--c-gold);
	animation: heroDotFill 7s linear forwards;
}
@keyframes heroDotFill { from { width: 0; } to { width: 100%; } }

/* ---- Slide arrows (thin) ---- */
.hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; cursor: pointer; color: rgba(245,245,240,.72);
	transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
.hero__arrow:hover { color: var(--c-gold); }
.hero__arrow--prev { left: clamp(.4rem, 2.5vw, 2.25rem); }
.hero__arrow--next { right: clamp(.4rem, 2.5vw, 2.25rem); }
.hero__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 560px) {
	.hero__arrow { width: 38px; height: 38px; }
	.hero__arrow svg { width: 28px; height: 28px; }
	.hero__arrow--prev { left: .1rem; }
	.hero__arrow--next { right: .1rem; }
}

/* ---- Scroll hint ---- */
.hero__scroll {
	position: absolute; left: 50%; bottom: clamp(.8rem, 2.5vh, 1.6rem); transform: translateX(-50%);
	z-index: 2; display: none;
}
@media (min-width: 768px) {
	.hero__scroll { display: inline-flex; bottom: clamp(1rem, 3vh, 2rem); }
	.hero__dots { bottom: clamp(3.5rem, 7vh, 5.5rem); }
}
.hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(var(--c-gold), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after {
	content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
	background: var(--c-gold); animation: scrollPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollPulse { 0% { top: -50%; } 60%,100% { top: 100%; } }

@media (prefers-reduced-motion: reduce) {
	.hero__slide-img { animation: none !important; }
	.hero__line { opacity: 1 !important; transform: none !important; animation: none !important; }
	.hero__dot.is-active::after { animation: none; width: 100%; }
	.hero__scroll-line::after { animation: none; }
}