{"id":9489,"date":"2026-06-05T12:13:55","date_gmt":"2026-06-05T12:13:55","guid":{"rendered":"https:\/\/shreeramathegallery.com\/?page_id=9489"},"modified":"2026-06-09T14:14:22","modified_gmt":"2026-06-09T14:14:22","slug":"new-home","status":"publish","type":"page","link":"https:\/\/shreeramathegallery.com\/","title":{"rendered":"New Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9489\" class=\"elementor elementor-9489\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92af9d6 e-con-full Zoominparent e-flex e-con e-parent\" data-id=\"92af9d6\" data-element_type=\"container\" data-e-type=\"container\" id=\"Zoominparent\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf7b8c0 elementor-widget elementor-widget-html\" data-id=\"cf7b8c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"srg-zoom-bg\"><\/div>\r\n<div id=\"srg-zoom-frame\"><\/div>\r\n\r\n<style>\r\n  html, body { scroll-behavior: auto !important; }\r\n\r\n  #srg-zoom-bg {\r\n    position: fixed;\r\n    inset: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background-image: url('http:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/05\/IMG_6278.jpg');\r\n    background-size: cover;\r\n    background-position: center center;\r\n    background-repeat: no-repeat;\r\n    z-index: 0;\r\n    opacity: 1;\r\n    transform: scale(1);\r\n    transform-origin: center center;\r\n    will-change: transform;\r\n    pointer-events: none;\r\n  }\r\n\r\n  #srg-zoom-frame {\r\n    position: fixed;\r\n    inset: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background-image: url('http:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/srg-gate-frame-1.png');\r\n    background-size: cover;\r\n    background-position: center center;\r\n    background-repeat: no-repeat;\r\n    z-index: 5;\r\n    opacity: 1;\r\n    transform: scale(1);\r\n    transform-origin: center center;\r\n    will-change: transform;\r\n    pointer-events: none;\r\n  }\r\n\r\n  #wrap,\r\n  #lqd-site-content {\r\n    background: transparent !important;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  var FRAME_END = 3.2;\r\n  var BG_END    = 1.5;\r\n\r\n  function init() {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    document.documentElement.style.setProperty('scroll-behavior', 'auto', 'important');\r\n\r\n    var bg = document.getElementById('srg-zoom-bg');\r\n    var frame = document.getElementById('srg-zoom-frame');\r\n    if (!bg || !frame) return;\r\n\r\n    var section = document.getElementById('Zoominparent')\r\n               || frame.closest('.e-con.e-parent')\r\n               || frame.closest('.e-con')\r\n               || frame.closest('section');\r\n    if (!section) { console.error('SRG: parent container not found'); return; }\r\n    section.style.overflow = 'hidden';\r\n    section.style.background = 'transparent';\r\n\r\n    ScrollTrigger.create({\r\n      trigger: section,\r\n      start: 'top top',\r\n      end: '+=80%',\r\n      pin: true,\r\n      pinSpacing: true,\r\n      scrub: 1,\r\n      onUpdate: function (self) {\r\n        var p = self.progress;\r\n        var eased = 1 - Math.pow(1 - p, 2);\r\n        frame.style.transform = 'scale(' + (1 + eased * (FRAME_END - 1)) + ')';\r\n        bg.style.transform    = 'scale(' + (1 + eased * (BG_END - 1)) + ')';\r\n      }\r\n    });\r\n\r\n    ScrollTrigger.refresh();\r\n  }\r\n\r\n  \/* Use the site's EXISTING GSAP\/ScrollTrigger \u2014 do NOT load a second copy\r\n     (a second copy causes two ScrollTrigger instances to fight = scroll bobbing).\r\n     Wait for them to be available, then init. *\/\r\n  function waitForGsap(attempts) {\r\n    attempts = attempts || 0;\r\n    if (window.gsap && window.ScrollTrigger) {\r\n      init();\r\n    } else if (attempts < 100) {\r\n      setTimeout(function () { waitForGsap(attempts + 1); }, 50);\r\n    } else {\r\n      console.error('SRG: GSAP\/ScrollTrigger not found on page after waiting');\r\n    }\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', function () { waitForGsap(0); });\r\n  } else {\r\n    waitForGsap(0);\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23b3a89 elementor-widget elementor-widget-text-editor\" data-id=\"23b3a89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Welcome To Shree Rama The Gallery<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e228e1 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"0e228e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9826bd4 e-flex e-con-boxed e-con e-parent\" data-id=\"9826bd4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc6f619 maskrev elementor-widget elementor-widget-html\" data-id=\"bc6f619\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"maskrev\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GSAP + SplitText + ScrollTrigger. Place in same container as #maskrev text. -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.13.0\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.13.0\/SplitText.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.13.0\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<style>\r\n  #maskrev .split-line-mask,\r\n  .maskrev .split-line-mask{ overflow: hidden; display: block; }\r\n  #maskrev.maskrev-init, .maskrev.maskrev-init{ visibility: hidden; }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n\r\n  \/* pacing knob: scroll distance the reveal spans, in viewport-heights *\/\r\n  var SCROLL_SPAN = 1.1;\r\n\r\n  function waitFor(check, cb, tries){\r\n    tries = tries || 0;\r\n    if (check()) { cb(); return; }\r\n    if (tries > 100) return;\r\n    setTimeout(function(){ waitFor(check, cb, tries+1); }, 100);\r\n  }\r\n  function ready(){ return window.gsap && window.SplitText && window.ScrollTrigger; }\r\n\r\n  function init(){\r\n    gsap.registerPlugin(SplitText, ScrollTrigger);\r\n\r\n    var root = document.querySelector('#maskrev') || document.querySelector('.maskrev');\r\n    if(!root){ console.warn('maskrev: target not found'); return; }\r\n\r\n    var inner = root.querySelector('.elementor-widget-container');\r\n    var scope = inner || root;\r\n    var textEls = scope.querySelectorAll('h1,h2,h3,h4,h5,h6,p,li,span,div');\r\n    var targets = Array.prototype.filter.call(textEls, function(el){\r\n      return el.textContent.trim().length > 0 &&\r\n             !el.querySelector('h1,h2,h3,h4,h5,h6,p,li');\r\n    });\r\n    if(targets.length === 0) targets = [scope];\r\n\r\n    root.classList.add('maskrev-init');\r\n\r\n    var fontsReady = document.fonts ? document.fonts.ready : Promise.resolve();\r\n    fontsReady.then(function(){\r\n      targets.forEach(function(el){\r\n        var split = new SplitText(el, { type:'lines', linesClass:'split-line' });\r\n\r\n        split.lines.forEach(function(line){\r\n          var mask = document.createElement('span');\r\n          mask.className = 'split-line-mask';\r\n          line.parentNode.insertBefore(mask, line);\r\n          mask.appendChild(line);\r\n        });\r\n\r\n        \/\/ initial hidden state: pushed down, blurred, transparent\r\n        gsap.set(split.lines, { yPercent: 115, filter: 'blur(12px)', opacity: 0.15 });\r\n\r\n        \/\/ per-line timing: lines 2 & 3 reveal 20% faster\r\n        var tl = gsap.timeline({\r\n          scrollTrigger: {\r\n            trigger: el,\r\n            start: 'top 120%',\r\n            end: '+=' + (SCROLL_SPAN * 100) + '%',\r\n            scrub: 1\r\n          }\r\n        });\r\n\r\n        var baseDur = 1;                 \/\/ relative duration for lines 1 & 4\r\n        var fastDur = baseDur * 0.8;     \/\/ 20% faster for lines 2 & 3\r\n        var gap = 0.4;                   \/\/ stagger gap between line starts\r\n        var at = 0;\r\n\r\n        split.lines.forEach(function(line, i){\r\n          var isFast = (i === 1 || i === 2);   \/\/ 2nd & 3rd lines (0-indexed)\r\n          tl.to(line, {\r\n            yPercent: 0,\r\n            filter: 'blur(0px)',\r\n            opacity: 1,\r\n            ease: 'none',\r\n            duration: isFast ? fastDur : baseDur\r\n          }, at);\r\n          at += gap;\r\n        });\r\n      });\r\n\r\n      root.classList.remove('maskrev-init');\r\n      ScrollTrigger.refresh();\r\n    });\r\n\r\n    var rt;\r\n    window.addEventListener('resize', function(){\r\n      clearTimeout(rt);\r\n      rt = setTimeout(function(){ ScrollTrigger.refresh(); }, 200);\r\n    });\r\n  }\r\n\r\n  waitFor(ready, init);\r\n}());\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e36fa0d elementor-widget__width-initial maskrev elementor-widget elementor-widget-text-editor\" data-id=\"e36fa0d\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"maskrev\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Where traditional Indian craft<br \/>meets contemporary vision \u2014 a curated collection of art<br \/>made to be lived with<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b493d6 e-con-full e-flex e-con e-parent\" data-id=\"5b493d6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af3d285 elementor-widget elementor-widget-heading\" data-id=\"af3d285\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Collections<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eaddc18 elementor-widget elementor-widget-heading\" data-id=\"eaddc18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Eight distinct collections, each with its own character<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f23edce elementor-widget elementor-widget-html\" data-id=\"f23edce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Shree Rama the Gallery \u2014 Collections<\/title>\r\n<style>\r\n  :root{\r\n    --bg:#FFF8F4;\r\n    --brown:#6F4E37;\r\n    --brown-dark:#5A3E2B;\r\n    --ink:#3a2c22;\r\n    --card-w:32vw;\r\n    --card-h:630px;\r\n    --depth:200px;\r\n    --tilt:40deg;\r\n    --spread:24vw;        \/* horizontal distance between adjacent cards *\/\r\n  }\r\n  *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }\r\n  html,body{ background:transparent; color:var(--ink);\r\n    font-family:\"Helvetica Neue\",Arial,sans-serif; -webkit-font-smoothing:antialiased; }\r\n\r\n  .cf-stage, .cf-stage *{ cursor:none; }\r\n\r\n  .cf-section{ position:relative;\r\n    display:flex; flex-direction:column; align-items:center;\r\n    padding:0; }\r\n\r\n  .cf-stage{ position:relative; width:100%; max-width:100%; height:var(--card-h);\r\n    perspective:1500px; margin:0 auto; flex:0 0 auto; touch-action:pan-y; }\r\n  .cf-track{ position:absolute; inset:0; transform-style:preserve-3d; }\r\n\r\n  .cf-card{ position:absolute; top:50%; left:50%;\r\n    width:var(--card-w); height:var(--card-h);\r\n    margin-left:calc(var(--card-w) \/ -2); margin-top:calc(var(--card-h) \/ -2);\r\n    border-radius:8px; overflow:hidden; box-shadow:0 26px 60px rgba(58,44,34,.30);\r\n    transform-style:preserve-3d; background:#ddd; will-change:transform; }\r\n  \/* transitions applied only when NOT actively dragging *\/\r\n  .cf-track.animate .cf-card{\r\n    transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .5s, filter .5s;\r\n  }\r\n\r\n  .cf-card img{\r\n    width:100%; height:100%;\r\n    object-fit:cover; object-position:center;\r\n    image-orientation:none;\r\n    display:block; pointer-events:none; user-select:none;\r\n  }\r\n\r\n  .cf-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2;\r\n    padding:46px 18px 18px; background:linear-gradient(to top, rgba(40,28,20,.82), transparent);\r\n    transform:translateZ(1px); }\r\n  .cf-cap h3{ font-family:\"Cormorant Garamond\",Georgia,serif; color:#fff;\r\n    font-size:22px; font-weight:600; line-height:1.1; }\r\n  .cf-cap .cf-btn{ display:none; margin-top:12px; background:var(--brown); color:#fff; border:none;\r\n    padding:9px 18px; border-radius:30px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;\r\n    cursor:pointer; transition:background .2s, transform .15s; }\r\n  .cf-card.is-active .cf-cap .cf-btn{ display:inline-block; }\r\n  .cf-cap .cf-btn:hover{ background:var(--brown-dark); }\r\n  .cf-cap .cf-btn:active{ transform:scale(.95); }\r\n\r\n  .cf-card.is-side{ filter:brightness(.82); }\r\n  .cf-card.is-far{ filter:brightness(.62); }\r\n\r\n  .cf-nav{ display:flex; gap:18px; margin-top:28px; flex:0 0 auto; }\r\n  .cf-arrow{ width:54px; height:54px; border-radius:50%;\r\n    border:1.5px solid var(--brown); background:transparent; color:var(--brown);\r\n    display:flex; align-items:center; justify-content:center; cursor:pointer;\r\n    transition:background .2s,color .2s,transform .15s; font-size:22px; line-height:1; }\r\n  .cf-arrow:hover{ background:var(--brown); color:#fff; }\r\n  .cf-arrow:active{ transform:scale(.9); }\r\n\r\n  .cf-cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;\r\n    width:84px; height:84px; border-radius:50%; background:var(--brown); color:#fff;\r\n    display:flex; align-items:center; justify-content:center;\r\n    font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;\r\n    transform:translate(-50%,-50%) scale(0); transition:transform .25s ease, opacity .25s;\r\n    opacity:0; will-change:transform; }\r\n  .cf-cursor.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }\r\n  .cf-cursor.grab{ background:var(--brown-dark); }\r\n\r\n  \/* responsive sizing (#10) *\/\r\n  @media (max-width:1024px){\r\n    :root{ --card-w:34vw; --card-h:520px; --spread:26vw; --depth:170px; }\r\n  }\r\n  @media (max-width:680px){\r\n    :root{ --card-w:220px; --card-h:308px; --spread:150px; --depth:140px; --tilt:34deg; }\r\n    .cf-cap .cf-btn{ padding:4.5px 9px; }   \/* halved for mobile *\/\r\n    .cf-cursor{ display:none; }   \/* no custom cursor on touch *\/\r\n    .cf-stage,.cf-stage *{ cursor:auto; }\r\n  }\r\n  @media (max-width:430px){\r\n    :root{ --card-w:180px; --card-h:252px; --spread:118px; --depth:120px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <section class=\"cf-section\" id=\"cfSection\">\r\n    <div class=\"cf-stage\" id=\"cfStage\">\r\n      <div class=\"cf-track animate\" id=\"cfTrack\"><\/div>\r\n    <\/div>\r\n    <div class=\"cf-nav\">\r\n      <button class=\"cf-arrow\" id=\"cfPrev\" aria-label=\"Previous\">&#8592;<\/button>\r\n      <button class=\"cf-arrow\" id=\"cfNext\" aria-label=\"Next\">&#8594;<\/button>\r\n    <\/div>\r\n    <div class=\"cf-cursor\" id=\"cfCursor\">Drag<\/div>\r\n  <\/section>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n\r\n  \/* ===== config ===== *\/\r\n  var SLIDES   = [{\"label\": \"Wall sculptures\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/walls.jpg\"}, {\"label\": \"Stone Art\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/stoneart.jpg\"}, {\"label\": \"Sculptures\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/sculp-rotated.jpg\"}, {\"label\": \"Paintings\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/painting-rotated.jpg\"}, {\"label\": \"Indian heritage\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/indianheritage-rotated.jpg\"}, {\"label\": \"Handmade Mixedmedia\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/handmade-mixed.jpg\"}, {\"label\": \"Circular\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/circular-rotated.jpg\"}, {\"label\": \"Aaradhya\", \"src\": \"https:\/\/shreeramathegallery.com\/wp-content\/uploads\/2026\/06\/aaradhya.jpg\"}];\r\n  var LINKS    = {};        \/* { \"Wall sculptures\":\"https:\/\/...\", ... } when pages exist *\/\r\n  var AUTOPLAY = false;     \/* (#4) flip to true to auto-spin *\/\r\n  var AUTO_MS  = 4000;      \/* autoplay interval *\/\r\n  \/* ================== *\/\r\n\r\n  var stage=document.getElementById('cfStage'),\r\n      track=document.getElementById('cfTrack'),\r\n      prevB=document.getElementById('cfPrev'),\r\n      nextB=document.getElementById('cfNext'),\r\n      cursor=document.getElementById('cfCursor');\r\n  var N=SLIDES.length, cards=[];\r\n\r\n  \/* build cards (#7: only centre+neighbors eager, rest lazy via #1) *\/\r\n  SLIDES.forEach(function(s){\r\n    var c=document.createElement('div'); c.className='cf-card'; c.dataset.label=s.label;\r\n    var img=document.createElement('img');\r\n    img.src=s.src; img.alt=s.label; img.draggable=false;\r\n    img.loading='lazy';                     \/* (#1) *\/\r\n    img.decoding='async';\r\n    c.appendChild(img);\r\n    var cap=document.createElement('div'); cap.className='cf-cap';\r\n    var h3=document.createElement('h3'); h3.textContent=s.label;\r\n    var btn=document.createElement('button'); btn.className='cf-btn'; btn.textContent='View Collection';\r\n    btn.addEventListener('click',function(e){ e.stopPropagation(); var u=LINKS[s.label]; if(u) window.location.href=u; });\r\n    cap.appendChild(h3); cap.appendChild(btn); c.appendChild(cap);\r\n    track.appendChild(c); cards.push(c);\r\n  });\r\n\r\n  var cs=getComputedStyle(document.documentElement);\r\n  \/* Resolve a CSS custom property to pixels even when it uses vw\/vh units.\r\n     parseFloat on \"32vw\" would wrongly give 32; we measure via a probe element. *\/\r\n  var probe=document.createElement('div');\r\n  probe.style.cssText='position:absolute;visibility:hidden;height:0;';\r\n  stage.appendChild(probe);\r\n  function resolvePx(varName){\r\n    probe.style.width='var('+varName+')';\r\n    return probe.getBoundingClientRect().width;\r\n  }\r\n  function v(n){ return parseFloat(cs.getPropertyValue(n)); }  \/* for unitless\/deg like --tilt *\/\r\n\r\n  var DEPTH, TILT, SPREAD;\r\n  function readVars(){\r\n    cs=getComputedStyle(document.documentElement);\r\n    SPREAD=resolvePx('--spread');\r\n    DEPTH =resolvePx('--depth');\r\n    TILT  =v('--tilt');\r\n  }\r\n  readVars();\r\n\r\n  \/* continuous position: integer part = active card, fraction = drag progress *\/\r\n  var pos = 0;            \/* can be fractional during drag *\/\r\n  var active = 0;\r\n\r\n  function ringOffset(i, p){\r\n    var d = i - p;\r\n    while(d >  N\/2) d -= N;\r\n    while(d < -N\/2) d += N;\r\n    return d;\r\n  }\r\n\r\n  \/* render accepts a possibly-fractional pos for live drag (#2) *\/\r\n  function render(p){\r\n    for(var i=0;i<N;i++){\r\n      var off=ringOffset(i,p), abs=Math.abs(off), card=cards[i];\r\n      var x  = off*SPREAD;\r\n      var z  = -abs*DEPTH;\r\n      var ry = -off*TILT;                       \/* smooth tilt across fractional offset *\/\r\n      if(ry>TILT)ry=TILT; if(ry<-TILT)ry=-TILT;\r\n      var sc = 1 - Math.min(abs,3)*0.14;\r\n      var vis= abs<=2.6;\r\n      card.style.transform='translateX('+x.toFixed(1)+'px) translateZ('+z.toFixed(1)+'px) rotateY('+ry.toFixed(2)+'deg) scale('+sc.toFixed(3)+')';\r\n      card.style.opacity=vis?1:0;\r\n      card.style.zIndex=String(100-Math.round(abs));\r\n      card.style.pointerEvents=(abs<1.5)?'auto':'none';\r\n      var isC = Math.abs(off)<0.5;\r\n      card.classList.toggle('is-active',isC);\r\n      card.classList.toggle('is-side',abs>=0.5&&abs<1.5);\r\n      card.classList.toggle('is-far',abs>=1.5);\r\n    }\r\n  }\r\n\r\n  function snapTo(target){\r\n    active=((target%N)+N)%N;\r\n    pos=active;\r\n    track.classList.add('animate');\r\n    render(pos);\r\n  }\r\n  function go(d){ snapTo(active+d); restartAuto(); }\r\n\r\n  nextB.addEventListener('click',function(){go(1);});\r\n  prevB.addEventListener('click',function(){go(-1);});\r\n  cards.forEach(function(c,i){\r\n    c.addEventListener('click',function(){\r\n      if(dragHappened) return;               \/* don't treat drag-release as click *\/\r\n      if(Math.abs(ringOffset(i,active))>=0.5){ snapTo(i); restartAuto(); }\r\n    });\r\n  });\r\n\r\n  \/* ===== custom cursor ===== *\/\r\n  stage.addEventListener('mouseenter',function(){cursor.classList.add('show');});\r\n  stage.addEventListener('mouseleave',function(){cursor.classList.remove('show');});\r\n  stage.addEventListener('mousemove',function(e){cursor.style.left=e.clientX+'px';cursor.style.top=e.clientY+'px';});\r\n\r\n  \/* ===== gesture system: live drag-follow (#2) + direction lock (#3) + momentum snap (#5) ===== *\/\r\n  var dragging=false, startX=0, startY=0, lastX=0, axisLock=null,\r\n      startPos=0, dragHappened=false, velocity=0, lastT=0;\r\n\r\n  function pointerDown(x,y){\r\n    dragging=true; axisLock=null; dragHappened=false;\r\n    startX=lastX=x; startY=y; startPos=pos; velocity=0; lastT=performance.now();\r\n    cursor.classList.add('grab');\r\n    track.classList.remove('animate');       \/* follow finger 1:1, no transition *\/\r\n    stopAuto();\r\n  }\r\n  function pointerMove(x,y){\r\n    if(!dragging) return;\r\n    var dx=x-startX, dy=y-startY;\r\n    if(axisLock===null){\r\n      if(Math.abs(dx)>8 || Math.abs(dy)>8){\r\n        axisLock = Math.abs(dx)>Math.abs(dy) ? 'x' : 'y';\r\n      }\r\n    }\r\n    if(axisLock!=='x') return;               \/* (#3) vertical gesture -> let page scroll *\/\r\n    dragHappened=true;\r\n    var now=performance.now(), dt=now-lastT||16;\r\n    velocity=(x-lastX)\/dt; lastX=x; lastT=now;\r\n    \/* move one card per SPREAD px dragged *\/\r\n    pos = startPos - dx\/SPREAD;\r\n    render(pos);\r\n  }\r\n  function pointerUp(){\r\n    if(!dragging) return;\r\n    dragging=false; cursor.classList.remove('grab');\r\n    if(axisLock!=='x'){ return; }\r\n    \/* (#5) momentum: add a velocity-scaled fling, then snap to nearest card *\/\r\n    var fling = -velocity * 18 \/ SPREAD;     \/* tune fling strength here *\/\r\n    var target = Math.round(pos + fling);\r\n    snapTo(target);\r\n    restartAuto();\r\n  }\r\n\r\n  stage.addEventListener('mousedown',function(e){ pointerDown(e.clientX,e.clientY); });\r\n  window.addEventListener('mousemove',function(e){ pointerMove(e.clientX,e.clientY); });\r\n  window.addEventListener('mouseup',pointerUp);\r\n  stage.addEventListener('touchstart',function(e){ pointerDown(e.touches[0].clientX,e.touches[0].clientY); },{passive:true});\r\n  stage.addEventListener('touchmove',function(e){\r\n    if(dragging && axisLock==='x'){ e.preventDefault(); }   \/* keep horizontal drag from scrolling page *\/\r\n    pointerMove(e.touches[0].clientX,e.touches[0].clientY);\r\n  },{passive:false});\r\n  stage.addEventListener('touchend',pointerUp);\r\n\r\n  window.addEventListener('keydown',function(e){ if(e.key==='ArrowRight')go(1); if(e.key==='ArrowLeft')go(-1); });\r\n\r\n  \/* recompute fluid (vw) sizing on resize and re-layout *\/\r\n  var rT=null;\r\n  window.addEventListener('resize',function(){\r\n    if(rT) cancelAnimationFrame(rT);\r\n    rT=requestAnimationFrame(function(){ readVars(); render(pos); });\r\n  });\r\n\r\n  \/* ===== autoplay (#4) ===== *\/\r\n  var autoTimer=null;\r\n  function startAuto(){ if(AUTOPLAY && !autoTimer){ autoTimer=setInterval(function(){ snapTo(active+1); }, AUTO_MS); } }\r\n  function stopAuto(){ if(autoTimer){ clearInterval(autoTimer); autoTimer=null; } }\r\n  function restartAuto(){ stopAuto(); startAuto(); }\r\n  stage.addEventListener('mouseenter',stopAuto);\r\n  stage.addEventListener('mouseleave',startAuto);\r\n\r\n  \/* (#7) warm next\/prev images by forcing load shortly after init *\/\r\n  function preloadNeighbors(){\r\n    var idxs=[active,(active+1)%N,(active-1+N)%N];\r\n    idxs.forEach(function(i){ var im=cards[i].querySelector('img'); if(im){ im.loading='eager'; } });\r\n  }\r\n\r\n  snapTo(0);\r\n  preloadNeighbors();\r\n  startAuto();\r\n}());\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cd5b0ac e-con-full e-flex e-con e-parent\" data-id=\"cd5b0ac\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d376d60 elementor-widget elementor-widget-html\" data-id=\"d376d60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.pc-track  { position: relative; width: 100%; }\r\n.pc-stage  { position: sticky; top: 0; height: 100vh; width: 100vw; left: 0; overflow: hidden; }\r\n.pc-strip  {\r\n  position: absolute; top: 0; height: 100%;\r\n  z-index: 3; will-change: transform; transform: translateY(0);\r\n  background-repeat: no-repeat; background-color: transparent;\r\n  border-left: 1px solid #3A2A1A; border-right: 1px solid #3A2A1A;\r\n  box-sizing: border-box;\r\n}\r\nhtml, body, #lqd-site-content.content {\r\n  overflow: visible !important;\r\n  overflow-x: clip !important;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  var STRIPS    = 10;\r\n  var SCROLL_VH = 2;\r\n\r\n  function easeInOut(t) { return t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t+2, 2)\/2; }\r\n\r\n  function waitForEl(s, cb) {\r\n    var el = document.querySelector(s);\r\n    if (el) { cb(el); return; }\r\n    setTimeout(function () { waitForEl(s, cb); }, 100);\r\n  }\r\n\r\n  function init(parent) {\r\n    if (parent.parentNode && parent.parentNode.classList.contains('pc-track')) return;\r\n\r\n    var bgImage = getComputedStyle(parent).backgroundImage;\r\n    if (!bgImage || bgImage === 'none') console.warn('parentcon: no background-image set');\r\n    parent.style.backgroundImage = 'none';\r\n\r\n    \/* 1) Wrap in scroll track *\/\r\n    var track = document.createElement('div');\r\n    track.className = 'pc-track';\r\n    track.style.height = (SCROLL_VH * 100) + 'vh';\r\n    parent.parentNode.insertBefore(track, parent);\r\n    track.appendChild(parent);\r\n\r\n    \/* 2) parentcon must fill the track \u2014 otherwise sticky releases early *\/\r\n    parent.style.height = '100%';\r\n    parent.style.minHeight = '0';\r\n\r\n    \/* 3) Sticky stage \u2014 prepended before existing children, nothing moved *\/\r\n    var stage = document.createElement('div');\r\n    stage.className = 'pc-stage';\r\n    parent.insertBefore(stage, parent.firstChild);\r\n\r\n    \/* 4) Strips *\/\r\n    var strips = [], w = 100 \/ STRIPS;\r\n    for (var i = 0; i < STRIPS; i++) {\r\n      var strip = document.createElement('div');\r\n      strip.className = 'pc-strip';\r\n      strip.style.left  = (i * w) + '%';\r\n      strip.style.width = w + '%';\r\n      strip.style.backgroundImage    = bgImage;\r\n      strip.style.backgroundSize     = (STRIPS * 100) + '% 100%';\r\n      strip.style.backgroundPosition = (i * (100 \/ (STRIPS - 1))) + '% 0';\r\n      stage.appendChild(strip);\r\n      strips.push(strip);\r\n    }\r\n\r\n    var ticking = false;\r\n\r\n    function applyWipe() {\r\n      ticking = false;\r\n      var rect     = track.getBoundingClientRect();\r\n      var travel   = track.offsetHeight - window.innerHeight;\r\n      if (travel <= 0) travel = 1;\r\n      var progress = (-rect.top) \/ travel;\r\n      if (progress < 0) progress = 0;\r\n      if (progress > 1) progress = 1;\r\n\r\n      for (var i = 0; i < STRIPS; i++) {\r\n        var order = (STRIPS - 1) - i;\r\n        var start = order \/ (STRIPS * 1.5);\r\n        var end   = (order + 1) \/ STRIPS;\r\n        var dur   = end - start; if (dur <= 0) dur = 0.0001;\r\n        var local = (progress - start) \/ dur;\r\n        if (local < 0) local = 0;\r\n        if (local > 1) local = 1;\r\n        strips[i].style.transform = 'translateY(' + (-100 * easeInOut(local)) + '%)';\r\n      }\r\n    }\r\n\r\n    function onScroll() { if (!ticking) { ticking = true; requestAnimationFrame(applyWipe); } }\r\n\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n    window.addEventListener('resize', function () {\r\n      track.style.height = (SCROLL_VH * 100) + 'vh';\r\n      onScroll();\r\n    });\r\n\r\n    applyWipe();\r\n  }\r\n\r\n  function boot() { waitForEl('#parentcon', function (p) { init(p); }); }\r\n\r\n  if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); }\r\n  else { boot(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Welcome To Shree Rama The Gallery Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Where traditional Indian craftmeets contemporary vision \u2014 a curated collection of artmade to be lived with Our Collections Eight distinct collections, each with its own character Shree Rama the Gallery \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9489","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=\/wp\/v2\/pages\/9489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9489"}],"version-history":[{"count":334,"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=\/wp\/v2\/pages\/9489\/revisions"}],"predecessor-version":[{"id":9887,"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=\/wp\/v2\/pages\/9489\/revisions\/9887"}],"wp:attachment":[{"href":"https:\/\/shreeramathegallery.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}