/* assets/postit.css
   Post-it flotante (derecha) pensado para convivir con texto.

   Reglas clave:
   - “Pegado arriba”: va como primer elemento del bloque superior.
   - Wrap del texto: float (no funciona si el post-it es flex-item directo).
   - Hover crece hacia el exterior: transform-origin a la izquierda, estando flotado a la derecha.
*/

/* Satisfy font loaded via <link> in Layout.astro */

/* No mostrar en initial */
.postit-float-right {
   display: none;
}

@media (min-width: 768px) {
   .postit-float-right {
      display: block;
      float: right;

      margin: calc(-4.5rem + 60px) 0 14px 18px;

      position: relative;
      z-index: 20;
      pointer-events: auto;
   }
}

/* En lg mantenemos la misma lógica (si quieres un ajuste distinto, cámbialo aquí) */
@media (min-width: 1024px) {
   .postit-float-right {
      margin-top: calc(-4.5rem + 60px);
   }
}

/* Limpia el float para que el contenedor lo “envuelva” y no se solape lo siguiente */
.postit-clear {
   clear: both;
   height: 0;
}

.postit {
   position: relative;
   border-radius: 14px;
   padding: 28px 14px 12px;
   user-select: none;

   /* tamaños: más pequeño en mobile, crece en md/lg */
   width: min(72vw, 140px);

   box-shadow: none;
   border: 1px solid rgba(0, 0, 0, 0.16);

   /* clave para crecer hacia afuera (derecha) */
   transform-origin: 0% 0%;
   transform: rotate(-3.4deg);

   transition:
      transform 400ms ease,
      box-shadow 400ms ease;
   will-change: transform;
}

@media (min-width: 768px) {
   .postit-author {
      font-size: 14px;
   }
   .postit-title {
      font-size: 22px;
   }
   .postit-quote {
      font-size: 16px;
   }
   .postit {
      width: 150px;
      padding: 30px 16px 14px;
   }
}

@media (min-width: 1024px) {
   .postit-author {
      font-size: 16px;
   }
   .postit-title {
      font-size: 24px;
   }
   .postit-quote {
      font-size: 18px;
   }
   .postit {
      width: 180px;
   }
}

.postit--yellow {
   background: linear-gradient(180deg, #ffe97a 0%, #ffd84a 100%);
}

.postit--green {
   background: linear-gradient(180deg, #bff7c7 0%, #6fe7a2 100%);
}

/* textura sutil */
.postit::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 14px;
   background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 1px,
      rgba(255, 255, 255, 0) 7px,
      rgba(255, 255, 255, 0) 12px
   );
   opacity: 0.18;
   pointer-events: none;
}

/* pushpin (chincheta SVG) */
.postit-pin {
   position: absolute;
   left: 50%;
   top: -20px;
   transform: translateX(-50%) rotate(15deg);
   width: 38px;
   height: auto;
   z-index: 2;
   pointer-events: none;
   filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.35));
}

/* texto */
.postit-title {
   font-family: "Satisfy", cursive;
   font-weight: 800;
   line-height: 1.05;
   color: rgba(10, 10, 10, 0.86);
   padding-top: 8px;
   text-align: center;
}

.postit-quote {
   font-family: "Satisfy", cursive;
   line-height: 1.25;
   color: rgba(10, 10, 10, 0.84);
   margin-top: 10px;
   text-align: center;
}
.postit-author {
   font-family: "Satisfy", cursive;
   line-height: 1.15;

   /* el autor a la derecha */
   text-align: right;

   /* efecto “cita” */
   margin-top: 10px;
   padding-right: 10px;

   color: rgba(10, 10, 10, 0.78);
}

/* apertura controlada por clase (la agrega ScrollReveal) */
.postit.is-open {
   animation: postit-open 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes postit-open {
   0% {
      opacity: 0;
      transform: translateY(10px) rotate(-6deg) scale(0.96);
   }
   100% {
      opacity: 1;
      transform: rotate(-3.4deg);
   }
}

/* hover: se acerca al usuario */
.postit:hover {
   transform: rotate(-1deg) scale(1.11);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   z-index: 60;
}

@media (prefers-reduced-motion: reduce) {
   .postit,
   .postit:hover {
      transition: none;
      animation: none;
   }
}