/* SECTION 08 — PERFORMANCE IN MOTION */
.performance-motion{position:relative;isolation:isolate;overflow:hidden;background:#070b08;padding-block:clamp(100px,9vw,150px) 72px}.performance-motion::before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 56% 52%,rgba(54,206,37,.12),transparent 27%),linear-gradient(120deg,#070a08,#0a110c 58%,#050706)}.motion-grid-bg{position:absolute;z-index:-1;inset:0;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 88%,transparent)}
.performance-motion .motion-heading{grid-template-columns:1fr 330px;max-width:1560px}.performance-motion .motion-heading .section-title{font-size:clamp(55px,6.4vw,108px);line-height:.82;letter-spacing:-.035em}.performance-motion .title-line-accent{font-style:normal;color:#42d02b}.performance-motion .motion-heading>p{padding-bottom:7px;max-width:310px;font-size:11px;line-height:1.65;color:#929b94}
.performance-motion .motion-layout{max-width:1560px;grid-template-columns:135px minmax(520px,1.45fr) minmax(330px,.75fr);gap:13px;min-height:610px;margin-top:68px}.performance-motion .motion-menu{border-top:1px solid rgba(255,255,255,.17)}.performance-motion .motion-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:18px 7px;border-bottom:1px solid rgba(255,255,255,.13);text-align:left;text-transform:uppercase;font:700 11px var(--font-display);letter-spacing:.08em;color:#717b74;transition:color .25s,padding .25s,background .25s}.performance-motion .motion-menu button span{font:600 7px var(--font-ui);color:#4b554e}.performance-motion .motion-menu button.active{padding-left:13px;color:#45d42d;background:linear-gradient(90deg,rgba(66,207,42,.09),transparent)}.performance-motion .motion-menu button.active span{color:#45d42d}
.performance-motion .video-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:#0d120f;color:#fff;cursor:pointer}.performance-motion .video-card::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s}.performance-motion .video-card.is-active::after{box-shadow:inset 0 0 0 1px rgba(68,210,44,.78)}.performance-motion .video-card video{position:absolute;z-index:1;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;opacity:0;transition:opacity .4s ease,transform .7s ease}.performance-motion .video-card.is-loaded video{opacity:1}.performance-motion .video-card.is-loaded .media-placeholder{opacity:0}.performance-motion .video-card .media-placeholder{z-index:0;transition:opacity .35s}.performance-motion .video-shade{z-index:2;background:linear-gradient(0deg,rgba(4,7,5,.9),transparent 55%),linear-gradient(90deg,rgba(4,7,5,.25),transparent 45%)}.performance-motion .video-main video{object-fit:cover;object-position:center}.performance-motion .video-vertical video{object-fit:cover;object-position:center 35%}.performance-motion .video-vertical:not(.is-active) video{transform:scale(1.025)}.performance-motion .play{z-index:4;backdrop-filter:blur(5px);transition:opacity .25s,background .25s,color .25s}.performance-motion .video-card.is-loaded.is-playing .play{opacity:0;pointer-events:none}.performance-motion .video-card:focus-visible{outline:2px solid #45d42d;outline-offset:3px}
.performance-motion .video-main{min-height:610px}.performance-motion .video-main .video-meta{z-index:4}.performance-motion .video-main .video-meta h3{font-size:clamp(34px,3.2vw,56px)}.performance-motion .video-grid{grid-column:auto;min-height:610px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:11px}.performance-motion .video-vertical{min-height:295px}.vertical-video-meta{position:absolute;z-index:4;left:13px;right:13px;bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:7px}.vertical-video-meta strong{font:800 17px/.9 var(--font-display);text-transform:uppercase}.vertical-video-meta b{font:700 6px var(--font-ui);letter-spacing:.12em;color:#a0aaa2}
.motion-status{max-width:1560px;margin-top:30px;display:flex;align-items:center;gap:13px;font:700 6px var(--font-ui);letter-spacing:.16em;color:#737d75}.motion-status i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(67,205,42,.45))}.motion-status b{color:#44ce2c}
@media(max-width:1180px){.performance-motion .motion-layout{grid-template-columns:120px 1fr}.performance-motion .video-grid{grid-column:2;min-height:540px}.performance-motion .video-main{min-height:540px}}
@media(max-width:900px){.performance-motion .motion-heading{grid-template-columns:1fr}.performance-motion .motion-heading>p{max-width:560px}.performance-motion .motion-layout{grid-template-columns:1fr}.performance-motion .motion-menu{display:grid;grid-template-columns:repeat(5,minmax(105px,1fr));overflow-x:auto}.performance-motion .motion-menu button{white-space:nowrap}.performance-motion .video-main{min-height:500px}.performance-motion .video-grid{grid-column:auto;min-height:720px}.performance-motion .video-vertical{min-height:350px}}
@media(max-width:640px){.performance-motion .motion-heading .section-title{font-size:clamp(54px,15vw,72px)}.performance-motion .motion-layout{margin-top:45px}.performance-motion .motion-menu{grid-template-columns:repeat(5,112px)}.performance-motion .video-main{min-height:300px;aspect-ratio:16/9}.performance-motion .video-grid{display:grid;grid-template-columns:1fr 1fr;min-height:auto}.performance-motion .video-vertical{min-height:0;aspect-ratio:9/16}.performance-motion .video-main .video-meta h3{font-size:30px}.vertical-video-meta strong{font-size:14px}.motion-status span{display:none}}
@media(min-width:901px){.performance-motion .motion-layout{grid-template-columns:135px minmax(520px,1.6fr) minmax(300px,.6fr);align-items:center}.performance-motion .video-main{min-height:0;aspect-ratio:16/9}.performance-motion .video-grid{min-height:600px}}
.performance-motion .video-shade,.performance-motion .video-meta,.performance-motion .vertical-video-meta{pointer-events:none}
.performance-motion .vertical-video-meta{justify-content:flex-end}
.performance-motion .play{display:grid;place-items:center;pointer-events:none}

/* Mobile navigation: preserve horizontal swipe without exposing the native scrollbar. */
@media(max-width:900px){
  .performance-motion .motion-menu{
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .performance-motion .motion-menu::-webkit-scrollbar{display:none;width:0;height:0}
}
@media(max-width:640px){
  .performance-motion .motion-menu{display:none}
}
