/* MOGAMBO — styles of the animation engine (js/fx/*.js, MG_FX).
 * Classes made by the engine start with .mgfx-; the hooks in the page markup are .fx-armed
 * (title hidden right before an effect takes over), .fx-fallback (short CSS reveal when the
 * images or the code fail) and the slots .fx-pole / [data-fx-decor].
 */

/* ---------- hand-over: hidden only while an effect owns the title ---------- */
/* (no !important: the effect's inline clip-path takes over from this one) */
.fx-armed { clip-path: polygon(0 0, 0 0, 0 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0); }

.fx-fallback { animation: mgfx-fallback .9s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
@keyframes mgfx-fallback {
  from { opacity: 0; transform: translateY(.18em); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- effect layer: absolute, at the top of the page, above the content ---------- */
.mgfx-layer {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  overflow-x: clip; overflow-y: visible; /* tools flying off the side never widen the page */
  z-index: var(--z-fx, 40); pointer-events: none;
}
.mgfx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mgfx-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mgfx-glyphs { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.mgfx-g {
  position: absolute; display: block; white-space: pre; margin: 0; padding: 0; border: 0;
  letter-spacing: 0; word-spacing: 0; text-indent: 0; text-decoration: none; line-height: normal;
  font-synthesis: none;
}
.mgfx-canvas {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: var(--z-fx, 40);
}

/* ---------- tools (real images moved by transforms) ---------- */
.mgfx-tool { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.mgfx-img { display: block; max-width: none; max-height: none; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.mgfx-sc-half { position: absolute; left: 0; top: 0; }
.mgfx-sc-screw { position: absolute; }
.mgfx-sc-glint {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255, 252, 245, .92) 50%, transparent 60% 100%);
  background-size: 300% 100%; background-repeat: no-repeat;
  mix-blend-mode: screen;
}
/* water beads on the wet letters (dryer, spray): clear, a bright highlight dot, a darker lower rim */
.mgfx-bead {
  position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 11%, rgba(255, 255, 255, .35) 19%, transparent 30%),
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .02) 0 46%, rgba(30, 22, 16, .22) 66%, rgba(20, 14, 10, .5) 82%, transparent 92%),
    radial-gradient(circle at 50% 40%, rgba(255, 250, 240, .16), rgba(255, 250, 240, .05) 60%, transparent 72%);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .28);
}

/* scissors: faint dashed cut line, eaten by the blades */
.mgfx-cutline { position: absolute; pointer-events: none; }

/* dryer: warm air glow + heat shimmer in front of the nozzle */
.mgfx-glow {
  position: absolute; left: 0; top: 0; transform-origin: 0 50%; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 22% 50%, rgba(255, 210, 160, .38), rgba(255, 186, 120, .14) 55%, transparent 78%);
  mix-blend-mode: screen;
}
/* dryer: thin warm streaks of moving air in the jet */
.mgfx-streak {
  position: absolute; left: 0; top: 0; height: 2px; transform-origin: 0 50%; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 226, 190, 0), rgba(255, 238, 218, .75) 35%, rgba(255, 226, 190, 0));
  mix-blend-mode: screen;
}
.mgfx-shimmer {
  position: absolute; left: 0; top: 0; transform-origin: 0 50%; pointer-events: none; border-radius: 50%;
  -webkit-backdrop-filter: blur(.7px); backdrop-filter: blur(.7px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
}

/* spray: the visible mist cone (a soft wedge from the nozzle), cut to the title's box */
.mgfx-cone-clip { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; }
.mgfx-cone {
  position: absolute; left: 0; top: 0; transform-origin: 0 50%; pointer-events: none;
  background: radial-gradient(ellipse 100% 70% at 0% 50%, rgba(240, 240, 235, .26), rgba(240, 240, 235, .17) 50%, rgba(240, 240, 235, .11) 85%, transparent 100%);
  -webkit-clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
}
/* clipper: the tool's wrapper (drawn whole, no mask) */
.mgfx-fadebody { position: absolute; left: 0; top: 0; pointer-events: none; }

/* copies of the letters */
.mgfx-spray-wrap, .mgfx-rough-wrap { position: absolute; left: 0; top: 0; pointer-events: none; }
/* wrapper that carries the dryer's moving mask (no compositing hints on the filtered copy:
   a composited child under a moving mask needs a render surface every frame) */
.mgfx-wet-clip { position: absolute; left: 0; top: 0; pointer-events: none; }
/* the title's letters drawn once into a canvas (the wet looks), placed like the DOM copies */
.mgfx-bake { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.mgfx-comb-g .mgfx-g { will-change: transform; }

/* razor: lather patches (foam photos baked once into a canvas, with their contact shadow) */
.mgfx-foam-clip { position: absolute; left: 0; top: 0; pointer-events: none; }
.mgfx-bladefoam .mgfx-img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }

/* razor: a gleam across the clean letters at the end */
.mgfx-gleam-g .mgfx-g {
  color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, transparent 0 35%, rgba(255, 250, 238, .95) 50%, transparent 65% 100%);
  background-repeat: no-repeat;
}

/* ---------- barber pole ---------- */
.fx-pole { display: none; }
@media (min-width: 1024px) {
  .fx-pole.mgfx-pole-on {
    --mgfx-pole-p: 48px;
    display: flex; flex-direction: column; align-items: center;
    position: fixed; right: 12px; top: 50%; z-index: var(--z-fx, 40);
    pointer-events: none; user-select: none;
    opacity: 0; transform: translate3d(14px, -50%, 0);
    transition: opacity .6s var(--ease-out, ease), transform .8s var(--ease-out, ease);
  }
  .fx-pole.mgfx-pole-on.is-shown { opacity: 1; transform: translate3d(0, -50%, 0); }
}
.mgfx-pole-cap { position: relative; z-index: 1; display: block; max-width: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
.mgfx-pole-glass {
  position: relative; height: clamp(180px, 34vh, 300px); overflow: hidden;
  background: #2a2522;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.mgfx-pole-roll { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }
.mgfx-pole-tex {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 2 * var(--mgfx-pole-p, 48px));
  background-repeat: repeat;
  animation: mgfx-pole-drift 7s linear infinite;
  will-change: transform;
}
@keyframes mgfx-pole-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-1 * var(--mgfx-pole-p, 48px)), 0); } }
.mgfx-pole-fill {
  /* scroll progress: a light dimming (25 % at most) with a soft 12 px top edge, slid down by the engine */
  position: absolute; left: 0; right: 0; top: -12px; height: calc(100% + 12px);
  background: linear-gradient(180deg, rgba(13, 12, 11, 0), rgba(13, 12, 11, .25) 12px, rgba(13, 12, 11, .25));
  transition: transform .25s linear;
}
.mgfx-pole-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 16%, rgba(255, 255, 255, .16) 24%, transparent 33%, transparent 72%, rgba(255, 255, 255, .06) 80%, rgba(0, 0, 0, .32));
  box-shadow: inset 0 7px 6px -5px rgba(0, 0, 0, .7), inset 0 -7px 6px -5px rgba(0, 0, 0, .7);
}
.mgfx-pole-static .mgfx-pole-tex { animation: none; }
.mgfx-pole-static .mgfx-pole-fill, .mgfx-pole-static.fx-pole { transition: none; }

/* ---------- hero decor (inside [data-fx-decor], behind the hero text) ---------- */
.mgfx-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mgfx-decor-item {
  position: absolute; width: 0; height: 0;
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 1.1s var(--ease-out, ease), transform 1.4s var(--ease-out, ease);
}
.mgfx-decor.is-in .mgfx-decor-item { opacity: var(--mgfx-a, .3); transform: none; }
.mgfx-decor-par { position: absolute; left: 0; top: 0; }
.mgfx-decor-float { position: absolute; left: 0; top: 0; animation: mgfx-float 8s ease-in-out infinite alternate; }
@keyframes mgfx-float {
  0% { transform: translate3d(0, -5px, 0) rotate(-1.2deg); }
  100% { transform: translate3d(0, 6px, 0) rotate(1.4deg); }
}
.mgfx-decor-static .mgfx-decor-item { transition: none; }
.mgfx-decor-static .mgfx-decor-float { animation: none; }

/* ---------- scissors cursor (fine pointers) ---------- */
.mgfx-cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 1000; pointer-events: none; transition: opacity .18s; }
.mgfx-cursor.is-hidden { opacity: 0; }

/* ---------- no motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-armed { clip-path: none; -webkit-clip-path: none; }
  .fx-fallback { animation: none; }
  .mgfx-decor-float, .mgfx-pole-tex { animation: none; }
  .mgfx-decor-item, .fx-pole.mgfx-pole-on, .mgfx-pole-fill { transition: none; }
}
@media print {
  .mgfx-layer, .mgfx-canvas, .mgfx-cursor, .fx-pole, .mgfx-decor { display: none !important; }
  .fx-armed { clip-path: none; -webkit-clip-path: none; }
}