/* Self-hosted Google Fonts */
@font-face {
  font-family: 'UnifrakturCook';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/UnifrakturCook-Bold-d6b0637e.woff2") format('woff2');
}

@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/PirataOne-Regular-31818f87.woff2") format('woff2');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .placeholder-state .thumbnail-inner {
    background-image: linear-gradient(to bottom, rgba(107, 114, 128, 0.5), rgba(55, 65, 81, 0.5));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 110%;
    border-radius: 50% !important;
  }
  
  .placeholder-state .thumbnail-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/assets/b-5a3f6069.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.5rem auto;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
  }

  .loading-state .relative {
    background-image: linear-gradient(to bottom, rgb(127 29 29), rgb(69 10 10));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .loading-state .relative::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/assets/b-5a3f6069.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem auto;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    filter: brightness(0) invert(1);
    animation: fadeInB 300ms ease-in-out forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeInB {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.4;
    }
  }
  
  /* Hero spinner animation */
  @keyframes hero-spin {
    from { 
      transform: rotate(0deg); 
    }
    to { 
      transform: rotate(360deg); 
    }
  }
  
  .hero-spinner-rotate {
    animation: hero-spin 1s linear infinite;
  }
  
  /* Ensure images appear above loading states */
  .loading-state img,
  .placeholder-state img {
    position: relative;
    z-index: 2;
  }
  
  /* Pure CSS hover effect for thumbnails */
  .thumbnail-container:hover .thumbnail-inner {
    border: 7px solid rgb(156, 163, 175) !important;
    border-radius: 20% !important;
  }
  
  /* Selected thumbnail - red border, stays square */
  .thumbnail-selected .thumbnail-inner {
    border: 7px solid rgb(153, 27, 27) !important; /* red-800 */
    border-radius: 20% !important;
  }
  
  /* Selected thumbnail should not hover */
  .thumbnail-selected:hover .thumbnail-inner {
    border: 7px solid rgb(153, 27, 27) !important; /* stay red */
    border-radius: 20% !important; /* stay square */
  }

  /* Gallery spinner animation - reuse hero-spin animation */
  .spinner-animate {
    animation: hero-spin 1s linear infinite;
  }

  /* Gradient backgrounds - reusable classes */
  .bg-gallery-gradient {
    background: linear-gradient(to bottom, rgb(127, 29, 29), rgb(69, 10, 10));
  }

  .bg-slideshow-gradient {
    background: linear-gradient(to bottom, #1f2937, #030712);
  }

  /* Corrugated panel backgrounds */
  .bg-corrugated {
    background-image: url("/assets/corregated-panel-242ed1d7.jpg");
    background-size: 50% 50%;
    background-repeat: repeat;
  }

  .bg-corrugated-pinstripe {
    background-image: url("/assets/corregated-panel-242ed1d7.jpg");
    background-size: 252px 252px;
    background-repeat: repeat;
    opacity: 0.4;
  }

  /* Slideshow height containers with responsive behavior */
  .slideshow-height-container {
    height: var(--mobile-height);
  }

  @media (min-width: 640px) {
    .slideshow-height-container {
      height: var(--desktop-height);
    }
  }

  /* Custom scrollbar styling */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 #1a202c;
  }

  /* Filter effects */
  .filter-invert-bright {
    filter: brightness(0) invert(1);
  }

  /* Spinner border styles */
  .spinner-border-red {
    border: 10px solid transparent;
    border-top-color: rgb(220, 38, 38);
    border-right-color: rgb(220, 38, 38);
  }

  .spinner-border-orange {
    border: 6px solid transparent;
    border-top-color: rgb(249, 115, 22);
    border-right-color: rgb(249, 115, 22);
  }
}