{"id":7,"date":"2026-07-02T10:06:53","date_gmt":"2026-07-02T10:06:53","guid":{"rendered":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=7"},"modified":"2026-10-16T13:53:29","modified_gmt":"2026-10-16T13:53:29","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=7","title":{"rendered":"[POISTA \u2013 vanha] Elementor #7"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7eb697d e-con e-atomic-element e-flexbox-base e-83af2fb \" data-id=\"7eb697d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7eb697d\">\n    \t\t<div class=\"elementor-element elementor-element-ded24a6 elementor-widget elementor-widget-html\" data-id=\"ded24a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* Base Container *\/\n  .store-scroll-container {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    min-height: 700px;\n    overflow: hidden;\n    background-color: #f4f4f4; \n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    perspective: 1600px; \n    transform-style: preserve-3d;\n  }\n\n  \/* --- HEADER UI --- *\/\n  .store-header {\n    position: absolute;\n    top: 30px;\n    left: 0;\n    width: 100%;\n    padding: 0 40px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    z-index: 9999;\n    pointer-events: none; \n  }\n\n  \/* Toggle Switch *\/\n  .layout-controls {\n    position: absolute;\n    left: 40px;\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    pointer-events: auto; \n  }\n\n  .toggle-label {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    color: #888;\n    transition: color 0.3s ease;\n    cursor: pointer;\n  }\n  \n  .toggle-label.active { color: #111; }\n\n  .toggle-switch {\n    width: 44px; height: 24px; background: #ccc; border-radius: 12px;\n    position: relative; cursor: pointer; transition: background 0.4s ease;\n  }\n\n  .toggle-switch.is-scattered { background: #E63946; }\n\n  .toggle-knob {\n    width: 18px; height: 18px; background: #fff; border-radius: 50%;\n    position: absolute; top: 3px; left: 3px;\n    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\n    box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n  }\n\n  .toggle-switch.is-scattered .toggle-knob { transform: translateX(20px); }\n\n  \/* Dynamic Now Playing *\/\n  .now-playing {\n    text-align: center;\n  }\n\n  .now-playing .np-album {\n    font-size: 18px; font-weight: 700; color: #111; margin: 0 0 4px 0; letter-spacing: -0.5px;\n  }\n\n  .now-playing .np-artist {\n    font-size: 12px; font-weight: 600; color: #E63946; text-transform: uppercase; letter-spacing: 1.5px;\n  }\n\n  \/* Base Card Wrapper *\/\n  .album-card {\n    position: absolute;\n    top: 50%; left: 50%; \n    width: 28vw; max-width: 400px; aspect-ratio: 1 \/ 1;\n    background: transparent; will-change: transform, opacity;\n    pointer-events: none; \n  }\n\n  .album-card.is-active { pointer-events: auto; cursor: pointer; }\n\n  \/* --- VISUALS --- *\/\n  .visual-wrapper {\n    position: relative; width: 100%; height: 100%;\n    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2;\n  }\n\n  .cover-art {\n    position: relative; width: 100%; height: 100%; object-fit: cover;\n    z-index: 5; border-radius: 4px; border: 1px solid #ddd;\n    box-shadow: -8px 12px 30px rgba(0,0,0,0.25); pointer-events: none;\n  }\n\n  .vinyl-record {\n    position: absolute; top: 2%; left: 2%; width: 96%; height: 96%;\n    background: repeating-radial-gradient(#111, #111 4px, #222 5px, #111 6px);\n    border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center;\n    box-shadow: inset 0 0 0 10px #0a0a0a, 0 0 15px rgba(0,0,0,0.5);\n    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  .vinyl-label { width: 32%; height: 32%; border-radius: 50%; border: 2px solid #000; position: relative; }\n  .vinyl-label::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8%; height: 8%; background: #f4f4f4; border-radius: 50%; }\n\n  .album-card:nth-child(3n) .vinyl-label { background: #E63946; }\n  .album-card:nth-child(3n+1) .vinyl-label { background: #1db954; }\n  .album-card:nth-child(3n+2) .vinyl-label { background: #ffd700; }\n\n  .album-card.is-active:not(.is-opened):hover .vinyl-record {\n    transform: translateX(45%) rotate(180deg);\n  }\n\n  \/* --- INFO PANEL --- *\/\n  .info-wrapper {\n    position: absolute; top: 50%; left: 50%;\n    width: 22vw; min-width: 280px;\n    transform: translate(-50%, -50%) translateX(0); opacity: 0; pointer-events: none;\n    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n    background: #fff; padding: 35px; border-radius: 4px;\n    box-shadow: 0 15px 45px rgba(0,0,0,0.1); text-align: left; z-index: 1; border: 1px solid #eaeaea;\n  }\n\n  .info-wrapper h3 { font-size: 26px; margin: 0 0 8px 0; color: #111; }\n  .info-wrapper .price { font-size: 20px; font-weight: 600; color: #E63946; margin: 0 0 15px 0; }\n  .info-wrapper .desc { font-size: 14px; color: #666; line-height: 1.6; margin: 0 0 25px 0; }\n\n  \/* Store Buttons *\/\n  .store-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }\n  .store-btn {\n    padding: 15px 20px; font-size: 13px; font-weight: 600; text-transform: uppercase;\n    letter-spacing: 1px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease;\n    text-decoration: none; text-align: center; width: 100%; box-sizing: border-box;\n  }\n  \n  .btn-cart { background: #E63946; color: #fff; border: none; }\n  .btn-cart:hover { background: #d90429; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3); }\n  .btn-details { background: transparent; color: #111; border: 1px solid #111; }\n  .btn-details:hover { background: #f4f4f4; }\n\n  \/* --- DESKTOP SLIDING OPEN ANIMATIONS --- *\/\n  .album-card.is-opened .visual-wrapper { transform: translateX(-16vw); }\n  .album-card.is-opened .info-wrapper { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) translateX(16vw); }\n\n  \/* --- MOBILE RESPONSIVE OVERRIDES --- *\/\n  @media (max-width: 768px) {\n    .store-scroll-container { min-height: 800px; }\n    .store-header {\n      padding: 20px 20px 0 20px;\n      top: 0;\n      flex-direction: column-reverse; \/* Puts controls below the text *\/\n      align-items: center;\n      gap: 15px;\n    }\n    .layout-controls { position: relative; left: 0; }\n    \n    .album-card { width: 55vw; }\n    \n    \/* On Mobile: Slide Up and Down instead of Left and Right *\/\n    .album-card.is-opened .visual-wrapper { \n      transform: translateY(-20vh) scale(0.85); \n    }\n    .album-card.is-opened .info-wrapper { \n      transform: translate(-50%, -50%) translateY(18vh); \n      width: 85vw; min-width: 250px; padding: 20px; \n    }\n    \n    .info-wrapper h3 { font-size: 22px; margin-bottom: 5px; }\n    .info-wrapper .price { font-size: 18px; margin-bottom: 10px; }\n    .info-wrapper .desc { font-size: 13px; margin-bottom: 15px; }\n    .store-btn { padding: 12px 15px; font-size: 12px; }\n  }\n<\/style>\n\n<div class=\"store-scroll-container\" id=\"store-container\">\n  \n  <div class=\"store-header\">\n    <div class=\"layout-controls\" id=\"toggle-layout\">\n      <span class=\"toggle-label\" id=\"label-neat\">Neat<\/span>\n      <div class=\"toggle-switch is-scattered\" id=\"switch-ui\"><div class=\"toggle-knob\"><\/div><\/div>\n      <span class=\"toggle-label active\" id=\"label-scatter\">Messy<\/span>\n    <\/div>\n    <div class=\"now-playing\">\n      <div class=\"np-album\" id=\"display-album\">Loading...<\/div>\n      <div class=\"np-artist\" id=\"display-artist\">...<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"album-card\" data-album=\"Retro Grooves\" data-artist=\"The Synthetics\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=1\"><\/div><div class=\"info-wrapper\"><h3>Retro Grooves<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Midnight Jazz\" data-artist=\"Miles Quartet\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=2\"><\/div><div class=\"info-wrapper\"><h3>Midnight Jazz<\/h3><p class=\"price\">$34.50<\/p><p class=\"desc\">Exclusive clear vinyl.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Synthesizer Dreams\" data-artist=\"Neon Runner\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=3\"><\/div><div class=\"info-wrapper\"><h3>Synthesizer Dreams<\/h3><p class=\"price\">$24.00<\/p><p class=\"desc\">Standard black pressing.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Urban Echoes\" data-artist=\"City Sounds\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=4\"><\/div><div class=\"info-wrapper\"><h3>Urban Echoes<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Deep Blue\" data-artist=\"Oceanic\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=5\"><\/div><div class=\"info-wrapper\"><h3>Deep Blue<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Electric Soul\" data-artist=\"The Sparks\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=6\"><\/div><div class=\"info-wrapper\"><h3>Electric Soul<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Acoustic Morning\" data-artist=\"Folk Tales\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=7\"><\/div><div class=\"info-wrapper\"><h3>Acoustic Morning<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Galactic Funk\" data-artist=\"Space Cadets\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=8\"><\/div><div class=\"info-wrapper\"><h3>Galactic Funk<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Winter Beats\" data-artist=\"Frost\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=9\"><\/div><div class=\"info-wrapper\"><h3>Winter Beats<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Summer Waves\" data-artist=\"Beach Bums\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=10\"><\/div><div class=\"info-wrapper\"><h3>Summer Waves<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Lo-Fi Study\" data-artist=\"Chill Hop\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=11\"><\/div><div class=\"info-wrapper\"><h3>Lo-Fi Study<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Heavy Metal Heart\" data-artist=\"Iron Claw\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=12\"><\/div><div class=\"info-wrapper\"><h3>Heavy Metal Heart<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Classic Symphony\" data-artist=\"Orchestra Phil\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=13\"><\/div><div class=\"info-wrapper\"><h3>Classic Symphony<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Indie Anthem\" data-artist=\"The Locals\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=14\"><\/div><div class=\"info-wrapper\"><h3>Indie Anthem<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Vinyl Classics\" data-artist=\"Various Artists\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=15\"><\/div><div class=\"info-wrapper\"><h3>Vinyl Classics<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Desert Rock\" data-artist=\"Cactus\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=16\"><\/div><div class=\"info-wrapper\"><h3>Desert Rock<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Neon Nights\" data-artist=\"City Wave\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=17\"><\/div><div class=\"info-wrapper\"><h3>Neon Nights<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Mountain High\" data-artist=\"Peaks\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=18\"><\/div><div class=\"info-wrapper\"><h3>Mountain High<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Lava Lamp\" data-artist=\"Psychedelia\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=19\"><\/div><div class=\"info-wrapper\"><h3>Lava Lamp<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Golden Age\" data-artist=\"The Crooners\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=20\"><\/div><div class=\"info-wrapper\"><h3>Golden Age<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Punk Rebellion\" data-artist=\"The Pins\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=21\"><\/div><div class=\"info-wrapper\"><h3>Punk Rebellion<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Jazz Cafe\" data-artist=\"Brass Trio\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=22\"><\/div><div class=\"info-wrapper\"><h3>Jazz Cafe<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Folk Tales\" data-artist=\"The Wanderers\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=23\"><\/div><div class=\"info-wrapper\"><h3>Folk Tales<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Space Walk\" data-artist=\"Astro\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=24\"><\/div><div class=\"info-wrapper\"><h3>Space Walk<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n  <div class=\"album-card\" data-album=\"Deep Sleep\" data-artist=\"Ambient Works\"><div class=\"visual-wrapper\"><div class=\"vinyl-record\"><div class=\"vinyl-label\"><\/div><\/div><img decoding=\"async\" class=\"cover-art\" src=\"https:\/\/picsum.photos\/800\/800?random=25\"><\/div><div class=\"info-wrapper\"><h3>Deep Sleep<\/h3><p class=\"price\">$29.99<\/p><p class=\"desc\">Limited Edition.<\/p><div class=\"store-actions\"><button class=\"store-btn btn-cart\" onclick=\"addToCart(event)\">Add to Cart<\/button><a href=\"#\" class=\"store-btn btn-details\" onclick=\"viewDetails(event)\">Product Page<\/a><\/div><\/div><\/div>\n\n<\/div>\n\n<script>\n  const addToCart = (event) => { event.stopPropagation(); alert(\"Item added to cart!\"); };\n  const viewDetails = (event) => { event.stopPropagation(); };\n\n  document.addEventListener('DOMContentLoaded', () => {\n    const container = document.getElementById('store-container');\n    const cards = Array.from(document.querySelectorAll('.album-card'));\n    const totalCards = cards.length;\n    \n    let targetProgress = 0;\n    let currentProgress = 0;\n    const easeFormula = 0.08; \n    let scrollTimeout;\n\n    let isScattered = true;\n    let targetScatterState = 1;\n    let currentScatterState = 1;\n    let lastActiveIndex = -1;\n    \n    \/\/ Dynamic Mobile Tracking\n    let targetMobileFactor = window.innerWidth <= 768 ? 1 : 0;\n    let currentMobileFactor = targetMobileFactor;\n    \n    window.addEventListener('resize', () => {\n      targetMobileFactor = window.innerWidth <= 768 ? 1 : 0;\n    });\n\n    let targetPushX = 0;\n    let currentPushX = 0;\n    let targetPushZ = 0;\n    let currentPushZ = 0;\n    let targetDim = 1;\n    let currentDim = 1;\n\n    cards.forEach(card => {\n      card.dataset.randX = (Math.random() * 6 - 3).toFixed(2);\n      card.dataset.randY = (Math.random() * 6 - 3).toFixed(2);\n      card.dataset.randRot = (Math.random() * 30 - 15).toFixed(2);\n    });\n\n    const lerp = (start, end, amt) => (1 - amt) * start + amt * end;\n\n    const closeAllPanels = () => {\n      cards.forEach(c => c.classList.remove('is-opened'));\n    };\n\n    const toggleBtn = document.getElementById('toggle-layout');\n    const switchUI = document.getElementById('switch-ui');\n    const labelNeat = document.getElementById('label-neat');\n    const labelScatter = document.getElementById('label-scatter');\n\n    toggleBtn.addEventListener('click', () => {\n      isScattered = !isScattered;\n      if (isScattered) {\n        switchUI.classList.add('is-scattered');\n        labelScatter.classList.add('active');\n        labelNeat.classList.remove('active');\n      } else {\n        switchUI.classList.remove('is-scattered');\n        labelScatter.classList.remove('active');\n        labelNeat.classList.add('active');\n      }\n    });\n\n    cards.forEach((card) => {\n      card.addEventListener('click', () => {\n        if (card.classList.contains('is-active')) {\n          card.classList.toggle('is-opened');\n        }\n      });\n    });\n\n    const renderLoop = () => {\n      currentProgress += (targetProgress - currentProgress) * easeFormula;\n      \n      targetScatterState = isScattered ? 1 : 0;\n      currentScatterState += (targetScatterState - currentScatterState) * 0.06;\n      currentMobileFactor += (targetMobileFactor - currentMobileFactor) * 0.1;\n\n      let activeIndex = Math.round(currentProgress) % totalCards;\n      if (activeIndex < 0) activeIndex += totalCards;\n      \n      if (lastActiveIndex !== activeIndex) {\n        lastActiveIndex = activeIndex;\n        document.getElementById('display-album').textContent = cards[activeIndex].dataset.album || \"Unknown Album\";\n        document.getElementById('display-artist').textContent = cards[activeIndex].dataset.artist || \"Unknown Artist\";\n      }\n\n      const isAnyOpened = cards.some(c => c.classList.contains('is-opened'));\n      \n      \/\/ On mobile we don't need to push X because the layout opens vertically\n      const deskPushX = 100;\n      const mobPushX = 0; \n      targetPushX = isAnyOpened ? lerp(deskPushX, mobPushX, currentMobileFactor) : 0;     \n      targetPushZ = isAnyOpened ? -800 : 0;    \n      targetDim = isAnyOpened ? 0 : 1;         \n\n      currentPushX += (targetPushX - currentPushX) * easeFormula;\n      currentPushZ += (targetPushZ - currentPushZ) * easeFormula;\n      currentDim += (targetDim - currentDim) * easeFormula;\n\n      const baseRotX = lerp(0, 58, currentScatterState);\n      const baseRotZ = lerp(0, -35, currentScatterState);\n\n      const stackSpreadX = lerp(1.2, 2.5, currentScatterState); \n      const stackSpreadY = lerp(-0.3, -1.0, currentScatterState); \n      const stackSpreadZ = lerp(-4.0, -3.5, currentScatterState); \n\n      \/\/ DYNAMIC RESPONSIVE GAPS\n      \/\/ Scale down background cards dynamically (Mobile needs smaller cards to fit the screen)\n      const bgScaleDesk = lerp(0.65, 0.75, currentScatterState);\n      const bgScaleMob = lerp(0.5, 0.6, currentScatterState);\n      const bgScale = lerp(bgScaleDesk, bgScaleMob, currentMobileFactor);\n\n      \/\/ Desktop vs Mobile gap interpolations\n      const rightGapXDesk = lerp(20, 26, currentScatterState);\n      const rightGapXMob = lerp(35, 45, currentScatterState); \/\/ Larger gap on mobile to clear the center card\n      const rightGapX = lerp(rightGapXDesk, rightGapXMob, currentMobileFactor);\n\n      const leftGapXDesk = lerp(-20, -26, currentScatterState);\n      const leftGapXMob = lerp(-35, -45, currentScatterState);\n      const leftGapX = lerp(leftGapXDesk, leftGapXMob, currentMobileFactor);\n\n      const rightGapYDesk = lerp(-5, -10, currentScatterState);\n      const rightGapYMob = lerp(-10, -25, currentScatterState);\n      const rightGapY = lerp(rightGapYDesk, rightGapYMob, currentMobileFactor);\n\n      const leftGapYDesk = lerp(5, 10, currentScatterState);\n      const leftGapYMob = lerp(10, 25, currentScatterState);\n      const leftGapY = lerp(leftGapYDesk, leftGapYMob, currentMobileFactor);\n\n      const rightGapZ = lerp(-25, -150, currentScatterState);\n      const leftGapZ = lerp(25, 150, currentScatterState); \n\n      cards.forEach((card, index) => {\n        let rawOffset = index - currentProgress;\n        let offset = ((rawOffset % totalCards) + totalCards) % totalCards;\n        if (offset > totalCards \/ 2) offset -= totalCards;\n\n        const absOffset = Math.abs(offset);\n        let x, y, z, rotX, rotZ, opacity = 1, zIndex;\n        let scale = bgScale;\n\n        const scatterX = parseFloat(card.dataset.randX) * currentScatterState;\n        const scatterY = parseFloat(card.dataset.randY) * currentScatterState;\n        const scatterRot = parseFloat(card.dataset.randRot) * currentScatterState;\n\n        const focusRotX = 0;\n        const focusRotZ = 0;\n\n        if (absOffset < 1) {\n          card.classList.add('is-active'); \n          let t = 1 - absOffset; \n          let ease = 1 - Math.pow(1 - t, 4); \n\n          if (offset >= 0) { \n            let targetStackX = rightGapX + scatterX + currentPushX;\n            let targetStackY = rightGapY + scatterY;\n            let targetStackZ = -50 + rightGapZ + currentPushZ;\n            let targetRotZ = baseRotZ + scatterRot;\n\n            x = lerp(targetStackX, 0, ease);\n            y = lerp(targetStackY, 0, ease);\n            z = lerp(targetStackZ, 150, ease);\n            rotX = lerp(baseRotX, focusRotX, ease);\n            rotZ = lerp(targetRotZ, focusRotZ, ease);\n          } else { \n            let targetStackX = leftGapX + scatterX - currentPushX;\n            let targetStackY = leftGapY + scatterY;\n            let targetStackZ = 150 + leftGapZ + currentPushZ; \n            let targetRotZ = baseRotZ + scatterRot;\n\n            x = lerp(targetStackX, 0, ease);\n            y = lerp(targetStackY, 0, ease);\n            z = lerp(targetStackZ, 150, ease);\n            rotX = lerp(baseRotX, focusRotX, ease);\n            rotZ = lerp(targetRotZ, focusRotZ, ease);\n          }\n          zIndex = 200; \n          opacity = 1;\n          scale = lerp(bgScale, 1, ease); \n\n        } else {\n          card.classList.remove('is-active');\n          card.classList.remove('is-opened');\n          \n          if (offset > 0) {\n            x = rightGapX + ((offset - 1) * stackSpreadX) + scatterX + currentPushX;\n            y = rightGapY + ((offset - 1) * stackSpreadY) + scatterY;\n            z = -50 + rightGapZ + ((offset - 1) * stackSpreadZ) + currentPushZ;\n            zIndex = 100 - Math.round(absOffset * 10);\n          } else {\n            x = leftGapX - ((absOffset - 1) * stackSpreadX) + scatterX - currentPushX;\n            y = leftGapY + ((absOffset - 1) * Math.abs(stackSpreadY)) + scatterY;\n            z = 150 + leftGapZ + ((absOffset - 1) * Math.abs(stackSpreadZ)) + currentPushZ; \n            zIndex = 300 + Math.round(absOffset * 10);\n          }\n          \n          rotX = baseRotX;\n          rotZ = baseRotZ + scatterRot;\n          \n          opacity = opacity * currentDim; \n          if (opacity < 0.01) opacity = 0; \n        }\n\n        if (absOffset > 22) opacity = 0;\n        else if (absOffset > 9) opacity = opacity * (1 - ((absOffset - 9) * 0.25));\n\n        card.style.transform = `translate(-50%, -50%) translate3d(${x}vw, ${y}vh, ${z}px) rotateX(${rotX}deg) rotateZ(${rotZ}deg) scale(${scale})`;\n        card.style.zIndex = zIndex;\n        card.style.opacity = opacity;\n      });\n\n      requestAnimationFrame(renderLoop);\n    };\n\n    let isScrolling = false;\n    const scrollThrottle = 350; \n\n    container.addEventListener('wheel', (e) => {\n      e.preventDefault(); \n      if (isScrolling || Math.abs(e.deltaY) < 10) return; \n      \n      closeAllPanels(); \n      targetProgress += Math.sign(e.deltaY) * 0.35; \n      \n      clearTimeout(scrollTimeout);\n      scrollTimeout = setTimeout(() => {\n        targetProgress = Math.round(targetProgress);\n        isScrolling = true;\n        setTimeout(() => { isScrolling = false; }, scrollThrottle);\n      }, 150);\n    });\n\n    let touchStartY = 0;\n    container.addEventListener('touchstart', (e) => {\n      touchStartY = e.touches[0].clientY;\n    }, {passive: true});\n\n    container.addEventListener('touchmove', (e) => {\n      e.preventDefault(); \n      if (isScrolling) return;\n\n      let touchCurrentY = e.touches[0].clientY;\n      let diff = touchStartY - touchCurrentY;\n      \n      if (Math.abs(diff) > 10) {\n        closeAllPanels(); \n        targetProgress += Math.sign(diff) * 0.15;\n        touchStartY = touchCurrentY; \n\n        clearTimeout(scrollTimeout);\n        scrollTimeout = setTimeout(() => {\n          targetProgress = Math.round(targetProgress);\n          isScrolling = true;\n          setTimeout(() => { isScrolling = false; }, scrollThrottle);\n        }, 150);\n      }\n    }, {passive: false});\n\n    renderLoop();\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Neat Messy Loading&#8230; &#8230; Retro Grooves $29.99 Limited Edition. Add to CartProduct Page Midnight Jazz $34.50 Exclusive clear vinyl. Add to CartProduct Page Synthesizer Dreams $24.00 Standard black pressing. Add to CartProduct Page Urban Echoes $29.99 Limited Edition. Add to CartProduct Page Deep Blue $29.99 Limited Edition. Add to CartProduct Page Electric Soul $29.99 Limited [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":9,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}