/* ==========================================================================
   RESTAURANT HERO — exact-layer composite
   Every visual element below is a native 2400x1800 PNG exported straight
   from Vero.psd, one per PSD layer/group, stacked back to front:

     glow → taste-back → photo → taste-front → leaf-topleft/topright →
     experience → vero → leaf-bottomleft/bottomright → tagline →
     lines-your → lines-divider-icon

   Because every PNG shares the same 2400x1800 canvas, stacking them with
   inset:0 inside one aspect-ratio(2400/1800) box lines them up perfectly.

   Live mouse effects (see js/hero-restaurant-chrome.js):
   1. A soft orange ambient glow behind everything, slowly drifting on its
      own plus nudged a little by the cursor (depth parallax).
   2. A silver sweep highlight masked to taste-front.png's own alpha, so it
      only lights up the TASTE glyphs, driven by the cursor.
   3. Four basil leaves (the ones off the plate) float independently —
      a gentle idle drift plus cursor parallax. The two top leaves sit in a
      higher stacking layer than TASTE so they can drift across the big
      outline letters instead of staying hidden behind them.
   ========================================================================== */

.fc-hero {
  position: relative;
  background: #050606;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4vw;
  min-height: 100svh;
}

.fc-stage {
  position: relative;
  width: min(1600px, 100%);
  aspect-ratio: 2400 / 1800;
}

.fc-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- ambient glow: soft orange, slow drift + cursor nudge ---------- */
.fc-glow {
  background:
    radial-gradient(ellipse 48% 42% at calc(50% + var(--glow-x, 0px)) calc(46% + var(--glow-y, 0px)),
      rgba(255,122,50,.28) 0%, rgba(255,122,50,.12) 45%, transparent 72%);
  animation: fcGlowDrift 16s ease-in-out infinite, fcFade 1s cubic-bezier(.16,1,.3,1) forwards;
  will-change: background-position;
}
@keyframes fcGlowDrift {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

.fc-leaf { z-index: 3; }
.fc-taste-front { z-index: 2; }
/* top leaves stacked above TASTE so they can cross over the big letters */
.fc-leaf--topleft, .fc-leaf--topright { z-index: 4; }

/* silver sweep overlay — masked to taste-front.png's own alpha, a moving
   gradient band blended on top for the "light passing over chrome" look,
   position driven by the cursor via --fc-sweep (%) */
.fc-sweep {
  background: linear-gradient(
    100deg,
    transparent calc(var(--fc-sweep, 30%) - 16%),
    rgba(255,255,255,.95) var(--fc-sweep, 30%),
    transparent calc(var(--fc-sweep, 30%) + 16%)
  );
  mix-blend-mode: overlay;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 2;
}
.fc-sweep--taste-front {
  -webkit-mask-image: url("../images/industries/restaurant/taste-front.png");
  mask-image: url("../images/industries/restaurant/taste-front.png");
}

/* ---------- entry motion, respecting PSD stacking ---------- */
.fc-layer, .fc-sweep { opacity: 0; animation: fcFade 1s cubic-bezier(.16,1,.3,1) forwards; }
.fc-glow { animation-delay: 0s; }
.fc-taste-back { animation-delay: .2s; }
.fc-photo { animation-delay: .4s; }
.fc-taste-front, .fc-sweep--taste-front { animation-delay: .7s; }
.fc-leaf--topleft { animation-delay: .85s; }
.fc-leaf--topright { animation-delay: .95s; }
.fc-experience { animation-delay: .9s; }
.fc-vero { animation-delay: .55s; }
.fc-leaf--bottomleft { animation-delay: 1s; }
.fc-leaf--bottomright { animation-delay: 1.1s; }
.fc-tagline-img { animation-delay: 1.15s; }
.fc-lines-your { animation-delay: .15s; }
.fc-lines-divider-icon { animation-delay: 1.2s; }
@keyframes fcFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fc-hero .fc-layer, .fc-hero .fc-sweep { animation: none !important; opacity: 1 !important; }
  .fc-sweep { display: none; }
  .fc-glow { filter: none !important; }
}