* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color: #1e293b;
  --c1: #fbda61;
  --c2: #ff5acd;
  --c3: #2563eb;
  --gradient: linear-gradient(60deg, var(--c3), var(--c2), var(--c1), var(--c2), var(--c3));
  --hover-offset: 5%;
  --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  margin: 0;
  padding-inline: 1rem;
  padding-top: 60px;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: calc(1rem + 10vmin);
  text-align: center;
  overflow-x: hidden;
  background-color: #ffffff !important;
  color: var(--color);
}

/* Progress Bar */
#progress-bar {
  position: fixed;
  top: 55px;
  left: 0;
  width: 100%;
  height: 8px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  #progress-bar {
    top: 40px;
  }
}
.progress-fill {
  height: 100%;
  background: var(--gradient);
  background-size: 400%;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Intro arrow */
.intro {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  font-size: 0.5em;
  margin-block-start: calc(50vh - 1ex);
}
.intro span {
  display: inline-block;
}
.intro span:first-child {
  transform-origin: right bottom;
  animation: wave 250ms 1s ease 3;
}
.intro span:last-child {
  animation: hover 500ms linear infinite;
}

/* Main animated text blocks */
.box {
  margin-block: 80vh;
}

.text {
  margin-inline: auto;
  padding-block: 0.2em;
  padding-inline: 0.5rem;
  
  /* 🔥 FIXED: Safer max width for mobile */
  max-inline-size: min(14ch, 92%);
  
  /* 🔥 CRITICAL: Use modern, reliable word breaking */
  overflow-wrap: anywhere; /* ← This is the key fix */
  word-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  
  /* Prevent any overflow */
  overflow-x: hidden;
  
  color: var(--color);
  font-weight: 800;
  font-size: clamp(1.3rem, 4vw, 2.1rem); /* slightly smaller */
  transform: scale(0.6);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-bounce-out);
}

/* Animated state */
.text.animate {
  opacity: 1;
  color: transparent;
  background-image: var(--gradient);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: text-pop-huge 0.4s var(--ease-bounce-out) forwards;
}

@keyframes text-pop-huge {
  0% { transform: scale(0.6); }
  50% { transform: scale(2.3); }
  100% { transform: scale(1.8); }
}

@keyframes wave {
  50% { rotate: 10deg; }
}
@keyframes hover {
  from, to { transform: translateY(calc(var(--hover-offset) * -1)); }
  50% { transform: translateY(var(--hover-offset)); }
}

.footer-spacer {
  height: 10vh;
}

.preload {
  position: absolute;
  left: -9999px;
  top: -9999px;
}