Mriri Art – Parallax Landing<\/title> <\/p>\n<style>\/* CUSTOMIZATION VARIABLES *\/:root { \/* DARK BLUE BACKGROUND *\/ --site-background-color: #00071b;  \/* --- IMAGE LAYERS --- *\/ --bg-layer-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-0c-1920b-min.png'); --layer-1-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-1b-1920b-min.png'); --layer-2-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-2-1920b-min.png'); --layer-3-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-3-buttons-1920b-min.png');  \/* --- PARALLAX SPEEDS --- *\/ --speed-layer-0: 0.5; --speed-layer-1: 1.0; --speed-layer-2: 1.6; --speed-layer-3: 2.2; --speed-buttons: 2.2;  \/* --- BUTTON STYLES (INVISIBLE) --- *\/ --btn-debug-color: rgba(0, 0, 0, 0);   \/* --- Parallax Settings --- *\/ --parallax-desktop-intensity: 25; --parallax-mobile-intensity: 1.5; --parallax-buffer-size: 115%; --parallax-buffer-offset: -7.5%;}* { margin: 0; padding: 0; box-sizing: border-box; }body { background-color: var(--site-background-color); overflow: hidden; position: fixed; width: 100%; height: 100%;}.face-landing-wrapper { position: relative; width: 100vw; height: 100dvh;  min-height: 100dvh;  overflow: hidden; display: flex; justify-content: center; align-items: center;}\/* Loading spinner *\/.face-landing-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border: 4px solid transparent; border-top-color: #FF1493; border-radius: 50%; transform: translate(-50%, -50%); animation: spin 0.8s linear infinite; z-index: 5; opacity: 1; transition: opacity 0.3s;}.face-landing-wrapper.loaded::before { opacity: 0; pointer-events: none; }.face-landing-wrapper { animation: forceShow 0.1s forwards 4s; }@keyframes forceShow { to { opacity: 1; } }@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }.aspect-ratio-container { position: relative; width: 100%; height: 100%; max-width: 100vw; max-height: 100dvh;}.parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}.parallax-content { position: absolute; width: var(--parallax-buffer-size); height: var(--parallax-buffer-size); top: var(--parallax-buffer-offset); left: var(--parallax-buffer-offset); background-size: cover;  background-position: center center; background-repeat: no-repeat; will-change: transform;}\/* Layer Z-Indexes *\/.layer-0 { z-index: 1; }.layer-0 .parallax-content { background-image: var(--bg-layer-image); }.layer-1 { z-index: 2; }.layer-1 .parallax-content { background-image: var(--layer-1-image); }.layer-2 { z-index: 3; }.layer-2 .parallax-content { background-image: var(--layer-2-image); }.layer-3 { z-index: 4; }.layer-3 .parallax-content { background-image: var(--layer-3-image); }.face-landing-wrapper::after { content: ''; position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; background-image: var(--bg-layer-image);}.button-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; will-change: transform;}.hotspot { position: absolute; pointer-events: auto; transform: none;  z-index: 99999; cursor: pointer; display: block; text-decoration: none; background-color: var(--btn-debug-color); border: none; transition: background-color 0.2s; -webkit-tap-highlight-color: transparent; outline: none;}.hotspot:hover, .hotspot:focus { background-color: transparent; }\/* === ZONE POSITIONING === *\/.btn-gallery { top: 0; left: 0; width: 48%; height: 50%; }.btn-shop { top: 0; right: 0; width: 48%; height: 50%; }.btn-about { top: 50%; left: 0; width: 100%; height: 40%; }\/* === INDEPENDENT FADE LAYER === *\/.bottom-fade { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 20;  pointer-events: none;  \/* DESKTOP FADE: Tall and smooth *\/ height: 30vh;  background: linear-gradient(to top, #00071b 10%, rgba(0, 7, 27, 0) 100%);}\/* === FOOTER === *\/.immersive-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 40px 15px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 9999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1.5; pointer-events: none;}.footer-section { pointer-events: auto; color: rgba(255, 255, 255, 0.5); }.footer-left { display: flex; flex-direction: column; }.footer-contact strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; }.footer-contact a { color: inherit; text-decoration: none; transition: color 0.3s; }.footer-right { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }.immersive-footer a { color: rgba(255, 255, 255, 0.5); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 400; transition: all 0.3s ease;}.immersive-footer a:hover { color: #00e640; text-shadow: 0 0 8px rgba(0, 230, 64, 0.4); }\/* === MOBILE OPTIMIZATION === *\/@media (orientation: portrait) { \/* Image Sizing: 80vh height, pushed up *\/ .parallax-content { background-size: auto 80vh;  background-position: center 45%; background-repeat: no-repeat; } \/* MOBILE FADE OVERRIDE: Shorter and Sharper *\/ .bottom-fade { height: 15vh; \/* Much shorter *\/ background: linear-gradient(to top, #00071b 30%, rgba(0, 7, 27, 0) 100%); } \/* Mobile Footer *\/ .immersive-footer { flex-direction: column-reverse; align-items: center; text-align: center; gap: 10px; padding: 10px 20px 5px;  justify-content: flex-end; } .footer-right { justify-content: center; gap: 12px; margin-bottom: 5px; }}\/* === IOS PERMISSION BUTTON (OPTIMIZED) === *\/#tiltPermitButton { display: none; position: fixed; \/* Positioned at bottom third so it doesn't block the art *\/ bottom: 15vh;  left: 50%; transform: translateX(-50%); z-index: 999999;  \/* Modern\/Glassy Look *\/ padding: 15px 30px; font-size: 16px; font-weight: 600; color: white; background: rgba(255, 20, 147, 0.9); \/* Pink with transparency *\/ backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); transition: transform 0.2s, background 0.2s;}#tiltPermitButton:active { transform: translateX(-50%) scale(0.95); background: rgba(255, 20, 147, 1);}#tiltPermitButton.show { display: block; }@media (prefers-reduced-motion: reduce) { .parallax-content, .button-container { transform: none !important; animation: none !important; } * { transition-duration: 0.01ms !important; }}<\/style>\n<p><\/head><body><\/p>\n<div class=\"face-landing-wrapper\" id=\"parallaxFace\"> <\/p>\n<div class=\"aspect-ratio-container\"> <\/p>\n<div class=\"parallax-layer layer-0\" id=\"layer0\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"parallax-layer layer-1\" id=\"layer1\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"parallax-layer layer-2\" id=\"layer2\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"parallax-layer layer-3\" id=\"layer3\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"button-container\"> <a href=\"\/product-category\/art-prints\/\" class=\"hotspot btn-gallery\" aria-label=\"Shop Art Prints\"><\/a> <a href=\"\/product-category\/originals\/\" class=\"hotspot btn-shop\" aria-label=\"View Original Paintings\"><\/a> <a href=\"https:\/\/mriri.art\/about\/\" class=\"hotspot btn-about\" aria-label=\"About Me\"><\/a> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"bottom-fade\"><\/div>\n<p>  <\/p>\n<footer class=\"immersive-footer\"> <\/p>\n<div class=\"footer-section footer-left\"> <\/p>\n<div class=\"footer-contact\"> <strong>Robin Reithmayr<\/strong> | R\u00f6tzergasse 56\/17, 1170 Wien, AT<!\u2013- [et_pb_br_holder] -\u2013> <a href=\"mailto:info@mriri.art\">info@mriri.art<\/a> | <a href=\"tel:+436506036277\">+43 650 6036277<\/a> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"footer-section footer-right\"> <a href=\"https:\/\/mriri.art\/imprint\/\" title=\"Imprint\">Imprint<\/a> <a href=\"https:\/\/mriri.art\/terms-and-conditions\/\" title=\"Terms\">AGB\/Terms<\/a> <a href=\"https:\/\/mriri.art\/privacy-policy\" title=\"Privacy\">Privacy<\/a> <a href=\"https:\/\/mriri.art\/right-of-withdrawal\/\" title=\"Withdrawal\">Withdrawal<\/a> <a href=\"https:\/\/www.instagram.com\/mriri_art\" target=\"_blank\" rel=\"noopener\">Instagram<\/a> <\/div>\n<p> <\/footer>\n<p><\/div>\n<p><button id=\"tiltPermitButton\">Enable 3D Motion<\/button><script>(function() { 'use strict';  const parallaxContainer = document.querySelector('.aspect-ratio-container'); const parallaxWrapper = document.querySelector('.face-landing-wrapper'); const permitButton = document.getElementById('tiltPermitButton');  const content0 = document.querySelector('#layer0 .parallax-content'); const content1 = document.querySelector('#layer1 .parallax-content'); const content2 = document.querySelector('#layer2 .parallax-content'); const content3 = document.querySelector('#layer3 .parallax-content'); const buttonContainer = document.querySelector('.button-container');  \/\/ Mobile Check including iPad const isMobile = \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent) ||  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); const rootStyles = getComputedStyle(document.documentElement);  const desktopIntensity = parseFloat(rootStyles.getPropertyValue('--parallax-desktop-intensity')) || 25; const mobileIntensity = parseFloat(rootStyles.getPropertyValue('--parallax-mobile-intensity')) || 1.5;  const speed0 = parseFloat(rootStyles.getPropertyValue('--speed-layer-0')) || 0.5; const speed1 = parseFloat(rootStyles.getPropertyValue('--speed-layer-1')) || 1.0; const speed2 = parseFloat(rootStyles.getPropertyValue('--speed-layer-2')) || 1.6; const speed3 = parseFloat(rootStyles.getPropertyValue('--speed-layer-3')) || 2.2; const speedButtons = parseFloat(rootStyles.getPropertyValue('--speed-buttons')) || 2.2;  let targetX = 0, targetY = 0, currentX = 0, currentY = 0, isIdle = false, animationFrameId = null; const IDLE_THRESHOLD = 0.01, SMOOTHING_FACTOR = 0.1;  \/\/ Calibration variables let initialBeta = null; let initialGamma = null; function updateParallax() { currentX += (targetX - currentX) * SMOOTHING_FACTOR; currentY += (targetY - currentY) * SMOOTHING_FACTOR;  if (Math.abs(targetX - currentX) < IDLE_THRESHOLD && Math.abs(targetY - currentY) < IDLE_THRESHOLD) { isIdle = true; return; }  content0.style.transform = `translate(${currentX * speed0}px, ${currentY * speed0}px)`; content1.style.transform = `translate(${currentX * speed1}px, ${currentY * speed1}px)`; content2.style.transform = `translate(${currentX * speed2}px, ${currentY * speed2}px)`; content3.style.transform = `translate(${currentX * speed3}px, ${currentY * speed3}px)`; buttonContainer.style.transform = `translate(${currentX * speedButtons}px, ${currentY * speedButtons}px)`;  animationFrameId = requestAnimationFrame(updateParallax); }  function restartAnimation() { if (isIdle) { isIdle = false; animationFrameId = requestAnimationFrame(updateParallax); } }  function throttle(func, limit) { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }  if (!isMobile) { \/\/ Desktop Mouse Logic parallaxContainer.addEventListener('mousemove', function(e) { const rect = parallaxContainer.getBoundingClientRect(); targetX = (e.clientX - rect.left - rect.width \/ 2) \/ desktopIntensity; targetY = (e.clientY - rect.top - rect.height \/ 2) \/ desktopIntensity; restartAnimation(); });  parallaxContainer.addEventListener('mouseleave', function() { targetX = 0; targetY = 0; restartAnimation(); }); } else if (window.DeviceOrientationEvent) { \/\/ Mobile Gyroscope Logic if (typeof DeviceOrientationEvent.requestPermission === 'function') { permitButton.classList.add('show'); permitButton.addEventListener('click', function() { DeviceOrientationEvent.requestPermission() .then(function(response) { if (response === 'granted') { permitButton.classList.remove('show'); enableGyroscope(); } }) .catch(console.error); }); } else { enableGyroscope(); }  function enableGyroscope() { const handleOrientation = throttle(function(e) { if (e.beta === null || e.gamma === null) return; \/\/ CALIBRATION: Capture the starting position (flat or held) if (initialBeta === null) { initialBeta = e.beta; initialGamma = e.gamma; } \/\/ Calculate difference from start position let deltaBeta = e.beta - initialBeta; let deltaGamma = e.gamma - initialGamma; \/\/ Clamp values to prevent extreme jumping (max +\/- 40 degrees) const maxTilt = 40; deltaBeta = Math.max(-maxTilt, Math.min(maxTilt, deltaBeta)); deltaGamma = Math.max(-maxTilt, Math.min(maxTilt, deltaGamma)); targetX = deltaGamma \/ mobileIntensity; targetY = deltaBeta \/ mobileIntensity;  restartAnimation(); }, 30);  window.addEventListener('deviceorientation', handleOrientation); } }  function preloadImages() { const imageUrls = [ rootStyles.getPropertyValue('--bg-layer-image'), rootStyles.getPropertyValue('--layer-1-image'), rootStyles.getPropertyValue('--layer-2-image'), rootStyles.getPropertyValue('--layer-3-image') ].map(url => url.trim().replace(\/^url\$['\"]?\/, '').replace(\/['\"]?\$$\/, ''));  let loadedCount = 0; imageUrls.forEach(url => { const img = new Image(); img.onload = img.onerror = function() { if (++loadedCount === imageUrls.length) parallaxWrapper.classList.add('loaded'); }; img.src = url; }); }  window.addEventListener('beforeunload', function() { if (animationFrameId) cancelAnimationFrame(animationFrameId); });  animationFrameId = requestAnimationFrame(updateParallax); preloadImages(); setTimeout(function() { parallaxWrapper.classList.add('loaded'); }, 3000); })();<\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":28,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-113","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":80,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/113\/revisions"}],"predecessor-version":[{"id":2733,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/113\/revisions\/2733"}],"up":[{"embeddable":true,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/28"}],"wp:attachment":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/media?parent=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":113,"date":"2025-10-01T19:11:58","date_gmt":"2025-10-01T19:11:58","guid":{"rendered":"https:\/\/mriri.art\/?page_id=113"},"modified":"2026-08-25T14:38:57","modified_gmt":"2026-08-25T12:38:57","slug":"home","status":"publish","type":"page","link":"https:\/\/mriri.art\/de\/","title":{"rendered":"Home"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.27.5″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” custom_padding=”0px||0px|||” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.5″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” width=”100%” max_width=”2560px” custom_padding=”0px||0px|||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.8″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] Mriri Art – Parallax Landing<\/title> <\/p>\n<style>\/* CUSTOMIZATION VARIABLES *\/:root { \/* DARK BLUE BACKGROUND *\/ --site-background-color: #00071b;  \/* --- IMAGE LAYERS --- *\/ --bg-layer-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-0c-1920b-min.png'); --layer-1-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-1b-1920b-min.png'); --layer-2-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-2-1920b-min.png'); --layer-3-image: url('https:\/\/mriri.art\/wp-content\/uploads\/2025\/12\/Mriri-Art-Background-v2_Ebene-3-buttons-1920b-min.png');  \/* --- PARALLAX SPEEDS --- *\/ --speed-layer-0: 0.5; --speed-layer-1: 1.0; --speed-layer-2: 1.6; --speed-layer-3: 2.2; --speed-buttons: 2.2;  \/* --- BUTTON STYLES (INVISIBLE) --- *\/ --btn-debug-color: rgba(0, 0, 0, 0);   \/* --- Parallax Settings --- *\/ --parallax-desktop-intensity: 25; --parallax-mobile-intensity: 1.5; --parallax-buffer-size: 115%; --parallax-buffer-offset: -7.5%;}* { margin: 0; padding: 0; box-sizing: border-box; }body { background-color: var(--site-background-color); overflow: hidden; position: fixed; width: 100%; height: 100%;}.face-landing-wrapper { position: relative; width: 100vw; height: 100dvh;  min-height: 100dvh;  overflow: hidden; display: flex; justify-content: center; align-items: center;}\/* Loading spinner *\/.face-landing-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border: 4px solid transparent; border-top-color: #FF1493; border-radius: 50%; transform: translate(-50%, -50%); animation: spin 0.8s linear infinite; z-index: 5; opacity: 1; transition: opacity 0.3s;}.face-landing-wrapper.loaded::before { opacity: 0; pointer-events: none; }.face-landing-wrapper { animation: forceShow 0.1s forwards 4s; }@keyframes forceShow { to { opacity: 1; } }@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }.aspect-ratio-container { position: relative; width: 100%; height: 100%; max-width: 100vw; max-height: 100dvh;}.parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}.parallax-content { position: absolute; width: var(--parallax-buffer-size); height: var(--parallax-buffer-size); top: var(--parallax-buffer-offset); left: var(--parallax-buffer-offset); background-size: cover;  background-position: center center; background-repeat: no-repeat; will-change: transform;}\/* Layer Z-Indexes *\/.layer-0 { z-index: 1; }.layer-0 .parallax-content { background-image: var(--bg-layer-image); }.layer-1 { z-index: 2; }.layer-1 .parallax-content { background-image: var(--layer-1-image); }.layer-2 { z-index: 3; }.layer-2 .parallax-content { background-image: var(--layer-2-image); }.layer-3 { z-index: 4; }.layer-3 .parallax-content { background-image: var(--layer-3-image); }.face-landing-wrapper::after { content: ''; position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; background-image: var(--bg-layer-image);}.button-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; will-change: transform;}.hotspot { position: absolute; pointer-events: auto; transform: none;  z-index: 99999; cursor: pointer; display: block; text-decoration: none; background-color: var(--btn-debug-color); border: none; transition: background-color 0.2s; -webkit-tap-highlight-color: transparent; outline: none;}.hotspot:hover, .hotspot:focus { background-color: transparent; }\/* === ZONE POSITIONING === *\/.btn-gallery { top: 0; left: 0; width: 48%; height: 50%; }.btn-shop { top: 0; right: 0; width: 48%; height: 50%; }.btn-about { top: 50%; left: 0; width: 100%; height: 40%; }\/* === INDEPENDENT FADE LAYER === *\/.bottom-fade { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 20;  pointer-events: none;  \/* DESKTOP FADE: Tall and smooth *\/ height: 30vh;  background: linear-gradient(to top, #00071b 10%, rgba(0, 7, 27, 0) 100%);}\/* === FOOTER === *\/.immersive-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 40px 15px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 9999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1.5; pointer-events: none;}.footer-section { pointer-events: auto; color: rgba(255, 255, 255, 0.5); }.footer-left { display: flex; flex-direction: column; }.footer-contact strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; }.footer-contact a { color: inherit; text-decoration: none; transition: color 0.3s; }.footer-right { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }.immersive-footer a { color: rgba(255, 255, 255, 0.5); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 400; transition: all 0.3s ease;}.immersive-footer a:hover { color: #00e640; text-shadow: 0 0 8px rgba(0, 230, 64, 0.4); }\/* === MOBILE OPTIMIZATION === *\/@media (orientation: portrait) { \/* Image Sizing: 80vh height, pushed up *\/ .parallax-content { background-size: auto 80vh;  background-position: center 45%; background-repeat: no-repeat; } \/* MOBILE FADE OVERRIDE: Shorter and Sharper *\/ .bottom-fade { height: 15vh; \/* Much shorter *\/ background: linear-gradient(to top, #00071b 30%, rgba(0, 7, 27, 0) 100%); } \/* Mobile Footer *\/ .immersive-footer { flex-direction: column-reverse; align-items: center; text-align: center; gap: 10px; padding: 10px 20px 5px;  justify-content: flex-end; } .footer-right { justify-content: center; gap: 12px; margin-bottom: 5px; }}\/* === IOS PERMISSION BUTTON (OPTIMIZED) === *\/#tiltPermitButton { display: none; position: fixed; \/* Positioned at bottom third so it doesn't block the art *\/ bottom: 15vh;  left: 50%; transform: translateX(-50%); z-index: 999999;  \/* Modern\/Glassy Look *\/ padding: 15px 30px; font-size: 16px; font-weight: 600; color: white; background: rgba(255, 20, 147, 0.9); \/* Pink with transparency *\/ backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); transition: transform 0.2s, background 0.2s;}#tiltPermitButton:active { transform: translateX(-50%) scale(0.95); background: rgba(255, 20, 147, 1);}#tiltPermitButton.show { display: block; }@media (prefers-reduced-motion: reduce) { .parallax-content, .button-container { transform: none !important; animation: none !important; } * { transition-duration: 0.01ms !important; }}<\/style>\n<p><\/head><body><\/p>\n<div class=\"face-landing-wrapper\" id=\"parallaxFace\"> <\/p>\n<div class=\"aspect-ratio-container\"> <\/p>\n<div class=\"parallax-layer layer-0\" id=\"layer0\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"parallax-layer layer-1\" id=\"layer1\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"parallax-layer layer-2\" id=\"layer2\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"parallax-layer layer-3\" id=\"layer3\">\n<div class=\"parallax-content\"><\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"button-container\"> <a href=\"\/product-category\/art-prints\/\" class=\"hotspot btn-gallery\" aria-label=\"Shop Art Prints\"><\/a> <a href=\"\/product-category\/originals\/\" class=\"hotspot btn-shop\" aria-label=\"View Original Paintings\"><\/a> <a href=\"https:\/\/mriri.art\/about\/\" class=\"hotspot btn-about\" aria-label=\"About Me\"><\/a> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"bottom-fade\"><\/div>\n<p>  <\/p>\n<footer class=\"immersive-footer\"> <\/p>\n<div class=\"footer-section footer-left\"> <\/p>\n<div class=\"footer-contact\"> <strong>Robin Reithmayr<\/strong> | R\u00f6tzergasse 56\/17, 1170 Wien, AT<!\u2013- [et_pb_br_holder] -\u2013> <a href=\"mailto:info@mriri.art\">info@mriri.art<\/a> | <a href=\"tel:+436506036277\">+43 650 6036277<\/a> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"footer-section footer-right\"> <a href=\"https:\/\/mriri.art\/imprint\/\" title=\"Imprint\">Imprint<\/a> <a href=\"https:\/\/mriri.art\/terms-and-conditions\/\" title=\"Terms\">AGB\/Terms<\/a> <a href=\"https:\/\/mriri.art\/privacy-policy\" title=\"Privacy\">Privacy<\/a> <a href=\"https:\/\/mriri.art\/right-of-withdrawal\/\" title=\"Withdrawal\">Withdrawal<\/a> <a href=\"https:\/\/www.instagram.com\/mriri_art\" target=\"_blank\" rel=\"noopener\">Instagram<\/a> <\/div>\n<p> <\/footer>\n<p><\/div>\n<p><button id=\"tiltPermitButton\">Enable 3D Motion<\/button><script>(function() { 'use strict';  const parallaxContainer = document.querySelector('.aspect-ratio-container'); const parallaxWrapper = document.querySelector('.face-landing-wrapper'); const permitButton = document.getElementById('tiltPermitButton');  const content0 = document.querySelector('#layer0 .parallax-content'); const content1 = document.querySelector('#layer1 .parallax-content'); const content2 = document.querySelector('#layer2 .parallax-content'); const content3 = document.querySelector('#layer3 .parallax-content'); const buttonContainer = document.querySelector('.button-container');  \/\/ Mobile Check including iPad const isMobile = \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent) ||  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); const rootStyles = getComputedStyle(document.documentElement);  const desktopIntensity = parseFloat(rootStyles.getPropertyValue('--parallax-desktop-intensity')) || 25; const mobileIntensity = parseFloat(rootStyles.getPropertyValue('--parallax-mobile-intensity')) || 1.5;  const speed0 = parseFloat(rootStyles.getPropertyValue('--speed-layer-0')) || 0.5; const speed1 = parseFloat(rootStyles.getPropertyValue('--speed-layer-1')) || 1.0; const speed2 = parseFloat(rootStyles.getPropertyValue('--speed-layer-2')) || 1.6; const speed3 = parseFloat(rootStyles.getPropertyValue('--speed-layer-3')) || 2.2; const speedButtons = parseFloat(rootStyles.getPropertyValue('--speed-buttons')) || 2.2;  let targetX = 0, targetY = 0, currentX = 0, currentY = 0, isIdle = false, animationFrameId = null; const IDLE_THRESHOLD = 0.01, SMOOTHING_FACTOR = 0.1;  \/\/ Calibration variables let initialBeta = null; let initialGamma = null; function updateParallax() { currentX += (targetX - currentX) * SMOOTHING_FACTOR; currentY += (targetY - currentY) * SMOOTHING_FACTOR;  if (Math.abs(targetX - currentX) < IDLE_THRESHOLD && Math.abs(targetY - currentY) < IDLE_THRESHOLD) { isIdle = true; return; }  content0.style.transform = `translate(${currentX * speed0}px, ${currentY * speed0}px)`; content1.style.transform = `translate(${currentX * speed1}px, ${currentY * speed1}px)`; content2.style.transform = `translate(${currentX * speed2}px, ${currentY * speed2}px)`; content3.style.transform = `translate(${currentX * speed3}px, ${currentY * speed3}px)`; buttonContainer.style.transform = `translate(${currentX * speedButtons}px, ${currentY * speedButtons}px)`;  animationFrameId = requestAnimationFrame(updateParallax); }  function restartAnimation() { if (isIdle) { isIdle = false; animationFrameId = requestAnimationFrame(updateParallax); } }  function throttle(func, limit) { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }  if (!isMobile) { \/\/ Desktop Mouse Logic parallaxContainer.addEventListener('mousemove', function(e) { const rect = parallaxContainer.getBoundingClientRect(); targetX = (e.clientX - rect.left - rect.width \/ 2) \/ desktopIntensity; targetY = (e.clientY - rect.top - rect.height \/ 2) \/ desktopIntensity; restartAnimation(); });  parallaxContainer.addEventListener('mouseleave', function() { targetX = 0; targetY = 0; restartAnimation(); }); } else if (window.DeviceOrientationEvent) { \/\/ Mobile Gyroscope Logic if (typeof DeviceOrientationEvent.requestPermission === 'function') { permitButton.classList.add('show'); permitButton.addEventListener('click', function() { DeviceOrientationEvent.requestPermission() .then(function(response) { if (response === 'granted') { permitButton.classList.remove('show'); enableGyroscope(); } }) .catch(console.error); }); } else { enableGyroscope(); }  function enableGyroscope() { const handleOrientation = throttle(function(e) { if (e.beta === null || e.gamma === null) return; \/\/ CALIBRATION: Capture the starting position (flat or held) if (initialBeta === null) { initialBeta = e.beta; initialGamma = e.gamma; } \/\/ Calculate difference from start position let deltaBeta = e.beta - initialBeta; let deltaGamma = e.gamma - initialGamma; \/\/ Clamp values to prevent extreme jumping (max +\/- 40 degrees) const maxTilt = 40; deltaBeta = Math.max(-maxTilt, Math.min(maxTilt, deltaBeta)); deltaGamma = Math.max(-maxTilt, Math.min(maxTilt, deltaGamma)); targetX = deltaGamma \/ mobileIntensity; targetY = deltaBeta \/ mobileIntensity;  restartAnimation(); }, 30);  window.addEventListener('deviceorientation', handleOrientation); } }  function preloadImages() { const imageUrls = [ rootStyles.getPropertyValue('--bg-layer-image'), rootStyles.getPropertyValue('--layer-1-image'), rootStyles.getPropertyValue('--layer-2-image'), rootStyles.getPropertyValue('--layer-3-image') ].map(url => url.trim().replace(\/^url\$['\"]?\/, '').replace(\/['\"]?\$$\/, ''));  let loadedCount = 0; imageUrls.forEach(url => { const img = new Image(); img.onload = img.onerror = function() { if (++loadedCount === imageUrls.length) parallaxWrapper.classList.add('loaded'); }; img.src = url; }); }  window.addEventListener('beforeunload', function() { if (animationFrameId) cancelAnimationFrame(animationFrameId); });  animationFrameId = requestAnimationFrame(updateParallax); preloadImages(); setTimeout(function() { parallaxWrapper.classList.add('loaded'); }, 3000); })();<\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":28,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-113","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":80,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/113\/revisions"}],"predecessor-version":[{"id":2733,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/113\/revisions\/2733"}],"up":[{"embeddable":true,"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/pages\/28"}],"wp:attachment":[{"href":"https:\/\/mriri.art\/de\/wp-json\/wp\/v2\/media?parent=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}