/* Блок 3: нарисованная 3D-сцена по мотивам окна Rewind. Слои на разной глубине, цикл 14 с: клавиша, клип в библиотеке, обрезка, ссылка. Только transform и opacity. */
.tour3d { padding: clamp(60px, 6vw, 110px) 0 clamp(50px, 5vw, 90px); overflow: clip; }
.tour3d h2 { font-size: clamp(28px, 2.8vw, 52px); }
.t3-stage { position: relative; width: min(100%, 1280px); aspect-ratio: 1200 / 700; margin-top: clamp(10px, 2vw, 36px); perspective: 2400px; perspective-origin: 50% 35%; --k: 1; }
.t3-cam { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.t3-scene { position: absolute; left: 0; top: 0; width: 1200px; height: 700px; transform-origin: 0 0; transform: scale(var(--k)); transform-style: preserve-3d; }
.t3-scene > * { position: absolute; transform-style: preserve-3d; }
.w3 { left: 40px; top: 20px; width: 1120px; height: 640px; border-radius: 18px; background: #0d0f14; border: 1px solid #2e3441; box-shadow: 0 60px 120px -40px #000, 0 0 80px -20px #7c50f955; overflow: visible; }
.w3 > * { position: absolute; }
.w3-bar { left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #222731; color: #a6adbb; font-size: 14px; }
.w3-bar span { margin-right: auto; } .w3-bar em { font: 600 13px var(--mono); font-style: normal; padding: 5px 10px; border-radius: 8px; border: 1px solid #2e3441; color: #eaedf3; }
.w3-rec { width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; animation: t3pulse 1.6s ease-in-out infinite; }
@keyframes t3pulse { 50% { opacity: .35; } }
.w3-side { left: 0; top: 46px; bottom: 0; width: 64px; border-right: 1px solid #222731; display: grid; align-content: start; justify-items: center; gap: 16px; padding-top: 22px; } .w3-side i { width: 28px; height: 28px; border-radius: 8px; background: #181b22; } .w3-side i:first-child { background: #7c50f955; }
.w3-title { left: 96px; top: 70px; font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.w3-buf { left: 96px; top: 140px; width: 760px; transform: translateZ(30px); } .w3-buf-l { display: block; font-size: 13px; color: #8a92a4; margin-bottom: 8px; letter-spacing: .06em; }
.w3-track { position: relative; height: 16px; border-radius: 8px; background: #181b22; overflow: hidden; border: 1px solid #222731; }
.w3-shim { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #a281ff55, transparent); width: 30%; animation: t3shim 3.6s linear infinite; } @keyframes t3shim { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.w3-seg { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, #7c50f9, #a281ff); opacity: 0; }
.w3-grid { left: 96px; top: 230px; width: 960px; height: 150px; }
.w3-slot { position: absolute; left: 0; top: 0; width: 220px; height: 124px; border-radius: 12px; border: 1px dashed #2e3441; transform-style: preserve-3d; }
.w3-others { position: absolute; left: 240px; top: 0; display: flex; gap: 20px; }
.w3-tile, .w3-new { width: 220px; height: 124px; border-radius: 12px; overflow: hidden; border: 1px solid #2e3441; position: relative; background: #000; } .w3-tile img, .w3-new img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w3-new { position: absolute; inset: -1px; border-color: #a281ffcc; box-shadow: 0 0 40px -6px #7c50f9aa; opacity: 0; }
.w3-chip { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 7px; background: #0b0d12e6; font: 600 13px var(--mono); } .w3-chip b { position: absolute; right: 9px; top: 3px; font-weight: 600; } .w3-chip { width: 52px; height: 24px; } .w3-chip b.b { opacity: 0; }
.w3-zap { position: absolute; left: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 7px; background: #ffb54733; border: 1px solid #ffb54788; }
.w3-key { left: 900px; top: 70px; width: 120px; height: 64px; border-radius: 16px; background: linear-gradient(180deg, #9b72ff, #6a3ee8); box-shadow: 0 22px 40px -10px #7c50f9, inset 0 -6px 0 #3a2299; display: grid; place-items: center; font: 700 26px var(--mono); color: #fff; opacity: 0; } .w3-key span { display: block; }
.w3-trim { left: 96px; top: 400px; width: 960px; height: 230px; border-radius: 16px; background: #12141a; border: 1px solid #a281ff88; box-shadow: 0 40px 80px -30px #000; padding: 20px 24px; opacity: 0; }
.w3-th { font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .w3-dur { position: relative; width: 70px; height: 24px; font: 600 16px var(--mono); color: #cdbcff; } .w3-dur b { position: absolute; right: 0; top: 0; } .w3-dur b.b { opacity: 0; }
.w3-tl { position: absolute; left: 24px; right: 24px; top: 78px; height: 96px; border-radius: 12px; background: #0b0d12; border: 1px solid #222731; overflow: hidden; }
.w3-wave { position: absolute; inset: 14px 0; background: repeating-linear-gradient(90deg, #a281ff 0 3px, transparent 3px 9px); opacity: .55; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.w3-dl, .w3-dr { position: absolute; top: 0; bottom: 0; background: #0a0b0ed0; width: 190px; } .w3-dl { left: 0; transform-origin: left; transform: scaleX(0); } .w3-dr { right: 0; width: 290px; transform-origin: right; transform: scaleX(0); }
.w3-hl, .w3-hr { position: absolute; top: 0; bottom: 0; width: 8px; background: #fff; border-radius: 4px; } .w3-hl { left: 0; } .w3-hr { right: 0; }
.w3-share { left: 560px; top: 300px; width: 560px; height: 210px; border-radius: 16px; background: #12141a; border: 1px solid #a281ffcc; box-shadow: 0 40px 90px -30px #7c50f9aa; padding: 20px 24px; opacity: 0; }
.w3-link { position: absolute; left: 24px; right: 24px; top: 66px; height: 50px; border-radius: 12px; background: #0b0d12; border: 1px solid #2e3441; display: flex; align-items: center; padding: 0 16px; font: 500 16px var(--mono); color: #cdbcff; }
.w3-btn { position: absolute; left: 24px; top: 136px; width: 220px; height: 48px; border-radius: 12px; background: #7c50f9; font-weight: 600; font-size: 17px; } .w3-btn b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; } .w3-btn b.b { opacity: 0; }
.t3-l { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 12px; border-radius: 99px; background: #0b0d12ee; border: 1px solid #a281ff99; font-size: 19px; font-weight: 600; opacity: 0; white-space: nowrap; box-shadow: 0 20px 50px -20px #000; transform: translateZ(210px); }
.t3-l i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #7c50f9; font-style: normal; font-size: 15px; }
.t3-l.l1 { left: 700px; top: 20px; } .t3-l.l2 { left: 200px; top: 190px; } .t3-l.l3 { left: 760px; top: 372px; } .t3-l.l4 { left: 700px; top: 530px; }
/* цикл 14 с (1 % = 0,14 с) */
.t3-on .w3-key { animation: k3key 14s ease-in-out infinite; } .t3-on .w3-seg { animation: k3seg 14s linear infinite; } .t3-on .w3-new { animation: k3new 14s var(--ease) infinite; }
.t3-on .w3-others { animation: k3oth 14s ease infinite; } .t3-on .w3-trim { animation: k3trim 14s var(--ease) infinite; } .t3-on .w3-dl { animation: k3dl 14s var(--ease) infinite; } .t3-on .w3-dr { animation: k3dr 14s var(--ease) infinite; }
.t3-on .w3-hl { animation: k3hl 14s var(--ease) infinite; } .t3-on .w3-hr { animation: k3hr 14s var(--ease) infinite; } .t3-on .w3-dur b.a, .t3-on .w3-chip b.a { animation: k3a 14s step-end infinite; } .t3-on .w3-dur b.b, .t3-on .w3-chip b.b { animation: k3b 14s step-end infinite; }
.t3-on .w3-share { animation: k3share 14s var(--ease) infinite; } .t3-on .w3-btn b.a { animation: k3ca 14s step-end infinite; } .t3-on .w3-btn b.b { animation: k3cb 14s step-end infinite; }
.t3-on .l1 { animation: k3l1 14s ease infinite; } .t3-on .l2 { animation: k3l2 14s ease infinite; } .t3-on .l3 { animation: k3l3 14s ease infinite; } .t3-on .l4 { animation: k3l4 14s ease infinite; }
@keyframes k3key { 0%, 9% { opacity: 0; transform: translate3d(0, 20px, 60px); } 14% { opacity: 1; transform: translate3d(0, 0, 150px); } 17% { transform: translate3d(0, 6px, 110px) scale(.93); } 20% { transform: translate3d(0, 0, 150px); } 30% { opacity: 1; } 34%, 100% { opacity: 0; transform: translate3d(0, -10px, 150px); } }
@keyframes k3seg { 0%, 15% { opacity: 0; } 18%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes k3new { 0%, 20% { opacity: 0; transform: translate3d(520px, -120px, 120px) scale(.5); } 29% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes k3oth { 0%, 42% { opacity: 1; } 47%, 70% { opacity: .25; } 75%, 100% { opacity: 1; } }
@keyframes k3trim { 0%, 42% { opacity: 0; transform: translate3d(0, 40px, 90px); } 47% { opacity: 1; transform: translate3d(0, 0, 90px); } 70% { opacity: 1; transform: translate3d(0, 0, 90px); } 74%, 100% { opacity: 0; transform: translate3d(0, -24px, 90px); } }
@keyframes k3dl { 0%, 49% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } } @keyframes k3dr { 0%, 49% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes k3hl { 0%, 49% { transform: translateX(0); } 62%, 100% { transform: translateX(190px); } } @keyframes k3hr { 0%, 49% { transform: translateX(0); } 62%, 100% { transform: translateX(-290px); } }
@keyframes k3a { 0% { opacity: 1; } 62% { opacity: 0; } 100% { opacity: 0; } } @keyframes k3b { 0% { opacity: 0; } 62% { opacity: 1; } 100% { opacity: 1; } }
@keyframes k3share { 0%, 73% { opacity: 0; transform: translate3d(30px, 30px, 150px); } 78% { opacity: 1; transform: translate3d(0, 0, 150px); } 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes k3ca { 0%, 86% { opacity: 1; } 87%, 100% { opacity: 0; } } @keyframes k3cb { 0%, 86% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes k3l1 { 0%, 9% { opacity: 0; transform: translate3d(0, 10px, 210px); } 13%, 27% { opacity: 1; transform: translate3d(0, 0, 210px); } 31%, 100% { opacity: 0; } }
@keyframes k3l2 { 0%, 22% { opacity: 0; transform: translate3d(0, 10px, 210px); } 27%, 40% { opacity: 1; transform: translate3d(0, 0, 210px); } 44%, 100% { opacity: 0; } }
@keyframes k3l3 { 0%, 44% { opacity: 0; transform: translate3d(0, 10px, 210px); } 49%, 68% { opacity: 1; transform: translate3d(0, 0, 210px); } 72%, 100% { opacity: 0; } }
@keyframes k3l4 { 0%, 75% { opacity: 0; transform: translate3d(0, 10px, 210px); } 80%, 94% { opacity: 1; transform: translate3d(0, 0, 210px); } 97%, 100% { opacity: 0; } }
/* без движения: показываем итоговый кадр */
.t3-still .w3-new { opacity: 1; } .t3-still .w3-share { opacity: 1; transform: translateZ(150px); } .t3-still .w3-btn b.a, .t3-still .w3-chip b.a { opacity: 0; } .t3-still .w3-btn b.b, .t3-still .w3-chip b.b { opacity: 1; } .t3-still .l4 { opacity: 1; transform: translateZ(210px); }
@media (max-width: 700px) { .t3-l { font-size: 22px; } }
.w3-row2 { position: absolute; left: 0; top: 160px; display: flex; gap: 20px; } .w3-row2 i { display: block; width: 220px; height: 124px; border-radius: 12px; border: 1px solid #222731; background: linear-gradient(160deg, #181b22, #101217); opacity: .7; }

.tour3d { padding: clamp(30px, 3vw, 56px) 0 clamp(20px, 2vw, 40px); }
.t3-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr); grid-template-areas: "h h" "s l"; gap: clamp(12px, 1.6vw, 28px) clamp(24px, 4vw, 80px); align-items: center; }
.t3-head { grid-area: h; } .t3-stage { grid-area: s; width: 100%; margin-top: 0; } .t3-steps { grid-area: l; }
.t3-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.t3-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); opacity: .45; }
.t3-steps i { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #7c50f92e; color: #cdbcff; font-style: normal; font-weight: 700; font-size: 15px; }
.t3-steps b { font-size: clamp(16px, 1.2vw, 22px); font-weight: 620; } .t3-steps span { color: var(--t2); font-size: clamp(13px, .95vw, 16px); }
.t3-on ~ .t3-steps, .t3-steps { }
@keyframes k3s1 { 0%, 8% { opacity: .45; } 12%, 28% { opacity: 1; } 32%, 100% { opacity: .45; } }
@keyframes k3s2 { 0%, 24% { opacity: .45; } 28%, 42% { opacity: 1; } 46%, 100% { opacity: .45; } }
@keyframes k3s3 { 0%, 44% { opacity: .45; } 48%, 70% { opacity: 1; } 74%, 100% { opacity: .45; } }
@keyframes k3s4 { 0%, 75% { opacity: .45; } 79%, 94% { opacity: 1; } 97%, 100% { opacity: .45; } }
.t3-grid.t3-play .s1 { animation: k3s1 14s ease infinite; } .t3-grid.t3-play .s2 { animation: k3s2 14s ease infinite; } .t3-grid.t3-play .s3 { animation: k3s3 14s ease infinite; } .t3-grid.t3-play .s4 { animation: k3s4 14s ease infinite; }
.t3-grid.t3-still .t3-steps li { opacity: 1; }
@media (max-width: 900px) { .t3-grid { grid-template-columns: 1fr; grid-template-areas: "h" "s" "l"; } }

/* Подписи вместо списка: одна крупная сменяется вместе с действием */
.t3-steps { display: none; }
.t3-caps { grid-area: l; position: relative; min-height: clamp(150px, 12vw, 240px); }
.t3-cap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.t3-cap b { display: block; font-size: clamp(22px, 1.9vw, 38px); font-weight: 640; letter-spacing: -.02em; line-height: 1.15; }
.t3-cap span { display: block; margin-top: 10px; color: var(--t2); font-size: clamp(15px, 1.15vw, 21px); line-height: 1.5; }
.t3-play .c1 { animation: k3c1 14s ease infinite; } .t3-play .c2 { animation: k3c2 14s ease infinite; } .t3-play .c3 { animation: k3c3 14s ease infinite; } .t3-play .c4 { animation: k3c4 14s ease infinite; }
@keyframes k3c1 { 0%, 5% { opacity: 0; transform: translateY(-46%); } 9%, 26% { opacity: 1; transform: translateY(-50%); } 30%, 100% { opacity: 0; transform: translateY(-54%); } }
@keyframes k3c2 { 0%, 25% { opacity: 0; transform: translateY(-46%); } 30%, 42% { opacity: 1; transform: translateY(-50%); } 46%, 100% { opacity: 0; transform: translateY(-54%); } }
@keyframes k3c3 { 0%, 45% { opacity: 0; transform: translateY(-46%); } 49%, 70% { opacity: 1; transform: translateY(-50%); } 74%, 100% { opacity: 0; transform: translateY(-54%); } }
@keyframes k3c4 { 0%, 76% { opacity: 0; transform: translateY(-46%); } 80%, 94% { opacity: 1; transform: translateY(-50%); } 97%, 100% { opacity: 0; transform: translateY(-54%); } }
.t3-still .t3-cap, .t3-grid.t3-still .t3-cap { opacity: 0; } .t3-grid.t3-still .c4 { opacity: 1; transform: translateY(-50%); }

/* главная мысль справа выделена: акцентная планка и лёгкая фиолетовая подсветка */
.t3-cap { padding: clamp(14px, 1.4vw, 26px) clamp(16px, 1.6vw, 30px); border-left: 3px solid var(--accent-hi); border-radius: 0 16px 16px 0; background: linear-gradient(90deg, #7c50f933, #7c50f90a 70%, transparent); box-shadow: -18px 0 40px -24px #7c50f9; }
.t3-cap b { font-size: clamp(24px, 2.3vw, 46px); color: #fff; }
.t3-cap span { color: #cfc8e6; }

/* подпись иначе: без рамки и планки; номер шага над строкой, заголовок с градиентом, подчёркнутое слово-ключ */
.t3-cap { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.t3-cap::before { content: attr(data-n); display: block; margin-bottom: 14px; font: 650 clamp(13px, .9vw, 16px) var(--mono); letter-spacing: .16em; color: var(--accent-hi); }
.t3-cap b { font-size: clamp(30px, 3vw, 58px); line-height: 1.08; background: linear-gradient(180deg, #fff 30%, #b8a2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t3-cap span { margin-top: 14px; font-size: clamp(16px, 1.25vw, 23px); color: #d6d0ec; max-width: 26em; }