/* Secuencia de entrada: puerta, intro y marca. El resto vive en estilo.css */
:root{
    --navy:#002856;
    --gris:#423F40;
    --blanco:#ffffff;
    --negro:#05070a;
    --fuente:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  }
  /* Solo el bloqueo de scroll durante la entrada. El color y la tipografia
     los pone estilo.css: aqui pintar el body en negro oscureceria el catalogo. */
  body{overflow:hidden}
  /* sin scroll de lado: en móvil <body> es el que se desplaza (estilo.css, «raíz 2») */
  body.dentro{overflow-x:hidden;overflow-y:auto}

  /* ============================================================
     ESCENA 0 — LA PUERTA
     Negro, logo, un boton. El clic es lo que desbloquea el audio:
     ningun navegador permite sonido en autoplay sin gesto del usuario.
     ============================================================ */
  .puerta{
    position:fixed;inset:0;z-index:100;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:38px;background:var(--negro);
    transition:opacity .7s ease, visibility .7s;
  }
  .puerta.oculta{opacity:0;visibility:hidden;pointer-events:none}

  /* El hero de fondo, muy oscurecido y desenfocado: da profundidad sin distraer. */
  .puerta-fondo{
    position:absolute;inset:0;overflow:hidden;
  }
  .puerta-fondo video{
    width:100%;height:100%;object-fit:cover;
    filter:blur(26px) brightness(.28) saturate(.7);
    transform:scale(1.14);
  }
  .puerta-fondo::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(60% 60% at 50% 50%, rgba(5,7,10,.55) 0%, rgba(5,7,10,.94) 100%);
  }

  .puerta-contenido{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:38px;
    animation:puertaEntra .55s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes puertaEntra{
    from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}
    to{opacity:1;transform:none;filter:none}
  }
  /* El logo enciende sus bordes. drop-shadow sigue el canal alfa del PNG,
     asi que el halo calca la silueta del rinoceronte, no una caja. */
  .puerta-logo{position:relative;width:min(320px,62vw)}
  .puerta-logo img{
    width:100%;height:auto;display:block;
    animation:encender .7s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes encender{
    0%{
      opacity:.18;
      filter:brightness(.3) drop-shadow(0 0 0 rgba(255,255,255,0));
    }
    35%{
      opacity:.85;
      filter:brightness(.85) drop-shadow(0 0 7px rgba(255,255,255,.45));
    }
    68%{
      opacity:1;
      filter:brightness(1.2)
             drop-shadow(0 0 22px rgba(255,255,255,.9))
             drop-shadow(0 0 58px rgba(0,120,220,.45));
    }
    100%{
      opacity:1;
      filter:brightness(1)
             drop-shadow(0 0 13px rgba(255,255,255,.5))
             drop-shadow(0 0 40px rgba(0,120,220,.22));
    }
  }

  /* Sin barridos deslizantes: el logo solo enciende. */

  /* ============================================================
     ESCENA 1 — LA INTRO
     ============================================================ */
  .intro{
    position:fixed;inset:0;z-index:90;background:#000;
    opacity:0;visibility:hidden;
    transition:opacity .5s ease, visibility .5s;
  }
  .intro.activa{opacity:1;visibility:visible}
  .intro video{width:100%;height:100%;object-fit:cover;display:block}

  /* El golpe de salida: escala + desenfoque, como si la camara atravesara el barro. */
  .intro.saliendo{
    animation:atravesar .6s cubic-bezier(.7,0,.84,0) forwards;
  }
  @keyframes atravesar{
    0%{opacity:1;transform:scale(1);filter:blur(0)}
    55%{opacity:1;transform:scale(1.22);filter:blur(3px)}
    100%{opacity:0;transform:scale(1.5);filter:blur(22px)}
  }

  /* ---------- ESCENA 1b — LA MARCA ----------
     Cierra la intro. El logo aterriza y enciende en el sitio, sin barridos. */
  .marca{
    /* inset negativo: la sacudida mueve el panel hasta 9px y si midiera
       exactamente la pantalla asomaria el video por los bordes. */
    position:fixed;inset:-20px;z-index:93;background:var(--negro);
    display:grid;place-items:center;
    opacity:0;visibility:hidden;
  }
  .marca.activa{opacity:1;visibility:visible}

  /* El logo no aparece: aterriza. Entra a escala 1.75 desde el punto donde
     estaba la cabeza del rinoceronte y frena en seco, con rebote corto. */
  .marca-caja{position:relative;width:min(340px,64vw)}
  .marca-caja img{width:100%;height:auto;display:block}
  .marca.activa .marca-caja{
    animation:marcaEntra .4s cubic-bezier(.2,.9,.25,1.08) both;
  }
  @keyframes marcaEntra{
    0%{opacity:0;transform:scale(1.75);filter:blur(22px)}
    45%{opacity:1}
    72%{transform:scale(.975);filter:blur(0)}
    100%{opacity:1;transform:scale(1);filter:blur(0)}
  }

  /* Sacudida de camara en el golpe. */
  .marca.activa{animation:sacudida .34s cubic-bezier(.36,.07,.19,.97) both}
  @keyframes sacudida{
    0%{transform:translate3d(0,0,0)}
    18%{transform:translate3d(-9px,5px,0)}
    34%{transform:translate3d(7px,-4px,0)}
    52%{transform:translate3d(-5px,-3px,0)}
    70%{transform:translate3d(3px,2px,0)}
    100%{transform:translate3d(0,0,0)}
  }

  /* Onda expansiva del impacto. */
  .onda{
    position:absolute;left:50%;top:50%;width:40vmin;height:40vmin;
    margin:-20vmin 0 0 -20vmin;border-radius:50%;
    border:2px solid rgba(255,255,255,.55);
    opacity:0;pointer-events:none;
  }
  .marca.activa .onda{animation:expande .6s cubic-bezier(.16,1,.3,1) .04s both}
  .marca.activa .onda.dos{animation-delay:.14s}
  @keyframes expande{
    0%{transform:scale(.15);opacity:0}
    14%{opacity:.85}
    100%{transform:scale(3.2);opacity:0}
  }

  /* Salida. Especificidad mayor que .marca.activa para ganarle la animacion. */
  .marca.activa.saliendo{animation:marcaSale .45s cubic-bezier(.7,0,.84,0) forwards}
  @keyframes marcaSale{
    0%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.16)}
  }

  /* El logo se enciende en el sitio, sin desplazarse: el halo sigue la
     silueta via drop-shadow sobre el alfa del PNG. */
  .marca.activa .marca-caja img{
    animation:fulgor .68s cubic-bezier(.3,0,.2,1) .05s both;
  }
  @keyframes fulgor{
    0%{filter:brightness(.85) drop-shadow(0 0 0 rgba(255,255,255,0))}
    26%{filter:brightness(1.35)
        drop-shadow(0 0 26px rgba(255,255,255,.95))
        drop-shadow(0 0 70px rgba(0,120,220,.5))}
    100%{filter:brightness(1)
        drop-shadow(0 0 14px rgba(255,255,255,.5))
        drop-shadow(0 0 44px rgba(0,120,220,.25))}
  }

  /* Halo suave que respira detras de la marca */
  .marca-caja::before{
    content:"";position:absolute;inset:-28% -18%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.14) 0%, transparent 70%);
    opacity:0;
  }
  .marca.activa .marca-caja::before{animation:halo .65s ease-out .08s both}
  @keyframes halo{0%{opacity:0;transform:scale(.85)}45%{opacity:1}100%{opacity:.5;transform:scale(1)}}

  .flash{
    position:fixed;inset:0;z-index:95;background:#fff;
    opacity:0;pointer-events:none;
  }
  .flash.dispara{animation:destello .4s ease-out forwards}
  @keyframes destello{
    0%{opacity:0}
    12%{opacity:.82}
    100%{opacity:0}
  }

  .saltar{
    position:absolute;top:26px;right:clamp(20px,5vw,64px);z-index:92;
    background:none;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.75);
    border-radius:999px;padding:9px 18px;font:inherit;
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    cursor:pointer;transition:border-color .3s,color .3s;
  }
  @media(hover:hover){.saltar:hover{border-color:#fff;color:#fff}}

  .barra{
    position:absolute;left:0;bottom:0;height:2px;width:0;z-index:92;
    background:linear-gradient(90deg, rgba(255,255,255,.35), #fff);
  }

  /* ============================================================
     ESCENA 2 — EL SITIO
     ============================================================ */
  .sitio{opacity:0;transition:opacity .8s ease .1s}
  .sitio.visible{opacity:1}

  .hero{
    /* svh, no dvh: mismo selector que .hero en index.astro (esta regla pierde
       el cascade por orden de hojas, pero si algún día cambia el orden, que no
       herede silenciosamente un contrato de vh distinto). dvh seguiría a la
       barra de Safari en iOS y el texto anclado abajo «rebotaría» al esconderla. */
    position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
    background:radial-gradient(90% 60% at 78% 22%, #d59a4a 0%, rgba(213,154,74,0) 55%), #0a1a24;
  }
  .hero video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 60%;
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to bottom, rgba(5,7,10,.72) 0%, rgba(5,7,10,.28) 38%, rgba(5,7,10,.10) 55%, rgba(5,7,10,.85) 100%),
      radial-gradient(120% 80% at 50% 0%, rgba(0,40,86,.35) 0%, transparent 60%);
    pointer-events:none;
  }

  .contenido{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 clamp(20px,5vw,64px) clamp(56px,9vh,110px);
    max-width:1000px;
  }
  .kicker{
    font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
    color:rgba(255,255,255,.72);margin-bottom:20px;
  }
  h1{
    font-size:clamp(44px,8.5vw,124px);
    line-height:.92;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;
  }
  h1 .linea{display:block;overflow:hidden}
  h1 .linea span{display:block;transform:translateY(105%)}
  .sitio.visible h1 .linea span{animation:subir 1.05s cubic-bezier(.16,1,.3,1) forwards}
  .sitio.visible h1 .linea:nth-child(2) span{animation-delay:.13s}
  /* .scroll (indicador del hero) vive SOLO en el <style> de index: el tribunal
     purgo su duplicado legacy de aqui para que ninguna reordenacion de hojas
     pueda resucitarlo sin su media query de ocultacion. */
  .kicker,.sub{opacity:0}
  .sitio.visible .kicker,.sitio.visible .sub{animation:aparecer .9s ease forwards}
  .sitio.visible .kicker{animation-delay:.05s}
  .sitio.visible .sub{animation-delay:.42s}
  .sub{
    margin-top:26px;max-width:46ch;
    font-size:clamp(15px,1.5vw,18px);line-height:1.6;
    color:rgba(255,255,255,.8);
  }
  @keyframes subir{to{transform:translateY(0)}}
  @keyframes aparecer{to{opacity:1}}

  /* Accesibilidad: sin intro, sin video, sin movimiento. */
  @media (prefers-reduced-motion:reduce){
    .puerta,.intro,.marca{display:none}
    .sitio{opacity:1}
    .hero video{display:none}
    h1 .linea span{transform:none;animation:none}
    .kicker,.sub{opacity:1;animation:none}
  }