/* =====================================================================
   IcaruZen Hero — ReMotion Style
   All sizing comes from CSS variables printed per instance.
   ===================================================================== */

.ich-hero {
	--ich-mx: 50%;
	--ich-my: 42%;
	--ich-reveal-o: 0;

	position: relative;
	display: block;
	width: 100%;
	min-height: var(--ich-h, 100vh);
	overflow: visible;
	isolation: isolate;
	box-sizing: border-box;
	background: var(--ich-bg, #eef0f2);
	font-family: var(--ich-font-body, inherit);
	color: var(--ich-desc-color, #4b5563);
	-webkit-font-smoothing: antialiased;
}

.ich-hero *,
.ich-hero *::before,
.ich-hero *::after {
	box-sizing: border-box;
}

.ich-hero.has-topline::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	z-index: 20;
	background: var(--ich-rim-grad, linear-gradient(90deg, #7c5cff, #00e5ff));
}

/* ------------------------------------------------------- background */
.ich-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.ich-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ich-bg-image {
	background-image: var(--ich-bg-img, none);
	background-size: cover;
	background-position: center;
	opacity: var(--ich-bg-img-op, 1);
}

/* dots */
.ich-dots {
	background-image: radial-gradient(circle, var(--ich-dot-c, #fff) var(--ich-dot-s, 1.6px), transparent var(--ich-dot-s, 1.6px));
	background-size: var(--ich-dot-gap, 26px) var(--ich-dot-gap, 26px);
	background-position: 0 0;
	opacity: var(--ich-dot-op, .55);
	will-change: transform, background-position, opacity;
}

.ich-dots--drift {
	animation: ich-dot-drift var(--ich-dot-speed, 90s) linear infinite;
}

.ich-dots--pulse {
	animation: ich-dot-pulse calc(var(--ich-dot-speed, 90s) / 6) ease-in-out infinite;
}

.ich-dots--orbit {
	inset: -40%;
	animation: ich-spin var(--ich-dot-speed, 90s) linear infinite;
	-webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
	mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
}

@keyframes ich-dot-drift {
	to { background-position: calc(var(--ich-dot-gap, 26px) * 12) calc(var(--ich-dot-gap, 26px) * 8); }
}

@keyframes ich-dot-pulse {
	0%, 100% { opacity: calc(var(--ich-dot-op, .55) * .45); }
	50%      { opacity: var(--ich-dot-op, .55); }
}

@keyframes ich-spin {
	to { transform: rotate(360deg); }
}

@keyframes ich-spin-rev {
	to { transform: rotate(-360deg); }
}

/* rings */
.ich-rings {
	opacity: var(--ich-ring-op, .7);
}

.ich-ring {
	position: absolute;
	top: var(--ich-ring-y, 48%);
	left: var(--ich-ring-x, 50%);
	width: calc(var(--ich-ring-size, 78%) * var(--s, 100) / 100);
	aspect-ratio: 1 / 1;
	margin: calc(var(--ich-ring-size, 78%) * var(--s, 100) / -200) 0 0 calc(var(--ich-ring-size, 78%) * var(--s, 100) / -200);
	border-radius: 50%;
	opacity: var(--o, 1);
	animation: ich-spin var(--dur, 60s) linear infinite;
	background: conic-gradient(from 0deg, transparent 0 8%, var(--ich-ring-c, #fff) 18% 46%, transparent 58% 72%, var(--ich-ring-c, #fff) 82% 96%, transparent 100%);
	-webkit-mask-image: radial-gradient(circle at center, transparent calc(50% - var(--ich-ring-w, 2px)), #000 calc(50% - var(--ich-ring-w, 2px)), #000 50%, transparent 50%);
	mask-image: radial-gradient(circle at center, transparent calc(50% - var(--ich-ring-w, 2px)), #000 calc(50% - var(--ich-ring-w, 2px)), #000 50%, transparent 50%);
	will-change: transform;
}

.ich-ring--rev {
	animation-name: ich-spin-rev;
}

/* noise + vignette */
.ich-noise {
	opacity: var(--ich-noise-op, .18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

.ich-vignette {
	background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 130%);
	opacity: var(--ich-vignette, .22);
}

/* ------------------------------------------------------- stage */
.ich-stage {
	position: absolute;
	inset: 0;
	max-width: var(--ich-max, 2200px);
	margin: 0 auto;
	z-index: 2;
	overflow: visible;
}

/* ------------------------------------------------------- top bar */
.ich-top {
	position: absolute;
	top: var(--ich-top, 3.5%);
	inset-inline: var(--ich-pad, 2.2%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	z-index: 12;
}

.ich-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ich-head-color, #1e2b3a);
	line-height: 1;
}

.ich-brand-img {
	max-height: calc(var(--ich-logo-size, 22px) * 2.2);
	width: auto;
	height: auto;
	display: block;
}

.ich-brand-mark {
	width: calc(var(--ich-logo-size, 22px) * 2);
	height: calc(var(--ich-logo-size, 22px) * 2);
	border-radius: 50%;
	border: 2px solid currentColor;
	position: relative;
	flex: none;
	opacity: .9;
}

.ich-brand-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	border: 1px solid currentColor;
	opacity: .45;
}

.ich-brand-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ich-brand-text strong {
	font-family: var(--ich-font-head, inherit);
	font-size: var(--ich-logo-size, 22px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1;
}

.ich-brand-text em {
	font-style: normal;
	font-size: calc(var(--ich-logo-size, 22px) * .5);
	letter-spacing: .22em;
	opacity: .72;
	line-height: 1;
}

.ich-nav {
	display: flex;
	align-items: center;
	gap: var(--ich-nav-gap, 34px);
}

.ich-nav a {
	position: relative;
	font-size: var(--ich-nav-size, 13px);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ich-head-color, #1e2b3a);
	padding-bottom: 4px;
	transition: opacity .25s ease;
}

.ich-nav a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width .3s ease;
}

.ich-nav a:hover::after { width: 100%; }
.ich-nav a:hover { opacity: .75; }

/* ------------------------------------------------------- headline */
.ich-heads {
	position: absolute;
	top: var(--ich-head-top, 17%);
	inset-inline: var(--ich-pad, 2.2%);
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 4%;
	z-index: 4;
	pointer-events: none;
}

.ich-head {
	font-family: var(--ich-font-head, inherit);
	font-size: var(--ich-head-size, 10vw);
	font-weight: var(--ich-head-weight, 400);
	letter-spacing: var(--ich-head-ls, -2.5px);
	line-height: .95;
	color: var(--ich-head-color, #1e2b3a);
	white-space: nowrap;
}

/* ------------------------------------------------------- eyebrow */
.ich-eyebrow {
	position: absolute;
	top: var(--ich-eye-top, 48%);
	inset-inline-start: var(--ich-pad, 2.2%);
	display: flex;
	flex-direction: column;
	gap: .35em;
	z-index: 5;
	font-size: var(--ich-eye-size, 13px);
	font-weight: var(--ich-eye-weight, 700);
	letter-spacing: var(--ich-eye-ls, 1px);
	text-transform: uppercase;
	color: var(--ich-eye-color, #1e2b3a);
	line-height: 1.35;
}

/* ------------------------------------------------------- paragraph */
.ich-desc {
	position: absolute;
	top: var(--ich-desc-top, 65%);
	inset-inline-start: var(--ich-pad, 2.2%);
	width: var(--ich-desc-w, 32%);
	max-width: 640px;
	margin: 0;
	z-index: 5;
	font-size: var(--ich-desc-size, 20px);
	line-height: var(--ich-desc-lh, 1.55);
	color: var(--ich-desc-color, #4b5563);
	font-weight: 400;
}

/* ------------------------------------------------------- buttons */
.ich-actions {
	position: absolute;
	bottom: var(--ich-btn-bottom, 5%);
	inset-inline-start: var(--ich-pad, 2.2%);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ich-btn-gap, 18px);
	z-index: 7;
}

.ich-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: var(--ich-btn-py, 22px) var(--ich-btn-px, 30px);
	font-family: var(--ich-font-body, inherit);
	font-size: var(--ich-btn-size, 13px);
	font-weight: 700;
	letter-spacing: var(--ich-btn-ls, 1.4px);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ich-btn-radius, 4px);
	border: var(--ich-btn-bw, 1px) solid var(--ich-btn-border, rgba(255, 255, 255, .6));
	background: var(--ich-btn-bg, rgba(255, 255, 255, .35));
	color: var(--ich-btn-color, #1e2b3a);
	line-height: 1;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.ich-btn-glass .ich-btn {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ich-btn-outline .ich-btn {
	background: transparent;
}

.ich-btn:hover {
	background: var(--ich-btn-hbg, #1e2b3a);
	color: var(--ich-btn-hcolor, #fff);
	border-color: var(--ich-btn-hbg, #1e2b3a);
	transform: translateY(-2px);
}

.ich-btn:focus-visible {
	outline: 2px solid var(--ich-btn-hbg, #1e2b3a);
	outline-offset: 3px;
}

.ich-arrow {
	width: 16px;
	height: 9px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .3s ease;
}

[dir="rtl"] .ich-arrow { transform: scaleX(-1); }
.ich-btn:hover .ich-arrow { transform: translateX(4px); }
[dir="rtl"] .ich-btn:hover .ich-arrow { transform: scaleX(-1) translateX(4px); }

/* ------------------------------------------------------- media + reveal */
.ich-media {
	position: absolute;
	bottom: var(--ich-media-y, 0%);
	left: 50%;
	width: var(--ich-media-w, 34%);
	margin: 0;
	z-index: var(--ich-media-z, 6);
	transform: translateX(-50%) translateX(var(--ich-media-x, 0%));
	line-height: 0;
	overflow: visible;
}

.ich-hero.has-float .ich-media {
	animation: ich-float 9s ease-in-out infinite;
}

@keyframes ich-float {
	0%, 100% { transform: translateX(-50%) translateX(var(--ich-media-x, 0%)) translateY(0); }
	50%      { transform: translateX(-50%) translateX(var(--ich-media-x, 0%)) translateY(-14px); }
}

.ich-media .ich-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* The AFTER image sits exactly on top of the BEFORE image and is masked directly.
   One element, one mask — no wrappers, no SVG filters, nothing else to break. */
.ich-img--after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	opacity: var(--ich-reveal-o, 0);
}

.ich-rim-wrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	opacity: 1;
	overflow: visible;
}

.ich-media .ich-img--after {
	object-fit: var(--ich-after-fit, fill);
	object-position: center center;
	filter: brightness(var(--ich-after-tone, 100%));
	-webkit-mask-image: radial-gradient(ellipse var(--ich-rw, 300px) var(--ich-rh, 210px) at var(--ich-mx, 50%) var(--ich-my, 42%), #000 0, #000 var(--ich-core, 78%), transparent 100%);
	mask-image: radial-gradient(ellipse var(--ich-rw, 300px) var(--ich-rh, 210px) at var(--ich-mx, 50%) var(--ich-my, 42%), #000 0, #000 var(--ich-core, 78%), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Debug: see the AFTER image raw, aligned over the BEFORE one. */
.ich-hero.ich-debug .ich-media { outline: 2px dashed #e02424; outline-offset: 2px; }

.ich-hero.ich-debug .ich-img--after {
	opacity: 1;
	-webkit-mask-image: none;
	mask-image: none;
	outline: 2px dashed #16a34a;
}

.ich-hero.ich-debug .ich-rim-wrap { display: none; }

.ich-rim {
	position: absolute;
	inset: 0;
	overflow: visible;
	display: block;
	filter: blur(var(--ich-rim-blur, 3px));
}

.ich-rim-spin {
	position: absolute;
	inset: -60%;
	display: block;
	border-radius: 50%;
	background: var(--ich-rim-grad, conic-gradient(from 0deg, #00e5ff, #7c5cff, #ff2fb3, #ffd166, #3ef2a1, #00e5ff));
	-webkit-mask: radial-gradient(circle, transparent calc(50% - var(--ich-rim, 12px)), #000 calc(50% - var(--ich-rim, 12px)), #000 50%, transparent 50%);
	mask: radial-gradient(circle, transparent calc(50% - var(--ich-rim, 12px)), #000 calc(50% - var(--ich-rim, 12px)), #000 50%, transparent 50%);
	animation: ich-spin var(--ich-rim-spin, 9s) linear infinite;
}

/* ------------------------------------------------------- preview card */
.ich-card {
	position: absolute;
	bottom: var(--ich-card-bottom, 4%);
	inset-inline-end: var(--ich-pad, 2.2%);
	width: var(--ich-card-w, 19%);
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	z-index: 7;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .55);
	background: var(--ich-card-bg, rgba(255, 255, 255, .38));
	-webkit-backdrop-filter: blur(var(--ich-card-blur, 14px));
	backdrop-filter: blur(var(--ich-card-blur, 14px));
	box-shadow: 0 18px 40px -28px rgba(16, 24, 40, .55);
	text-decoration: none;
	color: inherit;
	line-height: 1.3;
}

.ich-card-title {
	font-size: clamp(13px, .95vw, 18px);
	color: var(--ich-desc-color, #4b5563);
	opacity: .9;
}

.ich-card-thumbs {
	display: flex;
	gap: 8px;
}

.ich-thumb {
	flex: 1 1 0;
	border-radius: 6px;
	overflow: hidden;
	background: #0b1220;
	aspect-ratio: 1 / 1.08;
	display: block;
}

.ich-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ich-card-caption {
	font-size: clamp(10px, .72vw, 14px);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ich-head-color, #1e2b3a);
}

.ich-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ------------------------------------------------------- entrance */
.ich-hero.ich-animate .ich-head--left,
.ich-hero.ich-animate .ich-head--right,
.ich-hero.ich-animate .ich-eyebrow,
.ich-hero.ich-animate .ich-desc,
.ich-hero.ich-animate .ich-actions,
.ich-hero.ich-animate .ich-card,
.ich-hero.ich-animate .ich-top,
.ich-hero.ich-animate .ich-media {
	opacity: 0;
	animation: ich-rise .9s cubic-bezier(.22, .9, .28, 1) forwards;
}

.ich-hero.ich-animate .ich-top      { animation-delay: .05s; }
.ich-hero.ich-animate .ich-head--left  { animation-delay: .15s; }
.ich-hero.ich-animate .ich-head--right { animation-delay: .28s; }
.ich-hero.ich-animate .ich-media    { animation-delay: .2s; animation-name: ich-rise-media; }
.ich-hero.ich-animate .ich-eyebrow  { animation-delay: .45s; }
.ich-hero.ich-animate .ich-desc     { animation-delay: .55s; }
.ich-hero.ich-animate .ich-actions  { animation-delay: .65s; }
.ich-hero.ich-animate .ich-card     { animation-delay: .75s; }

@keyframes ich-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ich-rise-media {
	from { opacity: 0; transform: translateX(-50%) translateX(var(--ich-media-x, 0%)) translateY(30px); }
	to   { opacity: 1; transform: translateX(-50%) translateX(var(--ich-media-x, 0%)) translateY(0); }
}

/* ------------------------------------------------------- tablet */
@media (max-width: 1024px) {
	.ich-desc { width: clamp(280px, 42%, 520px); }
	.ich-card { min-width: 190px; }
	.ich-btn  { padding: calc(var(--ich-btn-py, 22px) * .75) calc(var(--ich-btn-px, 30px) * .8); }
}

/* ------------------------------------------------------- mobile */
@media (max-width: 782px) {

	.ich-hero {
		min-height: 0;
		padding-block: 26px 40px;
	}

	.ich-stage {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		padding-inline: var(--ich-pad, 2.2%);
	}

	.ich-top,
	.ich-heads,
	.ich-eyebrow,
	.ich-desc,
	.ich-actions,
	.ich-media,
	.ich-card {
		position: relative;
		inset: auto;
		top: auto;
		bottom: auto;
		width: auto;
		max-width: none;
		transform: none;
		margin: 0;
	}

	.ich-top      { order: 1; }
	.ich-heads    { order: 2; }
	.ich-eyebrow  { order: 3; }
	.ich-media    { order: 4; }
	.ich-desc     { order: 5; }
	.ich-actions  { order: 6; }
	.ich-card     { order: 7; }

	.ich-heads {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0 .3em;
		line-height: 1;
	}

	.ich-mob-stack .ich-heads { flex-direction: column; align-items: flex-start; }

	.ich-media {
		width: var(--ich-media-w, 78%);
		align-self: center;
	}

	.ich-hero.has-float .ich-media,
	.ich-hero.ich-animate .ich-media {
		animation-name: ich-rise;
	}

	.ich-nav {
		gap: calc(var(--ich-nav-gap, 34px) * .45);
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.ich-nav a { font-size: calc(var(--ich-nav-size, 13px) * .85); }

	.ich-actions { flex-direction: column; align-items: stretch; }
	.ich-btn { width: 100%; }

	.ich-card { width: 100%; min-width: 0; }

	.ich-mob-center .ich-heads,
	.ich-mob-center .ich-eyebrow { align-items: center; justify-content: center; text-align: center; }
	.ich-mob-center .ich-desc    { text-align: center; }
}

@media (max-width: 520px) {
	.ich-top { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ich-mob-center .ich-top { align-items: center; }
	.ich-nav { justify-content: flex-start; }
}

/* ------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
	.ich-hero *,
	.ich-hero *::before,
	.ich-hero *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.ich-dots--orbit,
	.ich-ring,
	.ich-rim-spin { animation: none !important; }
}

/* ------------------------------------------------------- editor note */
.ich-admin-note {
	position: absolute;
	inset-inline: var(--ich-pad, 2.2%);
	top: 50%;
	z-index: 30;
	margin: 0 auto;
	max-width: 620px;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid #f0c36d;
	background: #fff8e5;
	color: #6b4e00;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}