/*
# base
# hero
# nav
# section
# block
# footer
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=EB+Garamond:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  scroll-margin-top: var(--s);
}

:root {
  --c-1: hsl(264, 44%, 25%);
  --c-1-lighter: hsl(264, 44%, 30%);
  --c-1_color-darker: hsl(340, 90%, 82%);
  --c-1_color: hsl(340, 90%, 85%);
  --c-1_color-lighter: hsl(340, 90%, 90%);
  --c-2: hsl(336, 61%, 52%);
  --c-3: hsl(331, 54%, 43%);
  --c-4: hsl(320, 48%, 35%);
  --c-5: hsl(298, 41%, 27%);
  --c-6: hsl(264, 44%, 25%);
  --c-7: hsl(230, 63%, 20%);
  --c-button-shadow: rgba(0, 11, 53, 0.2);

  --h2: 5vmax;
  --h3: calc(1em + 2vmax);

  --s: 4vw;

  --ease: cubic-bezier(0.36, 0, 0.06, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-7: hsl(340, 90%, 60%);
    --c-6: hsl(336, 61%, 52%);
    --c-5: hsl(331, 54%, 43%);
    --c-4: hsl(320, 48%, 35%);
    --c-3: hsl(298, 41%, 27%);
    --c-2: hsl(264, 44%, 25%);
    --c-1_color-darker: hsl(230, 63%, 7.5%);
    --c-1_color: hsl(230, 55%, 10%);
    --c-1_color-lighter: hsl(230, 63%, 15%);
    --c-1: hsl(340, 90%, 85%);
    --c-1-lighter: hsl(340, 90%, 88%);
    --c-button-shadow: rgba(0, 11, 53, 0.8);
  }
}

html,
body {
  margin: 0;
  background: var(--c-1_color);
  color: var(--c-1);
  min-height: 100%;
  font-family: "EB Garamond", serif;
  font-display: swap;
  font-weight: bold; /* This fakes a bold font to create a more rounder typeface */
  scroll-behavior: smooth;
  font-size: 1.1rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* transition: background-color 3s, color 3s; */
  background: linear-gradient(-45deg, var(--c-2), var(--c-1_color));
}

.button__inner {
  background-image: url("./../images/bg-pattern.svg");
  overflow-x: hidden;
}

h1, h3 { 
  font-family: Bebas Neue, sans-serif;
  font-weight: normal;
}

h1,
h2 {
  font-weight: inherit;
}

h1 {
  font-size: 12vmin;
  padding: 0 1em 1em 0;
  margin: 0;
}

.hero-ingress {
  padding: 0 12vmin 12vmin;
  font-size: 1.5em;
}

h2 {
  font-size: var(--h2);
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.3em;
}
@media (min-width: 600px) {
  h2 {
    margin-bottom: -0.5em;
  }
}
h2.no-spacing {
  margin: 0;
  padding: 0;
}

header {
  position: relative;
}
header h2 {
  clip-path: inset(0 0 50% 0);
  transform: skew(-10deg);
}
header h2:last-of-type {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(49.7% 0% 0% 0);
  margin: 0;
  transform: scaleY(1.4) skew(30deg);
  transition: transform 2s var(--ease);
  color: var(--c-1-lighter);
}
header:hover h2:last-of-type {
  transform: scaleY(1) skew(-10deg);
}
h3 {
  font-size: var(--h3);
  font-weight: normal;
  line-height: 1.1;
}

h2,
h3,
.jt-i__text {
  --x: 0.7px;
  --y: 0.8px;

  text-shadow: calc(var(--x) * -4) calc(var(--x) * -4) 10px
      rgba(255, 255, 255, 0.301),
    0.7px 1px 1px rgba(167, 67, 162, 0.2),
    calc(var(--x) * 5) calc(var(--y) * 5) 3px rgba(100, 25, 96, 0.2),
    calc(var(--x) * 9) calc(var(--y) * 9) 5px rgba(122, 29, 91, 0.15),
    calc(var(--x) * 13) calc(var(--y) * 13) 7px rgba(49, 14, 248, 0.1),
    calc(var(--x) * 17) calc(var(--y) * 17) 9px rgba(27, 34, 131, 0.1);
}

@media (prefers-color-scheme: dark) {
  h2,
  h3,
  .jt-i__text {
    --x: 1px;
    --y: 1.5px;
    text-shadow: calc(var(--x) * -4) calc(var(--x) * -4) 10px
        rgba(255, 185, 240, 0.336),
      0.7px 1px 1px rgba(167, 67, 162, 0.2),
      calc(var(--x) * 1) calc(var(--y) * 1) 3px rgba(0, 0, 0, 0.3),
      calc(var(--x) * 2) calc(var(--y) * 2) 5px rgba(0, 0, 0, 0.2),
      calc(var(--x) * 5) calc(var(--y) * 5) 7px rgba(0, 0, 0, 0.2),
      calc(var(--x) * 7) calc(var(--y) * 7) 8px rgba(0, 0, 0, 0.2),
      calc(var(--x) * 9) calc(var(--y) * 9) 9px rgba(0, 0, 0, 0.15),
      calc(var(--x) * 13) calc(var(--y) * 13) 10px rgba(0, 0, 0, 0.1),
      calc(var(--x) * 17) calc(var(--y) * 17) 11px rgba(0, 0, 0, 0.1);
  }
}

/* @media (prefers-color-scheme: dark) {
  h2,
  h3 {
    --x: 1px;
    --y: 1.5px;
  }
}
a:hover h2,
a:hover h3,
a:hover .jt-i__text {
  --x: 1px;
  --y: 1.5px;
} */

a {
  color: inherit;
  font-family: inherit;
  text-decoration-color: var(--c-2);
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}
a:focus-visible {
  outline: none;
  background: var(--c-1);
  color: var(--c-1_color);
}

li {
  margin-top: 1em;
  font-weight: normal;
}

li::marker {
  color: var(--c-2);
}

.small {
  font-size: 0.7em;
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
}

.image {
  width: 100%;
  box-shadow: 0.1em 1em 1em 0 var(--c-1_color-darker);
  border-radius: 0.5em;
}

span svg {
  display: inline;
  width: 0.6em;
  margin-bottom: -0.1em;
}

/* hero */

.hero {
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  perspective: 200px;
  overflow: hidden;
  /* background-image: linear-gradient(to bottom, var(--c-6), var(--c-5)); */
}

.hero__effect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 2vw;
  position: absolute;
  top: 0;
  right: 5vw;
  transition: transform 2s;
  transform:rotate3d(0.3, -0.5,-1, 64deg)
}
.hero:hover .hero__effect {
  transform:rotate3d(0.3, -0.3,-1, 64deg)
}
.hero__dot {
  width: 10vw;
  height: 20vh;
  margin: 20px;
  filter: blur(20px);
  background: var(--c-1);
  opacity: 0.2;
}
.hero.hero--small {
  height: auto;
}
.hero.hero--small .hero__effect {
  top: auto;
  bottom: 5em;
}
.hero.hero--small .hero-ingress {
  padding-bottom: 0;
}
.hero.hero--small h1 {
  padding-bottom: 0;
}

.jt,
.jt-i {
  position: relative;
  display: inline-block;
}

.jt__row,
.jt-i__row {
  display: block;
  padding: 0 0.1em;
}
.jt__row:nth-child(1) {
  clip-path: polygon(0% 75%, 100% 75%, 100% 100%, 0% 100%);
}
.jt__row:nth-child(2) {
  clip-path: polygon(0% 50%, 100% 50%, 100% 75.5%, 0% 75.5%);
}
.jt__row:nth-child(3) {
  clip-path: polygon(0% 25%, 100% 25%, 100% 50.5%, 0% 50.5%);
}
.jt__row:nth-child(4) {
  clip-path: polygon(0% 0%, 100% -10%, 100% 35.5%, 0% 25.5%);
}
.jt__row:nth-child(5) {
  clip-path: polygon(0% -25%, 100% -45%, 100% -9.5%, 0% 0.5%);
}
.jt__row:nth-child(6) {
  clip-path: polygon(0% -50%, 100% -85%, 100% -44.4%, 0% -24.5%);
}

.jt__row.jt__row--sibling,
.jt-i__row.jt-i__row--sibling {
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}

.jt__text,
.jt-i__row {
  display: block;
  transform-origin: bottom left;
  transition: transform 2s var(--ease);
}
.jt-i__row {
  transform-origin: center center;
  transition-duration: 0.6s;
}
.jt__row:nth-child(1) .jt__text {
  transform: translateY(-0.1em);
}
.jt__row:nth-child(2) .jt__text {
  transform: translateY(-0.3em) scaleY(1.1);
}
.jt__row:nth-child(3) .jt__text {
  transform: translateY(-0.5em) scaleY(1.2) rotate(-1deg);
}
.jt__row:nth-child(4) .jt__text {
  transform: translateY(-0.7em) scaleY(1.3) rotate(-2deg);
}
.jt__row:nth-child(5) .jt__text {
  transform: translateY(-0.9em) scaleY(1.4) rotate(-3deg);
}
.jt__row:nth-child(6) .jt__text {
  transform: translateY(-1.1em) scaleY(1.5) rotate(-4deg);
}

.jt-i__row:nth-child(1) {
  clip-path: polygon(0% 0%, 120% 0%, 120% 30.5%, 0% 25.5%);
  transform: scaleX(0.95);
}
.jt-i__row:nth-child(2) {
  clip-path: polygon(0% 25%, 120% 30%, 120% 60%, 0% 70%);
  transform: scaleX(1.05);
}
.jt-i__row:nth-child(3) {
  clip-path: polygon(0% 69.5%, 120% 59.5%, 120% 120%, 0% 120%);
  transform: scaleX(0.95);
}

.hero:hover .jt__text,
.no-js .jt__row .jt__text {
  transform: translateY(0em);
}

.jt-i__trigger:hover .jt-i__row:nth-child(1),
.jt-i__trigger:focus .jt-i__row:nth-child(1) {
  transform: scaleX(1);
}
.jt-i__trigger:hover .jt-i__row:nth-child(2),
.jt-i__trigger:focus .jt-i__row:nth-child(2) {
  transform: scaleX(1);
}
.jt-i__trigger:hover .jt-i__row:nth-child(3),
.jt-i__trigger:focus .jt-i__row:nth-child(3) {
  transform: scaleX(1);
}

/* nav */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--h2);
  padding: var(--s);
  z-index: 2;
}
.nav.nav--small {
  position: relative;
  align-self: start;
  font-size: calc(var(--h2) * 0.7);
}
@media (max-aspect-ratio: 4/3) {
  .nav.nav--small {
    margin-bottom: 1em;
  }
}

.nav a {
  padding: 0.2em;
  display: block;
  transition: transform 0.4s var(--ease);
  transform: skewY(-5deg);
}
.nav a:nth-child(2) {
  transform: skewY(-7deg);
}
.nav a:nth-child(3) {
  transform: skewY(-9deg);
}
.nav a:after {
  height: 0;
}

.nav__current {
  background: var(--c-1);
  color: var(--c-1_color);
}

.skip-to-main {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em;
  transition: transform 0.4s var(--ease);
  transform: translateX(-101%) skewY(-5deg);
  background: var(--c-1);
  color: var(--c-1_color);
}

.skip-to-main:focus {
  transform: translateX(0) skewY(-5deg);
  outline: none;
}

/* sections */
section, .section {
  padding: var(--s);
}

section p, .section p {
  max-width: 30em;
  font-weight: normal;
}

/* block */

/* .block:nth-child(odd) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
} */

.block:nth-child(odd) p {
  text-align: start;
}

.block + .block {
  padding-top: var(--s);
}

figure {
  padding: 0;
  margin: var(--s) 0;
  max-width: 40em;
  font-size: 1.3em;
}
blockquote,
.ingress {
  text-align: start;
  padding: 0;
  margin: 0;
}
figcaption {
  text-align: end;
}

/* footer */
footer {
  padding: var(--s);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
footer *:nth-child(2) {
  justify-self: center;
}

footer *:last-child {
  justify-self: end;
}

.profile {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  clip-path: circle(40% at center center);
  transition: clip-path 1s var(--ease);
}

.profile:hover {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  clip-path: circle(50% at center center);
}

.profile__link {
  text-decoration: none;
}

.columns {
  display: grid;
  grid-gap: var(--s);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
  align-items: center;
}

@media (min-width: 600px) {
  .columns:nth-child(odd) .column:last-child {
    order: -1;
  }
  .columns .column:not(.no-skew):first-child {
    transform: skewx(5deg) translateX(3%);
  }
  .columns:nth-child(odd) .column:not(.no-skew):first-child {
    transform: skewx(-5deg) translateX(3%);
  }
}

@media (min-width: 600px) {
  .columns.columns--space {
    margin-top: 4em;
  }
}

iframe {
  width: 100%;
}

hr {
  border: none;
  padding: 1.5em;
}

.ratio {
  --x: 3px;
  --y: 2px;
  width: 100%;
  position: relative;
  background-color: var(--c-2);
  box-shadow: 10px 10px 0 0 var(--c-3);
  border-radius: 4px;
  overflow: hidden;
  z-index: 1;
  box-shadow: -4px -4px 20px 0px rgba(255, 255, 255, 0.2),
    0.7px 1px 1px 0px rgba(167, 67, 162, 0.15),
    calc(var(--x) * 1) calc(var(--y) * 1) 3px 0px rgba(167, 67, 162, 0.15),
    calc(var(--x) * 2) calc(var(--y) * 2) 5px 0px rgba(167, 67, 162, 0.2),
    calc(var(--x) * 5) calc(var(--y) * 5) 7px 0px rgba(167, 67, 162, 0.1),
    calc(var(--x) * 7) calc(var(--y) * 7) 8px 0px rgba(167, 67, 162, 0.1),
    calc(var(--x) * 9) calc(var(--y) * 9) 9px 0px rgba(167, 67, 162, 0.075),
    calc(var(--x) * 13) calc(var(--y) * 13) 10px 0px rgba(167, 67, 162, 0.05),
    calc(var(--x) * 17) calc(var(--y) * 17) 11px 0px rgba(167, 67, 162, 0.05);
}
@media (prefers-color-scheme: dark) {
  .ratio {
    box-shadow: -4px -4px 20px 0px rgba(255, 185, 240, 0.041),
      0.7px 1px 1px 0px rgba(167, 67, 162, 0.15),
      calc(var(--x) * 1) calc(var(--y) * 1) 3px 0px rgba(0, 0, 0, 0.15),
      calc(var(--x) * 2) calc(var(--y) * 2) 5px 0px rgba(0, 0, 0, 0.2),
      calc(var(--x) * 5) calc(var(--y) * 5) 7px 0px rgba(0, 0, 0, 0.1),
      calc(var(--x) * 7) calc(var(--y) * 7) 8px 0px rgba(0, 0, 0, 0.1),
      calc(var(--x) * 9) calc(var(--y) * 9) 9px 0px rgba(0, 0, 0, 0.075),
      calc(var(--x) * 13) calc(var(--y) * 13) 10px 0px rgba(0, 0, 0, 0.05),
      calc(var(--x) * 17) calc(var(--y) * 17) 11px 0px rgba(0, 0, 0, 0.05);
  }
}

.ratio--1-1 {
  padding-bottom: 100%;
}
.ratio--16-9 {
  padding-bottom: 56.25%;
}
.ratio--9-16 {
  padding-bottom: 177.78%
}

.ratio .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* .column {
  grid-column: 2;
} */

.center {
  text-align: center;
}

/* 3D Button */
button {
   font: inherit;
}
.button {
  font-size: 0.7em;
  border: none;
  background-color: var(--c-1_color);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  user-select: none;
  position: relative;
  z-index: 1;
  padding: 0;
  display: inline-block;
}

/* shadow */
.button:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 10px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--c-button-shadow);
  transition: transform 0.6s cubic-bezier(0, 0.9, 0.13, 0.9);
  transform: translate3D(0, 0, 0);
}
.button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-1_color-darker);
  z-index: -1;
}
.button:hover:before,
.button:focus:before {
  transform: translate3D(10px, 0px, 0);
}
.button:active:before {
  transform: translate3D(0, 0, 0);
}

/* End Shadow */
.button:focus,
.button:active {
  outline: none;
}

/* The button-part with the text */
.button__inner {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-1);
  padding: 1em 1.5em;
  background-color: var(--c-1_color-lighter);
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0, 0.9, 0.13, 0.9),
    background-color 0.3s cubic-bezier(0, 0.9, 0.13, 0.9);
  position: relative;
  transform: translate3D(0, -2px, 0);
}
.button:hover .button__inner,
.button:focus .button__inner {
  transform: translate3D(0, -10px, 0);
}

.button:active .button__inner {
  transform: translate3D(0, 0, 0);
}
.button:hover .button__inner,
.button:focus .button__inner {
  background-color: var(--c-1_color-lighter);
}

/* Button Secondary style */
.button--secondary {
  background-color: #00d18e;
  z-index: 0;
}
.button--secondary:after {
  background-color: #00d18e;
}
.button--secondary .button__inner {
  background-color: #00ffb2;
}
.button--secondary:hover .button__inner,
.button--secondary:focus .button__inner {
  background-color: #11ffb3;
}

/* slider */
.slider__scroller {
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.slider__inner {
  display: flex;
  scroll-behavior: smooth;
}
.slider .slide {
  height: 100%;
  width: auto;
  scroll-snap-align: start;
}
.slider__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
}