:root {
  color-scheme: light;
  --arrow-ink: #fff;
  --site-canvas-width: 1440px;
  --site-canvas-height: 900px;
}

html[data-site-mode="mobile"] {
  --site-canvas-width: 393px;
  --site-canvas-height: 852px;
}

@font-face {
  font-family: "Blush Heading";
  src: url("assets/brand/blush-heading.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: #a9cfe6;
  font-family: Georgia, "Times New Roman", serif;
}

.filter-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.scene {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.scene__canvas {
  position: relative;
  display: grid;
  width: var(--site-canvas-width);
  height: var(--site-canvas-height);
  overflow: hidden;
  container-type: size;
  place-items: center;
  zoom: var(--site-scale, 1);
}

.scene__video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene--opening::after,
.scene--clouds::after,
.scene--contact::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.scene--opening::after {
  background: linear-gradient(180deg, rgb(14 37 56 / 7%), transparent 45%, rgb(14 37 56 / 14%));
}

.scene--clouds::after {
  background: linear-gradient(180deg, rgb(40 84 115 / 8%), transparent 28%, rgb(40 84 115 / 10%));
}

.scene--contact::after {
  background: linear-gradient(135deg, rgb(232 246 255 / 12%), rgb(63 113 148 / 18%));
}

.cloud-content {
  display: grid;
  width: min(78cqw, 880px);
  justify-items: center;
  gap: clamp(14px, 2.5cqh, 24px);
}

.cloud-title {
  display: block;
  width: 100%;
  max-height: 67cqh;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgb(32 66 91 / 16%));
  animation: bianca-cloud-wave 8s ease-in-out infinite;
}

.scene--contact {
  padding: 0;
}

.scene--contact > .scene__canvas {
  padding: 0;
}

.bianca-cloud {
  position: absolute;
  display: block;
  top: calc(100% - 42px);
  left: 50%;
  width: min(22.95cqw, 303.75px);
  height: auto;
  filter: drop-shadow(0 18px 26px rgb(32 66 91 / 18%));
  transform: translateX(-50%);
  animation: bianca-cloud-wave 8s ease-in-out infinite;
}

.bianca-cloud__image {
  display: block;
  width: 100%;
  height: auto;
}

.bianca-cloud:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.contact-content {
  position: relative;
  top: -30px;
  z-index: 1;
  display: grid;
  width: min(77.5cqw, 534px);
  gap: 14px;
}

.contact-form-stack {
  position: relative;
  top: -50px;
  display: grid;
  gap: 14px;
  width: 100%;
}

.contact-heading {
  position: relative;
  top: -20px;
  width: 100%;
  margin: 0;
  color: #dcdcdc;
  font-family: "Blush Heading", "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 63px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 1px 2px 3px rgb(0 0 0 / 65%);
}

.form-field {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 20px;
  width: 100%;
}

.contact-form .form-field:nth-of-type(n + 3),
.contact-form .send-button,
.contact-form .form-status {
  grid-column: 1 / -1;
}

.form-field label {
  padding-bottom: 4px;
  color: #dcdcdc;
  font-family: "Blush Heading", "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  text-shadow: 1px 2px 3px rgb(0 0 0 / 65%);
}

.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  background: rgba(28, 28, 28, 0.75);
  color: #dcdcdc;
  font-family: "Blush Heading", "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
}

.form-field textarea {
  min-height: 100px;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: #fff;
  outline: 1px solid #fff;
  outline-offset: 2px;
}

.send-button {
  justify-self: start;
  width: 120px;
  min-height: 26px;
  padding: 2px 20px;
  border: 1px solid #dcdcdc;
  border-radius: 300px;
  background: #ffd500;
  box-shadow: none;
  color: #1c1c1c;
  cursor: pointer;
  font-family: "Blush Heading", "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  transition: background-color 120ms ease;
}

.send-button:hover {
  background: #ffd500;
  box-shadow: none;
  transform: none;
}

.send-button:focus-visible {
  outline: 3px solid #244c68;
  outline-offset: 4px;
}

.form-status {
  min-height: 1em;
  margin: 0;
  color: #dcdcdc;
  font-family: "Blush Heading", "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 12px;
  text-align: left;
}

.contact-copyright {
  position: absolute;
  z-index: 2;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  color: #ffd500;
  font-family: "Courier New", Courier, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: normal;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 1px 2px 3px rgb(0 0 0 / 65%);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.scene--contact .scene__canvas > .next-button--up {
  bottom: max(48px, calc(env(safe-area-inset-bottom) + 36px));
}

.pager-link {
  position: absolute;
  z-index: 5;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) - 20px);
  display: block;
  width: min(12.5cqw, 180px);
  line-height: 0;
}

.pager-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.pager-video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

body.is-scrolling main {
  filter: url(#vertical-gaussian-blur);
}

main {
  width: 100%;
  transition: filter 140ms linear;
}

.next-button {
  position: absolute;
  z-index: 1;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--arrow-ink);
  transform: translateX(-50%);
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.next-button:hover {
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -3px);
}

.cloud-content .next-button--inline {
  position: relative;
  top: -45px;
  bottom: auto;
  left: auto;
  transform: none;
}

.cloud-content .next-button--inline:hover {
  transform: translateY(-3px);
}

.next-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.next-button__arrow {
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.next-button--up .next-button__arrow {
  transform: rotate(225deg);
}

@keyframes bianca-cloud-wave {
  0%,
  100% {
    translate: 0 0;
    rotate: -1.5deg;
    scale: 1;
  }

  25% {
    translate: 12px -10px;
    rotate: 1deg;
    scale: 1.02;
  }

  50% {
    translate: -5px -26px;
    rotate: 2.5deg;
    scale: 1.05;
  }

  75% {
    translate: -16px -12px;
    rotate: -0.8deg;
    scale: 1.02;
  }
}

html[data-site-mode="mobile"] .pager-link {
  --pager-mobile-left: 68.3715%;
  --pager-mobile-top: 85.2465%;
  --pager-mobile-width: 31.1705%;
  right: auto;
  bottom: auto;
  left: var(--pager-mobile-left, auto);
  top: var(--pager-mobile-top, auto);
  width: var(--pager-mobile-width, min(12.5cqw, 70px));
}

html[data-site-mode="mobile"] .pager-debugger[hidden] {
  display: none;
}

html[data-site-mode="mobile"] .pager-debugger {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  display: grid;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 4px;
  background: rgb(20 35 46 / 96%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 38%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}

html[data-site-mode="mobile"] .pager-debugger__header {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  cursor: move;
  touch-action: none;
  user-select: none;
}

html[data-site-mode="mobile"] .pager-debugger__title {
  margin: 0;
  font: inherit;
  font-weight: 700;
}

html[data-site-mode="mobile"] .pager-debugger__close {
  display: grid;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 24px/1 sans-serif;
  place-items: center;
}

html[data-site-mode="mobile"] .pager-debugger__controls {
  display: grid;
  gap: 12px;
  padding: 12px;
}

html[data-site-mode="mobile"] .pager-debugger__control {
  display: grid;
  gap: 6px;
}

html[data-site-mode="mobile"] .pager-debugger__control span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

html[data-site-mode="mobile"] .pager-debugger__control output {
  font-variant-numeric: tabular-nums;
}

html[data-site-mode="mobile"] .pager-debugger__control input {
  width: 100%;
  margin: 0;
  accent-color: #ffd500;
}

html[data-site-mode="mobile"] .pager-debugger__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgb(255 255 255 / 20%);
}

html[data-site-mode="mobile"] .pager-debugger__status {
  margin: 0;
  font-size: 11px;
}

html[data-site-mode="mobile"] .pager-debugger__export {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #ffd500;
  border-radius: 3px;
  background: #ffd500;
  color: #1c1c1c;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
}

html[data-site-mode="mobile"] .contact-content {
  width: min(88cqw, 534px);
}

html[data-site-mode="mobile"] .cloud-content {
  width: min(88cqw, 540px);
  gap: 14px;
}

html[data-site-mode="mobile"] .cloud-title {
  max-height: 58cqh;
}

html[data-site-mode="mobile"] .next-button {
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 50px;
  height: 50px;
}

html[data-site-mode="mobile"] .scene--contact {
  align-items: start;
}

html[data-site-mode="mobile"] .scene--contact > .scene__canvas {
  display: block;
}

html[data-site-mode="mobile"] .bianca-cloud {
  width: clamp(251.8px, 65.6cqw, 337.2px);
}

html[data-site-mode="mobile"] .contact-content {
  top: 128px;
  margin-inline: auto;
}

html[data-site-mode="mobile"] .contact-form {
  padding: 0;
}

html[data-site-mode="mobile"] .contact-heading {
  font-size: clamp(40px, 14.36cqw, 56px);
}

html[data-site-mode="mobile"] .pager-video {
  aspect-ratio: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cloud-title {
    animation: none;
  }

  .bianca-cloud {
    animation: none;
  }

  .next-button {
    transition: none;
  }

  main {
    transition: none;
  }

  body.is-scrolling main {
    filter: none;
  }
}