Somatic Intelligence Layer

<!-- =====================================================
  Somatic Intelligence Layer by Inntention Inc.
  Paste into Bubble: Settings > SEO/metatags > Script in header
  Replace BRAND_ID with your brand identifier.
====================================================== -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
#sil-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:1rem;font-family:'Quicksand',sans-serif;opacity:0;transition:opacity 3.5s cubic-bezier(.16,1,.3,1);pointer-events:none;}
#sil-overlay.visible{opacity:1;pointer-events:all;}
#sil-backdrop{position:absolute;inset:0;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#sil-card{position:relative;width:100%;max-width:640px;background:rgba(219,70,225,.9);border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.18);overflow:hidden;border:1px solid rgba(255,255,255,.2);opacity:0;transform:scale(.98);transition:opacity 4.5s .8s cubic-bezier(.16,1,.3,1),transform 4.5s .8s cubic-bezier(.16,1,.3,1);}
#sil-card.visible{opacity:1;transform:scale(1);}
#sil-close{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.2);border:none;cursor:pointer;color:rgba(255,255,255,.7);font-size:1rem;z-index:10;transition:background .2s;display:flex;align-items:center;justify-content:center;line-height:1;}
#sil-close:hover{background:rgba(255,255,255,.3);}
#sil-dots{position:absolute;top:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.sil-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s;}
.sil-dot.active{background:#fff;}
#sil-content{padding:4rem 2.5rem;min-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.sil-phase{display:none;flex-direction:column;align-items:center;text-align:center;opacity:0;transition:opacity .8s ease;}
.sil-phase.active{display:flex;opacity:1;}
.sil-text{font-size:1.2rem;line-height:1.7;color:#fff;max-width:480px;font-weight:300;}
#sil-founder-img{width:110px;height:110px;border-radius:50%;object-fit:cover;margin-bottom:1.5rem;opacity:0;transition:opacity .8s 2s ease;}
#sil-founder-img.visible{opacity:1;}
#sil-founder-name{font-size:.85rem;color:rgba(255,255,255,.8);margin-top:1.5rem;line-height:1.5;opacity:0;transition:opacity .8s 2s ease;}
#sil-founder-name.visible{opacity:1;}
#sil-bars{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.sil-bar{height:2px;background:rgba(255,255,255,.4);width:24px;border-radius:2px;transition:width .3s,background .3s;}
.sil-bar.active{background:#fff;width:32px;}
</style>

<div id="sil-overlay">
  <div id="sil-backdrop"></div>
  <div id="sil-card">
    <button id="sil-close" aria-label="Close">&#x2715;</button>
    <div id="sil-dots">
      <div class="sil-dot active" id="dot-attune"></div>
      <div class="sil-dot" id="dot-intention"></div>
      <div class="sil-dot" id="dot-orient"></div>
    </div>
    <div id="sil-content">
      <div class="sil-phase active" id="phase-attune">
        <p class="sil-text" id="attune-text"></p>
      </div>
      <div class="sil-phase" id="phase-intention">
        <img id="sil-founder-img" src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68e95056fd490367a371a8ac/05b8d95aa_Founder_Je_Mask.png" alt="Jé Memmesheimer" />
        <p class="sil-text" id="intention-text"></p>
        <p id="sil-founder-name">Jé Memmesheimer, Director Research and Design<br>Inntention Inc.</p>
      </div>
      <div class="sil-phase" id="phase-orient">
        <p class="sil-text" id="orient-text"></p>
      </div>
    </div>
    <div id="sil-bars">
      <div class="sil-bar active" id="bar-attune"></div>
      <div class="sil-bar" id="bar-intention"></div>
      <div class="sil-bar" id="bar-orient"></div>
    </div>
  </div>
</div>

<script>
(function(){
  var A=["Let your pace drop for a moment before you continue.","Allow the last screen you were on to fall into the background.","Give your attention a chance to settle here.","Let the speed you arrived with soften at the edges.","Allow your focus to gather without effort.","Let the noise of previous tabs loosen its hold.","Arrive at a slower rhythm than the one you came in with.","Let your system shift out of scrolling mode.","Give this space a moment of undivided attention.","Allow yourself to land, not skim."];
  var I=["Inntention creates a moment of clarity before engagement, so visitors arrive ready to understand what your work truly offers.","We design a brief state shift at the moment of arrival, helping visitors settle enough to meet your brand with focus and intention.","Inntention brings coherence to the first seconds of a visit, preparing attention so exploration becomes meaningful rather than rushed."];
  var O=["Move through this space at the pace your attention prefers.","Let clarity guide you more than urgency.","Explore as if the next step should make sense, not push you.","Let what feels relevant rise on its own.","Move through the site with the same steadiness you want your visitors to feel.","Let the structure of the site meet you, not rush you.","Follow the parts that align with the questions you arrived with.","Let your attention lead, not your momentum.","Move as if the next choice deserves a moment, not a skim.","Let coherence be the way you navigate from here."];
  function pick(arr){return arr[Math.floor(Math.random()*arr.length)];}
  document.getElementById('attune-text').textContent=pick(A);
  document.getElementById('intention-text').textContent=pick(I);
  document.getElementById('orient-text').textContent=pick(O);

  // ---- Replace with your brand identifier ----
  var BRAND_ID='my-brand';
  // --------------------------------------------

  var sessionId=(typeof crypto!=='undefined'&&crypto.randomUUID)?crypto.randomUUID():Math.random().toString(36).slice(2);
  var tracked={};
  function sendTelemetry(phase){
    if(tracked[phase])return;
    tracked[phase]=true;
    fetch('https://inntention.base44.app/api/functions/telemetryIngest',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({brand:BRAND_ID,sessionId:sessionId,phase:phase,timestamp:new Date().toISOString()})}).catch(function(){});
  }

  var overlay=document.getElementById('sil-overlay');
  var card=document.getElementById('sil-card');
  var phases=['attune','intention','orient'];
  var idx=0;var timer=null;
  function setPhase(i){
    phases.forEach(function(p,j){
      document.getElementById('phase-'+p).classList.toggle('active',j===i);
      document.getElementById('dot-'+p).classList.toggle('active',j===i);
      document.getElementById('bar-'+p).classList.toggle('active',j===i);
    });
    if(i===1){setTimeout(function(){document.getElementById('sil-founder-img').classList.add('visible');document.getElementById('sil-founder-name').classList.add('visible');},50);}
  }
  function next(){
    sendTelemetry('sil_'+phases[idx]+'_complete');
    idx++;
    if(idx<phases.length){setPhase(idx);timer=setTimeout(next,7000);}
    else{sendTelemetry('sil_complete');close(true);}
  }
  function close(done){
    if(!done)sendTelemetry('sil_exit_early');
    overlay.classList.remove('visible');card.classList.remove('visible');
    document.body.style.overflow='';
    if(timer)clearTimeout(timer);
    setTimeout(function(){overlay.style.display='none';},3500);
  }
  document.getElementById('sil-close').addEventListener('click',function(){close(false);});
  setTimeout(function(){
    sendTelemetry('sil_impression');
    document.body.style.overflow='hidden';
    overlay.classList.add('visible');
    setTimeout(function(){card.classList.add('visible');},50);
    timer=setTimeout(next,7000);
  },1200);
})();
</script>