/* ============================================
   ORLANDI S.A. V3 — Custom CSS
   Dark/Light mode, micro-interactions, parallax
   ============================================ */

/* ===== THEME TRANSITION ===== */
html { scroll-behavior: smooth; overflow-x: clip; }
html.transitioning, html.transitioning *, html.transitioning *::before, html.transitioning *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

/* ===== PREVENT FLASH ON LOAD ===== */
[data-cloak] { display: none !important; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D6D3CD; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #A8A29E; }
.dark ::-webkit-scrollbar-thumb { background: #44403C; }
.dark ::-webkit-scrollbar-thumb:hover { background: #57534E; }

/* ===== FONT STACKS ===== */
body { font-family: 'Manrope', sans-serif; overflow-x: clip; }
h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Urbanist', sans-serif; }

/* ===== PAGE TRANSITION ===== */
body {
  transition: opacity 0.35s ease;
}
body.loading {
  opacity: 0 !important;
  pointer-events: none;
}

/* ===== HERO SLIDER ===== */
.hero-slide .hero-content { z-index: 2; }
.hero-slide .hero-content h1 {
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* ===== SWIPER PAGINATION ===== */
.swiper-pagination-bullet { background: rgba(255,255,255,0.4) !important; opacity: 1 !important; width: 8px !important; height: 8px !important; transition: all 0.3s ease !important; }
.swiper-pagination-bullet-active { background: #F26522 !important; width: 32px !important; border-radius: 9999px !important; }

/* ===== NOISE OVERLAY ===== */
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ===== BRAND CAROUSEL ===== */
.brand-logo { filter: grayscale(1); opacity: 0.4; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.brand-logo:hover { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

/* ===== PRODUCT CARD MICRO-INTERACTIONS ===== */
.product-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(242, 101, 34, 0.1), 0 8px 16px -8px rgba(0,0,0,0.08);
}

/* ===== CATEGORY CARD PARALLAX ===== */
.category-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.category-card:hover { transform: scale(1.02); }
.category-card img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.category-card:hover img { transform: scale(1.12); opacity: 0.5 !important; }
.category-card .cat-content {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-card:hover .cat-content { transform: translateY(-4px); }

/* ===== CINEMATIC CATEGORY CARDS ===== */
.cat-cinema-card {
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.cat-cinema-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(242, 101, 34, 0.2), 0 0 0 1px rgba(242, 101, 34, 0.08);
}
.categories-swiper { overflow: visible !important; }
.categories-swiper .swiper-wrapper { align-items: stretch; }

/* ===== SLIDE-IN MENU PANEL ===== */
.menu-panel, .menu-subpanel {
  will-change: transform;
}
@media (max-width: 1023px) {
  #menu-subpanel { display: none !important; }
}
.menu-cat-item {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-cat-item:hover, .menu-cat-item.is-active {
  padding-left: 1.5rem;
}
.menu-subcat-enter {
  animation: subcatIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes subcatIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.menu-subcat-enter {
  animation: subcatIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes subcatIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== BUTTON MICRO-INTERACTIONS ===== */
.btn-hover {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.btn-hover:active { transform: scale(0.97); }
.btn-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-hover:hover::after { transform: translateX(100%); }

/* ===== SURFACE ITEM ===== */
.surface-item { animation: slideIn 0.3s ease-out; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ===== FOCUS RING ===== */
:focus-visible {
  outline: 2px solid #F26522;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== LINE CLAMP ===== */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== PRINT ===== */
@media print {
  header, footer, .no-print, [aria-label="Contactar por WhatsApp"] { display: none !important; }
  main { padding: 0 !important; }
  body { font-size: 12px; color: #000; }
}

/* ===== DARK MODE OVERRIDES ===== */
.dark body,
.dark .bg-neutral-50 { background-color: #0F0E0D !important; }
.dark .bg-white { background-color: #1C1917 !important; }
.dark .bg-white\/95 { background-color: rgba(28,25,23,0.95) !important; }
.dark .bg-brand-50 { background-color: rgba(242,101,34,0.1) !important; }

.dark .text-neutral-900 { color: #FAFAF9 !important; }
.dark .text-neutral-800 { color: #E7E5E1 !important; }
.dark .text-neutral-700 { color: #D6D3CD !important; }
.dark .text-neutral-600 { color: #A8A29E !important; }
.dark .text-neutral-500 { color: #78716C !important; }
.dark .text-neutral-400 { color: #57534E !important; }

.dark .border-neutral-100 { border-color: #292524 !important; }
.dark .border-neutral-200 { border-color: #44403C !important; }
.dark .border-b.border-neutral-100 { border-color: #292524 !important; }

.dark .bg-neutral-100 { background-color: #292524 !important; }
.dark .bg-neutral-50\/50 { background-color: rgba(15,14,13,0.5) !important; }
.dark .hover\:bg-neutral-50:hover { background-color: #292524 !important; }
.dark .bg-neutral-900 { background-color: #0F0E0D !important; }

.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important; }
.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4) !important; }

.dark .border-brand-100\/50 { border-color: rgba(242,101,34,0.15) !important; }
.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }

.dark .product-card:hover {
  box-shadow: 0 20px 40px -12px rgba(242, 101, 34, 0.15), 0 8px 16px -8px rgba(0,0,0,0.3);
}
.dark .brand-logo { opacity: 0.3; }
.dark .brand-logo:hover { opacity: 0.9; }

/* Dark mode specific components */
.dark nav.sticky { border-bottom-color: #292524 !important; }
.dark footer { background-color: #0A0908 !important; }
.dark .swiper-pagination-bullet { background: rgba(255,255,255,0.2) !important; }

/* Dark menu panel */
.dark .menu-panel { background-color: #1C1917 !important; }
.dark .menu-panel .border-neutral-100 { border-color: #292524 !important; }
.dark .menu-subpanel { background-color: #141211 !important; }
.dark .menu-subpanel .border-neutral-200 { border-color: #292524 !important; }

/* Theme toggle animation */
.theme-toggle-icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.theme-toggle:hover .theme-toggle-icon { transform: rotate(30deg); }