@use "sass:math";

//* NONE
.none {
  height: 75px !important;
  pointer-events: all;
  position: absolute;
  width: 100%;
}

//* LINE
.line {
  background-color: transparent;
  border-top: 10px solid #fcb60d;
  bottom: 0;
  height: 105px;
  position: absolute;
  width: 100%;
}

//* LAYER
.layer {
  background-color: transparent;
  bottom: 0;
  border-radius: 50% 50% 0 0;
  box-shadow: 0px -30px 0px 20px #fcb60d;
  height: 100px !important;
  pointer-events: all;
  position: absolute;
  width: 100%;
}

//* Effect Sun
$nr: 20; // number of rays
$p: math.div(100%, $nr); // percent of circle allocated to a ray and gap after

$m: repeating-conic-gradient(#000 0% 0.5 * $p, transparent 0% $p);

.effectSun {
  background: var(--light);
  height: 320px;
  // height: 100%;
  top: 0 !important;
  mask: $m;
  -webkit-mask: $m;
  pointer-events: all;
  position: absolute;
  width: 100%;
  // z-index: -1;
}

//* Blurred
.blurred {
  position: absolute;
  top: 280px;

  height: 40px !important;
  width: 100%;

  background-color: var(--light);
  box-shadow: 0 -70px 130px 185px var(--light);
  overflow: hidden;
  pointer-events: all;
}

//* Straight
.straight-line {
  background-color: transparent;
  height: 90px !important;
  pointer-events: all;
  position: absolute;
  top: 230px;
  width: 100%;
}

.straight-line::after {
  background-color: #000000;
  border-bottom: 4px #fcb60d solid;
  content: "";
  height: 30px;
  position: absolute;
  width: 100%;
}

//* Linear Gradient
.linearGradient {
  background-image: repeating-linear-gradient(90deg, #fcb60d, transparent 15px);
  height: 430px;
  pointer-events: all;
  position: absolute;
  top: 0 !important;
  width: 100%;
}

// todo: FORMAS COMPLEJAS
//* WAVES
.waves-container {
  height: 430px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.waves {
  bottom: 0;
  pointer-events: all;
  position: absolute;

  path {
    fill: var(--light);
  }
}

.waves-right {
  width: 198px;
  height: 100px;
  border-bottom: transparent;
  border-right: transparent;
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(102deg);
  bottom: 90px;
  left: 380px;
  position: absolute;
  z-index: -1;
}

.waves-left {
  width: 198px;
  height: 100px;
  border-bottom: transparent;
  border-right: transparent;
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(334deg);
  left: -71px;
  bottom: 40px;
  position: absolute;
  z-index: -1;
}

//* Line V
.line-v-container {
  height: 430px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.line-font {
  background-color: #fcb60d;
  bottom: 0;
  clip-path: polygon(
    50% 100%,
    67% 0,
    100% 0,
    100% 70%,
    100% 100%,
    50% 100%,
    0 100%,
    0% 70%,
    0 0,
    33% 0
  );
  height: 65px;
  pointer-events: all;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.line-v {
  bottom: -30px;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-top: 100px solid #d08aff;
  clip-path: polygon(50% 65%, 100% 0, 50% 100%, 0 0);
  height: 0;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 0;
  z-index: 1;
}

//* Rhombus
.ribbon-container {
  height: 430px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.ribbon {
  background: #fcb60d;
  bottom: 85px;
  clip-path: polygon(50% 85%, 100% 0, 100% 12%, 50% 100%, 0 12%, 0 0);
  height: 139px;
  pointer-events: all;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.ribbon-line {
  background-color: var(--light);
  bottom: 145px;
  clip-path: polygon(50% 94%, 100% 0, 100% 6%, 50% 100%, 0 6%, 0 0);
  height: 125px;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.ribbon-border {
  // background: var(--light);
  clip-path: polygon(50% 60%, 101% 0, 101% 100%, -1% 100%, -1% 0);
  height: 200px;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

//* Doubleline
.doubleline-container {
  height: 430px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.doubleline-background {
  background: var(--light);
  bottom: 0;
  clip-path: polygon(50% 15%, 100% 0, 101% 100%, -1% 100%, 0 0);
  height: 177px;
  pointer-events: all;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.doubleline-left {
  background: #000000;
  bottom: 121px;
  clip-path: polygon(
    50% 50%,
    100% 0,
    101% 50%,
    50% 100%,
    50% 100%,
    -1% 50%,
    0 0
  );
  height: 46px;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.doubleline-right {
  background: #fcb60d;
  bottom: 131px;
  clip-path: polygon(
    50% 50%,
    100% 0,
    101% 50%,
    50% 100%,
    50% 100%,
    -1% 50%,
    0 0
  );
  height: 46px;
  position: absolute;
  width: 100%;
  z-index: 0;
}

//* Semicircle
.semicircle-container {
  height: 430px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.semicircle-top {
  background-color: #fcb60d;
  border-radius: 50%;
  box-shadow: 1px 2px 0 #fcb60d;
  height: 383px;
  left: -129px;
  position: absolute;
  top: -331px;
  transform: rotate(3deg);
  width: 275px;
  z-index: 0;
}

.semicircle-top-border {
  border-radius: 50%;
  box-shadow: 1px 2px 0 #fcb60d;
  height: 378px;
  left: -129px;
  top: -315px;
  position: absolute;
  width: 277px;
  z-index: 0;
}

.semicircle-background {
  background-color: var(--light);
  bottom: 0;
  height: 50px;
  pointer-events: all;
  position: absolute;
  width: 100%;
}

.semicircle {
  border-radius: 50%;
  bottom: 100px;
  box-shadow: 91px 88px 0 #fcb60d;
  height: 404px;
  left: -150px;
  position: absolute;
  transform: rotate(3deg);
  width: 140%;
  z-index: 0;
}

.semicircle-medium {
  border-radius: 50%;
  bottom: 80px;
  box-shadow: 91px 88px 0 #000;
  height: 390px;
  left: -150px;
  position: absolute;
  transform: rotate(3deg);
  width: 142%;
  z-index: 0;
}

.semicircle-back {
  border-radius: 50%;
  bottom: 50px;
  box-shadow: 91px 125px 0px 15px var(--light);
  height: 450px;
  left: -134px;
  position: absolute;
  transform: rotate(3deg);
  width: 141%;
  z-index: 0;
}

.semicircle-border {
  border-radius: 50%;
  box-shadow: 1px 2px 0 #fcb60d;
  height: 390px;
  left: -129px;
  position: absolute;
  transform: rotate(3deg);
  width: 140%;
  z-index: 0;
}

@media (max-width: 375px) {
  .semicircle-back {
    width: 155%;
  }

  .semicircle-border {
    width: 155%;
  }

  .semicircle-medium {
    width: 155%;
  }

  .semicircle {
    width: 155%;
  }
}

//* Intercepted
.intercepted-container {
  height: 430px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.intercepted-background {
  background-color: var(--light);
  bottom: 0;
  height: 140px;
  pointer-events: all;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.intercepted-lines {
  border-radius: 50%;
  bottom: 120px;
  box-shadow: 39px 10px 0 var(--light);
  height: 444px;
  left: -105px;
  position: absolute;
  // top: -265px;
  transform: rotate(5deg);
  width: 135%;
  z-index: 1;
}

.intercepted-lines-button {
  border-radius: 50%;
  bottom: 90px;
  box-shadow: 75px -2px 0 #fcb60d;
  height: 444px;
  left: -105px;
  position: absolute;
  // top: -232px;
  transform: rotate(5deg);
  width: 135%;
  z-index: 1;
}

.intercepted-lines-left {
  bottom: 145px;
  width: 165%;
  height: 444px;
  position: absolute;
  border-radius: 50%;
  right: -35px;
  transform: rotate(12deg);
  box-shadow: -20px 12px 0px 15px #fcb60d;
  z-index: 1;
}

.intercepted-lines-button-left {
  border-radius: 50%;
  bottom: 200px;
  box-shadow: -24px 12px 0px 15px var(--light);
  height: 444px;
  position: absolute;
  right: -0px;
  transform: rotate(25deg);
  width: 170%;
  z-index: 0;
}

//* Side Circle
.side-circle-container {
  height: 430px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.side-circle-background {
  background: var(--light);
  bottom: 0;
  height: 146px;
  pointer-events: all;
  position: absolute;
  width: 100%;
}

.side-circle {
  border: 5px solid #fff;
  border-radius: 50%;
  bottom: 140px;
  box-shadow: 70px -9px 0px 37px #fcb60d;
  height: 430px;
  left: -150px;
  position: absolute;
  // top: -140px;
  width: 150%;
  z-index: 1;
}

.side-circle-small {
  border-bottom: 50px solid #000000;
  border-left: 50px solid transparent;
  border-right: 50px solid #000000;
  border-top: 50px solid transparent;
  bottom: 165px;
  height: 0;
  position: absolute;
  right: 0;
  width: 0;
  z-index: 0;
}

.side-circle-back {
  border-radius: 50%;
  bottom: 140px;
  box-shadow: 36px -9px 0px 62px var(--light);
  height: 430px;
  left: -145px;
  position: absolute;
  width: 150%;
  z-index: 0;
}

@media (max-width: 430px) {
  .side-circle-small {
    left: 76%;
    bottom: 80%;
  }

  .side-circle {
    width: 155%;
    bottom: 75%;
  }

  .side-circle-back {
    width: 155%;
    bottom: 75%;
  }
}