/* ==========================================================================
   FRISEUR HERO — exact-layer composite
   Every visual element below is a native 2400x1800 PNG exported straight
   from friseur-hero-master.psd, one per PSD layer/group, stacked in the
   exact same order as the PSD (back to front):

     glow → hair-back → model (base + hover-revealed highlight) →
     hair-front → stylist → elan → 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 —
   no per-element percentage math, no drift from the source file.

   Two live mouse effects:
   1. A silver sweep highlight masked to each text PNG's own alpha (so it
      only lights up the glyphs, never the transparent gaps), position
      driven by the cursor.
   2. model-highlight.png is masked by a soft circle that follows the
      cursor, so the colored hair-highlight only shows near the pointer.
   ========================================================================== */

.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;
}

.fc-glow {
  background: radial-gradient(ellipse 46% 55% at 51% 42%, rgba(168,85,247,.22) 0%, transparent 70%);
}

.fc-model__highlight {
  -webkit-mask-image: radial-gradient(circle var(--fc-r, 260px) at var(--fc-mx, 50%) var(--fc-my, 50%), #000 60%, transparent 100%);
  mask-image: radial-gradient(circle var(--fc-r, 260px) at var(--fc-mx, 50%) var(--fc-my, 50%), #000 60%, transparent 100%);
}

/* silver sweep overlays — masked to the alpha of their matching PNG,
   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%;
}
.fc-sweep--hair-back  { -webkit-mask-image: url("../images/demos/friseur/hair-back.png");  mask-image: url("../images/demos/friseur/hair-back.png"); }
.fc-sweep--hair-front { -webkit-mask-image: url("../images/demos/friseur/hair-front.png"); mask-image: url("../images/demos/friseur/hair-front.png"); }
.fc-sweep--stylist    { -webkit-mask-image: url("../images/demos/friseur/stylist.png");    mask-image: url("../images/demos/friseur/stylist.png"); }
.fc-sweep--elan       { -webkit-mask-image: url("../images/demos/friseur/elan.png");       mask-image: url("../images/demos/friseur/elan.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-hair-back { animation-delay: .2s; }
.fc-model-base, .fc-model-highlight { animation-delay: .4s; }
.fc-hair-front { animation-delay: .7s; }
.fc-stylist, .fc-sweep--stylist { animation-delay: .9s; }
.fc-elan, .fc-sweep--elan { animation-delay: .15s; }
.fc-tagline-img { animation-delay: 1.1s; }
.fc-lines-your { animation-delay: .15s; }
.fc-lines-divider-icon { animation-delay: 1.2s; }
.fc-sweep--hair-back { animation-delay: .2s; }
.fc-sweep--hair-front { animation-delay: .7s; }
@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-model__highlight { -webkit-mask-image: none !important; mask-image: none !important; opacity: .5; }
  .fc-sweep { display: none; }
}