@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: "AS";
  src: url(/CSS/fonts/Aston\ Script.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat";
}
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100dvh;
}

body {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  --cn1: 0 20% 80%;
  --cn2: 0 5% 95%;
  --cS: hsl(35, 75%, 75%);
  --cSl: hsl(from var(--cS) h 90% 90%);
  --cSd: hsl(from var(--cS) h 30% 30%);
  --c1: hsl(305, 90%, 85%);
  --c1l: hsl(from var(--c1) h 100% 90%);
  --c1d: hsl(from var(--c1) h 50% 20%);
  --pi: max(2em, calc(25vw - 10em));
  --bg: linear-gradient(hwb(var(--cn1) / 0%)),
    linear-gradient(
      to right bottom,
      hsl(from var(--c1d) h s l / 80%),
      hsl(from var(--c1) h s l / 60%)
    ),
    url(/IMG/F.jpg) repeat fixed center / cover;

  --f1: "Montserrat";
  --f2: "Dancing Script";
  --f3: "AS";
}

@media (pointer: coarse) {
  * {
    cursor: default !important;
  }
}

@keyframes In1 {
  from {
    transform: scale(20%);
    opacity: 0;
  }
  40%,
  100% {
    transform: scale(100%);
    opacity: 1;
  }
}

#Sobre {
  display: grid;
  place-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  user-select: none;
  transition: opacity 0s 5s;
  > div {
    box-sizing: content-box;
    width: 16em;
    height: 9em;
    padding-bottom: 1em;
    position: relative;
    animation: In1 0.75s 0.3s cubic-bezier(0.25, 0.1, 0, 1.25) backwards;
    transition: 1s 1.25s ease-in;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    filter: drop-shadow(rgba(from black r g b / 60%) 0 0 0.4rem);
    background-color: hsl(from var(--cS) h 30% 50%);
    &::before,
    &::after {
      content: "";
      position: absolute;
      display: block;
      left: 0;
    }
    cursor: pointer;
    &::before {
      content: "";
      position: absolute;
      display: block;
      bottom: 100%;
      left: 0;
      border-inline: 8em transparent solid;
      border-bottom: 8em solid var(--cS);
      transition: 1s 0.25s ease;
      transform-origin: bottom;
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-image: linear-gradient(to top left, var(--cS) 5%, var(--cSl));
      clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 100%, 0% 100%);
    }
    > img {
      display: block;
      width: 75%;
      position: absolute;
      top: 0;
      left: 50%;
      translate: -50% -50%;
      border: white solid 0.5em;
      pointer-events: none;
      transition: 1s ease;
      transform-origin: center bottom;
    }
    > span {
      font-family: var(--f2);
      position: relative;
      font-size: 2.5em;
      z-index: 2;
      font-weight: 800;
      color: white;
      font-style: italic;
    }
  }
  &:has(+ main.SA) {
    pointer-events: none;
    opacity: 0;
    > div {
      scale: 0%;
      &::before {
        scale: 100% 0%;
      }
      > img {
        transform: scale(40%);
      }
    }
    &::before,
    &::after {
      background-position-y: 100em;
    }
  }
  &::before,
  &::after {
    content: "";
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(/IMG/Puertas.png) repeat center right / min(200%, 50em);
    filter: contrast(0) brightness(2);
    transition: 5s ease-in-out;
    z-index: -1;
  }
  &::before {
    left: 0;
  }
  &::after {
    right: 0;
    transform: rotateY(180deg) rotateX(180deg);
  }
}

@property --ap {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}
@property --ap2 {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

@keyframes Fly {
  33% {
    translate: -0.2em -0.2em;
    rotate: -2deg;
  }
  66% {
    translate: 0.2em -0.2em;
    rotate: 2deg;
  }
  100% {
    translate: -0.2em 0.2em;
    rotate: -2deg;
  }
}

@keyframes Type {
  0% {
    background-position-x: 105%;
  }
  60%,
  100% {
    background-position-x: 0%;
  }
}

@keyframes Pong {
  to {
    transform: translateY(1em);
  }
}

main {
  overflow: hidden auto;
  height: 100dvh;
  mask-image: linear-gradient(
    to right bottom,
    #0000 var(--ap),
    #ffff var(--ap) var(--ap2),
    #0000 var(--ap2)
  );
  mask-repeat: no-repeat;
  pointer-events: none;
  transition: --ap 2.75s ease, --ap2 2.75s ease;
  transition-delay: 2.25s;
  will-change: --ap, --ap2, mask-image;
  background-color: white;
  perspective: 100em;
  > header,
  > section {
    padding-inline: var(--pi);
  }
  > header {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 2em;
    text-align: center;
    width: 100%;
    height: 100dvh;
    padding-bottom: 5em;
    user-select: none;
    background: var(--bg);
    > * {
      filter: drop-shadow(hwb(var(--cn2) / 90%) 0 0 0.25rem);
    }
    > img {
      width: 15em;
      pointer-events: none;
    }
    > p,
    > h1 {
      font-family: var(--f2);
      text-wrap: balance;
      font-size: 2em;
      line-height: 1.25em;
      font-weight: 700;
      color: white;
    }
    > p {
      color: var(--cSl);
      &:first-of-type {
        color: var(--cS);
        font-size: 1.4em;
        line-height: 1.25em;
        letter-spacing: 0.1em;
      }
    }
    > h1 {
      font-size: 3.5em;
    }
  }
  > section {
    padding-block: 4em;
    user-select: none;
    h4 {
      text-align: center;
      font-size: 1.8em;
      text-shadow: black 0 0 0.05rem;
    }
    &:first-of-type {
      background-color: var(--cSl);
      > div {
        border: 0.5em solid transparent;
        display: grid;
        grid-template-rows: repeat(2, max-content);
        grid-template: repeat(2, max-content) / repeat(4, max-content);
        gap: 0.5em;
        justify-content: space-evenly;
        text-align: center;
        grid-auto-flow: column;
        background: linear-gradient(white) padding-box,
          linear-gradient(
              to right bottom,
              var(--cS),
              var(--cSl),
              var(--cS),
              var(--cSl)
            )
            border-box;
        padding: 1em;
        border-radius: 1em;
        position: relative;
        filter: drop-shadow(hwb(0 0% 100% / 40%) 0 0 0.25rem);
        > span {
          font-weight: 800;
          &:nth-child(odd) {
            font-size: 1.25em;
          }
          &:nth-child(even) {
            font-size: 0.75em;
            font-family: "Calibri";
          }
        }
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 8em;
          height: 8em;
          background: url(/IMG/D1.svg) no-repeat center / contain;
          transform: translate(-50%, -50%) rotate(-30deg);
        }
        &::before {
          top: 0;
          left: 0;
        }
        &::after {
          bottom: 0;
          right: 0;
          rotate: 180deg;
        }
      }
    }
    &:nth-of-type(2) {
      transform-style: preserve-3d;
      display: block;
      color: white;
      background: linear-gradient(to left bottom, var(--c1), var(--c1d));
      text-align: center;
      position: relative;
      &::before {
        content: "";
        width: 100%;
        height: 18em;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url(/IMG/FE.png) repeat-x center 18em / auto 100%;
        opacity: 0;
        transition: 0.75s 0.5s ease;
        filter: hue-rotate(-45deg);
      }
      &:has(> p.View)::before {
        opacity: 1;
        background-position-y: 0;
      }
      > div {
        &:first-of-type {
          width: max-content;
          position: relative;
          margin-inline: auto;
          transform-style: preserve-3d;
          transform: translateZ(10em) scale(90%);
          > img {
            display: block;
            width: 20em;
            object-fit: cover;
            object-position: center top;
            aspect-ratio: 3 / 4;
            pointer-events: none;
            box-shadow: black 0 0 1.25rem -0.5rem;
          }
          &::before,
          &::after {
            content: "";
            position: absolute;
            width: 50%;
            height: 50%;
            background: url(/IMG/B.svg) no-repeat left top / contain;
            animation: Fly 6s ease-in-out infinite alternate;
            transform: translateZ(10em) scale(90%);
            filter: saturate(2)
              drop-shadow(hsl(from var(--cS) h s l / 40%) 0 0 0.5rem);
          }
          &::before {
            left: 0;
            top: 0;
          }
          &::after {
            right: 0;
            bottom: 0;
            transform: rotate(180deg) translateZ(10em) scale(90%);
          }
        }
      }
      > h2 {
        font-size: 2em;
        line-height: 1.5em;
        font-weight: bold;
        color: var(--cS);
        animation: Type ease-out;
        animation-timeline: view(y);
        margin-block: 1em;
        font-family: var(--f3);
        filter: drop-shadow(var(--cS) 0 0 0.1rem);
      }
      > p {
        text-wrap: balance;
        line-height: 1.4em;
        font-weight: 700;
        opacity: 0;
        text-shadow: black 0 0 0.1rem, black 0 0 0.25rem, black 0 0 0.5rem;
        transform: translateX(1em);
        transition: 0.75s 1s ease;
        font-size: 1.6em;
        font-family: var(--f2);
        margin-bottom: 2em;
        &.View {
          opacity: 1;
          transform: translateX(0em);
        }
      }
    }
    &:nth-of-type(3) {
      display: flex;
      flex-flow: column nowrap;
      gap: 1.5em;
      text-align: center;
      background: var(--bg);
      text-shadow: black 0 0 0.1rem, black 0 0 0.1rem;
      > h3 {
        font-size: 1.6em;
        font-weight: 800;
        color: var(--cS);
        text-shadow: var(--cS) 0 0 0.1rem, var(--cS) 0 0 0.1rem,
          black 0 0 0.1rem, black 0 0 0.1rem;
        padding: 0.25em 1em;
        line-height: 1em;
        font-family: var(--f3);
      }
      > span {
        color: white;
        font-size: 1.75em;
        font-weight: 500;
        font-family: var(--f2);
        &:first-of-type {
          font-size: 2.25em;
          text-wrap: balance;
          line-height: 1.4em;
          font-weight: 800;
          margin-bottom: 1em;
          letter-spacing: 0.1em;
        }
        &:nth-of-type(3) {
          font-size: 1.4em;
          font-style: italic;
        }
      }
    }
    &:nth-of-type(4) {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      gap: 2em;
      background-color: var(--cSl);
      > h4 {
        width: 100%;
        font-size: 2em;
        text-align: center;
        font-weight: 800;
        letter-spacing: 0.025em;
        text-shadow: black 0 0 0.05rem, black 0 0 0.05rem;
      }
      > article,
      > a {
        display: flex;
        flex-flow: column nowrap;
        flex: 0.1 1 15em;
        background-image: linear-gradient(
          to right bottom,
          white,
          hwb(0 100% 0% / 40%)
        );
        border-radius: 2em;
        overflow: hidden;
        animation: In1 ease-in-out;
        animation-timeline: view(y -10rem auto);
        text-decoration: none;
        flex: 0.3 0 15em;
        > img {
          width: 100%;
          max-height: clamp(12rem, calc(50vw - 10rem), 18rem);
          object-fit: cover;
          & + span {
            display: block;
            font-size: 1.75em;
            font-weight: 800;
            font-family: var(--f2);
            text-shadow: black 0 0 0.05rem;
            text-align: center;
            margin-top: 0.5em;
            line-height: 1em;
          }
        }
        > hr {
          display: block;
          width: 100%;
          border: unset;
          height: 0.15em;
          background-image: linear-gradient(
            90deg,
            var(--c1),
            var(--c1d),
            var(--c1)
          );
          border-radius: 10rem;
          margin-block: 1em;
        }
        > ul {
          padding: 1em;
          > li {
            display: block;
            font-size: 1em;
            font-weight: 500;
            text-shadow: black 0 0 0.05rem;
            list-style: none;
            margin-bottom: 0.5em;
            &::before {
              content: attr(data-C);
              font-weight: 700;
              font-style: italic;
              margin-right: 0.25em;
            }
          }
        }
      }
      > a {
        transition: scale 0.25s ease-in-out;
        > img {
          width: 100%;
          max-height: clamp(12rem, calc(50vw - 10rem), 18rem);
          object-fit: cover;
        }
        > div {
          padding: 1em;
          text-align: center;
          > span {
            color: black;
            display: block;
            &:first-of-type {
              font-size: 1.1em;
              text-shadow: black 0 0 0.05rem;
              font-weight: 700;
              text-wrap: balance;
              line-height: 1.5em;
              margin-bottom: 1em;
            }
          }
          > button {
            font-size: 1.1em;
            padding: 0.6em 1em;
            border-radius: 0.5em;
            font-weight: 600;
            letter-spacing: 0.025em;
            color: white;
            background-image: linear-gradient(
              to right top,
              hwb(var(--cn1)) 40%,
              var(--c1)
            );
            border: none;
            text-shadow: white 0 0 0.05rem, white 0 0 0.05rem;
            cursor: pointer;
          }
        }
        &:hover {
          scale: 105%;
        }
      }
    }
    &:nth-of-type(5) {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      text-align: center;
      background-color: var(--cSl);
      padding-top: 0;
      gap: 1em;

      > img {
        width: 15em;
      }
      > h4 {
        margin-bottom: 1em;
      }
      > span {
        font-size: 1.75em;
        font-weight: 800;
        text-shadow: black 0 0 0.05rem;
      }
      > p {
        font-size: 0.8em;
        font-weight: 800;
        text-shadow: black 0 0 0.05rem;
      }
    }
    &:nth-of-type(6) {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-evenly;
      gap: 2em 4em;
      background: var(--c1d)
        linear-gradient(-45deg, var(--c1l) 50%, transparent 50%) fixed;
      color: white;
      font-weight: 800;
      p,
      h4,
      h5 {
        color: white;
        text-shadow: black 0 0 0.1rem, black 0 0 0.25rem;
        font-weight: 700;
      }
      > h4 {
        width: 100%;
      }
      > article {
        flex: 0.4 1 16em;
        display: flex;
        flex-flow: column nowrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        gap: 1em;
        padding: 2em;
        background-color: rgba(from var(--cSl) r g b / 40%);
        backdrop-filter: blur(0.4rem);
        box-shadow: inset var(--c1d) 0 0 1.5rem -0.5rem;
        border-radius: 2em;
        > img {
          width: 12em;
          pointer-events: none;
        }
        > p {
          line-height: 1.4em;
          text-wrap: balance;
          font-style: italic;
        }
        > a {
          font-size: 1.1em;
          text-decoration: none;
          padding: 0.75em 1em;
          border-radius: 0.5em;
          text-shadow: black 0 0 0.05rem;
          border: none;
          color: var(--c1);
          text-shadow: var(--c1) 0 0 0.05rem;
          background-color: var(--c1d);
          box-shadow: inset var(--c1l) 0 0 1rem -0.25rem;
        }
        > h5 {
          font-size: 1.4em;
          font-weight: 800;
        }
      }
    }
    &:nth-of-type(7) {
      color: white;
      background-image: radial-gradient(at 100% 100%, var(--cSd), var(--c1d));
      > h4 {
        > a {
          color: white;
          text-decoration: underline;
        }
      }
      > img {
        display: block;
        margin-inline: auto;
        height: 5em;
        filter: contrast(0) brightness(1.75);
        animation: Pong 1.5s ease alternate infinite;
      }
    }
  }
  > footer {
    color: white;
    background-color: hwb(var(--cn1));
    padding: 2em;
    text-align: center;
    > h6 {
      color: var(--c1l);
      font-size: 2em;
      font-family: var(--f2);
    }
  }
  &.SA {
    pointer-events: all;
    --ap: 0%;
    --ap2: 100%;
  }
}

@supports not (background-attachment: fixed) {
  main > section:nth-of-type(6) {
    display: none;
    background-color: red !important;
  }
}