/* styles.css - small custom styles: clip-paths, gradients, keyframes, skeleton shimmer */

/* Font-face examples (uncomment and update paths when self-hosting)
@font-face {
  font-family: 'VIRGO';
  src: url('/assets/fonts/virgo/VIRGO-Regular.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bauhaus 93';
  src: url('/assets/fonts/bauhaus/Bauhaus93.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aldrich';
  src: url('/assets/fonts/aldrich/Aldrich-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* Hero animated gradient background */
.hero-gradient {
  background: radial-gradient(600px 600px at 10% 10%, rgba(203,102,18,0.15), transparent 12%),
              radial-gradient(500px 500px at 90% 90%, rgba(111,66,193,0.12), transparent 18%),
              linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,0.95) 100%);
  animation: heroShift 12s linear infinite;
  background-blend-mode: screen;
  filter: saturate(1.02);
}

/* subtle shifting */
@keyframes heroShift {
  0% { background-position: 0% 0%, 100% 100%, 0% 0%; }
  50% { background-position: 10% 5%, 90% 95%, 0% 0%; }
  100% { background-position: 0% 0%, 100% 100%, 0% 0%; }
}

/* Skeleton shimmer for coming soon cards */
.skeleton-coming-soon {
  background: linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(245,245,245,0.8) 50%, rgba(255,255,255,0.6) 100%);
  mix-blend-mode: normal;
  z-index: 1;
  pointer-events: none;
  animation: shimmer 1.8s linear infinite;
  opacity: 0.8;
}

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

/* subtle card hover */
.card:focus, .card:hover{ outline: none; box-shadow: 0 8px 30px rgba(15,23,42,0.08); }

/* small clip-path for decorative shapes (if needed) */
.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* accessible focus ring */
:focus{
  outline: 3px solid rgba(203,102,18,0.12);
  outline-offset: 2px;
}

/* ensure images not oversized */
img { max-width:100%; height:auto; display:block; }

/* make sure lottie-player has accessible fallback */
lottie-player { display:block; }