@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600&display=swap");
@import url(//fonts.googleapis.com/css?family=Lato:300:400);
@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,700");


/* COOL MUSIC PLAYER SLIDER by Ecem Gokdogan (https://codepen.io/ecemgo/pen/vYPadZz) */

:root {
  --primary-clr: rgba(228, 228, 229, 1);
  --colour-1: #fbcabf;
  --colour-2: #79B8DF;
  --colour-3: #EDA8A8;
  --colour-4: #D9F2FB;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html {
  block-size: 100%;
  color-scheme: dark;
  background-color: #395ab5c5;
  transition: background-color 2s ease-in-out;
}

html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-blend-mode: color-dodge;
  background-image:
    radial-gradient(at 100% 20%, #fbcabf70, #0000 70%),
    radial-gradient(at 20% 20%, #79B8DF70, #0000 70%),
    radial-gradient(at 20% 100%, #EDA8A870, #0000 70%),
    radial-gradient(at 100% 100%, #D9F2FB70, #0000 70%);

  /* This transition will make the "lights out" effect smooth */
  transition: opacity 1.2s ease-in-out;

  /* CRITICAL: This ensures the layer doesn't block mouse clicks */
  pointer-events: none;
}

/* --- 3. The "Lights Out" Toggle Logic --- */
/* When the body gets this class, we fade out the pseudo-element layer. */
body.lights-out-active html::before {
  opacity: 0;
}

@keyframes pulse-and-hold {

  /* --- Phase 1: Color A --- */
  0%,
  20% {
    background-color: #395ab5c5;
  }

  /* --- Phase 2: Color B --- */
  25% {
    background-color: #395ab57e;
  }

  45% {
    background-color: #395ab57e;
  }

  /* --- Phase 3: Color C --- */
  50% {
    background-color: #395ab527;
  }

  70% {
    background-color: #395ab527;
  }

  /* --- Phase 4: Color B --- */
  75% {
    background-color: #395ab57e;
  }

  95% {
    background-color: #395ab57e;
  }

  /* --- Return to Start --- */
  100% {
    background-color: #395ab5c5;
  }
}


@media screen and (min-width: 769px) {

  /* html {
    animation: slidein 120s forwards infinite alternate;
  } */
  html {
    animation-name: pulse-and-hold;
    animation-duration: 120s;
    /* A duration easily divisible by the phases */
    animation-iteration-count: infinite;

    /* Use a smooth timing function. The keyframes now control the holds. */
    animation-timing-function: ease-in-out;


  }

}

html.background-simplified {
  animation-play-state: paused;
}

html.background-simplified::before {
  opacity: 0;
}

html.background-simplified #music-player-container .track_info_wrapper .track_info .artist,
html.background-simplified #music-player-container .mini-player,
html.background-simplified #music-player-container .track_info_wrapper {
  transition: color 1.2s ease-in-out;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Disable all backdrop-filters --- */
html.effects-simplified .nav-wrapper,
html.effects-simplified .contact-modal-backdrop,
html.effects-simplified .modal-backdrop,
html.effects-simplified #music-player-container .dim,
html.effects-simplified #music-player-container .player {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* For Safari compatibility */
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* min-height: 100vh; */
  width: 100%;
  background-color: #395ab527;
  /* background: url("/static/images/background.jpg"); */
  background-repeat: no-repeat;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;


  min-block-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  place-content: center;
  place-items: center;
  gap: 2ch;
}

#copyrightText {
  position: fixed;
  bottom: 15px;
  left: 20px;
  opacity: 0.3;
  font-size: 0.6rem;
  transition: opacity 0.2s ease;
}

#copyrightTextMobile {
  display: none;
}

@media screen and (max-width: 768px) {
  #copyrightText {
    opacity: 0;
    pointer-events: none;
  }

  #copyrightTextMobile {
    display: block;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.3;
    font-size: 0.6rem;
  }

  html {
    background-color: #395ab588;
  }

  html::before {
    opacity: 0.3;
  }

  html .nav-wrapper,
  html .contact-modal-backdrop,
  html .modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* For Safari compatibility */
  }
}

.album-cover {
  width: 90%;
}

.youtube-placeholder {
  max-width: inherit;
  aspect-ratio: inherit;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  text-align: center;
}

.youtube-placeholder p {
  font-size: large;
}

.swiper {
  width: 100%;
  padding: 10px 0 10px;
}

.swiper-slide {
  position: relative;
  max-width: 1080px;
  aspect-ratio: 16/9;

  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.2)); */
  transform-origin: center;
  transform: perspective(800px);
  transition: 0.3s ease-out;
  user-select: none;
  align-items: center;
}

.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -webkit-box-reflect: below -5px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
  transform-origin: center;
  transform: perspective(800px);
  transition: 0.3s ease-out;
  pointer-events: none;
  user-select: none;
}

.swiper-slide-active .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 98%;
  background-color: rgba(28, 22, 37, 0.6);
  border-radius: inherit;
  opacity: 0;
  transition: all 0.4s linear;
}

.swiper-slide:hover .overlay {
  opacity: 1;
}

.swiper-slide .overlay ion-icon {
  opacity: 0;
}

.swiper-slide-active:hover .overlay ion-icon {
  font-size: 4rem;
  color: #eb0b0b;
  opacity: 1;
  cursor: pointer;
}

/* Music Player */

.music-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--primary-clr);
  width: 50%;
  padding: 5px 10px;
  border-radius: 10px;
}

.music-player h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
}

.music-player p {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.6;
}

/* Music Player Progress */

#progress {
  visibility: hidden;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  background: rgba(163, 162, 164, 0.4);
  border-radius: 4px;
  margin: 32px 0 24px;
  cursor: pointer;
}

#progress::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(163, 162, 164, 0.9);
  width: 16px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  outline: 4px solid var(--primary-clr);
  box-shadow: 0 6px 10px rgba(5, 36, 28, 0.3);
}

/* Music Player Controls */

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

/* COOL BUTTONS by Adam Argyle (https://codepen.io/argyleink/pen/bGPaxVp) */

/* 
  @property used because the effect 
  transitions these within a gradient 
*/

@property --btn-conic-hint {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
  /* will transition 0%-100% */
}

@property --btn-effect-opacity {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
  /* will transition 0%-5% */
}

.controls button {
  --anchor-name: ;
  /* unique per instance */
  anchor-name: var(--anchor-name);

  /* used so the conic only animates the hint on hover-in */
  --btn-conic-hint-duration: 0s;
  --btn-conic-hint-delay: .5s;

  /* adaptive semi-transparent hover highlight */
  --highlight-color: light-dark(hsl(0 0% 0% / var(--btn-effect-opacity)),
      hsl(0 0% 100% / var(--btn-effect-opacity)));

  /* 
    2 layers: 
      - an opacity fading solid color layer
      - the conic gradient that does the radar effect
  */
  background:
    conic-gradient(var(--highlight-color) 0 0),
    conic-gradient(var(--highlight-color),
      var(--btn-conic-hint),
      transparent 0);

  @media (prefers-reduced-motion: no-preference) {
    /* transitions the @property props */
    transition:
      outline-offset 145ms var(--ease-4),
      --btn-conic-hint var(--btn-conic-hint-duration) var(--ease-in-out-4) var(--btn-conic-hint-delay),
      --btn-effect-opacity .7s ease-out;

    &>svg {
      transition: scale 1s var(--ease-spring-4);
    }
  }

  &:is(:hover, :focus-visible) {
    /* animate the conic to completion */
    --btn-conic-hint: 100%;
    /* give the conic completion duration */
    --btn-conic-hint-duration: 1s;
    /* give highlight some opacity */
    --btn-effect-opacity: 5%;

    &::before {
      opacity: 1;
      transform: none;
      transition-delay: calc(var(--btn-conic-hint-duration) + var(--btn-conic-hint-delay));
    }
  }

  @media (prefers-color-scheme: dark) {
    &:is(:hover, :focus-visible) {
      /* dark/dim screens need more highlight opacity */
      --btn-effect-opacity: 15%;
    }

  }

  &:active {
    outline-offset: 0px;

    &>svg {
      scale: .8;
    }
  }
}

/* support styles */
.controls button {
  font-family: inherit;
  fill: none;
  stroke: currentcolor;

  border: none;

  padding: 3ch;
  aspect-ratio: 1;
  border-radius: 1e3px;

  display: flex;
  place-items: center;

  cursor: pointer;
  outline-offset: 5px;

  z-index: 1;

  &::before {
    content: attr(aria-label);

    position: absolute;
    position-anchor: var(--anchor-name);
    position-try-fallbacks: flip-block;
    position-area: block-start;
    margin-block-end: 1ch;

    font-size: 1.25rem;
    font-weight: 200;
    text-align: center;

    opacity: 0;
    transform: translateY(5px);
    transition:
      opacity .5s var(--ease-out-4) 0s,
      transform .5s var(--ease-out-4) 0s;
  }
}

@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }
}

/* Text */
#link-to-work {
  all: unset;
}

#xxm {
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  user-select: none;
}

#xxm {
  overflow: hidden;
  touch-action: pan-up;
  color: #c4c4c4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-shadow: 0 0 5px #999999, 0 0 20px #000, 0 0 30px #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#xxm h1 {
  font-size: 60px;
  text-transform: uppercase;
}

#xxm a {
  text-decoration: none;
  color: #fff;
}

#xxm canvas {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}

/* Cool Aqua Wave by Daniel Muñoz (https://codepen.io/daniel-mu-oz/pen/YzoqoLb)*/


:root {
  --w: 300px;
  --wave: url('data:image/svg+xml,<svg width="1440" height="490" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" transform="rotate(0deg)" version="1.1"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(49, 96, 133, 1)"/><stop offset="100%" stop-color="rgba(49, 96, 133, 1)"/></linearGradient></defs><g class="layer"><title>Layer 1</title><path d="m-9638,343l80,-40.8c80,-41.2 240,-122.2 400,-106.2c160,16 320,131 480,155.2c160,24.8 320,-41.2 480,-40.9c160,-0.3 320,65.7 480,57.2c160,-8.5 320,-89.5 480,-122.5c160,-33 320,-16 480,-40.8c160,-24.2 320,-90.2 480,-65.4c160,24.2 320,139.2 480,187.9c160,49.3 320,32.3 480,-24.5c160,-57.2 320,-155.2 480,-196c160,-41.2 320,-24.2 480,-24.5c160,0.3 320,-16.7 480,-24.5c160,-8.2 320,-8.2 480,16.3c160,24.5 320,73.5 480,98c160,24.5 320,24.5 480,40.8c160,16.7 320,48.7 480,73.5c160,24.2 320,41.2 480,65.4c160,24.8 366,165.8 480,16.3c114,-149.5 309,-98.5 480,-179.7c171,-81.2 256,67.8 465,78.5c210,4.7 305,-94.9 495,-13.1c190,81.8 400,7.4 527,-27.4c127,-34.8 255,76.2 452,42.9c197,-33.3 301,9.3 381,-7.4l80,-16.3l0,245l-80,0c-80,0 -240,0 -400,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -400,0l-80,0l0,-147z" fill="white" id="svg_1"/></g></svg>');
}

@keyframes loader-timeout-fuse {

  0%,
  99.9% {
    opacity: 0.01;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

#loader-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  opacity: 1;
  z-index: 100000;
  width: 100%;
  height: 100%;

  background-blend-mode: color-dodge;
  background:
    radial-gradient(at 100% 20%,
      #FBCABF70,
      #0000 70%),
    radial-gradient(at 20% 20%,
      #79B8DF70,
      #0000 70%),
    radial-gradient(at 20% 100%,
      #EDA8A870,
      #0000 70%),
    radial-gradient(at 100% 100%,
      #D9F2FB70,
      #0000 70%),
    #213469;
  user-select: none;
  pointer-events: none;


  transition: visibility .5s, opacity .5s;
  animation: loader-timeout-fuse 0.001s 10s 1 forwards;
}

#loader-overlay.open {
  visibility: hidden;
  opacity: 0%;
}

#loader {
  position: fixed;
  z-index: 1000001;
  animation: loader-timeout-fuse 0.001s 10s 1 forwards;
}

.scene {
  position: relative;
  width: var(--w);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: var(--wave);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 740px;
  animation: wave 2.5s linear infinite;
}

.move {
  position: absolute;
  width: var(--w);
  aspect-ratio: 1;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  animation: rotateMove 10s linear infinite;
  mix-blend-mode: difference;
}

.scene i {
  --degree: 130px;
  --deg: 360deg;
  --cos: cos((var(--i) * var(--deg) / var(--total)));
  --sin: sin((var(--i) * var(--deg) / var(--total)));
  --transform: calc(var(--cos) * var(--degree)),
    calc(var(--sin) * var(--degree));
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: a;
  display: block;
  background: white;
  transform: translate(var(--transform));
}

@keyframes wave {
  0% {
    background-position-x: 740px;
  }

  100% {
    background-position-x: 0px;
  }
}

@keyframes rotateMove {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}