{"id":11,"date":"2026-05-03T12:23:58","date_gmt":"2026-05-03T09:23:58","guid":{"rendered":"https:\/\/t-bauer.space\/?page_id=11"},"modified":"2026-07-26T12:07:29","modified_gmt":"2026-07-26T09:07:29","slug":"home","status":"publish","type":"page","link":"https:\/\/t-bauer.space\/","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3cc2501 e-con-full e-flex e-con e-parent\" data-id=\"3cc2501\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-539ab1d elementor-widget elementor-widget-html\" data-id=\"539ab1d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     LUXURY MORPH STACK v11\r\n     Arrows centered vertically on cards\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap');\r\n\r\n.lux-v11-wrap {\r\n  font-family: 'Space Grotesk', -apple-system, sans-serif;\r\n  width: 100%;\r\n  max-width: 460px;\r\n  margin: 0 auto;\r\n  padding: 60px 20px 80px;\r\n  perspective: 2000px;\r\n  user-select: none;\r\n  -webkit-user-select: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n  position: relative;\r\n}\r\n\r\n.lux-v11-stack {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 580px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n}\r\n\r\n.lux-v11-card {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 480px;\r\n  border-radius: 24px;\r\n  overflow: hidden;\r\n  cursor: grab;\r\n  left: 50%;\r\n  margin-left: -50%;\r\n  will-change: transform, opacity;\r\n  transform: translateZ(0);\r\n  backface-visibility: hidden;\r\n  -webkit-backface-visibility: hidden;\r\n  background: #0a0a0a;\r\n  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),\r\n              opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\r\n}\r\n\r\n.lux-v11-card:active { cursor: grabbing; }\r\n\r\n.lux-v11-photo {\r\n  position: absolute;\r\n  inset: -4%;\r\n  width: 108%;\r\n  height: 108%;\r\n  background-size: cover;\r\n  background-position: center;\r\n  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);\r\n  will-change: transform;\r\n}\r\n\r\n@keyframes luxFloat11 {\r\n  0%, 100% { transform: translateY(0px); }\r\n  50%      { transform: translateY(-3px); }\r\n}\r\n\r\n.lux-v11-card[data-index=\"0\"] .lux-v11-photo {\r\n  animation: luxFloat11 5s ease-in-out infinite;\r\n}\r\n\r\n.lux-v11-card:hover .lux-v11-photo {\r\n  animation-play-state: paused;\r\n  transform: scale(1.03);\r\n}\r\n\r\n\/* \u2500\u2500 DEPTH \u2500\u2500 *\/\r\n.lux-v11-card[data-index=\"0\"] {\r\n  z-index: 5;\r\n  transform: translateY(0) scale(1);\r\n  opacity: 1;\r\n  box-shadow: 0 40px 100px rgba(0,0,0,0.18), 0 15px 35px rgba(0,0,0,0.08);\r\n}\r\n.lux-v11-card[data-index=\"1\"] {\r\n  z-index: 4;\r\n  transform: translateY(-20px) scale(0.88);\r\n  opacity: 0.50;\r\n  box-shadow: 0 30px 70px rgba(0,0,0,0.10);\r\n}\r\n.lux-v11-card[data-index=\"2\"] {\r\n  z-index: 3;\r\n  transform: translateY(-40px) scale(0.76);\r\n  opacity: 0.20;\r\n  box-shadow: 0 20px 50px rgba(0,0,0,0.06);\r\n}\r\n.lux-v11-card[data-index=\"3\"] {\r\n  z-index: 2;\r\n  transform: translateY(-60px) scale(0.64);\r\n  opacity: 0.07;\r\n  box-shadow: 0 12px 30px rgba(0,0,0,0.04);\r\n}\r\n.lux-v11-card[data-index=\"4\"] {\r\n  z-index: 1;\r\n  transform: translateY(-80px) scale(0.52);\r\n  opacity: 0.02;\r\n  box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n}\r\n\r\n\/* \u2500\u2500 Swipe \u2500\u2500 *\/\r\n.lux-v11-card.swiping {\r\n  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),\r\n              opacity 0.35s ease;\r\n}\r\n.lux-v11-card.swiped-left  { transform: translateX(-110%) translateY(0) rotate(-1deg) scale(0.96) !important; opacity: 0 !important; }\r\n.lux-v11-card.swiped-right { transform: translateX(110%) translateY(0) rotate(1deg) scale(0.96) !important; opacity: 0 !important; }\r\n\r\n\/* \u2500\u2500 ARROWS: centered on card middle \u2500\u2500 *\/\r\n.lux-v11-arrow {\r\n  position: absolute;\r\n  top: 240px; \/* exactly half of card height (480px) *\/\r\n  transform: translateY(-50%);\r\n  z-index: 20;\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 50%;\r\n  border: none;\r\n  background: rgba(255,255,255,0.10);\r\n  backdrop-filter: blur(8px);\r\n  -webkit-backdrop-filter: blur(8px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  color: #fff;\r\n  outline: none;\r\n  box-shadow: 0 2px 10px rgba(0,0,0,0.12);\r\n}\r\n\r\n.lux-v11-arrow:hover {\r\n  background: rgba(255,255,255,0.85);\r\n  color: #000;\r\n  transform: translateY(-50%) scale(1.08);\r\n}\r\n\r\n.lux-v11-arrow:active {\r\n  transform: translateY(-50%) scale(0.96);\r\n}\r\n\r\n.lux-v11-arrow svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  stroke: currentColor;\r\n  fill: none;\r\n  stroke-width: 2;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n.lux-v11-arrow--prev { left: -22px; }\r\n.lux-v11-arrow--next { right: -22px; }\r\n\r\n\/* \u2500\u2500 Bottom bar \u2500\u2500 *\/\r\n.lux-v11-bar {\r\n  position: absolute;\r\n  bottom: 20px;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 12;\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 5px;\r\n  opacity: 0;\r\n  transition: opacity 0.4s ease;\r\n  pointer-events: none;\r\n}\r\n\r\n.lux-v11-card.active .lux-v11-bar { opacity: 1; }\r\n\r\n.lux-v11-seg {\r\n  width: 18px;\r\n  height: 2px;\r\n  border-radius: 1px;\r\n  background: rgba(255,255,255,0.18);\r\n  transition: background 0.3s ease;\r\n}\r\n\r\n.lux-v11-seg.on {\r\n  background: rgba(255,255,255,0.65);\r\n}\r\n\r\n\/* \u2500\u2500 Footer dots \u2500\u2500 *\/\r\n.lux-v11-footer {\r\n  display: flex;\r\n  justify-content: center;\r\n  margin-top: 32px;\r\n}\r\n\r\n.lux-v11-dots {\r\n  display: flex;\r\n  gap: 6px;\r\n  align-items: center;\r\n}\r\n\r\n.lux-v11-dot {\r\n  width: 5px;\r\n  height: 5px;\r\n  border-radius: 50%;\r\n  background: rgba(0,0,0,0.10);\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: all 0.4s ease;\r\n  padding: 0;\r\n}\r\n\r\n.lux-v11-dot.on {\r\n  width: 24px;\r\n  border-radius: 2px;\r\n  background: #1a1a1a;\r\n}\r\n\r\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\r\n@media (max-width: 520px) {\r\n  .lux-v11-wrap { padding: 40px 16px 60px; max-width: 100%; }\r\n  .lux-v11-stack { height: 500px; }\r\n  .lux-v11-card { height: 420px; border-radius: 20px; }\r\n  .lux-v11-arrow { top: 210px; width: 40px; height: 40px; } \/* half of 420px *\/\r\n  .lux-v11-arrow--prev { left: 10px; }\r\n  .lux-v11-arrow--next { right: 10px; }\r\n  .lux-v11-arrow svg { width: 14px; height: 14px; }\r\n}\r\n\r\n@media (min-width: 768px) and (max-width: 1024px) {\r\n  .lux-v11-wrap { max-width: 500px; }\r\n  .lux-v11-stack { height: 640px; }\r\n  .lux-v11-card { height: 520px; }\r\n  .lux-v11-arrow { top: 260px; } \/* half of 520px *\/\r\n}\r\n\r\n@media (min-width: 1025px) {\r\n  .lux-v11-wrap { max-width: 460px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .lux-v11-card, .lux-v11-photo, .lux-v11-arrow, .lux-v11-dot {\r\n    transition: none !important;\r\n  }\r\n  .lux-v11-photo { animation: none !important; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"lux-v11-wrap\" id=\"luxV11Wrap\">\r\n  <div class=\"lux-v11-stack\" id=\"luxV11Stack\">\r\n\r\n    <button class=\"lux-v11-arrow lux-v11-arrow--prev\" id=\"v11Prev\" aria-label=\"Previous\">\r\n      <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n    <\/button>\r\n\r\n    <button class=\"lux-v11-arrow lux-v11-arrow--next\" id=\"v11Next\" aria-label=\"Next\">\r\n      <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"lux-v11-card active\" data-index=\"0\" data-id=\"0\">\r\n      <div class=\"lux-v11-photo\" style=\"background-image:url('https:\/\/tatianabauer.com\/wp-content\/uploads\/2026\/05\/NZ8_0349.jpg')\"><\/div>\r\n      <div class=\"lux-v11-bar\"><div class=\"lux-v11-seg on\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lux-v11-card\" data-index=\"1\" data-id=\"1\">\r\n      <div class=\"lux-v11-photo\" style=\"background-image:url('https:\/\/tatianabauer.com\/wp-content\/uploads\/2026\/05\/NZ8_1424-scaled.jpg')\"><\/div>\r\n      <div class=\"lux-v11-bar\"><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg on\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lux-v11-card\" data-index=\"2\" data-id=\"2\">\r\n      <div class=\"lux-v11-photo\" style=\"background-image:url('https:\/\/tatianabauer.com\/wp-content\/uploads\/2026\/03\/tb-b.jpg')\"><\/div>\r\n      <div class=\"lux-v11-bar\"><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg on\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lux-v11-card\" data-index=\"3\" data-id=\"3\">\r\n      <div class=\"lux-v11-photo\" style=\"background-image:url('https:\/\/tatianabauer.com\/wp-content\/uploads\/2026\/03\/NZ8_1410.jpg')\"><\/div>\r\n      <div class=\"lux-v11-bar\"><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg on\"><\/div><div class=\"lux-v11-seg\"><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lux-v11-card\" data-index=\"4\" data-id=\"4\">\r\n      <div class=\"lux-v11-photo\" style=\"background-image:url('https:\/\/tatianabauer.com\/wp-content\/uploads\/2026\/03\/NZ8_0700.jpg')\"><\/div>\r\n      <div class=\"lux-v11-bar\"><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg\"><\/div><div class=\"lux-v11-seg on\"><\/div><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"lux-v11-footer\">\r\n    <div class=\"lux-v11-dots\" id=\"v11Dots\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  const container = document.getElementById('luxV11Stack');\r\n  const cards = Array.from(container.querySelectorAll('.lux-v11-card'));\r\n  const btnPrev = document.getElementById('v11Prev');\r\n  const btnNext = document.getElementById('v11Next');\r\n  const dotsContainer = document.getElementById('v11Dots');\r\n  const total = cards.length;\r\n  let current = 0;\r\n  let animating = false;\r\n  let autoTimer = null;\r\n  const AUTO_DELAY = 5000;\r\n\r\n  cards.forEach((_, i) => {\r\n    const d = document.createElement('button');\r\n    d.className = 'lux-v11-dot' + (i === 0 ? ' on' : '');\r\n    d.setAttribute('aria-label', 'Slide ' + (i + 1));\r\n    d.addEventListener('click', () => goTo(i));\r\n    dotsContainer.appendChild(d);\r\n  });\r\n  const dots = Array.from(dotsContainer.querySelectorAll('.lux-v11-dot'));\r\n\r\n  function update() {\r\n    cards.forEach((c, i) => {\r\n      const off = (i - current + total) % total;\r\n      c.setAttribute('data-index', off);\r\n      c.classList.toggle('active', off === 0);\r\n    });\r\n    dots.forEach((d, i) => d.classList.toggle('on', i === current));\r\n    startAuto();\r\n  }\r\n\r\n  function next() {\r\n    if (animating) return;\r\n    animating = true;\r\n    stopAuto();\r\n    const top = cards[current];\r\n    top.classList.add('swiping', 'swiped-left');\r\n    setTimeout(() => {\r\n      top.classList.remove('swiping', 'swiped-left');\r\n      current = (current + 1) % total;\r\n      update();\r\n      animating = false;\r\n    }, 500);\r\n  }\r\n\r\n  function prev() {\r\n    if (animating) return;\r\n    animating = true;\r\n    stopAuto();\r\n    const top = cards[current];\r\n    top.classList.add('swiping', 'swiped-right');\r\n    setTimeout(() => {\r\n      top.classList.remove('swiping', 'swiped-right');\r\n      current = (current - 1 + total) % total;\r\n      update();\r\n      animating = false;\r\n    }, 500);\r\n  }\r\n\r\n  function goTo(index) {\r\n    if (animating || index === current) return;\r\n    const diff = (index - current + total) % total;\r\n    if (diff <= total \/ 2) {\r\n      for (let i = 0; i < diff; i++) setTimeout(next, i * 180);\r\n    } else {\r\n      for (let i = 0; i < total - diff; i++) setTimeout(prev, i * 180);\r\n    }\r\n  }\r\n\r\n  function stopAuto() {\r\n    if (autoTimer) { clearTimeout(autoTimer); autoTimer = null; }\r\n  }\r\n\r\n  function startAuto() {\r\n    stopAuto();\r\n    autoTimer = setTimeout(() => { next(); }, AUTO_DELAY);\r\n  }\r\n\r\n  btnNext.addEventListener('click', next);\r\n  btnPrev.addEventListener('click', prev);\r\n\r\n  let sx = 0, sy = 0, dragging = false;\r\n  container.addEventListener('touchstart', e => {\r\n    sx = e.touches[0].clientX;\r\n    sy = e.touches[0].clientY;\r\n    dragging = true;\r\n    stopAuto();\r\n  }, { passive: true });\r\n\r\n  container.addEventListener('touchmove', e => {\r\n    if (!dragging) return;\r\n    const dx = e.touches[0].clientX - sx;\r\n    const dy = e.touches[0].clientY - sy;\r\n    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 8) e.preventDefault();\r\n  }, { passive: false });\r\n\r\n  container.addEventListener('touchend', e => {\r\n    if (!dragging) return;\r\n    dragging = false;\r\n    const dx = e.changedTouches[0].clientX - sx;\r\n    if (Math.abs(dx) > 50) { dx < 0 ? next() : prev(); } else { startAuto(); }\r\n  }, { passive: true });\r\n\r\n  container.addEventListener('mousedown', e => { sx = e.clientX; dragging = true; stopAuto(); });\r\n  container.addEventListener('mouseup', e => {\r\n    if (!dragging) return;\r\n    dragging = false;\r\n    const dx = e.clientX - sx;\r\n    if (Math.abs(dx) > 50) { dx < 0 ? next() : prev(); } else { startAuto(); }\r\n  });\r\n\r\n  let wt;\r\n  container.addEventListener('wheel', e => {\r\n    e.preventDefault();\r\n    clearTimeout(wt);\r\n    wt = setTimeout(() => { e.deltaY > 0 ? next() : prev(); }, 80);\r\n  }, { passive: false });\r\n\r\n  document.addEventListener('keydown', e => {\r\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { stopAuto(); next(); }\r\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { stopAuto(); prev(); }\r\n  });\r\n\r\n  container.addEventListener('mouseenter', stopAuto);\r\n  container.addEventListener('mouseleave', startAuto);\r\n\r\n  update();\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/t-bauer.space\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/t-bauer.space\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/t-bauer.space\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/t-bauer.space\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/t-bauer.space\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":320,"href":"https:\/\/t-bauer.space\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/t-bauer.space\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/t-bauer.space\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}