/* === CSS style reset === */

/* Reset margin, padding, and box-sizing for all elements */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove default list bullet/number from list elements */
ul,
ol,
dl,
li {
  list-style: none;
}

/* Remove underline and outline from link elements */
a {
  text-decoration: none;
  outline: none;
}

/* Make images easier to work with */
img {
  display: block;
  /* max-width: 100%; */
  -webkit-user-drag: none;
}

/* === Accessibility Styles === */

/* Remove animations, transitions, and smooth scroll for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  /* Remove animations, transitions, and smooth scroll for all elements */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}





/* === General Styles === */

/* Define variables for colors and default font */
:root {
  /* Colours */
  --highlight: #ff791f;

  --text-colour: #F9F9F9;
  --background-colour: #000000;
  --outline-colour: #F9F9F9;
  --overlay-colour: rgba(255, 121, 31, 0.2);
  --overlay-length: 45vw;

  --black: #000000;
  --white: #FFFFFF;

  /* Default font */
  font-family: system-ui, sans-serif;
}

@media screen and (max-width: 640px) {
  :root {
    --overlay-length: 100vw;
  }
}

/* Set background properties for the HTML element */
html {
  background-image: none;
  border: none;
  border-radius: 0;
  overflow-x: hidden;
  height: 100%;
}

/* Enable smooth scrolling for links within the same page */
html:focus-within {
  scroll-behavior: smooth;
}

/* Defines the background colour of the page */
body {
  background-color: var(--background-colour);
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
}





/* === Text Styles === */

/* Defines the semi-bold 'Alexandria' font for the title elements */
@font-face {
  font-family: "Alexandria";
  src: url("../fonts/Alexandria-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

/* Set default styles for all title elements */
.title-text {
  font-family: "Alexandria", sans-serif;
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 600;
  color: var(--text-colour);
  text-align: left;
  line-height: 110%;
  letter-spacing: -0.3vw;
  mix-blend-mode: difference;
}

.subtitle-text {
  font-family: "Alexandria", sans-serif;
  font-size: clamp(1.5rem, 5vw, 4rem);
  font-weight: 600;
  color: var(--text-colour);
  text-align: left;
  line-height: 110%;
  letter-spacing: -0.3vw;
  mix-blend-mode: difference;
}

.medium-text {
  font-family: "Alexandria", sans-serif;
  font-size: clamp(1.25rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--text-colour);
  text-align: left;
  line-height: 110%;
  letter-spacing: -0.1vw;
  mix-blend-mode: difference;
}



/* Set default styles for all link elements */
.link-text {
  font-family: "Alexandria", sans-serif;
  font-size: clamp(0.9rem, 1.75vw, 1rem);
  font-weight: 600;
  color: var(--text-colour);
  text-align: left;
  letter-spacing: -0.05vw;
  transition: color 0.15s ease-in-out;
}

.no-transitions * {
  transition: none !important;
}

.link-text:hover {
  color: var(--highlight);
  transition: color 0.15s ease-in-out;
}

/* Set default styles for all paragraph elements */
.paragraph-text {
  font-family: "Alexandria", sans-serif;
  font-size: clamp(0.8rem, 1.75vw, 1rem);
  font-weight: 600;
  color: var(--text-colour);
  text-align: left;
  letter-spacing: -0.05vw;
  padding-bottom: 1rem;
}

/* Change colour of highlighted elements */
.highlight {
  color: var(--highlight);
  display: inline !important;
}





/* === Design breakpoints === */

/* Mobile */
@media screen and (max-width: 640px) {
}

/* Tablet */
@media screen and (min-width: 641px) and (max-width: 1007px) {
}

/* Laptop */
@media screen and (min-width: 1008px) {
}

/* === Section 1 - Hero === */

.container {
  height: 100%;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(15, [col] 1fr);
  grid-template-rows: repeat(10, [row] 1fr);
  gap: 20px;
  justify-items: center;

  animation: scale 1.6s cubic-bezier(0.53, 0, 0.43, 0.99);
}

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

.home-element.text-box {
  border: 1px solid var(--outline-colour);
  padding: 15px;
  position: relative;
}

.home-element.text-box::before,
.home-element.text-box::after {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
}

.mixed-colour {
  mix-blend-mode: normal;
}

.settings {
  position: absolute;
  transform: translateY(-200px);
  transition: transform 1s ease-in-out;
}

/* .settings-button {
    display: none; ONLY WHILE UNDER DEVELOPMENT
} */

.settings.active {
  transform: translateY(0);
  transition: transform 1s ease-in-out;
}

.social-links {
  position: absolute;
  transform: translateY(200px);
  transition: transform 1s ease-in-out;
}

.social-links.active {
  transform: translateY(0);
  transition: transform 1s ease-in-out;
}

.container > .home-element.text-box:nth-child(2)::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  transform: translateY(-200px);
  transition: transform 1s ease-in-out;
}

.container > .home-element.text-box:nth-child(2).active::before {
  transform: translateY(0);
  transition: transform 1s ease-in-out;
}

.container > .home-element.text-box:nth-child(2)::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 1px solid var(--highlight);
  border-right: 1px solid var(--highlight);
  transform: translateY(0);
  transition: transform 1s ease-in-out;
}

.container > .home-element.text-box:nth-child(2).active::after {
  transform: translateY(200px);
  transition: transform 1s ease-in-out;
}

.container > .home-element.text-box:nth-child(7)::after {
  top: 10px;
  right: 10px;
  border-top: 1px solid var(--highlight);
  border-right: 1px solid var(--highlight);
}

.container > .home-element.text-box:nth-child(10)::before {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-bottom: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
}

.container > .home-element.text-box:nth-child(10)::after {
  top: 10px;
  right: 10px;
  border-top: 1px solid var(--highlight);
  border-right: 1px solid var(--highlight);
}

.home-element.text-box .link {
  display: block;
  margin-bottom: 1px;
}

.home-element.image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-element.title {
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
}

.home-element img {
  /* object-position: 0% 0%; */
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-element button {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.home-element button.active {
  color: var(--highlight);
}

.home-element.title {
  position: relative;
  display: inline-block;
  background: black;
  overflow: hidden;
}

.title {
  width: 100%;
  height: 100%;
  display: block;
}

.home-element.title {
  position: relative;
  display: inline-block;
  background: black;
  overflow: hidden;
}

#image canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* Allow mouse interaction */
}

#image svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Optionally hide the original SVG once shader is working */
  /* opacity: 0; */
}

/* overlay rectangle animation */
.home-element.title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background-color: white;
  mix-blend-mode: difference;
  transform: translateX(-120%);
  animation: overlay 1.3s cubic-bezier(0.53, 0, 0.43, 0.99) 1.6s forwards;
  pointer-events: none;
}

/* Position all the different boxes in the grid and add entrance animations */
.container .home-element:nth-of-type(1) {
  grid-column: col / span 2;
  grid-row: row / span 3;

  animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(2) {
  grid-column: col 3 / span 3;
  grid-row: row / span 3;

  animation: slide-in-down 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(3) {
  grid-column: col 6 / span 6;
  grid-row: row / span 3;

  animation: slide-in-down 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(4) {
  grid-column: col 12 / span 4;
  grid-row: row / span 6;

  animation: slide-in-left 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(5) {
  grid-column: col / span 4;
  grid-row: row 4 / span 2;

  animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(6) {
  grid-column: col 5 / span 7;
  grid-row: row 4 / span 3;

  animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(7) {
  grid-column: col / span 4;
  grid-row: row 6 / span 3;

  animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(8) {
  grid-column: col / span 4;
  grid-row: row 9 / span 2;

  animation: slide-in-up 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(9) {
  grid-column: col 5 / span 5;
  grid-row: row 7 / span 4;

  animation: slide-in-up 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(10) {
  grid-column: col 10 / span 3;
  grid-row: row 7 / span 4;

  animation: slide-in-up 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

.container .home-element:nth-of-type(11) {
  grid-column: col 13 / span 3;
  grid-row: row 7 / span 4;

  animation: slide-in-left 1.2s cubic-bezier(0.42, 0, 0, 1.01);
}

/* Mobile */
@media screen and (max-width: 640px) {
  .container .home-element:nth-of-type(1) {
    opacity: 0;
  }

  .container .home-element:nth-of-type(2) {
    grid-column: col 5 / span 5;
    grid-row: row / span 3;

    animation: slide-in-down 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(3) {
    opacity: 0;
    pointer-events: none;
  }

  .container .home-element:nth-of-type(4) {
    grid-column: col 10 / span 6;
    grid-row: row / span 3;

    animation: slide-in-left 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(5) {
    grid-column: col / span 4;
    grid-row: row / span 3;
  }

  .container .home-element:nth-of-type(6) {
    grid-column: col / span 15;
    grid-row: row 4 / span 2;

    animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(6) canvas {
    display: none;
  }

  .container .home-element:nth-of-type(7) {
    grid-column: col / span 6;
    grid-row: row 6 / span 3;

    animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(8) {
    grid-column: col 7 / span 9;
    grid-row: row 6 / span 2;
  }

  .container .home-element:nth-of-type(9) {
    grid-column: col / span 6;
    grid-row: row 9 / span 2;
  }

  .container .home-element:nth-of-type(10) {
    grid-column: col 7 / span 9;
    grid-row: row 8 / span 3;

    animation: slide-in-up 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(11) {
    opacity: 0;
  }
}

/* Tablet */
@media screen and (min-width: 641px) and (max-width: 1007px) {
  .container .home-element:nth-of-type(1) {
    opacity: 0;
  }

  .container .home-element:nth-of-type(2) {
    grid-column: col 7 / span 4;
    grid-row: row / span 3;

    animation: slide-in-down 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(3) {
    grid-column: col / span 6;
    grid-row: row / span 3;
  }

  .container .home-element:nth-of-type(4) {
    grid-column: col 11 / span 5;
    grid-row: row / span 5;

    animation: slide-in-left 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(5) {
    grid-column: col / span 5;
    grid-row: row 4 / span 3;
  }

  .container .home-element:nth-of-type(6) {
    grid-column: col 6 / span 5;
    grid-row: row 4 / span 2;

    animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(7) {
    grid-column: col / span 5;
    grid-row: row 7 / span 4;

    animation: slide-in-right 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(8) {
    opacity: 0;
  }

  .container .home-element:nth-of-type(9) {
    grid-column: col 6 / span 6;
    grid-row: row 6 / span 5;

    animation: slide-in-up 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(10) {
    grid-column: col 12 / span 4;
    grid-row: row 6 / span 5;

    animation: slide-in-up 1.2s cubic-bezier(0.42, 0, 0, 1.01);
  }

  .container .home-element:nth-of-type(11) {
    opacity: 0;
  }
}

.outline {
  width: 100%;
  height: 100%;
  position: absolute;
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

.settings .link:not(:last-of-type) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings .link:not(:last-of-type)>.paragraph-text{
  display: inline;
  padding: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 2px; bottom: 2px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--highlight);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.home-element.text-box {
  position: relative;
}

.overlay {
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    var(--overlay-colour),
    transparent 40%
  );
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.1s;
}

/* Show overlay only when hovering in dark mode */
body.mouse-effects-on .home-element.text-box:hover .overlay {
  opacity: 1;
}

/* In light mode the overlay always stays hidden */
body.mouse-effects-off .home-element.text-box .overlay {
  opacity: 0 !important;
}

/* Animations */
@keyframes slide-in-down {
  0% {
    transform: translateY(-100vh);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slide-out-down {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100vh);
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(-100vw);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out-right {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100vw);
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100vw);
  }
}

@keyframes slide-in-up {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slide-out-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100vh);
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  75% {
    transform: scale(0.8)
  }

  100% {
    transform: scale(1);
  }
}

@keyframes overlay {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(var(--overlay-length));
  }
}