Latent's Records - Magnetic Edition<\/title>\n <style>\n body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #050505; cursor: default; }\n\n .streak, .record-layer, .ribbon-path, .cassette, .pug-container {\n will-change: transform;\n contain: strict; \n }\n\n \/* --- BACKGROUND (Bold Streaks) --- *\/\n .streak-container { position: fixed; inset: 0; z-index: 1; transform: scale(1.1); pointer-events: none; }\n .anim-wrapper { position: absolute; width: 100%; height: 42%; }\n .top-wrap { top: 0; transform: translateX(-100%); animation: slideIn 5s cubic-bezier(0.15, 0, 0.15, 1) forwards; }\n .bottom-wrap { bottom: 0; transform: translateX(100%); animation: slideIn 5s cubic-bezier(0.15, 0, 0.15, 1) forwards; animation-delay: 0.8s; }\n .streak { width: 100%; height: 100%; background: linear-gradient(90deg, #400, #b00, #400); }\n .top-streak { clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); }\n .bottom-streak { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }\n @keyframes slideIn { to { transform: translateX(0); } }\n\n \/* --- RIBBON (Instant Follow) --- *\/\n .ribbon-svg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }\n .ribbon-path { \n fill: none; stroke: #fff700; stroke-width: 14; stroke-linecap: round;\n filter: drop-shadow(0 0 10px #fff700); stroke-dasharray: 4000; stroke-dashoffset: 4000; \n animation: draw 4s 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; \n }\n @keyframes draw { to { stroke-dashoffset: 0; } }\n\n \/* --- CASSETTE --- *\/\n .cassette {\n position: fixed; top: 75%; left: 55%; width: 180px; height: 110px;\n background: #1a1a1a; border-radius: 8px; z-index: 10;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n border: 1px solid #333; box-shadow: 0 20px 50px rgba(0,0,0,0.8);\n transform: translate(-200vw, -50%) rotate(-30deg);\n animation: cassetteEntry 1.2s 5.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n pointer-events: all;\n }\n @keyframes cassetteEntry { to { transform: translate(-50%, -50%) rotate(-12deg); } }\n .cassette:hover { transform: translate(-50%, -55%) rotate(-8deg) scale(1.05); }\n .cassette-label { \n width: 150px; height: 60px; background: #d1d1d1; border-radius: 4px; \n display: flex; justify-content: space-around; align-items: center; border-top: 10px solid #b00;\n }\n .cassette-reel { width: 35px; height: 35px; background: #fff; border-radius: 50%; border: 3px solid #444; position: relative; }\n .cassette-reel::after {\n content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 4px dotted #333;\n animation: spinRecord 2s linear infinite; animation-play-state: paused;\n }\n .cassette:hover .cassette-reel::after { animation-play-state: running; }\n\n \/* --- RECORD & SHATTER --- *\/\n .content-container { position: relative; z-index: 4; height: 100vh; display: flex; justify-content: center; align-items: center; }\n .latent-link { \n display: flex; align-items: center; gap: 30px; text-decoration: none; color: white;\n font-family: 'Arial Black', sans-serif; font-size: clamp(1.5rem, 5vw, 4rem);\n opacity: 0; animation: fadeIn 2s 4s forwards;\n }\n .latent-link:hover { color: #fff700; }\n .record-box { position: relative; width: 80px; height: 80px; flex-shrink: 0; }\n .record-layer {\n position: absolute; inset: 0; border-radius: 50%;\n background: radial-gradient(circle, #fff 15%, #000 16%, transparent 17%),\n repeating-radial-gradient(circle, #000 0px, #000 2px, #333 3px, #000 4px);\n }\n .record-main { z-index: 2; transition: opacity 0.2s; animation: spinRecord 4s linear infinite; }\n .latent-link:hover .record-main { opacity: 0; }\n .record-shard { z-index: 1; opacity: 0; transition: transform 0.5s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.2s; }\n .latent-link:hover .record-shard { opacity: 0.8; }\n\n .s1 { clip-path: polygon(50% 50%, 0% 0%, 50% 0%); } .s2 { clip-path: polygon(50% 50%, 50% 0%, 100% 0%); }\n .s3 { clip-path: polygon(50% 50%, 100% 0%, 100% 50%); } .s4 { clip-path: polygon(50% 50%, 100% 50%, 100% 100%); }\n .s5 { clip-path: polygon(50% 50%, 100% 100%, 50% 100%); } .s6 { clip-path: polygon(50% 50%, 50% 100%, 0% 100%); }\n .s7 { clip-path: polygon(50% 50%, 0% 100%, 0% 50%); } .s8 { clip-path: polygon(50% 50%, 0% 50%, 0% 0%); }\n\n .latent-link:hover .s1 { transform: translate3d(-100px, -140px, 0) rotate(-45deg); }\n .latent-link:hover .s2 { transform: translate3d(100px, -140px, 0) rotate(45deg); }\n .latent-link:hover .s3 { transform: translate3d(160px, -30px, 0) rotate(90deg); }\n .latent-link:hover .s4 { transform: translate3d(160px, 60px, 0) rotate(135deg); }\n .latent-link:hover .s5 { transform: translate3d(100px, 160px, 0) rotate(180deg); }\n .latent-link:hover .s6 { transform: translate3d(-100px, 160px, 0) rotate(225deg); }\n .latent-link:hover .s7 { transform: translate3d(-160px, 30px, 0) rotate(270deg); }\n .latent-link:hover .s8 { transform: translate3d(-160px, -60px, 0) rotate(315deg); }\n\n @keyframes spinRecord { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n @keyframes fadeIn { to { opacity: 1; } }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"streak-container\">\n <div class=\"anim-wrapper top-wrap\"><div id=\"streakTop\" class=\"streak top-streak\"><\/div><\/div>\n <div class=\"anim-wrapper bottom-wrap\"><div id=\"streakBottom\" class=\"streak bottom-streak\"><\/div><\/div>\n <\/div>\n\n <svg class=\"ribbon-svg\" viewBox=\"0 0 1000 1000\" preserveAspectRatio=\"none\">\n <path id=\"ribbon\" class=\"ribbon-path\" d=\"M -100,1100 C 300,800 500,500 1100,-100\" \/>\n <\/svg>\n\n <div class=\"content-container\">\n <a href=\"https:\/\/latentsrecords.com\/index.php\/about-us\/\" class=\"latent-link\" id=\"shatterTrigger\">\n <span>LATENT'S<\/span>\n <div class=\"record-box\">\n <div class=\"record-layer record-main\"><\/div>\n <div class=\"record-layer record-shard s1\"><\/div> <div class=\"record-layer record-shard s2\"><\/div>\n <div class=\"record-layer record-shard s3\"><\/div> <div class=\"record-layer record-shard s4\"><\/div>\n <div class=\"record-layer record-shard s5\"><\/div> <div class=\"record-layer record-shard s6\"><\/div>\n <div class=\"record-layer record-shard s7\"><\/div> <div class=\"record-layer record-shard s8\"><\/div>\n <\/div>\n <span>RECORDS<\/span>\n <\/a>\n <\/div>\n\n <div class=\"cassette\" id=\"cassetteTrigger\">\n <a href=\"https:\/\/latentsrecords.com\/index.php\/releases-2\/\"\n <div class=\"cassette-label\">\n <div class=\"cassette-reel\"><\/div>\n <div class=\"cassette-reel\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"pug-container\">\n <div class=\"pug-img\"><\/div>\n <\/div>\n\n <script>\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n\n function playBark() {\n if (audioCtx.state === 'suspended') audioCtx.resume();\n const osc = audioCtx.createOscillator();\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Latent’s Records – Magnetic Edition LATENT’S RECORDS<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-169","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":45,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages\/169\/revisions"}],"predecessor-version":[{"id":453,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages\/169\/revisions\/453"}],"wp:attachment":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/media?parent=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Latent's Records - Magnetic Edition<\/title>\n <style>\n body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #050505; cursor: default; }\n\n .streak, .record-layer, .ribbon-path, .cassette, .pug-container {\n will-change: transform;\n contain: strict; \n }\n\n \/* --- BACKGROUND (Bold Streaks) --- *\/\n .streak-container { position: fixed; inset: 0; z-index: 1; transform: scale(1.1); pointer-events: none; }\n .anim-wrapper { position: absolute; width: 100%; height: 42%; }\n .top-wrap { top: 0; transform: translateX(-100%); animation: slideIn 5s cubic-bezier(0.15, 0, 0.15, 1) forwards; }\n .bottom-wrap { bottom: 0; transform: translateX(100%); animation: slideIn 5s cubic-bezier(0.15, 0, 0.15, 1) forwards; animation-delay: 0.8s; }\n .streak { width: 100%; height: 100%; background: linear-gradient(90deg, #400, #b00, #400); }\n .top-streak { clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); }\n .bottom-streak { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }\n @keyframes slideIn { to { transform: translateX(0); } }\n\n \/* --- RIBBON (Instant Follow) --- *\/\n .ribbon-svg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }\n .ribbon-path { \n fill: none; stroke: #fff700; stroke-width: 14; stroke-linecap: round;\n filter: drop-shadow(0 0 10px #fff700); stroke-dasharray: 4000; stroke-dashoffset: 4000; \n animation: draw 4s 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; \n }\n @keyframes draw { to { stroke-dashoffset: 0; } }\n\n \/* --- CASSETTE --- *\/\n .cassette {\n position: fixed; top: 75%; left: 55%; width: 180px; height: 110px;\n background: #1a1a1a; border-radius: 8px; z-index: 10;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n border: 1px solid #333; box-shadow: 0 20px 50px rgba(0,0,0,0.8);\n transform: translate(-200vw, -50%) rotate(-30deg);\n animation: cassetteEntry 1.2s 5.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n pointer-events: all;\n }\n @keyframes cassetteEntry { to { transform: translate(-50%, -50%) rotate(-12deg); } }\n .cassette:hover { transform: translate(-50%, -55%) rotate(-8deg) scale(1.05); }\n .cassette-label { \n width: 150px; height: 60px; background: #d1d1d1; border-radius: 4px; \n display: flex; justify-content: space-around; align-items: center; border-top: 10px solid #b00;\n }\n .cassette-reel { width: 35px; height: 35px; background: #fff; border-radius: 50%; border: 3px solid #444; position: relative; }\n .cassette-reel::after {\n content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 4px dotted #333;\n animation: spinRecord 2s linear infinite; animation-play-state: paused;\n }\n .cassette:hover .cassette-reel::after { animation-play-state: running; }\n\n \/* --- RECORD & SHATTER --- *\/\n .content-container { position: relative; z-index: 4; height: 100vh; display: flex; justify-content: center; align-items: center; }\n .latent-link { \n display: flex; align-items: center; gap: 30px; text-decoration: none; color: white;\n font-family: 'Arial Black', sans-serif; font-size: clamp(1.5rem, 5vw, 4rem);\n opacity: 0; animation: fadeIn 2s 4s forwards;\n }\n .latent-link:hover { color: #fff700; }\n .record-box { position: relative; width: 80px; height: 80px; flex-shrink: 0; }\n .record-layer {\n position: absolute; inset: 0; border-radius: 50%;\n background: radial-gradient(circle, #fff 15%, #000 16%, transparent 17%),\n repeating-radial-gradient(circle, #000 0px, #000 2px, #333 3px, #000 4px);\n }\n .record-main { z-index: 2; transition: opacity 0.2s; animation: spinRecord 4s linear infinite; }\n .latent-link:hover .record-main { opacity: 0; }\n .record-shard { z-index: 1; opacity: 0; transition: transform 0.5s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.2s; }\n .latent-link:hover .record-shard { opacity: 0.8; }\n\n .s1 { clip-path: polygon(50% 50%, 0% 0%, 50% 0%); } .s2 { clip-path: polygon(50% 50%, 50% 0%, 100% 0%); }\n .s3 { clip-path: polygon(50% 50%, 100% 0%, 100% 50%); } .s4 { clip-path: polygon(50% 50%, 100% 50%, 100% 100%); }\n .s5 { clip-path: polygon(50% 50%, 100% 100%, 50% 100%); } .s6 { clip-path: polygon(50% 50%, 50% 100%, 0% 100%); }\n .s7 { clip-path: polygon(50% 50%, 0% 100%, 0% 50%); } .s8 { clip-path: polygon(50% 50%, 0% 50%, 0% 0%); }\n\n .latent-link:hover .s1 { transform: translate3d(-100px, -140px, 0) rotate(-45deg); }\n .latent-link:hover .s2 { transform: translate3d(100px, -140px, 0) rotate(45deg); }\n .latent-link:hover .s3 { transform: translate3d(160px, -30px, 0) rotate(90deg); }\n .latent-link:hover .s4 { transform: translate3d(160px, 60px, 0) rotate(135deg); }\n .latent-link:hover .s5 { transform: translate3d(100px, 160px, 0) rotate(180deg); }\n .latent-link:hover .s6 { transform: translate3d(-100px, 160px, 0) rotate(225deg); }\n .latent-link:hover .s7 { transform: translate3d(-160px, 30px, 0) rotate(270deg); }\n .latent-link:hover .s8 { transform: translate3d(-160px, -60px, 0) rotate(315deg); }\n\n @keyframes spinRecord { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n @keyframes fadeIn { to { opacity: 1; } }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"streak-container\">\n <div class=\"anim-wrapper top-wrap\"><div id=\"streakTop\" class=\"streak top-streak\"><\/div><\/div>\n <div class=\"anim-wrapper bottom-wrap\"><div id=\"streakBottom\" class=\"streak bottom-streak\"><\/div><\/div>\n <\/div>\n\n <svg class=\"ribbon-svg\" viewBox=\"0 0 1000 1000\" preserveAspectRatio=\"none\">\n <path id=\"ribbon\" class=\"ribbon-path\" d=\"M -100,1100 C 300,800 500,500 1100,-100\" \/>\n <\/svg>\n\n <div class=\"content-container\">\n <a href=\"https:\/\/latentsrecords.com\/index.php\/about-us\/\" class=\"latent-link\" id=\"shatterTrigger\">\n <span>LATENT'S<\/span>\n <div class=\"record-box\">\n <div class=\"record-layer record-main\"><\/div>\n <div class=\"record-layer record-shard s1\"><\/div> <div class=\"record-layer record-shard s2\"><\/div>\n <div class=\"record-layer record-shard s3\"><\/div> <div class=\"record-layer record-shard s4\"><\/div>\n <div class=\"record-layer record-shard s5\"><\/div> <div class=\"record-layer record-shard s6\"><\/div>\n <div class=\"record-layer record-shard s7\"><\/div> <div class=\"record-layer record-shard s8\"><\/div>\n <\/div>\n <span>RECORDS<\/span>\n <\/a>\n <\/div>\n\n <div class=\"cassette\" id=\"cassetteTrigger\">\n <a href=\"https:\/\/latentsrecords.com\/index.php\/releases-2\/\"\n <div class=\"cassette-label\">\n <div class=\"cassette-reel\"><\/div>\n <div class=\"cassette-reel\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"pug-container\">\n <div class=\"pug-img\"><\/div>\n <\/div>\n\n <script>\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n\n function playBark() {\n if (audioCtx.state === 'suspended') audioCtx.resume();\n const osc = audioCtx.createOscillator();\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Latent’s Records – Magnetic Edition LATENT’S RECORDS<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-169","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":45,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages\/169\/revisions"}],"predecessor-version":[{"id":453,"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/pages\/169\/revisions\/453"}],"wp:attachment":[{"href":"https:\/\/latentsrecords.com\/index.php\/wp-json\/wp\/v2\/media?parent=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}