/* MODTAC Store R9.4.1.8.20 — animated hero brand panel
   Scope: only the right-side hero panel media area. Existing copy remains untouched. */
.hero-panel.hero-panel-motion{
  display:grid !important;
  align-content:start;
  position:relative;
  overflow:hidden;
  border-radius:30px !important;
  border-color:rgba(214,177,90,.30) !important;
  background:
    radial-gradient(120% 85% at 50% 0%,rgba(214,177,90,.055),transparent 62%),
    linear-gradient(180deg,rgba(17,21,18,.965),rgba(9,12,10,.985)) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 40px rgba(214,177,90,.025);
}

.hero-panel.hero-panel-motion::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
  box-shadow:
    inset 0 0 28px rgba(8,11,9,.18),
    inset 0 0 70px rgba(8,11,9,.10);
}

.hero-panel-motion .hero-panel-media{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  isolation:isolate;
  border-radius:24px 24px 18px 18px;
  margin:0 0 18px;
  background:#090c0a;
  box-shadow:inset 0 0 44px rgba(0,0,0,.45);
}

.hero-panel-motion .hero-panel-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center 40%;
  transform:translateY(-10px) scale(.965);
  transform-origin:center;
  filter:contrast(1.035) saturate(1.035) brightness(.98);
  -webkit-mask-image:none;
  mask-image:none;
}

.hero-panel-motion .hero-panel-media-vignette{
  position:absolute;
  inset:-1px;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(8,11,9,.12) 0%,transparent 12%,transparent 84%,rgba(8,11,9,.18) 100%),
    linear-gradient(90deg,rgba(8,11,9,.44) 0%,transparent 10%,transparent 90%,rgba(8,11,9,.44) 100%),
    radial-gradient(ellipse 94% 92% at 50% 47%,transparent 68%,rgba(8,11,9,.08) 84%,rgba(8,11,9,.20) 100%);
  box-shadow:inset 0 0 34px rgba(8,11,9,.38);
}

.hero-panel-motion > small,
.hero-panel-motion > b,
.hero-panel-motion > div:not(.hero-panel-media){
  position:relative;
  z-index:4;
}

/* Keep the animation visible on tablet and phone instead of dropping the right panel. */
@media (max-width: 991px){
  .hero-grid .hero-panel.hero-panel-motion{
    display:grid !important;
    width:100% !important;
    max-width:680px;
    justify-self:stretch;
    margin:22px auto 0 !important;
    border-radius:24px !important;
  }

  .hero-panel-motion .hero-panel-media{
    width:100%;
    aspect-ratio:16 / 9;
    margin-bottom:16px;
    border-radius:20px 20px 15px 15px;
  }
}

@media (max-width: 560px){
  .hero-grid .hero-panel.hero-panel-motion{
    display:grid !important;
    width:100% !important;
    max-width:none;
    margin:18px 0 0 !important;
    border-radius:20px !important;
    overflow:hidden;
  }

  .hero-panel-motion .hero-panel-media{
    aspect-ratio:16 / 9;
    border-radius:17px 17px 13px 13px;
    margin-bottom:14px;
  }

  .hero-panel-motion .hero-panel-video{
    object-fit:contain;
    object-position:center 40%;
    transform:translateY(-8px) scale(.965);
  }

  .hero-panel-motion .hero-panel-media-vignette{
    box-shadow:inset 0 0 24px rgba(8,11,9,.34);
  }
}