/*
 * ShineSky 006 Hero — gray-mode desktop delivery.
 * Geometry/behavior CSS ported verbatim from SOURCE/006-adapter/hero.css (same selectors,
 * same px/percent values: title x66.25/y420.625/w1292.5/h58.75, phrase masks w538@x0 and
 * w385@x698.5). The preview-only `@import url(fonts.css)` is removed; this file reuses the
 * Header's existing `--ss6-mont` / "Montserrat Variable" declaration (protected-context/final
 * assets/css/header.css), never re-declaring or re-loading Montserrat.
 *
 * Responsive extension (Figma 1959:80 phone; tablet inherits stacked phrases): every base
 * rule below is the accepted >=1280 desktop rule, unchanged. Narrower compositions live only
 * inside max-width queries at the end of this file, so effective desktop style is identical.
 * The section is visible at every width, with and without JavaScript.
 */

/* Match the Header's flow height: 48px below 1024, 44px at 1024–1439,
   and 40px at 1440+. The stage starts at document y0 under the opaque Header,
   including while the Loader tilts both planes. Hero-owned host rule only. */
.ss6-hero-home #ss6-main {
	position: relative;
	z-index: 0;
	margin-top: -48px;
}

@media (min-width: 1024px) {
	.ss6-hero-home #ss6-main {
		margin-top: -44px;
	}
}

@media (min-width: 1440px) {
	.ss6-hero-home #ss6-main {
		margin-top: -40px;
	}
}

.ss006-hero {
	position: relative;
	width: 100%;
	height: 900px;
	overflow: hidden;
	background: #d9d9d9;
	color: #171615;
	font-family: var(--ss6-mont), Arial, sans-serif;
}
.ss006-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.ss006-hero__media-scale {
	position: absolute;
	inset: 0;
}
.ss006-hero__media img,
.ss006-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ss006-hero__media video {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.ss006-hero__media video.is-playing {
	opacity: 1;
}
.ss006-hero__title {
	position: absolute;
	left: 4.600694%;
	top: 420.625px;
	width: 89.756944%;
	height: 58.75px;
	margin: 0;
	font-size: 58.75px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: normal;
}
.ss006-hero__mask {
	position: absolute;
	top: 0;
	overflow: hidden;
	height: 70px;
}
.ss006-hero__mask:first-child {
	left: 0;
	width: 538px;
}
.ss006-hero__mask:last-child {
	left: 54.042553%;
	width: 385px;
}
.ss006-hero__phrase {
	display: block;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ss006-hero__media video {
		display: none;
	}
}

/*
 * Tablet 768-1279.98 (no separate design; inherited): desktop type, size and left inset,
 * the two phrases stacked instead of left/right, block vertically centred like desktop
 * (desktop title centre 420.625 + 58.75/2 = 450 = 900/2). Stage capped to the small
 * viewport height so short landscape screens keep the title in view.
 */
@media (max-width: 1279.98px) {
	.ss006-hero {
		height: 900px;
		height: min(900px, 100svh);
	}
	.ss006-hero__title {
		top: calc(50% - 1em);
		height: auto;
	}
	.ss006-hero__mask,
	.ss006-hero__mask:first-child,
	.ss006-hero__mask:last-child {
		position: relative;
		display: block;
		left: auto;
		top: auto;
		width: fit-content;
		max-width: 100%;
		height: auto;
	}
}

/*
 * Phone <768 (Figma 1959:80, 390x844): Montserrat 600 48.077px, line 48.077px, tracking
 * -0.4808px, box x15.195/y349.5/w359.609. LINEAR LIGHTING wraps inside the box, giving the
 * final lines LINEAR / LIGHTING / BUILT TO FIT; the ~145px block is centred (349.5 + 72.5
 * = 422 = 844/2). Size and box scale together in vw below 390 so 320 never overflows.
 */
@media (max-width: 767.98px) {
	.ss006-hero {
		height: 844px;
		height: min(844px, 100svh);
	}
	.ss006-hero__title {
		left: 3.896234%;
		width: min(359.609375px, 92.207532%);
		font-size: min(48.077px, 12.327436vw);
		letter-spacing: -0.01em;
		top: calc(50% - 1.508em);
	}
	.ss006-hero__phrase {
		white-space: normal;
	}
}

/* ==== Aesthetic pass: hero follows tall viewports ====
   Evidence: 768x1024 measured hero h900 vs viewport 1024 (screenshot shows ~124px of Intro under the
   grey hero; Roku hero is 1024 there). Project already uses 100vh; Hero was the only fixed stage.
   Rule only fires when the viewport is taller than 900 and >=600 wide, so 1440x900, 1024x768, 390x844
   and 320 are untouched. Placed last so it wins over earlier equal-specificity rules. */
@media (min-width: 600px) and (min-height: 901px) {
	.ss006-hero {
		height: 100vh;
		height: 100svh;
	}
}

/* >=1280 keeps title vertically centred when the stage is taller than 900.
   420.625 + 58.75 / 2 = 450 = 900 / 2, so calc(50% - 29.375px) equals the Figma value at h900. */
@media (min-width: 1280px) and (min-height: 901px) {
	.ss006-hero__title {
		top: calc(50% - 29.375px);
	}
}