{"bx8LSa5O":"/* =====================================================================\n 3D RING CAROUSEL — element script\n Lives on the \"Ring Carousel\" group, so the behaviour travels with the\n component when it is copied into another experience. Everything below\n is scoped to THIS element's own subtree: no globals, no shared ids,\n no document-wide selectors that could reach another copy.\n\n WHAT TARGETS WHAT\n this the \"Ring Carousel\" group (the component root)\n locator \"rc-stage\" the clipping stage the cards sit in\n locator \"rc-card\" the 10 card groups (each holds an image + shade)\n locator \"rc-shade\" the dark overlay inside each card (dimming)\n locator \"rc-title\" caption line 1 — active card's title\n locator \"rc-count\" caption line 2 — \"3 / 10\"\n locator \"rc-prev\" previous button\n locator \"rc-next\" next button\n\n HOW TO CHANGE THE SETTINGS (Data panel on the \"Ring Carousel\" group)\n autoplay ms between auto-advances. 0 = off (default)\n tilt camera tilt in degrees, default -10\n (more negative = see more of the ring's back)\n gap px between cards around the ring, default 28\n cardw widest a card may be, in px, default 240\n ratio card height / card width, default 1.333\n perspective perspective distance in px, default 1100\n\n HOW TO CHANGE THE CARDS\n Swap any card's image in the editor, or add/remove whole card groups.\n Each card group needs: locator \"rc-card\", a data \"index\" (0,1,2...)\n and a data \"title\" for the caption. The script reads however many\n cards exist and re-derives the ring, so 6 to 14 all work.\n Layer order no longer decides what draws in front — see DEPTH SORTING\n below — so you can reorder the card layers freely.\n ===================================================================== */\n\nvar root = this;\nvar exp = this.experience;\n\n/* ---------- settings, read from the component's own data ---------- */\nfunction num(key, fallback) {\n var v = parseFloat(root.getData(key));\n return isNaN(v) ? fallback : v;\n}\nvar TILT = num('tilt', -10);\nvar GAP = num('gap', 28);\nvar MAX_CARD_W = num('cardw', 240);\nvar RATIO = num('ratio', 1.333);\nvar PERSP = num('perspective', 1100);\nvar AUTOPLAY = num('autoplay', 0);\n\nvar reduceMotion =\n window.matchMedia &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n/* ---------- component handles ---------- */\nvar stage = root.findByLocator('rc-stage');\nvar titleEl = root.findByLocator('rc-title');\nvar countEl = root.findByLocator('rc-count');\nvar prevBtn = root.findByLocator('rc-prev');\nvar nextBtn = root.findByLocator('rc-next');\n\n// Cards in logical order (by their \"index\" data), not layer order.\nvar cards = root\n .findByLocator('rc-card')\n .toArray()\n .map(function (c, i) {\n var idx = parseInt(c.getData('index'), 10);\n return {\n cmp: c,\n shade: c.findByLocator('rc-shade'),\n i: isNaN(idx) ? i : idx,\n title: c.getData('title') || '',\n el: null, // the card's outer group node\n posEl: null, // the positioned layer inside it — see DEPTH SORTING\n last: {} // last written values, so we only write on real change\n };\n })\n .sort(function (a, b) {\n return a.i - b.i;\n });\n\nvar n = cards.length;\nif (n >= 3) {\n var step = 360 / n;\n\n /* ---------- state ---------- */\n var cardW = MAX_CARD_W;\n var cardH = cardW * RATIO;\n var radius = 0;\n var rotation = 0; // live ring angle (deg)\n var target = 0; // angle the ring eases toward\n var active = -1;\n var rafId = null;\n\n /* ---------- this instance's own DOM node ----------\n Stamped with a value unique to this copy, so every lookup below stays\n inside THIS carousel and can never reach another one on the page. */\n var rootEl = null;\n var stageEl = null;\n\n /* The card's outer group is position: static, and a static element\n ignores z-index outright. The element Flex actually positions is the\n absolutely positioned layer inside the group, so that is what has to\n carry the stacking order. Found structurally, by taking the group's\n first direct child that is not static — no hardcoded ids, and no\n position: relative added to the group itself (that would create a new\n containing block and shift every card). */\n function positionedLayer(outer) {\n if (!outer) return null;\n var kids = outer.children || [];\n for (var q = 0; q < kids.length; q++) {\n var pos = '';\n try {\n pos = window.getComputedStyle(kids[q]).position;\n } catch (e) {}\n if (pos && pos !== 'static') return kids[q];\n }\n return null;\n }\n\n /* ---------- GESTURE STYLES ON EVERY DESCENDANT ----------\n touch-action does NOT inherit past a scroll container, and Flex wraps\n the cards in several (the ring container, each card's button, each\n image div) because they clip with overflow: hidden. So setting pan-y\n on the stage alone never reaches the cards: they stay at\n touch-action: auto, the browser claims the horizontal gesture, and\n the script is handed pointercancel a pixel or two in.\n Fix: stamp pan-y on the stage AND every element beneath it. The same\n walk also turns off the browser's native image behaviours, which\n otherwise interrupt a drag (iOS save-image callout on long press,\n desktop native image dragging). */\n function styleNode(el) {\n try {\n el.style.touchAction = 'pan-y';\n el.style.userSelect = 'none';\n el.style.webkitUserSelect = 'none';\n el.style.webkitTouchCallout = 'none';\n el.style.webkitUserDrag = 'none';\n if (el.tagName === 'IMG') el.draggable = false;\n } catch (e) {}\n }\n\n function applyGestureStyles() {\n if (!stageEl) return;\n styleNode(stageEl);\n try {\n stageEl.style.cursor = 'grab';\n } catch (e) {}\n // Walk the light DOM and any shadow roots, so wrappers Flex renders\n // inside a custom element are covered too.\n var stack = [stageEl];\n var guard = 0;\n while (stack.length && guard++ < 5000) {\n var node = stack.pop();\n var kids = node.children || [];\n for (var k = 0; k < kids.length; k++) {\n styleNode(kids[k]);\n stack.push(kids[k]);\n if (kids[k].shadowRoot) stack.push(kids[k].shadowRoot);\n }\n }\n }\n\n function resolveNodes() {\n if (!stageEl) return;\n for (var c = 0; c < n; c++) {\n // Matched via the card's own \"index\" data, scoped to this stage.\n cards[c].el = stageEl.querySelector('[data-sdk-index=\"' + cards[c].i + '\"]');\n cards[c].posEl = positionedLayer(cards[c].el);\n }\n applyGestureStyles();\n }\n\n try {\n var iid = 'rc-' + Math.random().toString(36).slice(2) + Date.now().toString(36);\n root.setData('iid', iid);\n rootEl = document.querySelector('[data-sdk-iid=\"' + iid + '\"]');\n if (rootEl) {\n stageEl = rootEl.querySelector('[cml-locator~=\"rc-stage\"]');\n resolveNodes();\n }\n } catch (err) {\n /* no DOM access: buttons, keys and autoplay still work below */\n }\n\n // Re-stamp the styles whenever cards are re-rendered and replaced.\n if (stageEl && window.MutationObserver) {\n var restampQueued = false;\n new window.MutationObserver(function () {\n if (restampQueued) return;\n restampQueued = true;\n window.requestAnimationFrame(function () {\n restampQueued = false;\n applyGestureStyles();\n });\n }).observe(stageEl, { childList: true, subtree: true });\n }\n\n function mod(a, m) {\n return ((a % m) + m) % m;\n }\n\n /* ---------- write helpers (skip unchanged values) ---------- */\n function setAttr(card, name, value) {\n var v = String(value);\n if (card.last[name] === v) return;\n card.last[name] = v;\n card.cmp.setAttribute(name, v);\n }\n function setShade(card, pct) {\n var v = String(pct);\n if (card.last.shade === v) return;\n card.last.shade = v;\n card.shade.setAttribute('opacity', v);\n }\n\n /* ---------- ring geometry ----------\n Radius comes from card width, gap and card count, exactly as in the\n source: adjacent cards just meet at the front of the ring. */\n function layout() {\n var stageW = 0;\n if (stageEl) stageW = stageEl.getBoundingClientRect().width;\n if (!stageW) stageW = MAX_CARD_W * 4.5;\n\n cardW = Math.min(MAX_CARD_W, Math.max(140, stageW * 0.22));\n cardH = cardW * RATIO;\n radius = Math.round((cardW / 2 + GAP / 2) / Math.tan(Math.PI / n));\n\n // Stage is tall enough for the front card plus the back of the ring.\n stage.setAttribute('height', String(Math.round(cardH * 1.8)));\n render(true);\n }\n\n /* ---------- per-frame placement ----------\n Each card's angle becomes a screen position: sin gives the sideways\n travel, cos gives depth. Depth drives perspective scale, the tilt's\n vertical lift, how far the card dims, and which cards draw in front. */\n function render(force) {\n var tiltSin = Math.sin((TILT * Math.PI) / 180);\n\n for (var k = 0; k < n; k++) {\n var card = cards[k];\n var rad = ((card.i * step + rotation) * Math.PI) / 180;\n var cos = Math.cos(rad);\n var sin = Math.sin(rad);\n\n var z = radius * cos - radius; // 0 at the front, -2r at the back\n var scale = PERSP / (PERSP - z); // foreshortening\n var w = Math.round(cardW * scale);\n var h = Math.round(cardH * scale);\n\n setAttr(card, 'x', Math.round(radius * sin * scale));\n setAttr(card, 'y', Math.round(-z * tiltSin * scale));\n setAttr(card, 'width', w);\n setAttr(card, 'height', h);\n\n var facing = (cos + 1) / 2; // 1 = front, 0 = back\n setShade(card, Math.round((1 - facing) * 60));\n\n /* ---------- DEPTH SORTING ----------\n Flex paints by layer order, which is fixed, so mid-spin a card\n rounding the back would otherwise draw over the front one. Each\n card instead gets an explicit stacking order from its own depth:\n nearest the camera gets the highest value, so painting order\n follows the ring rather than the layers panel.\n This goes on the POSITIONED layer inside the group, not on the\n group — the group is static and a static element ignores z-index.\n Written every frame (not only on change) so it survives any\n re-render triggered by the size/position writes above. */\n var zv = String(1000 + Math.round(cos * 500));\n if (!card.posEl || !card.posEl.isConnected) {\n // Re-resolve if a re-render replaced the node.\n card.posEl = positionedLayer(card.el);\n }\n if (card.posEl) card.posEl.style.zIndex = zv;\n }\n\n var idx = mod(Math.round(-rotation / step), n);\n if (idx !== active || force) setActive(idx);\n }\n\n /* ---------- active card: outline + caption ---------- */\n function setActive(idx) {\n for (var k = 0; k < n; k++) {\n var isOn = cards[k].i === idx;\n var border = isOn ? '2px solid #3554D1 !inside' : '0px solid #00000000 !inside';\n var shadow = isOn\n ? '0 24px 50px -16px rgba(20, 26, 40, 0.6)'\n : '0 18px 40px -18px rgba(20, 26, 40, 0.55)';\n setAttr(cards[k], 'border', border);\n setAttr(cards[k], 'shadows', shadow);\n }\n active = idx;\n var card = cards.filter(function (c) {\n return c.i === idx;\n })[0];\n if (card) {\n titleEl.text.setText(card.title);\n countEl.text.setText(idx + 1 + ' / ' + n);\n }\n }\n\n /* ---------- easing loop ---------- */\n function tick() {\n if (!dragging) {\n var diff = target - rotation;\n if (reduceMotion || Math.abs(diff) < 0.02) {\n rotation = target; // reduced motion: land immediately, no easing\n render();\n rafId = null;\n return;\n }\n rotation += diff * 0.12;\n }\n render();\n rafId = window.requestAnimationFrame(tick);\n }\n function animate() {\n if (rafId === null) rafId = window.requestAnimationFrame(tick);\n }\n\n function snap(angle) {\n return Math.round(angle / step) * step;\n }\n function next() {\n target = snap(target) - step;\n animate();\n }\n function prev() {\n target = snap(target) + step;\n animate();\n }\n function goTo(idx) {\n var current = mod(Math.round(-target / step), n);\n var diff = mod(idx - current, n);\n if (diff > n / 2) diff -= n; // always take the shorter way round\n target = snap(target) - diff * step;\n animate();\n }\n\n /* ---------- drag / swipe ----------\n The rotation is driven by POINTER events, so mouse, touch and pen all\n share one code path. Axis-locked: the carousel only takes the gesture\n once it is clearly horizontal, so vertical swipes still scroll.\n A parallel pair of touch listeners exists only to call preventDefault\n on a horizontal drag (see below) — it never moves the ring itself. */\n var dragging = false;\n var pending = false;\n var pointerId = null;\n var startX = 0,\n startY = 0,\n lastX = 0,\n lastT = 0,\n velocity = 0,\n moved = 0;\n var suppressClickUntil = 0;\n\n // Shared axis decision: 0 = undecided, 1 = horizontal, -1 = vertical.\n // Both the pointer and touch paths read and set this, so they can never\n // disagree about whose gesture it is.\n var axis = 0;\n var AXIS_THRESHOLD = 8;\n\n function decideAxis(dx, dy) {\n if (axis !== 0) return axis;\n var adx = Math.abs(dx);\n var ady = Math.abs(dy);\n if (adx < AXIS_THRESHOLD && ady < AXIS_THRESHOLD) return 0;\n axis = ady > adx ? -1 : 1;\n return axis;\n }\n\n if (stageEl) {\n /* --- touch listeners: gesture ownership only ---\n touch-action: pan-y is the first line of defence, but older iOS\n Safari ignores it. Calling preventDefault on a horizontal touchmove\n is the guarantee: once the drag is clearly sideways, no browser can\n take the gesture away. Vertical drags are never prevented, so the\n page scrolls exactly as it should. Must be passive: false or the\n preventDefault is ignored. */\n stageEl.addEventListener(\n 'touchstart',\n function (e) {\n if (!e.touches || e.touches.length !== 1) return;\n axis = 0;\n startX = e.touches[0].clientX;\n startY = e.touches[0].clientY;\n },\n { passive: false }\n );\n\n stageEl.addEventListener(\n 'touchmove',\n function (e) {\n if (!e.touches || e.touches.length !== 1) return;\n var a = decideAxis(\n e.touches[0].clientX - startX,\n e.touches[0].clientY - startY\n );\n if (a === 1 && e.cancelable) e.preventDefault();\n },\n { passive: false }\n );\n\n stageEl.addEventListener('touchend', function () {\n axis = 0;\n });\n\n /* --- pointer listeners: the actual rotation --- */\n stageEl.addEventListener('pointerdown', function (e) {\n if (e.button !== undefined && e.button !== 0) return;\n pending = true;\n dragging = false;\n if (e.pointerType !== 'touch') axis = 0; // touchstart owns the touch case\n pointerId = e.pointerId;\n startX = lastX = e.clientX;\n startY = e.clientY;\n lastT = (window.performance || Date).now();\n velocity = 0;\n moved = 0;\n stopAutoplay();\n });\n\n stageEl.addEventListener(\n 'pointermove',\n function (e) {\n if (e.pointerId !== pointerId) return;\n\n if (pending && !dragging) {\n var a = decideAxis(e.clientX - startX, e.clientY - startY);\n if (a === 0) return; // too small to call yet\n if (a === -1) {\n pending = false; // vertical — let the page scroll\n return;\n }\n dragging = true; // horizontal — the carousel takes it\n try {\n stageEl.setPointerCapture(pointerId);\n } catch (err) {}\n try {\n stageEl.style.cursor = 'grabbing';\n } catch (err) {}\n animate();\n }\n if (!dragging) return;\n if (e.cancelable) e.preventDefault();\n\n var now = (window.performance || Date).now();\n var dx = e.clientX - lastX;\n var dt = Math.max(1, now - lastT);\n var sens = step / (cardW * 1.1); // one card-width ≈ one slide\n rotation += dx * sens;\n target = rotation;\n velocity = 0.8 * ((dx * sens) / dt) + 0.2 * velocity; // deg/ms\n moved = Math.max(moved, Math.abs(e.clientX - startX));\n lastX = e.clientX;\n lastT = now;\n },\n { passive: false }\n );\n\n // Shared by pointerup and pointercancel: either way the drag ends\n // cleanly and the ring settles on the nearest card.\n function endDrag(e) {\n if (e.pointerId !== pointerId) return;\n if (!dragging) {\n pending = false;\n axis = 0;\n startAutoplay();\n return;\n }\n dragging = false;\n pending = false;\n axis = 0;\n try {\n stageEl.releasePointerCapture(pointerId);\n } catch (err) {}\n try {\n stageEl.style.cursor = 'grab';\n } catch (err) {}\n\n // Momentum, capped at 3 slides, then snap to the nearest card.\n var projected = velocity * 220;\n var cap = step * 3;\n projected = Math.max(-cap, Math.min(cap, projected));\n target = snap(rotation + projected);\n // A real swipe must not also count as a tap on the card under it.\n if (moved > 6) suppressClickUntil = (window.performance || Date).now() + 250;\n animate();\n startAutoplay();\n }\n stageEl.addEventListener('pointerup', endDrag);\n stageEl.addEventListener('pointercancel', endDrag);\n stageEl.addEventListener('dragstart', function (e) {\n e.preventDefault();\n });\n\n // Arrow keys, while focus is anywhere inside this carousel.\n rootEl.addEventListener('keydown', function (e) {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n next();\n restartAutoplay();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n prev();\n restartAutoplay();\n }\n });\n\n rootEl.addEventListener('mouseenter', function () {\n hovering = true;\n stopAutoplay();\n });\n rootEl.addEventListener('mouseleave', function () {\n hovering = false;\n startAutoplay();\n });\n rootEl.addEventListener('focusin', stopAutoplay);\n rootEl.addEventListener('focusout', startAutoplay);\n\n if (window.ResizeObserver && stageEl) {\n new window.ResizeObserver(function () {\n layout();\n }).observe(stageEl);\n } else {\n window.addEventListener('resize', layout);\n }\n }\n\n /* ---------- buttons and tap-to-center ---------- */\n prevBtn.on('component.click', function () {\n prev();\n restartAutoplay();\n });\n nextBtn.on('component.click', function () {\n next();\n restartAutoplay();\n });\n\n cards.forEach(function (card) {\n card.cmp.on('component.click', function () {\n // Ignore the click that ends a drag.\n if ((window.performance || Date).now() < suppressClickUntil) return;\n goTo(card.i);\n restartAutoplay();\n });\n });\n\n /* ---------- autoplay (off unless \"autoplay\" is set) ---------- */\n var autoTimer = null;\n var hovering = false;\n function startAutoplay() {\n if (!AUTOPLAY || reduceMotion || hovering || dragging || autoTimer) return;\n autoTimer = window.setInterval(next, AUTOPLAY);\n }\n function stopAutoplay() {\n window.clearInterval(autoTimer);\n autoTimer = null;\n }\n function restartAutoplay() {\n stopAutoplay();\n startAutoplay();\n }\n\n layout();\n startAutoplay();\n}"}