@layer base {
  :root {
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }
  *,
  ::before,
  ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
  }
  /* Prevent text-shadows making highlighted text unreadable */
  ::selection {
    background-color: highlight;
    color: highlightText;
    text-shadow: none !important;
  }
  html {
    width: 100vw;
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
}
@supports (animation-timeline: view()) {
  .site-header::after {
    background-image: linear-gradient(to right, transparent, black);
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 2);
    right: 0;
    width: 33%;
    height: calc(var(--spacing) * 1.5 + 2px);
    pointer-events: none;
  }
}
/* Hides elements visually, leaves accessible to screenreaders */
.sr-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}
@media (min-width: 64rem) {
  h1.sr-only {
    --font-size-min: 14;
    --font-size-max: 16;
    all: unset;
    color: var(--color-text);
    font-family: var(--font-family-default);
    font-size: var(--font-size);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
  }
}
@keyframes dotAppear {
  0% {
    background-color: transparent;
  }
  90% {
    background-color: transparent;
  }
  100% {
    background-color: #00BFD5;
  }
}
@keyframes dotMove {
  0% {
    background-color: transparent;
  }
  2% {
    background-color: #00BFD5;
  }
  98% {
    background-color: #00BFD5;
  }
  100% {
    background-color: transparent;
  }
}
#slider-pagination {
  --indicator-number: 5;
  --indicator-top: 50dvb;
  --indicator-right: var(--spacing);
  --indicator-size: 1em;
  --indicator-padding: calc((var(--min-tap-size) - var(--indicator-size)) / 2);
  --indicator-clipped-margins: var(--indicator-padding) * 2;
  --indicator-total-size: calc(var(--indicator-size) + var(--indicator-padding) * 2);
  --indicator-gap: var(--min-tap-space);
  --indicator-total-gap: calc(var(--indicator-gap) * (var(--indicator-number) - 1));
  --indicator-total-height: calc(var(--indicator-total-size) * var(--indicator-number) + var(--indicator-total-gap) - var(--indicator-clipped-margins));
  /* Make indicators smaller when mouse is being used */
  position: fixed;
  z-index: 100;
  right: 3.7rem;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (pointer: fine) {
  #slider-pagination {
    --indicator-padding: 0.25em;
  }
}
#slider-pagination .controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  position: relative;
}
#slider-pagination .controls .circle {
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #FFFFFF80;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#slider-pagination .controls .circle.active {
  border-color: #007B9F;
  cursor: default;
}
#slider-pagination .controls::before {
  border-radius: 50%;
  content: '';
  color: #00BFD5;
  background-color: currentColor;
  position: absolute;
  left: 50%;
  transform: translateX(50%);
  inset-inline: 0;
  width: 10px;
  height: 9px;
  z-index: -1;
  margin-top: 6px;
}
@media (max-width: 500px) {
  #slider-pagination .controls .circle {
    width: 14px;
    height: 14px;
  }
  #slider-pagination .controls:before {
    width: 7px;
    height: 6px;
    margin-top: 4px;
  }
}
@media (max-width: 500px) {
  #slider-pagination {
    right: 1rem;
  }
}
#slider-pagination li,
#slider-pagination a {
  display: block;
}
#slider-pagination a {
  --color-link: var(--color-text);
  width: 20px;
  height: 20px;
}
#slider-pagination a::before {
  content: '';
  border-radius: 50%;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
}
@media (max-width: 500px) {
  #slider-pagination a {
    width: 14px;
    height: 14px;
  }
  #slider-pagination a:before {
    width: 7px;
    height: 7px;
  }
}
#slider-pagination li.active a:before {
  animation: dotAppear 0.3s linear;
  background-color: #00BFD5;
}
#slider-pagination ul:before {
  transition: transform 0.3s ease-in-out;
  animation: dotMove 0.3s linear;
  background-color: transparent;
  transform: translateY(calc(30px * var(--active-dot)));
}
@media (max-width: 500px) {
  #slider-pagination ul:before {
    transform: translateY(calc(24px * var(--active-dot)));
  }
}
#slider-pagination ul[data-slide-active="0"]:before {
  transform: translate(50%, 0);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="0"]:before {
    transform: translate(50%, 0);
  }
}
#slider-pagination ul[data-slide-active="1"]:before {
  transform: translate(50%, 30px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="1"]:before {
    transform: translate(50%, 24px);
  }
}
#slider-pagination ul[data-slide-active="2"]:before {
  transform: translate(50%, 60px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="2"]:before {
    transform: translate(50%, 48px);
  }
}
#slider-pagination ul[data-slide-active="3"]:before {
  transform: translate(50%, 90px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="3"]:before {
    transform: translate(50%, 72px);
  }
}
#slider-pagination ul[data-slide-active="4"]:before {
  transform: translate(50%, 120px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="4"]:before {
    transform: translate(50%, 96px);
  }
}
#slider-pagination ul[data-slide-active="5"]:before {
  transform: translate(50%, 150px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="5"]:before {
    transform: translate(50%, 120px);
  }
}
#slider-pagination ul[data-slide-active="6"]:before {
  transform: translate(50%, 180px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="6"]:before {
    transform: translate(50%, 144px);
  }
}
#slider-pagination ul[data-slide-active="7"]:before {
  transform: translate(50%, 210px);
  background-color: #00BFD5;
}
@media (max-width: 500px) {
  #slider-pagination ul[data-slide-active="7"]:before {
    transform: translate(50%, 168px);
  }
}
.safari #slider-pagination ul::before {
  margin-top: 5px;
}
@media (max-width: 500px) {
  .safari #slider-pagination ul::before {
    margin-top: 4px;
  }
}
@supports not (animation-timeline: scroll()) {
  nav {
    display: none;
  }
}
html {
  /* Create a snapping rule on the html element */
  scroll-snap-type: y mandatory;
  /* Create a timeline scope, so we can target any element on the page */
  timeline-scope: --section;
}
main {
  view-timeline: --main;
}
.slider > section {
  /* Creating a snapping rule on the section element */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Attach the timeline to the section element*/
  view-timeline: --section;
  /* Set each section to the full dynamic height of the viewport */
  height: 100vh;
}
.content {
  /* Fix the content, so it doesn't scroll with the section */
  overflow: hidden;
  /* Animate the content based on the section scrolling */
  animation: blink ease-in-out both;
  animation-timeline: --section;
}
@keyframes blink {
  0%,
  100% {
    filter: blur(var(--blur)) contrast(var(--contrast));
    opacity: 0;
    visibility: hidden;
  }
  50% {
    filter: blur(0) contrast(1);
    opacity: 1;
    visibility: visible;
  }
}
/*
  This is a bit of a hack to get the indicator to work because I'm lazy.
  We're translating the dot from the top to the bottom of its parent,
  using the browser scroll position as the animation timeline.
  It's not really matched up to the scrolling sections, only appears to be.
*/
.indicator::before {
  animation: indicate linear both;
  animation-timeline: --main;
  animation-range: contain;
}
/* And we're manually setting the colors because see: lazy comment above */
@keyframes indicate {
  0% {
    --color-indicator: var(--color-primary);
    transform: translateY(0);
  }
  25% {
    --color-indicator: var(--color-yellow);
  }
  50% {
    --color-indicator: var(--color-secondary);
  }
  75% {
    --color-indicator: var(--color-red);
  }
  100% {
    --color-indicator: var(--color-purple);
    transform: translateY(calc(var(--indicator-total-height) - var(--indicator-size)));
  }
}
@keyframes fade-scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body.horizontal-scroll .slider .content {
  animation: horizontal-scroll ease-in-out both;
  animation-timeline: --section;
}
body.backwards-scroll .slider .content {
  animation: backwards-scroll ease-in-out both;
  animation-timeline: --section;
}
body.zoom-scroll .slider .content {
  animation: ease-in-out both zoom-scroll;
  animation-timeline: --section;
}
body.zoom-scroll.safari .slider .item.active .content {
  animation: 0.7s ease-in-out both zoom-scroll-safari;
  animation-timeline: --section;
}
body.zoom-scroll.safari .slider .item .content {
  animation: 0.7s ease-in-out both undo-zoom-scroll-safari;
  animation-timeline: --section;
}
/* Alternative animations */
/* Very cool, try it */
@keyframes horizontal-scroll {
  0% {
    transform: translate3d(100%, 0%, 0);
  }
  50% {
    transform: none;
  }
  100% {
    transform: translate3d(-100%, 0%, 0);
  }
}
/* Befuddling, try it */
@keyframes backwards-scroll {
  0% {
    transform: translate3d(0%, -100%, 0);
  }
  50% {
    transform: none;
  }
  100% {
    transform: translate3d(0%, 100%, 0);
  }
}
/* WIP */
@keyframes zoom-scroll {
  0% {
    filter: blur(5rem);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
  }
  50% {
    filter: blur(0);
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  100% {
    filter: blur(3rem);
    transform: scale(1.5);
    opacity: 0;
    visibility: hidden;
  }
}
/* WIP */
@keyframes zoom-scroll-safari {
  0% {
    filter: blur(5rem);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    filter: blur(0);
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}
/* WIP */
@keyframes undo-zoom-scroll-safari {
  0% {
    filter: blur(0);
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  100% {
    filter: blur(5rem);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
  }
}
/*# sourceMappingURL=mainSlider.css.map */