{"id":7580,"date":"2026-05-18T11:55:40","date_gmt":"2026-05-18T11:55:40","guid":{"rendered":"https:\/\/etchenet.com\/?page_id=7580"},"modified":"2026-05-20T13:02:37","modified_gmt":"2026-05-20T13:02:37","slug":"luxury-watch-scroll-experience","status":"publish","type":"page","link":"https:\/\/etchenet.com\/es\/luxury-watch-scroll-experience\/","title":{"rendered":"Experiencia de desplazamiento de relojes de lujo"},"content":{"rendered":"\n  <style>\n    :root {\n      --etch-gold: #d7b46a;\n      --etch-gold-light: #fff0bd;\n      --etch-white: rgba(255, 255, 255, 0.96);\n      --etch-muted: rgba(255, 255, 255, 0.68);\n      --etch-border: rgba(255, 255, 255, 0.16);\n      --etch-black: #050507;\n      --etch-max: 1160px;\n    }\n\n   \n\n    * { box-sizing: border-box; }\n    a { color: inherit; text-decoration: none; }\n\n    \n\n    .etch-page-bg video {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      opacity: 0.82;\n      transform: scale(1.015);\n      filter: saturate(1.02) contrast(1.04);\n    }\n\n    .etch-page-bg::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background:\n        linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.36) 27%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.44) 100%),\n        linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.03) 38%, rgba(0,0,0,0.50) 100%);\n      pointer-events: none;\n    }\n\n    .etch-lw-demo {\n      position: relative;\n      z-index: 2;\n      width: 100%;\n      min-height: 100vh;\n    }\n\n    .etch-lw-fake-header {\n      position: fixed;\n      top: 18px;\n      left: 50%;\n      z-index: 50;\n      width: min(var(--etch-max), calc(100% - 32px));\n      transform: translateX(-50%);\n    }\n\n    .etch-lw-nav {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 22px;\n      padding: 12px 16px;\n      border: 1px solid var(--etch-border);\n      border-radius: 999px;\n      background: rgba(8, 10, 16, 0.38);\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-lw-brand {\n      display: inline-flex;\n      align-items: center;\n      gap: 12px;\n      color: var(--etch-white);\n      text-transform: uppercase;\n      letter-spacing: 0.13em;\n      font-weight: 760;\n    }\n\n    .etch-lw-logo {\n      width: 36px;\n      height: 36px;\n      flex: 0 0 36px;\n      filter: drop-shadow(0 0 14px rgba(215,180,106,0.45));\n    }\n\n    .etch-lw-brand-text {\n      display: flex;\n      flex-direction: column;\n      line-height: 1;\n    }\n\n    .etch-lw-brand-main { font-size: 0.88rem; }\n\n    .etch-lw-brand-sub {\n      margin-top: 5px;\n      color: var(--etch-gold);\n      font-size: 0.56rem;\n      letter-spacing: 0.24em;\n      font-weight: 500;\n    }\n\n    .etch-lw-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-lw-menu a { color: rgba(255,255,255,0.68); }\n    .etch-lw-menu a:hover { color: var(--etch-gold-light); }\n\n    .etch-lw-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(215,180,106,0.54);\n      color: var(--etch-gold-light);\n      background: rgba(215,180,106,0.08);\n      font-size: 0.76rem;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .etch-lw-section {\n      position: relative;\n      z-index: 2;\n      width: min(var(--etch-max), calc(100% - 32px));\n      min-height: 100vh;\n      margin: 0 auto;\n    }\n\n    .etch-lw-section > * {\n      opacity: 1;\n      filter: blur(0);\n    }\n\n    .etch-lw-demo.etch-snap-ready .etch-lw-section > * {\n      opacity: 0.36;\n      filter: blur(0.3px);\n      transition: opacity 780ms ease, filter 780ms ease, transform 780ms ease;\n    }\n\n    .etch-lw-demo.etch-snap-ready .etch-lw-section.etch-lw-active > * {\n      opacity: 1;\n      filter: blur(0);\n    }\n\n    .etch-lw-hero {\n      display: grid;\n      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);\n      align-items: center;\n      gap: 54px;\n      padding-top: 110px;\n    }\n\n    .etch-hero-content {\n      align-self: center;\n      width: min(640px, 100%);\n    }\n\n    .etch-lw-timeline-section {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);\n      align-items: center;\n      gap: 0;\n    }\n\n    .etch-lw-timeline-section::before {\n      content: \"\";\n      position: absolute;\n      top: 18vh;\n      bottom: 18vh;\n      left: 50%;\n      width: 1px;\n      transform: translateX(-50%);\n      background: linear-gradient(180deg, transparent, rgba(215,180,106,0.30) 16%, rgba(255,240,189,0.52) 50%, rgba(215,180,106,0.30) 84%, transparent);\n      box-shadow: 0 0 22px rgba(215,180,106,0.22);\n      pointer-events: none;\n    }\n\n    .etch-timeline-dot {\n      position: relative;\n      grid-column: 2;\n      grid-row: 1;\n      justify-self: center;\n      align-self: center;\n      width: 16px;\n      height: 16px;\n      border-radius: 999px;\n      border: 1px solid rgba(255,240,189,0.78);\n      background: rgba(215,180,106,0.28);\n      box-shadow: 0 0 0 8px rgba(215,180,106,0.08), 0 0 26px rgba(215,180,106,0.42);\n    }\n\n    .etch-timeline-content {\n      grid-row: 1;\n      width: min(500px, calc(100% - 20px));\n      align-self: center;\n    }\n\n    .etch-timeline-content.is-left {\n      grid-column: 1;\n      justify-self: end;\n      padding-right: clamp(18px, 2.5vw, 34px);\n    }\n\n    .etch-timeline-content.is-right {\n      grid-column: 3;\n      justify-self: start;\n      padding-left: clamp(18px, 2.5vw, 34px);\n    }\n\n    .etch-lw-kicker {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      margin-bottom: 16px;\n      color: var(--etch-gold);\n      font-size: 0.72rem;\n      font-weight: 760;\n      letter-spacing: 0.22em;\n      text-transform: uppercase;\n    }\n\n    .etch-lw-kicker::before {\n      content: \"\";\n      width: 34px;\n      height: 1px;\n      background: linear-gradient(90deg, transparent, var(--etch-gold));\n    }\n\n    .etch-lw-title {\n      margin: 0;\n      max-width: 640px;\n      color: rgba(255,255,255,0.98);\n      font-size: clamp(2.75rem, 5.6vw, 6.2rem);\n      line-height: 0.91;\n      letter-spacing: -0.065em;\n      font-weight: 780;\n      text-wrap: balance;\n    }\n\n    .etch-lw-title span,\n    .etch-lw-heading span {\n      color: transparent;\n      background: linear-gradient(125deg, #fff3c4, #d7b46a 48%, #8a6a30);\n      -webkit-background-clip: text;\n      background-clip: text;\n    }\n\n    .etch-lw-heading {\n      margin: 0;\n      max-width: 600px;\n      color: rgba(255,255,255,0.98);\n      font-size: clamp(2.05rem, 3.85vw, 4.4rem);\n      line-height: 0.96;\n      letter-spacing: -0.052em;\n      font-weight: 760;\n      text-wrap: balance;\n    }\n\n    .etch-lw-text {\n      max-width: 470px;\n      margin: 20px 0 0;\n      color: var(--etch-muted);\n      font-size: clamp(0.98rem, 1.05vw, 1.12rem);\n      line-height: 1.7;\n    }\n\n    .etch-lw-panel {\n      width: min(430px, 100%);\n      margin-top: 28px;\n      padding: 22px 24px;\n      border: 1px solid var(--etch-border);\n      border-radius: 26px;\n      background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)), rgba(8, 10, 16, 0.30);\n      backdrop-filter: blur(24px) saturate(150%);\n      -webkit-backdrop-filter: blur(24px) saturate(150%);\n      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);\n    }\n\n    .etch-lw-panel-title {\n      margin: 0 0 10px;\n      color: rgba(255,255,255,0.98);\n      font-size: 0.86rem;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n    }\n\n    .etch-lw-panel p {\n      margin: 0;\n      color: rgba(255,255,255,0.66);\n      line-height: 1.62;\n      font-size: 0.96rem;\n    }\n\n    .etch-lw-actions {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 13px;\n      margin-top: 26px;\n    }\n\n    .etch-lw-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(215,180,106,0.62);\n      color: #111;\n      background: linear-gradient(135deg, #fff2bd, #d7b46a 56%, #9d7b38);\n      font-weight: 760;\n      letter-spacing: 0.045em;\n      box-shadow: 0 18px 46px rgba(215,180,106,0.18);\n    }\n\n    .etch-lw-btn-dark {\n      color: var(--etch-white);\n      background: rgba(255,255,255,0.07);\n      border-color: rgba(255,255,255,0.18);\n    }\n\n    .etch-lw-mini-specs {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      margin-top: 26px;\n    }\n\n    .etch-lw-mini-spec {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 13px;\n      border: 1px solid rgba(255,255,255,0.15);\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-lw-mini-spec strong {\n      color: var(--etch-gold-light);\n      font-weight: 760;\n    }\n\n    .etch-lw-list {\n      display: grid;\n      gap: 12px;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .etch-lw-list li {\n      display: flex;\n      align-items: center;\n      gap: 11px;\n      color: rgba(255,255,255,0.70);\n      line-height: 1.5;\n      font-size: 0.95rem;\n    }\n\n    .etch-lw-list li::before {\n      content: \"\";\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: var(--etch-gold);\n      box-shadow: 0 0 16px rgba(215,180,106,0.72);\n      flex: 0 0 auto;\n    }\n\n    .etch-lw-thin-card {\n      width: min(420px, 100%);\n      margin-top: 26px;\n      padding: 18px 20px;\n      border: 1px solid rgba(255,255,255,0.14);\n      border-radius: 22px;\n      background: rgba(8,10,16,0.28);\n      backdrop-filter: blur(20px) saturate(150%);\n      -webkit-backdrop-filter: blur(20px) saturate(150%);\n      box-shadow: 0 20px 60px rgba(0,0,0,0.28);\n    }\n\n    .etch-lw-thin-card strong {\n      display: block;\n      color: var(--etch-gold-light);\n      margin-bottom: 7px;\n      font-size: 0.76rem;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n    }\n\n    .etch-lw-thin-card span {\n      color: rgba(255,255,255,0.66);\n      line-height: 1.58;\n      font-size: 0.93rem;\n    }\n\n    .etch-lw-final {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 34px;\n      min-height: 100vh;\n      padding: 112px 0 42px;\n      text-align: center;\n    }\n\n    .etch-final-content {\n      width: min(760px, 100%);\n      margin: 0 auto;\n      padding-top: 18px;\n    }\n\n    .etch-final-content .etch-lw-kicker {\n      justify-content: center;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .etch-final-content .etch-lw-heading,\n    .etch-final-content .etch-lw-text,\n    .etch-final-content .etch-lw-panel {\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .etch-final-content .etch-lw-actions { justify-content: center; }\n\n    .etch-lw-footer {\n      width: 100%;\n      margin: 0 auto;\n      padding: 28px;\n      border: 1px solid var(--etch-border);\n      border-radius: 32px;\n      background: rgba(8,10,16,0.34);\n      backdrop-filter: blur(24px) saturate(145%);\n      -webkit-backdrop-filter: blur(24px) saturate(145%);\n      box-shadow: 0 24px 80px rgba(0,0,0,0.30);\n      text-align: left;\n    }\n\n    .etch-lw-footer-grid {\n      display: grid;\n      grid-template-columns: 1.4fr 1fr 1fr;\n      gap: 28px;\n    }\n\n    .etch-lw-footer-title {\n      margin: 0 0 11px;\n      color: rgba(255,255,255,0.98);\n      font-size: 0.88rem;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n    }\n\n    .etch-lw-footer-text,\n    .etch-lw-footer-links a {\n      color: rgba(255,255,255,0.60);\n      font-size: 0.92rem;\n      line-height: 1.66;\n    }\n\n    .etch-lw-footer-links {\n      display: grid;\n      gap: 7px;\n    }\n\n    .etch-lw-footer-bottom {\n      display: flex;\n      justify-content: space-between;\n      gap: 18px;\n      margin-top: 26px;\n      padding-top: 18px;\n      border-top: 1px solid rgba(255,255,255,0.12);\n      color: rgba(255,255,255,0.46);\n      font-size: 0.8rem;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .etch-lw-section > * { transition: none !important; }\n    }\n\n    @media (max-width: 980px) {\n      .etch-lw-menu { display: none; }\n\n      .etch-lw-hero {\n        grid-template-columns: 1fr;\n        padding-top: 118px;\n      }\n\n      .etch-lw-timeline-section {\n        grid-template-columns: 1fr;\n        align-items: center;\n        padding: 118px 0 76px;\n      }\n\n      .etch-lw-timeline-section::before,\n      .etch-timeline-dot { display: none; }\n\n      .etch-timeline-content,\n      .etch-timeline-content.is-left,\n      .etch-timeline-content.is-right {\n        grid-column: 1;\n        width: 100%;\n        padding-left: 0;\n        padding-right: 0;\n        justify-self: stretch;\n      }\n\n      .etch-lw-title { font-size: clamp(2.85rem, 15vw, 5.2rem); }\n      .etch-lw-heading { font-size: clamp(2.2rem, 11vw, 4.2rem); }\n      .etch-lw-panel, .etch-lw-thin-card { width: 100%; }\n\n      .etch-lw-final {\n        min-height: 100svh;\n        padding: 112px 0 26px;\n      }\n\n      .etch-lw-footer-grid { grid-template-columns: 1fr; }\n      .etch-lw-footer-bottom { flex-direction: column; }\n    }\n\n    @media (max-width: 560px) {\n      .etch-lw-fake-header {\n        top: 10px;\n        width: min(100% - 20px, var(--etch-max));\n      }\n\n      .etch-lw-nav { padding: 11px 13px; }\n      .etch-lw-brand-main { font-size: 0.78rem; }\n      .etch-lw-brand-sub { font-size: 0.5rem; }\n      .etch-lw-pill { display: none; }\n      .etch-lw-section { width: min(100% - 24px, var(--etch-max)); }\n      .etch-lw-footer { padding: 23px; }\n    }\n  <\/style>\n<\/head>\n\n<body>\n  <div class=\"etch-page-bg\" aria-hidden=\"true\">\n    <video id=\"etchBgVideo\" muted playsinline preload=\"auto\">\n      <source src=\".\/watch-background.mp4\" type=\"video\/mp4\">\n    <\/video>\n  <\/div>\n\n  <main class=\"etch-lw-demo\" id=\"etchChronovaDemo\">\n    <header class=\"etch-lw-fake-header\">\n      <div class=\"etch-lw-nav\">\n        <a class=\"etch-lw-brand\" href=\"#top\" aria-label=\"Chronova Atelier\">\n          <svg class=\"etch-lw-logo\" viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n            <defs>\n              <linearGradient id=\"etchWatchGold\" x1=\"12\" y1=\"8\" x2=\"52\" y2=\"58\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"#fff4c8\"><\/stop>\n                <stop offset=\"0.48\" stop-color=\"#d7b46a\"><\/stop>\n                <stop offset=\"1\" stop-color=\"#80612c\"><\/stop>\n              <\/linearGradient>\n            <\/defs>\n            <path d=\"M24 4h16l-3 9H27L24 4Z\" fill=\"url(#etchWatchGold)\"><\/path>\n            <path d=\"M27 51h10l3 9H24l3-9Z\" fill=\"url(#etchWatchGold)\"><\/path>\n            <circle cx=\"32\" cy=\"32\" r=\"19\" fill=\"none\" stroke=\"url(#etchWatchGold)\" stroke-width=\"4\"><\/circle>\n            <circle cx=\"32\" cy=\"32\" r=\"3\" fill=\"url(#etchWatchGold)\"><\/circle>\n            <path d=\"M32 20v12l8 7\" fill=\"none\" stroke=\"url(#etchWatchGold)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n            <path d=\"M18 32h4M42 32h4M32 18v4M32 42v4\" stroke=\"#fff0bd\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\".8\"><\/path>\n          <\/svg>\n          <span class=\"etch-lw-brand-text\">\n            <span class=\"etch-lw-brand-main\">Chronova<\/span>\n            <span class=\"etch-lw-brand-sub\">Atelier<\/span>\n          <\/span>\n        <\/a>\n        <nav class=\"etch-lw-menu\" aria-label=\"Demo navigation\">\n          <a href=\"#mechanism\">Mechanism<\/a>\n          <a href=\"#craft\">Craft<\/a>\n          <a href=\"#motion\">Motion<\/a>\n          <a href=\"#reveal\">Reveal<\/a>\n        <\/nav>\n        <a class=\"etch-lw-pill\" href=\"#experience\">Experience<\/a>\n      <\/div>\n    <\/header>\n\n    <section id=\"top\" class=\"etch-lw-section etch-lw-hero\">\n      <div class=\"etch-hero-content\">\n        <div class=\"etch-lw-kicker\">Luxury Scroll Demo<\/div>\n        <h1 class=\"etch-lw-title\">Luxury Watch <span>Scroll<\/span><\/h1>\n        <p class=\"etch-lw-text\">A cinematic landing page where the movement of time is revealed by the scroll.<\/p>\n        <div class=\"etch-lw-actions\">\n          <a class=\"etch-lw-btn\" href=\"#mechanism\">Start the journey<\/a>\n          <a class=\"etch-lw-btn etch-lw-btn-dark\" href=\"#experience\">Plugin demo<\/a>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section id=\"mechanism\" class=\"etch-lw-section etch-lw-timeline-section\">\n      <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n      <div class=\"etch-timeline-content is-right\">\n        <div class=\"etch-lw-kicker\">01 \/ Mechanism<\/div>\n        <h2 class=\"etch-lw-heading\">Mechanical <span>Soul<\/span><\/h2>\n        <p class=\"etch-lw-text\">Suspended components appear progressively as the page controls the cinematic rhythm.<\/p>\n        <div class=\"etch-lw-panel\">\n          <h3 class=\"etch-lw-panel-title\">Precision in Motion<\/h3>\n          <p>The scroll becomes the timeline of the mechanism.<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section id=\"craft\" class=\"etch-lw-section etch-lw-timeline-section\">\n      <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n      <div class=\"etch-timeline-content is-left\">\n        <div class=\"etch-lw-kicker\">02 \/ Materials<\/div>\n        <h2 class=\"etch-lw-heading\">Light, Steel and Reflection<\/h2>\n        <p class=\"etch-lw-text\">A premium atmosphere built on metal, shadow, glass and warm gold highlights.<\/p>\n        <div class=\"etch-lw-mini-specs\">\n          <span class=\"etch-lw-mini-spec\"><strong>Steel<\/strong> Case<\/span>\n          <span class=\"etch-lw-mini-spec\"><strong>Sapphire<\/strong> Glass<\/span>\n          <span class=\"etch-lw-mini-spec\"><strong>Gold<\/strong> Light<\/span>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section id=\"motion\" class=\"etch-lw-section etch-lw-timeline-section\">\n      <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n      <div class=\"etch-timeline-content is-right\">\n        <div class=\"etch-lw-kicker\">03 \/ Storytelling<\/div>\n        <h2 class=\"etch-lw-heading\">Every Detail in Motion<\/h2>\n        <p class=\"etch-lw-text\">The background video is not decorative. It becomes the structure of the product story.<\/p>\n        <div class=\"etch-lw-panel\">\n          <ul class=\"etch-lw-list\">\n            <li>Scroll-controlled cinematic background<\/li>\n            <li>Transparent glassmorphism interface<\/li>\n            <li>Progressive product reveal<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section id=\"reveal\" class=\"etch-lw-section etch-lw-timeline-section\">\n      <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n      <div class=\"etch-timeline-content is-left\">\n        <div class=\"etch-lw-kicker\">04 \/ Reveal<\/div>\n        <h2 class=\"etch-lw-heading\">The Watch Reveals Itself<\/h2>\n        <p class=\"etch-lw-text\">The final frames bring the completed watch into focus while the interface stays discreet.<\/p>\n        <div class=\"etch-lw-thin-card\">\n          <strong>Scroll Frame Control<\/strong>\n          <span>The visitor controls the cinematic reveal naturally, section after section.<\/span>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section id=\"experience\" class=\"etch-lw-section etch-lw-final\">\n      <div class=\"etch-final-content\">\n        <div class=\"etch-lw-kicker\">WordPress Plugin Demo<\/div>\n        <h2 class=\"etch-lw-heading\">Scroll-Controlled Product Storytelling<\/h2>\n        <p class=\"etch-lw-text\">A fictional luxury watch landing page designed to demonstrate a cinematic video background controlled by scroll.<\/p>\n        <div class=\"etch-lw-panel\">\n          <h3 class=\"etch-lw-panel-title\">Luxury Watch Scroll Experience<\/h3>\n          <p>Transparent content above an immersive video timeline.<\/p>\n          <div class=\"etch-lw-actions\">\n            <a class=\"etch-lw-btn\" href=\"#top\">Replay experience<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <footer class=\"etch-lw-footer\">\n        <div class=\"etch-lw-footer-grid\">\n          <div>\n            <h3 class=\"etch-lw-footer-title\">Chronova Atelier<\/h3>\n            <p class=\"etch-lw-footer-text\">Fictional luxury watch brand created for a scroll-controlled video background demonstration.<\/p>\n          <\/div>\n          <div>\n            <h3 class=\"etch-lw-footer-title\">Collection<\/h3>\n            <div class=\"etch-lw-footer-links\">\n              <a href=\"#mechanism\">Mechanical Soul<\/a>\n              <a href=\"#craft\">Steel &amp; Light<\/a>\n              <a href=\"#reveal\">Final Reveal<\/a>\n            <\/div>\n          <\/div>\n          <div>\n            <h3 class=\"etch-lw-footer-title\">Experience<\/h3>\n            <div class=\"etch-lw-footer-links\">\n              <a href=\"#experience\">Scroll Video Demo<\/a>\n              <a href=\"#top\">Back to top<\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"etch-lw-footer-bottom\">\n          <span>\u00a9 2026 Chronova Atelier \u2014 Fictional demo brand<\/span>\n          <span>Powered by scroll-controlled cinematic storytelling<\/span>\n        <\/div>\n      <\/footer>\n    <\/section>\n  <\/main>\n\n  <script>\n    (function () {\n      function startEtchSnap() {\n        var root = document.querySelector('.etch-lw-demo');\n\n        if (!root) {\n          window.setTimeout(startEtchSnap, 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-lw-section'));\n        var video = document.getElementById('etchBgVideo');\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\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) return 4 * t * t * t;\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          if (rect.top >= topLimit) return false;\n          if (rect.bottom <= bottomLimit) return false;\n          return true;\n        }\n\n        function getNearestSectionIndex() {\n          var nearest = 0;\n          var nearestDistance = Infinity;\n          sections.forEach(function (section, index) {\n            var distance = Math.abs(section.getBoundingClientRect().top);\n            if (distance < nearestDistance) {\n              nearestDistance = distance;\n              nearest = index;\n            }\n          });\n          return nearest;\n        }\n\n        function setActiveSection(index) {\n          activeIndex = clamp(index, 0, sections.length - 1);\n          sections.forEach(function (section, sectionIndex) {\n            if (sectionIndex === activeIndex) section.classList.add('etch-lw-active');\n            else section.classList.remove('etch-lw-active');\n          });\n        }\n\n        function updateVideoProgress() {\n          if (!video) return;\n          if (!video.duration) return;\n          if (!isFinite(video.duration)) return;\n\n          var rootTop = getElementTop(root);\n          var rootHeight = root.offsetHeight - window.innerHeight;\n          var rawProgress = 0;\n\n          if (rootHeight > 0) rawProgress = (getScrollY() - rootTop) \/ rootHeight;\n\n          var progress = clamp(rawProgress, 0, 1);\n          var targetTime = progress * Math.max(video.duration - 0.08, 0);\n\n          try {\n            if (Math.abs(video.currentTime - targetTime) > 0.035) video.currentTime = targetTime;\n          } catch (error) {}\n        }\n\n        function refreshActiveSection() {\n          setActiveSection(getNearestSectionIndex());\n          updateVideoProgress();\n        }\n\n        function scrollToSection(index) {\n          var targetIndex = clamp(index, 0, sections.length - 1);\n          var targetSection = sections[targetIndex];\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            updateVideoProgress();\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            updateVideoProgress();\n\n            if (progress < 1) {\n              requestAnimationFrame(animate);\n            } else {\n              window.scrollTo(0, targetY);\n              updateVideoProgress();\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          var targetIndex = activeIndex + direction;\n          if (targetIndex < 0) return false;\n          if (targetIndex >= sections.length) return false;\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            wheelLockTimer = window.setTimeout(function () { refreshActiveSection(); }, snapDuration + 220);\n          }\n        }\n\n        function handleKeydown(event) {\n          if (!isDemoZoneActive()) return;\n\n          var tagName = document.activeElement ? document.activeElement.tagName : '';\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          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          if (event.changedTouches) touch = event.changedTouches[0];\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          if (moved) event.preventDefault();\n        }\n\n        var links = root.querySelectorAll('a[href^=\"#\"]');\n        Array.prototype.forEach.call(links, function (link) {\n          link.addEventListener('click', function (event) {\n            var targetId = link.getAttribute('href');\n            if (!targetId) return;\n            if (targetId === '#') return;\n\n            var targetSection = root.querySelector(targetId);\n            var targetIndex = sections.indexOf(targetSection);\n            if (targetIndex === -1) return;\n\n            event.preventDefault();\n            scrollToSection(targetIndex);\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          if (!isAnimating) refreshActiveSection();\n          else updateVideoProgress();\n        }, { passive: true });\n\n        window.addEventListener('resize', function () {\n          window.clearTimeout(resizeTimer);\n          resizeTimer = window.setTimeout(function () { refreshActiveSection(); }, 180);\n        });\n\n        if (video) video.addEventListener('loadedmetadata', updateVideoProgress);\n\n        refreshActiveSection();\n      }\n\n      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', startEtchSnap);\n      else startEtchSnap();\n\n      window.addEventListener('load', startEtchSnap);\n    })();\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Chronova Atelier Mechanism Craft Motion Reveal Experience Luxury Scroll Demo Luxury Watch Scroll A cinematic landing page where the movement of time is revealed by the scroll. Start the journey Plugin demo 01 \/ Mechanism Mechanical Soul Suspended components appear progressively as the page controls the cinematic rhythm. Precision in Motion The scroll becomes 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":7584,"_svbs_page_video_url":"https:\/\/etchenet.com\/wp-content\/uploads\/2026\/05\/magnific_create-a-12second-premium_3000999425-scrub.mp4","_svbs_page_overlay_color":"#020617","_svbs_page_overlay_opacity":0,"_svbs_page_scroll_range":6000,"_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-7580","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7580","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=7580"}],"version-history":[{"count":17,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7580\/revisions"}],"predecessor-version":[{"id":7643,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7580\/revisions\/7643"}],"wp:attachment":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media?parent=7580"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}