/* ==========================================
   FUENTE
========================================== */

@font-face {
  font-family: "Unique";
  src:
    url("./Fonts/Unique.woff2") format("woff2"),
    url("./Fonts/Unique.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   TEMA (para seguir usando clases Tailwind)
========================================== */

@theme {
  --font-unique: "Unique", sans-serif;

  --color-brand-bg: #2b2b2b;
  --color-brand-gold: #b57a3c;
  --color-brand-light: #f4f0e8;
}

/* ==========================================
   BASE
========================================== */

@layer base {
  body {
    font-family: "Unique", sans-serif;
    background-color: #2b2b2b;
    color: #b57a3c;
  }
}

/* ==========================================
   TARJETA
========================================== */

.fragment-1,
.fragment-2,
.fragment-3 {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #f4f0e8;
  color: #b57a3c;

  border-radius: 0.75rem;

  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  z-index: 10;

  transition:
    transform 2500ms ease-out,
    opacity 2500ms ease-out;
}

/* ==========================================
   RECORTES
========================================== */

.fragment-1 {
  clip-path: polygon(0% 0%, 100% 0%, 65% 45%, 0% 55%);
}

.fragment-2 {
  clip-path: polygon(100% 0%, 100% 100%, 35% 100%, 65% 45%);
}

.fragment-3 {
  clip-path: polygon(0% 55%, 65% 45%, 35% 100%, 0% 100%);
}

/* ==========================================
   TEXTO OCULTO
========================================== */

.reveal-text {
  opacity: 0;
  transform: scale(0.7);

  transition:
    transform 2500ms ease-out,
    opacity 2500ms ease-out;
}

/* ==========================================
   MÓVILES / TABLETS
========================================== */

.is-broken .fragment-1 {
  transform: translate(-30px, -20px) rotate(-8deg);
  opacity: 0.15;
}

.is-broken .fragment-2 {
  transform: translate(35px, 10px) rotate(10deg);
  opacity: 0.15;
}

.is-broken .fragment-3 {
  transform: translate(-15px, 35px) rotate(-6deg);
  opacity: 0.15;
}

.is-broken .reveal-text {
  opacity: 1;
  transform: scale(1.3);
}

/* ==========================================
   ESCRITORIO
========================================== */

@media (min-width: 1024px) {
  /* Anulamos la animación automática */
  .is-broken .fragment-1,
  .is-broken .fragment-2,
  .is-broken .fragment-3 {
    transform: none;
    opacity: 1;
  }

  .is-broken .reveal-text {
    opacity: 0;
    transform: scale(0.7);
  }

  /* Animación al hover */

  .group:hover .fragment-1 {
    transform: translate(-90px, -55px) rotate(-14deg);
    opacity: 0.1;
  }

  .group:hover .fragment-2 {
    transform: translate(100px, 30px) rotate(16deg);
    opacity: 0.1;
  }

  .group:hover .fragment-3 {
    transform: translate(-45px, 80px) rotate(-10deg);
    opacity: 0.1;
  }

  .group:hover .reveal-text {
    opacity: 1;
    transform: scale(1.3);
  }
}