<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
    <meta name="description" content="Soluciones técnicas y creativas para eventos y producción audiovisual, combinando croma, pantallas LED y producción virtual en Unreal Engine.">   
    <title>Blackfish | Soluciones Creativas en Producción Audiovisual y Virtual para Eventos</title>
    <link rel="icon" href="svg/favicon_bkf.ico" type="image/x-icon">

  <script type="module" crossorigin src="/assets/main-B5lcDsvm.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/lenis-BF64P5M4.js">
  <link rel="modulepreload" crossorigin href="/assets/three.module-D_zS0oQC.js">
  <link rel="stylesheet" crossorigin href="/CSS/lenis-B_zZlBMW.css">
  <link rel="stylesheet" crossorigin href="/CSS/main-DdCt-13A.css">
</head>
    <body>

        <!-- <div class="index-counter">0</div>
        <div class="animating fs-5">0</div> -->
        <header id="header"></header>
        
        <div id="popout-menu" class="bg-white on-top-max">
            <div class="popout-menu-item fs-1">
                <a class="black" href="/index.html">Home</a>
            </div>
            <div class="popout-menu-item fs-1">
                <a class="black" href="src/HTML/services.html">Services</a>
            </div>
            <div class="popout-menu-item fs-1">
                <a class="black" href="src/HTML/contact.html">Contact</a>
            </div>
            <div class="popout-menu-item">
                <div class="popout-menu-item-languages">
                    <button data-lang="ES">ES</button>
                    <button data-lang="EN">EN</button>
                    <button data-lang="CAT">CAT</button>
                </div>
            </div>
        </div>
        <div class="scroll-down-div">
            <h4 class="white scroll-down-icon-text fs-footer">Keep scrolling down</h4>
            <div class="scroll-down-icon"></div>
        </div>
        <div id="loading-div">
                <div class="logo-word">

                    <svg class="letter B" viewBox="0 0 68.09 96.53" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6,27.1c-9.8,0-17.06,4.3-20.01,9V0L0,5.91v89.01h17.32v-8.06c3.49,5.64,10.47,9.67,19.61,9.67,18.8,0,31.16-14.91,31.16-34.92s-11.15-34.51-30.49-34.51ZM33.84,80.55c-9,0-16.52-6.85-16.52-18.8s7.52-18.67,16.52-18.67,16.38,6.58,16.38,18.67-7.25,18.8-16.38,18.8Z"/>
                    </svg>

                    <svg class="letter L" viewBox="0 0 17.86 96.53" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <polygon points="0 94.93 17.86 94.93 17.86 0 0 6 0 94.93"/>                    
                    </svg>

                    <svg class="letter A" viewBox="0 0 58.42 96.53" preserveAspectRatio="xMinYMin meet"  xmlns="http://www.w3.org/2000/svg">
                        <path d="M29.68,0C11.95,0,2.42,11.41,1.34,21.75l15.85,3.36c.54-5.78,4.83-10.74,12.62-10.74s11.15,3.9,11.15,8.59c0,2.29-1.21,4.17-4.97,4.7l-16.25,2.42C8.73,31.69,0,38.27,0,50.09c0,10.34,8.6,19.88,22.69,19.88,9.8,0,16.12-4.56,19.47-9.8,0,2.55.05,5.86.05,7.92h16.2V25.11C58.42,11.82,50.63,0,29.68,0ZM40.96,41.36c0,11.68-6.98,15.31-14.5,15.31-5.78,0-8.59-3.76-8.59-7.66,0-5.1,3.63-7.65,8.19-8.33l14.91-2.28v2.96Z" transform="translate(0, 27)"/>                    
                    </svg> 

                    <svg class="letter C" viewBox="0 0 68.09 96.53" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <path d="M34.78,53.72c-9.13,0-16.92-6.71-16.92-18.67s7.65-18.53,16.79-18.53,13.03,5.64,14.64,11.15l15.98-5.37C62.45,11.15,52.24,0,34.25,0,15.04,0,0,14.64,0,35.05s15.31,35.05,34.78,35.05c17.59,0,27.93-11.28,30.89-22.29l-15.71-5.24c-1.48,5.11-6.04,11.15-15.17,11.15Z" transform="translate(0, 27)"/> 
                     </svg> 

                     <svg class="letter K" viewBox="0 0 65.99 94.92" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <polygon points="40.69 28.85 17.86 53.42 17.86 0 0 5.99 0 94.92 17.86 94.92 17.86 59.26 44.1 94.92 65.99 94.92 37.6 56.64 63.27 29.67 63.28 28.85 40.69 28.85"/>
                        <polygon points="27.76 129.57 27.76 146.89 66.15 146.89 27.76 94.92 27.76 129.57"/>
                        <path d="M92.28,28.85v-3.77c0-7.39,5.37-9.13,9.27-9.13h5.64V0h-8.86c-14.64,0-24.04,9.9-24.04,24.81l.02,4.04h-11.03v.83s0,0,0,0v14.48h11.01v50.76h18v-50.76h25.36v-15.31h-25.36Z"/>
                    </svg>

                     <svg class="letter F" viewBox="0 0 54.37 94.92" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <path d="M29.01,28.85v-3.77c0-7.39,5.37-9.13,9.27-9.13h5.64V0h-8.86C20.41,0,11.01,9.9,11.01,24.81l.02,4.04H0v.83s0,0,0,0v14.48h11.01v50.76h18v-50.76h25.36v-15.31h-25.36Z"/>
                    </svg>

                     <svg class="letter I" viewBox="0 0 23.78 94.92" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.86,17.33c4.72,0,8.6-3.78,8.6-8.5S13.58.13,8.86.13.26,4.01.26,8.83s3.88,8.5,8.6,8.5Z"/>
                        <path id="fadeInPath" opacity="0" d="M-25.35,26.43v-3.77c0-7.39,5.37-9.13,9.27-9.13h5.64V-2.41h-8.86c-14.64,0-24.04,9.9-24.04,24.81l.02,4.04h-11.03v.83s0,0,0,0v14.48h11.01v50.76h18v-50.76H.01v-15.31h-25.36Z" transform="translate(0, 2.5)"/>
                        <polygon points=".01 26.43 .01 41.74 .01 41.74 .01 92.51 17.74 92.51 17.74 26.43 .01 26.43" transform="translate(0, 2.5)"/>
                        <path id="fadeInPath" opacity="0" d="M50.9,80.82c-7.79,0-11.68-4.83-12.09-10.07l-15.04,5.05c1.59,7.61,8.81,18.72,27.26,18.72,17.32,0,25.65-11.01,25.65-21.76,0-9.67-6.58-17.59-19.61-20.28l-9.4-2.01c-3.63-.67-6.04-2.69-6.04-5.91,0-3.76,3.76-6.58,8.46-6.58,7.52,0,10.34,4.97,10.88,8.86l14.65-4.92c-1.5-7.17-8.18-17.5-25.66-17.5-14.24,0-24.71,9.8-24.71,21.62,0,9.26,5.77,16.92,18.53,19.74l8.73,2.01c5.1,1.07,7.12,3.49,7.12,6.45,0,3.49-2.82,6.58-8.73,6.58Z" transform="translate(0, 2.5)"/>
                        <path id="fadeInPath" opacity="0" d="M24.69,121.91l-5.16-3.29c-2.41-1.53-3.4-3.23-3.4-5.93v-1.94c0-2.52,1.35-4.28,3.81-4.28,2.82,0,4.11,2,4.11,5.75v3.76h0s6.28-2.11,6.28-2.11v-2.17c0-7.39-3.76-10.27-10.39-10.27-6.16,0-10.27,3.64-10.27,9.74v2.11c0,4.23,1.41,7.39,5.58,10.09l5.11,3.23c3.17,2.05,3.58,3.64,3.58,6.87v1.58c0,3.05-1.29,4.99-3.99,4.99-2.88,0-4.28-2.23-4.28-6.46v-4.28l-6.46,2.17v2.53c0,7.1,3.81,11.09,10.68,11.09s10.62-3.81,10.62-10.15v-2.35c0-4.46-1.11-7.63-5.81-10.68Z" transform="translate(0, 2.5)"/>
                     </svg>
                    
                    <svg class="letter S" viewBox="0 0 54.38 96.53" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <path d="M27.12,56.4c-7.79,0-11.68-4.83-12.09-10.07L0,51.39c1.59,7.61,8.81,18.72,27.26,18.72,17.32,0,25.65-11.01,25.65-21.76,0-9.67-6.58-17.59-19.61-20.28l-9.4-2.01c-3.63-.67-6.04-2.69-6.04-5.91,0-3.76,3.76-6.58,8.46-6.58,7.52,0,10.34,4.97,10.88,8.86l14.65-4.92C50.35,10.33,43.67,0,26.18,0,11.95,0,1.47,9.8,1.47,21.62c0,9.26,5.77,16.92,18.53,19.74l8.73,2.01c5.1,1.07,7.12,3.49,7.12,6.45,0,3.49-2.82,6.58-8.73,6.58Z" transform="translate(0, 26.6)"/>
                        <path id="fadeInPath" opacity="0" d="M.92,97.49l-5.16-3.29c-2.41-1.53-3.4-3.23-3.4-5.93v-1.94c0-2.52,1.35-4.28,3.81-4.28,2.82,0,4.11,2,4.11,5.75v3.76h0s6.28-2.11,6.28-2.11v-2.17c0-7.39-3.76-10.27-10.39-10.27-6.16,0-10.27,3.64-10.27,9.74v2.11c0,4.23,1.41,7.39,5.58,10.09l5.11,3.23c3.17,2.05,3.58,3.64,3.58,6.87v1.58c0,3.05-1.29,4.99-3.99,4.99-2.88,0-4.28-2.23-4.28-6.46v-4.28l-6.46,2.17v2.53c0,7.1,3.81,11.09,10.68,11.09s10.62-3.81,10.62-10.15v-2.35c0-4.46-1.11-7.63-5.81-10.68Z" transform="translate(0, 29)"/>
                        <polygon id="fadeInPath" opacity="0" points="7.9 83.52 16 83.52 16 119.68 22.28 119.68 22.28 83.52 30.38 83.52 30.38 78.01 7.9 78.01 7.9 83.52" transform="translate(0, 29)"/>
                        <path id="fadeInPath" opacity="0" d="M48.16,109.76c0,3.52-1.7,5.52-4.58,5.52s-4.64-2-4.64-5.52v-31.75h-6.28v32.1c0,6.4,3.87,10.56,10.92,10.56s10.8-4.23,10.8-10.56v-32.1h-6.22v31.75Z" transform="translate(0, 29)"/>
                    </svg>

                    <svg class="letter H" viewBox="0 0 60.3 94.92" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                        <path d="M35.72,27.1c-6.31,0-13.56,2.15-17.86,7.25V0L0,6.01v88.91h17.86v-38.81c.4-7.25,4.83-12.89,12.35-12.89,8.6,0,12.22,5.78,12.22,13.16v38.54h17.86v-41.63c0-14.5-7.79-26.19-24.58-26.19Z"/>
                        <path id="fadeInPath" opacity="0" d="M9.86,104.84H0v41.67h9.74c8.33,0,12.68-5.4,12.68-15.9v-10.56c0-10.15-4.28-15.2-12.56-15.2ZM15.91,131.25c0,6.98-2.05,10.45-6.57,10.45h-3.05v-32.04h3.05c4.58,0,6.57,3.17,6.57,10.21v11.38Z"/>
                        <rect id="fadeInPath" opacity="0" x="26.42" y="104.84" width="6.28" height="41.67"/>
                        <path id="fadeInPath" opacity="0" d="M48.54,103.84c-7.39,0-11.62,4.46-11.62,12.62v18.43c0,8.16,4.23,12.62,11.62,12.62s11.62-4.46,11.62-12.62v-18.43c0-8.16-4.17-12.62-11.62-12.62ZM53.65,135.53c0,4.34-1.82,6.81-5.11,6.81s-5.11-2.46-5.11-6.81v-19.72c0-4.34,1.82-6.81,5.11-6.81s5.11,2.46,5.11,6.81v19.72Z"/>
                    </svg>
                    
                </div>
            <div id="loading-progress" style="font-family: font-title-medium; font-size: 1.5rem;">0</div><!-- content is generated by JS/loading-page.js -->
        </div>

        <div id="transition-div"><!-- content is generated by JS/loading-page.js --></div>
    
        <div id="main" class="main bg-white">
        
        <section class="section-landing"> 
            <div id="section-landing-wrapper"></div>
            <div class="section-bkf-description">
                <h1 class="split-description-title fs-5">GENERATE <br> INSPIRING PROJECTS <br> WITH BLACKFISH</h1>
                <!-- Highlighted description -->
                <div class="split split-description fs-8 bkfDescriptionFirst"></div>
                <div class="split split-description fs-8 bkfDescriptionSecond"></div>       
            </div>
        </section>


        <div class="services-title fs-2">
            <h2 class="serv" style="width: 100%; text-align:right;">SERV</h2>
            <h2 class="ices" style="width: 100%;">ICES</h2>
        </div>

        <!-- the horiontal container -->
        <section class="services">   
            <div class="service-type service-type-global">
                <div class="service-type-title">
                    <!-- this is the first title that appears by default. the rest are called by functions -->
                    <div class="service-type-title-PRODUCTION" style="position: relative;">VIDEO PROD.<a href="src/HTML/services.html#video-productions"> &#10095;</a></div>
                    <!-- these are the titles that are called by the individual functions -->
                    <div class="hidden-service-type-titles">
                        <div class="service-type-title-LED" style="position: absolute;">LED SCREEN<a href="src/HTML/services.html#led-screens"> &#10095;</a></div>
                        <div class="service-type-title-MAPPING" style="position: absolute;" >MAPPING <a  href="src/HTML/services.html#mappings"> &#10095;</a></div>
                        <div class="service-type-title-GREEN-SCREEN" style="position: absolute;">GREEN SCREEN<a  href="src/HTML/services.html#platos"> &#10095;</a></div>
                        <div class="service-type-title-VIRTUAL" style="position: absolute;">VIRTUAL PROD. <a  href="src/HTML/services.html#virtual-production"> &#10095;</a></div>
                        <div class="service-type-title-STREAMING" style="position: absolute;">STREAMING <a  href="src/HTML/services.html#streaming"> &#10095;</a></div>
                    </div>
                </div>
                <!-- Even though service ptz section appears after, it has to be on top in the code hirerchy -->
                 <!-- It is because we dont want it to be masked, and popout the screen -->
                <div id="section-virtual-production-wrapper"></div>
                
                <div id="masked-element" class="masked-element">
                    <div class="swipe-section">
                        <div class="section-video-production">
                            <div id="section-video-production-wrapper">
                                    <video class="mobile-VP-video" loop muted  playsinline width="100%" height="auto">
                                        <source src="/svg/Mobile_production_video.webm" type="video/webm">   
                                    </video>
                            </div>
                            <p class="white split text-description-video-production fs-8">We handle the planning and setup of live or recorded productions, providing technical and artistic coordination to ensure smooth execution. Our team ensures flawless production for events, live broadcasts, and recordings, using a wide range of tools such as tracking cameras, cranes, and other versatile systems tailored to each project.
                        </div>
                                         
                        <div class="service-led">             
                         <div id="section-led-wrapper"></div>
                            <div id="animation-container"></div>
                            <div id="mobile-projection-container">
                                <div id='mobile-projection-widget'>
                                    <div class="cell filled" data-row="0" data-col="0"></div>
                                    <div class="cell" data-row="0" data-col="1"></div>
                                    <div class="cell" data-row="0" data-col="2"></div>
                                    <div class="cell" data-row="0" data-col="3"></div>
                                    <div class="cell filled" data-row="0" data-col="4"></div>
                                    <div class="cell" data-row="1" data-col="0"></div>
                                    <div class="cell" data-row="1" data-col="1"></div>
                                    <div class="cell" data-row="1" data-col="2"></div>
                                    <div class="cell" data-row="1" data-col="3"></div>
                                    <div class="cell" data-row="1" data-col="4"></div>
                                    <div class="cell" data-row="2" data-col="0"></div>
                                    <div class="cell" data-row="2" data-col="1"></div>
                                    <div class="cell" data-row="2" data-col="2"></div>
                                    <div class="cell" data-row="2" data-col="3"></div>
                                    <div class="cell" data-row="2" data-col="4"></div>
                                    <div class="cell" data-row="3" data-col="0"></div>
                                    <div class="cell filled" data-row="3" data-col="1"><div class="click-cube-text white"></div></div>
                                    <div class="cell" data-row="3" data-col="2"></div>
                                    <div class="cell" data-row="3" data-col="3"></div>
                                    <div class="cell" data-row="3" data-col="4"></div>
                                    <div class="cell filled" data-row="4" data-col="0"></div>
                                    <div class="cell" data-row="4" data-col="1"></div>
                                    <div class="cell" data-row="4" data-col="2"></div>
                                    <div class="cell" data-row="4" data-col="3"></div>
                                    <div class="cell" data-row="4" data-col="4"></div>
                                </div>
                            </div>

                            <div id="blur-overlay"></div>
                            <div class="blur-overlay-text-div fs-7">
                                <p class="white split blur-overlay-text-div-left">Pantallas Led de última tecnología,
                                    <span class="highlight-word"> perfectas para cada evento audiovisual</span> 
                                </p>
                                <p class="white split blur-overlay-text-div-right" >
                                    Fusionamos arte y tecnologia en cada proyecto.
                                     <span class="highlight-word">Creando mappings únicos que cautivan.</span>
                                </p>
                            </div>
                        </div>

                        <div class="service-else">
                            <div class="animated-green animated-green1" style="background-color: rgba(182, 235, 104, 0.384);"></div>
                            <div class="animated-green animated-green2" style="background-color: rgba(182, 235, 104, 0.774);"></div>
                            <div class="animated-green animated-green3" style="background-color: rgb(182, 235, 104);">
                                <p class="fs-7 black split description-virtual-production" >
                                    <span class="highlight-word"> Innovación y creatividad.</span>  Crea tu universo  con Blackfish.
                               </p>
                            </div>
                            <section class="section_ptz150 bg-black fs-1">      
                                <div class="banner">
                                   <div class="marquee_inner" >
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                   </div>
                                </div>
                                <div class="banner">
                                  <div class="marquee_inner" style="width: 100vw;">
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                   <span class="white text-tracking">AR/XR</span>
                                  </div>
                                </div>
                                <div class="banner">
                                   <div class="marquee_inner" >
                                       <span class="white text-camera">VIRTUAL REALITY</span>
                                       <span class="white text-camera">VIRTUAL REALITY</span>
                                       <span class="white text-camera">VIRTUAL REALITY</span>
                                       <span class="white text-camera">VIRTUAL REALITY</span>
                                       <span class="white text-camera">VIRTUAL REALITY</span>
                                   </div>
                                </div>
                                <div class="banner">
                                  <div class="marquee_inner" style="width: 100vw;">
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                   <span class="white text-tracking">TRACKING</span>
                                  </div>
                                </div>
                                   <div class="banner">
                                   <div class="marquee_inner" >
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                       <span class="white text-camera">CAMERA TRACKING</span>
                                   </div>
                                </div>
                           </section>  
                        </div>
                        <div class="service-streaming">
                             <p class="fs-7 white split description-streaming description-streaming-mobile">
                                Desplegamos toda nuestra capacidad <br> logística y profesional <br>para cubrir tanto tu <br><span class="highlight-word">producción audiovisual <br> como tu evento</span>
                           </p>
                            <div id="section-streaming-wrapper"></div>
                            <div class="section-streaming-black-fade-cover"></div>

                        </div>
                    </div>
                </div>
                <svg class="svg-mask" >
                    <defs>
                        <mask id="mask1">
                            <rect id="morphing-path" x="5vw" fill="#FFFFFF" rx="30"/>
                        </mask>
                    </defs>
                </svg>     
            </div>  
        </section>
        <div class="service-360" id="service-360">
            <div class="service-360-title fs-2" id="service-360-title">
                <div class="service-360-div1">
                    <span class="service-360-div1-span">experiencias</span>
                </div>
                <div class="service-360-div2">
                    <span class="service-360-div2-span">360°</span>
                </div>
            </div>
            <div id="section-360-wrapper">
                <div id="css3d"></div>
            </div>
            <div class="service-360-description fs-8">
                <div class="service-360-description-left split">
                    Servicio integral de <span class="highlight-word">producción y agencia</span>, creando experiencias 360° donde nos encargamos de <span class="highlight-word">cada etapa del proyecto,</span>
                 desde la planificación inicial hasta la ejecución final.
                </div>
                <div class="service-360-description-right split">
                    Nos dedicamos a  <span class="highlight-word">diseñar, producir y coordinar </span>todos los elementos para que cada proyecto sea <span class="highlight-word">único,
                  memorable y exitoso</span>, asegurando una gestión completa y sin preocupaciones para nuestros clientes.
                </div>
            </div>
            <div id="lets-talk">
                <div class="lets-talk-arrow"></div>
                <div class="lets-talk-text fs-1">Let's Talk &#41;</div>

            </div>
        </div>    
    </div>

    <footer id="footer" class="on-top"></footer>

    <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script> 

</body>
</html>