:root {
  --red: #C8102E;
  --red-dark: #a20d25;
  --black: #111111;
  --white: #FFFFFF;
  --gray: #6B6B6B;
  --background: #F7F7F7;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--black);
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Corner decoration ---------- */

.corner-stripes {
  position: fixed;
  width: clamp(90px, 12vw, 170px);
  height: clamp(90px, 12vw, 170px);
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--red) 0px,
    var(--red) 10px,
    transparent 10px,
    transparent 22px
  );
  opacity: 0.9;
}

.corner-stripes--tl {
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(135deg, #000 45%, transparent 75%);
  mask-image: linear-gradient(135deg, #000 45%, transparent 75%);
}

.corner-stripes--br {
  bottom: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(-45deg, #000 45%, transparent 75%);
  mask-image: linear-gradient(-45deg, #000 45%, transparent 75%);
}

/* ---------- Layout ---------- */

.wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 6vw, 64px) clamp(20px, 6vw, 48px);
  gap: clamp(20px, 3.5vw, 34px);
}

.illustration-frame {
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px);
  animation: rise-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.05s;
}

.illustration {
  width: min(760px, 90vw);
  height: auto;
  display: block;
  animation: float-worker 6s ease-in-out infinite;
  animation-delay: 1s;
}

.heading {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  color: var(--black);
  opacity: 0;
  transform: translateY(14px);
  animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.55s;
}

.heading::after {
  content: "";
}

.subtext {
  margin: 0;
  max-width: 34ch;
  color: var(--gray);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.85s;
}

/* ---------- Loader ---------- */

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 14px;
  opacity: 0;
  animation: rise-in 0.4s ease-out forwards;
  animation-delay: 1.15s;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--black);
  animation: pulse-dot 1.2s ease-in-out infinite;
}

.dot:nth-child(1) {
  background: var(--red);
  animation-delay: 0s;
}

.dot:nth-child(2) {
  background: var(--black);
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  background: var(--gray);
  animation-delay: 0.4s;
}

/* ---------- Keyframes ---------- */

@keyframes rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-worker {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes pulse-dot {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  40% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .illustration-frame,
  .heading,
  .subtext,
  .loader,
  .illustration,
  .dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Responsive tweaks ---------- */

@media (max-width: 480px) {
  .wrap {
    gap: 18px;
  }

  .illustration {
    width: min(760px, 88vw);
  }

  .subtext {
    max-width: 28ch;
  }
}

@media (min-width: 1440px) {
  .illustration {
    width: min(880px, 55vw);
  }
}