{"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-20T16:58:15","modified_gmt":"2026-05-20T16:58:15","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":{"_crdt_document":"","ai_generated_summary":"","_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":10000,"_svbs_page_scroll_range_tablet":7000,"_svbs_page_scroll_range_mobile":4500,"_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":6,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7588\/revisions"}],"predecessor-version":[{"id":7666,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7588\/revisions\/7666"}],"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}]}}