/* ═══════════════════════════════════════════════════════════
   Il Tuo Ristorante — Animations & Icons CSS v2.0
   Animated SVG icons · Micro-interactions · Premium feel
═══════════════════════════════════════════════════════════ */

/* ── Global motion preferences ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Icon base ────────────────────────────────────────────── */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ico svg {
  display: block;
  overflow: visible;
}

/* ── ANIMATED ICON: Fork & spoon (nav/hero) ──────────────── */
.ico-dining svg .fork-tine {
  transform-origin: center bottom;
  animation: forkWiggle 3.5s ease-in-out infinite;
}
.ico-dining svg .fork-tine:nth-child(2) { animation-delay: 0.12s; }
.ico-dining svg .fork-tine:nth-child(3) { animation-delay: 0.24s; }
.ico-dining svg .spoon-bowl {
  animation: spoonRock 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes forkWiggle {
  0%,80%,100% { transform: scaleY(1); }
  85%          { transform: scaleY(1.08) translateY(-1px); }
  92%          { transform: scaleY(0.96); }
}
@keyframes spoonRock {
  0%,70%,100% { transform: rotate(0deg); }
  75%          { transform: rotate(-6deg); }
  85%          { transform: rotate(4deg); }
}

/* ── ANIMATED ICON: Flame ────────────────────────────────── */
.ico-flame svg .flame-inner {
  transform-origin: center bottom;
  animation: flameDance 1.8s ease-in-out infinite alternate;
}
.ico-flame svg .flame-outer {
  transform-origin: center bottom;
  animation: flameDance 2.2s ease-in-out infinite alternate-reverse;
}
@keyframes flameDance {
  0%   { transform: scaleX(1) scaleY(1) translateY(0); }
  33%  { transform: scaleX(0.88) scaleY(1.06) translateY(-1px); }
  66%  { transform: scaleX(1.1) scaleY(0.97) translateY(1px); }
  100% { transform: scaleX(0.94) scaleY(1.04) translateY(-1px); }
}

/* ── ANIMATED ICON: Wine glass ───────────────────────────── */
.ico-wine svg .wine-liquid {
  animation: wineSway 4s ease-in-out infinite;
  transform-origin: center center;
}
.ico-wine svg .wine-bubble {
  animation: wineRise 2.5s ease-in-out infinite;
}
.ico-wine svg .wine-bubble:nth-child(2) { animation-delay: 0.8s; }
.ico-wine svg .wine-bubble:nth-child(3) { animation-delay: 1.6s; }
@keyframes wineSway {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(1.5deg); }
  75%      { transform: rotate(-1.5deg); }
}
@keyframes wineRise {
  0%      { opacity: 0; transform: translateY(0); }
  20%     { opacity: 0.7; }
  100%    { opacity: 0; transform: translateY(-8px); }
}

/* ── ANIMATED ICON: Star / rating ────────────────────────── */
.ico-star svg .star-shape {
  animation: starPulse 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes starPulse {
  0%,80%,100% { transform: scale(1) rotate(0deg); }
  85%          { transform: scale(1.15) rotate(8deg); }
  90%          { transform: scale(0.95) rotate(-3deg); }
  95%          { transform: scale(1.05) rotate(2deg); }
}

/* ── ANIMATED ICON: Location pin ────────────────────────── */
.ico-pin svg .pin-circle {
  animation: pinPop 3s cubic-bezier(0.34,1.56,0.64,1) infinite;
  transform-origin: 50% 100%;
}
@keyframes pinPop {
  0%,60%,100% { transform: scale(1) translateY(0); }
  65%          { transform: scale(1,0.85) translateY(3px); }
  72%          { transform: scale(1,1.1) translateY(-4px); }
  80%          { transform: scale(1) translateY(-1px); }
  88%          { transform: scale(1) translateY(1px); }
}

/* ── ANIMATED ICON: Phone ────────────────────────────────── */
.ico-phone svg .phone-body {
  animation: phoneRing 4s ease-in-out infinite;
  transform-origin: center;
}
.ico-phone svg .ring-1, .ico-phone svg .ring-2 {
  animation: phoneWave 4s ease-in-out infinite;
  transform-origin: left center;
}
.ico-phone svg .ring-2 { animation-delay: 0.15s; }
@keyframes phoneRing {
  0%,70%,100% { transform: rotate(0deg); }
  73%          { transform: rotate(-18deg); }
  78%          { transform: rotate(15deg); }
  83%          { transform: rotate(-10deg); }
  88%          { transform: rotate(6deg); }
  93%          { transform: rotate(-3deg); }
}
@keyframes phoneWave {
  0%,65%,100% { opacity: 0; transform: scale(0.6); }
  70%          { opacity: 1; transform: scale(1); }
  90%          { opacity: 0; transform: scale(1.3); }
}

/* ── ANIMATED ICON: Delivery scooter ────────────────────── */
.ico-scooter svg .scooter-body {
  animation: scooterBounce 0.6s ease-in-out infinite alternate;
  transform-origin: center;
}
.ico-scooter svg .wheel-front, .ico-scooter svg .wheel-back {
  animation: wheelSpin 0.5s linear infinite;
  transform-origin: center;
}
.ico-scooter svg .wheel-front { transform-origin: 18px 20px; }
.ico-scooter svg .wheel-back  { transform-origin: 7px 20px; }
@keyframes scooterBounce {
  from { transform: translateY(0px) rotate(-0.5deg); }
  to   { transform: translateY(-1.5px) rotate(0.5deg); }
}
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── ANIMATED ICON: Chef hat ─────────────────────────────── */
.ico-chef svg .hat-steam-1,
.ico-chef svg .hat-steam-2,
.ico-chef svg .hat-steam-3 {
  animation: steamRise 2s ease-in-out infinite;
  transform-origin: center bottom;
}
.ico-chef svg .hat-steam-2 { animation-delay: 0.65s; }
.ico-chef svg .hat-steam-3 { animation-delay: 1.3s; }
@keyframes steamRise {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.9; }
  60%  { opacity: 0.5; transform: translateY(-7px) scaleX(1.3); }
  100% { opacity: 0; transform: translateY(-12px) scaleX(0.7); }
}

/* ── ANIMATED ICON: Sparkle / Premium ───────────────────── */
.ico-sparkle svg .sparkle-center {
  animation: sparkleRotate 4s linear infinite;
  transform-origin: center;
}
.ico-sparkle svg .sparkle-dot {
  animation: sparkleOrbit 4s ease-in-out infinite;
}
.ico-sparkle svg .sparkle-dot:nth-child(2) { animation-delay: 1s; }
.ico-sparkle svg .sparkle-dot:nth-child(3) { animation-delay: 2s; }
.ico-sparkle svg .sparkle-dot:nth-child(4) { animation-delay: 3s; }
@keyframes sparkleRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sparkleOrbit {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.5); }
}

/* ── ANIMATED ICON: Arrow ────────────────────────────────── */
.ico-arrow svg .arrow-shaft {
  animation: arrowSlide 1.8s ease-in-out infinite;
}
.ico-arrow svg .arrow-head {
  animation: arrowSlide 1.8s ease-in-out infinite;
}
@keyframes arrowSlide {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* ── ANIMATED ICON: WhatsApp bubble ─────────────────────── */
.ico-chat svg .chat-dot {
  animation: chatDot 1.5s ease-in-out infinite;
}
.ico-chat svg .chat-dot:nth-child(2) { animation-delay: 0.2s; }
.ico-chat svg .chat-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDot {
  0%,60%,100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* ── ANIMATED ICON: Cart ─────────────────────────────────── */
.ico-cart svg .cart-wheel {
  animation: cartRoll 2s linear infinite;
}
.ico-cart svg .cart-wheel:first-of-type { transform-origin: 8px 18px; }
.ico-cart svg .cart-wheel:last-of-type  { transform-origin: 18px 18px; }
@keyframes cartRoll {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Delivery bar icons hover ────────────────────────────── */
.delivery-btn:hover .ico svg { filter: drop-shadow(0 0 4px currentColor); }

/* ── BUTTON micro-interactions ───────────────────────────── */
.btn-red, .btn-hero-primary, .nav-order {
  position: relative;
  overflow: hidden;
}
.btn-red::after, .btn-hero-primary::after, .nav-order::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn-red:hover::after, .btn-hero-primary:hover::after, .nav-order:hover::after {
  transform: translateX(100%);
}

/* ── btn-add cart bounce ──────────────────────────────────── */
.btn-add {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, box-shadow 0.2s !important;
}
.btn-add:active {
  transform: scale(0.82) !important;
}
.btn-add.added {
  animation: addedPop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes addedPop {
  0%   { transform: scale(0.8); background: var(--green); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); background: var(--red); }
}

/* ── Menu card ───────────────────────────────────────────── */
.menu-card { transition: background 0.25s ease, transform 0.25s ease !important; }
.menu-card:hover { transform: translateY(-2px); }

/* ── Hero stats hover ────────────────────────────────────── */
.hero-stat { cursor: default; }
.hero-stat-num {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.2s;
}
.hero-stat:hover .hero-stat-num { transform: scale(1.12); }

/* ── Nav links underline animate ─────────────────────────── */
.nav-links a::after { transition: width 0.35s cubic-bezier(0.4,0,0.2,1) !important; }

/* ── Hamburger lines smooth ─────────────────────────────── */
.hamburger span { transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }

/* ── Testimonial card hover ──────────────────────────────── */
.testimonial-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(230,51,41,0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* ── Hours row today highlight pulse ─────────────────────── */
.hours-row.today {
  animation: todayPulse 3s ease-in-out infinite;
}
@keyframes todayPulse {
  0%,100% { background: rgba(230,51,41,0.04); }
  50%      { background: rgba(230,51,41,0.09); }
}

/* ── Social buttons ──────────────────────────────────────── */
.social-btn { transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important; }
.social-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* ── Flag divider shimmer ────────────────────────────────── */
.flag-divider span,
.hero-flag span,
.nav-logo-bar span,
.footer-logo-bar span,
.sb-bar span {
  position: relative; overflow: hidden;
}
.flag-divider span::after,
.hero-flag span::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}
.flag-divider span:nth-child(1)::after { animation-delay: 0s; }
.flag-divider span:nth-child(2)::after { animation-delay: 0.3s; }
.flag-divider span:nth-child(3)::after { animation-delay: 0.6s; }
@keyframes shimmer {
  0%,70%,100% { transform: translateX(-100%); }
  80%           { transform: translateX(200%); }
}

/* ── Gallery item zoom ────────────────────────────────────── */
.gal-item {
  transition: transform 0.4s ease;
}
.gal-item:hover { transform: scale(1.01); }
.gal-item img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}
.gal-item:hover img { transform: scale(1.06) !important; }

/* ── About mosaic img hover ─────────────────────────────── */
.about-mosaic-img {
  transition: transform 0.3s ease;
}
.about-mosaic-img:hover { transform: scale(1.01); }

/* ── Cart float button pulse ─────────────────────────────── */
#cart-float {
  animation: floatPulse 3s ease-in-out infinite;
}
@keyframes floatPulse {
  0%,100% { box-shadow: 0 8px 24px rgba(230,51,41,0.3); }
  50%      { box-shadow: 0 8px 32px rgba(230,51,41,0.55), 0 0 0 8px rgba(230,51,41,0.06); }
}
#cart-float:hover {
  animation: none;
  box-shadow: 0 12px 36px rgba(230,51,41,0.5) !important;
}

/* ── Cart item slide-in ──────────────────────────────────── */
.cart-item {
  animation: cartItemIn 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Order button ripple ─────────────────────────────────── */
.order-btn {
  position: relative; overflow: hidden;
  transition: all 0.3s ease !important;
}
.order-btn::after {
  content: ''; position: absolute;
  width: 120%; height: 120%; left: -10%; top: -10%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.order-btn:hover::after { opacity: 1; }
.order-btn:hover { transform: translateX(4px); }

/* ── Preloader logo letters ──────────────────────────────── */
.preloader-logo {
  overflow: hidden;
  letter-spacing: 0.05em;
}
.preloader-logo span {
  display: inline-block;
  animation: letterFloat 1.4s ease infinite alternate;
}
@keyframes letterFloat {
  from { transform: translateY(0); color: var(--red); }
  to   { transform: translateY(-4px); color: var(--white); }
}

/* ── Scroll indicator pulse ──────────────────────────────── */
.hero-scroll-line {
  animation: scrollPulse 2.2s ease-in-out infinite !important;
}
@keyframes scrollPulse {
  0%   { opacity: 0.2; height: 28px; }
  50%  { opacity: 1; height: 44px; }
  100% { opacity: 0.2; height: 28px; }
}

/* ── Meniu zilei card glow ───────────────────────────────── */
.hero-meniu-zilei {
  animation: meniuGlow 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.hero-meniu-zilei:hover { transform: translateY(-2px) scale(1.01); }
@keyframes meniuGlow {
  0%,100% { border-color: rgba(201,169,110,0.3); box-shadow: none; }
  50%      { border-color: rgba(201,169,110,0.5); box-shadow: 0 0 20px rgba(201,169,110,0.12); }
}

/* ── Footer links hover ──────────────────────────────────── */
.footer-col a {
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block;
}
.footer-col a:hover { transform: translateX(3px); }

/* ── Contact card row hover ─────────────────────────────── */
.contact-row {
  transition: background 0.2s ease, padding 0.2s ease;
}
.contact-row:hover {
  background: rgba(255,255,255,0.025);
  padding-left: calc(1.2rem + 4px);
}

/* ── Hours row hover ─────────────────────────────────────── */
.hours-row {
  transition: background 0.2s ease, padding 0.2s ease !important;
}

/* ── Stat card hover (admin) ──────────────────────────────── */
.stat-card {
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

/* ── Admin table row hover ────────────────────────────────── */
tbody tr {
  transition: background 0.15s ease;
}

/* ── Admin nav item hover ────────────────────────────────── */
.nav-i {
  transition: all 0.2s ease !important;
}
.nav-i:not(.active):hover {
  padding-left: calc(1.2rem + 3px);
}

/* ── Modal slide-in ──────────────────────────────────────── */
.modal-overlay.open .modal {
  animation: modalSlideIn 0.4s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Alert slide-in ──────────────────────────────────────── */
.al {
  animation: alertIn 0.35s ease both;
}
@keyframes alertIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Page load body reveal ───────────────────────────────── */
body {
  animation: bodyFadeIn 0.5s ease both;
}
@keyframes bodyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Delivery btn hover shimmer ──────────────────────────── */
.delivery-btn {
  position: relative; overflow: hidden;
  transition: all 0.3s ease !important;
}
.delivery-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.5s ease;
}
.delivery-btn:hover::before { left: 100%; }
.delivery-btn:hover { transform: translateY(-2px); }

/* ── Section eyebrow reveal ─────────────────────────────── */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.sec-eyebrow::before, .sec-eyebrow::after {
  content: '';
  width: 20px; height: 1px;
  background: var(--red); opacity: 0.5;
  animation: eyebrowLine 2s ease-in-out infinite alternate;
}
@keyframes eyebrowLine {
  from { width: 12px; opacity: 0.3; }
  to   { width: 24px; opacity: 0.7; }
}

/* ── Badge hover bounce ──────────────────────────────────── */
.badge {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.menu-card:hover .badge { transform: scale(1.05); }

/* ── Logo hover ──────────────────────────────────────────── */
.nav-logo {
  transition: transform 0.3s cubic-bezier(0.34,1.3,0.64,1);
}
.nav-logo:hover { transform: scale(1.04); }

/* ── Back-to-top hover ───────────────────────────────────── */
#back-top {
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
#back-top:hover { transform: scale(1.12) translateY(-3px) !important; }

/* ── Cart sidebar slide smooth ───────────────────────────── */
#cart-sidebar {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Ken Burns enhanced ──────────────────────────────────── */
.hero-bg {
  animation: kenburns 28s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* ── Particles canvas ────────────────────────────────────── */
#canvas-bg { will-change: auto; }

/* ── Button group stagger ────────────────────────────────── */
.hero-buttons .btn-hero-primary { animation: btnFadeUp 0.7s 1.8s ease both; }
.hero-buttons .btn-hero-ghost { animation: btnFadeUp 0.7s 2.0s ease both; }
.hero-buttons a:nth-child(3) { animation: btnFadeUp 0.7s 2.2s ease both; }
@keyframes btnFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero content stagger */
.hero-eyebrow { animation: btnFadeUp 0.8s 0.6s ease both; }
.hero-title   { animation: btnFadeUp 0.9s 0.9s ease both; }
.hero-subtitle { animation: btnFadeUp 0.7s 1.2s ease both; }
.hero-meniu-zilei { animation: btnFadeUp 0.7s 1.5s ease both; }
.hero-flag { animation: btnFadeUp 0.6s 0.3s ease both; }

/* ── Scroll-triggered section transitions ────────────────── */
.reveal, .reveal-l, .reveal-r, .reveal-s {
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1),
              transform 0.9s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Flag bar hover animate ─────────────────────────────── */
.hero-flag:hover .r { transform: scaleX(1.4) !important; }
.hero-flag:hover .g { transform: scaleX(1.4) !important; }
.hero-flag span { transition: transform 0.3s ease; }

/* ── Inline loading spinner ──────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Input focus glow ────────────────────────────────────── */
.form-control:focus, .fi:focus, .search-inp:focus {
  box-shadow: 0 0 0 3px rgba(230,51,41,0.15) !important;
}

/* ── Toggle transition ───────────────────────────────────── */
.tog-track, .tog-track::after {
  transition: all 0.3s cubic-bezier(0.34,1.2,0.64,1) !important;
}

/* ── Image hover overlay ──────────────────────────────────── */
.about-mosaic-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(8,8,8,0.5) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.about-mosaic-img:hover::after { opacity: 1; }