/* Modal player */
.az-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.az-modal.is-open { display: block; }
.az-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.az-modal__dialog { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.az-modal__content { position: relative; max-width: 96vw; max-height: 90vh; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.az-modal__media { width: 100%; height: auto; display: block; background: #000; overflow: hidden; }
.az-modal__media > * { width: 100%; height: auto; display: block; }
.az-modal__title { color: #fff; text-align: center; font-size: 14px; opacity: .85; }
.az-modal__close { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #fff; border: 0; padding: 8px 10px; cursor: pointer; border-radius: 4px; }
.az-modal__controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.az-modal__controls .slider-btn { background: rgba(0,0,0,0.6); color: #fff; border: 0; padding: 8px 10px; cursor: pointer; border-radius: 4px; }

/* Prevent page scroll when modal open */
.az-modal-open { overflow: hidden; }
/* ========================================
   Preloader (timeline) base styles
   ======================================== */
.az-preloader{position:fixed;inset:0;background:#000;z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease}
.az-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.az-preloader.is-loaded{display:none}
.az-preloader__inner{text-align:center;color:#fff}
.az-preloader__text{font-size:18px;font-weight:500;letter-spacing:.5px;margin-top:16px;opacity:.95}
.az-timelapse-icon{width:180px;height:120px;margin:0 auto 10px;color:#fff}
.az-timelapse-icon svg{width:100%;height:100%;overflow:visible}
.tl-svg{--accent:#ff3d00;--muted:rgba(255,255,255,.25);fill:none}
.tl-track{fill:var(--muted)}
.tl-marks rect{fill:var(--muted)}
.tl-clip{fill:var(--accent);opacity:0;transform:translateY(16px) scale(.9);transform-origin:center;animation:clip-in .5s cubic-bezier(.34,1.56,.64,1) forwards}
.tl-clip-1{animation-delay:0ms}
.tl-clip-2{animation-delay:120ms}
.tl-clip-3{animation-delay:240ms}
.tl-clip-4{animation-delay:360ms}
.tl-clip-5{animation-delay:480ms}
@keyframes clip-in{0%{opacity:0;transform:translateY(16px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
.tl-playhead rect,.tl-playhead polygon{fill:#fff}
.tl-playhead{animation:playhead-move 1800ms ease-in-out infinite alternate}
@keyframes playhead-move{0%{transform:translateX(0)}100%{transform:translateX(240px)}}

@media (max-width:768px){
  .az-timelapse-icon{width:150px;height:100px}
  .az-preloader__text{font-size:16px}
}
/*
Theme Name: Alex Zolin Portfolio
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: One-page portfolio theme with video background and a sticky caption frame.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alex-zolin-portfolio
*/

/* Root variables for easy customization */
:root {
  --frame-border-color: rgba(255, 255, 255, 0.95);
  --frame-radius: 5px;
  --frame-border-width: 3px;
  --caption-height: 50px;
  --side-padding: 50px;
  --top-bottom-padding: 30px;
  --inner-padding: 20px;
  --notch-width: 680px;      /* width of cut-out zone for caption */
  --notch-height: 162px;     /* height of cut-out zone */
  --frame-inset: 14px;       /* inner offset of content from frame stroke */
  --accent: #ff6b35;         /* акцентный цвет */
}

/* Base styles */
html, body {
  height: 100%;
}

body {
  margin: 0;
  color: #ffffff;
  background: #0b0b0b;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Portfolio Hero Section */
.portfolio-hero {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 var(--side-padding);
  display: grid;
  overflow: hidden;
}

.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: blur(12px) brightness(0.18); }

/* Extra spacing for the first hero block */


.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px) brightness(0.15);
  z-index: 0;
  pointer-events: none;
  display: block !important;
}

.hero-frame {
  position: relative;
  border: var(--frame-border-width) solid var(--frame-border-color);
  border-radius: var(--frame-radius);
  overflow: hidden;
  width: 100%;
  min-height: calc(100vh - 200px);
  margin-top: 100px;
  margin-bottom: 100px;
  box-shadow: none;
  z-index: 2; /* выше фонового видео и секционной тени */
}

.video-bg {
  position: absolute;
  inset: 0;
}

.video-bg video,
.video-bg iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block !important;
}

.video-bg video {
  /* Без анимации и масштабирования для снижения нагрузки */
  filter: brightness(0.6) contrast(1.06) saturate(1.06);
}

.video-bg iframe {
  border: none;
  filter: brightness(0.6) contrast(1.06) saturate(1.06);
}

.video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
}

@keyframes azVideoDrift {
  0% { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.06) translate3d(0,-0.5%,0); }
}

/* Caption Bar inside the frame */
.caption-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--caption-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--inner-padding);
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px) brightness(1.05);
  -webkit-backdrop-filter: blur(2px) brightness(1.05);
}

.caption-title,
.caption-desc {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caption-title {
  text-align: left;
}

.caption-desc {
  text-align: right;
}

/* Split containers for mobile two-line rendering (hidden by default) */
.caption-title-split, .caption-desc-split{ display:none; }
.caption-title-text, .caption-desc-text{ display:inline; }

/* Sticky Caption (separate block that mirrors the frame) */
.sticky-caption {
  position: fixed;
  top: 0;
  left: var(--side-padding);
  right: var(--side-padding);
  height: var(--caption-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--inner-padding);
  background: rgba(0, 0, 0, 0.0);
  backdrop-filter: blur(3px) brightness(1.05);
  -webkit-backdrop-filter: blur(3px) brightness(1.05);
  z-index: 9999;
  color: #fff;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: all 320ms ease;
  box-sizing: border-box;
  border-radius: 0;
}

.sticky-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.98);
  color: #000;
  border-bottom-left-radius: var(--frame-radius);
  border-bottom-right-radius: var(--frame-radius);
}

/* Adjust for WordPress admin bar */
.admin-bar .sticky-caption { top: 32px; }
@media (max-width: 782px){ .admin-bar .sticky-caption { top: 46px; } }

.sticky-caption .caption-title,
.sticky-caption .caption-desc {
  transition: color 320ms ease;
  z-index: 1;
  position: relative;
}

.sticky-caption.is-visible .caption-title,
.sticky-caption.is-visible .caption-desc {
  color: #000;
}

/* Center text "В ТЕЛЕГРАММ" with cutout effect */
.sticky-caption::before {
  content: 'В ТЕЛЕГРАММ';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: -1;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
  background: linear-gradient(to bottom, transparent 0%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
}

.sticky-caption.is-visible::before {
  opacity: 1;
  -webkit-text-stroke: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: multiply;
}

/* ================= Slider Section ================= */
.portfolio-slider {
  position: relative;
  min-height: 100vh;
  padding: var(--top-bottom-padding) var(--side-padding);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}

/* Плавная тень на стыке секций */
.portfolio-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 240px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1; /* над .hero-bg-video, но под .hero-frame */
}

.portfolio-slider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 240px;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1; /* над .slider-bg, но под контентом */
}

/* Section between hero and slider: services composition wrapper */
.services-composition-section{
  position: relative;
  padding: 80px var(--side-padding) 60px;
  box-sizing: border-box;
}
.services-composition-section::before{
  content: '';
  position: absolute;
  left:0; right:0; top:0; height: 200px;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.services-composition-section::after{
  content: '';
  position: absolute;
  left:0; right:0; bottom:0; height: 200px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.services-composition-section .sc-inner{ position: relative; z-index: 2; }

.slider-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.slider-bg video,
.slider-bg iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px) brightness(0.15);
  transform: scale(1.08);
  display: block !important;
}
/* Low GPU mode: снижаем пост-эффекты и отключаем фоновые анимации */
.az-low-gpu .hero-bg-video{ filter: brightness(0.2); }
.az-low-gpu .video-bg video{ filter: brightness(0.7); animation: none; transform: none; }
.az-low-gpu .slider-bg video,.az-low-gpu .slider-bg iframe,.az-low-gpu .slider-bg img{ filter: brightness(0.2); transform: none; }
.slider-bg iframe {
  border: none;
}
.slider-bg img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px) brightness(0.15);
  transform: scale(1.08);
}

.slider-wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 0;
  z-index: 2; /* выше фоновой тени секции */
}

/* Custom frame with border */
.slider-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--top-bottom-padding) * 2 - 100px);
  box-shadow: none;
  overflow: visible;
}

.slider-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  background-image: url('/wp-content/uploads/2025/10/Ресурс-1-1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent; /* прозрачный PNG без заливки */
}

.slider-index {
  position: absolute;
  top: var(--inner-padding);
  right: var(--inner-padding);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
  z-index: 10;
}

.slider-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: url('/wp-content/uploads/2025/10/Ресурс-11.png');
  mask-image: url('/wp-content/uploads/2025/10/Ресурс-11.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.slides {
  display: flex;
  height: 100%;
  transition: transform 300ms ease;
}
.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}
.slide video,
.slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block !important;
}
.slide iframe {
  border: none;
}
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption inside frame cutout, bottom-left */
.slide-caption {
  position: absolute;
  left: 0.5%;
  top: 89%;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 8px);
  width: 35%;
  max-width: 500px;
  z-index: 5;
}
.slide-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.slider-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  transition: opacity 200ms;
  opacity: 0.8;
  font-weight: 300;
}
.slider-btn:hover { opacity: 1; }
.slide-title {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.2vw, 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide-titleline {
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  margin: 0 12px;
  position: relative;
  top: 2px;
}
.slide-counter {
  font-size: clamp(10px, 0.9vw, 11px);
  opacity:0.7;
  margin-left: clamp(15px, 2vw, 30px);
  font-weight:400;
  flex-shrink: 0;
  white-space: nowrap;
}
.slide-desc {
  opacity: 0.85;
  font-size: clamp(11px, 1vw, 13px);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================= Frame Decorations (hero + slider) ================= */
.frame-decor { position: absolute; inset: 0; pointer-events: none; z-index: 21; }
.frame-decor .fd-corner { position: absolute; width: 120px; height: 16px; }
.frame-decor .fd-corner::before,
.frame-decor .fd-corner::after { content: ''; position: absolute; background: rgba(255,255,255,0.75); }
.frame-decor .fd-corner::before { left: 0; top: 0; height: 2px; width: 100%; }
.frame-decor .fd-corner::after { left: 0; top: 0; width: 2px; height: 100%; }
.frame-decor .fd-corner.fd-corner-left { top: var(--frame-inset); left: var(--frame-inset); }
.frame-decor .fd-corner.fd-corner-right { top: var(--frame-inset); right: var(--frame-inset); }
.frame-decor .fd-corner.fd-corner-right::after { left: auto; right: 0; }
.frame-decor .fd-corner.fd-corner-right::before { left: auto; right: 0; }

.frame-decor .fd-side { position: absolute; top: 10%; bottom: 10%; width: 1px; background: linear-gradient(rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%); }
.frame-decor .fd-side.fd-side-left { left: var(--frame-inset); }
.frame-decor .fd-side.fd-side-right { right: var(--frame-inset); }

.frame-decor .fd-top-left,
.frame-decor .fd-top-right { position: absolute; top: calc(var(--frame-inset) + 2px); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 6px; }
.frame-decor .fd-top-left { left: calc(var(--frame-inset) + 130px); }
.frame-decor .fd-top-right { right: calc(var(--frame-inset) + 130px); }
.frame-decor .fd-label { opacity: 0.9; }
.frame-decor .fd-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px rgba(255,59,48,0.8); animation: fd-rec 1.2s ease-in-out infinite; }
@keyframes fd-rec { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0.2; } }

/* Player bar inside frame, right side aligned with caption */
.player-bar {
  position: absolute;
  bottom: 6%;
  right: 5.5%;
  display: grid;
  grid-template-columns: minmax(36px, 44px) 1fr minmax(96px, 120px) minmax(36px, 44px) minmax(36px, 44px);
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  column-gap: clamp(8px, 1vw, 14px);
  z-index: 10;
  width: clamp(300px, 48%, 700px);
}

.player-bar > *:last-child { margin-left: 10px; }
.player-btn {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0; /* иконка рисуется через ::before */
  transition: opacity 200ms;
  flex-shrink: 0;
  padding: 0;
  outline: none;
}
.player-btn:hover { opacity: 1; }
.player-btn:focus{ outline: none; box-shadow: none; }

/* Play/Pause icon (pure CSS) */
.player-btn--play::before{
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.player-btn--play.is-playing::before{
  width: 16px; height: 16px;
  border: none;
  background: linear-gradient(to right, #fff 0 40%, transparent 40% 60%, #fff 60% 100%);
}

/* Mute/Unmute icon — minimal speaker with waves */
.player-btn--mute{ position: relative; }
.player-btn--mute::before{
  content: '';
  display: inline-block;
  width: 18px; height: 14px;
  background: #fff;
  /* speaker polygon */
  -webkit-clip-path: polygon(0 35%, 46% 35%, 72% 15%, 72% 85%, 46% 65%, 0 65%);
  clip-path: polygon(0 35%, 46% 35%, 72% 15%, 72% 85%, 46% 65%, 0 65%);
}
.player-btn--mute:not(.is-muted)::after{
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 6px;
  /* одна дуга нормальной толщины */
  background:
    radial-gradient(circle at 0 50%, transparent 60%, #fff 61% 64%, transparent 65%) left center/100% 100% no-repeat;
  transform: translateY(1px);
}
.player-btn--mute.is-muted::after{ content: none; }
.player-btn--fs::before{
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  box-sizing: content-box;
  background:
    linear-gradient(#fff 0 0) top left/8px 2px no-repeat,
    linear-gradient(#fff 0 0) top left/2px 8px no-repeat,
    linear-gradient(#fff 0 0) top right/8px 2px no-repeat,
    linear-gradient(#fff 0 0) top right/2px 8px no-repeat,
    linear-gradient(#fff 0 0) bottom left/8px 2px no-repeat,
    linear-gradient(#fff 0 0) bottom left/2px 8px no-repeat,
    linear-gradient(#fff 0 0) bottom right/8px 2px no-repeat,
    linear-gradient(#fff 0 0) bottom right/2px 8px no-repeat;
}
.player-btn--fs.is-on::before{
  /* иконка «свернуть»: уголки чуть ближе к центру */
  background:
    linear-gradient(#fff 0 0) calc(50% - 8px) calc(50% - 8px)/8px 2px no-repeat,
    linear-gradient(#fff 0 0) calc(50% - 8px) calc(50% - 8px)/2px 8px no-repeat,
    linear-gradient(#fff 0 0) calc(50% + 8px) calc(50% - 8px)/8px 2px no-repeat,
    linear-gradient(#fff 0 0) calc(50% + 8px) calc(50% - 8px)/2px 8px no-repeat,
    linear-gradient(#fff 0 0) calc(50% - 8px) calc(50% + 8px)/8px 2px no-repeat,
    linear-gradient(#fff 0 0) calc(50% - 8px) calc(50% + 8px)/2px 8px no-repeat,
    linear-gradient(#fff 0 0) calc(50% + 8px) calc(50% + 8px)/8px 2px no-repeat,
    linear-gradient(#fff 0 0) calc(50% + 8px) calc(50% + 8px)/2px 8px no-repeat;
}

/* Полноэкранный режим: убираем маску и рамку */
.slider-frame:fullscreen{ box-shadow:none; }
.slider-frame:fullscreen::after{ display:none; }
.slider-frame:fullscreen .slider-viewport{
  -webkit-mask-image: none;
  mask-image: none;
  border: none;
  border-radius: 0;
}
.progress {
  height: 2px;
  border-radius: 0;
  background: rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: height 150ms ease;
}
.player-bar:hover .progress { height: 6px; }
.progress-inner {
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  background: var(--accent);
  transition: width 100ms linear;
}
.time {
  font-size: clamp(10px, 1vw, 12px);
  opacity: 0.9;
  text-align: center;
  font-weight: 600;
  background: transparent;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
  min-width: auto;
  white-space: nowrap;
}
.time-wrap{ display:inline-flex; align-items:center; justify-content:flex-end; }
.time.total::before{ content:'/'; display:inline-block; padding: 0 3px; opacity: .65; }
.mute-wrap{ margin-left: 3px; }

/* Volume popup (desktop) */
.mute-wrap{ position: relative; }
.volume-popup{
  position: absolute;
  bottom: 100%;
  right: 0;
  transform: translateY(-8px);
  padding: 8px;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  width: 40px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mute-wrap:hover .volume-popup,
.player-bar.audio-on .volume-popup{
  opacity: 1;
  transform: translateY(-12px);
  pointer-events: auto;
}

.volume{
  --vol: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(#fff 0 0) 0/ var(--vol) 100% no-repeat, rgba(255,255,255,0.25);
  cursor: pointer;
  transform: rotate(-90deg);
}
.volume:focus{ outline: none; }
.volume::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
  margin-top: -4px; /* center on 3px track */
}
.volume::-moz-range-thumb{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
}
.volume::-moz-range-track{ height: 3px; background: rgba(255,255,255,0.25); border: 0; }

/* =============== Additional Sections =============== */
.services-section, .contact-section {
  position: relative;
  min-height: 100vh;
  padding: var(--top-bottom-padding) var(--side-padding);
  display: grid;
  align-items: center;
}
.unified-section{ position:relative; min-height: auto; padding: 200px var(--side-padding); display:grid; align-items: stretch; }
.unified-section::before{ content:''; position:absolute; left:0; right:0; top:0; height:240px; background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); z-index:1; pointer-events:none; }
.unified-section::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:240px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); z-index:1; pointer-events:none; }
.unified-inner{ position:relative; z-index:2; display:block; }
.unified-title{ font-size: clamp(16px, 2vw, 22px); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.unified-title.sm{ font-size: clamp(14px, 1.6vw, 18px); }
.unified-grid{ display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.unified-card{ border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 16px 18px; background: rgba(255,255,255,0.02); transform: translateY(10px); opacity: 0; transition: transform 500ms ease, opacity 500ms ease; display:flex; flex-direction:column; }
.unified-card h3{ margin:0 0 8px 0; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .08em; text-transform: uppercase; }
.unified-card ul{ margin:0; padding-left: 16px; opacity: .9; list-style: none; }
.unified-card ul li{ position: relative; padding-left: 12px; opacity: 0; transform: translateY(6px); }
.unified-card ul li::before{ content: ''; position:absolute; left:0; top: 0.7em; width:6px; height:1px; background: rgba(255,255,255,0.6); }
.unified-card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,0.35); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.unified-card li{ margin:6px 0; }
.reveal.revealed .unified-card{ transform:none; opacity:1; }
.reveal.revealed .unified-card ul li{ animation: azFadeUp 450ms ease forwards; animation-delay: var(--li-delay, 0ms); }

@keyframes azFadeUp { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

/* Slide caption animate in on change */
.anim-in { animation: azCaptionIn 420ms ease both; }
@keyframes azCaptionIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

/* Progress subtle sweep on hover */
.progress::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transform: translateX(-100%); opacity:0; }
.player-bar:hover .progress::after{ animation: azSweep 1200ms ease infinite; opacity:1; }
@keyframes azSweep { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

/* Contact card layout */
.unified-card--contact{ display:grid; grid-template-columns: 64px 1fr; grid-auto-rows: auto; column-gap: 12px; row-gap: 8px; }
.unified-card--contact .uc-media{ width:64px; height:64px; border-radius:8px; background:#222 center/cover no-repeat; border:1px solid rgba(255,255,255,0.2); }
.unified-card--contact .uc-title{ align-self:center; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size: clamp(14px, 1.6vw, 18px); }
.unified-card--contact .uc-lines{ grid-column: 1 / -1; }
.unified-card--contact a{ color: var(--accent); text-decoration: none; border-bottom: none; }
.unified-card--contact a:hover{ opacity: 0.9; }
.unified-card--contact .uc-lines p{ display:flex; align-items:center; gap:8px; margin: 6px 0; }
.uc-ico{ display:inline-block; width:14px; height:14px; background: #fff; opacity: 0.95; flex: 0 0 14px; }
/* Иконка письма */
.uc-ico--mail{ -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 90%, 0 90%, 0 10%, 50% 50%, 100% 10%); clip-path: polygon(0 10%, 100% 10%, 100% 90%, 0 90%, 0 10%, 50% 50%, 100% 10%); }
/* Иконка Telegram (бумажный самолёт) */
.uc-ico--tg{ -webkit-clip-path: polygon(10% 55%, 90% 10%, 70% 90%, 50% 65%, 30% 80%); clip-path: polygon(10% 55%, 90% 10%, 70% 90%, 50% 65%, 30% 80%); }

@media (max-width: 1024px){
  .unified-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  .unified-grid{ grid-template-columns: 1fr; }
}

/* =================== Services Composition (second block) =================== */
.services-composition{ margin: 24px 0 32px; }
.sc-words{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(8px, 1.2vw, 16px);
  line-height: 0.9;
}
.sc-phrased{ display:grid; gap: 8px; }
.sc-line{ display:flex; flex-wrap: wrap; align-items: baseline; gap: clamp(8px, 1.2vw, 14px); }
.sc-phrased .sc-line{ font-size: clamp(22px, 4.2vw, 68px); }
.sc-phrased .sc-word.sc-big{ font-size: 1em; }
.sc-phrased .sc-conj{ font-size: 0.5em; }
.sc-phrased .sc-rest{ white-space: normal; word-break: break-word; font-size: clamp(14px, 2.6vw, 40px); }
.sc-word{
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}
.sc-word.sc-v1{ font-size: clamp(18px, 3.6vw, 56px); color: rgba(255,255,255,0.95); }
.sc-word.sc-v2{ font-size: clamp(16px, 3.0vw, 48px); color: rgba(255,255,255,0.88); }
.sc-word.sc-v3{ font-size: clamp(14px, 2.6vw, 40px); color: rgba(255,255,255,0.82); }
.sc-word.sc-v4{ font-size: clamp(14px, 2.2vw, 34px); color: rgba(255,255,255,0.75); }

/* Акцентные правила для слов услуг: мягкая ритмика + особый класс для избранных */
.sc-word{ filter: saturate(1) opacity(0.96); }
.sc-word:nth-child(7n+2){ color: rgba(255,255,255,0.88); }
.sc-word:nth-child(7n+4){ color: rgba(255,255,255,0.82); }
.sc-word:nth-child(7n+6){ color: rgba(255,255,255,0.75); }
.sc-word.sc-featured{ color: var(--accent) !important; text-shadow: 0 0 18px rgba(255,107,53,0.12); }
.sc-word.sc-big{ font-size: clamp(22px, 4.2vw, 68px); letter-spacing: 0.08em; }
.sc-conj{ margin: 0 8px; opacity: 0.9; color: rgba(255,255,255,0.75); text-transform: lowercase; }
.sc-rest{ margin-left: 8px; opacity: 0.92; color: rgba(255,255,255,0.90); text-transform: none; letter-spacing: 0.02em; }
.sc-highlight{ color: rgba(255,255,255,0.95); text-decoration: underline dotted rgba(255,255,255,0.4); text-underline-offset: 3px; }

/* Desktop-only decorative figure at the right */
.sc-figure{ display:none; }
@media (min-width: 769px){
  .services-composition{ position: relative; }
  .sc-figure{
    display:block;
    position:absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 200px;
    border-radius: 16px;
    transform: translateY(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
  }
  .sc-figure-ico{ width: 100%; height: 100%; }
  .sc-fig-stroke{ fill:none; stroke: rgba(255,255,255,0.9); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
  .sc-fig-dash{ stroke: rgba(255,255,255,0.5); stroke-width: 4; stroke-dasharray: 6 10; animation: scDash 5s linear infinite; }
  .sc-fig-rect{ fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.25); stroke-width: 2; }
  .sc-fig-rect--accent{ fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,0.25)); }
  @keyframes scDash { to { stroke-dashoffset: -180; } }
}

@media (max-width: 768px){
  .services-composition{ margin: 18px 0 22px; }
  .sc-words{ gap: 8px 10px; line-height: 1.05; }
  /* Разрешаем перенос внутри длинных наименований услуг */
  .sc-word{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  /* Базовые мобильные размеры как раньше */
  .sc-word.sc-v1{ font-size: clamp(16px, 6.2vw, 34px); }
  .sc-word.sc-v2{ font-size: clamp(14px, 5.4vw, 30px); }
  .sc-word.sc-v3{ font-size: clamp(12px, 4.8vw, 26px); }
  .sc-word.sc-v4{ font-size: clamp(12px, 4.2vw, 22px); }
  /* Для первой строки: МОНТАЖ и СЪЕМКА — одинакового размера, как у sc-v1 */
  .sc-words .sc-line:first-child .sc-word.sc-v1,
  .sc-words .sc-line:first-child .sc-word.sc-v2{ font-size: clamp(16px, 6.2vw, 34px); }
  /* Союз "и" — маленький, но не слишком */
  .sc-phrased .sc-conj{ font-size: 0.7em; }
}

/* fallback spacing removal for old sections if still present */
.services-section, .contact-section { display:none; }
.services-section::before {
  content: '';
  position: absolute; left:0; right:0; top:0; height: 240px;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  z-index: 1; pointer-events:none;
}
.services-section::after {
  content: '';
  position: absolute; left:0; right:0; bottom:0; height: 240px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  z-index: 1; pointer-events:none;
}
.services-inner { position: relative; z-index: 2; display: grid; gap: 24px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.service-card { border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 16px 18px; background: rgba(255,255,255,0.02); }
.service-card h3 { margin: 0 0 10px 0; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.08em; text-transform: uppercase; }
.service-card ul { margin: 0; padding-left: 16px; opacity: 0.9; }
.service-card li { margin: 6px 0; }

.contact-section::before {
  content: '';
  position: absolute; left:0; right:0; top:0; height: 240px;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  z-index: 1; pointer-events:none;
}
.contact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; }
.contact-visual { position: relative; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; overflow: hidden; min-height: 300px; background: radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,0.06), rgba(255,255,255,0.0)); }
.contact-visual .main-image { position:absolute; inset:0; background:#111 url('') center/cover no-repeat; opacity: 0.5; }
.contact-visual .avatar { position:absolute; bottom: 14px; right: 14px; width: 88px; height: 88px; border-radius: 8px; background:#222 url('') center/cover no-repeat; box-shadow: 0 6px 18px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.2); }
.contact-details h3 { margin: 0 0 12px 0; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.08em; text-transform: uppercase; }
.contact-details a { color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.4); }
.contact-details a:hover { border-bottom-color: #fff; }

/* Sticky caption: кнопка Телеграм появляется только при липкости */
.sticky-caption .tg-link{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; color:#000; text-decoration:none; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  opacity:0; pointer-events:none; background:#fff; border:1px solid rgba(0,0,0,0.2); padding:8px 12px; border-radius:6px;
}
.sticky-caption.is-visible .tg-link{ opacity:1; pointer-events:auto; }

/* Desktop: скрываем кнопку Телеграм в липкой шапке */
/* (правило выше уже скрывает на всех разрешениях) */

/* Spacer sections to allow scroll and demo sticky behavior */
.spacer {
  height: 80vh;
}

/* Editor styles tweaks so backend previews look reasonable */
.wp-admin .caption-title,
.wp-admin .caption-desc {
  letter-spacing: normal;
  text-transform: none;
}


/* Hide mobile-only Telegram button by default (desktop and general) */
.tg-bottom-mobile{ display: none; }

/* ===================== Preloader ===================== */
.az-preloader{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: #0b0b0b; /* совпадает с фоном сайта */
  color: #fff;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.az-preloader.is-hidden{ opacity: 0; pointer-events: none; }
.az-preloader.is-loaded{ display: none; }
.az-preloader__inner{ display: grid; gap: 16px; align-items: center; justify-items: center; }
.az-preloader__spinner{
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent);
  animation: azSpin 900ms linear infinite;
}
.az-preloader__text{ font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; font-size: 14px; }
@keyframes azSpin { to { transform: rotate(360deg); } }

/* ===================== MOBILE ADAPTATION ===================== */
@media (max-width: 768px){
  :root{
    --side-padding: 20px;         /* было больше — делаем 20px по краям */
    --top-bottom-padding: 20px;
    --inner-padding: 12px;
  }

  /* Меньше поля у геро-секции */
  .portfolio-hero{ padding: 0 var(--side-padding); }

  /* Оставляем только правый верхний лейбл (motion / cut) */
  .frame-decor .fd-top-left{ display:none; }

  /* Скрываем декоративный текст в липкой шапке на мобиле */
  .sticky-caption::before{ content: none !important; }
  /* Мобильный split: показываем двухстрочные версии и 12px; слева имя, справа описание */
  .caption-title-text, .caption-desc-text{ display: none; }
  .caption-title-split, .caption-desc-split{ display: inline-grid; grid-auto-rows: auto; line-height: 1.05; }
  .caption-title-split .line1, .caption-desc-split .line1,
  .caption-title-split .line2, .caption-desc-split .line2{ display: block; }

  .caption-bar .caption-title, .caption-bar .caption-desc,
  .sticky-caption .caption-title, .sticky-caption .caption-desc{ font-size: 12px; letter-spacing: 0.06em; white-space: normal; }

  /* Sticky: размещение слева/справа в одну линию */
  .sticky-caption{ flex-wrap: nowrap; gap: 8px; align-items: center; }
  .sticky-caption .caption-title, .sticky-caption .caption-desc{ flex: 1 1 50%; max-width: 50%; }
  .sticky-caption .caption-title{ text-align: left; order: 0; }
  .sticky-caption .caption-desc{ text-align: right; order: 0; width: auto; opacity: 0.95; }

  /* Caption bar в герое: то же размещение слева/справа */
  .caption-bar{ justify-content: space-between; }
  .caption-bar .caption-title, .caption-bar .caption-desc{ flex: 1 1 50%; max-width: 50%; }
  .caption-bar .caption-title{ text-align: left; }
  .caption-bar .caption-desc{ text-align: right; }

  /* Секция слайдера: отключаем фоновый тяжелый слой для экономии ресурсов и уменьшаем отступы */
  .portfolio-slider{ padding: var(--top-bottom-padding) var(--side-padding); }
  .slider-bg{ display:none; }

  /* Рамка только вокруг видео (во viewport), не вокруг подписи */
  .slider-frame{
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: block;
  }
  .slider-frame::after{ display: none; }

  .slider-viewport{
    position: relative;                    /* якорь для панели управления */
    inset: auto;
    height: auto;
    width: 100%;
    aspect-ratio: 9 / 16;                  /* вертикальное видео */
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-size: initial;
    mask-size: initial;
    -webkit-mask-repeat: initial;
    mask-repeat: initial;
    -webkit-mask-position: initial;
    mask-position: initial;
    border: var(--frame-border-width) solid var(--frame-border-color);
    border-radius: var(--frame-radius);
  }
  .slide{ height: auto; }
  .slide video,
  .slide img{
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
  }

  /* Подписи и навигация — под видео */
  .slide-caption{
    position: static;
    left: auto; right: auto; top: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
  }
  .slide-nav{ justify-content: center; gap: 10px; }
  .slide-titleline{ margin: 0 8px; max-width: 70%; }
  .slide-title{
    white-space: normal;                 /* 2 строки */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .slide-desc{
    margin-top: 8px;
    padding-left: 10px;                  /* слева небольшой отступ */
    -webkit-line-clamp: 4;               /* до 4 строк */
    line-clamp: 4;
  }

  /* Панель управления видео — внутри видео, снизу, с отступом 5% */
  .player-bar{
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 5%;
    width: auto;
    margin: 0;
    padding: 0 10px;
    grid-template-columns: 44px 1fr 72px 36px 36px 36px; /* play | progress | time | mute | expand | fs */
    column-gap: 10px;
    z-index: 10;
  }
  .player-bar > *:last-child{ margin-left: 0; }
  .mute-wrap .volume-popup{ display: none !important; }
}

/* Кнопка Телеграм только для мобильной версии: появляется при липкости снизу */
@media (max-width: 768px){
  .tg-bottom-mobile{
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 5px;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    opacity: 0; pointer-events: none; transition: opacity 200ms ease;
  }
  .sticky-caption.is-visible ~ .tg-bottom-mobile{ opacity: 1; pointer-events: auto; }
  .tg-bottom-mobile{ display: block; }
  .sticky-caption .tg-link{ display: none !important; }
}


/* ============== Site Footer (minimal, single-line) ============== */
.site-footer{ background:#000; color:rgba(255,255,255,0.7); }
.site-footer__inner{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:14px var(--side-padding);
  white-space:nowrap; /* одна строка */
}
.site-footer__text{ opacity:0.85; }
.site-footer__link{ color:rgba(255,255,255,0.9); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.site-footer__link:hover{ color:#fff; }
.site-footer__logo{ height:18px; width:auto; display:inline-block; opacity:0.9; filter: invert(1) brightness(1.2) saturate(0.9); }
@media (max-width:480px){ .site-footer__inner{ gap:10px; padding:12px var(--side-padding);} .site-footer__logo{ height:16px; } }