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

     glow → GELATO (moving gold-cream gradient masked to gelato-back.png) →
     dolce → photo (GELATO_FRONT shine already clipped inside, baked in) →
     coffee-sub → 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-eiscafe-chrome.js):
   1. A soft amber ambient glow behind everything, slowly drifting on its
      own plus nudged a little by the cursor.
   2. The big "GELATO" word is filled with a moving gold-cream gradient,
      masked to its exact letter shapes — the gradient position tracks
      the cursor so the shine shifts as you move across the hero.
   ========================================================================== */

.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 amber, slow drift + cursor nudge ---------- */
.fc-glow {
  background:
    radial-gradient(ellipse 48% 42% at calc(50% + var(--glow-x, 0px)) calc(44% + var(--glow-y, 0px)),
      rgba(225,175,80,.26) 0%, rgba(225,175,80,.1) 45%, transparent 72%);
  animation: fcGlowDrift 16s ease-in-out infinite, fcFade 1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes fcGlowDrift {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

/* ---------- GELATO: moving gold-cream gradient, masked to the letters ---------- */
.fc-gelato-fill {
  -webkit-mask-image: url("../images/industries/eiscafe/gelato-back.png");
  mask-image: url("../images/industries/eiscafe/gelato-back.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: linear-gradient(120deg,
    #fff6e6 0%, #f3d9a0 18%, #e0a94a 38%, #c9862c 52%,
    #f3d9a0 70%, #fff6e6 86%, #e8bf74 100%);
  background-size: 300% 300%;
  background-position: var(--gelato-x, 50%) var(--gelato-y, 50%);
}

/* ---------- entry motion, respecting PSD stacking ---------- */
.fc-layer { opacity: 0; animation: fcFade 1s cubic-bezier(.16,1,.3,1) forwards; }
.fc-glow { animation-delay: 0s; }
.fc-gelato-fill { animation-delay: .2s; }
.fc-dolce { animation-delay: .35s; }
.fc-photo { animation-delay: .5s; }
.fc-coffee-sub { animation-delay: .8s; }
.fc-tagline-img { animation-delay: 1.05s; }
.fc-lines-your { animation-delay: .15s; }
.fc-lines-divider-icon { animation-delay: 1.15s; }
@keyframes fcFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fc-hero .fc-layer { animation: none !important; opacity: 1 !important; }
  .fc-glow { filter: none !important; }
  .fc-gelato-fill { background-position: 50% 50% !important; }
}