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

@layer utilities {
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }
     /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
    }
  .glass-card {
    @apply bg-white/10 backdrop-blur-md shadow-lg;
    transition: background 0.4s, box-shadow 0.4s;
  }
  .glass-card-blue {
    @apply bg-blue-dark/60 backdrop-blur-md shadow-lg;
    transition: background 0.4s, box-shadow 0.4s;
  }
  .glass-card-gray {
    @apply bg-gray-light/20 backdrop-blur-md shadow-lg;
    transition: background 0.4s, box-shadow 0.4s;
  }
  .card-patron-hover {
    position: relative;
    overflow: hidden;
  }
  .card-patron-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(/assets/Recurso_patron.svg) center/cover no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    z-index: 1;
    mix-blend-mode: lighten;
  }
  .card-patron-hover:hover::after {
    opacity: 0.18;
  }
  .card-patron-hover > * {
    position: relative;
    z-index: 2;
  }
  .cta-banner-glass-patron {
    position: relative;
    @apply backdrop-blur-lg shadow-2xl;
    background: linear-gradient(to bottom, rgba(237, 126, 48, 0.25) 0%, rgba(255, 0, 70, 0.18) 100%);
    overflow: hidden;
  }
  .cta-banner-glass-patron::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(/assets/Recurso_patron-073392a9e183965e1c3ed591c3bfcaecd9bb6059e7398518d63213909a4803ec.svg) center center/200% no-repeat;
    z-index: 1;
    pointer-events: none;
    transition: background-size 0.4s;
  }
  .cta-banner-glass-patron > * {
    position: relative;
    z-index: 2;
  }
  .blue-card-glass-patron-transparent {
    position: relative;
    @apply backdrop-blur-lg shadow-2xl;
    background: linear-gradient(135deg, rgba(14, 22, 54, 0.35) 0%, rgba(6, 11, 39, 0.15) 100%);
    overflow: hidden;
  }
  .blue-card-glass-patron-transparent::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transition: background-size 0.4s;
    transform:rotate(45deg);
  }
  .blue-card-glass-patron-transparent > * {
    position: relative;
    z-index: 2;
  }
}

.bonaparte-bg-gradient {
  position: relative;
  background: linear-gradient(to bottom, #fff 0%, #fff 40%, #C0C0C0 100%);
  z-index: 0;
}

/* Light sweep effect on page load */
.light-sweep {
  position: relative;
  overflow: hidden;
}

.light-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: lightSweep 2s ease-out 0.5s;
  z-index: 10;
  pointer-events: none;
}

@keyframes lightSweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.bonaparte-bg-patron-repeat {
  position: relative;
  overflow: visible;
}
.bonaparte-bg-patron-repeat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/assets/Recurso_patron.svg);
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.18;
  background-blend-mode: lighten;
}
.bonaparte-bg-patron-repeat > * {
  position: relative;
  z-index: 1;
}
.bonaparte-bg-gradient > * {
  position: relative;
  z-index: 1;
}

html, body {
  @apply font-sans leading-relaxed;
}

h1, h2, h3, h4, h5, h6 {
  @apply font-archivo;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll-logos {
  animation: scroll-logos 30s linear infinite;
}

@keyframes scroll-gallery {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll-gallery {
  animation: scroll-gallery 12s linear infinite;
}

@keyframes cycle-z-index {
  0%, 33.33% { z-index: 30; opacity: 1; filter: blur(0px); }
  33.34%, 100% { z-index: 10; opacity: 0.9; filter: blur(1px); }
}
.gallery-image-1 { animation: cycle-z-index 6s infinite; }
.gallery-image-2 { animation: cycle-z-index 6s infinite 2s; }
.gallery-image-3 { animation: cycle-z-index 6s infinite 4s; }

@keyframes flash-fade-out {
  0%, 80% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100%); }
}

.flash-auto-hide {
  animation: flash-fade-out 5s ease-in-out forwards;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
html, body {
  scroll-behavior: smooth;
  height: 100%;
}
.snap-y {
  scroll-snap-type: y proximity;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.snap-y section {
  scroll-snap-align: start;
  min-height: 100vh;
}

/* Override for landing page sections - use content-based sizing */
.bonaparte-bg-gradient section {
  min-height: auto;
}

.hero-fade-mask {
  -webkit-mask-image: linear-gradient(to bottom, white 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, white 70%, transparent 100%);
}

/* Loading overlay background styles */
#demo-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: none;
}
#demo-loading-overlay::before {
  content: "";
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0;
  background-image: url(/images/demo-bg.jpg); /* <-- set your image path */
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.10;
  filter: blur(16px);
  pointer-events: none;
}
#demo-loading-overlay .cta-banner-glass-patron {
  position: relative;
  z-index: 1;
  background: rgba(255, 80, 40, 0.25);
  backdrop-filter: blur(4px);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: 95vw;
  box-sizing: border-box;
}

/* Helper class to prevent scrolling when overlay is visible */
.loading-overlay-active html,
.loading-overlay-active body {
  height: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 639px) {
  #demo-loading-overlay::before {
    filter: blur(10px);
    opacity: 0.13;
    background-position: center top;
  }
  #demo-loading-overlay .cta-banner-glass-patron {
    padding: 1.25rem 0.5rem;
    max-width: 99vw;
    border-radius: 1.25rem;
  }
  #demo-loading-message {
    font-size: 1.25rem;
    padding: 0.5rem 0.25rem;
  }
}

/* Tab styling for part opportunities */
.tab-button {
  position: relative;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab-button.active {
  border-bottom-color: #3B82F6;
  color: #1E3A8A;
  background-color: #F8FAFC;
}

.tab-button:not(.active) {
  border-bottom-color: transparent;
  color: #6B7280;
}

.tab-button:hover {
  background-color: #F9FAFB;
}