/* Landing hero — logo (texto + manzanita con bounce) + chibi mascota. */

.landing {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  background:
    url('../assets/branding/pink%20pattern.png') repeat,
    #eb7a7a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Arco al pie del landing. Radio horizontal 100% para que las dos
     esquinas se solapen y formen un arco continuo (sin "kink" central). */
  border-bottom-left-radius: 100% 100px;
  border-bottom-right-radius: 100% 100px;
  /* landing.js actualiza --gleam-progress (0..1) según scroll. */
  --gleam-progress: 0;
}

/* Franja diagonal de luz que cruza el landing al scrollear.
   El elemento mide 200% en cada eje — la franja arranca fuera por
   arriba-izquierda y termina fuera por abajo-derecha. */
.landing__gleam {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 44%,
    rgba(255, 255, 255, 0.14) 47%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.14) 53%,
    transparent 56%
  );
  transform: translate(
    calc(-50% + var(--gleam-progress) * 100%),
    calc(-50% + var(--gleam-progress) * 100%)
  );
  mix-blend-mode: screen;
  z-index: 5;
  will-change: transform;
}

/* Layout: 2 columnas en desktop, stack vertical en móvil. */
.landing__layout {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.landing__logo-side {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Chibi alineada al bottom — su borde inferior queda a ras del bottom
   del landing (donde corta el rosa). */
.landing__chibi-side {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  height: 100%;
}

/* Stage del logo (texto + manzanita posicionada relativa). */
.landing__stage {
  position: relative;
  width: clamp(260px, 38vw, 440px);
  aspect-ratio: 1511 / 1337; /* aspect del PNG del texto */
  transform: translateY(22%);
}

.landing__text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  animation: drop-text 1.1s backwards;
}

/* Manzanita: wrapper (cursor tracking) > wobble > img (drop) */
.landing__apple-wrap {
  --cursor-x: 0;
  --cursor-y: 0;
  position: absolute;
  /* Sentada sobre la 'w' de slow. Porcentajes para que escale con el stage. */
  top: -55%;
  right: 10%;
  width: 45%;
  /* Cursor tracking: --cursor-x/y vienen de JS, normalizados -1..1. */
  transform:
    translate(
      calc(var(--cursor-x) * 14px),
      calc(var(--cursor-y) * 10px)
    );
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.landing__apple-wobble {
  width: 100%;
  animation: wobble-apple 4.5s 1.6s infinite ease-in-out;
  transform-origin: 50% 85%;
}

.landing__apple {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  /* Drop con squish al aterrizar. Per-keyframe timing evita overshoot
     durante la caída. */
  animation: drop-apple 1.2s 380ms backwards;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 12px rgba(180, 110, 80, 0.25));
}

/* Chibi mascota. Sin idle bob para que no se separe del bottom y deje
   un corte feo contra la siguiente sección. */
.landing__chibi {
  width: clamp(380px, 48vw, 720px);
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(120, 50, 50, 0.22));
  animation: chibi-rise 950ms 1.4s both cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes chibi-rise {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drop-text {
  0% {
    transform: translateY(-110vh) rotate(-4deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4);
  }
  60% {
    transform: translateY(0) rotate(0.5deg) scale(1.012);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
  }
  78% {
    transform: translateY(-1.2%) rotate(-0.3deg) scale(0.996);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes drop-apple {
  0% {
    transform: translateY(-110vh) rotate(20deg) scale(1);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4);
  }
  55% {
    transform: translateY(0) rotate(-3deg) scaleX(1.18) scaleY(0.82);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
  }
  72% {
    transform: translateY(-5%) rotate(2deg) scaleX(0.94) scaleY(1.06);
    animation-timing-function: ease-in-out;
  }
  87% {
    transform: translateY(-1%) rotate(-0.5deg) scaleX(0.99) scaleY(1.01);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0) rotate(0) scaleX(1) scaleY(1);
  }
}

@keyframes wobble-apple {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-2.5deg); }
  50%      { transform: rotate(0deg); }
  70%      { transform: rotate(2.5deg); }
}

/* Scroll hint al pie */
.landing__scroll-hint {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(96, 56, 32, 0.55);
  pointer-events: none;
  animation: hint-fadein 600ms 1.6s backwards ease-out;
}

.landing__scroll-arrow {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  animation: scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes hint-fadein {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* Responsive */

/* Desktop: manzana 5% más chica vs móvil — en pantalla grande se sentía
   gigante relativa al texto. */
@media (min-width: 481px) {
  .landing__apple-wrap {
    width: 42.75%;
  }
}

/* Tablet/móvil ancho: stackeamos logo arriba + chibi peeking abajo. */
@media (max-width: 880px) {
  .landing__layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding: 0;
  }

  .landing__logo-side {
    grid-row: 1;
    width: 100%;
    height: 100%;
    padding: 5vh 1rem 0;
  }

  /* Container del tamaño exacto de la chibi para que quede pegada al edge
     inferior del viewport. */
  .landing__chibi-side {
    grid-row: 2;
    width: 100%;
    height: clamp(230px, 36vh, 365px);
    overflow: hidden;
    align-items: flex-end;
  }

  .landing__chibi {
    height: clamp(230px, 36vh, 365px);
    width: auto;
    animation: chibi-rise 950ms 1.4s both cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* En móvil el chibi peeking ya invita a scrollear, el hint compite con la cara. */
  .landing__scroll-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .landing__stage {
    width: clamp(240px, 78vw, 400px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing__text,
  .landing__apple,
  .landing__apple-wobble,
  .landing__chibi,
  .landing__scroll-arrow,
  .landing__scroll-hint {
    animation: none;
  }
  .landing__apple-wrap {
    transition: none;
  }
}