/* Первый экран «Окно», вторая волна (проба 07.10.2026): энсо, фонарь, тории, катомадо на глиняной стене, свет на стене от видео. */
@property --kt-a { syntax: "<angle>"; inherits: false; initial-value: 372deg; }
.kt-m2 .banner__img { background: radial-gradient(ellipse 46% 64% at var(--kt-lx, 72%) var(--kt-ly, 50%), rgba(196, 140, 80, .78), rgba(120, 84, 48, .3) 55%, transparent 78%), #221a14; overflow: hidden; }
.kt-m2 .banner__img > img { opacity: 0; animation: none !important; }
.kt-m2__amb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .95;
  -webkit-mask-image: radial-gradient(ellipse 48% 66% at var(--kt-lx, 72%) var(--kt-ly, 50%), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 66% at var(--kt-lx, 72%) var(--kt-ly, 50%), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); }
.kt-m2__wall { position: absolute; inset: 0; background: url(/local/templates/kioto/include/enso/m2-wall.webp) 0 0 / 768px 768px; mix-blend-mode: multiply; }
.kt-m2__night { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 14, .55) 0%, transparent 40%, transparent 70%, rgba(150, 130, 120, .07) 92%, rgba(170, 150, 130, .1) 100%); }
.kt-m2__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 6, 4, .7) 0%, rgba(8, 6, 4, .4) 34%, transparent 56%),
              radial-gradient(130% 110% at 70% 50%, transparent 60%, rgba(6, 4, 3, .55) 100%),
              linear-gradient(180deg, rgba(6, 4, 3, .38), transparent 20%, transparent 80%, rgba(6, 4, 3, .5)); }

/* текст слева, проём справа */
.kt-m2 .banner__inner { display: grid; grid-template-columns: minmax(360px, 40%) 1fr; align-items: center; gap: 24px; padding-top: 16px; padding-bottom: 24px; }
.kt-m2 .kt-m2__text { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.kt-m2 .banner__content { align-items: center; text-align: center; max-width: none; flex-grow: 0; }
.kt-m2 .banner__ui-h1 { background: linear-gradient(130deg, #8a5c2a 10%, #d9b56a 42%, #f1dc9c 52%, #d0a85c 62%, #a37c36 90%); background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #d0a85c; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); }
.kt-m2 .banner__ui-h3 { max-width: 500px; color: #efe5d2; font-size: 27px; }
.kt-m2 .banner__actions { justify-content: center; margin-top: 36px; }
.kt-m2 .banner__actions .ui-button { min-width: 0; padding-left: 34px; padding-right: 34px; }

.kt-m2__stage { position: relative; justify-self: center; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.kt-m2__stage.is-ready { opacity: 1; }
.kt-m2__move { position: absolute; inset: 0; will-change: transform; }
.kt-m2__view { position: absolute; overflow: hidden; }
.kt-m2__view > img, .kt-m2__view > video { will-change: transform; }
.kt-m2__view > img, .kt-m2__view > video { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; object-fit: cover; display: block; }
.kt-m2__video { opacity: 0; transition: opacity .9s ease; }
.kt-m2__video.is-on { opacity: 1; }
.kt-m2__stage img.kt-m2__brush, .kt-m2__stage img.kt-m2__paper, .kt-m2__stage img.kt-m2__gate, .kt-m2__stage img.kt-m2__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

/* ---- энсо */
.kt-m2--enso .kt-m2__stage { width: min(calc((100vh - var(--header-height, var(--header-height-initial))) * .93), 52vw, 800px); aspect-ratio: 1; }
.kt-m2--enso .kt-m2__view { inset: 0; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 69%); mask-image: radial-gradient(closest-side, #000 60%, transparent 69%); }
.kt-m2--enso .kt-m2__brush { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  -webkit-mask-image: conic-gradient(from 198deg, #000 0deg, #000 var(--kt-a), transparent calc(var(--kt-a) + 10deg));
  mask-image: conic-gradient(from 198deg, #000 0deg, #000 var(--kt-a), transparent calc(var(--kt-a) + 10deg)); }

/* надпись золотом сбоку от энсо: своя узкая колонка справа, пишется сверху вниз после круга */
@property --kt-k { syntax: "<percentage>"; inherits: false; initial-value: 110%; }
.kt-m2--inscribed .banner__inner { grid-template-columns: minmax(340px, 38%) 1fr 92px; }
.kt-m2__kanji { position: relative; z-index: 2; justify-self: center; align-self: center; width: 74px; margin-top: -6vh; outline: none; }
.kt-m2__kanji img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--kt-k) - 9%), transparent var(--kt-k)); mask-image: linear-gradient(180deg, #000 calc(var(--kt-k) - 9%), transparent var(--kt-k)); }
.kt-m2__kanji-cap { position: absolute; top: 100%; right: 0; margin-top: 14px; width: max-content; max-width: 260px; text-align: right; font: 500 12px/1.4 var(--font-primary); letter-spacing: .08em; color: #d9c49a; opacity: 0; transform: translateY(-4px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.kt-m2__kanji:hover .kt-m2__kanji-cap, .kt-m2__kanji:focus-visible .kt-m2__kanji-cap { opacity: 1; transform: none; }

/* ---- фонарь */
.kt-m2--lantern .kt-m2__stage { height: min(calc((100vh - var(--header-height, var(--header-height-initial))) * .96), 860px); aspect-ratio: 1000 / 1440; align-self: start; margin-top: 0; }
.kt-m2__cord { position: absolute; left: 50%; width: 2px; margin-left: -1px; bottom: 97.6%; height: 60vh; background: linear-gradient(180deg, #19130f, #2e241d); }
.kt-m2--lantern .kt-m2__move::before { content: ""; position: absolute; inset: -18% -60%; background: radial-gradient(closest-side, rgba(255, 186, 104, .26), rgba(255, 160, 80, .08) 55%, transparent); mix-blend-mode: screen; pointer-events: none; }
.kt-m2--lantern .kt-m2__sway { position: absolute; inset: 0; transform-origin: 50% 0; }
.kt-m2--lantern .kt-m2__view, .kt-m2__dim { inset: 0; -webkit-mask-image: url(/local/templates/kioto/include/enso/m2-lantern-mask.png); mask-image: url(/local/templates/kioto/include/enso/m2-lantern-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kt-m2__dim { position: absolute; background: #120a05; opacity: 0; pointer-events: none; }
.kt-m2--lantern .kt-m2__paper { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); }

/* ---- тории */
.kt-m2--torii .kt-m2__stage { width: min(56vw, 880px, calc((100vh - var(--header-height, var(--header-height-initial))) * .98 * 1.077)); aspect-ratio: 1400 / 1300; align-self: end; margin-bottom: -1vh; }
.kt-m2--torii .kt-m2__view { left: 21%; right: 21%; top: 12%; bottom: 1.5%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 80%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 80%, transparent); mask-composite: intersect; }
.kt-m2--torii .kt-m2__gate { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.kt-m2__ground { position: absolute; left: -40%; right: -40%; bottom: -6%; height: 18%; background: radial-gradient(ellipse 46% 50% at 50% 40%, rgba(0, 0, 0, .62), transparent 72%); }
.kt-m2__mist { position: absolute; bottom: -7%; height: 30%; left: -45%; width: 190%; pointer-events: none; background: url(/local/templates/kioto/include/enso/smoke.webp) 0 100% / 34% 100% repeat-x; opacity: .32; }
.kt-m2__mist--2 { bottom: -3%; height: 22%; background-size: 26% 100%; opacity: .22; background-position: 40% 100%; }
.kt-m2__mist--3 { bottom: 6%; height: 18%; background-size: 30% 100%; opacity: .12; background-position: 70% 100%; }

/* ---- дымка: без рамки, края растворяются клубами (маска: плотная середина + облачный край, облака медленно плывут) */
.kt-m2--haze .kt-m2__stage { width: min(58vw, 900px, calc((100vh - var(--header-height, var(--header-height-initial))) * .96 * 1.2)); aspect-ratio: 6 / 5; }
.kt-m2--haze .kt-m2__view { inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, transparent 66%), url(/local/templates/kioto/include/enso/m2-haze.png), radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0, 0, 0, .7) 70%, transparent 100%);
  -webkit-mask-size: 100% 100%, 62% 62%, 100% 100%; -webkit-mask-repeat: no-repeat, repeat, no-repeat; -webkit-mask-position: 0 0, 0 0, 0 0;
  -webkit-mask-composite: source-over, source-in;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, transparent 66%), url(/local/templates/kioto/include/enso/m2-haze.png), radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0, 0, 0, .7) 70%, transparent 100%);
  mask-size: 100% 100%, 62% 62%, 100% 100%; mask-repeat: no-repeat, repeat, no-repeat; mask-position: 0 0, 0 0, 0 0;
  mask-composite: add, intersect; }
.kt-m2__wisp { position: absolute; pointer-events: none; background: url(/local/templates/kioto/include/enso/smoke.webp) center / contain no-repeat; opacity: .16; mix-blend-mode: screen; }
.kt-m2__wisp--1 { left: -6%; top: 18%; width: 52%; height: 46%; }
.kt-m2__wisp--2 { right: -8%; top: 40%; width: 58%; height: 50%; opacity: .12; }
.kt-m2--haze .kt-m2__mist { bottom: -4%; }

/* ---- катомадо */
.kt-m2--kato .kt-m2__stage { height: min(calc((100vh - var(--header-height, var(--header-height-initial))) * .95), 860px); aspect-ratio: 1100 / 1400; }
.kt-m2--kato .kt-m2__view { inset: 0; -webkit-mask-image: url(/local/templates/kioto/include/enso/m2-kato-mask.png); mask-image: url(/local/templates/kioto/include/enso/m2-kato-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kt-m2--kato .kt-m2__frame { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }
.kt-m2__blind { position: absolute; left: 0; right: 0; top: 0; bottom: 3.5%; z-index: 2; background: url(/local/templates/kioto/include/enso/m2-sudare.webp) 0 0 / 240px 125px repeat; box-shadow: inset 0 -30px 40px -20px rgba(0, 0, 0, .5); }
.kt-m2__roll { position: absolute; left: 0; right: 0; bottom: -12px; height: 22px; border-radius: 11px; background: linear-gradient(180deg, #4a3826, #a88a5e 38%, #c9ab7a 48%, #6d5538 80%, #33261a); box-shadow: 0 8px 12px rgba(0, 0, 0, .5); }
.kt-m2--still .kt-m2__blind { display: none; }

/* ---- вход */
@media (prefers-reduced-motion: no-preference) {
  .kt-m2 .banner__ui-h1 { animation: kt-mo-up 1.1s cubic-bezier(.2, .7, .2, 1) .2s backwards, kt-m2-shine 7s cubic-bezier(.4, 0, .2, 1) 2.2s infinite; }
  @keyframes kt-m2-shine { 0%, 72%, 100% { background-position: 100% 0; } 86% { background-position: 0% 0; } }
  /* энсо: мазок пишется, внутри раскрывается хижина */
  .kt-m2--enso:not(.kt-m2--still) .kt-m2__brush { --kt-a: -10deg; }
  .kt-m2--enso.is-in:not(.kt-m2--still) .kt-m2__brush { animation: kt-m2-brush 2.1s cubic-bezier(.5, .05, .22, 1) .2s forwards; }
  @keyframes kt-m2-brush { from { --kt-a: -10deg; } to { --kt-a: 372deg; } }
  .kt-m2--enso:not(.kt-m2--still) .kt-m2__view { opacity: 0; clip-path: circle(18% at 50% 50%); }
  .kt-m2--enso.is-in:not(.kt-m2--still) .kt-m2__view { opacity: 1; clip-path: circle(60% at 50% 50%); transition: opacity 1.4s ease .9s, clip-path 2.2s cubic-bezier(.16, 1, .3, 1) .9s; }
  /* надпись: пишется сверху вниз, когда круг почти дописан */
  .kt-m2--inscribed:not(.kt-m2--still) .kt-m2__kanji img { --kt-k: -10%; }
  .kt-m2--inscribed.is-in:not(.kt-m2--still) .kt-m2__kanji img { animation: kt-m2-write 2.4s cubic-bezier(.45, .05, .3, 1) 1.9s forwards; }
  @keyframes kt-m2-write { from { --kt-k: -10%; } to { --kt-k: 110%; } }
  /* фонарь: опускается, загорается с дрожью, потом тихо покачивается */
  .kt-m2--lantern:not(.kt-m2--still) .kt-m2__sway { opacity: 0; transform: translateY(-28px); }
  .kt-m2--lantern.is-in:not(.kt-m2--still) .kt-m2__sway { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1); animation: kt-m2-sway 7s ease-in-out 1.6s infinite alternate; }
  @keyframes kt-m2-sway { from { transform: rotate(-.9deg); } to { transform: rotate(.9deg); } }
  .kt-m2--lantern.is-in:not(.kt-m2--still) .kt-m2__dim { animation: kt-m2-flicker 1.9s linear .5s backwards; }
  @keyframes kt-m2-flicker { 0% { opacity: .94; } 22% { opacity: .9; } 26% { opacity: .55; } 30% { opacity: .85; } 38% { opacity: .4; } 44% { opacity: .62; } 60% { opacity: .2; } 100% { opacity: 0; } }
  /* тории: ворота выходят из тумана, за ними зажигается свет, туман стелется */
  .kt-m2--torii:not(.kt-m2--still) .kt-m2__gate { opacity: 0; filter: blur(6px) drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); transform: translateY(14px); }
  .kt-m2--torii.is-in:not(.kt-m2--still) .kt-m2__gate { opacity: 1; filter: blur(0) drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); transform: none; transition: opacity 1.4s ease .1s, filter 1.6s ease .1s, transform 1.9s cubic-bezier(.16, 1, .3, 1) .1s; }
  .kt-m2--torii:not(.kt-m2--still) .kt-m2__view { opacity: 0; }
  .kt-m2--torii.is-in:not(.kt-m2--still) .kt-m2__view { opacity: 1; transition: opacity 1.8s ease .9s; }
  .kt-m2--torii:not(.kt-m2--still) .kt-m2__mist { animation: kt-m2-mist 26s ease-in-out infinite alternate; }
  .kt-m2--torii:not(.kt-m2--still) .kt-m2__mist--2 { animation-duration: 19s; animation-direction: alternate-reverse; }
  .kt-m2--torii:not(.kt-m2--still) .kt-m2__mist--3 { animation-duration: 31s; }
  @keyframes kt-m2-mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
  /* дымка: кадр проявляется из размытия, облака по краю медленно плывут */
  .kt-m2--haze:not(.kt-m2--still) .kt-m2__view { opacity: 0; filter: blur(18px); }
  .kt-m2--haze.is-in:not(.kt-m2--still) .kt-m2__view { opacity: 1; filter: blur(0); transition: opacity 1.6s ease .2s, filter 2.2s cubic-bezier(.16, 1, .3, 1) .2s; animation: kt-m2-haze 48s linear infinite; }
  @keyframes kt-m2-haze { from { -webkit-mask-position: 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0; } to { -webkit-mask-position: 0 0, 124% 62%, 0 0; mask-position: 0 0, 124% 62%, 0 0; } }
  .kt-m2--haze:not(.kt-m2--still) .kt-m2__mist { animation: kt-m2-mist 26s ease-in-out infinite alternate; }
  .kt-m2--haze:not(.kt-m2--still) .kt-m2__mist--2 { animation-duration: 19s; animation-direction: alternate-reverse; }
  .kt-m2--haze:not(.kt-m2--still) .kt-m2__wisp--1 { animation: kt-m2-wisp 22s ease-in-out infinite alternate; }
  .kt-m2--haze:not(.kt-m2--still) .kt-m2__wisp--2 { animation: kt-m2-wisp 29s ease-in-out infinite alternate-reverse; }
  @keyframes kt-m2-wisp { from { transform: translate(-6%, 3%) scale(1); } to { transform: translate(8%, -4%) scale(1.12); } }
  /* катомадо: штора сударэ поднимается */
  .kt-m2--kato.is-in:not(.kt-m2--still) .kt-m2__blind { transform: translateY(-108%); transition: transform 2.3s cubic-bezier(.62, 0, .28, 1) .6s; }
  .kt-m2--kato:not(.kt-m2--still) .kt-m2__view > video, .kt-m2--kato:not(.kt-m2--still) .kt-m2__view > img { transform: scale(1.06); }
  .kt-m2--kato.is-in:not(.kt-m2--still) .kt-m2__view > video, .kt-m2--kato.is-in:not(.kt-m2--still) .kt-m2__view > img { transform: none; transition: transform 3.2s cubic-bezier(.16, 1, .3, 1) .9s, opacity .9s ease; }
  .kt-m2 .kt-m2__text .banner__ui-h3 { animation-delay: .45s; }
}
@media (prefers-reduced-motion: reduce) { .kt-m2__blind { display: none; } }

@media (max-width: 1259px) {
  .kt-m2 .banner__inner { grid-template-columns: minmax(300px, 42%) 1fr; gap: 20px; }
  .kt-m2--inscribed .banner__inner { grid-template-columns: minmax(300px, 40%) 1fr 64px; }
  .kt-m2__kanji { width: 54px; }
  .kt-m2--enso .kt-m2__stage { width: min(calc((100vh - var(--header-height, var(--header-height-initial))) * .9), 54vw, 620px); }
  .kt-m2--torii .kt-m2__stage { width: min(56vw, 640px); }
  .kt-m2--haze .kt-m2__stage { width: min(56vw, 660px); }
}
@media (max-width: 767px) {
  .kt-m2 .banner__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 14px; padding-bottom: 64px; }
  .kt-m2 .kt-m2__text { display: contents; }
  .kt-m2__stage { order: 1; margin: 0 auto 14px; align-self: center !important; }
  /* высота телефона за вычетом шапки и нижней панели ≈ 611 px (iPhone 15): форма + текст + кнопки помещаются, кнопки выше плавающей «Звук» */
  .kt-m2--enso .kt-m2__stage { --w: var(--kt-m2-w, min(56vw, 218px)); width: var(--w); margin-top: calc(var(--w) * -.06); margin-bottom: calc(var(--w) * -.06); }   /* у картинки круга прозрачные поля ~9-11 %, их прячем под соседей */   /* --kt-m2-w ставит fit() в hero-mado2.js: всё свободное место до нижней панели */
  .kt-m2--inscribed .banner__inner { grid-template-columns: none; }
  .kt-m2__kanji { position: absolute; left: 100%; top: 4%; width: 13.5%; margin: 0 0 0 10px; }
  .kt-m2__kanji-cap { display: none; }
  .kt-m2--lantern .kt-m2__stage { height: 232px; margin-top: 0; }
  .kt-m2--torii .kt-m2__stage { width: min(64vw, 250px); margin-bottom: 12px; }
  .kt-m2--haze .kt-m2__stage { width: min(80vw, 300px); margin-bottom: 4px; }
  .kt-m2--kato .kt-m2__stage { height: 232px; }
  .kt-m2 .banner__content { order: 2; align-items: center; text-align: center; }
  .kt-m2 .banner__ui-h3 { font-size: 18px; max-width: 360px; }
  .kt-m2 .banner__actions { order: 3; margin-top: 20px; flex-direction: row; gap: 10px; }
  .kt-m2 .banner__actions .ui-button { flex: 1; min-width: 0; min-height: 52px; padding: 8px 10px; font-size: 15px; line-height: 1.2; white-space: normal; text-align: center; }   /* KZ: «Сертификат сатып алыңыз» переносится, не обрезается */
  .kt-m2__shade { background: linear-gradient(180deg, rgba(6, 4, 3, .25) 0%, transparent 28%, rgba(8, 6, 4, .5) 52%, rgba(8, 6, 4, .82) 100%); }
  .kt-m2__wall { background-size: 512px 512px; }
  .kt-m2__amb { -webkit-mask-image: radial-gradient(ellipse 80% 42% at var(--kt-lx, 50%) var(--kt-ly, 25%), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); mask-image: radial-gradient(ellipse 80% 42% at var(--kt-lx, 50%) var(--kt-ly, 25%), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); }
  .kt-m2 .banner__img { background: radial-gradient(ellipse 70% 36% at var(--kt-lx, 50%) var(--kt-ly, 25%), rgba(150, 104, 58, .5), transparent 72%), #1b1410; }
  .kt-m2__roll { height: 14px; bottom: -7px; }
  .kt-m2__blind { background-size: 160px 83px; }
}
@media (max-width: 767px) and (max-height: 700px) {             /* iPhone SE и подобные */
  .kt-m2--enso .kt-m2__stage { --w: var(--kt-m2-w, 150px); }
  .kt-m2--lantern .kt-m2__stage, .kt-m2--kato .kt-m2__stage { height: 160px; }
  .kt-m2--torii .kt-m2__stage { width: 172px; }
  .kt-m2--haze .kt-m2__stage { width: 200px; }
  .kt-m2 .banner__ui-h1 { font-size: 46px; }
}