Streetlight Studios

92.loading-name{
93  font-family:var(--font-d);
94  font-size:1.5rem;letter-spacing:.35em;
95  text-transform:uppercase;color:var(--accent);
96  animation:fade-up .6s ease-out .2s both;
97}
98.loading-sub{
99  font-family:var(--font-m);
100  font-size:.44rem;letter-spacing:.32em;
101  text-transform:uppercase;color:var(--muted);
102  animation:fade-up .6s ease-out .4s both;
103}
104.loading-bar-wrap{
105  width:130px;height:1px;
106  background:var(--border);
107  position:relative;overflow:hidden;
108  animation:fade-up .4s ease-out .5s both;
109}
110.loading-bar-fill{
111  position:absolute;top:0;left:-100%;height:100%;
112  background:linear-gradient(90deg,var(--deep),var(--accent));
113  animation:load-fill 1.8s ease-out .6s forwards;
114}
115@keyframes load-fill{to{left:0}}

137/* ── Letterbox ── */
138.lb{position:fixed;left:0;right:0;height:52px;background:#000;z-index:9998}
139.lb-t{top:0;animation:lb-t .95s cubic-bezier(.16,1,.3,1) .15s forwards}
140.lb-b{bottom:0;animation:lb-b .95s cubic-bezier(.16,1,.3,1) .15s forwards}
141@keyframes lb-t{to{transform:translateY(-100%)}}
142@keyframes lb-b{to{transform:translateY(100%)}}

317/* ── Logo draw-in stroke animation */
318nav .logo .logo-svg circle[r="19"]{
319  stroke-dasharray:120;stroke-dashoffset:120;
320  animation:logo-draw 1.2s cubic-bezier(.16,1,.3,1) .1s both;
321}
322nav .logo .logo-svg circle[r="8"]{
323  stroke-dasharray:51;stroke-dashoffset:51;
324  animation:logo-draw .9s cubic-bezier(.16,1,.3,1) .5s both;
325}
326nav .logo .logo-svg circle:not([r="19"]):not([r="8"]){
327  opacity:0;
328  animation:logo-fade .4s ease .9s both;
329}
330@keyframes logo-draw{ to{ stroke-dashoffset:0; } }
331@keyframes logo-fade{ to{ opacity:1; } }

443.hero-h1 .line span{
444  display:block;
445  animation:line-up .75s cubic-bezier(.16,1,.3,1) both;
446}
447.hero-h1 .line:nth-child(1) span{animation-delay:.15s}
448.hero-h1 .line:nth-child(2) span{animation-delay:.3s}
449.hero-h1 .line:nth-child(3) span{animation-delay:.45s}
450.hero-h1 em{font-style:italic;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
451@keyframes line-up{from{transform:translateY(110%)}to{transform:translateY(0)}}
452@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

2244/* ══ 1. LOADING OVERLAY ══ */
2245(function(){
2246  const overlay = document.getElementById('loading-overlay');
2247  // Fix #17: instant hide for reduced-motion users
2248  if(window.matchMedia('(prefers-reduced-motion:reduce)').matches){
2249    overlay.style.display='none';
2250    return;
2251  }
2252  const heroVid = document.querySelector('#hero video');
2253  function hideOverlay(){
2254    overlay.classList.add('hide');
2255    setTimeout(()=>{ overlay.style.display='none'; },1000);
2256  }
2257  if(heroVid){
2258    heroVid.addEventListener('canplay', hideOverlay, {once:true});
2259    setTimeout(hideOverlay, 2500); // max wait 2.5s
2260  } else {
2261    setTimeout(hideOverlay, 1000);
2262  }

2486})();
2487
2488/* ══ 11. TYPEWRITER HERO BODY ══ */
2489(function(){
2490  const el = document.getElementById('hero-body-text');
2491  if(!el) return;
2492  const text = el.dataset.text || '';
2493  el.textContent = '';
2494  const cur = document.createElement('span');
2495  cur.className = 'typewriter-cursor';
2496  el.appendChild(cur);
2497  let i = 0;
2498  const delay = 1100; // start after hero headline animates
2499  setTimeout(()=>{
2500    const iv = setInterval(()=>{
2501      if(i<text.length){
2502        cur.before(document.createTextNode(text[i]));
2503        i++;
2504      } else {
2505        clearInterval(iv);
2506        setTimeout(()=>cur.remove(),1200);
2507      }
2508    }, 22);
2509  }, delay);
2510})();

351@media (prefers-reduced-motion: reduce){
352  .reveal,.hero-tag,.hero-body,.hero-ctas,.hero-trust{
353    opacity:1!important;transform:none!important;animation:none!important;
354  }
355  .hero-h1 .line span{transform:none!important;animation:none!important;}
356  .phone-card{animation:none!important;transform:none!important;}
357  .phone-cards{transform:none!important;}
358  .guarantee-badge-ring{animation:none!important;}
359  body::after{animation:none!important;}
360  .films-body,.pricing-desc,.guarantee-body,.cta-body,.hiw-body{
361    opacity:1!important;transform:none!important;
362  }
363}