(() => { 'use strict'; const $=(s,r=document)=>r.querySelector(s), $$=(s,r=document)=>[...r.querySelectorAll(s)]; const clamp=(x,a=0,b=1)=>Math.min(b,Math.max(a,x)); const mix=(a,b,t)=>a+(b-a)*t; const ease=(a,b,x)=>{const t=clamp((x-a)/(b-a));return t*t*(3-2*t)}; const readStore=(key,fallback)=>{try{return JSON.parse(window.__natureStorage.getItem(key))??fallback}catch{return fallback}}; const saveStore=(key,value)=>{try{window.__natureStorage.setItem(key,JSON.stringify(value))}catch{}}; const catalogue=JSON.parse($('#catalogue')?.textContent||'{}'); const preference=matchMedia('(prefers-reduced-motion: reduce)'); const savedMotion=readStore('natureallyy-motion',null); let motion=true; const setMotion=()=>{ document.body.classList.toggle('motion-off',!motion); document.body.classList.toggle('js-motion',motion); $$('[data-motion]').forEach(b=>{b.textContent=motion?'Motion on':'Motion off';b.setAttribute('aria-pressed',String(!motion));b.setAttribute('aria-label',motion?'Turn motion off':'Turn motion on')}); window.dispatchEvent(new CustomEvent('nature:motion',{detail:{enabled:motion}})); }; setMotion(); $$('[data-motion]').forEach(b=>b.addEventListener('click',()=>{motion=!motion;saveStore('natureallyy-motion',motion);setMotion();measure()})); preference.addEventListener('change',()=>{setMotion();measure()}); document.body.classList.add('js'); // Dialogs keep browser-native keyboard focus and Escape behaviour. const menu=$('#menu'),bag=$('#bag'); function openDialog(d){if(!d)return;d.showModal();document.body.classList.add('dialog-open');if(d===menu)$('[data-menu]')?.setAttribute('aria-expanded','true')} $$('[data-menu]').forEach(b=>b.addEventListener('click',()=>openDialog(menu))); $$('[data-bag-open]').forEach(b=>b.addEventListener('click',()=>{renderBag();openDialog(bag)})); $$('[data-close]').forEach(b=>b.addEventListener('click',()=>b.closest('dialog')?.close())); $$('dialog').forEach(d=>{ d.addEventListener('close',()=>{document.body.classList.remove('dialog-open');$('[data-menu]')?.setAttribute('aria-expanded','false')}); d.addEventListener('click',e=>{if(e.target===d){const r=d.getBoundingClientRect();if(e.clientXr.right||e.clientYr.bottom)d.close()}}); }); let items=readStore('natureallyy-atlas-bag',{}),toastTimer; if(!items||typeof items!=='object'||Array.isArray(items))items={}; Object.keys(items).forEach(k=>{if(!catalogue[k]||!Number.isFinite(items[k])||items[k]<1)delete items[k];else items[k]=Math.min(99,Math.floor(items[k]))}); const money=n=>'₹'+n.toLocaleString('en-IN'); const price=p=>Number(p.price.replace(/[^0-9.]/g,'')); function badge(){$$('[data-bag-count]').forEach(b=>b.textContent=Object.values(items).reduce((a,b)=>a+b,0));saveStore('natureallyy-atlas-bag',items)} function toast(message){const el=$('.toast');if(!el)return;el.textContent=message;el.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>el.classList.remove('show'),2800)} function renderBag(){ const host=$('[data-bag-items]');if(!host)return;host.replaceChildren();let total=0; for(const [slug,qty] of Object.entries(items)){ const p=catalogue[slug];if(!p)continue;total+=price(p)*qty; const row=document.createElement('div');row.className='bag-line'; const pic=document.createElement('img');pic.src=window.__natureProductPhotos[slug];pic.alt=p.name; const body=document.createElement('div');const heading=document.createElement('h3');heading.textContent=p.name; const meta=document.createElement('p');meta.textContent=`100 mL · ${p.price}`; const quantity=document.createElement('div');quantity.className='quantity'; for(const [delta,text] of [[-1,'−'],[0,String(qty)],[1,'+']]){const node=document.createElement(delta?'button':'span');node.textContent=text;if(delta){node.setAttribute('aria-label',`${delta>0?'Increase':'Decrease'} ${p.name} quantity`);node.addEventListener('click',()=>{items[slug]=clamp(qty+delta,0,99);if(!items[slug])delete items[slug];badge();renderBag()})}quantity.append(node)} const remove=document.createElement('button');remove.className='remove-item';remove.textContent='Remove';remove.setAttribute('aria-label',`Remove ${p.name}`);remove.addEventListener('click',()=>{delete items[slug];badge();renderBag()}); body.append(heading,meta,quantity);row.append(pic,body,remove);host.append(row); } if(!Object.keys(items).length){const p=document.createElement('p');p.textContent='Your bag is waiting for a little everyday care.';p.style.marginBottom='35px';host.append(p)} $('[data-bag-total]').textContent=money(total); } $$('[data-add]').forEach(b=>b.addEventListener('click',()=>{const slug=b.dataset.add;if(!catalogue[slug])return;items[slug]=Math.min(99,(items[slug]||0)+1);badge();toast(`${catalogue[slug].name} added to your bag.`)}));badge(); $('[data-filter]')?.addEventListener('change',e=>{$$('[data-product-card]').forEach(c=>c.hidden=e.target.value!=='all'&&e.target.value!==c.dataset.productCard)}); function filterIngredients(){const q=($('[data-ingredient-search]')?.value||'').toLowerCase().trim(),p=$('[data-ingredient-product]')?.value||'all';let count=0;const entries=$$('[data-ingredient]');entries.forEach(el=>{el.hidden=!el.dataset.ingredient.includes(q)||(p!=='all'&&!el.dataset.used.split(' ').includes(p));if(!el.hidden)count++});const out=$('[data-index-count]');if(out)out.textContent=`${count} of ${entries.length} named ingredients${count?'':' — try a different name or formula'}`} $('[data-ingredient-search]')?.addEventListener('input',filterIngredients);$('[data-ingredient-product]')?.addEventListener('change',filterIngredients);filterIngredients(); $('[data-contact]')?.addEventListener('submit',e=>{e.preventDefault();const form=e.currentTarget;if(!form.reportValidity())return;const d=new FormData(form);const subject=`The Natureaallyy — ${d.get('topic')}`;const body=`Name: ${d.get('name')}\nReply email: ${d.get('email')}\n\n${d.get('message')}`;location.href=`mailto:support@thenatureaallyy.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;$('[data-contact-status]').textContent='Your email app will open with a draft. Review it there before sending.'}); // Native scroll drives one continuous camera timeline. No wheel interception. const film=$('.archive-film'),pin=$('.film-pin'),cues=$$('[data-cue]'),cueTimes=cues.map(c=>Number(c.dataset.at)); const visual={seed:$('.visual-seed'),garden:$('.visual-garden'),bench:$('.visual-bench'),gel:$('.visual-gel'),product:$('.visual-product'),ritual:$('.visual-ritual'),trust:$('.visual-trust')}; const leaf=$('.foreground-leaf'),shade=$('.cinema-shade'),world=$('.archive-film [data-world]'); let raf=0,target=0,current=0,activeCue=-1,filmTop=0,filmTravel=1; const videos={}; $$('[data-scrub]').forEach(v=>{ const state={v,desired:0,loaded:false,last:0};videos[v.dataset.scrub]=state; v.addEventListener('loadedmetadata',()=>{state.loaded=true;requestTick();seek(state)}); v.addEventListener('seeked',()=>{v.classList.add('is-ready');if(Math.abs(v.currentTime-state.desired)>.055)seek(state)}); v.addEventListener('error',()=>v.classList.remove('is-ready')); function seek(s){if(!motion||!s.loaded||s.v.seeking)return;const time=clamp(s.desired,0,Math.max(0,s.v.duration-.04));if(Math.abs(s.v.currentTime-time)>.045)try{s.v.currentTime=time}catch{}} state.seek=()=>seek(state); }); function scrub(name,progress,visible){const s=videos[name];if(!s||!motion||!visible)return;const v=s.v;if(!v.getAttribute('src')){v.src=v.dataset.src;v.load()}if(s.loaded){s.desired=clamp(progress)*Math.max(0,v.duration-.08);s.seek()}} function opacity(el,n){if(el)el.style.opacity=clamp(n).toFixed(4)} function transform(el,value){if(el)el.style.transform=value} function measure(){if(film){filmTop=film.getBoundingClientRect().top+scrollY;filmTravel=Math.max(1,film.offsetHeight-innerHeight)}requestTick()} function renderFilm(p){ const seedOut=ease(.18,.255,p),gardenIn=ease(.175,.25,p),gardenOut=ease(.345,.405,p),benchIn=ease(.34,.395,p),benchOut=ease(.465,.535,p),gelIn=ease(.43,.475,p),gelOut=ease(.51,.56,p),productIn=ease(.495,.555,p),productOut=ease(.75,.8,p),ritualIn=ease(.75,.8,p),ritualOut=ease(.88,.925,p),trustIn=ease(.88,.925,p); opacity(visual.seed,1-seedOut);transform(visual.seed,`scale(${1.025+p*.34}) translate3d(${-p*3}%,${p*1.5}%,0)`); opacity(visual.garden,gardenIn*(1-gardenOut));transform(visual.garden,`scale(${mix(1.015,1,clamp((p-.17)/.23))}) translate3d(${mix(0,0,clamp((p-.17)/.23))}%,0,0)`); opacity(visual.bench,benchIn*(1-benchOut));transform(visual.bench,`scale(${mix(1.12,1.025,clamp((p-.34)/.16))}) rotate(${mix(1.2,0,clamp((p-.34)/.15))}deg)`); opacity(visual.gel,gelIn*(1-gelOut));visual.gel.style.clipPath=`circle(${ease(.43,.49,p)*90}% at 52% 53%)`; opacity(visual.product,productIn*(1-productOut)); opacity(visual.ritual,ritualIn*(1-ritualOut));transform(visual.ritual,`scale(${mix(1.035,1.09,clamp((p-.75)/.15))}) translate3d(${mix(1,-1,clamp((p-.75)/.15))}%,0,0)`); opacity(visual.trust,trustIn);const plate=$('.label-study');transform(plate,`translate3d(${mix(22,0,ease(.83,.92,p))}%,0,0) rotate(${mix(12,5,ease(.83,.95,p))}deg)`); const leafP=clamp((p-.18)/.22);opacity(leaf,ease(.18,.23,p)*(1-ease(.355,.405,p)));transform(leaf,`translate3d(${mix(-27,78,leafP)}%,${mix(14,-18,leafP)}%,0) scale(${mix(.85,2.1,leafP)}) rotate(${mix(-8,12,leafP)}deg)`); const bottleOpacity=ease(.52,.57,p)*(1-ease(.68,.725,p));opacity(world,bottleOpacity); const light=p>.795;pin.classList.toggle('light',light);document.body.classList.toggle('film-light',light); opacity(shade,light||p>.51?0:p>.34&&p<.49?.75:.35); let index=0;for(let i=0;i=cueTimes[i])index=i} if(activeCue!==index){activeCue=index;cues.forEach((c,i)=>{const on=i===index;c.classList.toggle('is-current',on);c.inert=!on;c.setAttribute('aria-hidden',String(!on))});$$('[data-chapter]').forEach((b,i)=>{if(i===index)b.setAttribute('aria-current','step');else b.removeAttribute('aria-current')});const kicker=$('.kicker',cues[index]);$('[data-chapter-name]').textContent=kicker.textContent;} cues.forEach((c,i)=>{const start=cueTimes[i],end=cueTimes[i+1]??1.08;const intro=i?ease(start,start+.022,p):1;const outro=1-ease(end-.024,end,p);const visibility=i===index?intro*outro:0;opacity(c,visibility);transform(c,`translate3d(0,${(1-intro)*25-(1-outro)*12}px,0)`)}); $('.progress-track i').style.transform=`scaleX(${p})`; scrub('seed',p/.205,p<.265);scrub('aloe',(p-.205)/.17,p>.175&&p<.415);scrub('gel',(p-.43)/.12,p>.4&&p<.58);scrub('ritual',(p-.75)/.17,p>.72&&p<.94); window.dispatchEvent(new CustomEvent('nature:frame',{detail:{progress:p,visible:p>.5&&p<.81}})); } const scenes=$$('[data-scene]'); const sceneObserver=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('is-seen')}),{threshold:.12});scenes.forEach(s=>sceneObserver.observe(s)); function tick(){raf=0; if(film){ const r=film.getBoundingClientRect();document.body.classList.toggle('past-film',!motion||r.bottom<100); if(motion&&r.bottom>0&&r.top.00015)requestTick()} } if(motion){for(const el of scenes){const r=el.getBoundingClientRect();if(r.bottom<0||r.top>innerHeight)continue;const pic=$('figure img',el)||$('img',el);if(!pic)continue;const travel=innerWidth<760?10:25;const p=clamp((innerHeight-r.top)/(innerHeight+r.height));pic.style.transform=`translate3d(0,${(p-.5)*travel}px,0) scale(1.045)`}} if(document.body.hasAttribute('data-3d')){const stage=$('.product-stage');if(stage){const r=stage.getBoundingClientRect();window.dispatchEvent(new CustomEvent('nature:frame',{detail:{progress:clamp(-r.top/innerHeight),visible:r.bottom>0&&r.top{if(document.hidden){Object.values(videos).forEach(s=>s.v.pause())}else requestTick()}); window.addEventListener('nature:ready',requestTick); $$('[data-chapter]').forEach(b=>b.addEventListener('click',()=>{const p=Number(b.dataset.chapter)+.035;current=p;window.scrollTo({top:filmTop+filmTravel*p,behavior:'instant'});requestTick()})); $('.film-enter')?.addEventListener('click',e=>{e.preventDefault();window.scrollTo({top:filmTop+filmTravel*.12,behavior:motion?'smooth':'instant'})}); measure(); })();

Delivery & returns