@lluc_llull/ui-lib 0.34.2 → 0.35.0

package/fesm2022/lluc_llull-ui-lib-content.mjs

@@ -1,12 +1,14 @@
 import { CommonModule, DOCUMENT, isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, Inject, Input, PLATFORM_ID, ViewChild, computed, effect, signal } from "@angular/core";
-import { HighlightDirective, LinkTypeDirective, ScrollRevealDirective } from "@lluc_llull/ui-lib/directives";
+import { HighlightDirective, LinkTypeDirective, ScrollRevealDirective, ScrollTextRevealDirective } from "@lluc_llull/ui-lib/directives";
 import { UiIconComponent, UiImageComponent } from "@lluc_llull/ui-lib/shared";
 var CategoryProgressComponent = class CategoryProgressComponent {
 	pretitle;
 	title;
 	categories;
+	highlightColor = "var(--content-highlight)";
+	highlightThickness = 30;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -24,11 +26,13 @@ var CategoryProgressComponent = class CategoryProgressComponent {
 		inputs: {
 			pretitle: "pretitle",
 			title: "title",
-			categories: "categories"
+			categories: "categories",
+			highlightColor: "highlightColor",
+			highlightThickness: "highlightThickness"
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
+		template: "<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
 		styles: [".category-progress{text-align:start;align-items:start}.title{text-transform:uppercase}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.category{display:flex;flex-direction:column;gap:1.5rem}.category-title{font-weight:600;font-size:1.1rem}.subtitle{font-size:1.8rem;width:fit-content}.item{margin-bottom:0rem}.item .item-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.item .label,.item .value{font-size:1.3rem;margin-bottom:0;display:inline-block}.item .bar{background-color:var(--progress-bg);height:2px;border-radius:3px;overflow:hidden}.item .bar .fill{background-color:var(--progress-color);height:100%;width:0;transition:width .3s ease}\n"],
 		dependencies: [
 			{
@@ -45,7 +49,14 @@ var CategoryProgressComponent = class CategoryProgressComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -68,14 +79,16 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
+			template: "<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
 			styles: [".category-progress{text-align:start;align-items:start}.title{text-transform:uppercase}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.category{display:flex;flex-direction:column;gap:1.5rem}.category-title{font-weight:600;font-size:1.1rem}.subtitle{font-size:1.8rem;width:fit-content}.item{margin-bottom:0rem}.item .item-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.item .label,.item .value{font-size:1.3rem;margin-bottom:0;display:inline-block}.item .bar{background-color:var(--progress-bg);height:2px;border-radius:3px;overflow:hidden}.item .bar .fill{background-color:var(--progress-color);height:100%;width:0;transition:width .3s ease}\n"]
 		}]
 	}],
 	propDecorators: {
 		pretitle: [{ type: Input }],
 		title: [{ type: Input }],
-		categories: [{ type: Input }]
+		categories: [{ type: Input }],
+		highlightColor: [{ type: Input }],
+		highlightThickness: [{ type: Input }]
 	}
 });
 var HeroSectionComponent = class HeroSectionComponent {
@@ -123,8 +136,8 @@ var HeroSectionComponent = class HeroSectionComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div\n  class=\"hero-section col-span-full\"\n  [class.hero-section--text]=\"variant === 'text'\"\n  [class.hero-section--image]=\"variant === 'image'\"\n  scrollReveal\n>\n  @if (variant === 'image' && image) {\n    <div class=\"hero-section__bg\">\n      @if (image.publicId) {\n        <ui-image \n          [publicId]=\"image.publicId\" \n          [eager]=\"true\"\n          class=\"hero-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"image.url\"\n          [alt]=\"image.alt\"\n          class=\"hero-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"hero-section__content col-span-full\">\n    @if (pretitle) {\n      <h2 class=\"pretitle\">{{ pretitle }}</h2>\n    }\n    @if (title) {\n      <h1 class=\"title\">\n        @if (highlight && title.includes(highlight)) {\n          {{ title.replace(highlight, '') }}\n          <span class=\"highlight-text\">\n            {{ highlight }}\n            <div class=\"wave-wrapper\">\n              <div class=\"wave\"></div>\n            </div>\n          </span>\n        } @else {\n          {{ title }}\n        }\n      </h1>\n    }\n    @if (subtitle) {\n      <h2 class=\"subtitle\">{{ subtitle }}</h2>\n    }\n    @if (text) {\n      <p class=\"text\">{{ text }}</p>\n    }\n    @if (buttons && buttons.length > 0) {\n      <div class=\"btn-group--center\">\n        @for (button of buttons; track $index) {\n          <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n            <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n            {{ button.label }}\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
-		styles: ["@charset \"UTF-8\";.hero-section{position:relative;min-height:calc(100vh - 10rem);display:grid;grid-template-rows:1fr auto;text-align:center;overflow:hidden}.hero-section__content{position:relative;z-index:2}.hero-section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-section__bg .hero-img,.hero-section__bg ui-image{width:100%;height:100%;object-fit:cover}.hero-section__bg:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,#0003,#0009)}.text,.btn-link{font-size:1.3rem}@media(max-width:768px){.text,.btn-link{font-size:1.1rem}}.hero-section--text{align-items:center;justify-items:center;align-content:center}.hero-section--text .hero-section__content{grid-row:1/-1}.hero-section--text .title{font-family:var(--font-title-home);font-weight:200;font-size:4rem;line-height:.85;display:flex;flex-direction:column;align-items:center}@media(max-width:768px){.hero-section--text .title{font-size:3rem}}.hero-section--text .title .highlight-text{font-size:11.25rem;cursor:help;position:relative;z-index:2}@media(max-width:768px){.hero-section--text .title .highlight-text{font-size:8.25rem}}.hero-section--text .title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media(max-width:768px){.hero-section--text .title .highlight-text .wave-wrapper{top:90%}}.hero-section--text .title .highlight-text .wave{position:absolute;background-image:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 27.6 8.4\" style=\"enable-background:new 0 0 27.6 8.4;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;}%0A<\\/style>%0A<path class=\"st0\" d=\"M0,1c2.7,0,5.2,1.2,6.9,3.2s4.2,3.2,6.9,3.2c2.7,0,5.2-1.2,6.9-3.2S24.9,1,27.6,1\"/>%0A</svg>%0A');background-repeat:repeat-x;top:-1.2rem;opacity:.5;width:100%;height:50%}@media(max-width:768px){.hero-section--text .title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.hero-section--text .title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}.hero-section{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:100vh}.hero-section--image{align-items:end;justify-items:center}.hero-section--image .hero-section__content{grid-row:2;max-width:60rem;padding-bottom:5rem}.hero-section--image .title{font-family:var(--font-base);font-weight:700;font-size:2.5rem;line-height:1.2;color:#fff}@media(max-width:768px){.hero-section--image .title{font-size:2rem}}.hero-section--image .text{font-size:1rem;opacity:.85;color:#fff}.hero-section--image .btn-group--center{display:none}.hero-section--image .hero-section__bg img,.hero-section--image .hero-section__bg ui-image{filter:scale(1.05);transition:transform 6s ease}.hero-section--image .hero-section:hover .hero-img,.hero-section--image .hero-section:hover ui-image{transform:scale(1.1)}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}\n"],
+		template: "<div\n  class=\"hero-section col-span-full\"\n  [class.hero-section--text]=\"variant === 'text'\"\n  [class.hero-section--image]=\"variant === 'image'\"\n>\n  @if (variant === 'image' && image) {\n    <div class=\"hero-section__bg\">\n      @if (image.publicId) {\n        <ui-image \n          [publicId]=\"image.publicId\" \n          [eager]=\"true\"\n          class=\"hero-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"image.url\"\n          [alt]=\"image.alt\"\n          class=\"hero-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"hero-section__content col-span-full\">\n    @if (pretitle) {\n      <h2 class=\"pretitle\">{{ pretitle }}</h2>\n    }\n    @if (title) {\n      <h1 class=\"title\">\n        @if (highlight && title.includes(highlight)) {\n          {{ title.replace(highlight, '') }}\n          <span class=\"highlight-text\">\n            {{ highlight }}\n            <div class=\"wave-wrapper\">\n              <div class=\"wave\"></div>\n            </div>\n          </span>\n        } @else {\n          {{ title }}\n        }\n      </h1>\n    }\n    @if (subtitle) {\n      <h2 class=\"subtitle\">{{ subtitle }}</h2>\n    }\n    @if (text) {\n      <p class=\"text\">{{ text }}</p>\n    }\n    @if (buttons && buttons.length > 0) {\n      <div class=\"btn-group--center\">\n        @for (button of buttons; track $index) {\n          <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n            <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n            {{ button.label }}\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
+		styles: ["@charset \"UTF-8\";.hero-section{position:relative;min-height:calc(100vh - 10rem);display:grid;grid-template-rows:1fr auto;text-align:center;overflow:hidden}.hero-section__content{position:relative;z-index:2}.hero-section__content>*{animation:hero-content-fall 1.1s cubic-bezier(.22,1,.36,1) both}.hero-section__content>:nth-last-child(1){animation-delay:0ms}.hero-section__content>:nth-last-child(2){animation-delay:.18s}.hero-section__content>:nth-last-child(3){animation-delay:.36s}.hero-section__content>:nth-last-child(4){animation-delay:.54s}.hero-section__content>:nth-last-child(5){animation-delay:.72s}.hero-section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-section__bg .hero-img,.hero-section__bg ui-image{width:100%;height:100%;object-fit:cover}.hero-section__bg:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,#0003,#0009)}.text,.btn-link{font-size:1.3rem}@media(max-width:768px){.text,.btn-link{font-size:1.1rem}}.hero-section--text{align-items:center;justify-items:center;align-content:center}.hero-section--text .hero-section__content{grid-row:1/-1}.hero-section--text .title{font-family:var(--font-title-home);font-weight:200;font-size:4rem;line-height:.85;display:flex;flex-direction:column;align-items:center}@media(max-width:768px){.hero-section--text .title{font-size:3rem}}.hero-section--text .title .highlight-text{font-size:11.25rem;cursor:help;position:relative;z-index:2}@media(max-width:768px){.hero-section--text .title .highlight-text{font-size:8.25rem}}.hero-section--text .title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media(max-width:768px){.hero-section--text .title .highlight-text .wave-wrapper{top:90%}}.hero-section--text .title .highlight-text .wave{position:absolute;background-image:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 27.6 8.4\" style=\"enable-background:new 0 0 27.6 8.4;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;}%0A<\\/style>%0A<path class=\"st0\" d=\"M0,1c2.7,0,5.2,1.2,6.9,3.2s4.2,3.2,6.9,3.2c2.7,0,5.2-1.2,6.9-3.2S24.9,1,27.6,1\"/>%0A</svg>%0A');background-repeat:repeat-x;top:-1.2rem;opacity:.5;width:100%;height:50%}@media(max-width:768px){.hero-section--text .title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.hero-section--text .title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}.hero-section{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:100vh}.hero-section--image{align-items:end;justify-items:center}.hero-section--image .hero-section__content{grid-row:2;max-width:60rem;padding-bottom:5rem}.hero-section--image .title{font-family:var(--font-base);font-weight:700;font-size:2.5rem;line-height:1.2;color:#fff}@media(max-width:768px){.hero-section--image .title{font-size:2rem}}.hero-section--image .text{font-size:1rem;opacity:.85;color:#fff}.hero-section--image .btn-group--center{display:none}.hero-section--image .hero-section__bg img,.hero-section--image .hero-section__bg ui-image{filter:scale(1.05);transition:transform 6s ease}.hero-section--image .hero-section:hover .hero-img,.hero-section--image .hero-section:hover ui-image{transform:scale(1.1)}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}@keyframes hero-content-fall{0%{opacity:0;transform:translateY(-6rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hero-section__content>*{animation:none;opacity:1;transform:none}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -159,12 +172,6 @@ var HeroSectionComponent = class HeroSectionComponent {
 					"width",
 					"height"
 				]
-			},
-			{
-				kind: "directive",
-				type: ScrollRevealDirective,
-				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -184,13 +191,12 @@ i0.ɵɵngDeclareClassMetadata({
 				CommonModule,
 				LinkTypeDirective,
 				UiIconComponent,
-				UiImageComponent,
-				ScrollRevealDirective
+				UiImageComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div\n  class=\"hero-section col-span-full\"\n  [class.hero-section--text]=\"variant === 'text'\"\n  [class.hero-section--image]=\"variant === 'image'\"\n  scrollReveal\n>\n  @if (variant === 'image' && image) {\n    <div class=\"hero-section__bg\">\n      @if (image.publicId) {\n        <ui-image \n          [publicId]=\"image.publicId\" \n          [eager]=\"true\"\n          class=\"hero-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"image.url\"\n          [alt]=\"image.alt\"\n          class=\"hero-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"hero-section__content col-span-full\">\n    @if (pretitle) {\n      <h2 class=\"pretitle\">{{ pretitle }}</h2>\n    }\n    @if (title) {\n      <h1 class=\"title\">\n        @if (highlight && title.includes(highlight)) {\n          {{ title.replace(highlight, '') }}\n          <span class=\"highlight-text\">\n            {{ highlight }}\n            <div class=\"wave-wrapper\">\n              <div class=\"wave\"></div>\n            </div>\n          </span>\n        } @else {\n          {{ title }}\n        }\n      </h1>\n    }\n    @if (subtitle) {\n      <h2 class=\"subtitle\">{{ subtitle }}</h2>\n    }\n    @if (text) {\n      <p class=\"text\">{{ text }}</p>\n    }\n    @if (buttons && buttons.length > 0) {\n      <div class=\"btn-group--center\">\n        @for (button of buttons; track $index) {\n          <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n            <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n            {{ button.label }}\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
-			styles: ["@charset \"UTF-8\";.hero-section{position:relative;min-height:calc(100vh - 10rem);display:grid;grid-template-rows:1fr auto;text-align:center;overflow:hidden}.hero-section__content{position:relative;z-index:2}.hero-section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-section__bg .hero-img,.hero-section__bg ui-image{width:100%;height:100%;object-fit:cover}.hero-section__bg:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,#0003,#0009)}.text,.btn-link{font-size:1.3rem}@media(max-width:768px){.text,.btn-link{font-size:1.1rem}}.hero-section--text{align-items:center;justify-items:center;align-content:center}.hero-section--text .hero-section__content{grid-row:1/-1}.hero-section--text .title{font-family:var(--font-title-home);font-weight:200;font-size:4rem;line-height:.85;display:flex;flex-direction:column;align-items:center}@media(max-width:768px){.hero-section--text .title{font-size:3rem}}.hero-section--text .title .highlight-text{font-size:11.25rem;cursor:help;position:relative;z-index:2}@media(max-width:768px){.hero-section--text .title .highlight-text{font-size:8.25rem}}.hero-section--text .title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media(max-width:768px){.hero-section--text .title .highlight-text .wave-wrapper{top:90%}}.hero-section--text .title .highlight-text .wave{position:absolute;background-image:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 27.6 8.4\" style=\"enable-background:new 0 0 27.6 8.4;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;}%0A<\\/style>%0A<path class=\"st0\" d=\"M0,1c2.7,0,5.2,1.2,6.9,3.2s4.2,3.2,6.9,3.2c2.7,0,5.2-1.2,6.9-3.2S24.9,1,27.6,1\"/>%0A</svg>%0A');background-repeat:repeat-x;top:-1.2rem;opacity:.5;width:100%;height:50%}@media(max-width:768px){.hero-section--text .title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.hero-section--text .title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}.hero-section{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:100vh}.hero-section--image{align-items:end;justify-items:center}.hero-section--image .hero-section__content{grid-row:2;max-width:60rem;padding-bottom:5rem}.hero-section--image .title{font-family:var(--font-base);font-weight:700;font-size:2.5rem;line-height:1.2;color:#fff}@media(max-width:768px){.hero-section--image .title{font-size:2rem}}.hero-section--image .text{font-size:1rem;opacity:.85;color:#fff}.hero-section--image .btn-group--center{display:none}.hero-section--image .hero-section__bg img,.hero-section--image .hero-section__bg ui-image{filter:scale(1.05);transition:transform 6s ease}.hero-section--image .hero-section:hover .hero-img,.hero-section--image .hero-section:hover ui-image{transform:scale(1.1)}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}\n"]
+			template: "<div\n  class=\"hero-section col-span-full\"\n  [class.hero-section--text]=\"variant === 'text'\"\n  [class.hero-section--image]=\"variant === 'image'\"\n>\n  @if (variant === 'image' && image) {\n    <div class=\"hero-section__bg\">\n      @if (image.publicId) {\n        <ui-image \n          [publicId]=\"image.publicId\" \n          [eager]=\"true\"\n          class=\"hero-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"image.url\"\n          [alt]=\"image.alt\"\n          class=\"hero-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"hero-section__content col-span-full\">\n    @if (pretitle) {\n      <h2 class=\"pretitle\">{{ pretitle }}</h2>\n    }\n    @if (title) {\n      <h1 class=\"title\">\n        @if (highlight && title.includes(highlight)) {\n          {{ title.replace(highlight, '') }}\n          <span class=\"highlight-text\">\n            {{ highlight }}\n            <div class=\"wave-wrapper\">\n              <div class=\"wave\"></div>\n            </div>\n          </span>\n        } @else {\n          {{ title }}\n        }\n      </h1>\n    }\n    @if (subtitle) {\n      <h2 class=\"subtitle\">{{ subtitle }}</h2>\n    }\n    @if (text) {\n      <p class=\"text\">{{ text }}</p>\n    }\n    @if (buttons && buttons.length > 0) {\n      <div class=\"btn-group--center\">\n        @for (button of buttons; track $index) {\n          <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n            <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n            {{ button.label }}\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n",
+			styles: ["@charset \"UTF-8\";.hero-section{position:relative;min-height:calc(100vh - 10rem);display:grid;grid-template-rows:1fr auto;text-align:center;overflow:hidden}.hero-section__content{position:relative;z-index:2}.hero-section__content>*{animation:hero-content-fall 1.1s cubic-bezier(.22,1,.36,1) both}.hero-section__content>:nth-last-child(1){animation-delay:0ms}.hero-section__content>:nth-last-child(2){animation-delay:.18s}.hero-section__content>:nth-last-child(3){animation-delay:.36s}.hero-section__content>:nth-last-child(4){animation-delay:.54s}.hero-section__content>:nth-last-child(5){animation-delay:.72s}.hero-section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-section__bg .hero-img,.hero-section__bg ui-image{width:100%;height:100%;object-fit:cover}.hero-section__bg:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,#0003,#0009)}.text,.btn-link{font-size:1.3rem}@media(max-width:768px){.text,.btn-link{font-size:1.1rem}}.hero-section--text{align-items:center;justify-items:center;align-content:center}.hero-section--text .hero-section__content{grid-row:1/-1}.hero-section--text .title{font-family:var(--font-title-home);font-weight:200;font-size:4rem;line-height:.85;display:flex;flex-direction:column;align-items:center}@media(max-width:768px){.hero-section--text .title{font-size:3rem}}.hero-section--text .title .highlight-text{font-size:11.25rem;cursor:help;position:relative;z-index:2}@media(max-width:768px){.hero-section--text .title .highlight-text{font-size:8.25rem}}.hero-section--text .title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media(max-width:768px){.hero-section--text .title .highlight-text .wave-wrapper{top:90%}}.hero-section--text .title .highlight-text .wave{position:absolute;background-image:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 27.6 8.4\" style=\"enable-background:new 0 0 27.6 8.4;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;}%0A<\\/style>%0A<path class=\"st0\" d=\"M0,1c2.7,0,5.2,1.2,6.9,3.2s4.2,3.2,6.9,3.2c2.7,0,5.2-1.2,6.9-3.2S24.9,1,27.6,1\"/>%0A</svg>%0A');background-repeat:repeat-x;top:-1.2rem;opacity:.5;width:100%;height:50%}@media(max-width:768px){.hero-section--text .title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.hero-section--text .title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}.hero-section{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:100vh}.hero-section--image{align-items:end;justify-items:center}.hero-section--image .hero-section__content{grid-row:2;max-width:60rem;padding-bottom:5rem}.hero-section--image .title{font-family:var(--font-base);font-weight:700;font-size:2.5rem;line-height:1.2;color:#fff}@media(max-width:768px){.hero-section--image .title{font-size:2rem}}.hero-section--image .text{font-size:1rem;opacity:.85;color:#fff}.hero-section--image .btn-group--center{display:none}.hero-section--image .hero-section__bg img,.hero-section--image .hero-section__bg ui-image{filter:scale(1.05);transition:transform 6s ease}.hero-section--image .hero-section:hover .hero-img,.hero-section--image .hero-section:hover ui-image{transform:scale(1.1)}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}@keyframes hero-content-fall{0%{opacity:0;transform:translateY(-6rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hero-section__content>*{animation:none;opacity:1;transform:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [{
@@ -268,7 +274,14 @@ var SectionIntroComponent = class SectionIntroComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -310,6 +323,8 @@ var SplitPreviewerComponent = class SplitPreviewerComponent {
 	items;
 	imageDefault;
 	direction = "right";
+	highlightColor = "var(--content-highlight)";
+	highlightThickness = 30;
 	activeImage = signal(void 0, ...ngDevMode ? [{ debugName: "activeImage" }] : /* istanbul ignore next */ []);
 	get count() {
 		return this.items?.length || 0;
@@ -347,12 +362,14 @@ var SplitPreviewerComponent = class SplitPreviewerComponent {
 			title: "title",
 			items: "items",
 			imageDefault: "imageDefault",
-			direction: "direction"
+			direction: "direction",
+			highlightColor: "highlightColor",
+			highlightThickness: "highlightThickness"
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n  scrollReveal\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                @for (tag of item.tags; track tag) {\n                  <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                }\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
-		styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);opacity:.8;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1rem;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border-radius:2px}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:1;transform:translateY(0)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:1}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"],
+		template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\" scrollReveal from=\"left\" duration=\"1.2s\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n          scrollReveal\n          from=\"left\"\n          duration=\"1.2s\"\n          [delay]=\"($index + 1) * 180\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                <div class=\"split-previewer__item-tags-inner\">\n                  @for (tag of item.tags; track tag) {\n                    <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
+		styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;gap:2rem;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0;color:var(--text-primary-60);transition:color .3s ease}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);color:var(--text-primary-60);transition:color .3s ease;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .45s ease,margin-top .45s ease,opacity .3s ease}.split-previewer__item-tags-inner{display:flex;flex-wrap:wrap;gap:1rem;min-height:0;overflow:hidden}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border:3px solid var(--tag-border)}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:1fr;margin-top:1rem;opacity:1}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary)!important}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:0fr;margin-top:0;opacity:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -375,7 +392,14 @@ var SplitPreviewerComponent = class SplitPreviewerComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "component",
@@ -412,8 +436,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n  scrollReveal\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                @for (tag of item.tags; track tag) {\n                  <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                }\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
-			styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);opacity:.8;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1rem;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border-radius:2px}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:1;transform:translateY(0)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:1}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"]
+			template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\" scrollReveal from=\"left\" duration=\"1.2s\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n          scrollReveal\n          from=\"left\"\n          duration=\"1.2s\"\n          [delay]=\"($index + 1) * 180\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                <div class=\"split-previewer__item-tags-inner\">\n                  @for (tag of item.tags; track tag) {\n                    <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
+			styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;gap:2rem;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0;color:var(--text-primary-60);transition:color .3s ease}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);color:var(--text-primary-60);transition:color .3s ease;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .45s ease,margin-top .45s ease,opacity .3s ease}.split-previewer__item-tags-inner{display:flex;flex-wrap:wrap;gap:1rem;min-height:0;overflow:hidden}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border:3px solid var(--tag-border)}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:1fr;margin-top:1rem;opacity:1}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary)!important}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:0fr;margin-top:0;opacity:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [{
@@ -427,7 +451,9 @@ i0.ɵɵngDeclareClassMetadata({
 		title: [{ type: Input }],
 		items: [{ type: Input }],
 		imageDefault: [{ type: Input }],
-		direction: [{ type: Input }]
+		direction: [{ type: Input }],
+		highlightColor: [{ type: Input }],
+		highlightThickness: [{ type: Input }]
 	}
 });
 var ContactMinimalComponent = class ContactMinimalComponent {
@@ -436,6 +462,8 @@ var ContactMinimalComponent = class ContactMinimalComponent {
 	contacts;
 	socials;
 	img;
+	highlightColor = "var(--content-highlight)";
+	highlightThickness = 30;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -455,11 +483,13 @@ var ContactMinimalComponent = class ContactMinimalComponent {
 			socialsTitle: "socialsTitle",
 			contacts: "contacts",
 			socials: "socials",
-			img: "img"
+			img: "img",
+			highlightColor: "highlightColor",
+			highlightThickness: "highlightThickness"
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n",
+		template: "<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n",
 		styles: [".contact-minimal__content{display:grid;grid-auto-flow:column}.contact-minimal__content--left .btn{justify-content:start;font-size:1.1rem}.contact-minimal__content--right{justify-self:end}.contact-minimal__content--right .btn-group{align-items:end}.contact-minimal__content--right .btn{justify-content:end;font-size:1.1rem}.contact-minimal__content--media{justify-self:center}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{transform:rotate(45deg);width:50rem}@media(max-width:768px){.contact-minimal__content--media{top:16rem}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{width:15rem;height:auto}}.contact-minimal .btn-group{display:flex;flex-direction:column;margin-top:1rem;gap:0}\n"],
 		dependencies: [
 			{
@@ -483,7 +513,14 @@ var ContactMinimalComponent = class ContactMinimalComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "component",
@@ -520,7 +557,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n",
+			template: "<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n",
 			styles: [".contact-minimal__content{display:grid;grid-auto-flow:column}.contact-minimal__content--left .btn{justify-content:start;font-size:1.1rem}.contact-minimal__content--right{justify-self:end}.contact-minimal__content--right .btn-group{align-items:end}.contact-minimal__content--right .btn{justify-content:end;font-size:1.1rem}.contact-minimal__content--media{justify-self:center}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{transform:rotate(45deg);width:50rem}@media(max-width:768px){.contact-minimal__content--media{top:16rem}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{width:15rem;height:auto}}.contact-minimal .btn-group{display:flex;flex-direction:column;margin-top:1rem;gap:0}\n"]
 		}]
 	}],
@@ -529,7 +566,9 @@ i0.ɵɵngDeclareClassMetadata({
 		socialsTitle: [{ type: Input }],
 		contacts: [{ type: Input }],
 		socials: [{ type: Input }],
-		img: [{ type: Input }]
+		img: [{ type: Input }],
+		highlightColor: [{ type: Input }],
+		highlightThickness: [{ type: Input }]
 	}
 });
 var MediaSplitComponent = class MediaSplitComponent {
@@ -593,24 +632,32 @@ var MediaSplitComponent = class MediaSplitComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
-		styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"],
-		dependencies: [{
-			kind: "ngmodule",
-			type: CommonModule
-		}, {
-			kind: "component",
-			type: UiImageComponent,
-			selector: "ui-image",
-			inputs: [
-				"publicId",
-				"cloudName",
-				"transformations",
-				"eager",
-				"width",
-				"height"
-			]
-		}],
+		template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" scrollTextReveal [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
+		styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.media-split__info .text{color:var(--text-primary-60)}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "component",
+				type: UiImageComponent,
+				selector: "ui-image",
+				inputs: [
+					"publicId",
+					"cloudName",
+					"transformations",
+					"eager",
+					"width",
+					"height"
+				]
+			},
+			{
+				kind: "directive",
+				type: ScrollTextRevealDirective,
+				selector: "[scrollTextReveal]"
+			}
+		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -624,11 +671,15 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lib-media-split",
 			standalone: true,
-			imports: [CommonModule, UiImageComponent],
+			imports: [
+				CommonModule,
+				UiImageComponent,
+				ScrollTextRevealDirective
+			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
-			styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"]
+			template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" scrollTextReveal [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
+			styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.media-split__info .text{color:var(--text-primary-60)}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"]
 		}]
 	}],
 	ctorParameters: () => [{
@@ -669,11 +720,23 @@ var StackedRowsComponent = class StackedRowsComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
-		styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-secondary)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary);padding-block:0rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin-bottom:3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-secondary);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-secondary)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"],
+		template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\">\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\" scrollReveal from=\"bottom\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\" scrollReveal from=\"bottom\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-inverse)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary-20);padding-block:0rem}.stacked-rows__intro .subtitle{font-size:5rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin:4rem 0 3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary-20);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-inverse);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-inverse)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"],
 		dependencies: [{
 			kind: "ngmodule",
 			type: CommonModule
+		}, {
+			kind: "directive",
+			type: ScrollRevealDirective,
+			selector: "[scrollReveal]",
+			inputs: [
+				"distance",
+				"duration",
+				"from",
+				"delay",
+				"threshold",
+				"rootMargin"
+			]
 		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -687,11 +750,11 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "lib-stacked-rows",
-			imports: [CommonModule],
+			imports: [CommonModule, ScrollRevealDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
-			styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-secondary)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary);padding-block:0rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin-bottom:3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-secondary);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-secondary)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"]
+			template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\">\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\" scrollReveal from=\"bottom\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\" scrollReveal from=\"bottom\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-inverse)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary-20);padding-block:0rem}.stacked-rows__intro .subtitle{font-size:5rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin:4rem 0 3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary-20);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-inverse);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-inverse)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -885,8 +948,8 @@ var SplitShowcaseComponent = class SplitShowcaseComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div\n  class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\"\n  scrollReveal\n>\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2 class=\"split-showcase__metas--title\">{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div class=\"split-showcase__metas--item\">\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3 class=\"split-showcase__content--subtitle\">{{ subtitle }}</h3>\n        <p class=\"split-showcase__content--description\">{{ description }}</p>\n    </div>\n</div>",
-		styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"],
+		template: "<div class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2\n            class=\"split-showcase__metas--title\"\n            scrollReveal\n            from=\"left\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\" scrollReveal from=\"left\" distance=\"48px\" duration=\"0.7s\" [delay]=\"200\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div\n                    class=\"split-showcase__metas--item\"\n                    scrollReveal\n                    from=\"left\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"200 + $index * 110\"\n                >\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3\n            class=\"split-showcase__content--subtitle\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ subtitle }}</h3>\n        <p\n            class=\"split-showcase__content--description\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"200\"\n        >{{ description }}</p>\n    </div>\n</div>",
+		styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700;font-family:var(--font-titles);background:var(--color-secondary);border:4px solid var(--border-primary);padding:1rem;width:fit-content}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -896,7 +959,14 @@ var SplitShowcaseComponent = class SplitShowcaseComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "directive",
@@ -936,8 +1006,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div\n  class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\"\n  scrollReveal\n>\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2 class=\"split-showcase__metas--title\">{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div class=\"split-showcase__metas--item\">\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3 class=\"split-showcase__content--subtitle\">{{ subtitle }}</h3>\n        <p class=\"split-showcase__content--description\">{{ description }}</p>\n    </div>\n</div>",
-			styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"]
+			template: "<div class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2\n            class=\"split-showcase__metas--title\"\n            scrollReveal\n            from=\"left\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\" scrollReveal from=\"left\" distance=\"48px\" duration=\"0.7s\" [delay]=\"200\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div\n                    class=\"split-showcase__metas--item\"\n                    scrollReveal\n                    from=\"left\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"200 + $index * 110\"\n                >\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3\n            class=\"split-showcase__content--subtitle\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ subtitle }}</h3>\n        <p\n            class=\"split-showcase__content--description\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"200\"\n        >{{ description }}</p>\n    </div>\n</div>",
+			styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700;font-family:var(--font-titles);background:var(--color-secondary);border:4px solid var(--border-primary);padding:1rem;width:fit-content}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -971,7 +1041,7 @@ var AsymmetricMediaComponent = class AsymmetricMediaComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div \n    class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\" \n    scrollReveal\n>\n    @if(media && media.length > 0) {\n        <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n            @if(direction === 'left') {\n                <div class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\">\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\">\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n            @if(direction === 'right') {\n                <div class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\">\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\">\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n        </div>\n    }\n</div>\n",
+		template: "<div class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\">\n    @if(media && media.length > 0) {\n        <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n            @if(direction === 'left') {\n                <div\n                    class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\"\n                    scrollReveal\n                    from=\"bottom\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div\n                    class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\"\n                    scrollReveal\n                    from=\"top\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n            @if(direction === 'right') {\n                <div\n                    class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\"\n                    scrollReveal\n                    from=\"bottom\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div\n                    class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\"\n                    scrollReveal\n                    from=\"top\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n        </div>\n    }\n</div>\n",
 		styles: [".asymmetric-media{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.asymmetric-media__items{align-items:center}\n"],
 		dependencies: [
 			{
@@ -995,7 +1065,14 @@ var AsymmetricMediaComponent = class AsymmetricMediaComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -1017,7 +1094,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div \n    class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\" \n    scrollReveal\n>\n    @if(media && media.length > 0) {\n        <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n            @if(direction === 'left') {\n                <div class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\">\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\">\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n            @if(direction === 'right') {\n                <div class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\">\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\">\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n        </div>\n    }\n</div>\n",
+			template: "<div class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\">\n    @if(media && media.length > 0) {\n        <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n            @if(direction === 'left') {\n                <div\n                    class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\"\n                    scrollReveal\n                    from=\"bottom\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div\n                    class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\"\n                    scrollReveal\n                    from=\"top\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n            @if(direction === 'right') {\n                <div\n                    class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\"\n                    scrollReveal\n                    from=\"bottom\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[0]!.publicId) {\n                        <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n                <div\n                    class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\"\n                    scrollReveal\n                    from=\"top\"\n                    distance=\"64px\"\n                    duration=\"0.8s\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -25% 0px\"\n                >\n                    @if (media[1]!.publicId) {\n                        <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n                    } @else {\n                        <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n                    }\n                </div>\n            }\n        </div>\n    }\n</div>\n",
 			styles: [".asymmetric-media{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.asymmetric-media__items{align-items:center}\n"]
 		}]
 	}],
@@ -1053,7 +1130,7 @@ var MediaIntroComponent = class MediaIntroComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n",
+		template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\"\n                    scrollReveal\n                    [from]=\"direction === 'left' ? 'left' : 'right'\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"0\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -20% 0px\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                   scrollReveal\n                   [from]=\"direction === 'left' ? 'right' : 'left'\"\n                   distance=\"48px\"\n                   duration=\"0.7s\"\n                   [delay]=\"120\"\n                   [threshold]=\"0\"\n                   rootMargin=\"0px 0px -20% 0px\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div\n            class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"64px\"\n            duration=\"0.8s\"\n            [delay]=\"180\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -20% 0px\"\n        >\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n",
 		styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"],
 		dependencies: [
 			{
@@ -1064,7 +1141,14 @@ var MediaIntroComponent = class MediaIntroComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "component",
@@ -1099,7 +1183,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n",
+			template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\"\n                    scrollReveal\n                    [from]=\"direction === 'left' ? 'left' : 'right'\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"0\"\n                    [threshold]=\"0\"\n                    rootMargin=\"0px 0px -20% 0px\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                   scrollReveal\n                   [from]=\"direction === 'left' ? 'right' : 'left'\"\n                   distance=\"48px\"\n                   duration=\"0.7s\"\n                   [delay]=\"120\"\n                   [threshold]=\"0\"\n                   rootMargin=\"0px 0px -20% 0px\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div\n            class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"64px\"\n            duration=\"0.8s\"\n            [delay]=\"180\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -20% 0px\"\n        >\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n",
 			styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"]
 		}]
 	}],
@@ -1137,7 +1221,7 @@ var ColumnsMediaStackedComponent = class ColumnsMediaStackedComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"columns-media-stacked main-grid col-span-full\" scrollReveal>\n    <div class=\"columns-media-stacked__content main-grid col-span-full\">\n        @if(leftColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-1]=\"direction === 'left'\"\n                [class.md:col-start-5]=\"direction === 'right'\"\n                [innerHTML]=\"leftColumn\"\n            >   \n            </p>\n        }\n        @if(rightColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-5]=\"direction === 'left'\"\n                [class.md:col-start-9]=\"direction === 'right'\"\n                [innerHTML]=\"rightColumn\"\n            >   \n            </p>\n        }\n    </div>\n    @if(image) {\n        <div \n            class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n            [class.md:col-start-1]=\"direction === 'left'\"\n            [class.md:col-start-3]=\"direction === 'right'\"\n        >\n             @if (image.publicId) {\n                <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n             } @else {\n                <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n             }\n        </div>\n    }\n</div>\n",
+		template: "<div class=\"columns-media-stacked main-grid col-span-full\">\n    <div class=\"columns-media-stacked__content main-grid col-span-full\">\n        @if(leftColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-1]=\"direction === 'left'\"\n                [class.md:col-start-5]=\"direction === 'right'\"\n                [innerHTML]=\"leftColumn\"\n                scrollReveal\n                from=\"left\"\n                distance=\"48px\"\n                duration=\"0.7s\"\n                [delay]=\"0\"\n                [threshold]=\"0\"\n                rootMargin=\"0px 0px -20% 0px\"\n            >   \n            </p>\n        }\n        @if(rightColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-5]=\"direction === 'left'\"\n                [class.md:col-start-9]=\"direction === 'right'\"\n                [innerHTML]=\"rightColumn\"\n                scrollReveal\n                from=\"right\"\n                distance=\"48px\"\n                duration=\"0.7s\"\n                [delay]=\"120\"\n                [threshold]=\"0\"\n                rootMargin=\"0px 0px -20% 0px\"\n            >   \n            </p>\n        }\n    </div>\n    @if(image) {\n        <div \n            class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n            [class.md:col-start-1]=\"direction === 'left'\"\n            [class.md:col-start-3]=\"direction === 'right'\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"64px\"\n            duration=\"0.8s\"\n            [delay]=\"180\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -20% 0px\"\n        >\n             @if (image.publicId) {\n                <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n             } @else {\n                <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n             }\n        </div>\n    }\n</div>\n",
 		styles: [""],
 		dependencies: [
 			{
@@ -1148,7 +1232,14 @@ var ColumnsMediaStackedComponent = class ColumnsMediaStackedComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "component",
@@ -1183,7 +1274,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"columns-media-stacked main-grid col-span-full\" scrollReveal>\n    <div class=\"columns-media-stacked__content main-grid col-span-full\">\n        @if(leftColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-1]=\"direction === 'left'\"\n                [class.md:col-start-5]=\"direction === 'right'\"\n                [innerHTML]=\"leftColumn\"\n            >   \n            </p>\n        }\n        @if(rightColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-5]=\"direction === 'left'\"\n                [class.md:col-start-9]=\"direction === 'right'\"\n                [innerHTML]=\"rightColumn\"\n            >   \n            </p>\n        }\n    </div>\n    @if(image) {\n        <div \n            class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n            [class.md:col-start-1]=\"direction === 'left'\"\n            [class.md:col-start-3]=\"direction === 'right'\"\n        >\n             @if (image.publicId) {\n                <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n             } @else {\n                <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n             }\n        </div>\n    }\n</div>\n"
+			template: "<div class=\"columns-media-stacked main-grid col-span-full\">\n    <div class=\"columns-media-stacked__content main-grid col-span-full\">\n        @if(leftColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-1]=\"direction === 'left'\"\n                [class.md:col-start-5]=\"direction === 'right'\"\n                [innerHTML]=\"leftColumn\"\n                scrollReveal\n                from=\"left\"\n                distance=\"48px\"\n                duration=\"0.7s\"\n                [delay]=\"0\"\n                [threshold]=\"0\"\n                rootMargin=\"0px 0px -20% 0px\"\n            >   \n            </p>\n        }\n        @if(rightColumn) {\n            <p \n                class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n                [class.md:col-start-5]=\"direction === 'left'\"\n                [class.md:col-start-9]=\"direction === 'right'\"\n                [innerHTML]=\"rightColumn\"\n                scrollReveal\n                from=\"right\"\n                distance=\"48px\"\n                duration=\"0.7s\"\n                [delay]=\"120\"\n                [threshold]=\"0\"\n                rootMargin=\"0px 0px -20% 0px\"\n            >   \n            </p>\n        }\n    </div>\n    @if(image) {\n        <div \n            class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n            [class.md:col-start-1]=\"direction === 'left'\"\n            [class.md:col-start-3]=\"direction === 'right'\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"64px\"\n            duration=\"0.8s\"\n            [delay]=\"180\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -20% 0px\"\n        >\n             @if (image.publicId) {\n                <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n             } @else {\n                <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n             }\n        </div>\n    }\n</div>\n"
 		}]
 	}],
 	propDecorators: {
@@ -1230,7 +1321,7 @@ var MosaicGridComponent = class MosaicGridComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"mosaic-grid main-grid\" scrollReveal>\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
+		template: "<div class=\"mosaic-grid main-grid\">\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n      scrollReveal\n      from=\"right\"\n      distance=\"48px\"\n      duration=\"0.7s\"\n      [delay]=\"0\"\n      [threshold]=\"0\"\n      rootMargin=\"0px 0px -20% 0px\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            ></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
 		styles: ["ui-image{object-fit:cover}ui-image.image-half-height{height:50%!important}\n"],
 		dependencies: [
 			{
@@ -1254,7 +1345,14 @@ var MosaicGridComponent = class MosaicGridComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -1276,7 +1374,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"mosaic-grid main-grid\" scrollReveal>\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
+			template: "<div class=\"mosaic-grid main-grid\">\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n      scrollReveal\n      from=\"right\"\n      distance=\"48px\"\n      duration=\"0.7s\"\n      [delay]=\"0\"\n      [threshold]=\"0\"\n      rootMargin=\"0px 0px -20% 0px\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            ></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
 			styles: ["ui-image{object-fit:cover}ui-image.image-half-height{height:50%!important}\n"]
 		}]
 	}],