/* ===========================================================================
   Helios Design — Deck (one-page full-screen slider)

   Loaded ONLY on pages using the "Helios Deck" template. Turns the Elementor
   content wrapper into a y-scroll-snap container and positions the fixed
   chrome (dot nav, progress rail).

   Every slide is an ordinary Elementor widget rendering
   `<section class="hl-slide" data-hl-label="…">`, so the client reorders the
   homepage by dragging widgets and assets/js/deck.js rebuilds the dot nav from
   whatever is in the DOM. Nothing here hardcodes a slide list.

   Handle: hl-deck   Depends: hl-core
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Page shell — the deck is the only scroll container on the page.
   ------------------------------------------------------------------------ */
html.hl-deck-html,
body.hl-deck-page {
	height: 100%;
	overflow: hidden;
}

.hl-deck {
	height: 100vh;
	height: 100dvh;
	overflow-y: scroll;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hl-deck::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   Elementor wrapper neutralisation

   Elementor nests section → container → column → widget-wrap around each
   widget. Those wrappers must not add padding, set a height, or create their
   own overflow context, otherwise the slide cannot be 100dvh and scroll
   snapping lands in the wrong place. Snap targets may be any *descendant* of
   the scroll container, so leaving the wrappers as plain blocks is enough.
   ------------------------------------------------------------------------ */
.hl-deck .elementor-section,
.hl-deck .elementor-container,
.hl-deck .elementor-column,
.hl-deck .elementor-column-wrap,
.hl-deck .elementor-widget-wrap,
.hl-deck .e-con,
.hl-deck .e-con-inner {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.hl-deck .elementor-widget { margin: 0; width: 100%; }
.hl-deck .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Slide
   ------------------------------------------------------------------------ */
.hl-slide {
	position: relative;
	display: grid;
	/* minmax(0,1fr) keeps a wide horizontal reel inside the slide instead of
	   stretching it and producing a page-level horizontal scrollbar. */
	grid-template-columns: minmax(0, 1fr);
	height: 100vh;
	height: 100dvh;
	padding: calc(var(--hl-pad) + 46px) var(--hl-pad) calc(var(--hl-pad) + var(--hl-social-h));
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	isolation: isolate;
	background: var(--hl-ink);
}
.hl-slide > * { min-width: 0; }

/* Vertical alignment variants set by each widget. */
.hl-slide--top    { align-content: start; }
.hl-slide--center { align-content: center; }
.hl-slide--end    { align-content: end; }

/* Background variants — the ink ladder gives the deck its rhythm. */
.hl-slide--ink   { background: var(--hl-ink); }
.hl-slide--ink-2 { background: var(--hl-ink-2); }
.hl-slide--ink-3 { background: var(--hl-ink-3); }

/* Reels bleed to the viewport edge: the reel supplies its own inline padding. */
.hl-slide--reel {
	align-content: center;
	padding-inline: 0;
}

/* Optional warm glow behind a slide's content. */
.hl-slide--glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 60% at 82% 22%, rgba(217, 154, 78, .14), transparent 70%);
	pointer-events: none;
}
.hl-slide--glow-clay::before {
	background: radial-gradient(60% 70% at 20% 80%, rgba(140, 90, 60, .22), transparent 70%);
}

/* ---------------------------------------------------------------------------
   Progress rail
   ------------------------------------------------------------------------ */
.hl-rail {
	position: fixed;
	inset-inline-start: 0;
	top: 0;
	z-index: 70;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--hl-clay), var(--hl-sun-hot));
	transition: width .35s linear;
}

/* ---------------------------------------------------------------------------
   Dot nav — right rail, label revealed on hover / when active
   ------------------------------------------------------------------------ */
.hl-dots {
	position: fixed;
	inset-inline-end: calc(var(--hl-pad) - 6px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hl-dots button {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	padding: 7px 6px;
	border: 0;
	background: none;
	color: var(--hl-cream);
}
.hl-dots .hl-dots__bar {
	display: block;
	width: 16px;
	height: 1px;
	background: var(--hl-cream-faint);
	transition: .45s var(--hl-ease);
}
.hl-dots .hl-dots__lbl {
	white-space: nowrap;
	font-size: .6rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(6px);
	transition: .45s var(--hl-ease);
}
.hl-dots button:hover .hl-dots__bar,
.hl-dots button[aria-current="true"] .hl-dots__bar {
	width: 34px;
	background: var(--hl-sun);
}
.hl-dots button:hover .hl-dots__lbl {
	opacity: .75;
	transform: none;
}
.hl-dots button[aria-current="true"] .hl-dots__lbl {
	opacity: 1;
	transform: none;
	color: var(--hl-sun);
}

/* ---------------------------------------------------------------------------
   Brand bar on the deck — transparent, blend-mode legible over any photo.
   On inner pages the same bar is solid (see theme.css).
   ------------------------------------------------------------------------ */
body.hl-deck-page .hl-topbar {
	position: fixed;
	background: none;
	border-bottom: 0;
	mix-blend-mode: difference;
}

/* Elementor Pro header template, when one is assigned, gets the same
   treatment so the deck's first slide is never pushed down by it. */
body.hl-deck-page .elementor-location-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 60;
	background: none;
}

/* The footer is excluded from the deck by display condition; belt-and-braces
   in case a Theme Builder condition is edited by hand later. */
body.hl-deck-page .elementor-location-footer,
body.hl-deck-page .hl-site-footer {
	display: none;
}

/* ---------------------------------------------------------------------------
   Hero drift — the one long-running animation on the page
   ------------------------------------------------------------------------ */
.hl-slide--hero .hl-media {
	animation: hl-drift 26s ease-in-out infinite alternate;
}
@keyframes hl-drift {
	to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}

/* Scroll cue */
.hl-cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.hl-cue i {
	position: relative;
	display: block;
	width: 1px;
	height: 52px;
	overflow: hidden;
	background: linear-gradient(var(--hl-sun), transparent);
}
.hl-cue i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hl-cream);
	animation: hl-fall 2.1s var(--hl-ease) infinite;
}
@keyframes hl-fall {
	0%        { transform: translateY(-100%); }
	60%, 100% { transform: translateY(100%); }
}

/* ---------------------------------------------------------------------------
   Responsive

   Below 720px mandatory snapping is dropped and slides grow to fit their
   content. Keeping `y mandatory` on a phone traps the user on any slide taller
   than the viewport — the form slide in particular.
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
	.hl-dots .hl-dots__lbl { display: none; }
}

@media (max-width: 720px) {
	.hl-deck { scroll-snap-type: y proximity; }
	.hl-slide {
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		padding-block: 110px calc(40px + var(--hl-social-h));
	}
	.hl-dots { display: none; }
	.hl-card { height: clamp(300px, 58vh, 460px); }
}

@media (prefers-reduced-motion: reduce) {
	.hl-deck { scroll-behavior: auto; }
	.hl-slide--hero .hl-media { animation: none; }
	.hl-cue i::after { animation: none; }
}