@font-face {
  font-family: "Redaction";
  src: url("./assets/fonts/Redaction10-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #000;
  --social: #8300e0;
  --widget-width: 320px;
  --name-top: 130px;
  --name-size: 27px;
  --photo-width: 300px;
  --photo-overlap: 106px;
  --photo-top: 120px;
  --widget-height: 575px;
  --stats-top: 420px;
  --stats-side: 38px;
  --social-width: 226px;
  --social-size: 22px;
  --social-gap: 35px;
  --social-top-gap: 25px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  background: transparent;
}

body {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.widget {
  position: relative;
  width: var(--widget-width);
  height: var(--widget-height);
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.model-name {
  position: absolute;
  z-index: 5;
  top: var(--name-top);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  color: var(--ink);
  font-family: "Redaction", "Times New Roman", serif;
  font-size: var(--name-size);
  font-style: italic;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.carousel {
  position: absolute;
  z-index: 3;
  top: var(--photo-top);
  left: 0;
  width: 100%;
  height: calc(var(--photo-width) * 1476 / 1490);
  overflow: visible;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.models-track {
  display: flex;
  align-items: flex-end;
  height: 100%;
  will-change: transform;
}

.model-slide {
  position: relative;
  flex: 0 0 var(--photo-width);
  width: var(--photo-width);
  margin-left: calc(var(--photo-overlap) * -1);
  opacity: 1;
  transform: scale(0.985);
  transition: transform 360ms ease;
}

.model-slide:first-child {
  margin-left: 0;
}

.model-slide.is-active {
  z-index: 4;
  transform: scale(1);
}

.model-photo {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.details {
  position: absolute;
  z-index: 6;
  top: var(--stats-top);
  left: 0;
  width: 100%;
  padding: 0 var(--stats-side) max(16px, env(safe-area-inset-bottom));
  pointer-events: auto;
}

.stats-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--social-gap);
  width: min(100%, var(--social-width));
  margin: var(--social-top-gap) auto 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-size);
  height: var(--social-size);
}

.social-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (min-width: 700px) {
  .widget {
    margin: 0 auto;
  }
}