.elementor-kit-44{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-44 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- PROTO LABS — HERO SEQUENCE (mountain → jet black → aurora border → welcome → CTA → cards → chat → clock) -->
<style>
  :root{
    --proto-aurora-1:#39A1FF; /* blue */
    --proto-aurora-2:#27F0FF; /* cyan */
    --proto-aurora-3:#8A6BFF; /* violet */
    --proto-text:#ffffff;
    --proto-dim:#b8c3cf;
    --proto-accent:#00FFB2;   /* your neon-mint accent if desired later */
  }

  /* --- Stage wrapper (fills the viewport) --- */
  .proto-stage{
    position:relative;
    width:100%;
    min-height:100svh;
    overflow:hidden;
    background:#000; /* will be visible after cascade */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  }

  /* --- Mountain hero image layer --- */
  .proto-hero{
    position:absolute; inset:0;
    background:url(IMAGE_URL_MOUNTAIN) center/cover no-repeat;
    transform:translateZ(0);
  }

  /* --- Black cascade overlay (top→down over 5s) --- */
  .proto-cascade{
    position:absolute; inset:0;
    background:#000;
    height:0%;
    animation:protoCascade 5s ease-in forwards;
    /* subtle noise to feel cinematic */
    background-image:
      radial-gradient(transparent 0 49%, rgba(0,0,0,.08) 50%),
      linear-gradient(#000,#000);
    background-size: 3px 3px, auto;
    background-repeat: repeat;
    mix-blend-mode: normal;
  }
  @keyframes protoCascade{
    0%{height:0%}
    8%{height:10%}
    25%{height:40%}
    55%{height:75%}
    100%{height:100%}
  }

  /* --- Atmosphere border (thin, animated aurora) --- */
  .proto-atmo{
    position:absolute; inset:0;
    pointer-events:none;
    opacity:0;
    transition:opacity .8s ease;
  }
  .proto-atmo.on{ opacity:1; }

  /* Frame trick: gradient background + mask to keep just a 2px border */
  .proto-atmo::before{
    content:"";
    position:absolute; inset:0;
    background: conic-gradient(
      from 0turn,
      var(--proto-aurora-1),
      var(--proto-aurora-2),
      var(--proto-aurora-3),
      var(--proto-aurora-2),
      var(--proto-aurora-1)
    );
    animation:auroraHue 6s linear infinite;
    /* create a frame by masking the center out */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding:2px; /* border thickness */
    border-radius:10px;
    box-shadow:0 0 22px 2px rgba(57,161,255,.25) inset;
  }
  @keyframes auroraHue{
    to{ filter:hue-rotate(360deg) }
  }

  /* --- Welcome message (fade in, then out) --- */
  .proto-welcome{
    position:absolute; inset:0;
    display:grid; place-items:center;
    color:var(--proto-text);
    text-align:center;
    padding:clamp(12px,2vw,24px);
    opacity:0;
    transition:opacity .6s ease;
  }
  .proto-welcome h1{
    font-size:clamp(28px,5.5vw,64px);
    line-height:1.04;
    letter-spacing:0.5px;
    margin:0;
    text-shadow:0 6px 28px rgba(0,0,0,.55);
  }
  .proto-welcome.on{opacity:1;}
  .proto-welcome.off{opacity:0;}

  /* --- Typewriter CTA (“Click the + sign.”) --- */
  .proto-cta{
    position:absolute; inset:auto 0 22svh 0;
    width:100%;
    display:flex; justify-content:center;
    opacity:0; transition:opacity .6s ease;
    color:var(--proto-dim);
    font-size:clamp(16px,2.2vw,22px);
  }
  .proto-cta.on{opacity:1;}
  .proto-cta .tw{
    border-right:2px solid var(--proto-dim);
    white-space:nowrap;
    overflow:hidden;
  }

  /* --- Sliding product cards (menu-like reel) --- */
  .proto-reel{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:12svh;
    width:min(1200px,94vw);
    overflow:hidden; opacity:0; transition:opacity .6s ease;
  }
  .proto-reel.on{opacity:1;}
  .proto-track{
    display:flex; gap:16px; align-items:stretch;
    animation:reel 24s linear infinite;
  }
  .proto-track:hover{animation-play-state:paused;}
  @keyframes reel{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  .proto-card{
    flex:0 0 clamp(220px,26vw,320px);
    background:#0a0a0a;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden; position:relative;
    box-shadow:0 8px 40px rgba(0,0,0,.45);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .proto-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 60px rgba(0,0,0,.55);
    border-color:rgba(255,255,255,.18);
  }
  .proto-card img{
    width:100%; height:180px; object-fit:cover; display:block;
    filter:saturate(1.05) contrast(1.04);
  }
  .proto-card h3{
    font-size:18px; margin:12px 14px 8px; color:#fff;
  }
  .proto-card p{
    font-size:14px; margin:0 14px 14px; color:#b9c2cf;
  }

  /* --- Static chat bar (bottom-left), to be replaced by real agent later --- */
  .proto-chat{
    position:fixed; left:20px; bottom:18px; z-index:99;
    display:flex; gap:8px; align-items:center;
    background:#0c0c0c; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:10px 12px;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    opacity:0; transition:opacity .6s ease;
    max-width:min(520px,85vw);
  }
  .proto-chat.on{opacity:1;}
  .proto-chat input{
    flex:1; background:transparent; border:none; outline:none;
    color:#e8eef7; font-size:15px;
  }
  .proto-chat button{
    background:linear-gradient(90deg,var(--proto-aurora-2),var(--proto-aurora-3));
    color:#010101; border:none; border-radius:10px; padding:8px 12px;
    font-weight:700; cursor:pointer;
  }
  .proto-chat small{display:block; color:#9fb0c3; margin-top:2px}

  /* --- Footer clock (bottom-left, below chat) --- */
  .proto-clock{
    position:fixed; left:22px; bottom:4px; z-index:98;
    color:#9fb0c3; font: 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing:.3px; opacity:.9;
  }

  /* Safety for Elementor paddings */
  .elementor-widget-html .proto-stage{margin:0 !important;}
</style>

<div class="proto-stage" id="protoStage">
  <!-- Mountain layer -->
  <div class="proto-hero" aria-hidden="true"></div>

  <!-- Jet black cascade -->
  <div class="proto-cascade" aria-hidden="true"></div>

  <!-- Atmosphere frame -->
  <div class="proto-atmo" id="protoAtmo" aria-hidden="true"></div>

  <!-- Welcome message -->
  <div class="proto-welcome" id="protoWelcome">
    <h1>WELCOME TO PROTO LABS</h1>
  </div>

  <!-- Typewriter CTA -->
  <div class="proto-cta" id="protoCta">
    <div class="tw" id="protoType"></div>
  </div>

  <!-- Cards / reel (acts like a visual menu) -->
  <div class="proto-reel" id="protoReel" aria-label="Featured products">
    <div class="proto-track">
      <!-- Duplicate set for smooth infinite loop -->
      <div class="proto-card">
        <img src="CARD1" alt="Healthcare Operations Hub" />
        <h3>Healthcare Operations Hub</h3>
        <p>Patient intake, scheduling, claims, supply chain.</p>
      </div>
      <div class="proto-card">
        <img src="CARD2" alt="Workflow Orchestration" />
        <h3>Workflow Orchestration</h3>
        <p>Agents, routing, human-in-the-loop dashboards.</p>
      </div>
      <div class="proto-card">
        <img src="CARD3" alt="Autonomous Systems" />
        <h3>Autonomous Systems</h3>
        <p>AI + automation blueprints for real businesses.</p>
      </div>
      <div class="proto-card">
        <img src="CARD4" alt="Prototype Matrix (PDF)" />
        <h3>Prototype Matrix (PDF)</h3>
        <p>Get the playbook that ships real products.</p>
      </div>
      <div class="proto-card">
        <img src="CARD5" alt="Developer’s Guide" />
        <h3>Developer’s Guide</h3>
        <p>APIs, auth, monitoring, deploy &amp; scale.</p>
      </div>

      <!-- second set for looping -->
      <div class="proto-card">
        <img src="CARD1" alt="Healthcare Operations Hub" />
        <h3>Healthcare Operations Hub</h3>
        <p>Patient intake, scheduling, claims, supply chain.</p>
      </div>
      <div class="proto-card">
        <img src="CARD2" alt="Workflow Orchestration" />
        <h3>Workflow Orchestration</h3>
        <p>Agents, routing, human-in-the-loop dashboards.</p>
      </div>
      <div class="proto-card">
        <img src="CARD3" alt="Autonomous Systems" />
        <h3>Autonomous Systems</h3>
        <p>AI + automation blueprints for real businesses.</p>
      </div>
      <div class="proto-card">
        <img src="CARD4" alt="Prototype Matrix (PDF)" />
        <h3>Prototype Matrix (PDF)</h3>
        <p>Get the playbook that ships real products.</p>
      </div>
      <div class="proto-card">
        <img src="CARD5" alt="Developer’s Guide" />
        <h3>Developer’s Guide</h3>
        <p>APIs, auth, monitoring, deploy &amp; scale.</p>
      </div>
    </div>
  </div>

  <!-- Static chat bar (placeholder) -->
  <div class="proto-chat" id="protoChat" aria-live="polite">
    <input type="text" placeholder="Ask Proto anything… (Agent coming soon)" />
    <button>Send</button>
  </div>

  <!-- Clock -->
  <div class="proto-clock" id="protoClock">--:--:--</div>
</div>

<script>
(function(){
  /* --------- TIMELINE ---------
     0s   : Mountain visible
     0–5s : Cascade to black (CSS)
     5.0s : Atmosphere border fade in
     5.1s : Welcome fade in
     6.8s : Welcome fade out
     7.0s : Typewriter CTA fade in & type
     7.8s : Cards reel fade in
     8.2s : Chat placeholder fade in
  -------------------------------- */

  const atmo = document.getElementById('protoAtmo');
  const welcome = document.getElementById('protoWelcome');
  const cta = document.getElementById('protoCta');
  const typeEl = document.getElementById('protoType');
  const reel = document.getElementById('protoReel');
  const chat = document.getElementById('protoChat');

  /* Stage 1: Enable border & welcome */
  setTimeout(()=>{ atmo.classList.add('on'); }, 5000);
  setTimeout(()=>{ welcome.classList.add('on'); }, 5100);

  /* Stage 2: Hide welcome */
  setTimeout(()=>{
    welcome.classList.remove('on');
    welcome.classList.add('off');
  }, 6800);

  /* Stage 3: CTA typewriter */
  setTimeout(()=>{
    cta.classList.add('on');
    typewriter('Click the + sign.', typeEl, 36);
  }, 7000);

  /* Stage 4: Cards + Chat */
  setTimeout(()=>{ reel.classList.add('on'); }, 7800);
  setTimeout(()=>{ chat.classList.add('on'); }, 8200);

  function typewriter(text, el, speed){
    el.textContent = '';
    let i=0;
    const tick = () => {
      if(i<=text.length){ el.textContent = text.slice(0,i++); setTimeout(tick, speed); }
      else { el.style.borderRightColor='transparent'; }
    };
    tick();
  }

  /* Live clock (bottom-left) */
  const clock = document.getElementById('protoClock');
  function pad(n){return n.toString().padStart(2,'0')}
  function syncClock(){
    const now = new Date();
    const h = pad(now.getHours());
    const m = pad(now.getMinutes());
    const s = pad(now.getSeconds());
    clock.textContent = `${h}:${m}:${s}`;
  }
  syncClock(); setInterval(syncClock,1000);
})();
</script>/* End custom CSS */