/**
 * Hero Zero Block — CSS overlay
 * Block: #rec2435202111
 *
 * Классы (Add CSS Class Name):
 *   Group Hero   → hero
 *   Video        → hero-video
 *   Overlay      → hero-overlay
 *   H1           → hero-h1
 *   Text         → hero-text
 *   Button       → hero-btn
 *   Group слов   → hero-words  (опционально)
 *   Каждое слово → hero-word   (4 текстовых элемента на видеопанели)
 */

/* ─── Design tokens ─── */
#rec2435202111 .hero,
#rec2435202111.hero-scope .hero,
.hero {
  --hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --hero-panel-dur: 1.05s;
  --hero-fade-dur: 0.7s;
  --hero-shift-dur: 0.85s;
  --hero-stagger: 0.11s;
  --hero-delay-base: 0.28s;
  --hero-video-scale: 1.045;
  --hero-word-active: #ffffff;
  --hero-word-muted: rgba(255, 255, 255, 0.38);
  --hero-word-faint: rgba(255, 255, 255, 0.12);
  --hero-word-dot: #d13621;
  --hero-word-shift: 0.55s;
}

/* ─── Root: contain layout, GPU layer ─── */
.hero.tn-group,
.hero.t396__elem.tn-group {
  isolation: isolate;
  contain: layout style;
}

.hero .tn-group__content {
  overflow: hidden;
}

/* ─── Video container ─── */
.hero .hero-video.t396__elem,
.hero .hero-video,
.hero .t396__elem[data-elem-type="video"] {
  overflow: hidden;
  will-change: clip-path;
}

.hero .hero-video .tn-atom,
.hero .hero-video[data-elem-type="video"] .tn-atom {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero .hero-video video,
.hero .hero-video .tn-atom video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--hero-video-scale));
  transform-origin: center center;
  transition:
    opacity 0.55s var(--hero-ease-soft),
    transform 1.8s var(--hero-ease);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero.is-playing .hero-video video,
.hero.is-playing .hero-video .tn-atom video {
  opacity: 1;
  transform: scale(1);
}

.hero.is-static .hero-video video,
.hero.is-static .hero-video .tn-atom video {
  display: none !important;
}

/* Poster / pre-play state (native poster on ) */
.hero:not(.is-playing):not(.is-static) .hero-video video,
.hero:not(.is-playing):not(.is-static) .hero-video .tn-atom video {
  opacity: 1;
}

/* ─── Overlay ─── */
.hero .hero-overlay.t396__elem,
.hero .hero-overlay {
  pointer-events: none;
  transition: opacity var(--hero-fade-dur) var(--hero-ease);
  transition-delay: calc(var(--hero-delay-base) * 0.5);
}

.hero .hero-overlay .tn-atom {
  transition: inherit;
  transition-delay: inherit;
}

/* ─── Video panel: vertical word stack ─── */
.hero .hero-words.t396__elem,
.hero .hero-words {
  pointer-events: none;
  z-index: 4;
}

.hero .hero-word.t396__elem,
.hero .hero-word {
  pointer-events: none;
  transition:
    opacity var(--hero-word-shift) var(--hero-ease),
    transform var(--hero-word-shift) var(--hero-ease),
    filter var(--hero-word-shift) var(--hero-ease);
}

.hero .hero-word .tn-atom {
  position: relative;
  color: var(--hero-word-muted) !important;
  opacity: 1 !important;
  transition: inherit;
}

.hero .hero-word.is-active .tn-atom {
  color: var(--hero-word-active) !important;
}

.hero .hero-word.is-active .tn-atom::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--hero-word-dot);
  transform: scale(1);
  transition: transform 0.4s var(--hero-ease);
}

.hero .hero-word.is-adjacent .tn-atom {
  color: rgba(255, 255, 255, 0.62) !important;
}

.hero .hero-word.is-far .tn-atom {
  color: var(--hero-word-faint) !important;
}

.hero .hero-word.is-active {
  transform: translate3d(0, 0, 0);
  z-index: 2;
}

.hero .hero-word.is-adjacent {
  transform: translate3d(0, 0, 0);
}

.hero .hero-word.is-far {
  transform: translate3d(0, 0, 0);
}

html.hero-js .hero:not(.is-ready) .hero-word,
html.hero-js .hero:not(.is-ready) .hero-words {
  opacity: 0 !important;
  visibility: hidden;
}

html.hero-js .hero.is-ready .hero-word,
html.hero-js .hero.is-ready .hero-words {
  visibility: visible;
  transition:
    opacity var(--hero-fade-dur) var(--hero-ease),
    visibility 0s linear 0s;
  transition-delay: calc(var(--hero-delay-base) + var(--hero-stagger) * 5);
}

html.hero-js .hero.is-ready .hero-word {
  opacity: 1 !important;
}

/* Fallback-селекторы, если класс не задан на H1 / Text / Button */
.hero .hero-h1,
.hero .t396__elem:has(.tn-atom h1),
.hero .t396__elem:has(h1) {
  will-change: transform, opacity;
}

.hero .hero-text,
.hero .t396__elem.hero-text {
  will-change: transform, opacity;
}

.hero .hero-btn,
.hero .t396__elem[data-elem-type="button"] {
  will-change: transform, opacity;
}

/* ─── Content: initial (hidden) state ─── */
html.hero-js .hero:not(.is-ready) .hero-h1,
html.hero-js .hero:not(.is-ready) .t396__elem:has(.tn-atom h1),
html.hero-js .hero:not(.is-ready) .t396__elem:has(h1),
html.hero-js .hero:not(.is-ready) .hero-text,
html.hero-js .hero:not(.is-ready) .hero-btn,
html.hero-js .hero:not(.is-ready) .t396__elem[data-elem-type="button"] {
  opacity: 0 !important;
  visibility: hidden;
  transform: translate3d(0, 32px, 0);
}

html.hero-js .hero:not(.is-ready) .hero-video,
html.hero-js .hero:not(.is-ready) .t396__elem[data-elem-type="video"] {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}

html.hero-js .hero:not(.is-ready) .hero-overlay,
html.hero-js .hero:not(.is-ready) .hero-overlay .tn-atom {
  opacity: 0 !important;
}

/* ─── Panel reveal ─── */
html.hero-js .hero.is-ready .hero-video,
html.hero-js .hero.is-ready .t396__elem[data-elem-type="video"] {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--hero-panel-dur) var(--hero-ease),
    -webkit-clip-path var(--hero-panel-dur) var(--hero-ease);
}

html.hero-js .hero.is-ready .hero-overlay,
html.hero-js .hero.is-ready .hero-overlay .tn-atom {
  opacity: 1 !important;
  transition: opacity var(--hero-fade-dur) var(--hero-ease);
  transition-delay: calc(var(--hero-delay-base) * 0.65);
}

/* ─── Content stagger ─── */
html.hero-js .hero.is-ready .hero-h1,
html.hero-js .hero.is-ready .t396__elem:has(.tn-atom h1),
html.hero-js .hero.is-ready .t396__elem:has(h1) {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--hero-shift-dur) var(--hero-ease),
    transform var(--hero-shift-dur) var(--hero-ease),
    visibility 0s linear 0s;
  transition-delay: calc(var(--hero-delay-base) + var(--hero-stagger) * 0);
}

html.hero-js .hero.is-ready .hero-text {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--hero-shift-dur) var(--hero-ease),
    transform var(--hero-shift-dur) var(--hero-ease),
    visibility 0s linear 0s;
  transition-delay: calc(var(--hero-delay-base) + var(--hero-stagger) * 2);
}

html.hero-js .hero.is-ready .hero-btn,
html.hero-js .hero.is-ready .t396__elem[data-elem-type="button"] {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--hero-shift-dur) var(--hero-ease),
    transform var(--hero-shift-dur) var(--hero-ease),
    visibility 0s linear 0s;
  transition-delay: calc(var(--hero-delay-base) + var(--hero-stagger) * 4);
}

/* ─── Button hover (premium micro-interaction) ─── */
.hero .hero-btn .tn-atom,
.hero .hero-btn a {
  transition:
    transform 0.35s var(--hero-ease),
    box-shadow 0.35s var(--hero-ease),
    background-color 0.35s ease;
}

.hero .hero-btn:hover .tn-atom,
.hero .hero-btn:hover a {
  transform: translate3d(0, -2px, 0);
}

.hero .hero-btn:active .tn-atom,
.hero .hero-btn:active a {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.12s;
}

/* ─── Post-animation cleanup ─── */
.hero.is-done .hero-video,
.hero.is-done .t396__elem[data-elem-type="video"] {
  will-change: auto;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero * {
    animation: none !important;
    transition: none !important;
  }

  html.hero-js .hero:not(.is-ready) .hero-h1,
  html.hero-js .hero:not(.is-ready) .t396__elem:has(h1),
  html.hero-js .hero:not(.is-ready) .hero-text,
  html.hero-js .hero:not(.is-ready) .hero-btn,
  html.hero-js .hero:not(.is-ready) .t396__elem[data-elem-type="button"],
  html.hero-js .hero:not(.is-ready) .hero-overlay,
  html.hero-js .hero:not(.is-ready) .hero-video,
  html.hero-js .hero:not(.is-ready) .hero-word,
  html.hero-js .hero:not(.is-ready) .hero-words {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  .hero .hero-word.is-active .tn-atom::before {
    display: none;
  }
}

/* ─── Mobile (Tilda breakpoint) ─── */
@media screen and (max-width: 979px) {
  .hero {
    --hero-panel-dur: 0.85s;
    --hero-delay-base: 0.18s;
    --hero-video-scale: 1.03;
  }

  .hero .hero-word.is-active .tn-atom::before {
    left: -14px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
  }

  html.hero-js .hero:not(.is-ready) .hero-video,
  html.hero-js .hero:not(.is-ready) .t396__elem[data-elem-type="video"] {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
  }

  html.hero-js .hero:not(.is-ready) .hero-h1,
  html.hero-js .hero:not(.is-ready) .hero-text,
  html.hero-js .hero:not(.is-ready) .hero-btn,
  html.hero-js .hero:not(.is-ready) .t396__elem:has(h1),
  html.hero-js .hero:not(.is-ready) .t396__elem[data-elem-type="button"] {
    transform: translate3d(0, 20px, 0);
  }
}

/* ─── Small phones ─── */
@media screen and (max-width: 639px) {
  .hero {
    --hero-stagger: 0.08s;
  }
}

/* ─── Safari 100vh fix (optional, if Group Hero = Window height) ─── */
@supports (height: 100dvh) {
  .hero.tn-group[data-field-group-type-value="physical"],
  .hero .tn-group__content {
    min-height: 100dvh;
  }
}