/***********************/
/* MARK: BASIC STYLING */
/***********************/

:root {
	--white: rgb(255, 255, 255);
	--black: rgb(0, 0, 0);
	--nebula-accent: #eb5c35;
	--nebula-bg: #181932;
	--indicator-top: 12vh;
	--indicator-height: 76vh;
	--indicator-right: clamp(1rem, 2vw, 2rem);
	--indicator-width: 72px;
	--satellite-size: 56px;
	--rail-width: 4px;

  color-scheme: dark;
  scroll-behavior: smooth;
}

@font-face {
    font-family: spacemono;
    src: url(../fonts/SpaceMono-Regular.ttf);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: spacemono, Arial, Helvetica, sans-serif;
  color: var(--white);

  height: 200vh;
  overflow-x: hidden;
  margin: 0;
}


/****************/
/* MARK: HEADER */
/****************/

h1 {
  font-size: clamp(1.5em, 12.5vw ,6em);
  word-spacing: 100dvw;
  line-height: 1;

  &:first-line {
    font-size: 1.33em;
  }
}

h2 {
  color: var(--nebula-accent);
}

nav ul {
  padding-inline: 0;
  width: 100%;

  li {
    list-style: none;
    width: 100%;

    a {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 100%;
      text-decoration: none;
      color: var(--white);
      border-bottom: 1px solid var(--white);
      padding-block: .5rem;
      transition: .5s ease;
      position: relative;
      z-index: 11;

      span {
        padding-inline: .5rem;
        font-size: 1em;
      }

      &::after {
        display: inline-block;
        width: 1em;
        height: 1em;
        content: '';
        background: url(../public/images/arrow.png);
        background-repeat: no-repeat;
      }
    }
  }
}

.logo-link {
  
  &:hover {
    background-color: transparent;
  }

  img {
    height: 2em;
  }
}

button:hover, a:hover, label:hover {
  cursor: url("../public/images/blackhole_32x32.png") 16 16, auto;
    font-family: spacemono, Arial, Helvetica, sans-serif;

    color: var(--white);

    span {
      animation: linear rotate 3s infinite;
      text-decoration: underline;
    }
}

a {
  color: var(--nebula-accent);
}

.details-section {
  width: 100dvw;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(24, 25, 50, 1) 70%,
    rgba(10, 61, 120, 1) 80%,
    rgba(0, 101, 156, 1) 90%,
    rgba(33, 159, 184, 1) 100%
  );
}

.details {
  margin-block: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 2rem;
  padding: 2.5dvw;

  h3 {
    width: 80%;
    align-self: center;

    @media (max-width: 820px) {
      text-align: center;
    }
  }

  .button-list {
    border: none;
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
    padding-top: 1em;
    padding-bottom: 2em;

    label {
      font-size: clamp(1em, 4vw ,1.2em);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .5rem;

      color: var(--white);

      input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;

        &:checked ~ span {
          transform: rotateZ(0deg);
        }
      }

      span {
        display: inline-block;
        height: 24px;
        width: 24px;
        
        animation-duration: 2s;
        transition: .5s ease;
        transform: rotateZ(-90deg);
        color: inherit;

        svg {
          position: absolute;
        }
      }

      &:has(:checked) {
        font-weight: bolder;
        color: var(--nebula-accent);
      }

      &:hover {
        background: transparent;
        text-decoration: underline;
      }
    }

    @media (max-width: 820px) {
      flex-direction: column;
      gap: 1em;
    }
  }
}

.detail-elements {
  display: grid;
  width: 80%;
  justify-content: center;
}

.detail-element {
  grid-column: 1;
  grid-row: 1;

  padding: 0;

  transform-origin: 50% 0%;
  transform: scaleY(0.01);
  transition: 1s ease;
  opacity: 0;
  display: grid;
  flex-direction: column;
  gap: 2rem;

  img {
    grid-column: 2;
  }

  &.active {
    transition-delay: .7s;
    opacity: 1;
    transform: scaleY(1);
  }
}

.heading {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(11, 1fr);
  margin: 5dvh 5dvw;
  min-height: 100dvh;
  height: fit-content;

  header {
    align-self: start;
    grid-column: 1 / span 16;
    grid-row: 1 / span 6;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    z-index: 10;

    span {
      grid-column: 1;
      height: min-content;
      color: var(--nebula-accent);
      font-size: medium;
    }

    h1 {
      grid-column: 1;
    }

    a {
      grid-row: 1;
      grid-column: 2;

      justify-self: end;
      height: min-content;
    }
  }

  nav {
    grid-column: 11 / span 6;
    grid-row: 2 / span 4;
    justify-items: end;
    z-index: 11;
  }

  .satellite-imgs-container {
    grid-column: 12 / span 6;
    grid-row: 4 / 13;
    justify-self: end;
    padding: 1rem;
    animation: float 10s alternate-reverse infinite linear;
    display: grid;
    height: fit-content;

    img {
      grid-column: 1;
      grid-row: 1;
      max-height: 70dvh;
      max-width: 40dvw;
      z-index: 2;
      transition: .3s linear;
      transition-delay: .3s;
    }

    #bus-components {
      max-height: 63dvh;
      max-width: 30dvw;
      opacity: 0;
      transform: scale(0.1);
      z-index: 1;
      transition-delay: 0s;
    }

    &:hover {
      img {
        opacity: 0;
        transform: scale(0.1);
        transition-delay: 0s;
      }

      #bus-components {
        opacity: 1;
        transform: scale(1);
        transition-delay: .3s;
      }
    }
  }

  p {
    font-size: clamp(.7em, 2vw ,.95em);
    grid-column: 1 / span 8;
    grid-row: 6 / span 8;
  }

  @media (max-width: 1200px) {
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 1rem;

    header {
      grid-column: 1 / span 16;
      grid-row: 1 / 4;
    }

    nav {
      grid-column: 1 / 16;
      grid-row: 4;
      justify-items: start;
    }

    .satellite-imgs-container {
      grid-column: 1 / span 16;
      grid-row: 2 / 6;
      justify-self: end;
      padding: 1rem;
      transform: scale(1);
      display: grid;
    }

    p {
      grid-column: 1 / span 16;
      grid-row: 5;
    }
  }

  @media (max-width: 820px) {
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 0;
    
    header {
      grid-column: 1 / span 16;
      grid-row: 1;
      align-items: center;
      grid-template-columns: 1fr;
      * {
        text-align: center;
      }

      a {
        grid-column: 1;

        justify-self: center;
      }
    }

    nav {
      grid-column: 1 / span 16;
      grid-row: 4;
      align-self: center;
      padding-top: 1rem;
      padding-inline: 1.5rem;
    }

    .satellite-imgs-container {
      justify-self: center;
      grid-column: 1 / span 16;
      grid-row: 1;
      padding: 0;
      padding-top: 1rem;

      img {
        max-width: 110%;
      }

      #bus-components {
        display: none;
      }
    }

    p {
      padding-inline: 1.5rem;
      text-align: center;
      grid-column: 1 / span 16;
      grid-row: 3;
    }
  }
}

/***************************/
/* MARK: BLACKHOLE STYLING */
/***************************/

.background {
	height: 100vh;
	display: grid;
	/* background: var(--black); */

	position: fixed;
	top: 0;
	right: 0;
	left: 0;
  z-index: 2;
	overflow: hidden;
	pointer-events: none;

	animation: zoom-blackhole linear forwards;
	animation-timeline: scroll();
	animation-range: 0vh 100dvh;
}

.scroll-hint {
	position: fixed;       
	bottom: 10vh;
	left: 50%;
	transform: translateX(-50%);

	color: var(--white);
	font-size: 1.3rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.7;
	z-index: 20;              
	pointer-events: none; 

	animation: fadeHint 4s ease-in-out infinite;
}

@keyframes fadeHint {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}

.circle-wrapper {
	display: grid;
	place-items: center;
  
}

.circle {
    font-size: clamp(60px, 20vw, 300px);
    width: 1em;
    height: 1em;

    border-radius: 50%;
    background: transparent;
    position: relative;

    transform: skew(0deg, -11deg);
    filter: blur(24px) contrast(2);

    box-shadow: 
        -100px 20px 70px -20px #fff496,
        6px 96px 82px -21px #fff9c7,
        56px 93px 64px -52px #ffffff,
        86px 56px 90px -2px #ffe500,
        0 0px 100px 130px #8d1f00c9;

    animation: 
        animation-blackhole 3s ease-in-out infinite,
        animation-blackhole2 5s ease-in-out infinite;

}


.circle::before {
    background-color: var(--black);
    content: "";
    position: absolute;
    inset: 0;
    border: 10px solid #ff3000;
    border-radius: 50%;
    filter: blur(10px);
    transform: skew(20deg, 10deg);
}

@keyframes animation-blackhole {
    0% {
        box-shadow: -100px 20px 70px -20px #fff496, 
        6px 96px 82px -21px #fff9c7, 
        56px 93px 64px -52px #ffffff, 
        86px 56px 90px -2px #ffe500, 
        0 0px 100px 130px #8d1f00c9;
    }
    50% {
        box-shadow: -70px -10px 70px -20px #fff496, 
        6px 96px 82px -21px #fff9c7, 
        56px 93px 64px -52px #ffffff, 
        66px 26px 90px -32px #ffe500, 
        -20px -20px 100px 130px #8d1f0087;
    }
    100% {
        box-shadow: -100px 20px 70px -20px #fff496, 
        6px 96px 82px -21px #fff9c7,
        56px 93px 64px -52px #ffffff, 
        86px 56px 90px -2px #ffe500, 
        0 0px 100px 130px #8d1f00c9;
    }
}

@keyframes animation-blackhole2 {
    0% {
        transform: skew(0deg, -11deg);
    }
    50% {
        transform: skew(0deg, -6deg) rotate(5deg);
    }
    100% {
        transform: skew(0deg, -11deg);
    }
}

@keyframes zoom-blackhole {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(20);
    }
    70% {
        transform: scale(40);
    }
    100% {
        transform: scale(80);
        opacity: 0; 
    }
}

p, li {
	font-size: clamp(.8em, 2.5vw ,1em);
	color: var(--white);
  line-height: 1.6;
  z-index: 1;
}

main {
  transform-origin: center center;
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(24, 25, 50, 1) 70%,
    rgba(10, 61, 120, 1) 80%,
    rgba(0, 101, 156, 1) 90%,
    rgba(33, 159, 184, 1) 100%
  );
}


/**************************/
/* MARK: BACKGROUND STARS */
/**************************/

main > * {
  position: relative;
  z-index: 1;
}

main::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(2px 2px at 20px 30px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 120px, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 150px 200px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 400px, white 50%, transparent 51%),
    radial-gradient(2px 2px at 500px 100px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 700px 250px, white 50%, transparent 51%),

    radial-gradient(1px 1px at 60px 200px, white 50%, transparent 51%),
    radial-gradient(2px 2px at 200px 80px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 400px 150px, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 600px 300px, white 50%, transparent 51%),

    radial-gradient(1px 1px at 100px 500px, white 50%, transparent 51%),
    radial-gradient(2px 2px at 350px 250px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 750px 450px, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 450px 50px, white 50%, transparent 51%),

    radial-gradient(1px 1px at 130px 320px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 420px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 520px 220px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 680px 380px, white 50%, transparent 51%),

    radial-gradient(1px 1px at 170px 380px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 280px 450px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 570px 270px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 7000px 420px, white 50%, transparent 51%);

  
  background-repeat: repeat;
  background-size: 800px 600px;

  animation: stars-twinkle 4s ease-in-out infinite,
  stars-drift 20s ease-in-out infinite;

  opacity: 1;
}

@keyframes stars-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes stars-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-150px, 150px) scale(1.05);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

.heading {
	margin-top: 100dvh;
	opacity: 0;
	animation: reveal-content linear forwards;
	animation-timeline: view();
	animation-range: entry 65% exit 0%;
}

.background-head {
	display: grid;
  height: 100dvh;

	position: fixed;
	top: 0;
	right: 0;
	left: 0;

	overflow: hidden;
	pointer-events: none;
  z-index: -1;

  opacity: .6;
  transform: scale(1.6);

}

.circle-wrapper-head {
	display: grid;
	place-items: center;
}

.circle-head {
    font-size: clamp(60px, 20vw, 300px);
    width: 1em;
    height: 1em;

    border-radius: 50%;
    background: transparent;
    position: relative;

    transform: skew(0deg, -11deg);
    filter: blur(24px) contrast(2);

    box-shadow: 
        -100px 20px 70px -20px #fff496,
        6px 96px 82px -21px #fff9c7,
        56px 93px 64px -52px #ffffff,
        86px 56px 90px -2px #ffe500,
        0 0px 100px 130px #8d1f00c9;

    animation: 
        animation-blackhole 3s infinite,
        animation-blackhole2 5s infinite;

        
}

.circle-head::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 10px solid #ff3000;
    border-radius: 50%;
    filter: blur(10px);
    transform: skew(10deg, 10deg);
}

@keyframes reveal-content {
    0% {
		opacity: 0;
	}

	30%{
		opacity: 0.5;
	}

	60% {
        opacity: 1;
        transform: translateY(0);
    }

	100% {
		opacity: 1;
	}
}


/**********************************/
/* SCROLLDRIVEN ANIMATIONS HEADER */
/**********************************/

.heading nav,
.heading header span,
.heading h1,
.heading .logo-link,
.heading p {
	opacity: 0;
}


/* TIMING */

.heading.in-view nav {
	animation: navDrop 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.heading.in-view header span {
	animation: softReveal 1s ease forwards;
	animation-delay: 0.25s;
}

.heading.in-view h1 {
	animation: titleReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: 0.45s;
}

.heading.in-view .logo-link {
	animation: logoFloatIn 1.1s ease forwards, logoDrift 4s ease-in-out infinite 1.6s;
	animation-delay: 0.9s, 1.8s;
}

.heading.in-view #bus-components {
	animation: satelliteFrontIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
			   slowFloatAlt 5s ease-in-out infinite 2s;
	animation-delay: 1s, 2.2s;
}

.heading.in-view p {
	animation: paragraphReveal 1.1s ease forwards;
	animation-delay: 1.1s;
}


/* KEYFRAMES */

@keyframes navDrop {
	0% {
		opacity: 0;
		transform: translateY(-24px);
		filter: blur(8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes softReveal {
	0% {
		opacity: 0;
		transform: translateY(18px);
		filter: blur(6px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes titleReveal {
	0% {
		opacity: 0;
		transform: translateY(45px) scale(0.96);
		letter-spacing: 0.18em;
		filter: blur(10px);
	}
	60% {
		opacity: 1;
		transform: translateY(0) scale(1.01);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		letter-spacing: normal;
		filter: blur(0);
	}
}

@keyframes logoFloatIn {
	0% {
		opacity: 0;
		transform: translateX(20px) translateY(10px) scale(0.9);
		filter: blur(8px);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes logoDrift {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes slowFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10px) rotate(-1deg);
	}
}

@keyframes slowFloatAlt {
	0%, 100% {
		transform: translateY(0) translateX(0);
	}
	50% {
		transform: translateY(8px) translateX(-6px);
	}
}

@keyframes paragraphReveal {
	0% {
		opacity: 0;
		transform: translateY(25px);
		filter: blur(8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}


/******************/
/* MARK: CAROUSEL */
/******************/

h3 {
	font-size: 2em;
	margin-bottom: 25px;
	color: var(--nebula-accent);
}

mark {
    color: var(--nebula-accent);
    font-size: 1.5em;
    background-color: transparent;
    font-family: "Space Grotesk", sans-serif;
}

span {
    color: var(--white);
    font-size: 2.5em;
}

.special {
  display: none;
}

.carousel {
	display: grid;
	justify-items: center;
	justify-content: center;
	gap: 75px;
	width: 100vw;
	height: auto;
	position: relative;
    padding: 100px 25px;
}

.carousel img {
    width: 300px;
    animation-name: fadeScale;
}

.scroll-anim-foto {
	animation-timeline: view();
	animation-range: exit -25% exit 100%;
	animation-duration: auto;
	animation-fill-mode: both;
}

@keyframes fadeScale {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
        translate: 0 40vh;
	}
}

@media (min-width: 550px) {
  .special {
    border-bottom: 1px solid var(--white);
    padding: 20px 0;
    margin: 20px 0;
    top: 0;
  }

	.carousel {
		grid-template-columns: repeat(auto-fit, minmax(auto-fit, 1fr) );
	}

  .carousel div {
    width: 500px;
  }
}

@media (min-width: 1060px) {
	.carousel {
		grid-template-columns: 130px auto 450px;

	}
}

/**********************/
/* MARK: PROGRESS BAR */
/**********************/

/* Animate satellite to right position */
.satellite-imgs-container {
	transition:
		transform 0.5s ease,
		opacity 0.35s ease,
		filter 0.35s ease;
	transform-origin: top right;
}

body.progress-active .heading .satellite-imgs-container {
	transform: scale(0.35) translateX(35%);
	opacity: 0;
	pointer-events: none;
}

.scroll-indicator {
	position: fixed;
	top: var(--indicator-top);
	right: var(--indicator-right);
	height: var(--indicator-height);
	width: var(--indicator-width);
	z-index: 10;
	pointer-events: none;
	opacity: 0;
	transform: translateX(20px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.scroll-indicator.is-stuck {
	position: absolute;
}


body.progress-active .scroll-indicator {
	opacity: 1;
	transform: translateX(0);
}

.scroll-indicator__rail {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
}

.scroll-indicator__rail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 83%;
	transform: translateX(-50%);
	width: var(--rail-width);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.2);
}

.scroll-indicator__fill {
	position: absolute;
	top: 0;
	left: 83%;
	transform: translateX(-50%);
	width: var(--rail-width);
	height: 0;
	border-radius: 999px;
	background: linear-gradient(
		to top,
		var(--nebula-accent),
		rgb(255 255 255 / 0.9)
	);
}

.scroll-indicator__satellite {
	position: absolute;
	left: 83%;
	top: 100%;
	transform: translate(-50%, -50%);
	width: var(--satellite-size);
	height: auto;
	filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.35));
	transition: width 0.3s ease;
}

@media (max-width: 800px) {
	.scroll-indicator {
		display: none;
	}
}

/* EASTER EGG */
body.blackhole-mode {
  margin: 0;
}

body.blackhole-mode .stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999999;

  background-image:
    radial-gradient(2px 2px at 20px 30px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 120px, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 150px 200px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 400px, white 50%, transparent 51%),

    radial-gradient(2px 2px at 500px 100px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 700px 250px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 200px, white 50%, transparent 51%),
    radial-gradient(2px 2px at 200px 80px, white 50%, transparent 51%),

    radial-gradient(1px 1px at 400px 150px, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 600px 300px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 100px 500px, white 50%, transparent 51%),
    radial-gradient(2px 2px at 350px 250px, white 50%, transparent 51%),

    radial-gradient(1px 1px at 750px 450px, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 450px 50px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 320px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 420px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 520px 220px, white 50%, transparent 51%),
    radial-gradient(1px 1px at 680px 380px, white 50%, transparent 51%);

  background-repeat: repeat;
  background-size: 800px 600px;

  animation: stars-twinkle 4s ease-in-out infinite,
  stars-drift 20s ease-in-out infinite;
}

main.blackhole-mode {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--black);
  transform-origin: center;
  animation: vortex 2.5s cubic-bezier(.2,.8,.2,1) forwards;
  z-index: 1;
}

body.blackhole-mode .background-head {
  transform: scale(2) translate(0, -10%);
  opacity: 1;
  transition: transform 2s ease, opacity 2s ease;
}

body.blackhole-mode .circle-head,
body.blackhole-mode .circle {
  animation-duration: 0.5s, 0.8s;
  filter: blur(20px) contrast(3);
  scale: 1.5;
}

body.blackhole-mode * {
  transition: transform 2.5s cubic-bezier(.2,.8,.2,1), opacity 1.5s ease;
}

body.blackhole-mode .heading,
body.blackhole-mode nav,
body.blackhole-mode main,
body.blackhole-mode footer,
body.blackhole-mode .marquee {
  transform:
    translate(-50vw, -50vh)
    scale(0.1)
    rotate(720deg);
  opacity: 0;
}

body.blackhole-mode nav {
  animation: vortex 2.5s ease forwards;
  transition-delay: 0.1s;
}

body.blackhole-mode .heading {
  transition-delay: 0.2s;
  animation: vortex 2.5s ease forwards reverse;
}

.blackhole-message {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--black);
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 1s ease;
}

body.blackhole-mode .blackhole-message {
  opacity: 1;
  pointer-events: auto;
}

.blackhole-message-content {
  text-align: center;
}

.blackhole-message h2 {
  margin-bottom: 20px;
  font-size: 2rem;
  color: var(--white);
}

.blackhole-message button {
  cursor: url("../public/images/blackhole_32x32.png") 16 16, auto;
  font-family: spacemono, Arial, Helvetica, sans-serif;
  padding: 10px 20px;
  font-size: 1rem;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 6px;
}

model-viewer {
    position: absolute;
    z-index: -1;
		height: 60vh;
		width: 100%;
}

body.blackhole-mode .scroll-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.blackhole-mode main {
  position: fixed;
  inset: 0;
  transform-origin: center;
  animation: vortex 2.5s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes vortex {
  0% {
    transform: scale(1) rotate(0deg);
    filter: blur(10px);
    opacity: 1;
  }

  40% {
    transform: scale(0.5) rotate(180deg);
    filter: blur(20px);
    opacity: .6;
  }

  70% {
    transform: scale(0.1) rotate(360deg);
    filter: blur(50px);
    opacity: .5;
  }

  90% {
    transform: scale(0.005) rotate(720deg);
    filter: blur(80px);
    opacity: .2;
  }

  100% {
    transform: scale(0);
    filter: blur(100px);
    opacity: 0;
  }
}
/*******************************/
/* MARK: MARQUEE VOOR PARTNERS */
/*******************************/

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
  background: var(--white);

  h3 {
    width: 80%;
    margin: auto;
    padding-inline: 2.5vw;
  }
}

.container {
  width: 100%;
  overflow: hidden;
}

.pic-container {
  display: flex;
  width: max-content;
  animation: marquee 90s linear infinite;
  will-change: transform;
}

.marquee-group {
  display: flex;
  flex-shrink: 0;
}

.pic {
  flex: 0 0 220px; 
  height: 140px;   
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  animation: float 5s infinite alternate;
  animation-delay: calc(-1s * sibling-index());
}

.pic img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes float {
  0% {
    transform: translateY(-4%) translateX(-2%);
  }
  50% {
    transform: translateY(-1%) translateX(1%);
  }
  100% {
    transform: translateY(5%) translateX(3%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee,
  .container {
    overflow-x: auto;
  }

  .pic-container {
    animation: none;
    transform: none;
    width: max-content;
  }

  .marquee-group[aria-hidden="true"] {
    display: none;
  }
}


body::-webkit-scrollbar {
  display: none;
}

#preloader {
  position: fixed;
  inset: 0;
  background: black;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;

  animation: fadeOut 1s ease 5s forwards; 
}

#preloaderText {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;

  width: 0;
  animation: typing 3s steps(22, end) forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 22ch; 
  }
}


@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/****************/
/* MARK: FOOTER */
/****************/

    footer {
      position: relative;
      overflow: visible;
      background: var(--nebula-bg);
      color: #f2f2f2;
      padding-bottom: 0;
    }

    /* bovenste sloganbalk */
    .footer-topbar {
      background: #eb5b2f;
      color: #111;
      text-align: center;
      padding: .2rem;
      font-size: 1rem;
    }

    .footer-inner {
      position: relative;
      z-index: 3;
      margin: 2rem auto 0 auto;
      padding: 0rem 1rem 0;
      display: grid;
      grid-template-columns: 1.3fr 0.8fr 1.4fr 0.7fr;
      gap: 3rem;
    }

    .footer-column h3 {
      color: #eb5b2f;
      font-size: 2rem;
      font-weight: 500;
      margin-bottom: 0.75rem;
    }

    .footer-line {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.75);
      margin-bottom: 1.25rem;
    }

    .footer-column ul {
      list-style: none;
    }

    .footer-column li {
      margin-bottom: 0.7rem;
    }

    .footer-column a {
      color: #f2f2f2;
      text-decoration: none;
      font-size: 1.1rem;
      line-height: 1.5;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover {
      text-decoration: underline;
    }

    /* menu in 2 kolommen */
    .footer-menu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .footer-menu-grid .menu-subcolumn {
      position: relative;
    }

    .footer-menu-grid .menu-subcolumn:first-child::after {
      content: "";
      position: absolute;
      top: 0;
      right: -1rem;
      width: 1px;
      height: 100%;
      background: rgba(255, 255, 255, 0.18);
    }

    .location-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .location-card {
      position: relative;
      font-size: 1.05rem;
      line-height: 1.5;
    }

    .location-card:first-child::after {
      content: "";
      position: absolute;
      top: 0;
      right: -1rem;
      width: 1px;
      height: 100%;
      background: rgba(255, 255, 255, 0.18);
    }

    .social-icons {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .social-icons a {
      width: 52px;
      height: 52px;
      border: 2px solid #f2f2f2;
      border-radius: 12px;

      display: flex;
      align-items: center;
      justify-content: center;

      text-decoration: none;
    }

    .social-icons img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .social-icons a:hover {
      background: #f2f2f2;
    }

    .social-icons a:hover img {
      filter: invert(1); /* werkt goed bij zwarte SVG’s */
    }


    .partner-logo {
      display: flex;
      margin-top: 1rem;
      font-size: 1rem;
      line-height: 1.4;
      opacity: 0.95;
      
      gap: .5rem;
    }

    .partner-logo img {
      height: 8rem;
      width: auto;
      
    }

    .footer-bottom-image {
      position: relative;
      z-index: 1;
      width: 98%;
      display: flex;
      justify-content: center;

      top: 20px;
      margin-bottom: -20px;
    }


    .footer-bottom-image img {
      display: block;
      width: 100%;
      height: auto;
    }

    .site-footer {
      position: relative;
      overflow: hidden;
    }

    .site-footer::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;

      width: 100%;
      height: 40rem;

      background: linear-gradient(
        to bottom,
        #181932 0%,
        #181932 35%,
        rgba(24, 25, 50, 0.9) 50%,
        rgba(24, 25, 50, 0.7) 65%,
        rgba(24, 25, 50, 0.4) 80%,
        rgba(24, 25, 50, 0.15) 92%,
        rgba(24, 25, 50, 0) 100%
      );

      pointer-events: none;
      z-index: 2;
    }

    @keyframes rotate {
      33% {
        transform: rotateZ(-5deg);
      }
      66% {
        transform: rotateZ(5deg);
      }
    }


    @media (max-width: 1100px) {
      .footer-inner {
        grid-template-columns: 1fr 1fr;
      }

      .site-footer::after {
        height: 25rem;
      }
    }

    @media (max-width: 700px) {
      .footer-topbar {
        font-size: 1.2rem;
        padding: 0.9rem 1rem;
      }

      .footer-inner {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.5rem 5rem;
      }

      .footer-menu-grid,
      .location-grid {
        grid-template-columns: 1fr;
      }

      .footer-menu-grid .menu-subcolumn:first-child::after,
      .location-card:first-child::after {
        display: none;
      }

      .footer-background-image {
        width: 120%;
        left: -10%;
        bottom: 0;
        opacity: 0.2;
      }

      .site-footer::after {
        height: 15rem;
      }
    }

/****************************/
/* MARK: FLOATING ASTRONAUT */
/****************************/

.floating-astronaut {
  color: #62d8e6;
  color: var(--nebula-accent);
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100dvh;
  width: 100dvw;
  pointer-events: none;

  svg {
    height: fit-content;
    width: 2.5vw;
    animation: infinite float-around 60s ease-out;
  }
}

@keyframes float-around {
  0% {
    transform: translate3d(-10dvw, -10dvh, 0) rotateZ(0);
  }
  12.5% {
    transform: translate3d(20dvw, 35dvh, 0) rotateZ(.5turn);
  }
  25% {
    transform: translate3d(30dvw, 40dvh, 0) rotateZ(3turn);
  }
  37.5% {
    transform: translate3d(15dvw, 45dvh, 0) rotateZ(0turn);
  }
  50% {
    transform: translate3d(55dvw, 55dvh, 0) rotateZ(2turn);
  }
  62.5% {
    transform: translate3d(80dvw, 40dvh, 0) rotateZ(4turn);
  }
  75% {
    transform: translate3d(60dvw, 80dvh, 0) rotateZ(2.7turn);
  } 
  87.5% {
    transform: translate3d(80dvw, 50dvh, 0) rotateZ(3.4turn);
  }
  100% {
    transform: translate3d(110dvw, 15dvh, 0) rotateZ(4turn);
  }
}