/* =============================================================
   Lulitas Designs · animations.css  ·  v2
   Reveals on scroll, sticker pop, washi tape "pegado".
   Sin cursor custom.
   ============================================================= */

/* ----------------------------------------------
   Reveal base
   ---------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ----------------------------------------------
   Polaroids — entrada con leve rotación final
   ---------------------------------------------- */
.polaroid {
  opacity: 0;
  transform: rotate(var(--rot-deg, 0deg)) translateY(40px) scale(.95);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.16,1,.3,1);
}
.polaroid.is-in {
  opacity: 1;
  transform: rotate(var(--rot-deg, 0deg)) translateY(0) scale(1);
}

/* ----------------------------------------------
   Tag cards (servicios) — entrada
   ---------------------------------------------- */
.tag-card {
  opacity: 0;
  transform: rotate(var(--tilt, -3deg)) translateY(30px) scale(.96);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    box-shadow .5s;
}
.tag-card.is-in {
  opacity: 1;
  transform: rotate(var(--tilt, -3deg)) translateY(0) scale(1);
}

/* ----------------------------------------------
   Why stickers — entrada
   ---------------------------------------------- */
.why-sticker {
  opacity: 0;
  transform: rotate(var(--tilt, 0deg)) translateY(20px) scale(.9);
  transition: opacity .7s var(--ease), transform .8s var(--ease-snap), box-shadow .4s;
}
.why-sticker.is-in {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg)) translateY(0) scale(1);
}

/* ----------------------------------------------
   Checklist items — chequear de a uno
   ---------------------------------------------- */
.check-item {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease-snap);
}
.check-item.is-in {
  opacity: 1;
  transform: translateX(0);
}
.check-tick {
  transform: scale(0) rotate(-30deg);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.check-item.is-in .check-tick {
  transform: scale(1) rotate(0);
  transition-delay: .25s;
}

/* ----------------------------------------------
   Washi tape — efecto "pegado" al ver el elemento
   ---------------------------------------------- */
.washi {
  opacity: 0;
  transform: translateX(-50%) scaleX(0) rotate(var(--tilt-w, -4deg));
  transform-origin: left center;
  transition: opacity .4s var(--ease), transform .55s var(--ease-snap);
}
.washi-top { --tilt-w: 3deg; }
.is-in > .washi,
.tag-card.is-in .washi,
.polaroid.is-in .washi,
.photo-frame.is-in .washi,
.hero-polaroid.is-in .washi {
  opacity: .92;
  transform: translateX(-50%) scaleX(1) rotate(var(--tilt-w, -4deg));
}
/* Para washis dentro de polaroids/cards, asegurar que disparen siempre */
.polaroid .washi,
.tag-card .washi,
.hero-polaroid .washi,
.photo-frame .washi {
  animation: washi-stick .6s var(--ease-snap) .2s both;
}
@keyframes washi-stick {
  from { opacity: 0; transform: translateX(-50%) scaleX(0) rotate(-4deg); }
  to   { opacity: .92; transform: translateX(-50%) scaleX(1) rotate(-4deg); }
}

/* ----------------------------------------------
   Stat números — pop al verlos
   ---------------------------------------------- */
.letter-stats > div {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease-snap);
}
.letter-stats.is-in > div {
  opacity: 1;
  transform: translateY(0);
}
.letter-stats.is-in > div:nth-child(2) { transition-delay: .12s; }
.letter-stats.is-in > div:nth-child(3) { transition-delay: .24s; }

/* ----------------------------------------------
   Sticker pop (hover sutil + entrada de stickers tag)
   ---------------------------------------------- */
.tag-sticker {
  animation: sticker-pop .6s var(--ease-snap) .3s both;
}
@keyframes sticker-pop {
  0%   { opacity: 0; transform: rotate(8deg) scale(.4); }
  60%  { opacity: 1; transform: rotate(-6deg) scale(1.15); }
  100% { transform: rotate(8deg) scale(1); }
}

/* ----------------------------------------------
   Hero title — entrada
   ---------------------------------------------- */
.hero-title,
.hero-hi,
.hero-text,
.hero-actions {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-line .9s var(--ease-snap) forwards;
}
.hero-hi      { animation-delay: .2s; }
.hero-title   { animation-delay: .35s; }
.hero-text    { animation-delay: .55s; }
.hero-actions { animation-delay: .75s; }
@keyframes hero-line {
  to { opacity: 1; transform: translateY(0); }
}

.hero-polaroid {
  opacity: 0;
  transform: rotate(-4deg) translateY(40px) scale(.95);
  animation: hero-pol 1.1s var(--ease-snap) .3s forwards;
}
@keyframes hero-pol {
  to { opacity: 1; transform: rotate(-4deg) translateY(0) scale(1); }
}

/* ----------------------------------------------
   Channels — entrada
   ---------------------------------------------- */
.channel {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease-snap), background .25s, border-color .25s;
}
.channel.is-in {
  opacity: 1;
  transform: translateX(0);
}
.note.is-in .channel:nth-child(1) { transition-delay: .1s; }
.note.is-in .channel:nth-child(2) { transition-delay: .2s; }
.note.is-in .channel:nth-child(3) { transition-delay: .3s; }

/* ----------------------------------------------
   Note pin — entrada con "pinchazo"
   ---------------------------------------------- */
.note-pin {
  opacity: 0;
  transform: translateX(-50%) rotate(-8deg) scale(.4);
  animation: pin-stick .7s var(--ease-snap) .4s forwards;
}
@keyframes pin-stick {
  60%  { opacity: 1; transform: translateX(-50%) rotate(-12deg) scale(1.2); }
  100% { transform: translateX(-50%) rotate(-8deg) scale(1); opacity: 1; }
}

/* ----------------------------------------------
   Page progress (sutil)
   ---------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--pink-deep), var(--blush-deep) 40%, var(--mint-deep));
  z-index: 200; width: 0%;
  transition: width .15s linear;
  border-radius: 0 4px 4px 0;
}

/* ----------------------------------------------
   Drawer entrance
   ---------------------------------------------- */
.drawer.is-open .drawer-links a {
  animation: drawer-in .55s var(--ease-snap) both;
}
.drawer.is-open .drawer-links a:nth-child(1) { animation-delay: .05s; }
.drawer.is-open .drawer-links a:nth-child(2) { animation-delay: .14s; }
.drawer.is-open .drawer-links a:nth-child(3) { animation-delay: .23s; }
.drawer.is-open .drawer-links a:nth-child(4) { animation-delay: .32s; }
.drawer.is-open .drawer-links a:nth-child(5) { animation-delay: .41s; }
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(10px) rotate(-2deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}