/*
 * dfdc.io homepage hero — photo + gradient + pattern.
 *
 * Layers (back to front):
 *   0  poster image (LCP element; one image, eager-loaded)
 *   1  veil — brand gradient + dark scrim for legibility
 *   2  pattern — SVG dotted grid, mix-blend-mode: screen
 *   3  inner content (eyebrow + headline + sub + CTAs + facts)
 */

.dfdc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(620px, 88vh, 880px);
	color: var(--dfdc-text);
	background: #08100E;
	border-bottom: 1px dashed rgba(45, 212, 163, 0.35);
}

/* ---- Background photo ----------------------------------------------- */
.dfdc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.dfdc-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	opacity: 0.55;
	transform: scale(1.04);
	animation: dfdc-hero-zoom 24s var(--dfdc-ease-out) infinite alternate;
}

@keyframes dfdc-hero-zoom {
	from { transform: scale(1.04); }
	to   { transform: scale(1.10); }
}

/* ---- Veil: brand gradient + readability scrim ----------------------- */
.dfdc-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(60% 60% at 12% 80%, rgba(45, 212, 163, 0.32) 0%, rgba(45, 212, 163, 0) 65%),
		radial-gradient(45% 55% at 80% 18%, rgba(22, 242, 220, 0.22) 0%, rgba(22, 242, 220, 0) 65%),
		linear-gradient(165deg, rgba(8, 16, 14, 0.94) 0%, rgba(11, 19, 17, 0.55) 35%, rgba(11, 19, 17, 0.45) 55%, rgba(8, 16, 14, 0.96) 100%);
}

/* ---- Cold-air drift -------------------------------------------------
 * Three radial-gradient bands layered between the veil (z=1) and the
 * SVG pattern (z=2). Each band drifts horizontally at a different
 * speed/scale to fake atmospheric circulation. Soft, mostly mint
 * with a hint of cyan; never bright enough to wash out the photo. */
.dfdc-hero__chill {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	mix-blend-mode: screen;
}

.dfdc-hero__chill-band {
	position: absolute;
	top: -25%;
	height: 150%;
	width: 60%;
	filter: blur(40px);
	opacity: 0.55;
	will-change: transform;
}

.dfdc-hero__chill-band--a {
	left: -30%;
	background: radial-gradient(ellipse at center,
		rgba(45, 212, 163, 0.28) 0%,
		rgba(45, 212, 163, 0.10) 35%,
		rgba(45, 212, 163, 0) 70%);
	animation: dfdc-hero-drift-a 28s ease-in-out infinite alternate;
}

.dfdc-hero__chill-band--b {
	left: 20%;
	height: 130%;
	top: -15%;
	width: 50%;
	background: radial-gradient(ellipse at center,
		rgba(22, 242, 220, 0.20) 0%,
		rgba(22, 242, 220, 0.06) 40%,
		rgba(22, 242, 220, 0) 70%);
	animation: dfdc-hero-drift-b 36s ease-in-out infinite alternate;
}

.dfdc-hero__chill-band--c {
	left: 55%;
	width: 55%;
	background: radial-gradient(ellipse at center,
		rgba(120, 200, 255, 0.16) 0%,
		rgba(120, 200, 255, 0.05) 40%,
		rgba(120, 200, 255, 0) 70%);
	animation: dfdc-hero-drift-c 44s ease-in-out infinite alternate;
}

@keyframes dfdc-hero-drift-a {
	0%   { transform: translate3d(0, -2%, 0)   scale(1.05); opacity: 0.45; }
	50%  { transform: translate3d(35%, 4%, 0)  scale(1.20); opacity: 0.70; }
	100% { transform: translate3d(72%, -3%, 0) scale(1.10); opacity: 0.40; }
}
@keyframes dfdc-hero-drift-b {
	0%   { transform: translate3d(0, 3%, 0)    scale(1.10); opacity: 0.55; }
	50%  { transform: translate3d(-22%, -5%, 0) scale(1.25); opacity: 0.75; }
	100% { transform: translate3d(28%, 6%, 0)  scale(1.05); opacity: 0.40; }
}
@keyframes dfdc-hero-drift-c {
	0%   { transform: translate3d(0, -4%, 0)   scale(1.00); opacity: 0.30; }
	50%  { transform: translate3d(-40%, 5%, 0) scale(1.18); opacity: 0.55; }
	100% { transform: translate3d(-12%, -2%, 0) scale(1.08); opacity: 0.35; }
}

/* ---- Telemetry sweep ------------------------------------------------
 * A thin mint scan-line travels top → bottom every ~14s. Reads as
 * "live monitoring", not "lights on equipment". Anchored to the
 * viewport, so feature-alignment with the photo is irrelevant. */
.dfdc-hero__sweep {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.dfdc-hero__sweep::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	height: 28%;
	background: linear-gradient(
		180deg,
		rgba(45, 212, 163, 0) 0%,
		rgba(45, 212, 163, 0.06) 45%,
		rgba(45, 212, 163, 0.18) 50%,
		rgba(45, 212, 163, 0.06) 55%,
		rgba(45, 212, 163, 0) 100%
	);
	mix-blend-mode: screen;
	will-change: transform;
	animation: dfdc-hero-sweep 14s linear infinite;
}

@keyframes dfdc-hero-sweep {
	0%   { transform: translateY(-40%); opacity: 0; }
	8%   { opacity: 0.9; }
	88%  { opacity: 0.9; }
	100% { transform: translateY(420%); opacity: 0; }
}

/* ---- Signal pulses --------------------------------------------------
 * Soft mint rings emanating from six fixed viewport anchors. Each one
 * starts as a small bright dot and expands into a soft glow, then
 * fades. Anchors are corners + mid-edges — same positions regardless
 * of how the rack photo is cropped or zoomed, so nothing visibly
 * misaligns. Phases staggered so the rhythm never lines up. */
.dfdc-hero__pulses {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.dfdc-hero__pulse {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(45, 212, 163, 0.95);
	box-shadow:
		0 0 8px rgba(45, 212, 163, 0.85),
		0 0 18px rgba(45, 212, 163, 0.45);
	transform: translate(-50%, -50%);
	animation: dfdc-hero-pulse 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
	will-change: transform, opacity;
}

.dfdc-hero__pulse--tl { top: 18%;  left:  8%; animation-delay:  0s; }
.dfdc-hero__pulse--tr { top: 14%;  left: 88%; animation-delay:  2.2s; background: rgba(22, 242, 220, 0.9); box-shadow: 0 0 8px rgba(22, 242, 220, 0.85), 0 0 18px rgba(22, 242, 220, 0.45); }
.dfdc-hero__pulse--ml { top: 56%;  left:  4%; animation-delay:  4.0s; }
.dfdc-hero__pulse--mr { top: 50%;  left: 95%; animation-delay:  1.1s; background: rgba(22, 242, 220, 0.9); box-shadow: 0 0 8px rgba(22, 242, 220, 0.85), 0 0 18px rgba(22, 242, 220, 0.45); }
.dfdc-hero__pulse--bl { top: 86%;  left: 12%; animation-delay:  3.3s; }
.dfdc-hero__pulse--br { top: 90%;  left: 84%; animation-delay:  5.0s; }

@keyframes dfdc-hero-pulse {
	0%    { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
	12%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0); }
	60%   { opacity: 0;    transform: translate(-50%, -50%) scale(4.5); }
	100%  { opacity: 0;    transform: translate(-50%, -50%) scale(4.5); }
}

/* On small screens, dial down density */
@media (max-width: 720px) {
	.dfdc-hero__pulses .dfdc-hero__pulse--mr,
	.dfdc-hero__pulses .dfdc-hero__pulse--ml { display: none; }
	.dfdc-hero__chill-band { opacity: 0.40; }
}

/* ---- Pattern overlay: SVG dotted grid ------------------------------- */
.dfdc-hero__pattern {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: screen;
}

/* ---- Inner content -------------------------------------------------- */
.dfdc-hero__inner {
	position: relative;
	z-index: var(--dfdc-z-content, 3);
	width: min(100% - 48px, 1240px);
	margin: 0 auto;
	min-height: inherit;
	padding: clamp(120px, 16vh, 200px) 0 clamp(48px, 6vh, 80px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: clamp(20px, 2.5vw, 36px);
}

/* Bracket-eyebrow (matches dfdc-th flagship pages) */
.dfdc-hero__eyebrow {
	display: inline-block;
	font-family: var(--dfdc-font-sans);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dfdc-mint);
	margin: 0 0 16px;
	width: fit-content;
}

.dfdc-hero__headline {
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.05;
	font-size: clamp(40px, 5vw, 72px);
	margin: 0;
	max-width: 22ch;
	color: var(--dfdc-text);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.dfdc-hero__headline em {
	font-style: normal;
	color: var(--dfdc-mint);
}

.dfdc-hero__sub {
	font-family: var(--dfdc-font-sans);
	font-size: clamp(16px, 1.1vw + 0.4rem, 20px);
	line-height: 1.55;
	color: rgba(233, 244, 240, 0.86);
	margin: 18px 0 0;
	max-width: 56ch;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.dfdc-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

/* Use the same .dfdc-th-btn shape as the rest of the site for consistency. */
.dfdc-hero__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	font-family: var(--dfdc-font-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dfdc-hero__cta-btn .dfdc-btn__text { display: inline-block; }
.dfdc-hero__cta-btn .dfdc-btn__arrow { display: inline-block; }

.dfdc-hero__cta-btn.dfdc-btn--primary {
	background: var(--dfdc-mint);
	color: var(--dfdc-text-dark);
	border-color: var(--dfdc-mint);
}
.dfdc-hero__cta-btn.dfdc-btn--primary:hover {
	background: var(--dfdc-mint-300);
	border-color: var(--dfdc-mint-300);
}

.dfdc-hero__cta-btn.dfdc-btn--ghost {
	background: rgba(8, 16, 14, 0.40);
	color: var(--dfdc-text);
	border-color: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.dfdc-hero__cta-btn.dfdc-btn--ghost:hover {
	border-color: var(--dfdc-text);
	background: rgba(8, 16, 14, 0.65);
}

/* ---- Capacity-at-a-glance artifact --------------------------------- */
.dfdc-hero__artifact {
	margin-top: clamp(28px, 3vh, 44px);
	padding: 18px 22px;
	background: rgba(8, 16, 14, 0.55);
	border: 1px dashed rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	max-width: 560px;
	display: grid;
	gap: 12px;
}
.dfdc-hero__artifact-label {
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dfdc-mint);
	font-weight: 500;
}
.dfdc-hero__artifact-list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 22px;
}
.dfdc-hero__artifact-list > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dfdc-hero__artifact-list dt {
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.10em;
	color: rgba(233, 244, 240, 0.6);
	text-transform: uppercase;
}
.dfdc-hero__artifact-list dd {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-size: clamp(18px, 1.4vw + 0.2rem, 24px);
	color: var(--dfdc-text);
	font-weight: 400;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Staggered fade-in for content */
.dfdc-hero__eyebrow,
.dfdc-hero__headline,
.dfdc-hero__sub,
.dfdc-hero__cta,
.dfdc-hero__artifact {
	opacity: 0;
	transform: translateY(14px);
	animation: dfdc-content-in 720ms var(--dfdc-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
}
.dfdc-hero__eyebrow  { animation-delay: 200ms; }
.dfdc-hero__headline { animation-delay: 320ms; }
.dfdc-hero__sub      { animation-delay: 440ms; }
.dfdc-hero__cta      { animation-delay: 560ms; }
.dfdc-hero__artifact { animation-delay: 680ms; }

@keyframes dfdc-content-in {
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
	.dfdc-hero__artifact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.dfdc-hero *,
	.dfdc-hero::before {
		animation: none !important;
		transform: none !important;
		transition: none !important;
	}
	.dfdc-hero__eyebrow,
	.dfdc-hero__headline,
	.dfdc-hero__sub,
	.dfdc-hero__cta,
	.dfdc-hero__artifact { opacity: 1 !important; }
}

/* Hide the legacy Elementor banner container on the homepage */
body.home .elementor-element.elementor-element-1cfc8ff,
body.home .elementor-element[data-id="1cfc8ff"] {
	display: none !important;
}

/* Hide the legacy Elementor homepage containers so the bespoke
 * content blocks (rendered after `the_content` via
 * wpmls_inject_home_blocks()) own the page below the hero.
 *
 *   1cfc8ff — legacy banner (was hidden already)
 *   8ad62f4 — "Trusted by industry leaders worldwide"
 *   54c9e3b — "Always On. Anywhere. 99.999% Uptime."
 *   2ec93b2 — "Powering the Digital Economy"
 *   b481028 — "Reliable Interconnection Services …"
 *   d276bcd — "Data Center Services"
 *   55fc752 — "[ Lorem Ipsum ]" placeholder
 *
 * Underlying Elementor data left intact so reverting is one CSS line.
 */
body.home .elementor-element[data-id="1cfc8ff"],
body.home .elementor-element[data-id="8ad62f4"],
body.home .elementor-element[data-id="54c9e3b"],
body.home .elementor-element[data-id="2ec93b2"],
body.home .elementor-element[data-id="b481028"],
body.home .elementor-element[data-id="d276bcd"],
body.home .elementor-element[data-id="55fc752"] {
	display: none !important;
}