/* Фоны секций - "сцены". Каждая секция получает свой слой позади контента:
   узор лабиринта, сияние, затемнённое фото, золотая пыль, магические кольца.
   Слой - ::before секции, края растворены маской, поэтому секции перетекают одна в другую.
   Картинка для фото-сцены - переменная --scene в style секции.
   Внутренние страницы без явной сцены получают по кругу пыль, лабиринт, сияние (nth-of-type). */

.scene,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta){isolation:isolate}
.scene::before,.scene::after,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta)::before,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta)::after{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none}
/* растворяем верх и низ, чтобы не было ступенек между секциями */
.scene::before,.scene::after,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta)::before,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta)::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}

/* ---------------------------------------------------------------- лабиринт: тонкие стены изумрудом */
.scene--maze::before,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta):nth-of-type(3n+2)::before{
  background:
    radial-gradient(50% 70% at var(--sx,85%) 50%,rgba(20,184,119,.16),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%2314B877' stroke-width='1.6' stroke-linecap='square' opacity='.55'%3E%3Cpath d='M0 20H60M80 20H160M20 20V60M20 60H40M40 40V80M60 20V60H100M120 20V40H140V80M80 40H100M0 80H20M60 80H120V100M140 80H160M20 100V140M20 100H60V120M40 140H80V120M80 100V120H100M100 120V160M120 120H160M140 100V120M120 140V160M0 140H20M60 140V160'/%3E%3C/svg%3E") 0 0/160px 160px;
  -webkit-mask-image:radial-gradient(60% 75% at var(--sx,85%) 50%,#000 10%,transparent 75%);
          mask-image:radial-gradient(60% 75% at var(--sx,85%) 50%,#000 10%,transparent 75%);
  opacity:.5;
}
.scene--maze-l::before{--sx:12%}
/* второй слой лабиринта: мягкое свечение без узора, чтобы узор не висел в пустоте */
.scene--maze::after,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta):nth-of-type(3n+2)::after{background:radial-gradient(40% 50% at var(--sx,85%) 50%,rgba(20,184,119,.08),transparent 70%)}
.scene--maze-l::after{--sx:12%}

/* ---------------------------------------------------------------- сияние: цветные ореолы */
.scene--aurora::before{
  background:
    radial-gradient(45% 55% at 12% 20%,rgba(242,190,92,.14),transparent 70%),
    radial-gradient(50% 60% at 92% 70%,rgba(200,38,79,.17),transparent 70%),
    radial-gradient(40% 45% at 55% 105%,rgba(20,184,119,.12),transparent 70%);
}
.scene--aurora-g::before,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta):nth-of-type(3n)::before{
  background:
    radial-gradient(50% 60% at 88% 18%,rgba(20,184,119,.18),transparent 70%),
    radial-gradient(45% 55% at 6% 80%,rgba(242,190,92,.12),transparent 70%);
}
/* второй свет медленно дышит - только opacity, без перерисовки */
.scene--aurora::after,.scene--aurora-g::after{
  background:radial-gradient(35% 45% at 70% 30%,rgba(242,190,92,.09),transparent 70%),radial-gradient(35% 45% at 25% 75%,rgba(20,184,119,.09),transparent 70%);
  animation:scene-breathe 9s ease-in-out infinite alternate;
}
@keyframes scene-breathe{from{opacity:.25}to{opacity:1}}

/* ---------------------------------------------------------------- фото: кадр площадки под тёмной вуалью */
.scene--photo::before{
  background:
    linear-gradient(180deg,rgba(6,13,10,.55),rgba(6,13,10,.82) 60%,rgba(6,13,10,.9)),
    linear-gradient(90deg,rgba(6,13,10,.9),rgba(3,126,78,.18) 50%,rgba(149,23,54,.28)),
    var(--scene) center/cover no-repeat;
  filter:saturate(1.15);
}

/* ---------------------------------------------------------------- золотая пыль: звёзды и искры */
.scene--dust::before,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta):nth-of-type(3n+1)::before{
  background:
    radial-gradient(1.5px 1.5px at 20px 30px,rgba(255,226,162,.9),transparent),
    radial-gradient(1px 1px at 90px 80px,rgba(255,226,162,.7),transparent),
    radial-gradient(1.5px 1.5px at 150px 20px,rgba(63,224,155,.7),transparent),
    radial-gradient(1px 1px at 60px 150px,rgba(255,226,162,.6),transparent),
    radial-gradient(2px 2px at 170px 130px,rgba(255,226,162,.8),transparent),
    radial-gradient(1px 1px at 120px 180px,rgba(238,90,126,.7),transparent);
  background-size:200px 200px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000 20%,transparent 80%);
          mask-image:radial-gradient(70% 80% at 50% 40%,#000 20%,transparent 80%);
  opacity:.8;
}
.scene--dust::after,main > .sect:not(.scene):not(.wrap):not(.finale):not(.cta):nth-of-type(3n+1)::after{background:radial-gradient(60% 50% at 50% 0%,rgba(242,190,92,.10),transparent 70%)}

/* ---------------------------------------------------------------- кольца: магический круг позади центра */
.scene--rings::before{
  background:
    repeating-radial-gradient(circle at 50% 55%,transparent 0 58px,rgba(242,190,92,.12) 59px 60px,transparent 61px 118px),
    radial-gradient(circle at 50% 55%,rgba(242,190,92,.10),transparent 45%);
  -webkit-mask-image:radial-gradient(circle at 50% 55%,#000 0,transparent 62%);
          mask-image:radial-gradient(circle at 50% 55%,#000 0,transparent 62%);
}
.scene--rings::after{background:radial-gradient(50% 60% at 50% 55%,rgba(200,38,79,.10),transparent 70%)}

/* ---------------------------------------------------------------- тонкая золотая черта-разделитель сверху */
.scene--line{border-top:0}
.scene--line > .wrap::before{
  content:'';display:block;height:1px;margin:0 auto clamp(28px,4vw,48px);max-width:520px;
  background:linear-gradient(90deg,transparent,rgba(242,190,92,.55),transparent);
}

@media (max-width:760px){
  .scene--maze::before{background-size:auto,120px 120px;opacity:.4;--sx:80%}
  .scene--maze-l::before{--sx:20%}
  .scene--rings::before{background:repeating-radial-gradient(circle at 50% 55%,transparent 0 40px,rgba(242,190,92,.12) 41px 42px,transparent 43px 82px),radial-gradient(circle at 50% 55%,rgba(242,190,92,.10),transparent 45%)}
}
@media (prefers-reduced-motion:reduce){
  .scene--aurora::after,.scene--aurora-g::after{animation:none}
}

/* ================================================================ печать на стыке секций - seam()
   Круглый лабиринт медленно вращается, по кругу бегает огонёк, в центре монета с иконкой.
   В стороны уходит золотой меандр (греческий ключ - древний знак лабиринта), по нему от центра
   разбегаются искры. Высоты не занимает, висит поверх стыка. Анимации спят, пока печать не на экране. */
.seam{position:relative;z-index:6;height:0;display:flex;justify-content:center;align-items:center;pointer-events:none}
.seam::before,.seam::after{content:'';position:absolute;left:0;right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 3%,#000 28%,#000 calc(50% - 70px),transparent calc(50% - 56px),transparent calc(50% + 56px),#000 calc(50% + 70px),#000 72%,transparent 97%);
          mask-image:linear-gradient(90deg,transparent 3%,#000 28%,#000 calc(50% - 70px),transparent calc(50% - 56px),transparent calc(50% + 56px),#000 calc(50% + 70px),#000 72%,transparent 97%)}
.seam::before{top:-7px;height:14px;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' fill='none' stroke='%23F2BE5C' stroke-width='1.4'%3E%3Cpath d='M0 12.5H6V2H20V9.5H12V5.5M6 12.5H24'/%3E%3C/svg%3E") center/24px 14px repeat-x}
.seam::after{top:5px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,226,162,.95),transparent) no-repeat,linear-gradient(90deg,transparent,rgba(255,226,162,.95),transparent) no-repeat;
  background-size:140px 2px,140px 2px;background-position:50% 0,50% 0;
  filter:drop-shadow(0 0 4px rgba(242,190,92,.9));animation:seam-run 5s ease-in infinite}
@keyframes seam-run{0%{background-position:50% 0,50% 0;opacity:0}15%{opacity:1}70%,100%{background-position:-10% 0,110% 0;opacity:0}}

.seam__core{position:relative;width:96px;height:96px;flex-shrink:0;display:grid;place-items:center}
.seam__core::before{content:'';position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(242,190,92,.28),rgba(6,13,10,.85) 55%,transparent 70%);animation:seam-glow 3.6s ease-in-out infinite alternate}
.seam__maze{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23F2BE5C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='60' cy='60' r='56' stroke-dasharray='150 14 170 18' transform='rotate%280 60 60%29'/%3E%3Ccircle cx='60' cy='60' r='46' stroke-dasharray='60 14 120 14 81' transform='rotate%2840 60 60%29'/%3E%3Ccircle cx='60' cy='60' r='36' stroke-dasharray='95 12 107 12' transform='rotate%28110 60 60%29'/%3E%3Ccircle cx='60' cy='60' r='26' stroke-dasharray='40 12 99 12' transform='rotate%28200 60 60%29'/%3E%3Cpath d='M99.8 83.0L108.5 88.0 M18.3 40.6L9.2 36.3 M28.8 78.0L20.2 83.0 M56.9 24.1L56.0 14.2 M68.9 84.4L72.3 93.8 M76.7 40.1L83.1 32.4 M44.2 57.2L34.4 55.5'/%3E%3C/svg%3E") center/100% no-repeat;opacity:.8;filter:drop-shadow(0 0 5px rgba(242,190,92,.55));animation:seam-spin 48s linear infinite}
.seam__orbit{position:absolute;inset:-7px;animation:seam-spin 6s linear infinite reverse}
.seam__orbit i{position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff3d6;box-shadow:0 0 8px 2px rgba(255,215,130,.9),0 0 18px 4px rgba(242,190,92,.5)}
.seam .medal{--m:44px}
.seam--wine .seam__core::before{background:radial-gradient(circle,rgba(200,38,79,.32),rgba(6,13,10,.85) 55%,transparent 70%)}
.seam--wine .seam__orbit i{background:#ffe0e8;box-shadow:0 0 8px 2px rgba(238,90,126,.9),0 0 18px 4px rgba(200,38,79,.5)}
.seam--green .seam__orbit i{background:#dcfff0;box-shadow:0 0 8px 2px rgba(63,224,155,.9),0 0 18px 4px rgba(20,184,119,.5)}
@keyframes seam-spin{to{transform:rotate(360deg)}}
@keyframes seam-glow{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
.seam:not(.is-in)::after,.seam:not(.is-in) .seam__core::before,.seam:not(.is-in) .seam__maze,.seam:not(.is-in) .seam__orbit{animation-play-state:paused}
.js .seam.reveal{transform:scale(.6)}
.js .seam.reveal.is-in{transform:none;transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
@media (max-width:760px){
  .seam__core{width:74px;height:74px}
  .seam .medal{--m:34px}
  .seam::before,.seam::after{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 calc(50% - 52px),transparent calc(50% - 42px),transparent calc(50% + 42px),#000 calc(50% + 52px),#000 80%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 20%,#000 calc(50% - 52px),transparent calc(50% - 42px),transparent calc(50% + 42px),#000 calc(50% + 52px),#000 80%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .seam::after,.seam__core::before,.seam__maze,.seam__orbit{animation:none}
  .seam::after{opacity:0}
}