/* =========================================================
   Left illustration: blue background + blob + iPhone mockup
   Sizes are in "em" where 1em = 1 design px, so the whole
   illustration scales down on shorter / narrower screens.
   ========================================================= */

.auth__visual {
  background: #0090e6 url("../img/signup-bg.png") center / cover no-repeat;
}

.illus {
  /* 1em = 1px at full size (512 × 640 box in an 800 × 960 section) */
  font-size: min(1px, calc((100vh - 64px) / 640), calc((50vw - 48px) / 532));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 512em;
  height: 640em;
  transform: translate(-50%, -50%);
}

.illus__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 532em;
  height: 480em;
  transform: translate(-50%, -50%);
}

.illus__blob img {
  position: absolute;
  inset: -12.5% -11.28%;
  width: auto;
  height: auto;
  max-width: none;
}

/* ---------- iPhone ---------- */
.iphone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 313.991em;
  height: 640em;
  transform: translate(-50%, -50%);
}

.iphone__layer { position: absolute; }
.iphone__layer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.iphone__shadow {
  position: absolute;
  inset: 0.12% 0.96% 0.35% 0.96%;
  background: #000;
  border-radius: 68em;
  box-shadow:
    24.038em 24.038em 48.075em -4em rgba(10, 13, 18, 0.2),
    12.019em 12.019em 24.038em -2em rgba(10, 13, 18, 0.08);
}

.iphone__wrap {
  position: absolute;
  inset: 2.23% 5.26% 2.46% 5.02%;
  overflow: hidden;
  background: #fff;
}

.iphone__screen {
  position: absolute;
  inset: 3.94% 0 -3.94% 0;
  overflow: hidden;
}

.iphone__screen img {
  position: absolute;
  top: 0.01%;
  left: 0;
  width: 100%;
  height: 130.79%;
  max-width: none;
}

.iphone__statusbar {
  position: absolute;
  inset: 0 0 95.32% 0;
  overflow: hidden;
  background: #fff;
}

.iphone__status-right { inset: 45.61% 3.91% 24.56% 78.31%; }
.iphone__status-date  { inset: 45.18% 83.5% 25.64% 8.92%; }

.iphone__home {
  position: absolute;
  top: 584.41em;
  left: 0;
  width: 281.69em;
  height: 25.54em;
}

.iphone__home::after {
  content: "";
  position: absolute;
  bottom: 6.01em;
  left: 32.27%;
  right: 32%;
  height: 3.756em;
  border-radius: 100em;
  background: #000;
}

.iphone__frame {
  position: absolute;
  inset: 0 0 0.23% 0;
}

.iphone__buttons   { inset: 15.85% 0.15% 60.14% 0; }
.iphone__surround  { inset: 0 0.86% 0 0.71%; }
.iphone__highlight { inset: 0.12% 1.09% 0.12% 0.94%; }
.iphone__bg        { inset: 0.58% 2.04% 0.58% 1.89%; }
.iphone__camera    { inset: 2.8% 38.15% 95.34% 58.07%; }
.iphone__speaker   { inset: 3.38% 44.29% 95.92% 44.14%; }

.iphone__antenna {
  position: absolute;
  background: #414141;
}
.iphone__antenna:nth-of-type(1) { inset: 0 20.45% 99.42% 78.13%; }
.iphone__antenna:nth-of-type(2) { inset: 10.02% 0.86% 89.28% 97.96%; }
.iphone__antenna:nth-of-type(3) { inset: 10.02% 98.11% 89.28% 0.71%; }
.iphone__antenna:nth-of-type(4) { inset: 89.28% 98.11% 10.02% 0.71%; }
.iphone__antenna:nth-of-type(5) { inset: 89.28% 0.86% 10.02% 97.96%; }
.iphone__antenna:nth-of-type(6) { inset: 99.42% 78.28% 0 20.3%; }