/* ==========================================================================
   K2 Stones — "The Mountain" cinematic 3D hero section.
   Layered parallax K2 peak that responds to cursor + scroll, with a drifting
   light, snow shimmer, atmospheric mist and a mirrored reflection. Pure
   SVG/CSS + a tiny rAF-throttled JS (mountain.js). GPU-friendly; all motion is
   disabled for reduced-motion / coarse pointers.
   ========================================================================== */

.k2m {
	--gold: var(--wp--preset--color--gold, #c2a25c);
	--goldb: var(--wp--preset--color--gold-bright, #e6c674);
	--ink: #07070a;
	position: relative;
	min-height: clamp(560px, 88vh, 900px);
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, #07070a 0%, #0d0d12 40%, #14110d 78%, #0b0a08 100%);
	perspective: 1400px;
}

/* Atmosphere ---------------------------------------------------------------- */
.k2m__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% 118%, rgba(226, 199, 126, 0.18), transparent 60%),
		radial-gradient(80% 60% at 78% -10%, rgba(120, 140, 180, 0.10), transparent 60%);
}
.k2m__stars { position: absolute; inset: 0 0 40% 0; z-index: 0; pointer-events: none; opacity: 0.5;
	background-image:
		radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
		radial-gradient(1px 1px at 65% 18%, rgba(255,255,255,.5), transparent),
		radial-gradient(1px 1px at 82% 42%, rgba(255,255,255,.6), transparent),
		radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,.4), transparent),
		radial-gradient(1.5px 1.5px at 50% 25%, rgba(255,255,255,.5), transparent);
	animation: k2m-twinkle 6s ease-in-out infinite alternate;
}
@keyframes k2m-twinkle { from { opacity: .35; } to { opacity: .65; } }

/* Drifting light (sun/alpenglow) ------------------------------------------- */
.k2m__sun { position: absolute; z-index: 1; width: 46%; aspect-ratio: 1; left: 28%; top: -6%;
	pointer-events: none; border-radius: 50%; filter: blur(30px);
	background: radial-gradient(closest-side, rgba(230, 198, 116, 0.5), rgba(230, 198, 116, 0.12) 45%, transparent 70%);
	transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 16px), 0);
	animation: k2m-sun 16s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes k2m-sun { from { opacity: .75; transform: translate3d(-3%, 0, 0); } to { opacity: 1; transform: translate3d(4%, -2%, 0); } }

/* The scene ---------------------------------------------------------------- */
.k2m__scene { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }
.k2m__layer { will-change: transform; transition: transform 0.18s cubic-bezier(.22,1,.36,1); }
.k2m__ridge-far { fill: #16171d; }
.k2m__ridge-mid { fill: #101116; }
.k2m__peak-rock { fill: url(#k2mRock); }
.k2m__peak-snow { fill: url(#k2mSnow); }
.k2m__peak-edge { fill: none; stroke: rgba(230, 198, 116, 0.45); stroke-width: 1.5; }
.k2m__fore { fill: #050506; }

/* Snow shimmer — a light band that sweeps the snow cap */
.k2m__shine { fill: url(#k2mShine); mix-blend-mode: screen; opacity: .0; }
.k2m.is-lit .k2m__shine { animation: k2m-shine 9s ease-in-out 1s infinite; }
@keyframes k2m-shine { 0%, 100% { opacity: 0; } 45% { opacity: .9; } 55% { opacity: .9; } }

/* Cursor light on the snow (radial highlight following pointer) */
.k2m__cursorlight { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
	mix-blend-mode: screen; transition: opacity .5s ease;
	background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 40%), rgba(255, 250, 235, 0.22), transparent 60%);
}
.k2m.is-hover .k2m__cursorlight { opacity: 1; }

/* Mist drifting across the mid-ground */
.k2m__mist { position: absolute; left: -10%; right: -10%; bottom: 8%; height: 46%; z-index: 3; pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(20, 22, 30, 0.55) 60%, rgba(12, 12, 16, 0.85));
	-webkit-mask-image: radial-gradient(120% 100% at 50% 100%, #000 40%, transparent 78%);
	mask-image: radial-gradient(120% 100% at 50% 100%, #000 40%, transparent 78%);
	opacity: .8;
	animation: k2m-mist 24s ease-in-out infinite alternate;
}
@keyframes k2m-mist { from { transform: translateX(-2%); } to { transform: translateX(3%); } }

/* Reflection (mirrored peak fading into a dark plinth) */
.k2m__reflect { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 2; overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 85%);
	mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 85%);
	opacity: .35; pointer-events: none;
}
.k2m__reflect svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 380%; transform: scaleY(-1); }

/* Content overlay ---------------------------------------------------------- */
.k2m__content { position: relative; z-index: 5; width: min(100% - 2.5rem, 1240px); margin-inline: auto;
	display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit;
	padding-block: clamp(2.5rem, 8vh, 6rem); }
.k2m__eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: .72rem; letter-spacing: .24em;
	text-transform: uppercase; color: var(--goldb); font-weight: 600; }
.k2m__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.k2m__title { font-family: var(--wp--preset--font-family--display, Georgia, serif); font-weight: 500;
	font-size: clamp(2.2rem, 5.5vw, 4.4rem); line-height: 1.03; margin: .5rem 0 .8rem; text-wrap: balance;
	color: var(--wp--preset--color--contrast, #f5f2ea);
	text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.k2m__title .em { color: transparent; background: linear-gradient(100deg, var(--goldb) 20%, #fff 50%, var(--goldb) 80%);
	background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: k2m-sheen 7s linear infinite; }
@keyframes k2m-sheen { to { background-position: 200% center; } }
.k2m__lede { color: var(--wp--preset--color--stone-200, #cfc9bd); max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; margin: 0; }
.k2m__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 5;
	font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wp--preset--color--muted, #8f897d);
	display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; }
.k2m__scroll span { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: k2m-drop 2.2s ease-in-out infinite; }
@keyframes k2m-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 640px) { .k2m { min-height: 78vh; } .k2m__reflect { display: none; } }

@media (prefers-reduced-motion: reduce), (hover: none) {
	.k2m__sun, .k2m__stars, .k2m__mist, .k2m__shine, .k2m__title .em { animation: none !important; }
	.k2m__cursorlight { display: none; }
	.k2m__layer { transition: none; transform: none !important; }
}