/* Intro con el logo de TZARAF Studio. Se muestra antes de la página y se puede saltar. */
html.tzi-on{background:#08090a;overflow:hidden}
html.tzi-on body > *:not(#tz-intro){visibility:hidden}
html.tzi-on .hero .frame{animation-play-state:paused}

#tz-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#08090a;overflow:hidden;
  transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s}
#tz-intro.out{opacity:0;visibility:hidden}
#tz-intro.out svg{transform:scale(1.04);opacity:0}
#tz-intro.out .tzi-halo,#tz-intro.out .tzi-skip{opacity:0;transition:opacity .4s}
#tz-intro svg{width:min(78vw,560px);height:auto;overflow:visible;transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .45s ease}

/* Resplandor de fondo detrás de la tsade */
.tzi-halo{position:absolute;left:50%;top:44%;width:min(120vw,900px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,165,75,.20),rgba(226,165,75,.07) 38%,rgba(124,156,240,.035) 58%,rgba(8,9,10,0) 100%);
  opacity:0;animation:tziHalo 3.4s cubic-bezier(.3,0,.2,1) .2s forwards}
@keyframes tziHalo{0%{opacity:0;scale:.6}55%{opacity:1;scale:1.05}100%{opacity:.75;scale:1}}

/* Tsade: rayos de luz que recorren el contorno */
.tzi-streak{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.18 .82;stroke-dashoffset:1;opacity:0}
.tzi-streak.a{stroke:#fff;stroke-width:20;animation:tziRun 1.7s cubic-bezier(.45,0,.2,1) .25s forwards}
.tzi-streak.b{stroke:#e2a54b;stroke-width:14;animation:tziRun 1.7s cubic-bezier(.45,0,.2,1) .45s forwards}
@keyframes tziRun{0%{opacity:0;stroke-dashoffset:1}12%{opacity:1}75%{opacity:1}100%{opacity:0;stroke-dashoffset:-.6}}

/* Tsade: cuerpo metálico */
.tzi-glow{opacity:0;animation:tziGlow 2.6s ease .9s forwards}
@keyframes tziGlow{0%{opacity:0}35%{opacity:.85}100%{opacity:.35}}
.tzi-body{opacity:0;transform-box:fill-box;transform-origin:50% 60%;animation:tziBody 1.2s cubic-bezier(.2,.8,.2,1) .95s forwards}
@keyframes tziBody{from{opacity:0;transform:scale(.9) translateY(18px)}to{opacity:1;transform:none}}

/* Bandas de luz que cruzan las formas */
.tzi-sheen{transform:translateX(-1400px)}
.tzi-sheen.t{animation:tziSheen 1.3s cubic-bezier(.45,0,.25,1) 1.55s forwards}
.tzi-sheen.all{animation:tziSheen 1.6s cubic-bezier(.45,0,.25,1) 3.25s forwards}
@keyframes tziSheen{to{transform:translateX(2600px)}}

/* TZARAF: letra por letra */
.tzi-L{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:tziLetter .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.85s + var(--k) * .09s)}
@keyframes tziLetter{0%{opacity:0;transform:translateY(55%) scale(.96)}60%{opacity:1}100%{opacity:1;transform:none}}

/* STUDIO: completo, debajo */
.tzi-st{opacity:0;animation:tziStudio 1s cubic-bezier(.2,.8,.2,1) 2.65s forwards}
@keyframes tziStudio{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* Botón para saltar */
.tzi-skip{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));
  font:500 13px "Geist","Helvetica Neue",Arial,sans-serif;color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;cursor:pointer;opacity:0;animation:tziFade .6s ease 1s forwards}
.tzi-skip:hover{color:#fff;background:rgba(255,255,255,.09)}
.tzi-skip:focus-visible{outline:2px solid #e2a54b;outline-offset:3px}
@keyframes tziFade{to{opacity:1}}