{"id":7588,"date":"2026-05-18T12:23:40","date_gmt":"2026-05-18T12:23:40","guid":{"rendered":"https:\/\/etchenet.com\/?page_id=7588"},"modified":"2026-05-27T20:29:13","modified_gmt":"2026-05-27T20:29:13","slug":"premium-distillery-scroll-experience","status":"publish","type":"page","link":"https:\/\/etchenet.com\/es\/premium-distillery-scroll-experience\/","title":{"rendered":"Experiencia Premium en la Destiler\u00eda Scroll."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<style>\n :root {\n color-scheme: dark;\n --copper: #c87832;\n --copper-light: #f2b46f;\n --amber: #d9963b;\n --cream: #ffe0aa;\n --white: rgba(255, 255, 255, 0.94);\n --muted: rgba(255, 255, 255, 0.68);\n --border: rgba(255, 255, 255, 0.18);\n --glass: rgba(12, 8, 5, 0.34);\n --max: 1120px;\n --header-offset: 18px;\n --section-pad: clamp(80px, 11vh, 130px);\n --snap-duration-note: 1900ms;\n }\n\n * {\n box-sizing: border-box;\n }\n\n \n\n body::before {\n content: \"\";\n position: fixed;\n inset: 0;\n z-index: -5;\n background:\n radial-gradient(circle at 50% 16%, rgba(200, 120, 50, 0.28), transparent 32%),\n radial-gradient(circle at 18% 68%, rgba(217, 150, 59, 0.15), transparent 30%),\n radial-gradient(circle at 82% 74%, rgba(255, 224, 170, 0.10), transparent 34%),\n linear-gradient(140deg, #080403 0%, #130905 45%, #030202 100%);\n }\n\n a {\n text-decoration: none;\n }\n\n .etch-ds-centered {\n position: relative;\n min-height: 100vh;\n overflow: visible;\n background: transparent;\n }\n\n .etch-ds-bg-video {\n position: fixed;\n inset: 0;\n z-index: -4;\n width: 100vw;\n height: 100vh;\n object-fit: cover;\n opacity: 0.54;\n filter: saturate(1.12) contrast(1.08) brightness(0.78);\n pointer-events: none;\n background: transparent;\n }\n\n .etch-ds-vignette {\n position: fixed;\n inset: 0;\n z-index: -3;\n pointer-events: none;\n background:\n linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.16) 38%, rgba(0,0,0,0.20) 62%, rgba(0,0,0,0.68) 100%),\n linear-gradient(90deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.06) 28%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.50) 100%),\n radial-gradient(circle at 50% 22%, rgba(200,120,50,0.22), transparent 32%),\n radial-gradient(circle at 50% 78%, rgba(217,150,59,0.16), transparent 36%);\n }\n\n .etch-ds-grain {\n position: fixed;\n inset: 0;\n z-index: -2;\n opacity: 0.13;\n pointer-events: none;\n background-image:\n linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);\n background-size: 52px 52px;\n mask-image: radial-gradient(circle at 50% 45%, black, transparent 78%);\n }\n\n .etch-ds-header-wrap {\n position: sticky;\n top: var(--header-offset);\n z-index: 50;\n width: min(var(--max), calc(100% - 32px));\n margin: 0 auto;\n padding-top: 1px;\n }\n\n .etch-ds-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 22px;\n padding: 12px 16px;\n border: 1px solid var(--border);\n border-radius: 999px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),\n rgba(12, 8, 5, 0.44);\n backdrop-filter: blur(24px) saturate(150%);\n -webkit-backdrop-filter: blur(24px) saturate(150%);\n box-shadow: 0 18px 70px rgba(0,0,0,0.34);\n }\n\n .etch-ds-brand {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n color: var(--white);\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-weight: 760;\n white-space: nowrap;\n }\n\n .etch-ds-logo {\n width: 38px;\n height: 38px;\n flex: 0 0 38px;\n filter: drop-shadow(0 0 16px rgba(200,120,50,0.52));\n }\n\n .etch-ds-brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1;\n }\n\n .etch-ds-brand-main {\n font-size: 0.88rem;\n }\n\n .etch-ds-brand-sub {\n margin-top: 5px;\n color: var(--copper-light);\n font-size: 0.56rem;\n letter-spacing: 0.24em;\n font-weight: 500;\n }\n\n .etch-ds-menu {\n display: flex;\n align-items: center;\n gap: 24px;\n font-size: 0.74rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n .etch-ds-menu a {\n color: rgba(255,255,255,0.68);\n transition: color 220ms ease;\n }\n\n .etch-ds-menu a:hover {\n color: var(--copper-light);\n }\n\n .etch-ds-pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 36px;\n padding: 0 17px;\n border-radius: 999px;\n border: 1px solid rgba(242,180,111,0.54);\n color: var(--copper-light);\n background: rgba(200,120,50,0.10);\n font-size: 0.76rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .etch-ds-section {\n position: relative;\n z-index: 2;\n min-height: 100vh;\n width: min(var(--max), calc(100% - 32px));\n margin: 0 auto;\n padding: var(--section-pad) 0;\n display: grid;\n align-items: center;\n }\n\n .etch-ds-section:first-of-type {\n padding-top: clamp(150px, 18vh, 205px);\n }\n\n .etch-ds-stage {\n width: 100%;\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: clamp(34px, 7vw, 92px);\n align-items: center;\n }\n\n .etch-ds-stage-center {\n display: flex;\n justify-content: center;\n text-align: center;\n }\n\n .etch-ds-content {\n width: min(680px, 100%);\n }\n\n .etch-ds-content-left {\n justify-self: start;\n text-align: left;\n }\n\n .etch-ds-content-right {\n justify-self: start;\n text-align: left;\n grid-column: 2;\n }\n\n .etch-ds-content-center {\n width: min(780px, 100%);\n margin: 0 auto;\n text-align: center;\n }\n\n .etch-ds-kicker {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 16px;\n color: var(--copper-light);\n font-size: 0.72rem;\n font-weight: 760;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n text-shadow: 0 8px 28px rgba(0,0,0,0.45);\n }\n\n .etch-ds-content-center .etch-ds-kicker,\n .etch-ds-stage-center .etch-ds-kicker {\n justify-content: center;\n }\n\n .etch-ds-kicker::before,\n .etch-ds-kicker::after {\n content: \"\";\n width: 34px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--copper-light), transparent);\n }\n\n .etch-ds-content-left .etch-ds-kicker::after,\n .etch-ds-content-right .etch-ds-kicker::after {\n display: none;\n }\n\n .etch-ds-title {\n margin: 0;\n max-width: 900px;\n color: var(--white);\n font-size: clamp(3rem, 6.4vw, 7.2rem);\n line-height: 0.9;\n letter-spacing: -0.072em;\n font-weight: 790;\n text-wrap: balance;\n text-shadow: 0 24px 80px rgba(0,0,0,0.58);\n }\n\n .etch-ds-content-center .etch-ds-title {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-ds-title span,\n .etch-ds-heading span {\n color: transparent;\n background: linear-gradient(125deg, #ffe0aa, #c87832 48%, #6f3618);\n -webkit-background-clip: text;\n background-clip: text;\n }\n\n .etch-ds-heading {\n margin: 0;\n max-width: 740px;\n color: var(--white);\n font-size: clamp(2.25rem, 4.2vw, 4.75rem);\n line-height: 0.96;\n letter-spacing: -0.055em;\n font-weight: 770;\n text-wrap: balance;\n text-shadow: 0 22px 70px rgba(0,0,0,0.52);\n }\n\n .etch-ds-content-center .etch-ds-heading {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-ds-text {\n max-width: 620px;\n margin: 22px 0 0;\n color: var(--muted);\n font-size: clamp(1rem, 1.15vw, 1.16rem);\n line-height: 1.72;\n text-shadow: 0 8px 28px rgba(0,0,0,0.44);\n }\n\n .etch-ds-content-center .etch-ds-text {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-ds-card {\n width: min(520px, 100%);\n padding: clamp(24px, 3vw, 36px);\n border: 1px solid var(--border);\n border-radius: 32px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.030)),\n rgba(12, 8, 5, 0.34);\n backdrop-filter: blur(26px) saturate(150%);\n -webkit-backdrop-filter: blur(26px) saturate(150%);\n box-shadow:\n 0 28px 90px rgba(0,0,0,0.36),\n inset 0 1px 0 rgba(255,255,255,0.14);\n }\n\n .etch-ds-card-wide {\n width: min(760px, 100%);\n margin: 34px auto 0;\n text-align: center;\n }\n\n .etch-ds-card-title {\n margin: 0 0 12px;\n color: var(--white);\n font-size: 0.9rem;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n }\n\n .etch-ds-card p {\n margin: 0;\n color: rgba(255,255,255,0.66);\n line-height: 1.68;\n font-size: 0.98rem;\n }\n\n .etch-ds-card-wide p {\n max-width: 560px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-ds-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 13px;\n margin-top: 28px;\n }\n\n .etch-ds-content-center .etch-ds-actions {\n justify-content: center;\n }\n\n .etch-ds-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 46px;\n padding: 0 22px;\n border-radius: 999px;\n border: 1px solid rgba(242,180,111,0.62);\n color: #140b04;\n background: linear-gradient(135deg, #ffe0aa, #c87832 58%, #7b3b18);\n font-weight: 760;\n letter-spacing: 0.045em;\n box-shadow: 0 18px 46px rgba(200,120,50,0.22);\n }\n\n .etch-ds-btn-dark {\n color: var(--white);\n background: rgba(255,255,255,0.07);\n border-color: rgba(255,255,255,0.18);\n }\n\n .etch-ds-mini-specs {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin: 28px 0 0;\n }\n\n .etch-ds-content-center .etch-ds-mini-specs {\n justify-content: center;\n }\n\n .etch-ds-mini-spec {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border: 1px solid rgba(255,255,255,0.16);\n border-radius: 999px;\n color: rgba(255,255,255,0.72);\n background: rgba(255,255,255,0.055);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n font-size: 0.78rem;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n }\n\n .etch-ds-mini-spec strong {\n color: var(--copper-light);\n font-weight: 760;\n }\n\n .etch-ds-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n margin: 34px auto 0;\n width: min(900px, 100%);\n }\n\n .etch-ds-small-card {\n min-height: 150px;\n padding: 22px 20px;\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 26px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)),\n rgba(12,8,5,0.30);\n backdrop-filter: blur(22px) saturate(150%);\n -webkit-backdrop-filter: blur(22px) saturate(150%);\n box-shadow: 0 22px 70px rgba(0,0,0,0.30);\n }\n\n .etch-ds-small-card strong {\n display: block;\n margin-bottom: 10px;\n color: var(--copper-light);\n font-size: 0.8rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n }\n\n .etch-ds-small-card span {\n display: block;\n color: rgba(255,255,255,0.64);\n line-height: 1.58;\n font-size: 0.93rem;\n }\n\n .etch-ds-side-note {\n position: relative;\n justify-self: center;\n }\n\n .etch-ds-side-note::before {\n content: \"\";\n position: absolute;\n inset: -16px;\n border-radius: 42px;\n border: 1px solid rgba(242, 180, 111, 0.16);\n background: radial-gradient(circle at 50% 0%, rgba(242,180,111,0.16), transparent 58%);\n z-index: -1;\n }\n\n .etch-ds-metric {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-top: 16px;\n }\n\n .etch-ds-metric span {\n display: block;\n padding: 14px;\n border-radius: 20px;\n border: 1px solid rgba(255,255,255,0.14);\n background: rgba(255,255,255,0.055);\n color: rgba(255,255,255,0.68);\n font-size: 0.82rem;\n line-height: 1.45;\n }\n\n .etch-ds-metric b {\n display: block;\n color: var(--cream);\n font-size: 1.15rem;\n margin-bottom: 3px;\n }\n\n .etch-ds-final {\n min-height: 100vh;\n padding-bottom: 38px;\n }\n\n .etch-ds-footer {\n width: min(var(--max), 100%);\n margin: 46px auto 0;\n padding: 30px;\n border: 1px solid var(--border);\n border-radius: 34px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)),\n rgba(12,8,5,0.38);\n backdrop-filter: blur(26px) saturate(145%);\n -webkit-backdrop-filter: blur(26px) saturate(145%);\n box-shadow: 0 24px 80px rgba(0,0,0,0.34);\n }\n\n .etch-ds-footer-grid {\n display: grid;\n grid-template-columns: 1.4fr 1fr 1fr;\n gap: 28px;\n text-align: left;\n }\n\n .etch-ds-footer-title {\n margin: 0 0 11px;\n color: var(--white);\n font-size: 0.88rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n }\n\n .etch-ds-footer-text,\n .etch-ds-footer-links a {\n color: rgba(255,255,255,0.58);\n font-size: 0.92rem;\n line-height: 1.66;\n }\n\n .etch-ds-footer-links {\n display: grid;\n gap: 7px;\n }\n\n .etch-ds-footer-links a:hover {\n color: var(--copper-light);\n }\n\n .etch-ds-footer-bottom {\n display: flex;\n justify-content: space-between;\n gap: 18px;\n margin-top: 28px;\n padding-top: 19px;\n border-top: 1px solid rgba(255,255,255,0.12);\n color: rgba(255,255,255,0.45);\n font-size: 0.8rem;\n }\n\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-content,\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-card,\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-grid,\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-footer {\n opacity: 0.28;\n filter: blur(0.6px);\n transform: translateY(22px) scale(0.985);\n transition:\n opacity 820ms ease,\n filter 820ms ease,\n transform 820ms ease;\n }\n\n .etch-ds-centered.etch-snap-ready .etch-ds-section.etch-ds-active .etch-ds-content,\n .etch-ds-centered.etch-snap-ready .etch-ds-section.etch-ds-active .etch-ds-card,\n .etch-ds-centered.etch-snap-ready .etch-ds-section.etch-ds-active .etch-ds-grid,\n .etch-ds-centered.etch-snap-ready .etch-ds-section.etch-ds-active .etch-ds-footer {\n opacity: 1;\n filter: blur(0);\n transform: translateY(0) scale(1);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-content,\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-card,\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-grid,\n .etch-ds-centered.etch-snap-ready .etch-ds-section .etch-ds-footer {\n transition: none;\n }\n }\n\n @media (max-width: 980px) {\n :root {\n --section-pad: 95px;\n }\n\n .etch-ds-menu {\n display: none;\n }\n\n .etch-ds-section,\n .etch-ds-final {\n min-height: 100svh;\n }\n\n .etch-ds-stage {\n grid-template-columns: 1fr;\n gap: 26px;\n }\n\n .etch-ds-content-left,\n .etch-ds-content-right,\n .etch-ds-side-note {\n grid-column: 1;\n justify-self: stretch;\n text-align: center;\n }\n\n .etch-ds-content-left .etch-ds-kicker::after,\n .etch-ds-content-right .etch-ds-kicker::after {\n display: block;\n }\n\n .etch-ds-text,\n .etch-ds-heading,\n .etch-ds-card {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-ds-actions,\n .etch-ds-mini-specs {\n justify-content: center;\n }\n\n .etch-ds-grid {\n grid-template-columns: 1fr;\n }\n\n .etch-ds-footer-grid {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .etch-ds-footer-bottom {\n flex-direction: column;\n text-align: center;\n }\n }\n\n @media (max-width: 560px) {\n :root {\n --header-offset: 10px;\n }\n\n .etch-ds-header-wrap {\n width: min(100% - 20px, var(--max));\n }\n\n .etch-ds-header {\n padding: 11px 13px;\n }\n\n .etch-ds-brand-main {\n font-size: 0.78rem;\n }\n\n .etch-ds-brand-sub {\n font-size: 0.5rem;\n }\n\n .etch-ds-pill {\n display: none;\n }\n\n .etch-ds-section {\n width: min(100% - 24px, var(--max));\n }\n\n .etch-ds-title {\n font-size: clamp(2.8rem, 15vw, 5rem);\n }\n\n .etch-ds-heading {\n font-size: clamp(2.1rem, 11vw, 4rem);\n }\n\n .etch-ds-footer {\n padding: 24px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <main class=\"etch-ds-centered\" id=\"aurum-scroll-demo\">\n <video class=\"etch-ds-bg-video\" muted playsinline preload=\"auto\" aria-hidden=\"true\">\n <source src=\"distillery-background.mp4\" type=\"video\/mp4\">\n <\/video>\n\n <div class=\"etch-ds-vignette\"><\/div>\n <div class=\"etch-ds-grain\"><\/div>\n\n <div class=\"etch-ds-header-wrap\">\n <div class=\"etch-ds-header\">\n <a class=\"etch-ds-brand\" href=\"#ds-top\" aria-label=\"Aurum Stillhouse\">\n <svg class=\"etch-ds-logo\" viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"etchDsCopperStandalone\" x1=\"10\" y1=\"6\" x2=\"54\" y2=\"60\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#ffe0aa\"><\/stop>\n <stop offset=\"0.48\" stop-color=\"#c87832\"><\/stop>\n <stop offset=\"1\" stop-color=\"#6f3618\"><\/stop>\n <\/linearGradient>\n <\/defs>\n <path d=\"M26 5h12v10H26V5Z\" fill=\"url(#etchDsCopperStandalone)\"><\/path>\n <path d=\"M23 15h18v8c0 4-3 7-5 10l-1 2v18c0 3-2 6-5 6s-5-3-5-6V35l-1-2c-2-3-5-6-5-10v-8Z\" fill=\"none\" stroke=\"url(#etchDsCopperStandalone)\" stroke-width=\"4\" stroke-linejoin=\"round\"><\/path>\n <path d=\"M17 25c-5 2-8 6-8 11 0 8 10 15 23 15s23-7 23-15c0-5-3-9-8-11\" fill=\"none\" stroke=\"url(#etchDsCopperStandalone)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/path>\n <path d=\"M25 38h14\" stroke=\"#ffe0aa\" stroke-width=\"3\" stroke-linecap=\"round\" opacity=\".85\"><\/path>\n <circle cx=\"32\" cy=\"47\" r=\"3\" fill=\"#ffe0aa\" opacity=\".9\"><\/circle>\n <\/svg>\n\n <span class=\"etch-ds-brand-text\">\n <span class=\"etch-ds-brand-main\">Aurum<\/span>\n <span class=\"etch-ds-brand-sub\">Stillhouse<\/span>\n <\/span>\n <\/a>\n\n <nav class=\"etch-ds-menu\" aria-label=\"Demo navigation\">\n <a href=\"#ds-copper\">Copper<\/a>\n <a href=\"#ds-cellar\">Cellar<\/a>\n <a href=\"#ds-amber\">Amber<\/a>\n <a href=\"#ds-reveal\">Reveal<\/a>\n <\/nav>\n\n <a class=\"etch-ds-pill\" href=\"#ds-experience\">Experience<\/a>\n <\/div>\n <\/div>\n\n <section id=\"ds-top\" class=\"etch-ds-section\">\n <div class=\"etch-ds-stage-center\">\n <div class=\"etch-ds-content etch-ds-content-center\">\n <div class=\"etch-ds-kicker\">Premium Scroll Demo<\/div>\n <h1 class=\"etch-ds-title\">Premium Distillery <span>Experience<\/span><\/h1>\n <p class=\"etch-ds-text\">\n A cinematic landing page where copper, oak, vapor and amber light unfold through slow section-by-section scrolling.\n <\/p>\n\n <div class=\"etch-ds-actions\">\n <a class=\"etch-ds-btn\" href=\"#ds-copper\">Enter the stillhouse<\/a>\n <a class=\"etch-ds-btn etch-ds-btn-dark\" href=\"#ds-experience\">Plugin demo<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"ds-copper\" class=\"etch-ds-section\">\n <div class=\"etch-ds-stage\">\n <div class=\"etch-ds-content etch-ds-content-left\">\n <div class=\"etch-ds-kicker\">01 \/ Copper<\/div>\n <h2 class=\"etch-ds-heading\">Copper <span>Awakens<\/span><\/h2>\n <p class=\"etch-ds-text\">\n Warm reflections move across polished stills as the visitor controls the cinematic rhythm.\n <\/p>\n <\/div>\n\n <div class=\"etch-ds-card etch-ds-side-note\">\n <h3 class=\"etch-ds-card-title\">Crafted Atmosphere<\/h3>\n <p>\n The scroll reveals material, light and depth without breaking the premium visual flow.\n <\/p>\n <div class=\"etch-ds-metric\">\n <span><b>01<\/b>Copper tone<\/span>\n <span><b>Slow<\/b>Scroll rhythm<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"ds-cellar\" class=\"etch-ds-section\">\n <div class=\"etch-ds-stage\">\n <div class=\"etch-ds-card etch-ds-side-note\">\n <h3 class=\"etch-ds-card-title\">Deep Cellar Mood<\/h3>\n <p>\n A darker glass card anchors the composition while the story moves to the right side of the frame.\n <\/p>\n <div class=\"etch-ds-mini-specs\">\n <span class=\"etch-ds-mini-spec\"><strong>Oak<\/strong> Cellar<\/span>\n <span class=\"etch-ds-mini-spec\"><strong>Low<\/strong> Light<\/span>\n <\/div>\n <\/div>\n\n <div class=\"etch-ds-content etch-ds-content-right\">\n <div class=\"etch-ds-kicker\">02 \/ Cellar<\/div>\n <h2 class=\"etch-ds-heading\">Oak, Shadow and Silence<\/h2>\n <p class=\"etch-ds-text\">\n The page becomes a slow passage through barrels, vapor and low golden light.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"ds-amber\" class=\"etch-ds-section\">\n <div class=\"etch-ds-content etch-ds-content-center\">\n <div class=\"etch-ds-kicker\">03 \/ Amber<\/div>\n <h2 class=\"etch-ds-heading\">Liquid Light in Motion<\/h2>\n <p class=\"etch-ds-text\">\n This section breaks the left-right rhythm with a centered product-story module and three balanced cards.\n <\/p>\n\n <div class=\"etch-ds-grid\">\n <div class=\"etch-ds-small-card\">\n <strong>Scroll Video<\/strong>\n <span>The timeline follows the visitor\u2019s movement through the page.<\/span>\n <\/div>\n\n <div class=\"etch-ds-small-card\">\n <strong>Glass Interface<\/strong>\n <span>Cards stay readable while keeping the cinematic background visible.<\/span>\n <\/div>\n\n <div class=\"etch-ds-small-card\">\n <strong>Brand Story<\/strong>\n <span>The page feels like an immersive premium product presentation.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"ds-reveal\" class=\"etch-ds-section\">\n <div class=\"etch-ds-stage\">\n <div class=\"etch-ds-content etch-ds-content-left\">\n <div class=\"etch-ds-kicker\">04 \/ Reveal<\/div>\n <h2 class=\"etch-ds-heading\">The Bottle Takes the Light<\/h2>\n <p class=\"etch-ds-text\">\n The final frames bring the bottle silhouette into focus while the layout stays calm and structured.\n <\/p>\n <\/div>\n\n <div class=\"etch-ds-card etch-ds-side-note\">\n <h3 class=\"etch-ds-card-title\">Scroll Frame Control<\/h3>\n <p>\n Each section becomes a clean reading point while the video continues its cinematic progression in the background.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"ds-experience\" class=\"etch-ds-section etch-ds-final\">\n <div class=\"etch-ds-content etch-ds-content-center\">\n <div class=\"etch-ds-kicker\">WordPress Plugin Demo<\/div>\n <h2 class=\"etch-ds-heading\">Scroll-Controlled Brand Storytelling<\/h2>\n <p class=\"etch-ds-text\">\n A fictional premium distillery landing page designed to demonstrate a cinematic video background controlled by smooth section snapping.\n <\/p>\n\n <div class=\"etch-ds-card etch-ds-card-wide\">\n <h3 class=\"etch-ds-card-title\">Premium Distillery Scroll Experience<\/h3>\n <p>\n Transparent centered content above an immersive video timeline, prepared as a standalone HTML base for future Gutenberg adaptations.\n <\/p>\n\n <div class=\"etch-ds-actions\">\n <a class=\"etch-ds-btn\" href=\"#ds-top\">Replay experience<\/a>\n <\/div>\n <\/div>\n\n <footer class=\"etch-ds-footer\">\n <div class=\"etch-ds-footer-grid\">\n <div>\n <h3 class=\"etch-ds-footer-title\">Aurum Stillhouse<\/h3>\n <p class=\"etch-ds-footer-text\">\n Fictional premium distillery brand created for a scroll-controlled video background demonstration.\n <\/p>\n <\/div>\n\n <div>\n <h3 class=\"etch-ds-footer-title\">Atmosphere<\/h3>\n <div class=\"etch-ds-footer-links\">\n <a href=\"#ds-copper\">Copper Awakens<\/a>\n <a href=\"#ds-cellar\">Oak Cellar<\/a>\n <a href=\"#ds-amber\">Amber Motion<\/a>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"etch-ds-footer-title\">Experience<\/h3>\n <div class=\"etch-ds-footer-links\">\n <a href=\"#ds-experience\">Scroll Video Demo<\/a>\n <a href=\"#ds-top\">Back to top<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"etch-ds-footer-bottom\">\n <span>\u00a9 2026 Aurum Stillhouse \u2014 Fictional demo brand<\/span>\n <span>Powered by scroll-controlled cinematic storytelling<\/span>\n <\/div>\n <\/footer>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n (function () {\n function initAurumScroll() {\n var root = document.querySelector('.etch-ds-centered');\n\n if (!root) {\n window.setTimeout(initAurumScroll, 300);\n return;\n }\n\n if (root.dataset.etchSnapReady === '1') return;\n\n root.dataset.etchSnapReady = '1';\n root.classList.add('etch-snap-ready');\n\n var sections = Array.prototype.slice.call(root.querySelectorAll('.etch-ds-section'));\n var video = root.querySelector('.etch-ds-bg-video');\n\n if (!sections.length) return;\n\n var snapDuration = 1900;\n var wheelThreshold = 8;\n var touchThreshold = 44;\n var activeIndex = 0;\n var isAnimating = false;\n var touchStartY = 0;\n var touchStartX = 0;\n var resizeTimer = null;\n var wheelLockTimer = null;\n var videoReady = false;\n var videoTargetTime = 0;\n\n function clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n }\n\n function easeInOutCubic(t) {\n if (t < 0.5) {\n return 4 * t * t * t;\n }\n\n return 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n }\n\n function getScrollY() {\n return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n }\n\n function getElementTop(element) {\n return getScrollY() + element.getBoundingClientRect().top;\n }\n\n function isDemoZoneActive() {\n var rect = root.getBoundingClientRect();\n var topLimit = window.innerHeight * 0.75;\n var bottomLimit = window.innerHeight * 0.25;\n\n if (rect.top >= topLimit) return false;\n if (rect.bottom <= bottomLimit) return false;\n\n return true;\n }\n\n function getNearestSectionIndex() {\n var nearest = 0;\n var nearestDistance = Infinity;\n\n sections.forEach(function (section, index) {\n var rect = section.getBoundingClientRect();\n var sectionAnchor = Math.abs(rect.top);\n\n if (sectionAnchor < nearestDistance) {\n nearestDistance = sectionAnchor;\n nearest = index;\n }\n });\n\n return nearest;\n }\n\n function setActiveSection(index) {\n activeIndex = clamp(index, 0, sections.length - 1);\n\n sections.forEach(function (section, sectionIndex) {\n if (sectionIndex === activeIndex) {\n section.classList.add('etch-ds-active');\n } else {\n section.classList.remove('etch-ds-active');\n }\n });\n }\n\n function refreshActiveSection() {\n setActiveSection(getNearestSectionIndex());\n }\n\n function updateVideoTarget() {\n if (!videoReady) return;\n if (!video.duration) return;\n\n var rootTop = getElementTop(root);\n var total = Math.max(root.offsetHeight - window.innerHeight, 1);\n var progress = clamp((getScrollY() - rootTop) \/ total, 0, 1);\n\n videoTargetTime = progress * Math.max(video.duration - 0.05, 0);\n }\n\n function animateVideo() {\n if (videoReady) {\n var diff = videoTargetTime - video.currentTime;\n\n if (Math.abs(diff) > 0.015) {\n try {\n video.currentTime = video.currentTime + diff * 0.09;\n } catch (error) {}\n }\n }\n\n requestAnimationFrame(animateVideo);\n }\n\n function scrollToSection(index) {\n var targetIndex = clamp(index, 0, sections.length - 1);\n var targetSection = sections[targetIndex];\n\n if (!targetSection) return;\n\n var startY = getScrollY();\n var targetY = getElementTop(targetSection);\n var distance = targetY - startY;\n\n if (Math.abs(distance) < 2) {\n setActiveSection(targetIndex);\n updateVideoTarget();\n return;\n }\n\n isAnimating = true;\n setActiveSection(targetIndex);\n\n var startTime = performance.now();\n\n function animate(now) {\n var elapsed = now - startTime;\n var progress = Math.min(elapsed \/ snapDuration, 1);\n var easedProgress = easeInOutCubic(progress);\n var nextY = startY + distance * easedProgress;\n\n window.scrollTo(0, nextY);\n updateVideoTarget();\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n window.scrollTo(0, targetY);\n updateVideoTarget();\n\n window.setTimeout(function () {\n isAnimating = false;\n refreshActiveSection();\n }, 160);\n }\n }\n\n requestAnimationFrame(animate);\n }\n\n function requestSectionMove(direction) {\n refreshActiveSection();\n\n var targetIndex = activeIndex + direction;\n\n if (targetIndex < 0) return false;\n if (targetIndex >= sections.length) return false;\n\n scrollToSection(targetIndex);\n return true;\n }\n\n function handleWheel(event) {\n if (!isDemoZoneActive()) return;\n if (Math.abs(event.deltaY) < wheelThreshold) return;\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n window.clearTimeout(wheelLockTimer);\n\n var direction = event.deltaY > 0 ? 1 : -1;\n var moved = requestSectionMove(direction);\n\n if (moved) {\n event.preventDefault();\n\n wheelLockTimer = window.setTimeout(function () {\n refreshActiveSection();\n }, snapDuration + 220);\n }\n }\n\n function handleKeydown(event) {\n if (!isDemoZoneActive()) return;\n\n var tagName = document.activeElement ? document.activeElement.tagName : '';\n\n if (tagName === 'INPUT') return;\n if (tagName === 'TEXTAREA') return;\n if (tagName === 'SELECT') return;\n\n var isNext = false;\n var isPrevious = false;\n var isHome = false;\n var isEnd = false;\n\n if (event.code === 'ArrowDown') isNext = true;\n if (event.code === 'PageDown') isNext = true;\n if (event.code === 'Space') isNext = true;\n if (event.code === 'ArrowUp') isPrevious = true;\n if (event.code === 'PageUp') isPrevious = true;\n if (event.code === 'Home') isHome = true;\n if (event.code === 'End') isEnd = true;\n\n if (!isNext) {\n if (!isPrevious) {\n if (!isHome) {\n if (!isEnd) return;\n }\n }\n }\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n if (isNext) {\n if (requestSectionMove(1)) event.preventDefault();\n return;\n }\n\n if (isPrevious) {\n if (requestSectionMove(-1)) event.preventDefault();\n return;\n }\n\n if (isHome) {\n scrollToSection(0);\n event.preventDefault();\n return;\n }\n\n if (isEnd) {\n scrollToSection(sections.length - 1);\n event.preventDefault();\n }\n }\n\n function handleTouchStart(event) {\n if (!isDemoZoneActive()) return;\n if (!event.touches) return;\n if (event.touches.length !== 1) return;\n\n touchStartY = event.touches[0].clientY;\n touchStartX = event.touches[0].clientX;\n }\n\n function handleTouchEnd(event) {\n if (!touchStartY) return;\n if (!isDemoZoneActive()) return;\n\n var touch = null;\n\n if (event.changedTouches) {\n touch = event.changedTouches[0];\n }\n\n if (!touch) return;\n\n var deltaY = touch.clientY - touchStartY;\n var deltaX = touch.clientX - touchStartX;\n\n touchStartY = 0;\n touchStartX = 0;\n\n if (Math.abs(deltaY) < touchThreshold) return;\n if (Math.abs(deltaY) < Math.abs(deltaX)) return;\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n var direction = deltaY < 0 ? 1 : -1;\n var moved = requestSectionMove(direction);\n\n if (moved) event.preventDefault();\n }\n\n var links = root.querySelectorAll('a[href^=\"#\"]');\n\n Array.prototype.forEach.call(links, function (link) {\n link.addEventListener('click', function (event) {\n var targetId = link.getAttribute('href');\n\n if (!targetId) return;\n if (targetId === '#') return;\n\n var targetSection = root.querySelector(targetId);\n var targetIndex = sections.indexOf(targetSection);\n\n if (targetIndex === -1) return;\n\n event.preventDefault();\n scrollToSection(targetIndex);\n });\n });\n\n if (video) {\n video.addEventListener('loadedmetadata', function () {\n videoReady = true;\n video.pause();\n updateVideoTarget();\n });\n\n video.addEventListener('error', function () {\n videoReady = false;\n });\n }\n\n window.addEventListener('wheel', handleWheel, { passive: false });\n window.addEventListener('keydown', handleKeydown);\n window.addEventListener('touchstart', handleTouchStart, { passive: true });\n window.addEventListener('touchend', handleTouchEnd, { passive: false });\n\n window.addEventListener('scroll', function () {\n updateVideoTarget();\n\n if (!isAnimating) {\n refreshActiveSection();\n }\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n window.clearTimeout(resizeTimer);\n\n resizeTimer = window.setTimeout(function () {\n refreshActiveSection();\n updateVideoTarget();\n }, 180);\n });\n\n refreshActiveSection();\n updateVideoTarget();\n animateVideo();\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initAurumScroll);\n } else {\n initAurumScroll();\n }\n\n window.addEventListener('load', initAurumScroll);\n })();\n <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Aurum Stillhouse Copper Cellar Amber Reveal Experience Premium Scroll Demo Premium Distillery Experience A cinematic landing page where copper, oak, vapor and amber light unfold through slow section-by-section scrolling. Enter the stillhouse Plugin demo 01 \/ Copper Copper Awakens Warm reflections move across polished stills as the visitor controls the cinematic rhythm. Crafted Atmosphere The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"sin-header-footer","meta":{"_svbs_page_enabled":true,"_svbs_page_video_id":7595,"_svbs_page_video_url":"https:\/\/etchenet.com\/wp-content\/uploads\/2026\/05\/Premium-Distillery-Scroll-Experience-3-scrub.mp4","_svbs_page_overlay_color":"#020617","_svbs_page_overlay_opacity":0,"_svbs_page_scroll_range":7000,"_svbs_page_scroll_range_desktop":0,"_svbs_page_scroll_range_tablet":0,"_svbs_page_scroll_range_mobile":0,"_svbs_page_start_time":0,"_svbs_page_end_time":0,"_svbs_page_mobile_behavior":"enabled","_svbs_page_z_index":0,"footnotes":""},"class_list":["post-7588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/comments?post=7588"}],"version-history":[{"count":7,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7588\/revisions"}],"predecessor-version":[{"id":7677,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7588\/revisions\/7677"}],"wp:attachment":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media?parent=7588"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}