/* ============================================================
   NUBEL · sistema de motion
   Todo transform/opacity/clip-path (compositor). Sin librerías.
   Desactivado íntegro con prefers-reduced-motion.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-suave:cubic-bezier(.45,0,.15,1);
}

/* ---------- entrada de página ---------- */
@media (prefers-reduced-motion:no-preference){
  body{animation:pageIn .55s ease both}
}
@keyframes pageIn{from{opacity:0}}

/* cortina de salida entre páginas */
.pt-veil{
  position:fixed;inset:0;z-index:900;
  background:var(--granate);
  transform:translateY(101%);
  pointer-events:none;
}
.pt-veil.in{
  transition:transform .38s var(--ease-suave);
  transform:translateY(0);
  pointer-events:all;
}

/* ---------- intro de marca (solo home, 1ª visita de la sesión) ---------- */
.intro-marca{
  position:fixed;inset:0;z-index:950;
  background:var(--tinta);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.intro-marca .lineas{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.intro-marca .lineas span{
  border-left:1px solid rgba(251,249,245,.14);
  transform:scaleY(0);transform-origin:top;
}
.intro-marca .lineas span:first-child{border-left:0}
.intro-marca.play .lineas span{
  transition:transform .7s var(--ease-suave);
  transform:scaleY(1);
}
.intro-marca .lineas span:nth-child(2){transition-delay:.08s}
.intro-marca .lineas span:nth-child(3){transition-delay:.16s}
.intro-marca .lineas span:nth-child(4){transition-delay:.24s}
.intro-marca .marca{overflow:hidden;padding:6px 0}
.intro-marca .marca img{
  height:34px;width:auto;display:block;
  transform:translateY(120%);
}
.intro-marca.play .marca img{
  transition:transform .8s var(--ease-out) .3s;
  transform:none;
}
.intro-marca .sello{
  position:absolute;bottom:34px;left:0;right:0;
  text-align:center;
  color:rgba(251,249,245,.5);
  opacity:0;
}
.intro-marca.play .sello{transition:opacity .5s .6s;opacity:1}
.intro-marca.fuera{
  transition:transform .55s var(--ease-suave);
  transform:translateY(-101%);
}
body.intro-activa{overflow:hidden}

/* ---------- hero: titular por máscaras ---------- */
.t-mask{display:block;overflow:hidden}
.t-mask>span{display:block;transform:translateY(112%)}
.anim-listo .t-mask>span{
  transition:transform 1s var(--ease-out);
  transform:none;
}
.anim-listo .t-mask:nth-child(2)>span{transition-delay:.12s}
.hero__meta,.hero__pie,.phero__miga,.phero__pie{opacity:0;transform:translateY(14px)}
.anim-listo .hero__meta,.anim-listo .hero__pie,
.anim-listo .phero__miga,.anim-listo .phero__pie{
  transition:opacity .8s ease .45s,transform .8s var(--ease-out) .45s;
  opacity:1;transform:none;
}

/* Ken Burns sutil en heroes */
@media (prefers-reduced-motion:no-preference){
  .hero__img img,.phero__img img{
    transform:scale(1.08);
    animation:kenburns 3.5s var(--ease-out) forwards;
  }
}
@keyframes kenburns{to{transform:scale(1)}}
.hero__img,.phero__img{will-change:transform}

/* ---------- grid que se dibuja al entrar la sección ---------- */
@media (prefers-reduced-motion:no-preference){
  .seccion .grid-lines span,.pag-seccion .grid-lines span,
  .regalo .grid-lines span,.footer .grid-lines span{
    transform:scaleY(0);transform-origin:top;
  }
  .lineas-on .grid-lines span{
    transition:transform 1.1s var(--ease-suave);
    transform:scaleY(1);
  }
  .lineas-on .grid-lines span:nth-child(2){transition-delay:.1s}
  .lineas-on .grid-lines span:nth-child(3){transition-delay:.2s}
  .lineas-on .grid-lines span:nth-child(4){transition-delay:.3s}
}

/* ---------- reveals: stagger de hijos ---------- */
.stagger>*{
  opacity:0;transform:translateY(26px);
}
.stagger.visible>*{
  transition:opacity .7s ease,transform .7s var(--ease-out);
  opacity:1;transform:none;
}
.stagger.visible>*:nth-child(1){transition-delay:0s}
.stagger.visible>*:nth-child(2){transition-delay:.08s}
.stagger.visible>*:nth-child(3){transition-delay:.16s}
.stagger.visible>*:nth-child(4){transition-delay:.24s}
.stagger.visible>*:nth-child(5){transition-delay:.32s}
.stagger.visible>*:nth-child(6){transition-delay:.4s}
.stagger.visible>*:nth-child(7){transition-delay:.48s}
.stagger.visible>*:nth-child(8){transition-delay:.56s}
.stagger.visible>*:nth-child(n+9){transition-delay:.64s}
/* el propio contenedor stagger no se desplaza como bloque */
.stagger.reveal{opacity:1;transform:none;transition:none}

/* ---------- imágenes: revelado con cortina ---------- */
@media (prefers-reduced-motion:no-preference){
  .img-wipe{position:relative;overflow:hidden}
  .img-wipe::after{
    content:'';position:absolute;inset:0;z-index:2;
    background:var(--crema);
    transform:scaleY(1);transform-origin:bottom;
  }
  .seccion--oscura .img-wipe::after,.pag-seccion--oscura .img-wipe::after{background:var(--grafito)}
  .img-wipe img{transform:scale(1.12)}
  .visible .img-wipe::after,.img-wipe.visible::after{
    transition:transform .9s var(--ease-suave);
    transform:scaleY(0);
  }
  .visible .img-wipe img,.img-wipe.visible img{
    transition:transform 1.3s var(--ease-out) .1s;
    transform:scale(1);
  }
}

/* ---------- menú overlay: entrada escalonada ---------- */
.menu__lista li{overflow:hidden}
.menu__lista a{transform:translateY(105%)}
.menu.abierto .menu__lista a{
  transition:transform .7s var(--ease-out),color .22s,padding-left .3s;
  transform:none;
}
.menu.abierto .menu__lista li:nth-child(1) a{transition-delay:.05s}
.menu.abierto .menu__lista li:nth-child(2) a{transition-delay:.1s}
.menu.abierto .menu__lista li:nth-child(3) a{transition-delay:.15s}
.menu.abierto .menu__lista li:nth-child(4) a{transition-delay:.2s}
.menu.abierto .menu__lista li:nth-child(5) a{transition-delay:.25s}
.menu.abierto .menu__lista li:nth-child(6) a{transition-delay:.3s}
.menu.abierto .menu__lista li:nth-child(7) a{transition-delay:.35s}
.menu.abierto .menu__lista li:nth-child(8) a{transition-delay:.4s}
.menu__aside{opacity:0;transform:translateY(16px)}
.menu.abierto .menu__aside{
  transition:opacity .6s ease .45s,transform .6s var(--ease-out) .45s;
  opacity:1;transform:none;
}

/* ---------- header: se esconde al bajar ---------- */
.hdr{transition:background .35s,color .35s,box-shadow .35s,transform .45s var(--ease-suave)}
.hdr--oculto{transform:translateY(-102%)}

/* ---------- preview flotante en lista de cartas ---------- */
.carta-prev{
  position:fixed;z-index:80;
  width:min(240px,18vw);
  aspect-ratio:4/5;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transform:scale(.9);
  transition:opacity .25s ease,transform .35s var(--ease-out);
}
.carta-prev.on{opacity:1;transform:scale(1)}
.carta-prev img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){
  .cartas-lista .carta-fila .thumb{display:none}
}

/* ---------- cursor propio (solo puntero fino) ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursor-dot{
    position:fixed;z-index:990;top:0;left:0;
    width:10px;height:10px;border-radius:50%;
    background:#fff;
    mix-blend-mode:difference;
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width .25s,height .25s,opacity .3s;
    opacity:0;
  }
  .cursor-dot.on{opacity:1}
  .cursor-dot.grande{width:46px;height:46px}
}
@media (pointer:coarse){.cursor-dot{display:none}}

/* ---------- contador de cifras ---------- */
.cifra{font-variant-numeric:tabular-nums}

/* ---------- reduced motion: apagar todo ---------- */
@media (prefers-reduced-motion:reduce){
  .t-mask>span{transform:none}
  .hero__meta,.hero__pie,.phero__miga,.phero__pie{opacity:1;transform:none}
  .stagger>*{opacity:1;transform:none}
  .menu__lista a{transform:none}
  .menu__aside{opacity:1;transform:none}
  .pt-veil{display:none}
  .intro-marca{display:none}
  .carta-prev{display:none}
  .cursor-dot{display:none}
  .hdr--oculto{transform:none}
}