/* ======================================================================
   INITIAL VALUES
   ====================================================================== */

:root {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='60'%3E%3Cpath d='M0 20 L5 0 10 20 5 30 Z' fill='black' opacity='0.3' transform='translate(2 2) rotate(-30 0 5)'/%3E%3Cpath d='M0 20 L5 0 10 20 5 30 Z' fill='whitesmoke' opacity='0.7' transform='rotate(-30 0 5)'/%3E%3C/svg%3E")
      60 60,
    default;
}

html {
  font-family: sans-serif;
  font-size: 16px;
}

/* ======================================================================
   LOADING SCREEN
   ====================================================================== */

.preload * {
  transition: none;
}

.loader {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #0c0c0c;
  align-items: center;
  justify-content: center;

  .message {
    width: 41rem;

    h2 {
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      letter-spacing: 0.15em;
      animation: type 2s steps(21, end);
    }
  }

  @media (max-width: 41rem) {
    .message {
      width: 100%;

      h2 {
        text-align: center;
        white-space: initial;
        word-wrap: break-word;
        letter-spacing: 0.15em;
        animation: none;
      }
    }
  }

  .loaded {
    display: none;
  }
}

/* The typing effect */
@keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 41rem;
  }
}

.needles {
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
  margin-bottom: 1rem;

  * {
    position: absolute;
    top: 50%;
    left: 50%;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='30'%3E%3Cpath d='M0 20 L5 0 10 20 5 30 Z' fill='whitesmoke' opacity='0.5'/%3E%3C/svg%3E");
    transform-origin: 50% 65%;
    transform: translate(-50%, -65%) rotate(30deg) scale(1.5);
  }

  :first-child {
    transform: translate(-50%, -65%) rotate(150deg) scale(1.5);
  }

  :last-child {
    transform: translate(-50%, -65%) rotate(-60deg) scale(1.5);
  }
}

.loader.loaded {
  display: none;
}

/* ======================================================================
   CURSOR
   ====================================================================== */

a,
.logo,
a:hover,
.logo:hover,
button,
.side-nav > li,
.slide img,
label,
input,
canvas > * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='90'%3E%3Cpath d='M0 20 L5 0 10 20 5 30 Z' fill='black' opacity='0.4' transform='translate(2 2) rotate(-30 0 5) scale(1.25)'/%3E%3Cpath d='M0 20 L5 0 10 20 5 30 Z' fill='whitesmoke' opacity='1' transform='rotate(-30 0 5) scale(1.25)'/%3E%3C/svg%3E")
      90 90,
    pointer;
}

/* ======================================================================
   GENERAL LAYOUT
   ====================================================================== */

body {
  margin: 0;
  background-color: #0c0c0c;
  font-size: 1rem;
  line-height: 1.6rem;
  font-family: "sauna-mono";
  color: whitesmoke;

  * {
    opacity: 1;
    perspective: 40rem;
    transition: all 0.4s ease-in-out;
  }
}

h1 {
  margin: 0;
  position: relative;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  z-index: 1;
}

h2 {
  margin: 0;
  position: relative;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  z-index: 1;
}

h3 {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: bold;
  margin-left: -0.5rem;
  padding: 0 2rem 0 0.5rem;
  width: fit-content;
  max-height: fit-content;
  color: #0c0c0c;
  background-color: whitesmoke;
  /* border-radius: 0.5rem; */
  border-radius: 50vh;
  margin-block-start: 0;
  margin-block-end: 0;
}

p {
  margin: 0;
  margin-block-start: 1rem;
  margin-inline-start: 0px;
}

p > span {
  display: inline-block;
  font-weight: bold;
}

.jiggle {
  animation: jiggleAnim 32s infinite;
  animation-delay: calc(var(--delay) * 4);
}

@keyframes jiggleAnim {
  0%,
  100% {
    /* color: whitesmoke; */
    transform: rotate(0deg) scale(1);
  }
  1% {
    /* color: crimson; */
    transform: rotate(-10deg) scale(1.1);
  }
  2% {
    transform: rotate(-2deg) scale(1.1);
  }
  2.5% {
    transform: rotate(-8deg) scale(1.05);
  }
  3% {
    /* color: crimson; */
    transform: rotate(2deg) scale(1.05);
  }
  4% {
    /* color: whitesmoke; */
    transform: rotate(0deg) scale(1);
  }
}

.underline {
  position: relative;
}

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px; /* adjust spacing */
  width: 100%;
  height: 2px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;

  animation: underlineAnim 32s infinite;
  animation-delay: calc(var(--delay) * 4);
}

@keyframes underlineAnim {
  0%,
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
  1% {
    transform: scaleX(1);
    transform-origin: left;
  }
  2% {
    transform: scaleX(1);
    transform-origin: right;
  }
  4% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.elastic {
  animation: elastic 32s infinite;
  animation-delay: calc(var(--delay) * 4);
}

@keyframes elastic {
  0%,
  100% {
    transform: scaleX(1);
  }
  1% {
    transform: scaleX(0.8);
  }
  3% {
    transform: scaleX(1.1);
  }
  4% {
    transform: scaleX(0.95);
  }
}

.flip {
  transform-origin: bottom;
  transform-origin: center;
  animation: flipAnim 32s ease infinite;
  animation-delay: calc(4 * var(--delay) + var(--i) * 1s / 7);
}

@keyframes flipAnim {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  4% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

a {
  text-decoration: none;
  font-weight: bold;
  color: whitesmoke;
}

a:active,
a:hover {
  font-style: italic;
  outline: 0;
}

strong {
  font-weight: bold;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

html,
body,
.page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.page {
  box-sizing: border-box;
  padding: 2rem;
}

.page,
nav,
.section,
.infos > *,
.slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header,
.content,
.infos,
.logo {
  display: flex;
  flex-direction: row;
  height: fit-content;
}

.content {
  padding-left: 2.5rem;
  flex: 1 1 80%;
  gap: 2rem;
}

#main-background {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -9999;
  opacity: 0.25;
}

.main-content {
  width: 100%;
}

/* ======================================================================
   BUTTONS
   ====================================================================== */

button,
.link {
  position: relative;
  width: fit-content;
  height: fit-content;
  padding: 0.25rem 1.25rem 0.25rem 0;
  border: none;
  font: inherit;
  font-weight: 700;
  text-wrap: nowrap;
  text-transform: uppercase;
  color: inherit;
  background-color: transparent;
  z-index: 10;
}

button::after,
.link::after {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  top: 0.2rem;
  left: 0;
  opacity: 0.5;
  mix-blend-mode: difference;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 6'%3E%3Cpath d='M0 4 L1 0 L2 4 L1 6 Z' fill='whitesmoke' /%3E%3C/svg%3E")
    no-repeat center / contain;
  transform-origin: 50% 60%;
  transform: rotate(-90deg);
  transition: all 0.4s ease-in-out;
}

.btn-background {
  position: absolute;
  left: -0.5rem;
  right: calc(100% + 0.5rem);
  bottom: 10%;
  height: 75%;
  background-color: whitesmoke;
  mix-blend-mode: difference;
  /* border-radius: 0.5rem; */
  border-radius: 50vh;
  pointer-events: none;
}

button:hover,
button.is-active,
.side-nav > li.is-active button,
.link:hover {
  font-style: italic;

  .btn-background {
    right: 0;
  }
}

button:hover::after,
.side-nav > li.is-active button::after,
button.is-active::after,
.link:hover::after {
  transform: rotate(90deg);
  left: 0.5rem;
}

.cta {
  margin-top: 2rem;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 0.2rem solid whitesmoke;
  /* border-radius: 1rem; */
  border-radius: 50vh;
  padding: 0.25rem 1.5rem 0.25rem 0.75rem;

  .btn-background {
    height: 80%;
    left: 0.25rem;
  }
}

.cta:hover .btn-background {
  right: 0.25rem !important;
}

/* ======================================================================
   SECTIONS
   ====================================================================== */

.section {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%) scale(0) rotate3d(1, 0, 0, 45deg);
  z-index: -22;
}

.section.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transform: none;
}

.next {
  transform: translateY(-3rem);
}

.prev {
  transform: translateY(3rem);
}

/* ======================================================================
   SECTION BANNER
   ====================================================================== */

.banner {
  width: 100%;
  height: fit-content;
  margin-bottom: 3rem;
  background-position: right 0 bottom 0;
  background-repeat: no-repeat;
  background-size: contain;
}

.banner-card {
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  > * {
    margin-left: auto;
  }
}

.banner-card.is-active {
  height: fit-content;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* ======================================================================
   HEADER
   ====================================================================== */

header {
  margin: -1rem 0 1rem 0;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  box-sizing: border-box;
}

.logo {
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  text-decoration: none;
  color: whitesmoke;

  p,
  a {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  img,
  .icon {
    width: 2.75rem;
    height: 2.75rem;
    position: relative;
    margin-right: 1rem;
  }
}

/* ======================================================================
   NAVIGATION
   ====================================================================== */

nav,
nav:before,
.side-nav {
  height: 100%;
}

nav {
  position: relative;
}

nav::before {
  content: "";
  position: absolute;
  left: 2px;
  width: 2px;
  background-color: rgba(245, 245, 245, 0.25);
  z-index: 1;
}

.side-nav {
  font-weight: bold;
  list-style-type: "/ ";
  list-style-position: inside;
  flex-direction: column;
  justify-content: space-around;
  text-wrap: nowrap;
  z-index: 1;

  > li {
    display: list-item;
    position: relative;

    > button {
      margin-left: 0.5rem;
    }
  }

  > li::before {
    position: absolute;
    top: 0.4rem;
    left: -2.6rem;
    color: whitesmoke;
    font-size: 1rem;
    line-height: 1.6rem;
    font-weight: bold;
    padding: 0 0.5rem 0 0.5rem;
    /* border-radius: 0.5rem; */
    border-radius: 50vh;
    transition: all 0.4s ease-in-out;
  }

  li:nth-child(1)::before {
    content: "01";
  }

  li:nth-child(2)::before {
    content: "02";
  }

  li:nth-child(3)::before {
    content: "03";
  }

  li:nth-child(4)::before {
    content: "04";
  }

  li:nth-child(5)::before {
    content: "05";
  }

  li:last-child:before {
    content: "__";
  }

  li.is-active::before,
  li.is-active span {
    font-weight: bold;
    color: #0c0c0c;
    background-color: whitesmoke;
  }
}

/* ======================================================================
   SECTION CONTENT
   ====================================================================== */

.infos,
.stack > * {
  flex-direction: row;
  justify-content: space-between;
  max-height: 100%;
  box-sizing: border-box;
  margin-left: -0.5rem;
  padding-left: 0.5rem;
  gap: 2rem;
  color: whitesmoke;
  overflow-x: hidden;
  overflow-y: scroll;
  opacity: 1;
  visibility: visible;
  border: 0 solid whitesmoke;
  border-radius: 0;

  > * {
    flex: 1 1;
  }

  button {
    margin-top: auto;
  }

  img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
  }
}

.stack > * {
  height: 100%;
}

.infos[scrollable],
.infos-card[scrollable] {
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  padding-left: 1.5rem;
  background-color: rgb(245, 245, 245, 0.05);
  backdrop-filter: blur(2px);
  border: 0.2rem solid rgb(245, 245, 245, 0.75);
  border-radius: 1rem;

  > *:not(.cta) {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
  }

  > .cta {
    display: inline-block;
    margin-left: 0%;
    transform: none;
  }

  > .cta:hover:after {
    top: 0rem;
    left: 0.5rem;
    transform: none;
  }

  *:has(img) {
    object-fit: contain;
    max-height: 100%;
    max-width: 80%;
  }
}

.infos,
.infos-card {
  .cta {
    /* display: none;
    margin-left: 0%;
    transform: none; */
    margin: 0;
    margin-top: 1rem;
  }

  .cta:after {
    top: 0.25rem;
    left: 0.5rem;
    transform: none;
  }
}

.stack {
  position: relative;
  width: 100%;
  height: 100%;

  > * {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
  }
}

.stack .hidden {
  margin: 0;
  padding: 0;
  border: 0rem solid whitesmoke;
  opacity: 0;
  transform: translateY(-100%) scale(0) rotate3d(1, 0, 0, 45deg);
  z-index: -11;
}

/* ======================================================================
   SLIDER
   ====================================================================== */

.slider {
  box-sizing: border-box;
  position: relative;
  min-height: 10rem;
  width: 80%;
  margin: 0 10%;
}

.slider::after {
  content: "";
  position: absolute;
  width: 80%;
  bottom: 4px;
  left: 10%;
  height: 2px;
  background-color: rgba(245, 245, 245, 0.25);
  z-index: 1;
}

.slide {
  position: absolute;
  transform: translateX(-50%);
  opacity: 1;
  text-align: center;
  text-decoration: none;
  z-index: 1;
  height: 100%;
  width: fit-content;
  transform-origin: 50% 100%;
  bottom: 0;

  .title {
    margin-top: 0.5rem;
    line-height: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  img {
    height: 100%;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1;
  }
}

.slide.hidden {
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(0.25);
  z-index: -33;
}

.slide.left,
.slide.right {
  transform: translateX(-50%) scale(0.75);
  z-index: 11;

  img,
  .title {
    opacity: 0.5;
  }
}

.slide.left {
  left: 20%;
}

.slide.right {
  left: 80%;
}

.slide.center {
  bottom: -0.6rem;
  left: 50%;
  z-index: 22;
  pointer-events: none;

  .title {
    font-size: 1rem;
    line-height: 0.75rem;
  }
}

.slide::after {
  margin-top: 1rem;
  margin-left: 50%;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='60'%3E%3Cpath d='M0 20 L5 0 10 20 5 30 Z' fill='whitesmoke'/%3E%3C/svg%3E");
  width: 0.6rem;
  height: 1.8rem;
  transform: translateX(-0.3rem) rotate(-180deg);
  transform-origin: 50% 60%;
  transition: all 0.4s ease-in-out;
}

.slide.left::after {
  transform: translate(-0.3rem, 0.2rem) rotate(-360deg);
}

.slide.right::after {
  transform: translate(-0.3rem, 0.2rem) rotate(0deg);
}

/* ======================================================================
   IMPRESSUM
   ====================================================================== */

.impressum {
  height: 100%;
  box-sizing: border-box;

  h1 {
    font-size: 2rem;
    text-transform: uppercase;
  }

  h2 {
    margin-top: 3rem;
    margin-bottom: -1rem;
    font-size: 2rem;
  }

  h3 {
    margin-top: 2rem;
  }

  h3:first-child {
    margin-top: 0;
  }

  .block {
    height: 100%;
    overflow-y: scroll;
    padding: 1rem;
    padding-left: 1.5rem;
    flex-direction: column;
    align-items: center;
    background-color: rgb(245, 245, 245, 0.05);
    backdrop-filter: blur(2px);
    border: 0.2rem solid rgb(245, 245, 245, 0.75);
    border-radius: 1rem;
  }
}

/* ======================================================================
   CONTACT INFORMATIONS
   ====================================================================== */

.contact {
  display: none;
}

#email,
#phone {
  width: fit-content;
  background-color: transparent;
  margin: 0;
}

.blank {
  opacity: 0;
}

/* ======================================================================
   LAYOUT FOR SMALL VERTICAL SCREENS
   ====================================================================== */

label:has(#nav-toggle) {
  display: none;
  height: fit-content;
  width: 28px;
  height: 25px;
  overflow: hidden;

  input {
    display: none;
  }

  path {
    transform: translate(-36px, -38px);
    --length: 24;
    --offset: -38;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--length) var(--total-length);
    stroke-dashoffset: var(--offset);
  }

  .outer {
    --total-length: 103.35;
    --offset: -42.35;
  }

  .inner {
    --total-length: 99;
  }

  input:checked + svg {
    path {
      transform: translate(-5px, -38px);
    }
    .outer {
      --offset: -8.6;
      --length: 8.6;
    }
    .inner {
      --offset: -7;
    }
  }
}

/* @media (max-width: 1180px) {
}

@media (max-width: 900px) {
  .banner {
    height: 18rem;
  }

  .slide img {
    width: 12.5rem;
    height: 12.5rem;
  }
}

@media (max-width: 767px) {
  .side-nav {
    left: -100%;
  }

  .logo p {
    font-size: 2rem;
  }

  .banner {
    height: 15rem;
  }

  p {
    margin: 0;
  }

  .infos {
    flex-direction: column;
    justify-content: space-between;
  }

  .infos > * {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 0 2rem 0;
  }

  .infos > *:last-child {
    margin-bottom: 0;
  }

  .slider {
    width: 75%;
  }

  .slide img {
    width: 10rem;
    height: 10rem;
  }
} */

@media (max-width: 600px) {
  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  label:has(#nav-toggle) {
    display: block;
  }

  .content {
    padding: 0;
    padding-bottom: 2rem;
  }

  nav {
    margin-left: -11.5rem;
  }

  .showing-nav {
    transform: translate(14rem);

    .main-content {
      transform: translateX(-6rem) scale(0.75) rotate3d(0, 1, 0, -15deg);
      opacity: 0.5;
    }
  }

  .logo .icon {
    width: 3rem;
    height: 3rem;
  }

  h1,
  h2 {
    font-size: 2rem;
  }

  .infos {
    top: 20.5rem;
  }

  .infos {
    align-self: center;

    > * {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 100%;
      margin: 0;
    }
  }
}

/* ======================================================================
   ERROR MESSAGE FOR SMALL SCREENS
   ====================================================================== */

.device-notification {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0c0c0c;

  .logo {
    align-items: center;
    text-decoration: none;
    color: whitesmoke;

    p {
      margin: 0 0 0 0.5rem;
      font-size: 1rem;
      font-weight: 700;
      text-transform: uppercase;
    }
  }

  .message {
    width: 70%;
    margin: 2rem 0 0 0;
    font-weight: 700;
    text-align: center;
    z-index: 100;
  }
}

@media (max-width: 767px) and (min-width: 601px) and (max-height: 680px) {
  .device-notification {
    display: flex;
  }
  .page {
    visibility: none;
    opacity: 0;
  }
}

@media (max-width: 600px) and (min-width: 480px) and (max-height: 580px) {
  .device-notification {
    display: flex;
  }
  .page {
    visibility: none;
    opacity: 0;
  }
}

@media (max-width: 736px) and (min-width: 360px) and (orientation: landscape) {
  .device-notification {
    display: flex;
  }
  .page {
    visibility: none;
    opacity: 0;
  }
}

@media (max-width: 359px) {
  .device-notification {
    display: flex;
  }
  .page {
    visibility: none;
    opacity: 0;
  }
}