@font-face {
  font-family: 'Neue Kabel';
  src: url('../fonts/NeueKabel-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #1b1a2c;
  color: #bcbcbc;
  font-family: 'Neue Kabel', 'Century Gothic', 'Futura', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/*
  Values from the Figma frame (1512 x 982), where the full photo is placed
  at 1704 x 1094.5. Everything below is expressed as a fraction of that
  photo so text + logo stay locked to the snow on every screen.

  --sw  photo width: covers the window (no bars) at Figma's zoom
        (1704 / 982 = 1.7352 x height), capped at 250vw on narrow phones so
        all five members stay in frame.
  --sh  photo height (photo is 4096 x 2631).
  --ct / --cb  overflow cropped off top / bottom. Figma splits it ~80/20
        (90px / 22px); the top crop is capped at 20% so heads stay in.
*/
.splash {
  --vh: 100vh;
  --sw: min(max(100vw, calc(var(--vh) * 1.7352)), 250vw);
  --sh: calc(var(--sw) * 0.6423);
  --o: max(0px, calc(var(--sh) - var(--vh)));
  --ct: min(calc(var(--o) * 0.804), calc(var(--sh) * 0.2));
  --cb: calc(var(--o) - var(--ct));
  --lw: min(calc(var(--sw) * 0.4325), 86vw);

  position: relative;
  height: var(--vh);
  overflow: hidden;
  /* Only visible on tall phones: continues the snow below the photo */
  background: linear-gradient(to bottom, #3a3552 var(--sh), #1b1a2c);
}

@supports (height: 100svh) {
  .splash {
    --vh: 100svh;
  }
}

.splash__stage {
  --x: -50%;

  position: absolute;
  left: 50%;
  bottom: calc(max(0px, var(--vh) - var(--sh)) - var(--cb));
  width: var(--sw);
  height: var(--sh);
  transform: translateX(var(--x));
  background: url('../img/ptx-bkg.jpg') center / 100% 100% no-repeat;
}

.splash__lockup {
  position: absolute;
  left: 50%;
  bottom: max(calc(var(--sh) * 0.058), calc(var(--cb) + 16px));
  width: var(--lw);
  transform: translateX(-50%);
  text-align: center;
}

/* Figma: Neue Kabel Bold 58px on a 737px logo, text top → logo top 86px */
.splash__text {
  font-size: calc(var(--lw) * 0.0787);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 0.283em;
}

.splash__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Portrait: center on the band (they sit at ~46.6% across the photo) */
@media (orientation: portrait) {
  .splash__stage {
    --x: -46.6%;
  }

  .splash__lockup {
    left: 46.6%;
  }
}

/* Tall phones, where the photo is shorter than the screen: soften the
   photo's bottom edge into the snow color that continues below it */
@media (max-aspect-ratio: 6227/10000) {
  .splash__stage::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 12%;
    background: linear-gradient(to bottom, transparent, #3a3552);
    pointer-events: none;
  }
}

/* Short landscape (phones sideways): smaller lockup so it clears the band */
@media (orientation: landscape) and (max-height: 500px) {
  .splash {
    --lw: min(calc(var(--sw) * 0.4325), 60vh);
  }
}