/* ==========================================================================
   VIC Theme — VIC Hero (.vic-hero) + shared brand line (.vic-brand-line)

   One component, configured by modifier classes / data attributes from the
   "VIC Hero" Elementor widget (elementor-widgets/hero.php):

     .vic-hero--{split|wide-split|text-focus|centered|media-focus}   layout
     .vic-hero--media-{right|left|background|none}                   media position
     .vic-hero--theme-{light|soft|dark|blue|custom}                  colour theme
     .vic-hero--height-{auto|compact|standard|large|viewport}        vertical spacing
     .vic-hero--width-{narrow|default|wide}                          content measure
     .vic-hero--bg-{none|solid|image|pattern}                        background
     [data-heading-motion|data-text-motion|data-media-motion|data-line]  motion

   Values come from tokens.css only; component-specific numbers (frame bar,
   motion distances) are named variables below. Buttons are the VIC button
   system (buttons.css) — nothing about buttons is restyled here.

   Motion is progressive: all content is visible without JS; with JS the
   entrance states apply only until the hero enters the viewport, and a CSS
   failsafe reveals everything if the script never arms the hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables + theme
   -------------------------------------------------------------------------- */
.vic-hero {
	--vic-hero-bg: var(--color-background);
	--vic-hero-pad: var(--hero-pad-y);
	--vic-hero-measure: 40rem;              /* Default ≈640px */
	--vic-hero-gap: var(--space-10);        /* stacked: content ↔ media */
	--vic-hero-media-radius: var(--radius-card);
	--vic-hero-highlight: var(--color-accent-text-large); /* large-text orange on light themes (≥3:1) */
	--vic-hero-marker: rgba(249, 157, 28, 0.32);   /* VIC Orange tint */
	--vic-hero-actions-space: var(--space-8);
	--vic-hero-frame-bar: 32px;             /* browser frame title bar */

	/* Motion */
	--vic-hero-ease: var(--ease-soft);
	--vic-hero-line-duration: 700ms;
	--vic-hero-line-stagger: 120ms;
	--vic-hero-lines: 2;                    /* set by hero.js for kinetic headings */

	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	padding-block: var(--vic-hero-pad);
	background-color: var(--vic-hero-bg);
	color: var(--color-body);
}

.vic-hero--theme-soft { --vic-hero-bg: var(--color-surface-soft); }
.vic-hero--theme-dark { --vic-hero-bg: var(--vic-blue-deep); }
.vic-hero--theme-blue { --vic-hero-bg: var(--vic-blue); }
.vic-hero--bg-none { background-color: transparent; }

/* Light text themes reuse the theme's .on-dark rules (headings, links, focus
   ring, buttons) — the widget adds .on-dark for Dark, Brand Blue and Custom +
   light text. */
.vic-hero.on-dark {
	--vic-hero-highlight: var(--vic-orange);     /* 8:1 on navy, 5.1:1 on VIC Blue */
	--vic-hero-marker: rgba(249, 157, 28, 0.4);

	color: var(--color-on-dark-muted);           /* #DCE3EB: 13.6:1 on navy, 8.6:1 on VIC Blue */
}

/* On a soft surface muted text drops below 4.5:1 — body colour instead. */
.vic-hero--theme-soft .vic-hero__supporting { color: var(--color-body); }

/* Heights / spacing — all from the hero + section spacing tokens. */
.vic-hero--height-auto { --vic-hero-pad: var(--section-pad-y); }
.vic-hero--height-compact { --vic-hero-pad: var(--section-pad-y-compact); }
.vic-hero--height-large { --vic-hero-pad: var(--hero-pad-y-large); }

.vic-hero--height-viewport {
	display: grid;
	align-content: center;
	min-height: 85vh;
	min-height: 85svh; /* small viewport unit: never taller than the visible mobile screen */
}

@media (min-width: 1024px) {
	.vic-hero--height-large {
		display: grid;
		align-content: center;
		min-height: 70vh;
		min-height: 70svh;
	}
}

.vic-hero--width-narrow { --vic-hero-measure: var(--measure-hero); } /* 560 */
.vic-hero--width-wide { --vic-hero-measure: var(--measure-body); }   /* 720 */

.vic-hero--actions-space-compact { --vic-hero-actions-space: var(--space-6); }
.vic-hero--actions-space-large { --vic-hero-actions-space: var(--space-10); }

/* --------------------------------------------------------------------------
   2. Content
   -------------------------------------------------------------------------- */
.vic-hero__inner {
	position: relative;
}

.vic-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vic-hero-gap);
	align-items: center;
}

.vic-hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--vic-hero-measure);
}

.vic-hero__content > * {
	margin: 0;
}

.vic-hero__eyebrow {
	margin-block-end: var(--gap-eyebrow);
}

.vic-hero__heading {
	position: relative;
	font-size: var(--text-display-size);
	line-height: var(--text-display-line);
	letter-spacing: var(--text-display-tracking);
	font-weight: var(--weight-bold);
}

.vic-hero__description,
.vic-hero__supporting {
	margin-block-start: var(--space-5);
}

.vic-hero__description {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.vic-hero__supporting {
	margin-block-start: var(--gap-paragraph);
	color: var(--color-muted);
}

.vic-hero.on-dark .vic-hero__supporting { color: var(--color-on-dark-muted); }

:is(.vic-hero__description, .vic-hero__supporting) > * + * {
	margin-block-start: var(--gap-paragraph);
}

:is(.vic-hero__description, .vic-hero__supporting) > :is(p, ul, ol) {
	margin-block-end: 0;
}

/* Highlight — only one phrase, never colour alone for meaning (it's emphasis). */
.vic-hero__highlight {
	position: relative;
}

.vic-hero__highlight--orange {
	color: var(--vic-hero-highlight);
}

.vic-hero__highlight--underline {
	text-decoration-line: underline;
	text-decoration-color: var(--vic-orange);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
	text-decoration-skip-ink: none;
}

.vic-hero__highlight--marker {
	padding-inline: 0.06em;
	background-image: linear-gradient(transparent 62%, var(--vic-hero-marker) 62%, var(--vic-hero-marker) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.vic-hero__highlight--brand-line {
	white-space: nowrap;
}

.vic-hero__highlight-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.16em;
	width: 100%;
	height: 0.26em;
	overflow: visible;
	pointer-events: none;
}

/* Long highlighted phrases may wrap on small screens. */
@media (max-width: 479px) {
	.vic-hero__highlight--brand-line {
		white-space: normal;
	}
}

/* Actions: the VIC button system, laid out only. */
.vic-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-buttons);
	margin-block-start: var(--vic-hero-actions-space);
}

.vic-hero--align-center .vic-hero__actions { justify-content: center; }
.vic-hero--align-right .vic-hero__actions { justify-content: flex-end; }

/* Auto: buttons share the row; if they no longer fit, each wraps to full width. */
@media (max-width: 479px) {
	.vic-hero--actions-auto .vic-hero__actions > .vic-button {
		flex: 1 1 auto;
	}

	.vic-hero--actions-stack .vic-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* --------------------------------------------------------------------------
   3. Layouts. Stacked below MD; columns from MD (tablet) with a smaller gap.
   -------------------------------------------------------------------------- */
.vic-hero--split       { --vic-hero-cols: minmax(0, 1fr) minmax(0, 1fr); }
.vic-hero--wide-split  { --vic-hero-cols: minmax(0, 42fr) minmax(0, 58fr); --vic-hero-cols-rev: minmax(0, 58fr) minmax(0, 42fr); }
.vic-hero--text-focus  { --vic-hero-cols: minmax(0, 58fr) minmax(0, 42fr); --vic-hero-cols-rev: minmax(0, 42fr) minmax(0, 58fr); }
.vic-hero--media-focus { --vic-hero-cols: minmax(0, 38fr) minmax(0, 62fr); --vic-hero-cols-rev: minmax(0, 62fr) minmax(0, 38fr); }

.vic-hero--mobile-media-first .vic-hero__media {
	order: -1;
}

@media (min-width: 768px) {
	.vic-hero {
		--vic-hero-gap: var(--space-8);   /* 32 */
	}

	.vic-hero:is(.vic-hero--media-right, .vic-hero--media-left):not(.vic-hero--centered) .vic-hero__grid {
		grid-template-columns: var(--vic-hero-cols);
	}

	.vic-hero--media-left:not(.vic-hero--centered) .vic-hero__grid {
		grid-template-columns: var(--vic-hero-cols-rev, var(--vic-hero-cols));
	}

	.vic-hero--media-left .vic-hero__media { order: -1; }
	.vic-hero--media-right .vic-hero__media { order: 0; }
}

@media (min-width: 1024px) {
	.vic-hero {
		--vic-hero-gap: var(--space-16);  /* 64 */
	}
}

@media (min-width: 1440px) {
	.vic-hero {
		--vic-hero-gap: var(--space-20);  /* 80 */
	}
}

/* Centered: one column; media (if any) below, centred. */
.vic-hero--centered .vic-hero__content {
	margin-inline: auto;
	text-align: center;
}

.vic-hero--centered.vic-hero--align-auto .vic-hero__actions {
	justify-content: center;
}

.vic-hero--centered .vic-hero__brand-line--accent {
	margin-inline: auto;
}

.vic-hero--centered .vic-hero__media {
	order: 1;
	width: 100%;
	max-width: 60rem; /* 960 */
	margin-inline: auto;
}

/* Background media: content alone in the grid. */
.vic-hero--media-background .vic-hero__grid,
.vic-hero--media-none .vic-hero__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   4. Media
   -------------------------------------------------------------------------- */
.vic-hero__media {
	position: relative;
	min-width: 0;
}

.vic-hero__media--shape-square  { --vic-hero-media-radius: 0; }
.vic-hero__media--shape-large   { --vic-hero-media-radius: var(--radius-panel); }
.vic-hero__media--shape-masked  { --vic-hero-media-radius: var(--radius-panel) var(--radius-panel) var(--radius-panel) var(--radius-small); }

.vic-hero__media-depth {
	position: relative;
}

.vic-hero__frame {
	position: relative;
	border-radius: var(--vic-hero-media-radius);
}

.vic-hero__media-box {
	position: relative;
	overflow: hidden;
	border-radius: var(--vic-hero-media-radius);
}

.vic-hero__media--shadow .vic-hero__frame {
	box-shadow: var(--shadow-soft);
}

.vic-hero__media-box :is(img, video, iframe) {
	display: block;
	width: 100%;
	height: auto;
}

.vic-hero__media-box iframe {
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Aspect ratios: box reserves space; media covers it. */
.vic-hero__media--ratio-16x9  .vic-hero__media-box { aspect-ratio: 16 / 9; }
.vic-hero__media--ratio-16x10 .vic-hero__media-box { aspect-ratio: 16 / 10; }
.vic-hero__media--ratio-4x3   .vic-hero__media-box { aspect-ratio: 4 / 3; }
.vic-hero__media--ratio-1x1   .vic-hero__media-box { aspect-ratio: 1 / 1; }

.vic-hero__media:not(.vic-hero__media--ratio-auto) .vic-hero__media-box :is(img, video, iframe) {
	height: 100%;
	object-fit: cover;
}

/* Screenshots are never cropped by the 'cover' rule's edges: anchor top-left. */
.vic-hero__media--screenshot .vic-hero__media-box img {
	object-position: left top;
}

/* Frames (chrome only — the screenshot is always the editor's real image). */
.vic-hero__media--frame-browser .vic-hero__frame {
	overflow: hidden;
	border: 1px solid var(--color-border);
	background-color: var(--color-background);
}

.vic-hero__media--frame-browser .vic-hero__media-box {
	border-radius: 0;
}

.vic-hero__frame-bar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--vic-hero-frame-bar);
	padding-inline: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-surface-soft);
}

.vic-hero__frame-bar span {
	width: var(--space-2);
	height: var(--space-2);
	border-radius: var(--radius-pill);
	background-color: var(--color-border);
}

.vic-hero__media--frame-laptop .vic-hero__frame {
	padding-inline: 6%;
	border-radius: 0;
}

.vic-hero__media--frame-laptop .vic-hero__media-box {
	border: var(--space-2) solid var(--color-heading);
	border-bottom-width: var(--space-3);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.vic-hero__media--frame-laptop .vic-hero__frame::after {
	content: "";
	display: block;
	height: var(--space-3);
	margin-inline: -6%;
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	background-color: var(--color-surface-muted);
	box-shadow: inset 0 1px 0 var(--color-border);
}

.vic-hero.on-dark .vic-hero__media--frame-laptop .vic-hero__media-box {
	border-color: var(--color-surface-muted);
}

.vic-hero__media--frame-panel .vic-hero__frame {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	background-color: var(--color-background);
	box-shadow: var(--shadow-soft);
}

.vic-hero__media--frame-panel .vic-hero__media-box {
	border-radius: var(--radius-card);
}

/* Floating items: real UI crops / icons over the media (MD+ only). */
.vic-hero__float {
	display: none;
}

@media (min-width: 768px) {
	.vic-hero__float {
		position: absolute;
		z-index: 2;
		display: block;
		max-width: 42%;
		translate: -50% -50%;
	}
}

.vic-hero__float-inner {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background-color: var(--color-background);
	box-shadow: var(--shadow-soft);
	color: var(--color-heading);
	font-size: var(--text-body-sm-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-body-sm-line);
}

.vic-hero__float-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 12rem;
	border-radius: var(--radius-small);
}

/* Video pause/play toggle (autoplay only). */
.vic-hero__video-toggle {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 3;
	display: inline-grid;
	place-items: center;
	width: var(--touch-target);
	height: var(--touch-target);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: rgba(0, 29, 64, 0.72);
	color: var(--color-on-dark);
	cursor: pointer;
}

.vic-hero__video-toggle:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-on-dark);
	outline-offset: var(--focus-ring-offset);
}

.vic-hero__video-toggle svg {
	fill: currentColor;
	stroke: none;
}

.vic-hero__video-toggle .vic-hero__icon-play,
.vic-hero__video-toggle.is-paused .vic-hero__icon-pause {
	display: none;
}

.vic-hero__video-toggle.is-paused .vic-hero__icon-play {
	display: block;
}

.vic-hero > .vic-hero__video-toggle {
	right: var(--container-pad);
	bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   5. Backdrop: background image / background media / pattern / curve
   -------------------------------------------------------------------------- */
.vic-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.vic-hero__backdrop-media,
.vic-hero__overlay {
	position: absolute;
	inset: 0;
}

.vic-hero__backdrop-media :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vic-hero__overlay {
	background-color: var(--vic-hero-overlay, var(--vic-hero-bg));
	opacity: var(--vic-hero-overlay-opacity, 0.82);
}

.vic-hero__pattern {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(100%, 52rem);
	opacity: 0.35;
}

.vic-hero__pattern--medium { opacity: 0.6; }

.vic-hero__pattern .vic-brand-line {
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   6. Brand line (shared motif; components/brand-line)
   -------------------------------------------------------------------------- */
.vic-brand-line {
	display: block;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-width: 3px;
}

.vic-brand-line--blue path   { stroke: var(--vic-blue); }
.vic-brand-line--orange path { stroke: var(--vic-orange); }
.vic-brand-line__stop-start  { stop-color: var(--vic-blue); }
.vic-brand-line__stop-end    { stop-color: var(--vic-orange); }
.vic-brand-line--pattern path:nth-of-type(2) { stroke: var(--vic-orange); }
.vic-brand-line--pattern { stroke-width: 1.5px; }
.vic-brand-line--curve   { stroke-width: 2px; }

/* On navy / blue, the blue half of the line would vanish — lighten it. */
.on-dark .vic-brand-line--blue path,
.on-dark .vic-brand-line__stop-start {
	stroke: var(--color-on-dark-muted);
	stop-color: var(--color-on-dark-muted);
}

.vic-hero__brand-line--accent {
	width: min(10rem, 60%);
	height: var(--space-3);
	margin-block-start: var(--space-4);
}

.vic-hero__brand-line--accent .vic-brand-line {
	width: 100%;
	height: 100%;
}

.vic-hero__brand-line--curve {
	position: absolute;
	inset: 0;
	opacity: 0.5;
}

.vic-hero__brand-line--curve .vic-brand-line {
	width: 100%;
	height: 100%;
}

/* Connector: from the content column toward the media (side-by-side only). */
.vic-hero__brand-line--connector {
	display: none;
}

@media (min-width: 1024px) {
	.vic-hero--media-right .vic-hero__brand-line--connector,
	.vic-hero--media-left .vic-hero__brand-line--connector {
		position: absolute;
		bottom: 12%;
		z-index: -1;
		display: block;
		width: var(--vic-hero-gap);
		height: var(--space-24);
	}

	.vic-hero--media-right .vic-hero__brand-line--connector {
		right: 100%;
	}

	.vic-hero--media-left .vic-hero__brand-line--connector {
		left: 100%;
		transform: scaleX(-1);
	}

	.vic-hero__brand-line--connector .vic-brand-line {
		width: 100%;
		height: 100%;
	}
}

/* --------------------------------------------------------------------------
   7. Depth (cursor / scroll) — transforms only, small, set by hero.js through
      --vic-hero-px/-py (cursor, -1…1) and --vic-hero-sy (scroll, -1…1).
   -------------------------------------------------------------------------- */
.vic-hero:is([data-cursor-depth="subtle"], [data-scroll-depth="subtle"]) .vic-hero__media-depth {
	transform: translate3d(
		calc(var(--vic-hero-px, 0) * 6px),
		calc(var(--vic-hero-py, 0) * 6px + var(--vic-hero-sy, 0) * -12px),
		0
	);
}

.vic-hero:is([data-cursor-depth="subtle"], [data-scroll-depth="subtle"]) .vic-hero__float-inner {
	transform: translate3d(
		calc(var(--vic-hero-px, 0) * 10px),
		calc(var(--vic-hero-py, 0) * 10px + var(--vic-hero-sy, 0) * -16px),
		0
	);
}

.vic-hero[data-cursor-depth="subtle"] :is(.vic-hero__media-depth, .vic-hero__float-inner) {
	transition: transform var(--motion-slow) var(--ease-standard);
}

/* --------------------------------------------------------------------------
   8. Entrance motion

   States:
     html.js .vic-hero:not(.is-inview)       → start state (hidden / masked)
     .vic-hero.is-inview                      → keyframes run once
   Keyframes use fill-mode "backwards": the start state holds during each
   delay, and after the animation the element returns to its natural,
   untransformed state (no clip/transform left behind).
   Editor preview (body.elementor-editor-active) always shows the final state.
   -------------------------------------------------------------------------- */
@keyframes vic-hero-fade      { from { opacity: 0; } }
@keyframes vic-hero-fade-up   { from { opacity: 0; transform: translateY(8px); } }
@keyframes vic-hero-mask-up   { from { clip-path: inset(0 0 100% 0); transform: translateY(12px); } to { clip-path: inset(0 0 -20% 0); } }
@keyframes vic-hero-block     { from { clip-path: inset(0 0 100% 0); transform: translateY(0.3em); } to { clip-path: inset(-10% -5% -30% -5%); } }
@keyframes vic-hero-side      { from { clip-path: inset(-10% 100% -30% -5%); transform: translateX(-0.15em); } to { clip-path: inset(-10% -5% -30% -5%); } }
@keyframes vic-hero-line      { from { transform: translateY(110%); } }
@keyframes vic-hero-clip      { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes vic-hero-wipe      { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes vic-hero-wipe-img  { from { transform: scale(1.06); } }
@keyframes vic-hero-depth     { from { clip-path: inset(0 0 0 30%); transform: translateX(24px) scale(1.02); } to { clip-path: inset(0 -10% 0 -10%); } }
@keyframes vic-hero-crop      { from { clip-path: inset(7% round var(--radius-panel)); transform: scale(0.97); } to { clip-path: inset(0 round 0); } }
@keyframes vic-hero-draw      { from { stroke-dashoffset: 1; } }
@keyframes vic-hero-failsafe  { to { opacity: 1; transform: none; clip-path: none; } }

/* Timing (component-specific). */
.vic-hero {
	--vic-hero-d-eyebrow: 0ms;
	--vic-hero-d-heading: 80ms;
	--vic-hero-d-text: 300ms;
	--vic-hero-d-media: 200ms;
}

.vic-hero[data-heading-motion="lines"] {
	/* description once the heading is mostly readable */
	--vic-hero-d-text: calc(250ms + var(--vic-hero-lines) * var(--vic-hero-line-stagger) + 250ms);
	--vic-hero-d-media: 250ms;
}

/* ----- Start states (before the hero is in view) ----- */
html.js body:not(.elementor-editor-active) .vic-hero:not(.is-inview):not([data-motion="none"]) :is(.vic-hero__eyebrow, .vic-hero__description, .vic-hero__supporting, .vic-hero__actions, .vic-hero__brand-line--accent),
html.js body:not(.elementor-editor-active) .vic-hero:not(.is-inview):not([data-heading-motion="none"]) .vic-hero__heading,
html.js body:not(.elementor-editor-active) .vic-hero:not(.is-inview):not([data-media-motion="none"]) :is(.vic-hero__media-box, .vic-hero__frame-bar, .vic-hero__float) {
	opacity: 0;
}

html.js body:not(.elementor-editor-active) .vic-hero:not(.is-inview):not([data-line="none"]):not([data-line="scroll"]) .vic-brand-line path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

/* Failsafe: if hero.js never arms the hero, show everything after 2.5s. */
html.js body:not(.elementor-editor-active) .vic-hero:not(.is-armed):not(.is-inview) :is(.vic-hero__eyebrow, .vic-hero__heading, .vic-hero__description, .vic-hero__supporting, .vic-hero__actions, .vic-hero__brand-line--accent, .vic-hero__media-box, .vic-hero__frame-bar, .vic-hero__float),
html.js body:not(.elementor-editor-active) .vic-hero:not(.is-armed):not(.is-inview) .vic-brand-line path {
	animation: vic-hero-failsafe 1ms 2.5s forwards;
}

html.js body:not(.elementor-editor-active) .vic-hero:not(.is-armed):not(.is-inview) .vic-brand-line path {
	animation-name: vic-hero-draw-failsafe;
}

@keyframes vic-hero-draw-failsafe { to { stroke-dashoffset: 0; } }

/* ----- Running (is-inview) ----- */
.vic-hero.is-inview .vic-hero__eyebrow {
	animation: vic-hero-fade 500ms var(--ease-standard) var(--vic-hero-d-eyebrow) backwards;
}

/* Text: fade (opacity + 8px) or mask (clip from bottom). */
.vic-hero.is-inview[data-text-motion="fade"] :is(.vic-hero__description, .vic-hero__supporting, .vic-hero__actions, .vic-hero__brand-line--accent) {
	animation: vic-hero-fade-up 600ms var(--vic-hero-ease) var(--vic-hero-d-text) backwards;
}

.vic-hero.is-inview[data-text-motion="mask"] :is(.vic-hero__description, .vic-hero__supporting, .vic-hero__actions, .vic-hero__brand-line--accent) {
	animation: vic-hero-mask-up 750ms var(--vic-hero-ease) var(--vic-hero-d-text) backwards;
}

.vic-hero.is-inview[data-text-motion] :is(.vic-hero__supporting, .vic-hero__brand-line--accent) { animation-delay: calc(var(--vic-hero-d-text) + 80ms); }
.vic-hero.is-inview[data-text-motion] .vic-hero__actions { animation-delay: calc(var(--vic-hero-d-text) + 160ms); }

/* Heading. */
.vic-hero.is-inview[data-heading-motion="block"] .vic-hero__heading {
	animation: vic-hero-block 750ms var(--vic-hero-ease) var(--vic-hero-d-heading) backwards;
}

.vic-hero.is-inview[data-heading-motion="side"] .vic-hero__heading {
	animation: vic-hero-side 850ms var(--vic-hero-ease) var(--vic-hero-d-heading) backwards;
}

/* Kinetic lines (markup added by hero.js, removed again when done). */
.vic-hero__line {
	display: block;
	overflow: hidden;
	padding-block-end: 0.12em;  /* keep descenders inside the mask */
	margin-block-end: -0.12em;
}

.vic-hero__line-inner {
	display: block;
}

.vic-hero.is-inview .vic-hero__line-inner {
	animation: vic-hero-line var(--vic-hero-line-duration) var(--vic-hero-ease) calc(var(--vic-hero-d-heading) + var(--vic-hero-line-index, 0) * var(--vic-hero-line-stagger)) backwards;
}

/* Media. */
.vic-hero.is-inview[data-media-motion="clip"] :is(.vic-hero__media-box, .vic-hero__frame-bar) {
	animation: vic-hero-clip 800ms var(--vic-hero-ease) var(--vic-hero-d-media) backwards;
}

.vic-hero.is-inview[data-media-motion="wipe"] :is(.vic-hero__media-box, .vic-hero__frame-bar) {
	animation: vic-hero-wipe 900ms var(--vic-hero-ease) var(--vic-hero-d-media) backwards;
}

.vic-hero.is-inview[data-media-motion="wipe"] .vic-hero__media-box > :is(img, video) {
	animation: vic-hero-wipe-img 1100ms var(--vic-hero-ease) var(--vic-hero-d-media) backwards;
}

.vic-hero.is-inview[data-media-motion="depth"] :is(.vic-hero__media-box, .vic-hero__frame-bar) {
	animation: vic-hero-depth 950ms var(--vic-hero-ease) var(--vic-hero-d-media) backwards;
}

.vic-hero.is-inview[data-media-motion="crop"] .vic-hero__media-box {
	animation: vic-hero-crop 900ms var(--vic-hero-ease) var(--vic-hero-d-media) backwards;
}

.vic-hero.is-inview[data-media-motion="crop"] .vic-hero__frame-bar {
	animation: vic-hero-fade 600ms var(--ease-standard) var(--vic-hero-d-media) backwards;
}

/* Floating items: small masked reveal after the main media. */
.vic-hero.is-inview:not([data-media-motion="none"]) .vic-hero__float {
	animation: vic-hero-mask-up 600ms var(--vic-hero-ease) calc(var(--vic-hero-d-media) + 750ms + var(--vic-float-index, 0) * 120ms) backwards;
}

/* Brand lines: draw once after the content they belong to is visible. */
.vic-hero.is-inview[data-line="draw"] .vic-brand-line path {
	stroke-dasharray: 1;
	animation: vic-hero-draw 900ms var(--ease-standard) calc(var(--vic-hero-d-text) + 300ms) backwards;
}

/* Highlight line: kinetic headings re-insert it when the lines finish → short delay. */
.vic-hero.is-inview[data-line="draw"] .vic-hero__highlight-line path {
	animation-delay: calc(var(--vic-hero-d-heading) + 650ms);
}

.vic-hero.is-inview.is-settled[data-line="draw"][data-heading-motion="lines"] .vic-hero__highlight-line path {
	animation-delay: 100ms;
}

/* Scroll-linked: hero.js sets --vic-hero-line (0 → 1). */
.vic-hero[data-line="scroll"] .vic-brand-line path {
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--vic-hero-line, 1));
}

/* --------------------------------------------------------------------------
   9. Reduced motion: everything visible immediately; no depth, no drawing.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vic-hero :is(.vic-hero__eyebrow, .vic-hero__heading, .vic-hero__description, .vic-hero__supporting, .vic-hero__actions, .vic-hero__brand-line, .vic-hero__media-box, .vic-hero__media-box > *, .vic-hero__frame-bar, .vic-hero__float, .vic-hero__line-inner, .vic-brand-line path) {
		opacity: 1 !important;
		clip-path: none !important;
		animation: none !important;
	}

	.vic-hero .vic-brand-line path {
		stroke-dashoffset: 0 !important;
	}

	.vic-hero :is(.vic-hero__media-depth, .vic-hero__float-inner) {
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   10. Editor placeholder
   -------------------------------------------------------------------------- */
.vic-hero-placeholder {
	padding: var(--space-4);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-control);
	color: var(--color-muted);
	font-size: var(--text-body-sm-size);
	text-align: center;
}

/* Editor-only hints rendered by VIC widgets (never output on the live page). */
.vic-editor-note {
	margin-block-start: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border: 1px dashed var(--color-warning);
	border-radius: var(--radius-control);
	background-color: var(--color-background);
	color: var(--color-warning);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	text-align: start;
}