@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital@0;1&display=swap");

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.hidden {
  display: none;
}

/* KEYFRAME DEFINITIONS */
/* Defines all animations used throughout the page */

/* Fades and slides an element up from below */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Creates a subtle pulsing effect for interactive elements */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Slowly pans the background pattern for a dynamic feel */
@keyframes backgroundPan {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

/* Glow animation for the progress circle */
@keyframes pulse-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Animation for file icon display */
@keyframes fileDisplayEnter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stepper Animations */
@keyframes stepper-circle-modern {
  0% {
    transform: scale(0.5) translateY(10px);
    opacity: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
  }

  60% {
    transform: scale(1.15) translateY(-5px);
    opacity: 0.7;
    box-shadow: 0 6px 12px rgba(50, 50, 93, 0.15), 0 3px 7px rgba(0, 0, 0, 0.08);
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    box-shadow: 0 4px 8px rgba(50, 50, 93, 0.1), 0 2px 5px rgba(0, 0, 0, 0.07);
  }
}

@keyframes stepper-line-modern {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes stepper-icon-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  70% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* GENERAL PAGE & SECTION ANIMATIONS */

/* Applies the background pan animation to the hero patterns */
[class*="bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern"]
{
  background-size: 250% 250%;
  /* Larger size for smooth panning */
  animation: backgroundPan 45s linear infinite alternate;
}

/* Staggered animation for the content inside each step section */
section[id^="step"] > .relative {
  animation-fill-mode: backwards;
}

section:not(.hidden) h1 {
  animation: fadeInUp 0.8s ease-out 0.2s;
  animation-fill-mode: backwards;
}

section:not(.hidden) p.mb-8 {
  animation: fadeInUp 0.8s ease-out 0.4s;
  animation-fill-mode: backwards;
}

section:not(.hidden) .bg-white {
  animation: fadeInUp 0.8s ease-out 0.6s;
  animation-fill-mode: backwards;
}

.animate-slide-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* INTERACTIVE ELEMENT ANIMATIONS */
/* Base state for inputs and selects, defining the transition properties */
input[type="text"],
select {
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* Focused state for inputs and selects */
input[type="text"]:focus,
select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Smooth transition and lift effect for buttons on hover */
button[id$="Submit"] {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

button[id$="Submit"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.5);
}

button[id$="Submit"]:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -4px rgba(59, 130, 246, 0.4);
}

/* DRAG & DROP AND FILE UPLOAD ANIMATIONS */

#dropzone {
  transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out,
    background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Animate the icon inside the dropzone on hover */
#dropzone:hover #file-container svg,
#dropzone:hover #file-icon svg {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.drag-hover {
  transform: scale(1.02);
  border-color: #3b82f6 !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  background-color: #eff6ff !important;
}

.drop-pulse {
  animation: pulse 0.3s ease-in-out;
}

.file-display-enter {
  animation: fileDisplayEnter 0.5s ease-out;
}

/* Responsive and overflow-safe Dropzone styles */
/* Ensure the drag & drop box never lets content spill outside on small screens */
#dropzone {
  /* Allow the box to grow with its content; keep a comfortable minimum height */
  height: auto !important;
  min-height: 16rem; /* ~h-64 */
  width: 100%;
  max-width: 100%;
  padding: 1.25rem; /* provide breathing room inside the dashed border */
  box-sizing: border-box;
}

/* Any text inside the dropzone should wrap nicely even without spaces */
#dropzone p {
  white-space: normal;
  overflow-wrap: anywhere; /* allows breaking long tokens like ".pdf,.docx" */
  word-break: break-word;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* File name display should also never overflow on small screens */
#file-name-display {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  padding: 0 8px;
}

/* Make the inner containers respect the box width */
#dropzone #file-container,
#dropzone #file-icon {
  max-width: 100%;
}

/* Subtle size tweaks for very small devices */
@media (max-width: 480px) {
  #dropzone {
    padding: 1rem;
    border-radius: 24px !important;
  }
  #dropzone svg {
    width: 28px;
    height: 28px;
  }
  #dropzone p {
    font-size: 12px;
  }
}

/* OVERLAY & PROGRESS BAR STYLES */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e9eef5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

#overlay-content {
  width: 80%;
  max-width: 500px;
}

.dotlottie-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-container {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-circle {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  z-index: 2;
}

.progress-ring {
  position: absolute;
  transform: rotate(-90deg);
}

.progress-ring__background {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 10;
}

.progress-ring__circle {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 408.407;
  /* Circumference = 2 * π * 65 */
  stroke-dashoffset: 408.407;
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.progress-value {
  position: relative;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(59, 130, 246, 0) 70%
  );
  filter: blur(15px);
  z-index: 1;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Dark Mode Adjustments */
.dark .progress-ring__background {
  stroke: #374151;
}

.dark .progress-value {
  color: #f3f4f6;
}

.dark .upload-status-message,
.dark .next-file-message {
  color: #f3f4f6;
}

/* STEPPER ANIMATIONS */

/* Assign delays to each stepper item */
ol li:nth-child(1) {
  --stepper-delay: 1;
}

ol li:nth-child(2) {
  --stepper-delay: 2;
}

ol li:nth-child(3) {
  --stepper-delay: 3;
}

ol li:nth-child(4) {
  --stepper-delay: 4;
}

ol li:nth-child(5) {
  --stepper-delay: 5;
}

/* Animation to stepper elements when section is visible */
section:not(.hidden) ol li > div {
  animation: stepper-circle-modern 0.7s cubic-bezier(0.34, 1.56, 0.64, 1)
    forwards;
  animation-delay: calc(var(--stepper-delay, 0) * 0.25s);
  position: relative;
  z-index: 1;
}

section:not(.hidden) ol li > div svg {
  animation: stepper-icon-pop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)
    forwards;
  animation-delay: calc(var(--stepper-delay, 0) * 0.25s + 0.15s);
  transform: scale(0.6);
  opacity: 0;
}

section:not(.hidden) ol li:after {
  animation: stepper-line-modern 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
  animation-delay: calc(var(--stepper-delay, 0) * 0.25s + 0.3s);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
}

/* Initial state for elements to be animated */
section:not(.hidden) ol li > div {
  transform: scale(0.5) translateY(10px);
  opacity: 0;
}