{"id":3764,"date":"2026-03-03T14:49:51","date_gmt":"2026-03-03T14:49:51","guid":{"rendered":"https:\/\/easternstillness.com\/hem\/"},"modified":"2026-03-23T04:11:59","modified_gmt":"2026-03-23T04:11:59","slug":"hem","status":"publish","type":"page","link":"https:\/\/easternstillness.com\/sv\/","title":{"rendered":"Hem"},"content":{"rendered":"\n<meta charset=\"UTF-8\"\/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n<meta name=\"description\" content=\"Utforska \u00f6sterl\u00e4ndsk filosofi, tekultur, zenut\u00f6vning, traditionellt hantverk och medvetet liv genom den tidl\u00f6sa visdomen i den \u00f6sterl\u00e4ndska civilisationen.\"\/>\n<title>Eastern Stillness \u2014 Uppt\u00e4ck konsten att leva p\u00e5 \u00f6sterl\u00e4ndskt vis<\/title>\n<style>\n\n\/* ===== GLOBAL ===== *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n:root {\n    --cinnabar: #9c4a38; \n    --ink: #2b2725;      \n    --paper: #f8f6f2;    \n    --border: #e5e0d8;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nbody {\n    margin: 0;\n    font-family: \"Cormorant Garamond\", serif;\n    background: var(--paper);\n    color: var(--ink);\n    line-height: 1.8;\n    overflow-x: hidden;\n    -webkit-font-smoothing: antialiased;\n}\n\n.container {\n    max-width: 1200px;\n    margin: auto;\n    padding: 120px 40px;\n}\n\n.section-title {\n    text-align: center;\n    font-size: 42px;\n    font-weight: 500;\n    margin-bottom: 10px;\n    letter-spacing: 1px;\n}\n\n.section-sub {\n    text-align: center;\n    font-family: \"Montserrat\", sans-serif;\n    color: #7a746d;\n    font-size: 11px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 3px;\n    margin-bottom: 60px;\n    position: relative;\n}\n\n.section-sub::after {\n    content: ''; display: block; width: 30px; height: 1px;\n    background: var(--cinnabar); margin: 20px auto 0;\n}\n\n\/* ===== HERO ===== *\/\n\n.hero {\n    position: relative;\n    height: 90vh;\n    min-height: 650px;\n    background:\n        linear-gradient(to bottom, rgba(248,246,242,.2) 0%, rgba(248,246,242,.7) 60%, rgba(248,246,242,1) 100%),\n        url(\"\/wp-content\/uploads\/2026\/03\/image-%E9%A6%96%E8%AF%84.png\");\n    background-size: cover;\n    background-position: center;\n    background-attachment: fixed;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n}\n\n.hero-inner { max-width: 800px; padding: 0 20px; margin-top: -60px; }\n\n.hero small {\n    font-family: \"Montserrat\", sans-serif;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cinnabar);\n    font-size: 11px;\n    font-weight: 600;\n    display: block; margin-bottom: 20px;\n}\n\n.hero h1 { \n    font-size: clamp(46px, 7vw, 76px); \n    font-weight: 500; \n    line-height: 1.1;\n    margin: 0 0 20px 0; \n}\n\n\/* 2. \u6587\u6848\u4f18\u5316\uff1a\u66f4\u5177\u6587\u5316\u54c1\u724c\u611f *\/\n.hero-desc { \n    font-size: 24px; \n    color: var(--ink); \n    font-style: italic; \n    margin: 0 0 15px 0;\n}\n\n.hero-tags {\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 10px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: #8c857c;\n    margin: 0 0 40px 0;\n}\n\n.hero-cta {\n    display: inline-block;\n    padding: 16px 45px;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    color: var(--ink);\n    border: 1px solid var(--ink);\n    text-decoration: none;\n    transition: all 0.4s ease;\n}\n\n.hero-cta:hover {\n    background: var(--ink);\n    color: var(--paper);\n}\n\n.scroll-explore {\n    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);\n    display: flex; flex-direction: column; align-items: center; gap: 15px;\n}\n.scroll-explore span { \n    font-family: \"Montserrat\", sans-serif; font-size: 9px; font-weight: 500;\n    letter-spacing: 3px; color: #7a746d; text-transform: uppercase; \n}\n.scroll-explore .vertical-line { \n    width: 1px; height: 50px; \n    background: linear-gradient(to bottom, var(--cinnabar), transparent); opacity: 0.6; \n}\n\n\/* ===== CIVILIZATION ===== *\/\n\n.civilization { padding: 120px 40px; }\n\n.civil-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 30px;\n}\n\n.civil-item {\n    position: relative;\n    cursor: pointer;\n    overflow: hidden;\n    background: #000;\n    border: 1px solid var(--border);\n    border-radius: 2px;\n}\n\n.civil-item img {\n    width: 100%; height: 420px; object-fit: cover;\n    filter: grayscale(40%) brightness(0.8);\n    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.civil-item:hover img {\n    transform: scale(1.05); filter: grayscale(80%) brightness(0.3);\n}\n\n.civil-name {\n    position: absolute; inset: 0; display: flex; flex-direction: column;\n    justify-content: center; align-items: center; padding: 30px; text-align: center;\n    background: rgba(20, 18, 16, 0.35); transition: all 0.6s ease;\n}\n\n.civil-item:hover .civil-name { background: rgba(20, 18, 16, 0.6); }\n\n.civil-name h3 { \n    margin: 0; font-size: 28px; font-weight: 500; letter-spacing: 4px; \n    text-transform: uppercase; color: #ffffff; text-shadow: 0 4px 15px rgba(0,0,0,0.8);\n    transform: translateY(15px); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.civil-desc {\n    opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n    color: rgba(248, 246, 242, 0.9); font-family: \"Montserrat\", sans-serif;\n    font-size: 13px; font-weight: 300; line-height: 1.7; margin-top: 25px;\n    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;\n}\n\n.civil-item:hover h3 { transform: translateY(-10px); color: var(--cinnabar); }\n.civil-item:hover .civil-desc { opacity: 1; transform: translateY(0); }\n\n\/* ===== UNIVERSE ===== *\/\n\n.universe {\n    padding: 140px 0;\n    background: radial-gradient(circle at center, #24211e 0%, #11100f 100%);\n    color: var(--paper); text-align: center; position: relative;\n}\n\n.universe .section-sub { color: #888; }\n.universe .section-sub::after { background: var(--paper); opacity: 0.3; }\n\n#universe-container { position: relative; width: 100%; height: 600px; overflow: hidden; cursor: grab; }\n#universe-container:active { cursor: grabbing; }\n#universeCanvas { width: 100%; height: 100%; outline: none; }\n\n.universe-label {\n    position: absolute; top: 0; left: 0; color: #ffffff;\n    font-family: \"Montserrat\", sans-serif; font-size: 14px; font-weight: 500;\n    letter-spacing: 4px; text-transform: uppercase; text-align: center;\n    pointer-events: none; text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 20px rgba(217, 83, 58, 0.7);\n    transition: opacity 0.2s; will-change: transform, opacity;\n}\n\n\/* ===== PATHS ===== *\/\n\n.paths { padding: 120px 40px; background: var(--paper); }\n.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }\n.path { border: 1px solid var(--border); padding: 60px 40px; background: white; transition: 0.4s; text-align: center; cursor: pointer; }\n.path:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,.06); border-color: var(--cinnabar); }\n.path h3 { margin-top: 0; margin-bottom: 20px; font-size: 26px; font-weight: 500; }\n.path p { color: #7a746d; font-size: 16px; font-family: \"Montserrat\", sans-serif; font-weight: 300; line-height: 1.7; }\n\n\/* ===== SHOP ===== *\/\n\n.shop { display: none; padding: 120px 40px; background: #f2efe9; }\n.shop-filters { display: flex; justify-content: center; gap: 40px; margin-bottom: 60px; }\n.filter-btn {\n    background: transparent; border: none; font-family: \"Montserrat\", sans-serif; font-size: 12px; font-weight: 500;\n    text-transform: uppercase; letter-spacing: 2px; color: #7a746d; cursor: pointer; padding: 5px 0; border-bottom: 1px solid transparent; transition: all 0.3s ease; \n}\n.filter-btn:hover { color: var(--ink); }\n.filter-btn.active { color: var(--cinnabar); border-bottom: 1px solid var(--cinnabar); }\n\n.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; min-height: 400px; align-content: start; }\n.shop-item { background: white; border: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); cursor: pointer; display: flex; flex-direction: column; }\n.shop-item:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(43, 39, 37, 0.06); border-color: var(--cinnabar); }\n\n.shop-item-img { overflow: hidden; border-bottom: 1px solid var(--border); }\n.shop-item img { width: 100%; aspect-ratio: 1\/1; object-fit: cover; transition: transform 0.8s ease; }\n.shop-item:hover img { transform: scale(1.05); }\n\n.shop-item-info { padding: 25px 30px; display: flex; flex-direction: column; flex-grow: 1; }\n.shop-item-tag { font-family: \"Montserrat\", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #7a746d; margin-bottom: 15px; }\n.shop-item h4 { margin: 0 0 20px 0; font-size: 20px; font-weight: 500; }\n\n.shop-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 15px; border-top: 1px dashed var(--border); }\n.shop-item-bottom .price { color: var(--cinnabar); font-size: 15px; font-family: \"Montserrat\", sans-serif; font-weight: 500; }\n.shop-item-bottom .view-btn { font-family: \"Montserrat\", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color 0.3s; }\n.shop-item:hover .view-btn { color: var(--cinnabar); border-color: var(--cinnabar); }\n\n@keyframes itemFadeIn {\n    from { opacity: 0; transform: scale(0.95) translateY(10px); }\n    to { opacity: 1; transform: scale(1) translateY(0); }\n}\n.shop-item.show-item { display: flex; animation: itemFadeIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }\n\n\/* ===== MOBILE ADAPTATION ===== *\/\n\n@media(max-width:1024px) {\n    .container, .civilization, .paths, .shop { padding: 80px 30px; }\n    .civil-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\n    .path-grid { grid-template-columns: 1fr; gap: 25px; }\n    .hero { height: 75vh; min-height: 550px;}\n    #universe-container { height: 400px; }\n    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }\n}\n\n@media(max-width:600px) {\n    .container, .civilization, .paths, .shop { padding: 60px 20px; }\n    .hero-inner { margin-top: 0; }\n    .section-title { font-size: 32px; }\n    .section-sub { font-size: 10px; margin-bottom: 40px; }\n    \n    .hero h1 { font-size: 40px; }\n    .hero-desc { font-size: 18px; }\n    .hero-tags { display: none; } \n    .hero-cta { padding: 14px 30px; }\n\n    .civil-desc { display: none; }\n    .civil-name h3 { transform: translateY(0); font-size: 24px; }\n    \n    .shop-filters {\n        justify-content: flex-start; overflow-x: auto; padding-bottom: 15px; gap: 30px;\n        -webkit-overflow-scrolling: touch; scrollbar-width: none; \n    }\n    .shop-filters::-webkit-scrollbar { display: none; }\n    .filter-btn { white-space: nowrap; font-size: 12px; }\n    .shop-grid { grid-template-columns: 1fr; gap: 25px; }\n}\n\n<\/style>\n\n<section class=\"hero\">\n<div class=\"hero-inner\">\n<small>\u00d6sterl\u00e4ndsk civilisation<\/small>\n<h1>Uppt\u00e4ck konsten att leva p\u00e5 \u00f6sterl\u00e4ndskt vis<\/h1>\n<p class=\"hero-desc\">En levande tradition av \u00f6sterl\u00e4ndsk visdom, omtolkad f\u00f6r det moderna livet.<\/p>\n<p class=\"hero-tags\">Te \u00b7 Zen \u00b7 Dao \u00b7 Hantverk \u00b7 Medicin \u00b7 Kalligrafi \u00b7 R\u00f6kelse \u00b7 Rum<\/p>\n<a href=\"#explore\" class=\"hero-cta\">B\u00f6rja ut\u00f6va<\/a>\n<\/div>\n<div class=\"scroll-explore\">\n    <span>Utforska mer<\/span>\n    <div class=\"vertical-line\"><\/div>\n<\/div>\n<\/section>\n\n<section id=\"explore\" class=\"civilization\">\n<div class=\"section-title\">\u00c5tta dimensioner<\/div>\n<p class=\"section-sub\">Utforska de centrala pelarna i \u00f6sterl\u00e4ndsk filosofi<\/p>\n<div class=\"civil-grid\">\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-2.png\"\/>\n<div class=\"civil-name\">\n<h3>Te<\/h3>\n<p class=\"civil-desc\">Fr\u00e5n det fysiska bladet till sinnestillst\u00e5ndet \u2013 att etablera en fullst\u00e4ndig estetik f\u00f6r dagliga teritualer och n\u00e4rvaro.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-33.png\"\/>\n<div class=\"civil-name\">\n<h3>Zen<\/h3>\n<p class=\"civil-desc\">Skala bort mystiken och utforska den samtida, vetenskapligt f\u00f6rankrade praktiken av medveten n\u00e4rvaro, andning och meditation.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-3.png\"\/>\n<div class=\"civil-name\">\n<h3>Hantverk<\/h3>\n<p class=\"civil-desc\">F\u00f6rst\u00e5 Wabi-Sabi och Kintsugi, och utforska naturlagarna och den m\u00e4nskliga handen bakom tr\u00e4arbete och keramik.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-1.png\"\/>\n<div class=\"civil-name\">\n<h3>Dao<\/h3>\n<p class=\"civil-desc\">Att anpassa sig till den himmelska v\u00e4gen och omfamna den djupa visdomen i att dra ifr\u00e5n, icke-handling och absolut stillhet.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-2.png\"\/>\n<div class=\"civil-name\">\n<h3>Medicin<\/h3>\n<p class=\"civil-desc\">Rotad i ur\u00e5ldrig visdom \u2013 att forma om kroppens och sinnets rytmer i harmoni med de fyra \u00e5rstiderna.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-3.png\"\/>\n<div class=\"civil-name\">\n<h3>Kalligrafi<\/h3>\n<p class=\"civil-desc\">Varje penseldrag \u00e4r en kultivering \u2013 att k\u00e4nna den andliga andningen och disciplinen hos \u00f6sterl\u00e4ndska l\u00e4rda genom bl\u00e4cket.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-1.png\"\/>\n<div class=\"civil-name\">\n<h3>R\u00f6kelse<\/h3>\n<p class=\"civil-desc\">Att knyta an till det gudomliga genom doft och skapa en klar och elegant sf\u00e4r av inre frid och koncentration.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"civil-item\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/image-33.png\"\/>\n<div class=\"civil-name\">\n<h3>Rum<\/h3>\n<p class=\"civil-desc\">Att ta in naturen i hemmet och anv\u00e4nda tomrum, skugga och ljus f\u00f6r att skapa en stilla fristad i den moderna staden.<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section class=\"universe\">\n<div class=\"section-title\">Konstellationen<\/div>\n<p class=\"section-sub\">Dra f\u00f6r att utforska det sammanl\u00e4nkade n\u00e4tet av visdom<\/p>\n<div id=\"universe-container\">\n    <canvas id=\"universeCanvas\"><\/canvas>\n<\/div>\n<\/section>\n\n<section class=\"paths\">\n<div class=\"section-title\">L\u00e4rv\u00e4gar<\/div>\n<p class=\"section-sub\">Fr\u00e5n teori till daglig praktik<\/p>\n<div class=\"path-grid\">\n\n<div class=\"path\">\n<h3>Te: Materia &#038; sinne<\/h3>\n<p>Fr\u00e5n att f\u00f6rst\u00e5 fermenteringen av de sex tesorterna till estetiken hos Zisha-tekannor \u2013 att etablera en fullst\u00e4ndig daglig teritual.<\/p>\n<\/div>\n\n<div class=\"path\">\n<h3>Zen: Daglig stillhet<\/h3>\n<p>Skala bort det esoteriska och diskutera de filosofiska och vetenskapliga grunderna f\u00f6r medveten n\u00e4rvaro, andningsobservation och meditation.<\/p>\n<\/div>\n\n<div class=\"path\">\n<h3>Hantverk: Formens sk\u00f6nhet<\/h3>\n<p>F\u00f6rst\u00e5 Wabi-Sabi och konsten Kintsugi, och utforska \u00f6sterl\u00e4ndska naturlagar bakom traditionellt tr\u00e4arbete och keramik.<\/p>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section class=\"shop\">\n    <div class=\"section-title\">Kurerade f\u00f6rem\u00e5l<\/div>\n    <p class=\"section-sub\">Verktyg f\u00f6r din dagliga praktik<\/p>\n    \n    <div class=\"shop-filters\">\n        <button class=\"filter-btn active\" data-filter=\"all\">Alla produkter<\/button>\n        <button class=\"filter-btn\" data-filter=\"tea\">Teartiklar<\/button>\n        <button class=\"filter-btn\" data-filter=\"incense\">R\u00f6kelse<\/button>\n        <button class=\"filter-btn\" data-filter=\"craft\">Hantverk<\/button>\n    <\/div>\n\n    <div class=\"shop-grid\" id=\"shopGrid\">\n        <div class=\"shop-item show-item\" data-category=\"tea\">\n            <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=1\"\/><\/div>\n            <div class=\"shop-item-info\">\n                <span class=\"shop-item-tag\">Teartiklar<\/span>\n                <h4>Handgjord tekopp i lera<\/h4>\n                <div class=\"shop-item-bottom\">\n                    <span class=\"price\">$ 45.00<\/span>\n                    <span class=\"view-btn\">Detaljer<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"shop-item show-item\" data-category=\"incense\">\n            <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=2\"\/><\/div>\n            <div class=\"shop-item-info\">\n                <span class=\"shop-item-tag\">R\u00f6kelse<\/span>\n                <h4>R\u00f6kelseset med sandeltr\u00e4<\/h4>\n                <div class=\"shop-item-bottom\">\n                    <span class=\"price\">$ 28.00<\/span>\n                    <span class=\"view-btn\">Detaljer<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"shop-item show-item\" data-category=\"craft\">\n            <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=3\"\/><\/div>\n            <div class=\"shop-item-info\">\n                <span class=\"shop-item-tag\">Hantverk<\/span>\n                <h4>Wabi-Sabi-bambumatta<\/h4>\n                <div class=\"shop-item-bottom\">\n                    <span class=\"price\">$ 18.00<\/span>\n                    <span class=\"view-btn\">Detaljer<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"shop-item show-item\" data-category=\"tea\">\n            <div class=\"shop-item-img\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/400?random=4\"\/><\/div>\n            <div class=\"shop-item-info\">\n                <span class=\"shop-item-tag\">Teartiklar<\/span>\n                <h4>Tekanna i Zisha-lera<\/h4>\n                <div class=\"shop-item-bottom\">\n                    <span class=\"price\">$ 185.00<\/span>\n                    <span class=\"view-btn\">Detaljer<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script type=\"importmap\">\n  {\n    \"imports\": {\n      \"three\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/build\/three.module.js\",\n      \"three\/addons\/\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/examples\/jsm\/\"\n    }\n  }\n<\/script>\n\n<script type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n\n\/* ===== 3D UNIVERSE LOGIC ===== *\/\nconst container = document.getElementById(\"universe-container\");\nconst canvas = document.getElementById(\"universeCanvas\");\n\nconst scene = new THREE.Scene();\nscene.fog = new THREE.FogExp2(0x11100f, 0.06); \n\nconst camera = new THREE.PerspectiveCamera(55, container.clientWidth \/ container.clientHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });\nrenderer.setSize(container.clientWidth, container.clientHeight);\n\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\nconst controls = new OrbitControls(camera, canvas);\ncontrols.enableDamping = true;\ncontrols.dampingFactor = 0.05;\ncontrols.enableZoom = false;   \ncontrols.autoRotate = true;    \ncontrols.autoRotateSpeed = 0.6; \ncontrols.enablePan = false;    \n\nlet rotationTimeout;\ncontrols.addEventListener('start', () => {\n    controls.autoRotate = false;\n    clearTimeout(rotationTimeout);\n});\ncontrols.addEventListener('end', () => {\n    rotationTimeout = setTimeout(() => {\n        controls.autoRotate = true;\n    }, 1200);\n});\n\nconst group = new THREE.Group();\nscene.add(group);\n\nfunction createGlowingNodeMaterial() {\n    const glowCanvas = document.createElement('canvas');\n    glowCanvas.width = 128; glowCanvas.height = 128; \n    const context = glowCanvas.getContext('2d');\n    const gradient = context.createRadialGradient(64, 64, 0, 64, 64, 64);\n    gradient.addColorStop(0, 'rgba(255, 240, 220, 1)');   \n    gradient.addColorStop(0.15, 'rgba(217, 83, 58, 0.9)'); \n    gradient.addColorStop(0.5, 'rgba(156, 74, 56, 0.4)'); \n    gradient.addColorStop(1, 'rgba(156, 74, 56, 0)');     \n    context.fillStyle = gradient;\n    context.fillRect(0, 0, 128, 128);\n    const texture = new THREE.CanvasTexture(glowCanvas);\n    return new THREE.SpriteMaterial({ map: texture, transparent: true, blending: THREE.AdditiveBlending });\n}\nconst nodeMaterial = createGlowingNodeMaterial();\n\nconst starsGeometry = new THREE.BufferGeometry();\nconst starsMaterial = new THREE.PointsMaterial({ color: 0xaaaaaa, size: 0.03, transparent: true, opacity: 0.7 });\nconst starVertices = [];\n\nfor (let i = 0; i < 500; i++) {\n    const x = (Math.random() - 0.5) * 20;\n    const y = (Math.random() - 0.5) * 20;\n    const z = (Math.random() - 0.5) * 20;\n    starVertices.push(x, y, z);\n}\nstarsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));\nconst stars = new THREE.Points(starsGeometry, starsMaterial);\nscene.add(stars);\n\n\/\/ \u624b\u52a8\u7ffb\u8bd1 3D \u8282\u70b9\u6587\u5b57\u4e3a\u745e\u5178\u8bed\nconst labelsData = [\"TE\", \"ZEN\", \"HANTVERK\", \"DAO\", \"MEDICIN\", \"KALLIGRAFI\", \"R\u00d6KELSE\", \"RUM\"];\nconst nodes = [];\nconst htmlLabels = [];\n\nfor (let i = 0; i < labelsData.length; i++) {\n    let sprite = new THREE.Sprite(nodeMaterial);\n    sprite.scale.set(0.4, 0.4, 0.4); \n    let phi = Math.acos(-1 + (2 * i) \/ labelsData.length);\n    let theta = Math.sqrt(labelsData.length * Math.PI) * phi;\n    sprite.position.setFromSphericalCoords(2.8, phi, theta); \n    group.add(sprite);\n    nodes.push(sprite);\n\n    let div = document.createElement('div');\n    div.className = 'universe-label';\n    div.innerText = labelsData[i];\n    container.appendChild(div);\n    htmlLabels.push(div);\n}\n\nconst lineMat = new THREE.LineBasicMaterial({ color: 0xd9533a, transparent: true, opacity: 0.35 });\nfor (let i = 0; i < nodes.length; i++) {\n    for (let j = i + 1; j < nodes.length; j++) {\n        if (nodes[i].position.distanceTo(nodes[j].position) < 4.5) {\n            const points = [nodes[i].position, nodes[j].position];\n            const lineGeo = new THREE.BufferGeometry().setFromPoints(points);\n            const line = new THREE.Line(lineGeo, lineMat);\n            group.add(line);\n        }\n    }\n}\n\ncamera.position.z = 5.5; \nconst tempV = new THREE.Vector3();\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    controls.update();\n    stars.rotation.y += 0.0003; \n\n    for (let i = 0; i < nodes.length; i++) {\n        nodes[i].getWorldPosition(tempV);\n        tempV.project(camera);\n        const x = (tempV.x * 0.5 + 0.5) * container.clientWidth;\n        const y = (tempV.y * -0.5 + 0.5) * container.clientHeight;\n        \n        if (tempV.z > 1 || tempV.z < -1) {\n            htmlLabels[i].style.opacity = 0;\n        } else {\n            htmlLabels[i].style.transform = `translate(-50%, -50%) translate(${x}px, ${y - 25}px)`; \n            let opacity = 1 - (tempV.z * 1.5); \n            opacity = Math.max(0.1, Math.min(1, opacity));\n            htmlLabels[i].style.opacity = opacity;\n            let scale = 1 + (0.5 - tempV.z) * 0.2;\n            htmlLabels[i].style.transform += ` scale(${scale})`;\n        }\n    }\n    renderer.render(scene, camera);\n}\n\nanimate();\n\nwindow.addEventListener('resize', () => {\n    camera.aspect = container.clientWidth \/ container.clientHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize(container.clientWidth, container.clientHeight);\n});\n\n\n\/* ===== SHOP FILTER LOGIC ===== *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n    const filterBtns = document.querySelectorAll('.filter-btn');\n    const shopItems = document.querySelectorAll('.shop-item');\n\n    filterBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n            filterBtns.forEach(b => b.classList.remove('active'));\n            btn.classList.add('active');\n\n            const filterValue = btn.getAttribute('data-filter');\n\n            shopItems.forEach(item => {\n                item.style.display = 'none';\n                item.classList.remove('show-item');\n\n                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\n                    item.style.display = 'flex'; \n                    void item.offsetWidth; \n                    item.classList.add('show-item');\n                }\n            });\n        });\n    });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Eastern Stillness \u2014 Uppt\u00e4ck konsten att leva p\u00e5 \u00f6sterl\u00e4ndskt vis \u00d6sterl\u00e4ndsk civilisation Uppt\u00e4ck konsten att leva p\u00e5 \u00f6sterl\u00e4ndskt vis En levande tradition av \u00f6sterl\u00e4ndsk visdom, omtolkad f\u00f6r det moderna livet. Te \u00b7 Zen \u00b7 Dao \u00b7 Hantverk \u00b7 Medicin \u00b7 Kalligrafi \u00b7 R\u00f6kelse \u00b7 Rum B\u00f6rja ut\u00f6va Utforska mer \u00c5tta dimensioner Utforska de centrala pelarna [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3764","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"easternstillness","author_link":"https:\/\/easternstillness.com\/sv\/author\/luckybabyok668gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Eastern Stillness \u2014 Uppt\u00e4ck konsten att leva p\u00e5 \u00f6sterl\u00e4ndskt vis \u00d6sterl\u00e4ndsk civilisation Uppt\u00e4ck konsten att leva p\u00e5 \u00f6sterl\u00e4ndskt vis En levande tradition av \u00f6sterl\u00e4ndsk visdom, omtolkad f\u00f6r det moderna livet. Te \u00b7 Zen \u00b7 Dao \u00b7 Hantverk \u00b7 Medicin \u00b7 Kalligrafi \u00b7 R\u00f6kelse \u00b7 Rum B\u00f6rja ut\u00f6va Utforska mer \u00c5tta dimensioner Utforska de centrala pelarna&hellip;","_links":{"self":[{"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/pages\/3764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/comments?post=3764"}],"version-history":[{"count":4,"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/pages\/3764\/revisions"}],"predecessor-version":[{"id":3773,"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/pages\/3764\/revisions\/3773"}],"wp:attachment":[{"href":"https:\/\/easternstillness.com\/sv\/wp-json\/wp\/v2\/media?parent=3764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}