/* El Pescador · Caja — apertura: el faro de FaroTech se dibuja, se enciende y su luz barre la pantalla.
   Todo en CSS: aparece en el primer cuadro (antes que la app) y se va solo aunque falle el JavaScript.
   Dura 2,8 s; un toque la salta; con "menos movimiento" es un fundido breve. */

#apertura{position:fixed;inset:0;z-index:100;background:#FFFFFF;display:grid;place-items:center;overflow:hidden;
  animation:apertura-sale .6s cubic-bezier(.7,0,.2,1) 2.2s forwards;cursor:pointer}
html.sin-apertura #apertura{display:none}
#apertura .escena{position:relative;width:132px;display:grid;justify-items:center;gap:22px;transform:translateY(-4vh)}
#apertura svg{width:132px;height:176px;overflow:visible}

/* trazos: tinta fina que se dibuja */
#apertura .t{fill:none;stroke:#0B0B0C;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:apertura-traza var(--d,.9s) cubic-bezier(.65,0,.35,1) var(--r,0s) forwards}
/* la sombra turquesa corrida de la marca, apenas insinuada */
#apertura .sombra{fill:none;stroke:#14B8A6;stroke-width:1.15;stroke-linejoin:round;opacity:0;transform:translate(2.6px,2.6px);
  animation:apertura-aparece .7s ease-out 1s forwards}

/* la luz: halo, lámpara y dos haces opuestos que giran */
#apertura .halo{opacity:0;transform-origin:60px 56px;animation:apertura-halo 1.6s cubic-bezier(.2,.8,.2,1) .95s forwards}
#apertura .lampara{fill:#14B8A6;opacity:0;transform-origin:60px 56px;animation:apertura-enciende .45s cubic-bezier(.2,.9,.3,1.4) .95s forwards}
#apertura .haces{position:absolute;left:50%;top:61.6px;width:0;height:0;opacity:0;animation:apertura-aparece .35s ease-out 1.05s forwards}
#apertura .haz{position:absolute;left:0;top:-26px;width:150vmax;height:52px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(20,184,166,.42),rgba(20,184,166,.12) 35%,rgba(20,184,166,0) 75%);
  clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);filter:blur(1.5px);
  animation:apertura-barre 1.5s cubic-bezier(.45,.05,.25,1) 1.05s forwards}
#apertura .haz + .haz{animation-name:apertura-barre-2}

/* firma */
#apertura .firma{font-family:"Unbounded",Geist,system-ui,sans-serif;font-weight:300;font-size:1.05rem;color:#0B0B0C;letter-spacing:.6em;
  margin-right:-.6em;opacity:0;animation:apertura-firma 1.1s cubic-bezier(.2,.8,.2,1) 1.25s forwards}
#apertura .firma i{font-style:normal;color:#14B8A6}
#apertura .ap-linea{width:0;height:1px;background:#0B0B0C;opacity:.18;animation:apertura-linea .9s cubic-bezier(.65,0,.35,1) 1.45s forwards}

@keyframes apertura-traza{to{stroke-dashoffset:0}}
@keyframes apertura-aparece{to{opacity:1}}
@keyframes apertura-enciende{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes apertura-halo{0%{opacity:0;transform:scale(.3)}35%{opacity:1}100%{opacity:.55;transform:scale(1)}}
@keyframes apertura-barre{from{transform:rotate(200deg)}to{transform:rotate(345deg)}}
@keyframes apertura-barre-2{from{transform:rotate(20deg)}to{transform:rotate(165deg)}}
@keyframes apertura-firma{from{opacity:0;letter-spacing:.9em;margin-right:-.9em}to{opacity:1;letter-spacing:.32em;margin-right:-.32em}}
@keyframes apertura-linea{to{width:120px}}
@keyframes apertura-sale{to{opacity:0;transform:scale(1.035);visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  #apertura{animation:apertura-sale .4s ease 0.6s forwards}
  #apertura *{animation:none!important}
  #apertura .t{stroke-dashoffset:0}
  #apertura .sombra,#apertura .lampara,#apertura .firma{opacity:1}
  #apertura .halo{opacity:.5}
  #apertura .ap-linea{width:120px}
  #apertura .haces{display:none}
}
html:not(.sin-apertura):has(#apertura){overflow:hidden}