/* styles.css
   Custom styling enhancements, animations, and modal backdrop overlays.
*/

/* Custom scrollbar behavior for category tab overflow */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Modal Backdrops & Dialog Styling */
dialog::backdrop {
  background-color: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(4px);
}

dialog[open] {
  animation: modalFadeIn 0.2s ease-out forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Flashcard Elevation, Hover Focus & Dynamic Theming */
#flashcard {
  /* Dynamic Theme Variables */
  background-color: var(--card-bg, #0f172a);
  color: var(--card-text, #f8fafc);
  --card-ref: #fbbf24;
  font-size: var(--card-text-size, 1rem);
  font-weight: var(--card-font-weight, normal);
  font-style: var(--card-font-style, normal);

  /* MERGED Transitions: keeps your 3D hover effects AND adds smooth color flipping */
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.3s ease, color 0.3s ease;
}

#flashcard:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* Apply the custom reference color to reference elements */
#frontRef, #backRefBadge, .card-reference {
  color: var(--card-ref, #fbbf24);
}

/* Smooth Focus Rings */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* --- ADAPTIVE FLASHCARD FRAME ---
   The card's shape (ratio) is fixed at any given moment and only ever
   scales with the available space — never with how much text a given
   card/verse holds. .flashcard-stage (the "STAGE CONTAINER" in index.html)
   is turned into a CSS size container so .flashcard-frame can compute the
   largest box matching --ar-w/--ar-h that fits BOTH the available width and
   height, using container query units (cqw/cqh) — the standard pure-CSS
   "contain" formula, no JS measuring involved. That keeps it working the
   same in a browser tab, a packaged desktop shell, or a mobile webview. */
.flashcard-stage {
  container-type: size;
  container-name: flashcard-stage;
}

.flashcard-frame {
  --ar-w: 16;
  --ar-h: 9;
  aspect-ratio: var(--ar-w) / var(--ar-h);
  width: min(100cqw, 100cqh * var(--ar-w) / var(--ar-h));
  height: min(100cqh, 100cqw * var(--ar-h) / var(--ar-w));
  min-width: 240px;
  min-height: 160px;
}

/* Portrait/narrow layouts (phones, narrow windows): a wide 16:9 card would
   leave large empty margins above and below on a tall screen, so switch to
   a taller, more phone-friendly shape instead. Keyed off the stage's own
   available shape (not just raw device orientation), so it still adapts
   correctly if the surrounding chrome changes. */
@container flashcard-stage (max-aspect-ratio: 1/1) {
  .flashcard-frame {
    --ar-w: 3;
    --ar-h: 4;
  }
}

/* --- 3D PERSPECTIVE & FLIP ANIMATIONS --- */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.backface-hidden {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* --- CARD SLIDE ANIMATIONS --- */
@keyframes slideOutLeft {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(-60px) scale(0.95); opacity: 0; }
}

@keyframes slideInRight {
  0% { transform: translateX(60px) scale(0.95); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes slideOutRight {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(60px) scale(0.95); opacity: 0; }
}

@keyframes slideInLeft {
  0% { transform: translateX(-60px) scale(0.95); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.animate-slide-out-left {
  animation: slideOutLeft 0.18s ease-in forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.22s ease-out forwards;
}

.animate-slide-out-right {
  animation: slideOutRight 0.18s ease-in forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.22s ease-out forwards;
}