/* /homeold: the old Wix home page (Welcome, Klaus video, awards).
   Desktop positions come from the Wix desktop layout on the 980px stage; mobile sizes are Wix mobile px (--u). */

.ho { display: block; }
.ho strong { font-weight: 700; }

/* ---------- Intro: Welcome + portrait ---------- */
.ho-intro { position: relative; height: 606px; }
.ho-intro-stage { height: 100%; }
.ho-title {
  position: absolute; top: 203px; left: calc(100% * 20 / 980); width: calc(100% * 579 / 980);
  font: 700 62px/69.75px var(--font-body); color: #000; text-align: left;
}
.ho-lead {
  position: absolute; top: 342.5px; left: calc(100% * 20 / 980); width: calc(100% * 579 / 980);
  font: 400 17px/20px var(--font-body); color: #000; text-align: justify;
}
.ho-portrait {
  position: absolute; bottom: 0; left: calc(100% * 599 / 980);
  width: calc(100% * 374 / 980); height: auto; aspect-ratio: 374 / 555; object-fit: cover;
}

/* ---------- Klaus video on the grey band ---------- */
.ho-band { position: relative; height: 798px; background: #fafafa; overflow: hidden; overflow: clip; }
.ho-video { position: absolute; top: 0; left: calc(50% - 840px); width: 1685px; height: 754px; background: #212121; }
.ho-play {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; overflow: hidden;
}
.ho-play picture, .ho-poster { display: block; width: 100%; height: 100%; }
.ho-poster { object-fit: cover; object-position: 50% 50%; }
.ho-play-icon {
  position: absolute; top: 270px; left: 735px; width: 215px; height: 214px;
  opacity: .8; fill: #fff; border-radius: 50%;
}
.ho-play:focus-visible { outline: none; }
.ho-play:focus-visible .ho-play-icon { outline: 3px solid #fff; outline-offset: 2px; opacity: 1; }
/* The player replaces the poster on the part of the box that is on screen, so its controls stay visible. */
.ho-player {
  position: absolute; top: 0; height: 754px;
  left: max(0px, calc(50% - 840px)); width: calc(min(100%, 50% + 845px) - max(0px, 50% - 840px));
  background: #000; object-fit: cover; object-view-box: inset(10% 0 10% 0);
}

/* ---------- Awards + Klaus text ---------- */
.ho-awards { position: relative; height: 343px; background: #fff; }
.ho-awards-stage { height: 100%; }
.ho-logo { position: absolute; }
.ho-logo img { width: 100%; height: 100%; object-fit: cover; }
.ho-logo-oscars { top: 36px; left: 45px; width: 146px; height: 44px; }
.ho-logo-bafta { top: 38px; left: 226px; width: 145px; height: 54px; }
.ho-logo-goya { top: 31px; left: 411px; width: 125px; height: 68px; }
.ho-logo-annie { top: 31px; left: 590px; width: 135px; height: 68px; }
.ho-klaus { position: absolute; top: 141px; left: 45px; width: 579px; color: #000; text-align: left; }
.ho-klaus-title { font: 400 37px/41.625px var(--font-body); }
.ho-klaus-text { margin-top: 12.3px; font: 400 20px/24px var(--font-body); }

/* ---------- Wix entrance fade (motion-fadeIn) ---------- */
@keyframes ho-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .fx { animation: ho-fade 800ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards; }
  .ho-logo.fx { animation-duration: 1200ms; }
  .fx.fx-wait { animation: none; opacity: 0; }
}

/* ---------- Mobile: the Wix 320px layout, scaled ---------- */
@media (max-width: 767px) {
  /* The 320-unit column is centred: --u stops growing at 480px, so between 481 and 767px the layout
     would otherwise sit on the left with the header centred above it. Up to 480px nothing changes. */
  .ho-intro { height: calc(573 * var(--u)); }
  .ho-intro-stage { width: calc(320 * var(--u)); }
  .ho-title {
    top: calc(24 * var(--u)); left: calc(10 * var(--u)); width: calc(300 * var(--u));
    font-size: calc(45 * var(--u)); line-height: calc(50.625 * var(--u));
  }
  .ho-lead {
    top: calc(96.6 * var(--u)); left: calc(10 * var(--u)); width: calc(300 * var(--u));
    font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u));
  }
  .ho-portrait {
    bottom: auto; top: calc(167 * var(--u)); left: calc(49 * var(--u));
    width: calc(267 * var(--u)); height: calc(396 * var(--u)); aspect-ratio: auto;
  }

  /* Grey band with the logos, the video box overlapping its foot, then the Klaus text. */
  .ho-film { position: relative; height: calc(489 * var(--u)); }
  .ho-band { position: absolute; top: 0; left: 0; right: 0; height: calc(172 * var(--u)); overflow: visible; }
  .ho-video {
    top: calc(136 * var(--u)); left: calc(50% - 163 * var(--u));
    width: calc(320 * var(--u)); height: calc(192 * var(--u)); background: #000;
  }
  .ho-play-icon {
    top: calc(68 * var(--u)); left: calc(131 * var(--u));
    width: calc(57 * var(--u)); height: calc(56 * var(--u));
  }
  .ho-player {
    top: calc(136 * var(--u)); left: calc(50% - 163 * var(--u));
    width: calc(320 * var(--u)); height: calc(192 * var(--u)); object-view-box: none;
  }
  .ho-awards, .ho-awards-stage { position: static; height: auto; width: auto; background: none; }
  .ho-logo { z-index: 1; }
  .ho-logo-oscars { top: calc(37 * var(--u)); left: calc(50% - 133 * var(--u)); width: calc(100 * var(--u)); height: calc(30 * var(--u)); }
  .ho-logo-annie { top: calc(84 * var(--u)); left: calc(50% - 128 * var(--u)); width: calc(90 * var(--u)); height: calc(45 * var(--u)); }
  .ho-logo-bafta { top: calc(37 * var(--u)); left: calc(50% + 24 * var(--u)); width: calc(100 * var(--u)); height: calc(37 * var(--u)); }
  .ho-logo-goya { top: calc(80 * var(--u)); left: calc(50% + 29 * var(--u)); width: calc(90 * var(--u)); height: calc(49 * var(--u)); }
  .ho-klaus { top: calc(344.6 * var(--u)); left: calc(50% - 140 * var(--u)); width: calc(280 * var(--u)); text-align: justify; }
  .ho-klaus-title { font-size: calc(20 * var(--u)); line-height: calc(22.5 * var(--u)); }
  .ho-klaus-text { margin-top: calc(9 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
}

/* player waiting for its first frame: invisible over the poster */
.ho-player.is-loading { opacity: 0; }