/* Hoofar Andish — interactive lab hero. Every rule is scoped to .hl-hero. */
.hl-hero {
  --paper: #F4F2EE;
  --ink: #2E2A26;
  --accent: #B8431F;
  /* source image: 1672 × 941 px */
  --img-ratio: 1.7768;
  --reserve-h: 190px;   /* desktop: space kept below the hero, frame height unchanged */
}

.hl-hero *, .hl-hero *::before, .hl-hero *::after { box-sizing: border-box; }
.hl-hero {
  position: relative;
  display: block;
  color: var(--ink);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Image frame ---------- */
.hl-hero .frame {
  position: relative;
  width: 100%;
  height: min(calc(100vw / var(--img-ratio)), max(440px, calc(100svh - var(--reserve-h))));
  overflow: hidden;
  background: #E9E6E0;
  direction: ltr;               /* scroll maths in LTR; the label stays RTL */
}
.hl-hero .stage {
  position: absolute;
  inset: 0;
}
.hl-hero .snap { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
.hl-hero .snap-l { left: 0; }
.hl-hero .snap-c { left: 50%; }
.hl-hero .snap-r { right: 0; }
.hl-hero .stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* Same viewBox as the image + "slice" = identical crop to object-fit: cover */
.hl-hero .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hl-hero .scene * { vector-effect: non-scaling-stroke; }

/* ---------- Stroke styles ---------- */
.hl-hero .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }
.hl-hero .ln-g { stroke: var(--ink);   stroke-opacity: .75; }
.hl-hero .ln-p { stroke: var(--paper); stroke-opacity: .8; }
/* halo under lines that cross mixed backgrounds, so the line keeps its own edge */
.hl-hero .halo-g { fill: none; stroke: var(--ink);   stroke-opacity: .5; stroke-width: 3.4; stroke-linecap: round; }
.hl-hero .halo-p { fill: none; stroke: var(--paper); stroke-opacity: .6; stroke-width: 3.4; stroke-linecap: round; }
.hl-hero .dot-p { fill: var(--paper); fill-opacity: .85; stroke: var(--ink); stroke-opacity: .5; stroke-width: .8; }
.hl-hero .dot-g { fill: var(--ink);   fill-opacity: .7; }

/* ---------- Always-on motion ---------- */
/* Water: 5 thin streams per source, each with its own speed */
.hl-hero .stream { fill: none; stroke-linecap: round; stroke-width: 1.2; stroke-dasharray: 12 5; animation: hl-stream 1.6s linear infinite; transition: stroke-width .4s ease; }
.hl-hero .stream-f { stroke: url(#hl-faucet-grad); }
.hl-hero .stream-s { stroke: var(--ink); stroke-opacity: .7; }
@keyframes hl-stream { to { stroke-dashoffset: -34; } }
/* shower (safety hover): irregular streaks, each pattern sums to 100 so the loop is seamless */
.hl-hero .shower-s { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; animation: hl-shower-flow 1.6s linear infinite; }
@keyframes hl-shower-flow { to { stroke-dashoffset: -100; } }

.hl-hero .drop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hl-drop 1.6s ease-in infinite; }
@keyframes hl-drop {
  0%   { transform: translateY(0);   opacity: 0; }
  20%  { opacity: .85; }
  100% { transform: translateY(9px); opacity: 0; }
}

.hl-hero .splash { fill: none; stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hl-splash 1.4s ease-out infinite; }
.hl-hero .ring-p { stroke: var(--paper); }
.hl-hero .ring-g { stroke: var(--ink); }
@keyframes hl-splash {
  0%   { transform: scale(.4); opacity: 0; }
  20%  { opacity: .8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.hl-hero .surface { transform-box: fill-box; transform-origin: center; animation: hl-wobble-surface 4.5s ease-in-out infinite alternate; }
@keyframes hl-wobble-surface {
  from { transform: translateY(.6px) rotate(-.7deg); }
  to   { transform: translateY(-.6px) rotate(.7deg); }
}

.hl-hero .bubble { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hl-bubble 6s ease-in infinite; }
.hl-hero .bubble:nth-of-type(1) { animation-duration: 5.2s; }
.hl-hero .bubble:nth-of-type(2) { animation-duration: 6.4s; animation-delay: -2.1s; }
.hl-hero .bubble:nth-of-type(3) { animation-duration: 5.8s; animation-delay: -3.9s; }
.hl-hero .bubble:nth-of-type(4) { animation-duration: 7.2s; animation-delay: -1.2s; }
.hl-hero .bubble:nth-of-type(5) { animation-duration: 6.8s; animation-delay: -4.8s; }
@keyframes hl-bubble {
  0%   { transform: translateY(0) scale(.6);     opacity: 0; }
  10%  { opacity: .9; }
  86%  { transform: translateY(-48px) scale(1);  opacity: .9; }
  100% { transform: translateY(-50px) scale(1.9); opacity: 0; }
}

.hl-hero .vapor { stroke-dasharray: 38 140; stroke-dashoffset: 38; opacity: 0; animation: hl-vapor 6.5s ease-in-out infinite; }
.hl-hero .vapor-core { stroke: var(--paper); stroke-opacity: .85; stroke-width: 1.2; }
.hl-hero .vapor-rim { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 2.6; stroke-linecap: round; }
@keyframes hl-vapor {
  0%   { stroke-dashoffset: 38;   opacity: 0; transform: translateY(0); }
  20%  { opacity: .75; }
  100% { stroke-dashoffset: -100; opacity: 0; transform: translateY(-6px); }
}

/* ---------- Hover / tap motion (hidden until a zone is active) ---------- */
.hl-hero .fx { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.hl-hero .fx * { animation-play-state: paused; }
.hl-hero .scene[data-active="benching"]    .fx-benching,
.hl-hero .scene[data-active="hood"]        .fx-hood,
.hl-hero .scene[data-active="equipment"]   .fx-equipment,
.hl-hero .scene[data-active="safety"]      .fx-safety,
.hl-hero .scene[data-active="consumables"] .fx-consumables { opacity: 1; }
.hl-hero .scene[data-active="benching"]    .fx-benching *,
.hl-hero .scene[data-active="hood"]        .fx-hood *,
.hl-hero .scene[data-active="equipment"]   .fx-equipment *,
.hl-hero .scene[data-active="safety"]      .fx-safety *,
.hl-hero .scene[data-active="consumables"] .fx-consumables * { animation-play-state: running; }
/* mobile tap: run the action once */
.hl-hero .scene[data-once] .fx * { animation-iteration-count: 1; }

.hl-hero .scene[data-done] .fx { opacity: 0; }

.hl-hero .scene[data-active="fittings"] #hl-faucet-water .stream { stroke-width: 2; }

/* Benching: light sliding along the worktop edges */
.hl-hero .slide { stroke-dasharray: 9 120; stroke-dashoffset: 9; animation: hl-slide 2.6s ease-in-out infinite; }
@keyframes hl-slide { to { stroke-dashoffset: -100; } }

/* Fume hood: dashed streamlines flowing into the sash, fading toward the interior */
.hl-hero .air { fill: none; stroke: url(#hl-air-fade); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 4 3; animation: hl-air 1s linear infinite; }
@keyframes hl-air { to { stroke-dashoffset: -14; } }
.hl-hero .particle { fill: var(--ink); fill-opacity: .85; }
.hl-hero #hl-hood-air { opacity: .5; transition: opacity .3s ease; }
.hl-hero .scene[data-active="hood"] #hl-hood-air { opacity: .85; }

/* Equipment: indicator pulse + heat */
.hl-hero .glow { transform-box: fill-box; transform-origin: center; animation: hl-glow 1.6s ease-out infinite; }
@keyframes hl-glow {
  0%   { transform: scale(.8); opacity: .95; }
  100% { transform: scale(2.4); opacity: 0; }
}
.hl-hero .heat { opacity: 0; animation: hl-heat 2.4s ease-in-out infinite; }
.hl-hero .heat:nth-of-type(2) { animation-delay: .5s; }
.hl-hero .heat:nth-of-type(3) { animation-delay: 1s; }
@keyframes hl-heat {
  0%   { transform: translateY(4px);  opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

/* Safety: eyewash arcs */
.hl-hero .arc { stroke-dasharray: 100; stroke-dashoffset: 100; animation: hl-arc 1.8s ease-out infinite; }
@keyframes hl-arc {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  55%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
.hl-hero .spray { opacity: 0; transform-box: fill-box; animation: hl-spray 1.8s ease-in infinite; }
@keyframes hl-spray {
  0%, 50% { transform: translateY(0); opacity: 0; }
  60%     { opacity: .85; }
  100%    { transform: translateY(10px); opacity: 0; }
}

/* Consumables: outline traced around boxes */
.hl-hero .trace { stroke-dasharray: 100; stroke-dashoffset: 100; animation: hl-trace 2.8s ease-in-out infinite; }
@keyframes hl-trace {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  65%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* ---------- Outline wobble: hand-drawn stroke per zone; only the stroke shakes ---------- */
.hl-hero .ol { opacity: 0; transition: opacity .3s ease; pointer-events: none; filter: url(#hl-shake); }
.hl-hero .ol .core { fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.hl-hero .ol .rim { fill: none; stroke-width: 4.1; stroke-linecap: round; stroke-linejoin: round; }   /* halo: 2px wider */
.hl-hero .ol-light .core { stroke: var(--ink);   stroke-opacity: 1; }    /* over light areas */
.hl-hero .ol-light .rim { stroke: var(--paper); stroke-opacity: .5; }
.hl-hero .ol-dark  .core { stroke: var(--paper); stroke-opacity: 1; }    /* over dark areas */
.hl-hero .ol-dark  .rim { stroke: var(--ink);   stroke-opacity: .5; }
.hl-hero .scene[data-outline="benching"]    .ol-benching,
.hl-hero .scene[data-outline="hood"]        .ol-hood,
.hl-hero .scene[data-outline="equipment"]   .ol-equipment,
.hl-hero .scene[data-outline="glassware"]   .ol-glassware,
.hl-hero .scene[data-outline="chemicals"]   .ol-chemicals,
.hl-hero .scene[data-outline="safety"]      .ol-safety,
.hl-hero .scene[data-outline="consumables"] .ol-consumables,
.hl-hero .scene[data-outline="fittings"]    .ol-fittings { opacity: 1; }
.hl-hero .scene[data-outline="consumables"] .ol-consumables use { animation-play-state: running; }
.hl-hero .ol-consumables use { animation-play-state: paused; }
.hl-hero .scene[data-once] .ol-consumables use { animation-iteration-count: 1; }

/* ---------- Hit areas ---------- */
.hl-hero .hit { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.hl-hero .hit polygon {
  fill: var(--accent);
  fill-opacity: 0;
  stroke: var(--ink);
  stroke-opacity: 0;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  pointer-events: all;
  transition: fill-opacity .2s ease;
}
.hl-hero .hit:hover polygon,
.hl-hero .hit.is-active polygon { fill-opacity: .07; }
.hl-hero .hit:focus-visible polygon { stroke-opacity: .8; fill-opacity: .07; }

/* ---------- Pill ---------- */
.hl-hero .pill {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(244, 242, 238, .95);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  direction: rtl;
  box-shadow: 0 2px 10px rgba(46, 42, 38, .16);
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.hl-hero .pill.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pan hint (mobile only) ---------- */
.hl-hero .pan-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .45s ease;
}
.hl-hero .pan-hint.is-gone { opacity: 0; }
.hl-hero .pan-hint svg { display: block; overflow: visible; }
.hl-hero .ph-rim { fill: none; stroke: var(--paper); stroke-opacity: .6; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.hl-hero .ph-line { fill: none; stroke: var(--ink);   stroke-opacity: .75; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hl-hero .ph-dot { fill: var(--ink); fill-opacity: .7; stroke: var(--paper); stroke-opacity: .7; stroke-width: 1.5; animation: hl-pan-swipe 2.4s ease-in-out infinite alternate; }
@keyframes hl-pan-swipe { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

/* ---------- Mobile: portrait frame, full-height image pans sideways ---------- */
@media (max-width: 767px) {
  .hl-hero .frame {
    height: auto;
    aspect-ratio: 4 / 5;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .hl-hero .frame::-webkit-scrollbar { display: none; }
  .hl-hero .stage { position: relative; inset: auto; height: 100%; width: auto; aspect-ratio: 1672 / 941; }
  .hl-hero .snap-l { scroll-snap-align: start; }
  .hl-hero .snap-c { scroll-snap-align: center; }
  .hl-hero .snap-r { scroll-snap-align: end; }
  .hl-hero .pan-hint { display: block; }
  .hl-hero .pill { font-size: 13px; }
}

/* ---------- Reduced motion: static state + hover colour only ---------- */
@media (prefers-reduced-motion: reduce) {
  .hl-hero .scene *,
  .hl-hero .scene *::before { animation: none !important; transition: none !important; }
  .hl-hero .drop,
  .hl-hero .spray,
  .hl-hero .heat,
  .hl-hero .glow,
  .hl-hero .splash { opacity: 0 !important; }
  .hl-hero .stream { stroke-dasharray: none; }
  .hl-hero .bubble { opacity: .85; }
  .hl-hero .vapor { opacity: .5; stroke-dasharray: none; }
  .hl-hero .fx { display: none; }
  .hl-hero .particle { display: none; }
  .hl-hero .ol { filter: none; }
  .hl-hero .pill { transition: none; }
  .hl-hero .ph-dot { animation: none; }
  .hl-hero .pan-hint { transition: none; }
}