/* Theme Name: JK Visual Design */
@import "css/reset.css";
@import "css/variables.css";
@import "css/fonts.css";
@import "css/classes.css";
@import "css/scrollbar.css";
@import "css/preloader.css";
@import "css/site-header.css";
@import "css/buttons.css";
@import "css/main-navigation.css";
@import "css/page-services.css";
@import "css/page-contact.css";
@import "css/samples.css";
@import "css/samples-archive.css";
@import "css/samples-project.css";
@import "css/samples-single.css";
/* #### */











/* #### */
:root {
  --site-bg-color: hsl(0 0% 90% / 1);
}
[data-theme="dark"] {
  --site-bg-color: hsl(0 0% 5% / 1);
}

html {
  height: 100%;
  /* force vertical scrobblar... */
  overflow-y: scroll;
  /* ? is smooth better or what? it will still scroll smoothly anyways i guess... */
  /* scroll-behavior: smooth; */
  background-color: var(--site-bg-color);
  /* background: hsl(180 100% 50% / 1); */
}

body {
  /* background-color: var(--site-bg-color); */
  position: relative;
  min-height: 100%;
  align-items: center;
  color: var(--global-font-color);
  font-family: "Nettle Sans";
  font-feature-settings: "aalt";
  font-size: var(--base-font-size);
  line-height: 1.375;
  letter-spacing: var(--base-letter-spacing);
}


/* müsste es nicht in dieser reihenfolge passieren?...
gui
noise
color-bg-effects
main-bg...
*/
/* smart noise svg embedding... :) */
/* should use this and somehow invert the colors on light-theme...? */
/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%' height='100%'><filter id='noise'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' type='fractalNoise'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23noise)'/></svg>"); */
.global-noise-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("assets/images/noise-512-invert.webp");
  background-size: 256px;
  opacity: .25;
  mix-blend-mode: lighten;
  pointer-events: none;
}
[data-theme="dark"] {
  .global-noise-bg {
    background-image: url("assets/images/noise-512.webp");
    mix-blend-mode: darken;
  }
}
/* so in the end...?
the noise must be ontop of the elements...
but still below the GUI elements, we dont want noise there?...


*/




a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border: inherit;
  background: inherit;
  outline: inherit;
}

/* #### */

/* LIGHT- / DARK- MODE... */
.theme-toggle-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;

  #light-btn {
  }
  #dark-btn {
  }
}


/*
███████ ██ ████████ ███████     ██   ██ ███████  █████  ██████  ███████ ██████
██      ██    ██    ██          ██   ██ ██      ██   ██ ██   ██ ██      ██   ██
███████ ██    ██    █████       ███████ █████   ███████ ██   ██ █████   ██████
     ██ ██    ██    ██          ██   ██ ██      ██   ██ ██   ██ ██      ██   ██
███████ ██    ██    ███████     ██   ██ ███████ ██   ██ ██████  ███████ ██   ██
*/

:root {
  --site-header-height: min(220px, calc(100vw * (220/500)));

  /*@media (min-width: 425px) {*/
/*  @media (min-width: 768px) {
    --site-header-height: min(233px, calc(100vw * (220/500)));
  }*/
}

:root {
  --site-header-clip-ellipse-radiusX: 100%;
  @media (min-width: 768px) {
    --site-header-clip-ellipse-radiusX: 87.5%;
  }
  @media (min-width: 1024px) {
    --site-header-clip-ellipse-radiusX: 75%;
  }
  @media (min-width: 1440px) {
    --site-header-clip-ellipse-radiusX: 62.5%;
  }
  @media (min-width: 2000px) {
    --site-header-clip-ellipse-radiusX: 58%;
    /*at this value the ellipse ends left and right perfectly(~) at the middle of the site-header...*/
  }
}
.site-header {
  display: none;
  width: 100%;
  height: var(--site-header-height);
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  background: var(--site-header-bg-color);
  transition: clip-path var(--fade-duration) ease-in-out;
  clip-path: ellipse( var(--site-header-clip-ellipse-radiusX) 100% at center top );

  a.logo-link {
    aspect-ratio: 500 / 220;
    height: 100%;
    max-width: 100%;
    transition: all var(--fade-duration) ease-in-out;
    border-radius: 9999px;

    &:hover {
      /* background: var(--global-button-hover-bg-color); */
    }
    &:focus-visible {
      /* background: var(--global-button-focus-bg-color); */
    }

    svg.logo-svg {
      width: 100%;
      height: 100%;
      fill: var(--site-header-logo-fill-color);
    }
  }
}

.page-loaded {
  .site-header {
    display: flex;
    animation: slideFadeInFromTop var(--fade-duration);
  }
}

/*####*/
.main-nav-toggle-button {
  display: none;
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: calc(var(--square-button-size) * -.5);
}
.page-loaded {
  .main-nav-toggle-button {
    display: flex;
    animation: slideFadeInFromTop var(--fade-duration);

    @media (min-width: 768px) {
      display: none;
    }
  }
}




/*####*/
.main-nav {
  display: none;
}
.page-loaded {
  .main-nav {
    &.active {
      display: flex;
      animation: fadeIn var(--fade-duration);
    }

    &.fade-out {
      animation: fadeOut var(--fade-duration);
    }

    @media (min-width: 768px) {
      display: flex;
      animation: fadeIn var(--fade-duration);
    }
  }
}






/*SAMPLES-CONTROLS-TOGGLE*/
.samples-controls-toggle {
  display: none;
  position: fixed;
  bottom: 0;
  z-index: 10;
}
.page-loaded.post-type-archive-samples {
  .samples-controls-toggle {
    display: flex;
    animation: fadeIn var(--fade-duration);

    @media (min-width: 768px) {
      display: none;
    }
  }
}


/*SAMPLES-CAT-CONTROLS*/
.samples-controls-container {
  display: none;
}
.page-loaded.post-type-archive-samples {
  .samples-controls-container {
    &.active {
      display: flex;
      animation: fadeIn var(--fade-duration);
    }
    &.fade-out {
      animation: fadeOut var(--fade-duration);
    }
    @media (min-width: 768px) {
      display: flex;
      animation: fadeIn var(--fade-duration);
    }
  }
}
.AJAX-fade-out.post-type-archive-samples {
  .samples-controls-container {
    animation: fadeOut var(--fade-duration) forwards;
  }
}

/*
███    ███  █████  ██ ███    ██
████  ████ ██   ██ ██ ████   ██
██ ████ ██ ███████ ██ ██ ██  ██
██  ██  ██ ██   ██ ██ ██  ██ ██
██      ██ ██   ██ ██ ██   ████*/

.main-container {
  
  /* justify-content: center; */

  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;

  /* better to use mainNavHeight here... */
  /* but we need this cause mainNav is fixed... */
  /* margin-bottom: var(--grid); */
  /* margin-bottom: var(--menu-height); */
  /* padding-bottom: var(--grid); */
  /* again use last child to give margin... */
}

.main {
  position: relative;
  display: none;
  align-items: center;
}

.page-loaded {
  .main {
    display: flex;
    animation: fadeIn var(--fade-duration);

    &.fade-out {
      animation: fadeOut var(--fade-duration);
    }
  }
}



/*
██████  ███████ ██████  ██    ██  ██████
██   ██ ██      ██   ██ ██    ██ ██
██   ██ █████   ██████  ██    ██ ██   ███
██   ██ ██      ██   ██ ██    ██ ██    ██
██████  ███████ ██████   ██████   ██████*/

.viewport-mode-display {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  height: 25px;
  width: auto;
  background: hsl(0 100% 25% / 1.0);
  display: flex;
  justify-content: center;
  align-items: center;
}