/* ============================================================
   Tesla FSD video block
   Used by: tpl/rm_rus/_index16.html  (section#tfsd)
   NOTE: keep this in a separate file. The template engine
   strips any {...} that contains no whitespace, which
   destroys inline CSS/JS placed directly in the template.
   ============================================================ */

#tfsd {
   position: relative;
   overflow: hidden;
   background: #050506;
   padding: 110px 0 100px;
   isolation: isolate;
}
#tfsd * { box-sizing: border-box; }

/* ---------- background layers ---------- */
#tfsd .tfsd-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
}
#tfsd .tfsd-grid-lines {
   position: absolute;
   inset: -2px;
   background-image:
      linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
   background-size: 64px 64px;
   -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
   mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
   animation: tfsdDrift 26s linear infinite;
}
#tfsd .tfsd-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(120px);
   opacity: .45;
}
#tfsd .tfsd-glow--1 {
   width: 640px;
   height: 640px;
   top: -240px;
   left: -180px;
   background: radial-gradient(circle, rgba(53, 97, 228, .5), transparent 65%);
   animation: tfsdFloat 14s ease-in-out infinite;
}
#tfsd .tfsd-glow--2 {
   width: 560px;
   height: 560px;
   bottom: -260px;
   right: -140px;
   background: radial-gradient(circle, rgba(46, 150, 255, .38), transparent 65%);
   animation: tfsdFloat 18s ease-in-out infinite reverse;
}
#tfsd .tfsd-scan {
   position: absolute;
   left: 0;
   right: 0;
   top: -180px;
   height: 180px;
   background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .045), transparent);
   animation: tfsdScan 9s linear infinite;
}
#tfsd .container {
   position: relative;
   z-index: 2;
}

/* ---------- heading ---------- */
#tfsd .tfsd-head {
   text-align: center;
   max-width: 780px;
   margin: 0 auto 58px;
}
#tfsd .tfsd-kicker {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font: 600 12px/1 'Courier New', monospace;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: #8fa9ff;
   padding: 9px 18px;
   border: 1px solid rgba(53, 97, 228, .4);
   border-radius: 40px;
   background: rgba(53, 97, 228, .08);
   margin-bottom: 24px;
}
#tfsd .tfsd-kicker i {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #3561e4;
   box-shadow: 0 0 0 0 rgba(53, 97, 228, .7);
   animation: tfsdPulse 2s infinite;
}
#tfsd .tfsd-title {
   font-size: 52px;
   line-height: 1.12;
   font-weight: 800;
   letter-spacing: -.5px;
   color: #ffffff;
   margin: 0 0 18px;
}
#tfsd .tfsd-title span {
   background: linear-gradient(92deg, #3561e4 0%, #4fd1ff 55%, #8ee9ff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: #4fd1ff;
}
#tfsd .tfsd-sub {
   font-size: 16px;
   line-height: 1.75;
   color: rgba(255, 255, 255, .72);
   margin: 0;
}
#tfsd .tfsd-sub b {
   color: #ffffff;
   font-weight: 700;
}

/* ---------- grid ---------- */
#tfsd .tfsd-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
}
#tfsd .tfsd-card {
   grid-column: span 2;
   position: relative;
}
#tfsd .tfsd-card--hero {
   grid-column: span 4;
}

/* reveal-on-scroll is opt-in: only applied once JS is alive,
   so a script failure can never leave the cards invisible */
#tfsd.tfsd-js .tfsd-card {
   opacity: 0;
   transform: translateY(46px);
   transition:
      opacity .8s cubic-bezier(.2, .7, .3, 1),
      transform .8s cubic-bezier(.2, .7, .3, 1);
}
#tfsd.tfsd-js .tfsd-card.is-in {
   opacity: 1;
   transform: none;
}
#tfsd.tfsd-js .tfsd-card:nth-child(2) { transition-delay: .08s; }
#tfsd.tfsd-js .tfsd-card:nth-child(3) { transition-delay: .16s; }
#tfsd.tfsd-js .tfsd-card:nth-child(4) { transition-delay: .24s; }
#tfsd.tfsd-js .tfsd-card:nth-child(5) { transition-delay: .32s; }

/* ---------- stage ---------- */
#tfsd .tfsd-stage {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   aspect-ratio: 16 / 9;
   background: #0b0b0d;
   border: 1px solid rgba(255, 255, 255, .09);
   box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .95);
   transition:
      border-color .45s ease,
      box-shadow .45s ease,
      transform .55s cubic-bezier(.2, .7, .3, 1);
}
@supports not (aspect-ratio: 16 / 9) {
   #tfsd .tfsd-stage {
      height: 0;
      padding-bottom: 56.25%;
   }
}
#tfsd .tfsd-card--hero .tfsd-stage {
   border-radius: 18px;
}
#tfsd .tfsd-card:hover .tfsd-stage {
   transform: translateY(-6px);
   border-color: rgba(53, 97, 228, .55);
   box-shadow:
      0 34px 70px -28px rgba(0, 0, 0, .95),
      0 0 0 1px rgba(53, 97, 228, .18),
      0 0 46px -6px rgba(53, 97, 228, .35);
}
#tfsd .tfsd-card.is-active:hover .tfsd-stage {
   transform: none;
}

/* ---------- poster ---------- */
#tfsd .tfsd-poster {
   position: absolute;
   inset: 0;
   transition: opacity .5s ease;
}
#tfsd .tfsd-poster:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
      rgba(5, 5, 6, .30) 0%,
      rgba(5, 5, 6, .02) 34%,
      rgba(5, 5, 6, .55) 72%,
      rgba(5, 5, 6, .92) 100%);
}
#tfsd .tfsd-poster img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transform: scale(1.03);
   transition:
      transform 1.1s cubic-bezier(.2, .7, .3, 1),
      filter .6s ease;
}
#tfsd .tfsd-card:hover .tfsd-poster img {
   transform: scale(1.08);
   filter: saturate(1.08) contrast(1.05);
}

#tfsd .tfsd-noise {
   position: absolute;
   inset: 0;
   opacity: .1;
   pointer-events: none;
   background-image: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .16) 0 1px,
      transparent 1px 3px);
}
#tfsd .tfsd-shine {
   position: absolute;
   top: 0;
   bottom: 0;
   left: -60%;
   width: 42%;
   pointer-events: none;
   background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
   transform: skewX(-14deg);
   transition: left .85s cubic-bezier(.2, .7, .3, 1);
}
#tfsd .tfsd-card:hover .tfsd-shine {
   left: 120%;
}

/* ---------- HUD corners ---------- */
#tfsd .tfsd-corner {
   position: absolute;
   width: 26px;
   height: 26px;
   pointer-events: none;
   border: 0 solid rgba(53, 97, 228, .9);
   opacity: 0;
   transition: opacity .4s ease, transform .4s ease;
}
#tfsd .tfsd-corner--tl {
   top: 12px;
   left: 12px;
   border-top-width: 2px;
   border-left-width: 2px;
   transform: translate(6px, 6px);
}
#tfsd .tfsd-corner--tr {
   top: 12px;
   right: 12px;
   border-top-width: 2px;
   border-right-width: 2px;
   transform: translate(-6px, 6px);
}
#tfsd .tfsd-corner--bl {
   bottom: 12px;
   left: 12px;
   border-bottom-width: 2px;
   border-left-width: 2px;
   transform: translate(6px, -6px);
}
#tfsd .tfsd-corner--br {
   bottom: 12px;
   right: 12px;
   border-bottom-width: 2px;
   border-right-width: 2px;
   transform: translate(-6px, -6px);
}
#tfsd .tfsd-card:hover .tfsd-corner {
   opacity: 1;
   transform: none;
}

/* ---------- play button ---------- */
#tfsd .tfsd-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 82px;
   height: 82px;
   padding: 0;
   border-radius: 50%;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, .45);
   background: rgba(10, 10, 12, .45);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
   transition:
      background .35s ease,
      border-color .35s ease,
      transform .45s cubic-bezier(.2, .7, .3, 1),
      opacity .35s ease;
}
#tfsd .tfsd-card:not(.tfsd-card--hero) .tfsd-play {
   width: 64px;
   height: 64px;
}
#tfsd .tfsd-play:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(53, 97, 228, .5);
}
#tfsd .tfsd-card:hover .tfsd-play {
   background: #3561e4;
   border-color: #3561e4;
   transform: translate(-50%, -50%) scale(1.08);
   box-shadow: 0 0 44px -4px rgba(53, 97, 228, .75);
}
#tfsd .tfsd-play-ico {
   position: relative;
   width: 0;
   height: 0;
   margin-left: 5px;
   border-style: solid;
   border-width: 11px 0 11px 18px;
   border-color: transparent transparent transparent #fff;
}
#tfsd .tfsd-card:not(.tfsd-card--hero) .tfsd-play-ico {
   border-width: 9px 0 9px 15px;
}
#tfsd .tfsd-play-ring {
   position: absolute;
   inset: -1px;
   border-radius: 50%;
   border: 1px solid rgba(53, 97, 228, .75);
   opacity: 0;
   animation: tfsdRing 2.8s cubic-bezier(.2, .7, .3, 1) infinite;
}
#tfsd .tfsd-play-ring--2 {
   animation-delay: 1.4s;
}

/* ---------- meta + caption ---------- */
#tfsd .tfsd-meta {
   position: absolute;
   top: 16px;
   left: 18px;
   display: flex;
   align-items: center;
   gap: 10px;
   font: 600 11px/1 'Courier New', monospace;
   letter-spacing: 2px;
   color: rgba(255, 255, 255, .9);
   transition: opacity .4s ease;
}
#tfsd .tfsd-num {
   color: #7d9bff;
   font-size: 14px;
   text-shadow: 0 0 14px rgba(53, 97, 228, .7);
}
#tfsd .tfsd-time,
#tfsd .tfsd-tag {
   padding: 5px 9px;
   border-radius: 4px;
   background: rgba(0, 0, 0, .5);
   border: 1px solid rgba(255, 255, 255, .18);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
}
#tfsd .tfsd-tag {
   color: #4fd1ff;
   border-color: rgba(79, 209, 255, .4);
}
#tfsd .tfsd-caption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 22px 24px;
   transition: opacity .4s ease, transform .5s ease;
}
#tfsd .tfsd-caption:before {
   content: "";
   position: absolute;
   left: 24px;
   top: 0;
   width: 34px;
   height: 2px;
   background: linear-gradient(90deg, #3561e4, transparent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
#tfsd .tfsd-card:hover .tfsd-caption:before {
   transform: scaleX(1);
}
#tfsd .tfsd-caption h3 {
   margin: 0 0 6px;
   color: #ffffff;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
   text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}
#tfsd .tfsd-caption p {
   margin: 0;
   color: rgba(255, 255, 255, .78);
   font-size: 14px;
   line-height: 1.6;
   max-width: 520px;
   text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
#tfsd .tfsd-card--hero .tfsd-caption {
   padding: 30px 34px;
}
#tfsd .tfsd-card--hero .tfsd-caption h3 {
   font-size: 30px;
}

/* ---------- loading / playing states ---------- */
#tfsd .tfsd-loader {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 56px;
   height: 56px;
   margin: -28px 0 0 -28px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .16);
   border-top-color: #3561e4;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
}
#tfsd .tfsd-card.is-active .tfsd-loader {
   opacity: 1;
   animation: tfsdSpin .9s linear infinite;
}
#tfsd .tfsd-card.is-playing .tfsd-loader {
   opacity: 0;
   animation: none;
}
#tfsd .tfsd-card.is-active .tfsd-play {
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -50%) scale(.6);
}
#tfsd .tfsd-card.is-active .tfsd-meta,
#tfsd .tfsd-card.is-active .tfsd-caption {
   opacity: 0;
   pointer-events: none;
   transform: translateY(12px);
}
#tfsd .tfsd-card.is-active .tfsd-poster {
   opacity: .3;
}
#tfsd .tfsd-card.is-active .tfsd-stage {
   border-color: rgba(53, 97, 228, .6);
   box-shadow:
      0 0 0 1px rgba(53, 97, 228, .25),
      0 0 60px -10px rgba(53, 97, 228, .5);
}
#tfsd .tfsd-card.is-playing .tfsd-poster,
#tfsd .tfsd-card.is-playing .tfsd-noise,
#tfsd .tfsd-card.is-playing .tfsd-shine {
   opacity: 0;
}
#tfsd .tfsd-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   background: #000;
   z-index: 4;
   opacity: 0;
   transition: opacity .6s ease;
}
#tfsd .tfsd-card.is-playing .tfsd-video {
   opacity: 1;
}

/* ---------- footer row ---------- */
#tfsd .tfsd-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 52px;
}
#tfsd .tfsd-btn {
   position: relative;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 16px 34px;
   border-radius: 6px;
   color: #ffffff;
   font-weight: 600;
   font-size: 15px;
   background: linear-gradient(92deg, #3561e4, #1e3fa8);
   box-shadow: 0 14px 34px -14px rgba(53, 97, 228, .85);
   transition: transform .35s ease, box-shadow .35s ease;
}
#tfsd .tfsd-btn:hover,
#tfsd .tfsd-btn:focus {
   color: #ffffff;
   transform: translateY(-3px);
   box-shadow: 0 20px 42px -14px rgba(53, 97, 228, 1);
}
#tfsd .tfsd-btn:before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: -60%;
   width: 40%;
   background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
   transform: skewX(-16deg);
   transition: left .8s cubic-bezier(.2, .7, .3, 1);
}
#tfsd .tfsd-btn:hover:before {
   left: 130%;
}
#tfsd .tfsd-note {
   font: 400 12px/1.6 'Courier New', monospace;
   letter-spacing: 1px;
   color: rgba(255, 255, 255, .45);
}

/* ---------- keyframes ---------- */
@keyframes tfsdDrift {
   0%   { background-position: 0 0, 0 0; }
   100% { background-position: 64px 64px, 64px 64px; }
}
@keyframes tfsdFloat {
   0%, 100% { transform: translate3d(0, 0, 0); }
   50%      { transform: translate3d(38px, 44px, 0); }
}
@keyframes tfsdScan {
   0%   { top: -180px; }
   100% { top: 100%; }
}
@keyframes tfsdPulse {
   0%   { box-shadow: 0 0 0 0 rgba(53, 97, 228, .65); }
   70%  { box-shadow: 0 0 0 12px rgba(53, 97, 228, 0); }
   100% { box-shadow: 0 0 0 0 rgba(53, 97, 228, 0); }
}
@keyframes tfsdRing {
   0%   { opacity: .9; transform: scale(1); }
   70%  { opacity: 0;  transform: scale(1.75); }
   100% { opacity: 0;  transform: scale(1.75); }
}
@keyframes tfsdSpin {
   100% { transform: rotate(360deg); }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
   #tfsd { padding: 80px 0 70px; }
   #tfsd .tfsd-title { font-size: 38px; }
   #tfsd .tfsd-card--hero .tfsd-caption h3 { font-size: 24px; }
}
@media (max-width: 767px) {
   #tfsd { padding: 64px 0 56px; }
   #tfsd .tfsd-grid {
      grid-template-columns: 1fr;
      gap: 16px;
   }
   #tfsd .tfsd-card,
   #tfsd .tfsd-card--hero { grid-column: span 1; }
   #tfsd .tfsd-title { font-size: 30px; }
   #tfsd .tfsd-head { margin-bottom: 40px; }
   #tfsd .tfsd-caption,
   #tfsd .tfsd-card--hero .tfsd-caption { padding: 18px; }
   #tfsd .tfsd-caption h3,
   #tfsd .tfsd-card--hero .tfsd-caption h3 { font-size: 18px; }
   #tfsd .tfsd-caption p { font-size: 13px; }
   #tfsd .tfsd-play,
   #tfsd .tfsd-card:not(.tfsd-card--hero) .tfsd-play {
      width: 60px;
      height: 60px;
   }
   #tfsd .tfsd-foot {
      justify-content: center;
      text-align: center;
   }
}
@media (prefers-reduced-motion: reduce) {
   #tfsd *,
   #tfsd *:before,
   #tfsd *:after {
      animation: none !important;
      transition-duration: .01ms !important;
   }
   #tfsd.tfsd-js .tfsd-card {
      opacity: 1;
      transform: none;
   }
}

/* ---------- touch devices ----------
   There is no hover on touch, so the HUD accents would never
   show and the :hover state would stick after a tap. Make the
   accents permanent and drop the movement instead. */
@media (hover: none) {
   #tfsd .tfsd-corner {
      opacity: 1;
      transform: none;
   }
   #tfsd .tfsd-caption:before {
      transform: scaleX(1);
   }
   #tfsd .tfsd-play {
      background: #3561e4;
      border-color: #3561e4;
      box-shadow: 0 0 34px -6px rgba(53, 97, 228, .8);
   }
   #tfsd .tfsd-card:hover .tfsd-stage {
      transform: none;
   }
   #tfsd .tfsd-card:hover .tfsd-poster img {
      transform: scale(1.03);
      filter: none;
   }
   #tfsd .tfsd-card:hover .tfsd-shine {
      left: -60%;
   }
}