/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --scroll: 0;
  --track-percentage: 0%;
  --image-position: 50% center;
}

h4,
.h4 {
  font-size: 1.618rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(1.08406rem, 4.53394vw + 1rem, 1.618rem);
}

h3,
.h3 {
  font-size: 2.617924rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(1.75400908rem, 4.86391492vw + 1rem, 2.617924rem);
}

h2,
.h2 {
  font-size: 4.235801032rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(2.117900516rem, 6.117900516vw + 1rem, 4.235801032rem);
}

h1,
.h1 {
  font-size: 6.8535260698rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(3.4267630349rem, 7.4267630349vw + 1rem, 6.8535260698rem);
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
html {
  scroll-behavior: smooth;
}

body {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  background-color: #ececec;
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

body,
h1,
h2,
h3,
h4,
p,
a,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  overflow-wrap: break-word;
  hyphens: none;
}

p,
a,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  font-size: 1.125rem;
  font-size: clamp(1.125rem, 0.7206221198rem + 1.3824884793vw, 2.25rem);
}

h2 {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 0.9608294931rem + 1.8433179724vw, 3rem);
  text-wrap: balance;
  line-height: 1.3em;
}

a {
  color: #dd6b7e;
}

.main {
  max-width: 110.625rem;
  width: 90%;
  margin: 0 auto;
}

header {
  max-width: 110.625rem;
  width: 90%;
  margin: 0 auto;
  display: grid;
}
header > nav {
  display: grid;
  justify-items: start;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr;
  font-size: 2.25rem;
}
header > nav a {
  text-decoration: none;
  color: #010400;
  line-height: 3em;
}
header > nav > .brand {
  display: inline-grid;
  justify-content: start;
  align-items: center;
  grid-auto-flow: row;
  grid-gap: 1.125rem;
  grid-template-columns: auto auto;
}
header > nav > .brand > .logo {
  display: none;
  width: 3.375rem;
  padding: 1.125rem 0;
}
@media screen and (min-width: 48rem) {
  header > nav > .brand > .logo {
    display: grid;
    align-items: center;
  }
}
header > nav > .brand > .logo > svg {
  width: 100%;
  height: auto;
}
header > nav > .brand > .logo > svg #base > path {
  fill: #EBA9B4;
}
header > nav > .brand > .logo > svg #lighter > path {
  fill: oklch(from #EBA9B4 calc(l + 0.2) c calc(h + 20));
}
header > nav > .brand > .logo > svg #darker > path {
  fill: oklch(from #EBA9B4 calc(l - 0.1) c calc(h - 10));
}
header > nav > .brand > .name {
  white-space: nowrap;
  font-weight: 600;
}
@media screen and (min-width: 30rem) {
  header > nav > .brand > .name {
    font-weight: 500;
  }
}
header > nav > .links {
  width: 100%;
  display: inline-grid;
  justify-content: end;
  justify-items: end;
  align-items: center;
  grid-auto-flow: row;
  grid-template-columns: auto auto;
  white-space: nowrap;
  grid-column-gap: 1.5rem;
}
@media screen and (min-width: 30rem) {
  header > nav > .links {
    grid-column-gap: 2.25rem;
  }
}
header > nav > .links > a {
  color: #dd6b7e;
  font-size: 0.75rem;
  font-size: clamp(0.75rem, -0.5rem + 4.1666666667vw, 1.5rem);
}
@media screen and (min-width: 48rem) {
  header > nav > .links > a {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, -0.9827586207rem + 5.1724137931vw, 2.25rem);
  }
}

.full-screen-section {
  height: 100vh;
  text-align: center;
  padding: 1rem;
  position: relative;
}

.top-section {
  display: flex;
  text-align: start;
  padding: 0;
  position: sticky;
  top: 0;
  translate: 0 calc(-1% * ((max(var(--scroll), 25) - 25) * 100 / 75 + 0));
  --background-opacity: calc(100% - 1% * calc((min(var(--scroll), 30) - 0) * 100 / 30 + 0));
}
.top-section .left,
.top-section .right {
  flex-basis: 0;
  flex-grow: 1;
  padding: 1rem;
  padding-left: 3rem;
  opacity: var(--background-opacity);
}
.top-section .left {
  background-color: rgb(248, 250, 249, var(--background-opacity));
  position: relative;
}
.top-section .left > picture > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.top-section .right {
  background: linear-gradient(210.65deg, rgb(152, 157, 157, var(--background-opacity)) 0%, rgb(189, 194, 194, var(--background-opacity)) 100%);
}

.first-main-section {
  padding-top: 10vh;
  background: salmon;
}

.imgs > * {
  position: fixed;
  max-width: 1500px;
  width: 100%;
  bottom: 0;
  z-index: 10;
  translate: 0 100%;
  transition: translate 250ms ease-in-out;
}
.imgs > .show {
  translate: 0 0;
}
.imgs > .top-section-img {
  --value: min(var(--scroll), 30) * 50 / 30;
  width: calc(50% + 1% * var(--value));
  transform: translateY(calc(50% - 1% * var(--value)));
}

[data-img-to-show] {
  position: absolute;
  top: 20%;
}

@media (width <= 1000px) {
  .full-screen-section .top-section .right {
    display: none;
  }
  .full-screen-section .top-section .left {
    text-align: center;
  }
  .full-screen-section .imgs > .top-section-img {
    width: 100vw;
  }
}
section.hero {
  width: 100%;
  height: auto;
}
section.hero > .video-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 40%;
  margin-bottom: 100%;
}
@media screen and (min-width: 30rem) {
  section.hero > .video-wrapper {
    margin-top: 0;
  }
}
@media screen and (min-width: 48rem) {
  section.hero > .video-wrapper {
    margin-bottom: 60%;
  }
}
section.hero > .video-wrapper > h1 {
  display: grid;
  hyphens: none;
  text-transform: uppercase;
  font-weight: 600;
  /*
  calculated with this:
  https://royalfig.github.io/fluid-typography-calculator/
  */
  font-size: 2.625rem;
  font-size: clamp(2.625rem, 0.0357142857rem + 12.9464285714vw, 6.25rem);
}
section.hero > .video-wrapper > h1 > span {
  width: 100%;
}
section.hero > .video-wrapper > h1 > span:last-of-type {
  margin-top: 2.5em;
}
@media screen and (min-width: 48rem) {
  section.hero > .video-wrapper > h1 {
    font-size: 6.25rem;
    font-size: clamp(6.25rem, -0.15rem + 13.3333333333vw, 11.75rem);
  }
  section.hero > .video-wrapper > h1 > span:last-of-type {
    margin-top: initial;
  }
}
@media screen and (min-width: 89.25rem) {
  section.hero > .video-wrapper > h1 {
    font-size: 11.75rem;
    font-size: clamp(11.75rem, -0.7763157895rem + 14.0350877193vw, 14.75rem);
  }
}
section.hero > .video-wrapper > video {
  position: absolute;
  border-radius: clamp(0.875rem, 0.0673076923rem + 2.6923076923vw, 1.75rem);
  right: 0;
  bottom: 0;
  width: 50%;
  display: block;
  aspect-ratio: 16/9;
  /*
  For the video, original transform value is
  transform: translate3d(0%, -40%, 0) scale3d(.5, .5, 1);

  Target on scroll is
   translate3d(-50%, 177%, 0) scale3d(2, 2, 1)
  */
  --translateX: calc( -1% * calc((min(var(--scroll), 50) - 0) * 0 / 50 + 50));
  --translateY: calc(1% * calc(((min(max(((min(var(--scroll), 50) - 0) / 50), 0), 1) * (2 - min(max(((min(var(--scroll), 50) - 0) / 50), 0), 1))) * 320 + -70)));
  --translateScale: calc(calc((min(var(--scroll), 50) - 0) * 0.8 / 50 + 1.1));
  transform: translate3d(var(--translateX), var(--translateY), 0) scale3d(var(--translateScale), var(--translateScale), 1);
}
@media screen and (min-width: 48rem) {
  section.hero > .video-wrapper > video {
    --translateX: calc( -1% * calc((min(var(--scroll), 50) - 0) * 60 / 50 - 10));
    --translateY: calc(1% * calc(((min(max(((min(var(--scroll), 50) - 0) / 50), 0), 1) * (2 - min(max(((min(var(--scroll), 50) - 0) / 50), 0), 1))) * 183 + -33)));
    --translateScale: calc(calc((min(var(--scroll), 50) - 0) * 1.3 / 50 + 0.5));
    transform: translate3d(var(--translateX), var(--translateY), 0) scale3d(var(--translateScale), var(--translateScale), 1);
  }
}

.copy-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.25rem;
}
.copy-section h2 {
  grid-column: 1/-1;
}
.copy-section p {
  line-height: 1.5em;
}
.copy-section.padded {
  padding-top: 3em;
  padding-bottom: 3em;
}
.copy-section .right {
  grid-column: 1/-1;
}
@media screen and (min-width: 48rem) {
  .copy-section .right {
    grid-column: 3/span 3;
  }
}
.copy-section .two-fifths {
  grid-column: 1/-1;
}
@media screen and (min-width: 48rem) {
  .copy-section .two-fifths {
    grid-column: span 2;
  }
}
.copy-section .three-fifths {
  grid-column: 1/-1;
}
@media screen and (min-width: 48rem) {
  .copy-section .three-fifths {
    grid-column: span 3;
  }
}
.copy-section ul {
  list-style: disc;
  padding-left: 1em;
}
.copy-section ul > li {
  margin-bottom: 1em;
}

section.gallery {
  position: relative;
  height: 100vh;
  width: 100%;
  margin: 0rem;
  overflow: hidden;
  /*
    Remove this. It's the fading at the sides
    &::after {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: $color-white-cream;
      mask-image: radial-gradient(
        ellipse 80% 350% at 50%,
        transparent 57%,
        $color-white-cream 60%
      );
    }
  */
}
section.gallery ul, section.gallery li {
  list-style: none;
  margin: 0;
  padding: 0;
}
section.gallery #image-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 4.5rem;
  position: relative;
  left: 0;
  top: 20%;
  width: var(--image-track-width);
  user-select: none; /* -- Prevent image highlighting -- */
  will-change: transform; /* Optimize for performance */
}
section.gallery #image-track > li {
  background-image: linear-gradient(90deg, #ececec 0, #e4e4e4 20%, #dfdfdf 60%, #ececec);
  background-size: 180% 180%;
  animation: gradient-animation 3s ease-in-out infinite;
  min-height: 31.25rem;
  height: 60svh;
  width: 16.875svh;
  min-width: 8.75rem;
  overflow: hidden;
  border-radius: clamp(0.75rem, 0.4038461538rem + 1.1538461538vw, 1.125rem);
}
section.gallery #image-track > li:nth-child(odd) {
  transform: translateY(-12.5%);
}
section.gallery #image-track > li:nth-child(even) {
  transform: translateY(12.5%);
}
section.gallery #image-track > li > picture > img {
  max-width: initial;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: var(--image-position);
  will-change: object-position; /* Optimize for performance */
}

/* Define custom property for transition radius */
@property --radius {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -5%;
}
@keyframes mask-transition {
  to {
    --radius: 105%;
  }
}
section.slideshow {
  height: 100svh;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  align-items: center;
  margin-top: 4em;
  /* Slideshow styling */
  /* Slide styling */
  /* The currently visible slide */
  /* The slide that is fading in with the mask effect */
  /* Ensure slides that are not in focus are reset */
}
section.slideshow .slideshow-wrapper {
  background-image: linear-gradient(90deg, #ececec 0, #e4e4e4 20%, #dfdfdf 60%, #ececec);
  background-size: 180% 180%;
  animation: gradient-animation 3s ease-in-out infinite;
  position: relative;
  height: 90%;
  aspect-ratio: 16/9;
  max-width: 100%;
  overflow: hidden;
  border-radius: clamp(2.25rem, -0.2327586207rem + 5.1724137931vw, 3rem);
}
section.slideshow .slide {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle, #fff calc(var(--radius) - 5%), transparent calc(var(--radius) + 5%));
  background-size: cover;
  opacity: 0; /* Start hidden */
  transition: opacity 0.15s linear;
}
section.slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.slideshow .slide.active {
  z-index: 1;
  opacity: 1; /* Fully visible */
}
section.slideshow .slide.show {
  z-index: 2;
  opacity: 1; /* Fade in */
  animation: mask-transition 1s linear forwards;
}
section.slideshow .slide:not(.show):not(.active) {
  z-index: 0;
  opacity: 0; /* Hidden */
  --radius: -5%; /* Reset radius for non-active slides */
}

section.creds {
  margin-top: 4em;
}
section.creds .films {
  display: grid;
  gap: 1.5rem;
  margin-top: 1em;
  margin-bottom: 3em;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
@media screen and (min-width: 30rem) {
  section.creds .films {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  }
}
@media screen and (min-width: 48rem) {
  section.creds .films {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}
@media screen and (min-width: 62.5rem) {
  section.creds .films {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
section.creds .films > li {
  background-image: linear-gradient(90deg, #ececec 0, #e4e4e4 20%, #dfdfdf 60%, #ececec);
  background-size: 180% 180%;
  animation: gradient-animation 3s ease-in-out infinite;
  border-radius: clamp(0.5625rem, 0.0432692308rem + 1.7307692308vw, 1.125rem);
  overflow: hidden;
}
section.creds .films > li img {
  width: 100%;
  height: auto;
}
section.creds .partners {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 3em;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}
@media screen and (min-width: 30rem) {
  section.creds .partners {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}
@media screen and (min-width: 48rem) {
  section.creds .partners {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
@media screen and (min-width: 62.5rem) {
  section.creds .partners {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
section.creds .partners > li {
  border-radius: clamp(0.5625rem, 0.0432692308rem + 1.7307692308vw, 1.125rem);
  overflow: hidden;
  display: block;
  aspect-ratio: 1;
}
section.creds .partners > li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  place-items: center;
  padding: 10%;
}

.chat {
  padding-top: 5em;
  padding-bottom: 6.5em;
  background-color: #EBA9B4;
}
.chat .content {
  max-width: 110.625rem;
  width: 90%;
  margin: 0 auto;
}
.chat .content h2,
.chat .content p {
  opacity: 0.8;
}

footer {
  background-color: #1f363d;
  color: #ececec;
  padding-top: 5em;
  padding-bottom: 5em;
}
footer a {
  color: #dd6b7e;
}
footer .content {
  max-width: 110.625rem;
  width: 90%;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  grid-template-columns: 100%;
}
@media screen and (min-width: 48rem) {
  footer .content {
    grid-template-columns: 3fr 2fr;
  }
}
footer .content > .contact-info {
  display: grid;
  grid-template: "a a" "b c" "d d" "e e";
  grid-template-rows: auto auto auto 1fr;
  justify-content: space-between;
  align-content: start;
  height: 100%;
}
footer .content > .contact-info > .email {
  grid-column: 1/-1;
  padding-bottom: 1em;
}
footer .content > .contact-info > .email > a {
  font-size: 2.25rem;
  font-size: clamp(2.25rem, 0.8546511628rem + 4.6511627907vw, 6rem);
  text-decoration: none;
  line-height: 1em;
}
footer .content > .contact-info > .phone,
footer .content > .contact-info > .name,
footer .content > .contact-info > .imdb {
  grid-column: 1/span 2;
}
@media screen and (min-width: 62.5rem) {
  footer .content > .contact-info > .phone,
  footer .content > .contact-info > .name,
  footer .content > .contact-info > .imdb {
    grid-column: 1/-1;
  }
}
footer .content > .contact-info > .phone > a,
footer .content > .contact-info > .name,
footer .content > .contact-info > .imdb > a {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.1279069767rem + 1.2403100775vw, 2.5rem);
  text-decoration: none;
}
footer .content > .contact-info > .phone > a {
  text-decoration: none;
}
footer .content > .contact-info > .name {
  text-align: initial;
}
@media screen and (min-width: 62.5rem) {
  footer .content > .contact-info > .name {
    text-align: left;
  }
}
footer .content > .contact-info .imdb {
  grid-column: 1/-1;
  padding-top: 1em;
}
footer .content > .contact-info > address,
footer .content > .contact-info > address a {
  font-style: normal;
  font-size: 1.125rem;
  font-size: clamp(1.125rem, 0.9854651163rem + 0.4651162791vw, 1.5rem);
  text-decoration: none;
}
footer .content > .contact-info > address {
  align-self: end;
  padding-top: 2em;
}
footer .content > .photo {
  order: -1;
  max-width: 15.25rem;
}
@media screen and (min-width: 48rem) {
  footer .content > .photo {
    max-width: initial;
    order: initial;
  }
}
footer .content > .photo > .photoWrapper {
  border-radius: clamp(0.5625rem, 0.0432692308rem + 1.7307692308vw, 1.125rem);
  overflow: hidden;
}
footer .content > .photo > figcaption {
  font-size: 0.75rem;
}
footer .content > .photo img {
  width: 100%;
  height: auto;
}

/*# sourceMappingURL=app.css.map */