@import "https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600;800&display=swap";

/* base.css */
*, *:before, *:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  line-height: 1.5;
}

ul, ol {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

hr {
  color: inherit;
  height: 0;
}

abbr[title] {
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

:root {
  --xxs: clamp(.25rem, 1vw, .5rem);
  --xs: clamp(.5rem, 1vw, .75rem);
  --sm: clamp(.75rem, 1.5vw, 1rem);
  --md: clamp(1rem, 2vw, 1.5rem);
  --lg: clamp(1.5rem, 3vw, 2rem);
  --xl: clamp(2rem, 4vw, 3rem);
  --xxl: clamp(2.5rem, 5vw, 4rem);
}

.y-gaps-xxs, .y-gaps-xs, .y-gaps-sm, .y-gaps-md, .y-gaps-lg, .y-gaps-xl, .y-gaps-xxl {
  display: flex;
  flex-direction: column;
}

.y-gaps-xxs {
  gap: var(--xxs);
}

.y-gaps-xs {
  gap: var(--xs);
}

.y-gaps-sm {
  gap: var(--sm);
}

.y-gaps-md {
  gap: var(--md);
}

.y-gaps-lg {
  gap: var(--lg);
}

.y-gaps-xl {
  gap: var(--xl);
}

.y-gaps-xxl {
  gap: var(--xxl);
}

.fs-xxs {
  font-size: var(--xxs);
}

.fs-xs {
  font-size: var(--xs);
}

.fs-sm {
  font-size: var(--sm);
}

.fs-md {
  font-size: var(--md);
}

.fs-lg {
  font-size: var(--lg);
}

.fs-xl {
  font-size: var(--xl);
}

.fs-xxl {
  font-size: var(--xxl);
}

.lh-xs {
  line-height: .8;
}

.lh-sm {
  line-height: 1;
}

.lh-md {
  line-height: 1.2;
}

.lh-lg {
  line-height: 1.4;
}

.lh-xl {
  line-height: 1.6;
}

.lh-xxl {
  line-height: 1.8;
}

.hi {
  color: var(--color-primary);
}

.center {
  text-align: center;
}

.bold {
  font-weight: 800;
}

.px-xxs {
  padding-left: var(--xxs);
  padding-right: var(--xxs);
}

.px-xs {
  padding-left: var(--xs);
  padding-right: var(--xs);
}

.px-sm {
  padding-left: var(--sm);
  padding-right: var(--sm);
}

.px-md {
  padding-left: var(--md);
  padding-right: var(--md);
}

.px-lg {
  padding-left: var(--lg);
  padding-right: var(--lg);
}

.px-xl {
  padding-left: var(--xl);
  padding-right: var(--xl);
}

.px-xxl {
  padding-left: var(--xxl);
  padding-right: var(--xxl);
}

.py-xxs {
  padding-top: var(--xxs);
  padding-bottom: var(--xxs);
}

.py-xs {
  padding-top: var(--xs);
  padding-bottom: var(--xs);
}

.py-sm {
  padding-top: var(--sm);
  padding-bottom: var(--sm);
}

.py-md {
  padding-top: var(--md);
  padding-bottom: var(--md);
}

.py-lg {
  padding-top: var(--lg);
  padding-bottom: var(--lg);
}

.py-xl {
  padding-top: var(--xl);
  padding-bottom: var(--xl);
}

.py-xxl {
  padding-top: var(--xxl);
  padding-bottom: var(--xxl);
}

.pt-xxs {
  padding-top: var(--xxs);
}

.pt-xs {
  padding-top: var(--xs);
}

.pt-sm {
  padding-top: var(--sm);
}

.pt-md {
  padding-top: var(--md);
}

.pt-lg {
  padding-top: var(--lg);
}

.pt-xl {
  padding-top: var(--xl);
}

.pt-xxl {
  padding-top: var(--xxl);
}

.pb-xxs {
  padding-bottom: var(--xxs);
}

.pb-xs {
  padding-bottom: var(--xs);
}

.pb-sm {
  padding-bottom: var(--sm);
}

.pb-md {
  padding-bottom: var(--md);
}

.pb-lg {
  padding-bottom: var(--lg);
}

.pb-xl {
  padding-bottom: var(--xl);
}

.pb-xxl {
  padding-bottom: var(--xxl);
}

.pl-xxs {
  padding-left: var(--xxs);
}

.pl-xs {
  padding-left: var(--xs);
}

.pl-sm {
  padding-left: var(--sm);
}

.pl-md {
  padding-left: var(--md);
}

.pl-lg {
  padding-left: var(--lg);
}

.pl-xl {
  padding-left: var(--xl);
}

.pl-xxl {
  padding-left: var(--xxl);
}

.pr-xxs {
  padding-right: var(--xxs);
}

.pr-xs {
  padding-right: var(--xs);
}

.pr-sm {
  padding-right: var(--sm);
}

.pr-md {
  padding-right: var(--md);
}

.pr-lg {
  padding-right: var(--lg);
}

.pr-xl {
  padding-right: var(--xl);
}

.pr-xxl {
  padding-right: var(--xxl);
}

/* styles.css */
:root {
  --color-primary: #f5f4e4;
  --pop: #1a5f3c;
}

html, body {
  position: fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--color-primary);
  background-color: #000;
  height: 100svh;
  font-family: Libre Franklin, Helvetica, sans-serif;
  line-height: 1.5;
  inset: 0;
}

.pop {
  color: var(--pop);
}

a {
  text-decoration: none;
}

#logo {
  position: fixed;
  display: flex;
  z-index: 1000;
  background: linear-gradient(#000c 0%, #0006 50%, #0000 100%);
  justify-content: center;
  align-items:  center;
  height: 260px;
  top: 0;
  left: 0;
  right: 0;
}

#logo svg {
  display: block;
}

.container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  width: 100vw;
  height: 100svh;
}

.slide {
  scroll-snap-align: start;
  display: flex;
  padding: var(--md);
  padding-bottom: var(--xl);
  text-align: center;
  z-index: 100;
  position: relative;
  justify-content: center;
  align-items:  end;
  width: 100vw;
  height: 100svh;
}

#before, #after {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100svh;
  inset: 0;
}

#before {
  opacity: 1;
  background-image: url("/hero-before-7nw6vp7e.webp");
}

#after {
  opacity: 0;
  z-index: 1;
  background-image: url("/hero-after-0y2rsk4d.webp");
}

.up-arrow {
  display: flex;
  justify-content: center;
  align-items:  center;
}

.up-arrow svg {
  display: block;
}