/**
 * Prabhu Cards & Gifts — Custom styles
 */

html {
  scroll-behavior: smooth;
}

/* Hero overlays */
.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.85) 0%,
    rgba(37, 99, 235, 0.75) 50%,
    rgba(234, 88, 12, 0.8) 100%
  );
}

.page-hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.9) 0%,
    rgba(37, 99, 235, 0.85) 100%
  );
}

/* Scroll animations */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.category-card {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    box-shadow 0.35s ease;
}

.category-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.category-card:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Sticky header */
#site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

#site-header.is-scrolled nav > div {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.1);
}

#site-header nav > div {
  transition: all 0.3s ease;
}

/* Cigar premium section */
.cigar-section {
  background: linear-gradient(160deg, #1a1a1a 0%, #2d2416 50%, #1a1a1a 100%);
}

.cigar-offer {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-border {
  border: 2px solid rgba(255, 215, 0, 0.4);
}

/* Balloon section colorful gradient */
.balloon-section {
  background: linear-gradient(
    135deg,
    #fef3c7 0%,
    #fce7f3 25%,
    #dbeafe 50%,
    #dcfce7 75%,
    #ffedd5 100%
  );
}

/* Image hover zoom */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.5s ease;
}

.img-zoom:hover img {
  transform: scale(1.08);
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Form styling */
.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Trading card section alternating backgrounds */
.section-alt {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}