/* ============================================================
   Custom styles — neo-brutalist utilities, animations, patterns
   Everything here extends Tailwind's utility classes.
   ============================================================ */

/* --- Neo-brutalist drop shadows --- */
.neo-shadow {
  box-shadow: 6px 6px 0px #181d19;
}
.neo-shadow-sm {
  box-shadow: 4px 4px 0px #181d19;
}
.neo-shadow-lg {
  box-shadow: 12px 12px 0px #181d19;
}

/* Used by .neo-brutal-shadow in some Stitch output */
.neo-brutal-shadow {
  box-shadow: 6px 6px 0px #181d19;
}
.neo-brutal-shadow-sm {
  box-shadow: 4px 4px 0px #181d19;
}

/* --- Sticker rotations --- */
.sticker-rotate-1 {
  transform: rotate(-2deg);
}
.sticker-rotate-2 {
  transform: rotate(3deg);
}
.sticker-rotate-left {
  transform: rotate(-6deg);
}
.sticker-rotate-right {
  transform: rotate(6deg);
}

/* Asymmetric card tilts */
.asymmetric-1 {
  transform: rotate(-1deg);
}

/* --- Zellige pattern (Moroccan tile texture overlay) --- */
.zellige-pattern {
  background-image:
    linear-gradient(45deg, rgba(0, 72, 36, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 72, 36, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 72, 36, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 72, 36, 0.04) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}

/* --- Animations --- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.float-element,
.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop {
  animation: pop 0.4s ease-out;
}

@keyframes camel-walk {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(3px) rotate(-3deg); }
  75% { transform: translateX(-3px) rotate(3deg); }
}
.animate-camel {
  animation: camel-walk 2s ease-in-out infinite;
}

/* --- Screen transitions (SPA show/hide) --- */
.screen {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.screen.active {
  opacity: 1;
  position: relative;
  transform: translateY(0);
  z-index: 1;
}
.screen:not(.active) {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  transform: translateY(8px);
  z-index: 0;
  overflow: hidden;
}

/* --- Share card (captured by html2canvas, hidden from page) --- */
.share-card {
  width: 480px;
  aspect-ratio: 9 / 16;
  background: #f7fbf3;
  border: 4px solid #181d19;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Bricolage Grotesque", "Space Grotesk", "Rubik", sans-serif;
  position: relative;
}
.share-card .zellige-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.share-card .content {
  position: relative;
  z-index: 2;
  padding: 24px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* --- Button press micro-interactions --- */
.neo-press:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0px 0px 0px #181d19 !important;
}

/* --- Image placeholder fallback --- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

/* --- Selected answer state --- */
.option-btn.selected {
  background: #a1f5b7;
  border-color: #004824;
}
.option-btn.selected .checkbox-indicator {
  background: #004824;
  border-color: #004824;
}
.option-btn.selected .checkbox-indicator span {
  display: block !important;
}

/* --- Mobile bottom padding for quiz (sticky nav space) --- */
.quiz-bottom-pad {
  height: 80px;
}

/* --- Arabic font override --- */
html[lang="ar"] body,
html[lang="ar"] .font-display-lg,
html[lang="ar"] .font-headline-md,
html[lang="ar"] .font-body-lg,
html[lang="ar"] .font-body-sm,
html[lang="ar"] .font-label-bold {
  font-family: 'Cairo', sans-serif;
}

/* --- Language switcher active state --- */
.lang-btn-active {
  background: #006233 !important;
  color: #ffffff !important;
  border-color: #004824 !important;
}