/*
 * Homepage slideshow.
 *
 * Loaded on: front page
 * Enqueued by Stylchen\Frontend\Assets.
 */

.hero { position: relative; min-height: 100vh; overflow: hidden; color: #fff; text-align: left; isolation: isolate; background: #222; }
.hero::after { position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 70px 0 95px rgba(0,0,0,.18), inset -70px 0 95px rgba(0,0,0,.18); content: ""; }
.hero__transition-layer { position: absolute; z-index: 3; inset: 0; display: block; pointer-events: none; background-position: center calc(50% + var(--hero-parallax-offset, 0px)); background-size: cover; opacity: 0; transform: translate3d(-100%,0,0); }
.hero__transition-layer.is-covering-left, .hero__transition-layer.is-covering-right { opacity: 1; animation-duration: 3s; animation-timing-function: linear; animation-fill-mode: both; }
.hero__transition-layer.is-covering-left { animation-name: hero-dark-cover-left; }
.hero__transition-layer.is-covering-right { animation-name: hero-dark-cover-right; }
@keyframes hero-dark-cover-left { 0% { opacity: 1; transform: translate3d(-100%,0,0); } 50% { opacity: 1; transform: translate3d(0,0,0); } 100% { opacity: 1; transform: translate3d(100%,0,0); } }
@keyframes hero-dark-cover-right { 0% { opacity: 1; transform: translate3d(100%,0,0); } 50% { opacity: 1; transform: translate3d(0,0,0); } 100% { opacity: 1; transform: translate3d(-100%,0,0); } }
/* --slide-image / --slide-image-wide come from the slide's inline style
   (HeroSlider::backgroundVars); the overlay dims every slide equally. */
.hero__slide { background-image: linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)), var(--slide-image, none); }
@media (min-width: 1921px), (min-width: 1280px) and (min-resolution: 1.5dppx) {
  .hero__slide { background-image: linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)), var(--slide-image-wide, var(--slide-image, none)); }
}
.hero__slide { position: absolute; z-index: 0; inset: 0; display: block; overflow: hidden; background-position: center calc(50% + var(--hero-parallax-offset, 0px)); background-size: cover; opacity: 0; transform: translate3d(100%,0,0); transition: transform 1.5s linear, opacity 1.5s linear; }
.hero__slide.is-active { z-index: 1; opacity: 1; transform: translate3d(0,0,0); }
.hero__slide.is-leaving-left { z-index: 1; opacity: 1; transform: translate3d(-100%,0,0); }
.hero__slide.is-leaving-right { z-index: 1; opacity: 1; transform: translate3d(100%,0,0); }
.hero__slide.is-finished { opacity: 0 !important; transition: none !important; }
.hero__slide.is-entering-right, .hero__slide.is-entering-left { opacity: 1; transition: none; }
.hero__slide.is-entering-right { transform: translate3d(100%,0,0); }
.hero__slide.is-entering-left { transform: translate3d(-100%,0,0); }
.hero__slide-content { position: relative; z-index: 3; width: min(700px, calc(100% - 60px)); margin-left: max(30px, calc((100% - 1170px) / 2 + 80px)); padding-top: 330px; }
.hero__slide-content--left { padding-top: 280px; }
.hero__slide-content--center { margin-right: auto; margin-left: auto; text-align: center; }
.hero__slide-content--right { margin-right: max(30px, calc((100% - 1170px) / 2 - 120px)); margin-left: auto; padding-top: 380px; }
/* Slider Revolution wrapped every caption layer in a mask (data-mask_in), so the
   text wipes out from behind its own top edge rather than flying in over the
   photo, and transform_in carries no opacity - it never fades. Clipping only the
   top reproduces that while leaving descenders and focus rings intact. */
.hero__reveal { clip-path: inset(0 -100vw -100vw -100vw); }
.hero__reveal > * { transform: translate3d(0,-100%,0); will-change: transform; }
/* The previous site drove these with Slider Revolution: every caption layer
   shared one data-start and ran transform_in y:[-100%] s:1500 Power3.easeInOut,
   with no stagger between title, copy and button. Matched here. */
.hero__slide.is-active .hero__reveal > * { animation: hero-caption-in 1.5s cubic-bezier(.645,.045,.355,1) .45s both; }
.hero__slide.is-leaving-left .hero__reveal > *, .hero__slide.is-leaving-right .hero__reveal > * { animation: hero-caption-out 1s cubic-bezier(.645,.045,.355,1) both; }
@keyframes hero-caption-in { from { transform: translate3d(0,-100%,0); } to { transform: translate3d(0,0,0); } }
@keyframes hero-caption-out { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-100%,0); } }
.hero h1, .hero h2 { margin: 0 0 22px; color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 4.125rem; font-weight: 400; line-height: 1.06; }
.hero__slide-copy { max-width: 700px; margin: 0 0 30px; color: #fff; font-size: 1.75rem; line-height: 1.08; }
.hero__slide-copy p { margin: 0 0 10px; }
/* .hero__button once set padding/font here, but `.button` in style.css declares
   `padding: 10px 24px` and `font: inherit` at equal specificity and used to come
   later in the single stylesheet, so none of it ever applied. Split into files,
   this sheet now loads last, so the rule is left out to keep the button as it
   renders today. Restore it with a more specific selector if it was intended. */
.hero__arrow { position: absolute; top: 50%; z-index: 4; display: block; width: 70px; height: 70px; overflow: hidden; border: 0; border-radius: 50%; padding: 0; background: rgba(0,0,0,.48); color: #fff; font: 3.5rem/3.75rem "Helvetica Neue", Arial, sans-serif; font-weight: 300; visibility: hidden; opacity: 0; transform: translateY(-50%) scale(.86); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease; }
.hero:hover .hero__arrow, .hero__arrow:focus-visible { visibility: visible; opacity: .85; transform: translateY(-50%) scale(1); }
.hero__arrow:hover, .hero__arrow:focus { background: rgba(0,0,0,.72); opacity: 1; }
.hero__arrow--prev { left: 30px; }
.hero__arrow--next { right: 30px; }
.hero__arrow-preview { position: absolute; z-index: 0; inset: 0; border-radius: 50%; background-position: center; background-size: cover; opacity: 0; transform: scale(.18); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.hero__arrow-preview::after { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.28); content: ""; }
.hero__arrow:hover .hero__arrow-preview, .hero__arrow:focus-visible .hero__arrow-preview { opacity: 1; transform: scale(1); }
.hero__arrow > span:last-child { position: absolute; z-index: 1; inset: 0; display: block; font-size: 0; }
.hero__arrow > span:last-child::before { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: solid rgba(255,255,255,.95); border-width: 1px 0 0 1px; content: ""; }
.hero__arrow--prev > span:last-child::before { transform: translate(-35%, -50%) rotate(-45deg); }
.hero__arrow--next > span:last-child::before { transform: translate(-65%, -50%) rotate(135deg); }

@media (max-width: 900px) {
  .hero__slide-content { margin-left: max(30px, calc((100% - 900px) / 2 + 40px)); padding-top: 300px; }
  .hero__slide-content--left { padding-top: 260px; }
  .hero__slide-content--center { margin-right: auto; margin-left: auto; }
  .hero__slide-content--right { margin-right: 15px; margin-left: auto; padding-top: 350px; }
  .hero h1, .hero h2 { font-size: 2.875rem; line-height: 1.3; }
  .hero__slide-copy { font-size: 1.125rem; line-height: 1.67; }
}
@media (max-width: 560px) {
  .hero { min-height: 100svh; }
  .hero__slide-content { width: calc(100% - 60px); margin-left: 30px; padding-top: 190px; }
  .hero__slide-content--left { padding-top: 160px; }
  .hero__slide-content--center { margin-right: 30px; margin-left: 30px; }
  .hero__slide-content--right { margin-right: 30px; margin-left: 30px; padding-top: 220px; }
  .hero h1, .hero h2 { font-size: 2.25rem; line-height: 1.25; }
  .hero__slide-copy { font-size: 0.875rem; line-height: 1.8; }
  .hero__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__reveal { clip-path: none; }
  .hero__reveal > *, .hero__slide.is-active .hero__reveal > *, .hero__slide.is-leaving-left .hero__reveal > *, .hero__slide.is-leaving-right .hero__reveal > * { opacity: 1; transform: none; animation: none; will-change: auto; }
}