/* Kyoto Spa — «Сёдзи»: вход в хижину. На главной kyoto-spa.kz с 05.10.2026 («да» владельца).
   Главная закрыта раздвижными бумажными дверями. За бумагой театр теней: луна и пагода с логотипа, холмы, бамбук,
   ветка, падающие листья по сезону. Двери разъезжаются, на страницу влетает несколько листьев.
   Один раз за визит, любое касание открывает сразу. Разметку строит shoji.js, фактуры — wow/make_textures.py. */
.kt-shoji {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; overflow: hidden; cursor: pointer;
  background: transparent; -webkit-tap-highlight-color: transparent;
  --bar: 5px; --frame: 16px; --stile: 34px; --board: 130px;
}
.kt-shoji__door {
  position: relative; flex: 0 0 50%; height: 100%; overflow: hidden;
  background: #caa56a;
  box-shadow: 0 0 90px 18px rgba(6, 3, 1, .7);
  transition: transform 1.6s cubic-bezier(.74, 0, .16, 1);
  will-change: transform; backface-visibility: hidden;
}
/* запасной путь без Web Animations */
.kt-shoji.is-open-css .kt-shoji__door--l { transform: translate3d(-104%, 0, 0); }
.kt-shoji.is-open-css .kt-shoji__door--r { transform: translate3d(104%, 0, 0); }

/* сцена за бумагой: одна на обе двери, каждая показывает свою половину */
.kt-shoji__scene { position: absolute; top: 0; left: 0; width: 200%; height: 100%; overflow: hidden; }
.kt-shoji__door--r .kt-shoji__scene { left: -100%; }
.kt-shoji__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 56% at 50% var(--cy), #f6dfae 0%, #e6c58b 26%, #d1aa6c 50%, rgba(190, 148, 90, 0) 80%),
    linear-gradient(180deg, #8e673a 0%, #b38c57 30%, #b08852 62%, #7a5730 100%);
}
.kt-shoji__moon {
  position: absolute; left: 50%; top: var(--cy); width: var(--moon); height: var(--moon);
  margin: calc(var(--moon) / -2) 0 0 calc(var(--moon) / -2); border-radius: 50%;
  background: radial-gradient(closest-side, #fffaea 0%, #fff4d6 60%, #ffeabd 86%, #f9dea6 100%);
  box-shadow: 0 0 calc(var(--moon) * .2) calc(var(--moon) * .015) rgba(255, 232, 180, .6);
  filter: blur(1.5px);
  animation: kt-shoji-flame 3.4s ease-in-out infinite;
}
@keyframes kt-shoji-flame { 0%, 100% { opacity: .93; } 22% { opacity: 1; } 41% { opacity: .9; } 63% { opacity: .98; } 80% { opacity: .88; } }
.kt-shoji__sh { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.kt-shoji__hills { width: 100%; height: 100%; }
.kt-shoji__clip { overflow: hidden; }
.kt-shoji__sway { transform-box: fill-box; }
.kt-shoji__bamboo { transform-origin: 50% 100%; animation: kt-shoji-sway-a 7.5s ease-in-out infinite alternate; will-change: transform; }
.kt-shoji__branch { transform-origin: 0 0; animation: kt-shoji-sway-b 6.2s ease-in-out infinite alternate; will-change: transform; }
.kt-shoji__branch--far { animation-duration: 8.4s; animation-delay: -3s; }
@keyframes kt-shoji-sway-a { from { transform: rotate(-.7deg); } to { transform: rotate(.9deg); } }
@keyframes kt-shoji-sway-b { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg) translateY(5px); } }
/* падающие листья: тени за бумагой */
.kt-shoji__fall { position: absolute; top: 0; left: 0; color: #4a2f17; will-change: transform; animation: kt-shoji-fall linear infinite; opacity: .4; }
.kt-shoji__fall svg { display: block; filter: blur(1.1px); animation: kt-shoji-spin ease-in-out infinite alternate; }
@keyframes kt-shoji-fall { from { transform: translate3d(var(--x0), -8vh, 0); } to { transform: translate3d(var(--x1), 108vh, 0); } }
@keyframes kt-shoji-spin { from { transform: rotate(var(--r0)) scaleX(1); } 50% { transform: rotate(var(--r1)) scaleX(.35); } to { transform: rotate(var(--r2)) scaleX(1); } }
.kt-shoji__washi { position: absolute; inset: 0; background: url(washi.webp) 0 0 / 520px 520px; mix-blend-mode: multiply; opacity: .95; }
.kt-shoji__vig { position: absolute; inset: 0; background: radial-gradient(74% 68% at 50% var(--cy), rgba(40, 22, 8, 0) 44%, rgba(40, 22, 8, .28) 78%, rgba(26, 13, 4, .56) 100%); }

/* решётка кумико: дерево против света, тёмное, с тёплым краем */
.kt-shoji__v, .kt-shoji__h { position: absolute; background: linear-gradient(90deg, #0d0704, #2e1d10 48%, #0d0704); box-shadow: 0 0 7px rgba(62, 36, 12, .42); }
.kt-shoji__h { background: linear-gradient(180deg, #0d0704, #2e1d10 48%, #0d0704); }
.kt-shoji__v--thin, .kt-shoji__h--thin { box-shadow: 0 0 4px rgba(62, 36, 12, .3); }
/* рама и нижняя доска: фактура дерева */
.kt-shoji__stile, .kt-shoji__rail, .kt-shoji__board { position: absolute; background-color: #1d120a; }
.kt-shoji__stile { top: 0; bottom: 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 214, 160, .07) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55)), url(wood-v.webp); background-size: 100% 100%, 190px 512px; }
.kt-shoji__rail { left: 0; right: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(255, 214, 160, .07) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55)), url(wood-h.webp); background-size: 100% 100%, 512px 190px; }
.kt-shoji__board {
  left: 0; right: 0; bottom: 0; height: var(--board);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .7) 0 1px, rgba(255, 214, 160, .05) 1px 2px, rgba(0, 0, 0, 0) 2px var(--plank)),
    url(wood-v.webp);
  background-size: 100% 100%, auto, 300px 512px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .12);
}
/* ручка-углубление хикитэ */
.kt-shoji__pull {
  position: absolute; top: 57%; width: var(--pull); height: calc(var(--pull) * 2.9); margin-top: calc(var(--pull) * -1.45);
  border-radius: 999px; background: radial-gradient(120% 80% at 50% 30%, #1f150c, #070403 70%);
  box-shadow: 0 0 0 1.5px #b28a45, 0 0 0 3px #2a1b0e, inset 0 3px 5px rgba(0, 0, 0, .9), 0 1px 0 3px rgba(255, 214, 160, .06);
}
/* свет, который выходит на страницу, когда двери расходятся */
.kt-shoji__spill {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(46% 70% at 50% 44%, rgba(255, 214, 150, .6), rgba(255, 190, 110, .2) 48%, rgba(255, 190, 110, 0) 78%);
}
/* листья, которые влетают на страницу */
.kt-shoji__gust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kt-shoji__leaf { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .32)); }
.kt-shoji__flake { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .92) 45%, rgba(255, 255, 255, 0) 100%); }
.kt-shoji__spark { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; background: radial-gradient(closest-side, #fdffe0 0%, rgba(230, 255, 140, .9) 22%, rgba(196, 240, 90, .32) 52%, rgba(196, 240, 90, 0) 100%); mix-blend-mode: screen; }

/* ---------- времена года ---------- */
/* осень: клён рыжий, у порога листья */
.kt-shoji--autumn .kt-shoji__tint { fill: #6a2408; stroke: #6a2408; color: #6a2408; }
.kt-shoji--autumn .kt-shoji__fall { opacity: .52; }
.kt-shoji--autumn .kt-shoji__glow { background: radial-gradient(62% 56% at 50% var(--cy), #f8dca6 0%, #e9bd7c 26%, #d49f5e 50%, rgba(194, 142, 80, 0) 80%), linear-gradient(180deg, #8f6332 0%, #b6884e 30%, #b2834a 62%, #7a5229 100%); }
/* весна: свет чуть розовее */
.kt-shoji--spring .kt-shoji__glow { background: radial-gradient(62% 56% at 50% var(--cy), #fbe6d8 0%, #eecbb0 26%, #d9ae8c 50%, rgba(198, 152, 118, 0) 80%), linear-gradient(180deg, #92694a 0%, #b88f6c 30%, #b48a66 62%, #7c573a 100%); }
.kt-shoji--spring .kt-shoji__moon { background: radial-gradient(closest-side, #fffaf4 0%, #fff1e6 60%, #ffe4d2 86%, #f8d6c0 100%); }
.kt-shoji--spring .kt-shoji__tint { fill: #4a2a22; stroke: #4a2a22; color: #4a2a22; }
/* лето: сумерки темнее, чтобы светлячки горели */
.kt-shoji--summer .kt-shoji__glow { background: radial-gradient(60% 54% at 50% var(--cy), #efd9a2 0%, #d6b77c 26%, #b9975e 50%, rgba(160, 128, 76, 0) 80%), linear-gradient(180deg, #75552e 0%, #98774a 30%, #917044 62%, #5e4222 100%); }
.kt-shoji--summer .kt-shoji__tint { fill: #2e2a14; stroke: #2e2a14; color: #2e2a14; }
.kt-shoji__furin { transform-origin: 50% 0; animation: kt-shoji-sway-c 3.6s ease-in-out infinite alternate; will-change: transform; }
@keyframes kt-shoji-sway-c { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.kt-shoji__fly {
  position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(closest-side, #fdffe0 0%, rgba(232, 255, 150, .88) 26%, rgba(200, 240, 96, .34) 56%, rgba(200, 240, 96, 0) 100%);
  animation: kt-shoji-fly var(--d) ease-in-out infinite alternate, kt-shoji-blink var(--b) ease-in-out infinite; will-change: transform, opacity;
}
@keyframes kt-shoji-fly { from { transform: translate3d(var(--x0), var(--y0), 0); } 50% { transform: translate3d(var(--xm), var(--ym), 0); } to { transform: translate3d(var(--x1), var(--y1), 0); } }
@keyframes kt-shoji-blink { 0%, 100% { opacity: .12; } 42%, 62% { opacity: 1; } }
/* зима: холодный лунный свет, иней, снег */
.kt-shoji--winter .kt-shoji__glow { background: radial-gradient(62% 56% at 50% var(--cy), #f3f6f9 0%, #dbe3e9 26%, #bcc7cf 50%, rgba(160, 172, 182, 0) 80%), linear-gradient(180deg, #747f89 0%, #9ca8b1 30%, #97a3ac 62%, #626d77 100%); }
.kt-shoji--winter .kt-shoji__moon { background: radial-gradient(closest-side, #ffffff 0%, #f7fafd 60%, #e8eff6 86%, #d8e2ec 100%); box-shadow: 0 0 calc(var(--moon) * .2) calc(var(--moon) * .015) rgba(226, 236, 248, .7); }
.kt-shoji--winter .kt-shoji__sh { fill: #1f2a35; stroke: #1f2a35; }
.kt-shoji--winter .kt-shoji__fall { color: #1f2a35; opacity: .42; }
.kt-shoji--winter .kt-shoji__fall svg { filter: blur(1.5px); animation: none; }
.kt-shoji--winter .kt-shoji__vig { background: radial-gradient(74% 68% at 50% var(--cy), rgba(14, 22, 32, 0) 44%, rgba(14, 22, 32, .3) 78%, rgba(8, 14, 22, .6) 100%); }
.kt-shoji--winter .kt-shoji__spill { background: radial-gradient(46% 70% at 50% 44%, rgba(228, 238, 255, .55), rgba(204, 222, 250, .18) 48%, rgba(204, 222, 250, 0) 78%); }
.kt-shoji__frost {
  position: absolute; inset: 0; background: url(frost.webp) 0 0 / 300px 300px; mix-blend-mode: screen; opacity: .9;
  -webkit-mask-image: radial-gradient(80% 72% at 50% 44%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .4) 66%, #000 100%);
  mask-image: radial-gradient(80% 72% at 50% 44%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .4) 66%, #000 100%);
}

.kt-shoji.is-moving .kt-shoji__sway, .kt-shoji.is-moving .kt-shoji__fall, .kt-shoji.is-moving .kt-shoji__fall svg, .kt-shoji.is-moving .kt-shoji__moon, .kt-shoji.is-moving .kt-shoji__fly { animation-play-state: paused; }

/* пока двери закрыты, первый экран ждёт: его появление начнётся вместе с открытием */
html.kt-shoji-hold .banner .banner__img img,
html.kt-shoji-hold .banner .banner__ui-h1,
html.kt-shoji-hold .banner .banner__ui-h3,
html.kt-shoji-hold .banner .banner__actions { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .kt-shoji { transition: opacity .5s ease; }
  .kt-shoji.is-fade { opacity: 0; }
  .kt-shoji__sway, .kt-shoji__fall, .kt-shoji__fall svg, .kt-shoji__moon, .kt-shoji__fly { animation: none; }
  .kt-shoji__fall { display: none; }
}