/* The brand story sits within the Foundation's architectural image. */
.page-index .ed-brand-story {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1964 / 825;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #eee7dc url("../images/sff/official-video-background.png") center bottom / cover no-repeat;
  isolation: isolate;
  overflow: hidden;
}

.page-index .ed-brand-story-display {
  position: relative;
  width: min(65.5%, 1250px);
  z-index: 1;
  border-radius: 21px;
  transform: perspective(1800px) rotateX(-0.7deg) translate3d(0, -12px, 0);
  transform-origin: 50% 100%;
  box-shadow: 0 7px 9px rgba(22, 19, 17, .22),
              0 24px 27px -10px rgba(22, 19, 17, .36),
              0 54px 49px -26px rgba(22, 19, 17, .42),
              0 78px 68px -46px rgba(22, 19, 17, .3);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s cubic-bezier(.2,.7,.2,1);
}

.page-index .ed-brand-story-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 21px;
  background: #080f23;
}

.page-index .ed-brand-story-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  pointer-events: none;
}

.page-index .ed-brand-story .wistia_responsive_padding { margin: 0; }
.page-index .ed-brand-story noscript p { margin: 18px 0 0; text-align: center; }
.page-index .ed-brand-story noscript a { color: #27387e; text-decoration: underline; text-underline-offset: 4px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page-index .ed-brand-story-display:hover {
    transform: perspective(1800px) rotateX(-.4deg) translate3d(0, -16px, 0);
    box-shadow: 0 9px 11px rgba(22, 19, 17, .24),
                0 30px 31px -11px rgba(22, 19, 17, .38),
                0 61px 54px -28px rgba(22, 19, 17, .43),
                0 85px 70px -46px rgba(22, 19, 17, .32);
  }
}

@media (max-width: 900px) {
  .page-index .ed-brand-story {
    aspect-ratio: auto;
    min-height: min(65vw, 590px);
    padding: 48px 0 62px;
  }
  .page-index .ed-brand-story-display { width: min(82%, 730px); }
}

@media (max-width: 600px) {
  .page-index .ed-brand-story {
    min-height: 0;
    padding: 94px 0 126px;
    background-position: 53% bottom;
  }
  .page-index .ed-brand-story-display {
    width: calc(100% - 32px);
    transform: perspective(1200px) rotateX(-.5deg) translate3d(0, -5px, 0);
    border-radius: 15px;
    box-shadow: 0 7px 9px rgba(22, 19, 17, .2),
                0 20px 22px -9px rgba(22, 19, 17, .36),
                0 37px 36px -23px rgba(22, 19, 17, .38);
  }
  .page-index .ed-brand-story-frame { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .ed-brand-story-display { transition: none; }
}