/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ========================================
   Layer Order Declaration
   ======================================== */
@layer base, components, modules, utilities;

/* ========================================
   Base Layer: Keyframes & Global Defaults
   ======================================== */
@layer base {

  /* Dark scrollbar styling (global) */
  * {
    scrollbar-width: thin;
    scrollbar-color: #475569 #1e293b;
    /* thumb: slate-600, track: slate-800 */
  }

  *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  *::-webkit-scrollbar-track {
    background: #1e293b;
    border-radius: 10px;
  }

  *::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 10px;
    border: 2px solid #1e293b;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #64748b;
  }

  *::-webkit-scrollbar-thumb:active {
    background: #94a3b8;
  }

  /* Keyframe Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

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

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }

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

  @keyframes blink {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }

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

/* ========================================
   Components Layer: Reusable UI Components
   ======================================== */
@layer components {
  .turbo-progress-bar {
    height: 3px;
    background-color: var(--color-sky-500);
    z-index: 99999 !important;
  }

  .review-btn {
    @apply font-semibold text-center flex-1 size-12 bg-black/30 backdrop-blur-xl rounded-full;
  }

  .review-btn-click-activity {
    @apply hover:brightness-105 hover:scale-[1.07] active:scale-[0.9] transition-all duration-150 ease-in-out;
  }

  .review-btn-border {
    @apply border border-solid border-white/10;
  }

  /* Debug Turbo Frame visualization */
  .debug turbo-frame {
    border: 1px dashed red;
    display: block;
  }

  .debug turbo-frame::before {
    content: "FrameID #" attr(id) " src=" attr(src) " loading=" attr(loading);
    font-size: 0.75rem;
    position: relative;
    padding: 0.25rem;
    border: 1px dashed red;
    background: white;
  }
}

/* ========================================
   Utilities Layer: Single-Purpose Helpers
   ======================================== */
@layer utilities {

  /* Backdrop Effects */
  .glossy-bg {
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
  }

  /* Transform Utilities */
  .translate-y-hide {
    transform: translateY(-100%);
  }

  /* Scrollbar Utilities */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Animation Classes */
  .animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
  }

  .animate-fade-up {
    animation: fade-up 700ms cubic-bezier(0.16, 0.84, 0.5, 1) both;
  }

  .animate-blink {
    animation: blink 1s step-end infinite;
  }

  /* Animation Delays */
  .delay-100 {
    animation-delay: 100ms;
  }

  .delay-200 {
    animation-delay: 200ms;
  }

  .delay-300 {
    animation-delay: 300ms;
  }

  .delay-500 {
    animation-delay: 500ms;
  }

  /* Safe Area (iOS notch support) */
  .safe-padding {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Shimmer Effect (CTA buttons, landing page) */
  .shimmer {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.06));
    background-size: 200% 100%;
    background-position: 0 0;
  }

  .shimmer-animate {
    animation: shimmer 1.8s linear infinite;
  }

  /* Drag & Drop Visual Feedback */
  .drag-over {
    outline: 2px dashed rgba(96, 165, 250, 0.9);
    background-color: #f0f9ff;
  }
}