/* ============================================================
   iResto Frontend — Premium Animations & Interactive Effects
   ============================================================ */

/* ── Mouse Cursor Trail ── */
.cursor-trail-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  animation: trailFade 0.6s ease forwards;
}

@keyframes trailFade {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.2); }
}

/* ── Floating Food Particle ── */
.food-particle {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 99998;
  user-select: none;
  animation: floatUp 1.4s ease-out forwards;
}

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  60%  { opacity: 0.7; transform: translateY(-80px) rotate(20deg) scale(1.2); }
  100% { opacity: 0; transform: translateY(-160px) rotate(40deg) scale(0.5); }
}

/* ── Scroll-Reveal Animations ── */
.sr-hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-hidden.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

.sr-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-left.sr-visible {
  opacity: 1;
  transform: translateX(0);
}

.sr-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sr-scale.sr-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.sr-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.sr-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.sr-stagger > *:nth-child(3) { transition-delay: 0.19s; }
.sr-stagger > *:nth-child(4) { transition-delay: 0.26s; }
.sr-stagger > *:nth-child(5) { transition-delay: 0.33s; }
.sr-stagger > *:nth-child(6) { transition-delay: 0.40s; }
.sr-stagger > *:nth-child(7) { transition-delay: 0.47s; }
.sr-stagger > *:nth-child(8) { transition-delay: 0.54s; }

/* ── Product Card Hover 3D Tilt ── */
.product {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
}

.product:hover {
  box-shadow: 0 30px 60px -15px rgba(234, 67, 53, 0.2) !important;
}

/* ── Glowing Pulse on Price ── */
@keyframes priceGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(234, 67, 53, 0); }
  50%       { text-shadow: 0 0 12px rgba(234, 67, 53, 0.5); }
}

.product:hover .product-price {
  animation: priceGlow 1.5s ease-in-out infinite;
}

/* ── Add-to-Cart Button Ripple ── */
.btn-custom, .single_order, .go_to_checkout, .order-item {
  position: relative;
  overflow: hidden;
}

.btn-custom::after,
.single_order::after,
.go_to_checkout::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.btn-custom:active::after,
.single_order:active::after,
.go_to_checkout:active::after {
  width: 250px; height: 250px;
  opacity: 0;
  transition: 0s;
}

/* ── Hero Banner Floating Shapes ── */
.banner-floating-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  animation: shapeDrift 8s ease-in-out infinite;
}

.banner-floating-shape:nth-child(1) {
  width: 300px; height: 300px;
  background: var(--primary-red, #ea4335);
  top: -80px; right: -60px;
  animation-delay: 0s;
}

.banner-floating-shape:nth-child(2) {
  width: 200px; height: 200px;
  background: #ff7b00;
  bottom: 40px; left: 5%;
  animation-delay: 3s;
}

.banner-floating-shape:nth-child(3) {
  width: 140px; height: 140px;
  background: #fff;
  top: 30%; left: 45%;
  animation-delay: 1.5s;
}

@keyframes shapeDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(8deg); }
  66%       { transform: translateY(12px) rotate(-5deg); }
}

/* ── Category Item Bounce-in ── */
@keyframes catBounceIn {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  70%  { transform: scale(1.08) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.ct-menu-category-item {
  animation: catBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Shimmer Loading Skeleton (placeholder during lazy load) ── */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.img-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Star Rating Micro-animation ── */
.fa-star {
  transition: transform 0.2s ease, color 0.2s ease;
}

.rating:hover .fa-star {
  transform: scale(1.2);
}

/* ── Header Nav Item Active Indicator ── */
.navbar .menu-item a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary-red, #ea4335);
  transition: width 0.3s ease, left 0.3s ease;
  border-radius: 2px;
}

.navbar .menu-item a:hover::after,
.navbar .menu-item a.active::after {
  width: 80%;
  left: 10%;
}

.navbar .menu-item a {
  position: relative;
}

/* ── Section Title Underline Animate ── */
.section-title-wrap .title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(to right, var(--primary-red, #ea4335), #ff7b00);
  border-radius: 4px;
  margin: 12px auto 0;
  animation: titleLineGrow 0.8s ease forwards;
  transform-origin: center;
}

@keyframes titleLineGrow {
  from { width: 0; }
  to   { width: 60px; }
}

/* ── Floating Food Orbit (Hero section decorative) ── */
.food-orbit-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.food-orbit-icon {
  position: absolute;
  font-size: 28px;
  opacity: 0.15;
  animation: orbitFloat linear infinite;
}

@keyframes orbitFloat {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.1; }
  25%  { opacity: 0.2; }
  50%  { transform: translateY(-30px) rotate(180deg); opacity: 0.15; }
  75%  { opacity: 0.1; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0.1; }
}

/* ── Cart Sidebar Slide-in ── */
.cart-sidebar {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease !important;
}

/* ── Footer Link Hover ── */
.ct-footer .footer-widget ul li a {
  transition: color 0.3s ease, padding-inline-start 0.3s ease !important;
}

.ct-footer .footer-widget ul li a:hover {
  color: var(--primary-red, #ea4335) !important;
  padding-inline-start: 8px !important;
}

/* ── Scroll-to-Top visible animation ── */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Page Transition Fade ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body {
  animation: pageFadeIn 0.5s ease both;
}

/* ── Magnetic Hover Effect for Buttons ── */
.btn-custom, .single_order {
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
}

/* ── Default Image Glow for No-Image Products ── */
.product-thumb img.no-image-placeholder {
  object-fit: contain !important;
  padding: 20px;
  background: linear-gradient(135deg, #fff5f5 0%, #fff0e6 50%, #fff5f5 100%);
  animation: placeholderPulse 3s ease-in-out infinite;
}

@keyframes placeholderPulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgba(234,67,53,0.1)); }
  50%       { filter: brightness(1.05) drop-shadow(0 0 20px rgba(234,67,53,0.25)); }
}

/* Category thumbnail no-image */
.menu-category-thumb img.no-image-placeholder {
  object-fit: contain !important;
  padding: 8px;
  background: linear-gradient(135deg, #fff5f5, #fff0e6);
  border-radius: 50%;
  animation: placeholderPulse 2.5s ease-in-out infinite;
}