<div class="viewport" id="viewport">
                        <div class="fixWords" id="leftFixWords">Keep Your Young</div>
                        <div class="wall" id="wall"></div>
                        <span class="nav-btn">move</span>
                        <div class="fixWords" id="rightFixWords">Be Cute Be Cool Be You</div>
                    </div><script>
                        const viewport = document.getElementById('viewport');
                        const wall = document.getElementById('wall');
                        
                        const images = ['https://www.kyy.beauty/wp-content/uploads/2025/12/gallery-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/泡泡先生彭彭包-1.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/一抹星光嘟嘟唇：心機唇線筆-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/泡泡先生擴香-1.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/晶透鎖色琥珀糖唇釉-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/泡泡先生香片-1.jpg','https://www.kyy.beauty/wp-content/uploads/2025/11/Fluffy-Bloom-Mousse-Puff-1.jpg','https://www.kyy.beauty/wp-content/uploads/2025/11/Fluffy-Bloom-Mousse-Puff-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/about-pic-2.jpg',];

                    let ww = window.innerWidth;
                    let zoomScale = 1.3;
                    let scaleGap = 60;
                    let tileBaseSize = 420;
                    let gapX = 90;
                    let gapY = 60;
                    let cols = 5;
                    let rows = 5;
                    if(ww <= 1023){
                        zoomScale = 1.2;
                        scaleGap = 40;
                        tileBaseSize = 315;
                        gapX = 60;
                        gapY = 40;
                        cols += 1;
                        rows += 1;
                    }
                    if(ww <= 767){
                        zoomScale = 1.1;
                        scaleGap = 20;
                        tileBaseSize = 210;
                        gapX = 30;
                        gapY = 20;
                        cols += 2;
                        rows += 2;
                    }
                    const tileW = tileBaseSize + scaleGap;
                    const tileH = tileBaseSize + scaleGap;
                    const tiles = [];

                    const tileFullW = tileW + gapX;
                    const tileFullH = tileH + gapY;

                    let offsetX = 96;
                    let offsetY = -196;
                    if(cols > rows){
                        offsetX = -196;
                        offsetY = 96;
                    }
                    if(ww <= 1023){
                        offsetX = 64;
                        offsetY = -130;
                        if(cols > rows){
                            offsetX = -130;
                            offsetY = 64;
                        }
                    }
                    if(ww <= 767){
                        offsetX = 32;
                        offsetY = -235;
                        if(cols > rows){
                            offsetX = -235;
                            offsetY = 32;
                        }
                    }
                    
                    for (let r = 0; r < rows; r++) {
                        for (let c = 0; c < cols; c++) {
                            const tile = document.createElement("div");
                            tile.className = "tile";
                            const x = (c - Math.floor(cols / 2)) * tileFullW;
                            const y = (r - Math.floor(rows / 2)) * tileFullH;
                            tile.style.left = `${x}px`;
                            tile.style.top = `${y}px`;
    
                            const img = document.createElement("img");
                            img.src = images[(r * cols + c) % images.length];
                            tile.appendChild(img);
                            wall.appendChild(tile);
                            tiles.push({ el: tile, r, c });
                        }
                    }

                    wall.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
                    wrapTiles();

                    let isDragging = false;
                    let startX = 0, startY = 0;
                    let lastX = 0, lastY = 0;
                    let velocityX = 0, velocityY = 0;

                    function updateWall() {
                        wall.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
                    }

                    function wrapTiles() {
                        const vpRect = viewport.getBoundingClientRect();
                        tiles.forEach(t => {
                            const el = t.el;
                            const rect = el.getBoundingClientRect();
                            const tileCenterX = rect.left + rect.width / 2;
                            const tileCenterY = rect.top + rect.height / 2;
                            const vpCenterX = vpRect.left + vpRect.width / 2;
                            const vpCenterY = vpRect.top + vpRect.height / 2;
                            const dx = tileCenterX - vpCenterX;
                            const dy = tileCenterY - vpCenterY;
                            const maxX = tileFullW * cols / 2;
                            const maxY = tileFullH * rows / 2;
                            
                            if (dx < -maxX) el.style.left = `${parseFloat(el.style.left) + tileFullW * cols}px`;
                            if (dx >  maxX) el.style.left = `${parseFloat(el.style.left) - tileFullW * cols}px`;
                            if (dy < -maxY) el.style.top  = `${parseFloat(el.style.top) + tileFullH * rows}px`;
                            if (dy >  maxY) el.style.top  = `${parseFloat(el.style.top) - tileFullH * rows}px`;
                            
                        });
                    }

                    function startDrag(x, y) {
                        isDragging = true;
                        startX = lastX = x;
                        startY = lastY = y;
                        document.getElementById("main-content").classList.add("dragging");
                    }

                    function moveDrag(x, y) {
                        if (!isDragging) return;
                        const dx = x - lastX;
                        const dy = y - lastY;
                        offsetX += dx;
                        offsetY += dy;
                        velocityX = dx;
                        velocityY = dy;
                        lastX = x;
                        lastY = y;
                        updateWall();
                        wrapTiles();
                        requestAnimationFrame(inertiaScroll2);
                    }

                    function endDrag() {
                        if (!isDragging) return;
                        isDragging = false;
                        document.getElementById("main-content").classList.remove("dragging");
                        requestAnimationFrame(inertiaScroll);
                    }

                    function inertiaScroll() {
                        if (Math.abs(velocityX) < 0.1 && Math.abs(velocityY) < 0.1) return;
                        offsetX += velocityX;
                        offsetY += velocityY;
                        velocityX *= 0.93;
                        velocityY *= 0.93;
                        updateWall();
                        wrapTiles();
                        requestAnimationFrame(inertiaScroll);
                    }

                    function inertiaScroll2() {
                        if (Math.abs(velocityX) < 0.1 && Math.abs(velocityY) < 0.1) return;
                        offsetX += velocityX;
                        offsetY += velocityY;
                        velocityX *= 0.1000375;
                        velocityY *= 0.1000375;
                        updateWall();
                        wrapTiles();
                        requestAnimationFrame(inertiaScroll2);
                    }
                    
                    viewport.addEventListener("mousedown", e => startDrag(e.clientX, e.clientY));
                    window.addEventListener("mousemove", e => moveDrag(e.clientX, e.clientY));
                    window.addEventListener("mouseup", endDrag);
                    
                    viewport.addEventListener("touchstart", e => {
                        const t = e.touches[0];
                        startDrag(t.clientX, t.clientY);
                    }, { passive: false });

                    window.addEventListener("touchmove", e => {
                        if (!isDragging) return;
                        const t = e.touches[0];
                        moveDrag(t.clientX, t.clientY);
                    }, { passive: false });
                    
                    window.addEventListener("touchend", endDrag);
                    
                    document.addEventListener("DOMContentLoaded", () => {
                      const element = document.querySelector("#viewport");
                      simulate1pxSlide(element);
                    });
                    
                    function simulate1pxSlide(el) {
                      const startX = 100;
                      const startY = 100;
                    
                      const touchStart = new Touch({
                        identifier: Date.now(),
                        target: el,
                        clientX: startX,
                        clientY: startY
                      });
                    
                      el.dispatchEvent(new TouchEvent("touchstart", {
                        bubbles: true,
                        cancelable: true,
                        touches: [touchStart],
                        targetTouches: [touchStart],
                        changedTouches: [touchStart]
                      }));
                    
                      const touchMove = new Touch({
                        identifier: touchStart.identifier,
                        target: el,
                        clientX: startX + 1,
                        clientY: startY
                      });
                    
                      el.dispatchEvent(new TouchEvent("touchmove", {
                        bubbles: true,
                        cancelable: true,
                        touches: [touchMove],
                        targetTouches: [touchMove],
                        changedTouches: [touchMove]
                      }));
                    
                      el.dispatchEvent(new TouchEvent("touchend", {
                        bubbles: true,
                        cancelable: true,
                        touches: [],
                        targetTouches: [],
                        changedTouches: [touchMove]
                      }));
                    }

                    window.addEventListener("resize", () => {
                        location.reload();
                    });
                    
                    
                    let eW = viewport.offsetWidth;
                    const fnv = viewport.querySelectorAll(".nav-btn");
                    
                    const toggleFlow = (active) => {
                        fnv.forEach(el => {
                            if (active) {
                                el.classList.add("start-flow");
                                el.parentElement.classList.add("start-flow");
                            } else {
                                el.classList.remove("start-flow");
                                el.parentElement.classList.remove("start-flow");
                            }
                        });
                    };
                    
                    window.addEventListener("scroll", () => {
                        toggleFlow(false);
                    });
                    
                    if (window.innerWidth > 979) {
                        fnv.forEach(btn => {
                            btn.addEventListener("click", function() {
                                if (this.classList.contains("left")) {
                                    viewport.querySelector("button.slick-prev")?.click();
                                } else {
                                    viewport.querySelector("button.slick-next")?.click();
                                }
                            });
                        });
                    
                        const handleMouse = (e) => {
                            if (e.type === "mouseenter" || e.type === "mousemove") {
                                toggleFlow(true);
                            }
                    
                            if (e.type === "mouseleave") {
                                toggleFlow(false);
                            }
                    
                            if (e.type === "mousemove") {
                                const rect = viewport.getBoundingClientRect();
                                const relativeX = e.clientX - rect.left;
                                const relativeY = e.clientY - rect.top;
                                
                                fnv.forEach(el => {
                                    el.style.top = (relativeY - 50) + "px";
                                    el.style.left = (relativeX - 50) + "px";
                                });
                            }
                        };
                    
                        viewport.addEventListener("mouseenter", handleMouse);
                        viewport.addEventListener("mouseleave", handleMouse);
                        viewport.addEventListener("mousemove", handleMouse);
                    }
                    
                </script>
        <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        #main-content{
            width: 100%;
            max-width: 100%;
            height: 100vh;
            overflow: hidden;
            background: white;
            transition: background 0.3s ease;
            touch-action: none;
            padding: 0;
        }
        #main-content.dragging {
          background: black;
        }
        .viewport {
          position: relative;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          cursor: none;
          transition: transform 0.3s ease;
        }
        .wall {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) translate(0px, 0px);
        }
        .tile {
          position: absolute;
          width: 420px;
          height: 420px;
          transition: transform 0.3s ease;
        }
        .tile img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          pointer-events: none;
          user-select: none;
          transition: transform 0.3s ease;
        }
        #main-content.dragging .viewport {
          transform: scale(1.1);
        }
        .fixWords {
            position: absolute;
            top: 50%;
            z-index: 1;
            transform: translate(0, -50%);
            margin: 0 1%;
            font-family: Poppins;
            font-size: 22px;
            font-weight: 500;
            line-height: 1.05;
            color: #000;
            white-space: nowrap;
            pointer-events: none;
            -webkit-user-select: none; 
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        #leftFixWords {
            writing-mode: sideways-lr;
            left: 0;
        }
        #rightFixWords {
            right: 0;
            writing-mode: sideways-rl;
        }
        
        @media(max-width:1023px){
            .tile {
                width: 315px;
                height: 315px;
            }
        }
        @media(max-width:767px){
            .tile {
                width: 210px;
                height: 210px;
            }
            .fixWords{
                display:none;    
            }
        }
        #viewport .nav-btn{ 
            display: inline-flex;
            align-items: center; 
            justify-content: center;
            font-size: 16px; 
            color: #fff;
            width: 1em; 
            height: 1em;
            padding: 50px;
            background-color: #000; 
            border-radius: 50%; 
            position: absolute; 
            top: 0;
            right: 10%;
            transform: translateY(-50%);
            cursor: none; 
            opacity: 0; 
            pointer-events: none!important;
            z-index: 9; 
            transition: opacity .6s;
        }
        #viewport .nav-btn.start-flow{ 
            opacity: 1;
        }
        
        @media(max-width:979px){
            #viewport .nav-btn{ opacity:0; }
        }
      </style>
    <div class="viewport" id="viewport">
                        <div class="fixWords" id="leftFixWords">Keep Your Young</div>
                        <div class="wall" id="wall"></div>
                        <span class="nav-btn">move</span>
                        <div class="fixWords" id="rightFixWords">Be Cute Be Cool Be You</div>
                    </div><script>
                        const viewport = document.getElementById('viewport');
                        const wall = document.getElementById('wall');
                        
                        const images = ['https://www.kyy.beauty/wp-content/uploads/2025/12/gallery-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/泡泡先生彭彭包-1.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/一抹星光嘟嘟唇：心機唇線筆-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/泡泡先生擴香-1.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/晶透鎖色琥珀糖唇釉-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/泡泡先生香片-1.jpg','https://www.kyy.beauty/wp-content/uploads/2025/11/Fluffy-Bloom-Mousse-Puff-1.jpg','https://www.kyy.beauty/wp-content/uploads/2025/11/Fluffy-Bloom-Mousse-Puff-2.jpg','https://www.kyy.beauty/wp-content/uploads/2026/01/about-pic-2.jpg',];

                    let ww = window.innerWidth;
                    let zoomScale = 1.3;
                    let scaleGap = 60;
                    let tileBaseSize = 420;
                    let gapX = 90;
                    let gapY = 60;
                    let cols = 5;
                    let rows = 5;
                    if(ww <= 1023){
                        zoomScale = 1.2;
                        scaleGap = 40;
                        tileBaseSize = 315;
                        gapX = 60;
                        gapY = 40;
                        cols += 1;
                        rows += 1;
                    }
                    if(ww <= 767){
                        zoomScale = 1.1;
                        scaleGap = 20;
                        tileBaseSize = 210;
                        gapX = 30;
                        gapY = 20;
                        cols += 2;
                        rows += 2;
                    }
                    const tileW = tileBaseSize + scaleGap;
                    const tileH = tileBaseSize + scaleGap;
                    const tiles = [];

                    const tileFullW = tileW + gapX;
                    const tileFullH = tileH + gapY;

                    let offsetX = 96;
                    let offsetY = -196;
                    if(cols > rows){
                        offsetX = -196;
                        offsetY = 96;
                    }
                    if(ww <= 1023){
                        offsetX = 64;
                        offsetY = -130;
                        if(cols > rows){
                            offsetX = -130;
                            offsetY = 64;
                        }
                    }
                    if(ww <= 767){
                        offsetX = 32;
                        offsetY = -235;
                        if(cols > rows){
                            offsetX = -235;
                            offsetY = 32;
                        }
                    }
                    
                    for (let r = 0; r < rows; r++) {
                        for (let c = 0; c < cols; c++) {
                            const tile = document.createElement("div");
                            tile.className = "tile";
                            const x = (c - Math.floor(cols / 2)) * tileFullW;
                            const y = (r - Math.floor(rows / 2)) * tileFullH;
                            tile.style.left = `${x}px`;
                            tile.style.top = `${y}px`;
    
                            const img = document.createElement("img");
                            img.src = images[(r * cols + c) % images.length];
                            tile.appendChild(img);
                            wall.appendChild(tile);
                            tiles.push({ el: tile, r, c });
                        }
                    }

                    wall.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
                    wrapTiles();

                    let isDragging = false;
                    let startX = 0, startY = 0;
                    let lastX = 0, lastY = 0;
                    let velocityX = 0, velocityY = 0;

                    function updateWall() {
                        wall.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
                    }

                    function wrapTiles() {
                        const vpRect = viewport.getBoundingClientRect();
                        tiles.forEach(t => {
                            const el = t.el;
                            const rect = el.getBoundingClientRect();
                            const tileCenterX = rect.left + rect.width / 2;
                            const tileCenterY = rect.top + rect.height / 2;
                            const vpCenterX = vpRect.left + vpRect.width / 2;
                            const vpCenterY = vpRect.top + vpRect.height / 2;
                            const dx = tileCenterX - vpCenterX;
                            const dy = tileCenterY - vpCenterY;
                            const maxX = tileFullW * cols / 2;
                            const maxY = tileFullH * rows / 2;
                            
                            if (dx < -maxX) el.style.left = `${parseFloat(el.style.left) + tileFullW * cols}px`;
                            if (dx >  maxX) el.style.left = `${parseFloat(el.style.left) - tileFullW * cols}px`;
                            if (dy < -maxY) el.style.top  = `${parseFloat(el.style.top) + tileFullH * rows}px`;
                            if (dy >  maxY) el.style.top  = `${parseFloat(el.style.top) - tileFullH * rows}px`;
                            
                        });
                    }

                    function startDrag(x, y) {
                        isDragging = true;
                        startX = lastX = x;
                        startY = lastY = y;
                        document.getElementById("main-content").classList.add("dragging");
                    }

                    function moveDrag(x, y) {
                        if (!isDragging) return;
                        const dx = x - lastX;
                        const dy = y - lastY;
                        offsetX += dx;
                        offsetY += dy;
                        velocityX = dx;
                        velocityY = dy;
                        lastX = x;
                        lastY = y;
                        updateWall();
                        wrapTiles();
                        requestAnimationFrame(inertiaScroll2);
                    }

                    function endDrag() {
                        if (!isDragging) return;
                        isDragging = false;
                        document.getElementById("main-content").classList.remove("dragging");
                        requestAnimationFrame(inertiaScroll);
                    }

                    function inertiaScroll() {
                        if (Math.abs(velocityX) < 0.1 && Math.abs(velocityY) < 0.1) return;
                        offsetX += velocityX;
                        offsetY += velocityY;
                        velocityX *= 0.93;
                        velocityY *= 0.93;
                        updateWall();
                        wrapTiles();
                        requestAnimationFrame(inertiaScroll);
                    }

                    function inertiaScroll2() {
                        if (Math.abs(velocityX) < 0.1 && Math.abs(velocityY) < 0.1) return;
                        offsetX += velocityX;
                        offsetY += velocityY;
                        velocityX *= 0.1000375;
                        velocityY *= 0.1000375;
                        updateWall();
                        wrapTiles();
                        requestAnimationFrame(inertiaScroll2);
                    }
                    
                    viewport.addEventListener("mousedown", e => startDrag(e.clientX, e.clientY));
                    window.addEventListener("mousemove", e => moveDrag(e.clientX, e.clientY));
                    window.addEventListener("mouseup", endDrag);
                    
                    viewport.addEventListener("touchstart", e => {
                        const t = e.touches[0];
                        startDrag(t.clientX, t.clientY);
                    }, { passive: false });

                    window.addEventListener("touchmove", e => {
                        if (!isDragging) return;
                        const t = e.touches[0];
                        moveDrag(t.clientX, t.clientY);
                    }, { passive: false });
                    
                    window.addEventListener("touchend", endDrag);
                    
                    document.addEventListener("DOMContentLoaded", () => {
                      const element = document.querySelector("#viewport");
                      simulate1pxSlide(element);
                    });
                    
                    function simulate1pxSlide(el) {
                      const startX = 100;
                      const startY = 100;
                    
                      const touchStart = new Touch({
                        identifier: Date.now(),
                        target: el,
                        clientX: startX,
                        clientY: startY
                      });
                    
                      el.dispatchEvent(new TouchEvent("touchstart", {
                        bubbles: true,
                        cancelable: true,
                        touches: [touchStart],
                        targetTouches: [touchStart],
                        changedTouches: [touchStart]
                      }));
                    
                      const touchMove = new Touch({
                        identifier: touchStart.identifier,
                        target: el,
                        clientX: startX + 1,
                        clientY: startY
                      });
                    
                      el.dispatchEvent(new TouchEvent("touchmove", {
                        bubbles: true,
                        cancelable: true,
                        touches: [touchMove],
                        targetTouches: [touchMove],
                        changedTouches: [touchMove]
                      }));
                    
                      el.dispatchEvent(new TouchEvent("touchend", {
                        bubbles: true,
                        cancelable: true,
                        touches: [],
                        targetTouches: [],
                        changedTouches: [touchMove]
                      }));
                    }

                    window.addEventListener("resize", () => {
                        location.reload();
                    });
                    
                    
                    let eW = viewport.offsetWidth;
                    const fnv = viewport.querySelectorAll(".nav-btn");
                    
                    const toggleFlow = (active) => {
                        fnv.forEach(el => {
                            if (active) {
                                el.classList.add("start-flow");
                                el.parentElement.classList.add("start-flow");
                            } else {
                                el.classList.remove("start-flow");
                                el.parentElement.classList.remove("start-flow");
                            }
                        });
                    };
                    
                    window.addEventListener("scroll", () => {
                        toggleFlow(false);
                    });
                    
                    if (window.innerWidth > 979) {
                        fnv.forEach(btn => {
                            btn.addEventListener("click", function() {
                                if (this.classList.contains("left")) {
                                    viewport.querySelector("button.slick-prev")?.click();
                                } else {
                                    viewport.querySelector("button.slick-next")?.click();
                                }
                            });
                        });
                    
                        const handleMouse = (e) => {
                            if (e.type === "mouseenter" || e.type === "mousemove") {
                                toggleFlow(true);
                            }
                    
                            if (e.type === "mouseleave") {
                                toggleFlow(false);
                            }
                    
                            if (e.type === "mousemove") {
                                const rect = viewport.getBoundingClientRect();
                                const relativeX = e.clientX - rect.left;
                                const relativeY = e.clientY - rect.top;
                                
                                fnv.forEach(el => {
                                    el.style.top = (relativeY - 50) + "px";
                                    el.style.left = (relativeX - 50) + "px";
                                });
                            }
                        };
                    
                        viewport.addEventListener("mouseenter", handleMouse);
                        viewport.addEventListener("mouseleave", handleMouse);
                        viewport.addEventListener("mousemove", handleMouse);
                    }
                    
                </script>
        <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        #main-content{
            width: 100%;
            max-width: 100%;
            height: 100vh;
            overflow: hidden;
            background: white;
            transition: background 0.3s ease;
            touch-action: none;
            padding: 0;
        }
        #main-content.dragging {
          background: black;
        }
        .viewport {
          position: relative;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          cursor: none;
          transition: transform 0.3s ease;
        }
        .wall {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) translate(0px, 0px);
        }
        .tile {
          position: absolute;
          width: 420px;
          height: 420px;
          transition: transform 0.3s ease;
        }
        .tile img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          pointer-events: none;
          user-select: none;
          transition: transform 0.3s ease;
        }
        #main-content.dragging .viewport {
          transform: scale(1.1);
        }
        .fixWords {
            position: absolute;
            top: 50%;
            z-index: 1;
            transform: translate(0, -50%);
            margin: 0 1%;
            font-family: Poppins;
            font-size: 22px;
            font-weight: 500;
            line-height: 1.05;
            color: #000;
            white-space: nowrap;
            pointer-events: none;
            -webkit-user-select: none; 
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        #leftFixWords {
            writing-mode: sideways-lr;
            left: 0;
        }
        #rightFixWords {
            right: 0;
            writing-mode: sideways-rl;
        }
        
        @media(max-width:1023px){
            .tile {
                width: 315px;
                height: 315px;
            }
        }
        @media(max-width:767px){
            .tile {
                width: 210px;
                height: 210px;
            }
            .fixWords{
                display:none;    
            }
        }
        #viewport .nav-btn{ 
            display: inline-flex;
            align-items: center; 
            justify-content: center;
            font-size: 16px; 
            color: #fff;
            width: 1em; 
            height: 1em;
            padding: 50px;
            background-color: #000; 
            border-radius: 50%; 
            position: absolute; 
            top: 0;
            right: 10%;
            transform: translateY(-50%);
            cursor: none; 
            opacity: 0; 
            pointer-events: none!important;
            z-index: 9; 
            transition: opacity .6s;
        }
        #viewport .nav-btn.start-flow{ 
            opacity: 1;
        }
        
        @media(max-width:979px){
            #viewport .nav-btn{ opacity:0; }
        }
      </style>
    {"id":2,"date":"2025-07-14T16:11:44","date_gmt":"2025-07-14T16:11:44","guid":{"rendered":"https:\/\/www.kyy.beauty\/?page_id=2"},"modified":"2025-12-11T09:24:30","modified_gmt":"2025-12-11T09:24:30","slug":"product-gallery","status":"publish","type":"page","link":"https:\/\/www.kyy.beauty\/en\/product-gallery\/","title":{"rendered":"Product Gallery \uff0d KYY"},"content":{"rendered":"","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-2","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":3,"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":10495,"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/pages\/2\/revisions\/10495"}],"wp:attachment":[{"href":"https:\/\/www.kyy.beauty\/en\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}