/*
 * ShineSky 006 Intro ("02b Intro (calm transition)") — scoped styles only.
 *
 * All selectors are scoped under .ss6-intro so nothing here can affect .ss6-header,
 * .ss6-hero-home, #ss6-main, or any other theme region. No @font-face, no font file
 * references: typography reuses the existing --ss6-inter / --ss6-graphite / --ss6-page
 * tokens declared by the Header stage (inputs/protected-interfaces/header-font-tokens.css),
 * so no font is duplicated or redeclared here.
 *
 * Geometry sources (see outputs/preflight.json for full evidence -> choice -> limit):
 *   Desktop anchor (>=1440px canvas intent): section 1440x550.78125 at y900; text block
 *     411.25px wide, Inter Regular 400, 23.5px / 25.85px line-height, centered.
 *   Mobile anchor (<=390px): section 390x384.609375 at y844; text block 326.921875px wide,
 *     Inter Regular 400, 15.385px / 16.923px line-height, centered.
 *   768px / 1024px: NO independent Figma frame exists for these widths. The values below are
 *     a disclosed, bounded linear interpolation between the two sourced anchors (an approved
 *     first-phase implementation choice per CC-EXECUTION-BRIEF.md), not additional sourced
 *     geometry and not a new global rule.
 *
 * Each breakpoint sets its own --ss6-intro-h (sourced section height) and --ss6-intro-text-top
 * (sourced text y) as the owned source of vertical alignment, instead of symmetric padding
 * math, so the natural paragraph's visual center lands at the sourced midpoint (desktop
 * 236.625px top / 78px box within a 550.78125px section; mobile 175.3046875px top / 34px box
 * within a 384.609375px section) within sub-pixel rounding, preserving the desktop's inherent
 * -7.5px offset from exact geometric center that the source geometry itself encodes.
 *
 * No opacity:0/visibility:hidden is set here on .ss6-intro__text at any breakpoint, so the
 * paragraph is fully readable with CSS loaded and JS absent. Runtime splits only when
 * dependencies and motion/network preferences permit; failure restores the original nodes.
 */

.ss6-intro {
	--ss6-intro-max-w: 326.921875px;
	--ss6-intro-font: 15.385px;
	--ss6-intro-leading: 16.923px;
	--ss6-intro-h: 384.609375px; /* sourced mobile section height, 1959:11804 */
	--ss6-intro-text-top: 175.3046875px; /* sourced mobile text y, 1959:11805 */
	--ss6-intro-text-h: 34px; /* sourced mobile text box height */
	--ss6-intro-lines: 2; /* sourced mobile wrap line count */
	--ss6-intro-offset-x: 0px; /* mobile anchor centerline (195) matches page/2 exactly: no offset */

	box-sizing: border-box;
	width: 100%;
	min-height: var(--ss6-intro-h);
	padding: 0 24px;
	background-color: var(--ss6-page, #fbfaf8);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
	/* Own the vertical position via padding derived from source text-top/line-count, not a
	   flex-centering guess: the live rendered text height is (leading * lines), which can
	   differ from the sourced text-box height; padding-top = text-top minus half of that
	   difference, so the natural paragraph's visual center lands at the sourced midpoint
	   within sub-pixel rounding, and padding-bottom makes up the remainder of the sourced
	   section height exactly. */
	padding-top: calc( var(--ss6-intro-text-top) - ( ( var(--ss6-intro-leading) * var(--ss6-intro-lines) - var(--ss6-intro-text-h) ) / 2 ) );
	padding-bottom: calc( var(--ss6-intro-h) - var(--ss6-intro-text-top) - var(--ss6-intro-text-h) - ( ( var(--ss6-intro-leading) * var(--ss6-intro-lines) - var(--ss6-intro-text-h) ) / 2 ) );
}

.ss6-intro__text {
	margin: 0;
	max-width: var(--ss6-intro-max-w);
	font-family: var(--ss6-inter, 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif);
	font-weight: 400;
	font-style: normal;
	font-size: var(--ss6-intro-font);
	line-height: var(--ss6-intro-leading);
	color: var(--ss6-graphite, #171615);
	word-break: break-word;
	/* Existing CSS-owned horizontal anchor; character motion never translates the paragraph. */
	position: relative;
	left: calc(var(--ss6-intro-offset-x) + 50vw - 50% - 24px);
}

/* 768px: bounded interpolation anchor (implementation proposal, not a sourced Figma frame). */
@media (min-width: 768px) {
	.ss6-intro {
		--ss6-intro-max-w: 368.6px;
		--ss6-intro-font: 19.1px;
		--ss6-intro-leading: 21px;
		--ss6-intro-h: 467.7px;
		--ss6-intro-text-top: 205.96px;
		--ss6-intro-text-h: 56px;
		--ss6-intro-lines: 3;
	}
}

/* 1024px: bounded interpolation anchor (implementation proposal, not a sourced Figma frame). */
@media (min-width: 1024px) {
	.ss6-intro {
		--ss6-intro-max-w: 390.5px;
		--ss6-intro-font: 21.5px;
		--ss6-intro-leading: 23.6px;
		--ss6-intro-h: 509.2px;
		--ss6-intro-text-top: 221.3px;
		--ss6-intro-text-h: 67px;
		--ss6-intro-lines: 3;
	}
}

/* 1440px: desktop anchor, sourced from Figma 1954:103/1954:104. Text left 506.875, width
   411.25 => sourced centerline x712.5 (506.875 + 411.25/2), which is 7.5px left of the exact
   page-geometric center (1440/2 = 720); --ss6-intro-offset-x carries that real -7.5px offset
   so flex-centering plus this nudge reproduces 712.5 exactly, instead of silently rounding to
   720. */
@media (min-width: 1440px) {
	.ss6-intro {
		--ss6-intro-max-w: 411.25px;
		--ss6-intro-font: 23.5px;
		--ss6-intro-leading: 25.85px;
		--ss6-intro-h: 550.78125px; /* sourced desktop section height, 1954:103 */
		--ss6-intro-text-top: 236.625px; /* sourced desktop text y, 1954:104 */
		--ss6-intro-text-h: 78px; /* sourced desktop text box height */
		--ss6-intro-lines: 3; /* sourced desktop wrap line count */
		--ss6-intro-offset-x: -7.5px; /* sourced: 712.5 centerline vs 720 page-geometric center */
	}
}

/* Character-roll rules adapted directly from SOURCE/006-adapter/intro.css.
   Existing responsive geometry and fonts above remain the controlling layout. */
.ss6-intro { --intro-roll-color: #a84a0a; }
.ss6-intro__text { width:100%; }
.ss6-intro__readable { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ss6-intro__visual { display:block; }
.ss6-intro__word { display:inline-block; white-space:nowrap; }
.ss6-intro__cell { position:relative; display:inline-block; vertical-align:top; overflow:hidden; margin-block:-.12em; }
.ss6-intro__glyph { display:block; padding-block:.12em; }
.ss6-intro__glyph--next { position:absolute; top:100%; left:0; color:var(--intro-roll-color); }
.ss6-intro__line { display:inline; }
@media (min-width:1440px) { .ss6-intro__line { display:block; } }
@media (prefers-reduced-motion:no-preference) {
 .ss6-intro[data-motion-enabled] .ss6-intro__glyph { transition-property:transform; transition-duration:.3s; transition-timing-function:cubic-bezier(.65,0,.35,1); transition-delay:calc(var(--char-index) * 15ms); }
 .ss6-intro.is-rolled .ss6-intro__glyph { transform:translateY(-100%); }
}
.ss6-intro[data-reset-roll] .ss6-intro__glyph { transition:none!important; transform:none!important; }
@media (prefers-reduced-motion:reduce) { .ss6-intro__glyph { transition:none!important; transform:none!important; } }

/* ==== Aesthetic pass: tablet Intro rhythm ====
   Evidence: measured Intro h509.2 (1024) / 467.7 (768) vs Roku 394.1 / 294.1; screenshots show a small
   centred paragraph floating in ~200px padding at both widths. Old interpolation held 509.2 flat from
   1024 to 1439, then jumped to 550.78 at 1440.
   New: height ramps linearly 420 @768 -> 550.78 @1440 (slope 130.78 / 672 = 0.1946), capped at 550.78.
   Text size, width, line count and roll animation are not touched. Paragraph stays centred:
   text-top = (h - text-h) / 2, the same relation the sourced values satisfy (205.9 / 221.1).
   Bounded at 1439.98 so the sourced 1440 and 390 anchors are unchanged. */
@media (min-width: 768px) and (max-width: 1439.98px) {
	.ss6-intro {
		--ss6-intro-h: clamp(420px, calc(420px + (100vw - 768px) * 0.1946), 550.78px);
		--ss6-intro-text-top: calc((var(--ss6-intro-h) - var(--ss6-intro-text-h)) / 2);
	}
}