/* ============================================================
   Portada de entrada + lengüetazo
   ============================================================ */
:root{--dur:2.5s}   /* lo que dura el lenguetazo entero */

.intro{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:
    radial-gradient(60% 45% at 18% 12%,rgba(247,190,30,.22),transparent 60%),
    radial-gradient(55% 45% at 85% 20%,rgba(42,159,224,.18),transparent 60%),
    radial-gradient(70% 50% at 50% 105%,rgba(238,43,95,.16),transparent 65%),
    var(--cream);
  overflow:hidden;
}
body:not(.is-intro) .intro{pointer-events:none}

.intro__inner{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  padding:var(--pad);text-align:center;
  transition:transform .5s var(--ease),opacity .45s ease;
}
.intro .wm--xl{
  animation:pop .9s var(--bounce) both;
  transform-origin:50% 70%;
  transition:transform .55s var(--bounce);
}
.intro__tag{
  margin-top:1.1rem;font-size:clamp(.8rem,.74rem + .3vw,.95rem);
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  animation:rise .7s .25s var(--ease-out) both;
}
.intro__tag span{color:var(--pink)}
.intro__hint{
  margin-top:1.4rem;font-size:.85rem;color:var(--ink-3);
  animation:rise .7s .5s var(--ease-out) both;
}

/* botón acceder */
.btn-enter{
  position:relative;margin-top:2.4rem;
  padding:1.05rem 3.1rem;border-radius:99px;
  font-family:var(--f-body);font-weight:700;font-size:1.05rem;letter-spacing:.03em;
  color:#fff;background:var(--ink);
  box-shadow:0 14px 30px -14px rgba(22,32,74,.75);
  transition:transform .35s var(--bounce),box-shadow .35s var(--ease),background .3s;
  animation:rise .7s .38s var(--ease-out) both;
  overflow:hidden;
}
.btn-enter::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--green),var(--teal),var(--purple));
  opacity:0;transition:opacity .35s;
}
.btn-enter span{position:relative;z-index:4}
.btn-enter:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 36px -16px rgba(238,43,95,.6)}
.btn-enter:hover::before{opacity:1}
.btn-enter:active{transform:translateY(0) scale(.98)}

/* confeti de fondo */
.intro__deco{position:absolute;inset:0;z-index:1}
.dot{position:absolute;border-radius:99px;opacity:.85;animation:float 7s ease-in-out infinite}
.dot--1{width:14px;height:14px;background:var(--pink);top:18%;left:14%;animation-delay:-.2s}
.dot--2{width:10px;height:10px;background:var(--yellow);top:30%;right:16%;animation-delay:-1.4s}
.dot--3{width:18px;height:18px;background:var(--teal);bottom:22%;left:22%;animation-delay:-2.6s}
.dot--4{width:8px;height:8px;background:var(--purple);bottom:30%;right:24%;animation-delay:-3.4s}
.dot--5{width:12px;height:12px;background:var(--green);top:12%;right:34%;animation-delay:-4.1s}
.dot--6{width:9px;height:9px;background:var(--blue);bottom:14%;right:12%;animation-delay:-5.2s}

/* ---------- la boca viva del logotipo ---------- */
.wm__u.is-live{background-image:none}
.wm__u svg{width:100%;height:100%;overflow:visible}
.mouth__tongue{
  transform-box:fill-box;transform-origin:50% 4%;
  animation:idleTongue 4.5s ease-in-out 1.4s infinite;
}

/* ---------- el lenguetazo a la pantalla ----------
   REGLA DE ORO para que vaya fino: aqui solo se animan transform y opacity.
   Ni filter, ni mask, ni backdrop-filter en movimiento; esos obligan al
   navegador a repintar media pantalla en cada fotograma y era lo que hacia
   que se trabara. El "esta demasiado cerca para enfocar" se consigue
   cruzando dos imagenes (una nitida y otra ya desenfocada) que el navegador
   rasteriza una sola vez y luego solo mueve la GPU. */
.lamida{position:fixed;inset:0;z-index:210;pointer-events:none;opacity:0}
.lamida.activa{opacity:1}

/* El ancla es la BOCA (el labio, al 39% de alto del dibujo): la lengua cuelga
   de ella. Al crecer y al girar, todo pivota sobre la boca, como la cabeza de
   alguien que se acerca a lamer. El JS calcula tamaño y posiciones. */
.lamida__lengua{
  position:absolute;left:0;top:0;
  width:120vw;height:165vw;             /* lo pisa el JS con la medida real */
  transform-origin:50% 39%;
  transform:translate(var(--x0,0px),var(--y0,-40vh)) scale(.05);
  opacity:0;
  will-change:transform,opacity;backface-visibility:hidden;
}
.lamida__escorzo{width:100%;height:100%;transform-origin:50% 39%;will-change:transform}
.lamida__capa{position:absolute;inset:0;width:100%;height:100%}
.lamida__capa--suave{opacity:0;will-change:opacity}

.lamida.activa .lamida__lengua {animation:lenguaVuela   var(--dur) both}
.lamida.activa .lamida__escorzo{animation:lenguaEscorzo var(--dur) both}
.lamida.activa .lamida__capa--suave{animation:lenguaFoco var(--dur) both}
.lamida.activa .lamida__baba   {animation:babaEnElCristal var(--dur) both}

/* el reguero de baba que queda en el cristal */
.lamida__baba{
  position:absolute;inset:0;opacity:0;
  background:
    radial-gradient(58% 7% at 26% 40%,rgba(255,255,255,.34),transparent 72%),
    radial-gradient(44% 5% at 60% 47%,rgba(214,240,255,.30),transparent 72%),
    radial-gradient(66% 6% at 44% 57%,rgba(255,255,255,.26),transparent 72%),
    radial-gradient(38% 4% at 75% 36%,rgba(255,255,255,.22),transparent 72%),
    radial-gradient(50% 5% at 34% 64%,rgba(206,236,252,.22),transparent 72%),
    radial-gradient(120% 70% at 50% 50%,rgba(150,210,240,.12),transparent 70%);
}

/* hilos de saliva: se estiran cuando la boca se retira y se rompen */
.lamida__hilos{position:absolute;inset:0}
/* posicion y tamaño de cada hilo, sin estilos en linea */
.lamida__hilos i:nth-child(1){--x:17%;--w:7px;--h:24vh;--d:.03s}
.lamida__hilos i:nth-child(2){--x:31%;--w:5px;--h:17vh;--d:.09s}
.lamida__hilos i:nth-child(3){--x:46%;--w:10px;--h:31vh;--d:0s}
.lamida__hilos i:nth-child(4){--x:59%;--w:6px;--h:21vh;--d:.12s}
.lamida__hilos i:nth-child(5){--x:72%;--w:8px;--h:27vh;--d:.05s}
.lamida__hilos i:nth-child(6){--x:86%;--w:5px;--h:15vh;--d:.15s}
.lamida__hilos i{
  position:absolute;left:var(--x);top:-3vh;
  width:calc(var(--w) * 2.1);height:var(--h);margin-left:calc(var(--w) * -1.05);
  border-radius:44% 56% 50% 50% / 4% 4% 100% 100%;
  background:linear-gradient(180deg,
    rgba(196,236,252,.9) 0%,rgba(126,203,240,.82) 45%,
    rgba(255,255,255,.9) 82%,rgba(255,255,255,.5) 100%);
  box-shadow:0 0 10px rgba(140,210,245,.5);
  transform-origin:50% 0;transform:scaleY(0);opacity:0;
}
.lamida.activa .lamida__hilos i{animation:hiloEstira var(--dur) var(--d) both}

/* gotas que caen de los hilos al romperse */
.lamida__gotas{position:absolute;inset:0}
.lamida__gotas i:nth-child(1){--l:20%;--t:30%;--s:13px;--c:34vh;--d:.02s}
.lamida__gotas i:nth-child(2){--l:33%;--t:22%;--s:9px;--c:26vh;--d:.16s}
.lamida__gotas i:nth-child(3){--l:47%;--t:38%;--s:16px;--c:40vh;--d:.07s}
.lamida__gotas i:nth-child(4){--l:58%;--t:26%;--s:8px;--c:23vh;--d:.22s}
.lamida__gotas i:nth-child(5){--l:70%;--t:34%;--s:12px;--c:31vh;--d:.11s}
.lamida__gotas i:nth-child(6){--l:84%;--t:20%;--s:7px;--c:20vh;--d:.26s}
.lamida__gotas i{
  position:absolute;left:var(--l);top:var(--t);
  width:calc(var(--s) * 1.6);height:calc(var(--s) * 2.1);
  border-radius:50% 50% 58% 58%;
  background:radial-gradient(circle at 34% 26%,rgba(226,246,255,.95),rgba(126,203,240,.8) 58%,rgba(74,158,214,.55));
  box-shadow:0 0 8px rgba(140,210,245,.45);
  opacity:0;
}
.lamida.activa .lamida__gotas i{animation:gotaCae var(--dur) var(--d) both}

/* la marea: la saliva se expande hasta inundar la pantalla de azul */
.lamida__marea{position:absolute;inset:0;overflow:hidden}
.lamida.activa .lamida__marea{animation:mareaSeVa var(--dur) both}
.lamida__marea i{
  position:absolute;width:54vmax;height:54vmax;margin:-27vmax 0 0 -27vmax;
  border-radius:47% 53% 44% 56% / 52% 46% 54% 48%;
  transform:scale(0);opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 38% 32%,#8ADAF7 0%,#39A9E4 38%,#1C6FA8 70%,#16204A 100%);
}
.lamida__marea i:nth-child(1){left:50%;top:54%}
.lamida__marea i:nth-child(2){left:22%;top:70%;background:radial-gradient(circle at 42% 34%,#6FCCF2 0%,#2A9FE0 42%,#16204A 100%)}
.lamida__marea i:nth-child(3){left:80%;top:32%;background:radial-gradient(circle at 44% 38%,#9BE2F9 0%,#3FAEE6 40%,#1A5F92 78%,#16204A 100%)}
.lamida.activa .lamida__marea i{animation:mareaCrece var(--dur) both}
.lamida.activa .lamida__marea i:nth-child(2){animation-delay:.06s}
.lamida.activa .lamida__marea i:nth-child(3){animation-delay:.11s}

/* la portada no se recorta: se apaga mientras la lengua la tapa entera,
   que es como se esconde un corte en cine */
.intro.is-licking{animation:portadaSeVa var(--dur) both}
.intro.is-licking .wm--xl{animation:logoLame var(--dur) both}
.intro.is-licking .mouth__tongue{animation:lenguaDentro var(--dur) both}
.intro.is-licking .btn-enter{animation:botonPulsado var(--dur) both}
.intro.is-licking .intro__tag,
.intro.is-licking .intro__hint{animation:none;opacity:.25;transition:opacity .45s}

/* ---------- keyframes ---------- */
@keyframes pop{
  0%{opacity:0;transform:scale(.86) translateY(14px)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes idleTongue{
  0%,88%,100%{transform:translateY(0) scaleY(1) rotate(0deg)}
  92%{transform:translateY(6px) scaleY(1.16) rotate(-3deg)}
  96%{transform:translateY(2px) scaleY(1.04) rotate(2deg)}
}

/* === EL LENGUETAZO ==========================================
   0-17%   asoma y toma impulso        38-74%  arrastra por el cristal
   17-34%  se abalanza sobre ti        74-88%  se retira y deja la web
   ============================================================ */
@keyframes lenguaVuela{
  0%  {opacity:0;transform:translate(var(--x0),var(--y0)) scale(.045) rotate(0deg)}
  3%  {opacity:1;transform:translate(var(--x0),var(--y0)) scale(.062) rotate(0deg)}
  /* asoma y vibra, como quien coge carrerilla */
  5%  {transform:translate(calc(var(--x0) + .5vw),var(--y0)) scale(.072) rotate(-1.8deg)}
  7%  {transform:translate(calc(var(--x0) - .5vw),var(--y0)) scale(.066) rotate(1.8deg)}
  9%  {transform:translate(calc(var(--x0) + .42vw),var(--y0)) scale(.078) rotate(-1.4deg)}
  11% {transform:translate(calc(var(--x0) - .42vw),var(--y0)) scale(.072) rotate(1.4deg)}
  13% {transform:translate(calc(var(--x0) + .26vw),var(--y0)) scale(.084) rotate(-.9deg)}
  15% {transform:translate(var(--x0),calc(var(--y0) - 1.2vh)) scale(.068) rotate(0deg);
       animation-timing-function:cubic-bezier(.55,0,.72,.3)}          /* impulso */
  /* sale con perspectiva hacia ti */
  32% {transform:translate(calc(var(--x0) * .5 + var(--xc) * .5),calc(var(--y0) * .5 + var(--yc) * .5))
       scale(.38) rotate(-2deg);
       animation-timing-function:cubic-bezier(.3,.06,.15,1)}
  50% {transform:translate(calc(var(--xc) - 5vw),var(--yc)) scale(1.06) rotate(-5deg)}     /* CHOCA */
  55% {transform:translate(calc(var(--xc) - 3vw),calc(var(--yc) - .6vh)) scale(1.01) rotate(-4deg);
       animation-timing-function:cubic-bezier(.45,0,.4,1)}
  61% {transform:translate(calc(var(--xc) + 7vw),calc(var(--yc) - 1.4vh)) scale(1) rotate(0deg)}
  68% {transform:translate(calc(var(--xc) + 16vw),calc(var(--yc) - 1vh)) scale(1.01) rotate(3deg);
       animation-timing-function:cubic-bezier(.35,0,.35,1)}
  /* se retira hacia atras: los hilos de saliva se estiran detras */
  78% {opacity:1;transform:translate(calc(var(--x0) * .3 + var(--xc) * .7 + 4vw),calc(var(--y0) * .3 + var(--yc) * .7))
       scale(.44) rotate(5deg)}
  86%,100%{opacity:0;transform:translate(calc(var(--x0) * .75 + var(--xc) * .25),calc(var(--y0) * .75 + var(--yc) * .25))
       scale(.14) rotate(2deg)}
}
/* escorzo: de perfil (1) a de frente (--ky), con el aplastamiento del golpe */
@keyframes lenguaEscorzo{
  0%,15%  {transform:scale(1,1)}
  32%     {transform:scale(1.01,calc(1 - (1 - var(--ky,.5)) * .55))}
  50%     {transform:scale(1.09,calc(var(--ky,.5) * .86));
           animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  56%     {transform:scale(.985,calc(var(--ky,.5) * 1.06))}
  61%     {transform:scale(1.005,calc(var(--ky,.5) * .99))}
  66%,70% {transform:scale(1,var(--ky,.5))}
  86%,100%{transform:scale(.96,calc(var(--ky,.5) * 1.1))}
}

/* profundidad de campo: cruce con la copia desenfocada */
@keyframes lenguaFoco{
  0%,26%  {opacity:0}
  42%     {opacity:.85}
  50%,74% {opacity:1}
  86%,100%{opacity:.45}
}
@keyframes babaEnElCristal{
  0%,52%{opacity:0} 62%{opacity:.9} 74%{opacity:1} 84%{opacity:.6} 92%,100%{opacity:0}
}
/* los hilos se estiran, se afinan y se rompen */
@keyframes hiloEstira{
  0%,56%  {opacity:0;transform:scaleY(0) scaleX(1)}
  60%     {opacity:1;transform:scaleY(.34) scaleX(1);animation-timing-function:cubic-bezier(.3,.05,.2,1)}
  74%     {opacity:1;transform:scaleY(1) scaleX(.88)}
  82%     {opacity:.95;transform:scaleY(1.34) scaleX(.4)}      /* se afina */
  88%,100%{opacity:0;transform:scaleY(1.58) scaleX(.09)}       /* se rompe */
}
/* las gotas se sueltan y caen */
@keyframes gotaCae{
  0%,60%{opacity:0;transform:translate3d(0,0,0) scale(.35)}
  66%   {opacity:1;transform:translate3d(0,4px,0) scale(1);animation-timing-function:cubic-bezier(.45,0,.85,.4)}
  94%   {opacity:.7;transform:translate3d(0,var(--c,30vh),0) scale(.82)}
  100%  {opacity:0;transform:translate3d(0,calc(var(--c,30vh) * 1.15),0) scale(.75)}
}
/* la saliva se expande hasta inundar la pantalla */
@keyframes mareaCrece{
  0%,70%  {opacity:0;transform:scale(0) rotate(0deg)}
  74%     {opacity:1;transform:scale(.14) rotate(5deg);animation-timing-function:cubic-bezier(.3,.1,.25,1)}
  89%     {opacity:1;transform:scale(3.4) rotate(22deg)}
  100%    {opacity:1;transform:scale(4.1) rotate(30deg)}
}
/* y se disuelve dejando la web detras */
@keyframes mareaSeVa{
  0%,91%  {opacity:1;transform:scale(1)}
  100%    {opacity:0;transform:scale(1.06)}
}
/* la portada se apaga tapada por la marea */
@keyframes portadaSeVa{
  0%,48%  {opacity:1;transform:translate3d(0,0,0)}
  50%     {opacity:1;transform:translate3d(-5px,4px,0)}
  52%     {opacity:1;transform:translate3d(6px,-3px,0)}
  54%     {opacity:1;transform:translate3d(-3px,1px,0)}
  56%,84% {opacity:1;transform:translate3d(0,0,0)}
  90%,100%{opacity:0;transform:translate3d(0,0,0)}
}
@keyframes logoLame{
  0%{transform:none} 8%{transform:scale(1.05,.95)} 15%{transform:scale(.97,1.04)}
  32%,100%{transform:scale(.9) translateY(6px)}
}
@keyframes lenguaDentro{
  0%{transform:none} 4%{transform:translateY(5px) scaleY(1.5)}
  9%{transform:translateY(3px) scaleY(1.25)} 13%{transform:translateY(5px) scaleY(1.45)}
  20%,100%{transform:translateY(-6px) scaleY(.38)}
}
@keyframes botonPulsado{
  0%{transform:none} 5%{transform:scale(.93)} 14%{transform:scale(1)}
  32%,100%{transform:scale(.9);opacity:.85}
}

@media (max-width:700px){
  .lamida__baba{background-size:cover}
}

@media (prefers-reduced-motion:reduce){
  .intro .wm--xl,.intro__tag,.intro__hint,.btn-enter,.dot{animation:none}
  .mouth__tongue{animation:none}
  .lamida{display:none}
}