:root {
  overflow-x: hidden;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.font-primary {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.font-secondary {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 87.5;
}


.font-tertiary {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-fancy {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: 500;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: all 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
  /* Green glow */
}

.bg-accent {
  background-color: #000080;
}

/* ═══════════════════════════════════════════════════════════
   DIDC — 3D Marquee
   ═══════════════════════════════════════════════════════════ */

.marquee-3d-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}

.marquee-3d-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: 110%;
  height: 140%;
  transform: rotateX(20deg) rotateZ(-10deg) translateY(-15%);
  transform-style: preserve-3d;
}

@media (max-width: 767px) {
  .marquee-3d-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 300%;
    height: 330%;
    transform: rotateX(5deg) rotateZ(-2deg) translate(25%, -10%);
    opacity: 0.85 !important;
    /* improved visibility on mobile */
  }
}

.marquee-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 767px) {
  .marquee-column.marquee-scroll-up-slow {
    display: none !important;
  }

  .marquee-column.marquee-scroll-up,
  .marquee-column.marquee-scroll-down {
    display: flex !important;
    width: 100% !important;
  }
}

.marquee-column-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .marquee-column-inner {
    gap: 0.4rem;
  }
}

.marquee-img-wrapper {
  position: relative;
  flex-shrink: 0;
}

.marquee-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0.5rem;
  user-select: none;
  background-color: #1a1a2e;
}

/* Scroll animations */
.marquee-scroll-up .marquee-column-inner {
  animation: marquee-up 20s linear infinite;
}

.marquee-scroll-down .marquee-column-inner {
  animation: marquee-down 25s linear infinite;
}

.marquee-scroll-up-slow .marquee-column-inner {
  animation: marquee-up 30s linear infinite;
}

@keyframes marquee-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes marquee-down {
  0% {
    transform: translateY(-50%);
  }

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

/* Pause on hover for accessibility */
@media (prefers-reduced-motion: reduce) {

  .marquee-scroll-up .marquee-column-inner,
  .marquee-scroll-down .marquee-column-inner,
  .marquee-scroll-up-slow .marquee-column-inner {
    animation: none;
  }
}

.marquee-fade-mask {
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 20%, transparent 95%);
  mask-image: radial-gradient(ellipse 90% 90% at center, black 20%, transparent 95%);
}

.mask-image-b {
  -webkit-mask-image: linear-gradient(180deg, transparent, black 10%, black 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 10%, black 80%, transparent);
}

.mask-image-b-solid {
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
}

.mask-image-r {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* DIDC Hero Trust Animations */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes loop-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-fade-in {
  animation: fadeSlideIn 0.8s ease-out forwards;
  opacity: 0;
}

.animate-marquee {
  animation: loop-marquee 40s linear infinite;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}