{"id":2,"date":"2026-06-03T00:27:19","date_gmt":"2026-06-02T20:57:19","guid":{"rendered":"http:\/\/mahlern.com\/?page_id=2"},"modified":"2026-08-01T17:32:34","modified_gmt":"2026-08-01T14:02:34","slug":"%d8%a8%d8%b1%da%af%d9%87-%d9%86%d9%85%d9%88%d9%86%d9%87","status":"publish","type":"page","link":"https:\/\/mahlern.com\/","title":{"rendered":"\u0628\u0631\u06af\u0647 \u0646\u0645\u0648\u0646\u0647"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8be396 e-con-full e-flex e-con e-parent\" data-id=\"d8be396\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-591190c elementor-widget elementor-widget-html\" data-id=\"591190c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     MAHLERN ACADEMY \u2014 Cinematic Hero v4 (production)\r\n     Nav (glass, sticky) + Loader + Video gate + Bottom Ticker\r\n     Minimal luxury hero: single CTA, no stats \/ no badges\r\n============================================================ -->\r\n<div class=\"mhlhero-root\" dir=\"rtl\" data-mhl-hero>\r\n\r\n  <!-- ===== LOADER ===== -->\r\n  <div class=\"mhlhero-loader\" id=\"mhlhero-loader\" role=\"status\" aria-live=\"polite\">\r\n    <canvas class=\"mhlhero-loader-canvas\" aria-hidden=\"true\"><\/canvas>\r\n    <div class=\"mhlhero-loader-glow\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-loader-core\">\r\n      <div class=\"mhlhero-loader-ring\"><\/div>\r\n      <div class=\"mhlhero-loader-ring mhlhero-loader-ring--2\"><\/div>\r\n      <div class=\"mhlhero-loader-ring mhlhero-loader-ring--3\"><\/div>\r\n      <img class=\"mhlhero-loader-logo\" src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/06\/cropped-icon.png\" alt=\"MAHLERN\" width=\"64\" height=\"64\" decoding=\"async\"\/>\r\n    <\/div>\r\n    <div class=\"mhlhero-loader-word\">MAHLERN<\/div>\r\n    <div class=\"mhlhero-loader-tag\">ACADEMY OF HAIR COLOR<\/div>\r\n    <div class=\"mhlhero-loader-bar\"><span class=\"mhlhero-loader-fill\"><\/span><\/div>\r\n    <div class=\"mhlhero-loader-pct\">0%<\/div>\r\n  <\/div>\r\n\r\n  <!-- ===== NAVIGATION ===== -->\r\n  <header class=\"mhlhero-nav\" data-mhl-nav>\r\n    <div class=\"mhlhero-nav-inner\">\r\n\r\n      <a class=\"mhlhero-nav-logo\" href=\"#\" aria-label=\"MAHLERN Academy\">\r\n        <img loading=\"lazy\" src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/06\/cropped-icon.png\" alt=\"\" width=\"34\" height=\"34\" decoding=\"async\" loading=\"lazy\"\/>\r\n        <span class=\"mhlhero-nav-logo-txt\">\r\n          <b>MAHLERN<\/b>\r\n          <i>ACADEMY<\/i>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <nav class=\"mhlhero-nav-links\" aria-label=\"\u0645\u0646\u0648\u06cc \u0627\u0635\u0644\u06cc\">\r\n        <a href=\"#\" class=\"mhlhero-nav-link is-active\"><span>\u062e\u0627\u0646\u0647<\/span><\/a>\r\n        <a href=\"#courses\" class=\"mhlhero-nav-link\"><span>\u062f\u0648\u0631\u0647\u200c\u0647\u0627<\/span><\/a>\r\n        <a href=\"#masters\" class=\"mhlhero-nav-link\"><span>\u0645\u062f\u0631\u0633\u0627\u0646<\/span><\/a>\r\n        <a href=\"#gallery\" class=\"mhlhero-nav-link\"><span>\u06af\u0627\u0644\u0631\u06cc<\/span><\/a>\r\n        <a href=\"#about\" class=\"mhlhero-nav-link\"><span>\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/span><\/a>\r\n        <a href=\"#contact\" class=\"mhlhero-nav-link\"><span>\u062a\u0645\u0627\u0633<\/span><\/a>\r\n      <\/nav>\r\n\r\n      <div class=\"mhlhero-nav-side\">\r\n        <a href=\"#enroll\" class=\"mhlhero-nav-cta\" data-magnetic>\r\n          <span>\u062b\u0628\u062a\u200c\u0646\u0627\u0645<\/span>\r\n          <span class=\"mhlhero-nav-cta-shine\" aria-hidden=\"true\"><\/span>\r\n        <\/a>\r\n        <button class=\"mhlhero-burger\" type=\"button\" aria-label=\"\u0645\u0646\u0648\" aria-expanded=\"false\" aria-controls=\"mhlhero-drawer\">\r\n          <span><\/span><span><\/span><span><\/span>\r\n        <\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n    <span class=\"mhlhero-nav-hair\" aria-hidden=\"true\"><\/span>\r\n  <\/header>\r\n\r\n  <!-- mobile drawer -->\r\n  <div class=\"mhlhero-drawer\" id=\"mhlhero-drawer\" aria-hidden=\"true\">\r\n    <div class=\"mhlhero-drawer-bg\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-drawer-panel\">\r\n      <div class=\"mhlhero-drawer-head\">\r\n        <span class=\"mhlhero-drawer-brand\">MAHLERN<\/span>\r\n        <button class=\"mhlhero-drawer-close\" type=\"button\" aria-label=\"\u0628\u0633\u062a\u0646 \u0645\u0646\u0648\">\r\n          <span><\/span><span><\/span>\r\n        <\/button>\r\n      <\/div>\r\n      <nav class=\"mhlhero-drawer-links\" aria-label=\"\u0645\u0646\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644\">\r\n        <a href=\"#\" class=\"mhlhero-drawer-link\"><em>01<\/em><span>\u062e\u0627\u0646\u0647<\/span><\/a>\r\n        <a href=\"#courses\" class=\"mhlhero-drawer-link\"><em>02<\/em><span>\u062f\u0648\u0631\u0647\u200c\u0647\u0627<\/span><\/a>\r\n        <a href=\"#masters\" class=\"mhlhero-drawer-link\"><em>03<\/em><span>\u0645\u062f\u0631\u0633\u0627\u0646<\/span><\/a>\r\n        <a href=\"#gallery\" class=\"mhlhero-drawer-link\"><em>04<\/em><span>\u06af\u0627\u0644\u0631\u06cc<\/span><\/a>\r\n        <a href=\"#about\" class=\"mhlhero-drawer-link\"><em>05<\/em><span>\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/span><\/a>\r\n        <a href=\"#contact\" class=\"mhlhero-drawer-link\"><em>06<\/em><span>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/span><\/a>\r\n      <\/nav>\r\n      <a href=\"#enroll\" class=\"mhlhero-drawer-cta\">\u0634\u0631\u0648\u0639 \u062b\u0628\u062a\u200c\u0646\u0627\u0645<\/a>\r\n      <div class=\"mhlhero-drawer-foot\">\r\n        <span>ACADEMY OF HAIR COLOR<\/span>\r\n        <span class=\"mhlhero-drawer-line\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ===== HERO ===== -->\r\n  <section class=\"mhlhero-stage\">\r\n\r\n    <!-- video -->\r\n    <div class=\"mhlhero-video-wrap\" aria-hidden=\"true\">\r\n      <video class=\"mhlhero-video\" muted loop playsinline autoplay disablepictureinpicture\r\n        preload=\"metadata\" tabindex=\"-1\"\r\n        poster=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/06\/cropped-icon.png\">\r\n        <source data-src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/07\/Luxury_hair_color_transformation\u2026_202607232331.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <div class=\"mhlhero-video-fallback\" aria-hidden=\"true\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- cinematic layers -->\r\n    <div class=\"mhlhero-mesh\" aria-hidden=\"true\">\r\n      <span class=\"mhlhero-blob mhlhero-blob--1\"><\/span>\r\n      <span class=\"mhlhero-blob mhlhero-blob--2\"><\/span>\r\n      <span class=\"mhlhero-blob mhlhero-blob--3\"><\/span>\r\n    <\/div>\r\n    <div class=\"mhlhero-tint\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-aurora\" aria-hidden=\"true\"><\/div>\r\n    <canvas class=\"mhlhero-particles\" aria-hidden=\"true\"><\/canvas>\r\n    <div class=\"mhlhero-lightspot\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-grain\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-vignette\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-scanline\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlhero-edge\" aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- content -->\r\n    <div class=\"mhlhero-inner\">\r\n      <div class=\"mhlhero-content\" data-tilt>\r\n\r\n        <div class=\"mhlhero-brand\">\r\n          <span class=\"mhlhero-brand-dot\"><\/span>\r\n          <span class=\"mhlhero-brand-word\">MAHLERN<\/span>\r\n          <span class=\"mhlhero-brand-sub\">ACADEMY OF HAIR COLOR<\/span>\r\n        <\/div>\r\n\r\n        <h1 class=\"mhlhero-title\">\r\n          <span class=\"mhlhero-line\"><span class=\"mhlhero-line-in\" data-split>\u0647\u0646\u0631 \u0648 \u0639\u0644\u0645<\/span><\/span>\r\n          <span class=\"mhlhero-line\"><span class=\"mhlhero-line-in mhlhero-accent\" data-split>\u0631\u0646\u06af \u0645\u0648<\/span><\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"mhlhero-desc\">\r\n          <span class=\"mhlhero-desc-in\">\r\n            \u0622\u0645\u0648\u0632\u0634 \u062a\u062e\u0635\u0635\u06cc \u0631\u0646\u06af\u060c \u062a\u0631\u06a9\u06cc\u0628 \u0648 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0645\u0648<br>\r\n            \u0627\u0632 \u067e\u0627\u06cc\u0647 \u062a\u0627 \u0633\u0637\u062d \u0627\u0633\u062a\u0627\u062f\u06cc\u060c \u062f\u0631 \u0642\u0644\u0628 \u0635\u0646\u0639\u062a \u0632\u06cc\u0628\u0627\u06cc\u06cc.\r\n          <\/span>\r\n        <\/p>\r\n\r\n        <div class=\"mhlhero-cta-wrap\">\r\n          <a href=\"#enroll\" class=\"mhlhero-cta\" data-magnetic>\r\n            <span class=\"mhlhero-cta-text\">\u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc<\/span>\r\n            <span class=\"mhlhero-cta-arrow\">\u2190<\/span>\r\n            <span class=\"mhlhero-cta-shine\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlhero-cta-glow\" aria-hidden=\"true\"><\/span>\r\n          <\/a>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mhlhero-scroll\" aria-hidden=\"true\">\r\n      <span class=\"mhlhero-scroll-line\"><\/span>\r\n      <span class=\"mhlhero-scroll-txt\">\u0627\u0633\u06a9\u0631\u0648\u0644<\/span>\r\n    <\/div>\r\n\r\n    <!-- ticker -->\r\n    <div class=\"mhlhero-ticker\" aria-hidden=\"true\" data-mhl-ticker>\r\n      <div class=\"mhlhero-ticker-track\">\r\n        <span class=\"mhlhero-ticker-set\">\r\n          \u0628\u0627\u0644\u06cc\u0627\u0698<i>\u25c6<\/i>\r\n          \u06a9\u0627\u0644\u0631 \u0645\u0644\u062a<i>\u25c6<\/i>\r\n          \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a<i>\u25c6<\/i>\r\n          \u0622\u0645\u0628\u0631\u0647<i>\u25c6<\/i>\r\n          \u0631\u0646\u06af \u0641\u0627\u0646\u062a\u0632\u06cc<i>\u25c6<\/i>\r\n          \u062f\u06a9\u0644\u0631\u0647 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<i>\u25c6<\/i>\r\n          \u062a\u0626\u0648\u0631\u06cc \u0631\u0646\u06af<i>\u25c6<\/i>\r\n        <\/span>\r\n\r\n        <span class=\"mhlhero-ticker-set\">\r\n          \u0628\u0627\u0644\u06cc\u0627\u0698<i>\u25c6<\/i>\r\n          \u06a9\u0627\u0644\u0631 \u0645\u0644\u062a<i>\u25c6<\/i>\r\n          \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a<i>\u25c6<\/i>\r\n          \u0622\u0645\u0628\u0631\u0647<i>\u25c6<\/i>\r\n          \u0631\u0646\u06af \u0641\u0627\u0646\u062a\u0632\u06cc<i>\u25c6<\/i>\r\n          \u062f\u06a9\u0644\u0631\u0647 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<i>\u25c6<\/i>\r\n          \u062a\u0626\u0648\u0631\u06cc \u0631\u0646\u06af<i>\u25c6<\/i>\r\n        <\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <div class=\"mhlhero-cursor\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"mhlhero-cursor-dot\" aria-hidden=\"true\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* ================= MAHLERN Hero v4 \u2014 fully scoped ================= *\/\r\n.mhlhero-root{\r\n  --b:#040207;\r\n  --b2:#0a0514;\r\n  --p:#7b3ff2;\r\n  --p2:#4a1fb0;\r\n  --lav:#c9a7ff;\r\n  --gold:#e6c583;\r\n  --gold2:#f6e0b0;\r\n  --nav-h:74px;\r\n  --tick-h:52px;\r\n  --ease:cubic-bezier(.22,.61,.36,1);\r\n  --ease-out:cubic-bezier(.16,1,.3,1);\r\n  position:relative; width:100%; background:var(--b); color:#fff;\r\n  font-family:\"Vazirmatn\",\"IRANSans\",\"Segoe UI\",Tahoma,sans-serif;\r\n  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;\r\n  overflow:hidden; isolation:isolate; direction:rtl;\r\n  contain:layout style;\r\n}\r\n.mhlhero-root *{box-sizing:border-box;}\r\n.mhlhero-root img{max-width:100%;}\r\n.mhlhero-root a{-webkit-tap-highlight-color:transparent;}\r\nbody.mhlhero-noscroll{overflow:hidden!important;}\r\n\r\n\/* ---------- LOADER ---------- *\/\r\n.mhlhero-loader{\r\n  position:fixed; inset:0; z-index:99999; overflow:hidden;\r\n  background:radial-gradient(130% 130% at 50% 42%, #0c0619 0%, #050208 70%, #030105 100%);\r\n  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;\r\n  will-change:opacity;\r\n}\r\n.mhlhero-loader-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }\r\n.mhlhero-loader-glow{\r\n  position:absolute; left:50%; top:44%; width:70vmin; height:70vmin; transform:translate(-50%,-50%);\r\n  background:radial-gradient(circle,rgba(123,63,242,.30),rgba(230,197,131,.08) 45%,transparent 68%);\r\n  filter:blur(30px); pointer-events:none;\r\n}\r\n.mhlhero-loader-core{ position:relative; width:148px; height:148px; display:grid; place-items:center; z-index:2; }\r\n.mhlhero-loader-ring{\r\n  position:absolute; inset:0; border-radius:50%;\r\n  border:1.5px solid transparent;\r\n  border-top-color:var(--lav); border-right-color:rgba(201,167,255,.22);\r\n  animation:mhlhero-spin 1.5s linear infinite;\r\n  will-change:transform;\r\n}\r\n.mhlhero-loader-ring--2{\r\n  inset:16px; border-top-color:var(--gold); border-left-color:rgba(230,197,131,.18);\r\n  animation:mhlhero-spin 2.2s linear infinite reverse;\r\n}\r\n.mhlhero-loader-ring--3{\r\n  inset:32px; border:1px solid rgba(255,255,255,.05);\r\n  border-bottom-color:rgba(201,167,255,.5);\r\n  animation:mhlhero-spin 3.4s linear infinite;\r\n}\r\n@keyframes mhlhero-spin{ to{ transform:rotate(360deg);} }\r\n.mhlhero-loader-logo{ width:62px; height:auto; z-index:3; filter:brightness(.42); will-change:filter,transform; }\r\n.mhlhero-loader-word{\r\n  font-family:\"Cinzel\",\"Playfair Display\",serif;\r\n  letter-spacing:.55em; font-size:clamp(15px,1.9vw,24px); font-weight:600;\r\n  padding-inline-start:.55em; opacity:0; z-index:2;\r\n  background:linear-gradient(90deg,#fff,var(--lav) 45%,var(--gold));\r\n  -webkit-background-clip:text; background-clip:text; color:transparent;\r\n  will-change:opacity,transform;\r\n}\r\n.mhlhero-loader-tag{\r\n  margin-top:-12px; font-size:9px; letter-spacing:.44em; color:rgba(230,197,131,.55);\r\n  padding-inline-start:.44em; opacity:0; z-index:2;\r\n}\r\n.mhlhero-loader-bar{\r\n  width:min(250px,58vw); height:2px; border-radius:2px; z-index:2;\r\n  background:rgba(255,255,255,.10); overflow:hidden;\r\n}\r\n.mhlhero-loader-fill{\r\n  display:block; width:0%; height:100%; transform-origin:right center;\r\n  background:linear-gradient(90deg,var(--p),var(--lav) 55%,var(--gold));\r\n  box-shadow:0 0 14px rgba(201,167,255,.65);\r\n}\r\n.mhlhero-loader-pct{\r\n  font-size:11px; letter-spacing:.3em; color:rgba(255,255,255,.45); z-index:2;\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n\r\n\/* ---------- NAVIGATION ---------- *\/\r\n.mhlhero-nav{\r\n  position:fixed; top:0; left:0; right:0; z-index:9990;\r\n  height:var(--nav-h); display:flex; align-items:center;\r\n  opacity:0; pointer-events:none;\r\n  transition:height .45s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease);\r\n  will-change:transform;\r\n}\r\n.mhlhero-nav.is-ready{ pointer-events:auto; }\r\n.mhlhero-nav-inner{\r\n  width:100%; max-width:1400px; margin:0 auto; padding:0 clamp(18px,4vw,54px);\r\n  display:flex; align-items:center; justify-content:space-between; gap:24px;\r\n}\r\n.mhlhero-nav-hair{\r\n  position:absolute; left:0; right:0; bottom:0; height:1px; opacity:0;\r\n  background:linear-gradient(90deg,transparent,rgba(201,167,255,.35),rgba(230,197,131,.28),transparent);\r\n  transition:opacity .45s var(--ease);\r\n}\r\n.mhlhero-nav.is-scrolled{\r\n  height:62px;\r\n  background:rgba(8,4,16,.62);\r\n  -webkit-backdrop-filter:blur(18px) saturate(140%);\r\n  backdrop-filter:blur(18px) saturate(140%);\r\n  box-shadow:0 12px 40px rgba(0,0,0,.42);\r\n}\r\n.mhlhero-nav.is-scrolled .mhlhero-nav-hair{ opacity:1; }\r\n.mhlhero-nav.is-hidden{ transform:translateY(-102%); }\r\n\r\n.mhlhero-nav-logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }\r\n.mhlhero-nav-logo img{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(201,167,255,.45)); }\r\n.mhlhero-nav-logo-txt{ display:flex; flex-direction:column; line-height:1.15; }\r\n.mhlhero-nav-logo-txt b{\r\n  font-family:\"Cinzel\",\"Playfair Display\",serif; font-weight:600;\r\n  font-size:15px; letter-spacing:.24em;\r\n  background:linear-gradient(90deg,#fff,var(--lav));\r\n  -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n.mhlhero-nav-logo-txt i{ font-style:normal; font-size:8px; letter-spacing:.36em; color:rgba(230,197,131,.75); }\r\n\r\n.mhlhero-nav-links{ display:flex; align-items:center; gap:4px; }\r\n.mhlhero-nav-link{\r\n  position:relative; padding:10px 15px; border-radius:40px;\r\n  font-size:14px; font-weight:600; text-decoration:none;\r\n  color:rgba(255,255,255,.72);\r\n  transition:color .35s var(--ease), background-color .35s var(--ease);\r\n}\r\n.mhlhero-nav-link span{ position:relative; z-index:2; }\r\n.mhlhero-nav-link::after{\r\n  content:\"\"; position:absolute; bottom:5px; left:50%; transform:translateX(-50%) scaleX(0);\r\n  width:16px; height:1.5px; border-radius:2px; transform-origin:center;\r\n  background:linear-gradient(90deg,var(--lav),var(--gold));\r\n  transition:transform .4s var(--ease-out);\r\n}\r\n.mhlhero-nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }\r\n.mhlhero-nav-link:hover::after,\r\n.mhlhero-nav-link.is-active::after{ transform:translateX(-50%) scaleX(1); }\r\n.mhlhero-nav-link.is-active{ color:#fff; }\r\n\r\n.mhlhero-nav-side{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }\r\n.mhlhero-nav-cta{\r\n  position:relative; overflow:hidden;\r\n  display:inline-flex; align-items:center; justify-content:center;\r\n  padding:11px 26px; border-radius:40px; text-decoration:none;\r\n  font-size:13.5px; font-weight:700; color:#fff;\r\n  background:linear-gradient(100deg,var(--p),var(--p2));\r\n  box-shadow:0 8px 26px rgba(123,63,242,.32), inset 0 0 0 1px rgba(255,255,255,.14);\r\n  transition:box-shadow .45s var(--ease);\r\n  will-change:transform;\r\n}\r\n.mhlhero-nav-cta span:first-child{ position:relative; z-index:2; }\r\n.mhlhero-nav-cta:hover{ box-shadow:0 12px 34px rgba(123,63,242,.5), inset 0 0 0 1px rgba(230,197,131,.5); }\r\n.mhlhero-nav-cta-shine{\r\n  position:absolute; top:0; bottom:0; width:60%; right:-80%; z-index:1;\r\n  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);\r\n  transform:skewX(-18deg);\r\n}\r\n\r\n.mhlhero-burger{\r\n  display:none; position:relative; width:44px; height:44px; padding:0;\r\n  border-radius:14px; cursor:pointer;\r\n  background:rgba(255,255,255,.06);\r\n  border:1px solid rgba(255,255,255,.12);\r\n  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);\r\n}\r\n.mhlhero-burger span{\r\n  position:absolute; left:50%; width:18px; height:1.6px; border-radius:2px;\r\n  background:#fff; transform:translateX(-50%);\r\n  transition:transform .4s var(--ease-out), opacity .25s linear, width .4s var(--ease-out);\r\n}\r\n.mhlhero-burger span:nth-child(1){ top:16px; }\r\n.mhlhero-burger span:nth-child(2){ top:21.2px; width:12px; }\r\n.mhlhero-burger span:nth-child(3){ top:26.4px; }\r\n.mhlhero-burger.is-open span:nth-child(1){ transform:translateX(-50%) translateY(5.2px) rotate(45deg); }\r\n.mhlhero-burger.is-open span:nth-child(2){ opacity:0; width:18px; }\r\n.mhlhero-burger.is-open span:nth-child(3){ transform:translateX(-50%) translateY(-5.2px) rotate(-45deg); }\r\n\r\n\/* ---------- DRAWER ---------- *\/\r\n.mhlhero-drawer{ position:fixed; inset:0; z-index:9995; visibility:hidden; pointer-events:none; }\r\n.mhlhero-drawer.is-open{ visibility:visible; pointer-events:auto; }\r\n.mhlhero-drawer-bg{\r\n  position:absolute; inset:0; opacity:0;\r\n  background:rgba(3,1,6,.62);\r\n  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);\r\n}\r\n.mhlhero-drawer-panel{\r\n  position:absolute; top:0; right:0; bottom:0;\r\n  width:min(360px,86vw); padding:26px 26px 32px;\r\n  display:flex; flex-direction:column;\r\n  background:linear-gradient(180deg, rgba(14,7,26,.94), rgba(5,2,10,.96));\r\n  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);\r\n  border-left:1px solid rgba(201,167,255,.16);\r\n  box-shadow:-30px 0 80px rgba(0,0,0,.6);\r\n  transform:translateX(101%); will-change:transform;\r\n  overflow-y:auto; overscroll-behavior:contain;\r\n}\r\n.mhlhero-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; }\r\n.mhlhero-drawer-brand{\r\n  font-family:\"Cinzel\",\"Playfair Display\",serif; font-size:16px; letter-spacing:.34em; font-weight:600;\r\n  background:linear-gradient(90deg,#fff,var(--lav),var(--gold));\r\n  -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n.mhlhero-drawer-close{\r\n  position:relative; width:38px; height:38px; border-radius:50%; cursor:pointer;\r\n  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);\r\n}\r\n.mhlhero-drawer-close span{\r\n  position:absolute; top:50%; left:50%; width:15px; height:1.6px; background:#fff; border-radius:2px;\r\n}\r\n.mhlhero-drawer-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }\r\n.mhlhero-drawer-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }\r\n\r\n.mhlhero-drawer-links{ display:flex; flex-direction:column; gap:2px; }\r\n.mhlhero-drawer-link{\r\n  position:relative; display:flex; align-items:center; gap:14px;\r\n  padding:15px 8px; text-decoration:none; border-radius:12px;\r\n  border-bottom:1px solid rgba(255,255,255,.05);\r\n  color:rgba(255,255,255,.86); font-size:17px; font-weight:600;\r\n  transition:background-color .35s var(--ease), padding-inline-start .35s var(--ease), color .35s var(--ease);\r\n}\r\n.mhlhero-drawer-link em{ font-style:normal; font-size:10px; letter-spacing:.18em; color:rgba(230,197,131,.6); min-width:20px; }\r\n.mhlhero-drawer-link:active,\r\n.mhlhero-drawer-link:hover{ background:rgba(123,63,242,.14); color:#fff; padding-inline-start:16px; }\r\n.mhlhero-drawer-cta{\r\n  margin-top:28px; display:flex; align-items:center; justify-content:center;\r\n  padding:17px 20px; border-radius:50px; text-decoration:none;\r\n  font-size:16px; font-weight:700; color:#fff;\r\n  background:linear-gradient(100deg,var(--p),var(--p2));\r\n  box-shadow:0 14px 36px rgba(123,63,242,.4), inset 0 0 0 1px rgba(255,255,255,.14);\r\n}\r\n.mhlhero-drawer-foot{\r\n  margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:10px;\r\n  font-size:9px; letter-spacing:.4em; color:rgba(255,255,255,.35);\r\n}\r\n.mhlhero-drawer-line{ height:1px; background:linear-gradient(90deg,rgba(201,167,255,.4),transparent); }\r\n\r\n\/* ---------- STAGE ---------- *\/\r\n.mhlhero-stage{\r\n  position:relative; width:100%;\r\n  min-height:100vh; min-height:100svh;\r\n  overflow:hidden; contain:paint;\r\n}\r\n.mhlhero-video-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; }\r\n.mhlhero-video{\r\n  position:absolute; top:50%; left:50%; width:100%; height:100%;\r\n  transform:translate3d(-50%,-50%,0) scale(1.08);\r\n  object-fit:cover; opacity:0;\r\n  filter:saturate(1.06) contrast(1.06) brightness(.96);\r\n  transition:opacity 1.1s var(--ease);\r\n  will-change:transform,opacity; backface-visibility:hidden;\r\n}\r\n.mhlhero-video.is-ready{ opacity:1; }\r\n.mhlhero-video-fallback{\r\n  position:absolute; inset:0; z-index:-1;\r\n  background:\r\n    radial-gradient(70% 60% at 72% 30%, rgba(123,63,242,.34), transparent 65%),\r\n    radial-gradient(60% 55% at 25% 75%, rgba(230,197,131,.18), transparent 68%),\r\n    linear-gradient(160deg,#0b0518,#040207 70%);\r\n}\r\n\r\n.mhlhero-mesh{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }\r\n.mhlhero-blob{ position:absolute; border-radius:50%; filter:blur(80px); transform:translateZ(0); will-change:transform; }\r\n.mhlhero-blob--1{ width:46vmax;height:46vmax; left:-12vmax;top:-8vmax;\r\n  background:radial-gradient(circle,var(--p),transparent 66%); opacity:.48; }\r\n.mhlhero-blob--2{ width:34vmax;height:34vmax; right:-6vmax;bottom:-10vmax;\r\n  background:radial-gradient(circle,var(--gold),transparent 66%); opacity:.24; }\r\n.mhlhero-blob--3{ width:30vmax;height:30vmax; left:42%;top:28%;\r\n  background:radial-gradient(circle,var(--lav),transparent 66%); opacity:.20; }\r\n\r\n.mhlhero-tint{\r\n  position:absolute; inset:0; z-index:3; pointer-events:none;\r\n  background:\r\n    linear-gradient(90deg, rgba(4,2,7,.95) 0%, rgba(4,2,7,.58) 42%, rgba(4,2,7,.10) 100%),\r\n    linear-gradient(0deg, rgba(4,2,7,.90) 0%, rgba(4,2,7,.06) 48%, rgba(4,2,7,.42) 100%);\r\n}\r\n.mhlhero-aurora{\r\n  position:absolute; inset:-20%; z-index:3; pointer-events:none; opacity:.38;\r\n  mix-blend-mode:screen;\r\n  background:conic-gradient(from 0deg at 70% 30%,\r\n    transparent, rgba(123,63,242,.34), transparent, rgba(230,197,131,.22), transparent);\r\n  filter:blur(56px); animation:mhlhero-aurora 22s linear infinite;\r\n  transform:translateZ(0); will-change:transform;\r\n}\r\n@keyframes mhlhero-aurora{ to{ transform:rotate(360deg);} }\r\n\r\n.mhlhero-particles{ position:absolute; inset:0; z-index:4; width:100%; height:100%; pointer-events:none; opacity:0; }\r\n.mhlhero-lightspot{\r\n  position:absolute; width:34vmax;height:34vmax; z-index:4; left:0;top:0;\r\n  border-radius:50%; pointer-events:none; opacity:0;\r\n  transform:translate3d(-50%,-50%,0);\r\n  background:radial-gradient(circle,rgba(201,167,255,.38),rgba(230,197,131,.12) 42%,transparent 62%);\r\n  filter:blur(18px); mix-blend-mode:screen; will-change:transform,opacity;\r\n}\r\n.mhlhero-grain{\r\n  position:absolute; inset:-40%; z-index:6; pointer-events:none; opacity:.075; mix-blend-mode:overlay;\r\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n  transform:translateZ(0); will-change:transform;\r\n}\r\n.mhlhero-vignette{\r\n  position:absolute; inset:0; z-index:6; pointer-events:none;\r\n  background:radial-gradient(122% 118% at 50% 40%, transparent 48%, rgba(0,0,0,.85) 100%);\r\n}\r\n.mhlhero-scanline{\r\n  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.035;\r\n  background:repeating-linear-gradient(0deg,transparent 0 2px,#000 2px 3px);\r\n}\r\n.mhlhero-edge{\r\n  position:absolute; left:0; right:0; bottom:0; height:24%; z-index:6; pointer-events:none;\r\n  background:linear-gradient(0deg,var(--b) 0%,rgba(4,2,7,.55) 45%,transparent 100%);\r\n}\r\n\r\n\/* ---------- CONTENT ---------- *\/\r\n.mhlhero-inner{\r\n  position:relative; z-index:7; max-width:1400px; margin:0 auto;\r\n  min-height:100vh; min-height:100svh;\r\n  padding:calc(var(--nav-h) + 60px) clamp(20px,6vw,72px) calc(var(--tick-h) + 96px);\r\n  display:flex; align-items:center; justify-content:flex-start;\r\n}\r\n.mhlhero-content{ text-align:right; max-width:640px; transform-style:preserve-3d; will-change:transform; }\r\n\r\n.mhlhero-brand{ display:flex; align-items:center; gap:12px; margin-bottom:30px; opacity:0; flex-wrap:wrap; }\r\n.mhlhero-brand-dot{\r\n  width:8px;height:8px;border-radius:50%;\r\n  background:var(--gold); box-shadow:0 0 12px var(--gold);\r\n  animation:mhlhero-pulse 2.6s ease-in-out infinite;\r\n}\r\n@keyframes mhlhero-pulse{ 0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.4);} }\r\n.mhlhero-brand-word{\r\n  font-family:\"Cinzel\",\"Playfair Display\",serif; letter-spacing:.32em;\r\n  font-size:clamp(17px,2vw,27px); font-weight:600;\r\n  background:linear-gradient(90deg,#fff,var(--lav));\r\n  -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n.mhlhero-brand-sub{\r\n  font-size:clamp(9px,.9vw,11px); letter-spacing:.42em; color:rgba(230,197,131,.85);\r\n  padding-inline-start:8px; border-inline-start:1px solid rgba(230,197,131,.3);\r\n}\r\n.mhlhero-title{\r\n  margin:0 0 26px; font-weight:800; line-height:1.08;\r\n  font-size:clamp(42px,6.1vw,98px); letter-spacing:-.01em;\r\n  text-shadow:0 18px 60px rgba(0,0,0,.5);\r\n}\r\n.mhlhero-line{ display:block; overflow:hidden; padding-bottom:.09em; }\r\n.mhlhero-line-in{ display:inline-block; }\r\n.mhlhero-char{ display:inline-block; transform:translate3d(0,115%,0); will-change:transform; }\r\n.mhlhero-accent .mhlhero-char,.mhlhero-accent{\r\n  background:linear-gradient(100deg,var(--lav) 0%,var(--p) 44%,var(--gold2) 100%);\r\n  -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n.mhlhero-desc{\r\n  margin:0 0 44px; overflow:hidden; font-size:clamp(15px,1.35vw,20px);\r\n  line-height:2.05; color:rgba(255,255,255,.76); max-width:540px;\r\n}\r\n.mhlhero-desc-in{ display:inline-block; transform:translate3d(0,120%,0); will-change:transform; }\r\n\r\n.mhlhero-cta-wrap{ display:flex; align-items:center; opacity:0; }\r\n.mhlhero-cta{\r\n  position:relative; display:inline-flex; align-items:center; gap:10px;\r\n  padding:19px 50px; border-radius:60px; text-decoration:none; overflow:hidden;\r\n  font-size:clamp(15px,1.2vw,18px); font-weight:700; color:#fff;\r\n  background:linear-gradient(100deg,var(--p) 0%,var(--p2) 100%);\r\n  box-shadow:0 14px 44px rgba(123,63,242,.36), inset 0 0 0 1px rgba(255,255,255,.14);\r\n  transition:box-shadow .5s var(--ease); will-change:transform;\r\n}\r\n.mhlhero-cta-text,.mhlhero-cta-arrow{ position:relative; z-index:3; }\r\n.mhlhero-cta-arrow{ transition:transform .45s var(--ease-out); font-size:1.1em; }\r\n.mhlhero-cta:hover .mhlhero-cta-arrow{ transform:translateX(-7px); }\r\n.mhlhero-cta-shine{\r\n  position:absolute; top:0;bottom:0;width:55%;right:-70%; z-index:2;\r\n  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);\r\n  transform:skewX(-18deg);\r\n}\r\n.mhlhero-cta-glow{\r\n  position:absolute; inset:-2px; z-index:1; border-radius:inherit; opacity:0;\r\n  background:linear-gradient(100deg,rgba(230,197,131,.5),rgba(201,167,255,.5));\r\n  transition:opacity .5s var(--ease);\r\n}\r\n.mhlhero-cta:hover .mhlhero-cta-glow{ opacity:.35; }\r\n.mhlhero-cta:hover{ box-shadow:0 20px 58px rgba(123,63,242,.55), inset 0 0 0 1px rgba(230,197,131,.5); }\r\n\r\n.mhlhero-scroll{\r\n  position:absolute; bottom:calc(var(--tick-h) + 22px); left:50%; transform:translateX(-50%); z-index:7;\r\n  display:flex; flex-direction:column; align-items:center; gap:9px; opacity:0;\r\n}\r\n.mhlhero-scroll-line{\r\n  width:1px;height:44px;\r\n  background:linear-gradient(var(--lav),transparent);\r\n  animation:mhlhero-drop 2.4s ease-in-out infinite;\r\n}\r\n.mhlhero-scroll-txt{ font-size:10px; letter-spacing:.35em; color:rgba(255,255,255,.5); }\r\n@keyframes mhlhero-drop{\r\n  0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}\r\n  55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}\r\n}\r\n\r\n\/* ---------- BOTTOM TICKER (cinematic subtitle) ---------- *\/\r\n.mhlhero-ticker{\r\n  position:absolute; left:0; right:0; bottom:0; z-index:8;\r\n  height:var(--tick-h); display:flex; align-items:center;\r\n  overflow:hidden; max-width:100%; opacity:0; pointer-events:none;\r\n  border-top:1px solid rgba(201,167,255,.14);\r\n  background:linear-gradient(90deg, rgba(6,3,12,.72), rgba(10,5,20,.5) 50%, rgba(6,3,12,.72));\r\n  -webkit-backdrop-filter:blur(10px) saturate(130%);\r\n  backdrop-filter:blur(10px) saturate(130%);\r\n  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);\r\n  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);\r\n  contain:paint;\r\n}\r\n.mhlhero-ticker::before{\r\n  content:\"\"; position:absolute; left:0; right:0; top:-1px; height:1px;\r\n  background:linear-gradient(90deg,transparent,rgba(230,197,131,.35),rgba(201,167,255,.3),transparent);\r\n}\r\n.mhlhero-ticker-track{\r\n  display:flex; flex:0 0 auto; width:max-content; align-items:center;\r\n  animation:mhlhero-tick 46s linear infinite;\r\n  transform:translate3d(0,0,0); will-change:transform; backface-visibility:hidden;\r\n}\r\n.mhlhero-ticker-set{\r\n  flex:0 0 auto; display:inline-block; white-space:nowrap;\r\n  font-size:clamp(12px,1.05vw,15px); font-weight:600; letter-spacing:.06em;\r\n  color:rgba(255,255,255,.62);\r\n  text-shadow:0 2px 14px rgba(0,0,0,.5);\r\n}\r\n.mhlhero-ticker-set i{\r\n  font-style:normal; margin:0 20px; font-size:.72em; vertical-align:middle;\r\n  color:rgba(230,197,131,.7); text-shadow:0 0 10px rgba(230,197,131,.35);\r\n}\r\n.mhlhero-ticker-set:nth-child(2) i{ color:rgba(201,167,255,.68); }\r\n@keyframes mhlhero-tick{\r\n  from{ transform:translate3d(0,0,0); }\r\n  to  { transform:translate3d(50%,0,0); }   \/* RTL: content drifts right, seamless loop *\/\r\n}\r\n.mhlhero-ticker.is-paused .mhlhero-ticker-track{ animation-play-state:paused; }\r\n\r\n\/* ---------- CURSOR ---------- *\/\r\n.mhlhero-cursor,.mhlhero-cursor-dot{\r\n  position:fixed; top:0;left:0; z-index:100000; pointer-events:none; border-radius:50%;\r\n  transform:translate3d(-50%,-50%,0); opacity:0; mix-blend-mode:screen; will-change:transform;\r\n}\r\n.mhlhero-cursor{ width:44px;height:44px; filter:blur(2px);\r\n  background:radial-gradient(circle,rgba(201,167,255,.34),rgba(230,197,131,.12) 55%,transparent 70%); }\r\n.mhlhero-cursor-dot{ width:7px;height:7px;\r\n  background:radial-gradient(circle,#fff,var(--gold)); box-shadow:0 0 12px rgba(230,197,131,.9); }\r\n.mhlhero-root.mhlhero-cursor-on,\r\n.mhlhero-root.mhlhero-cursor-on a,\r\n.mhlhero-root.mhlhero-cursor-on button{ cursor:none; }\r\n\r\n\/* ---------- RESPONSIVE ---------- *\/\r\n@media (max-width:1100px){\r\n  .mhlhero-nav-link{ padding:10px 11px; font-size:13.5px; }\r\n}\r\n@media (max-width:980px){\r\n  .mhlhero-root{ --nav-h:66px; }\r\n  .mhlhero-nav-links{ display:none; }\r\n  .mhlhero-nav-cta{ display:none; }\r\n  .mhlhero-burger{ display:block; }\r\n}\r\n@media (max-width:900px){\r\n  .mhlhero-inner{\r\n    padding:calc(var(--nav-h) + 54px) 24px calc(var(--tick-h) + 84px);\r\n    justify-content:center;\r\n  }\r\n  .mhlhero-content{ text-align:center; max-width:600px; }\r\n  .mhlhero-brand{ justify-content:center; }\r\n  .mhlhero-desc{ margin-inline:auto; }\r\n  .mhlhero-cta-wrap{ justify-content:center; }\r\n  .mhlhero-tint{\r\n    background:linear-gradient(0deg, rgba(4,2,7,.92) 0%, rgba(4,2,7,.42) 55%, rgba(4,2,7,.66) 100%);\r\n  }\r\n  .mhlhero-blob{ filter:blur(58px); }\r\n  .mhlhero-aurora{ filter:blur(38px); opacity:.3; }\r\n  .mhlhero-grain{ opacity:.05; }\r\n  .mhlhero-video{ transform:translate3d(-50%,-50%,0) scale(1.04); }\r\n  .mhlhero-ticker-track{ animation-duration:34s; }\r\n}\r\n@media (max-width:600px){\r\n  .mhlhero-root{ --tick-h:44px; }\r\n  .mhlhero-title{ font-size:clamp(35px,10.6vw,58px); }\r\n  .mhlhero-desc{ font-size:15px; line-height:1.95; margin-bottom:36px; }\r\n  .mhlhero-cta{ padding:16px 38px; }\r\n  .mhlhero-scanline{ display:none; }\r\n  .mhlhero-loader-core{ width:120px; height:120px; }\r\n  .mhlhero-loader-logo{ width:52px; }\r\n  .mhlhero-ticker{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }\r\n  .mhlhero-ticker-set{ font-size:12px; letter-spacing:.04em; }\r\n  .mhlhero-ticker-set i{ margin:0 13px; }\r\n  .mhlhero-ticker-track{ animation-duration:26s; }\r\n  .mhlhero-scroll{ bottom:calc(var(--tick-h) + 16px); }\r\n  .mhlhero-scroll-line{ height:36px; }\r\n}\r\n@media (max-width:380px){\r\n  .mhlhero-ticker-set i{ margin:0 10px; }\r\n}\r\n@media (hover:none){\r\n  .mhlhero-cursor,.mhlhero-cursor-dot{ display:none!important; }\r\n  .mhlhero-root.mhlhero-cursor-on{ cursor:auto; }\r\n  .mhlhero-lightspot{ display:none; }\r\n  .mhlhero-cta-glow{ display:none; }\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .mhlhero-root *{ animation-duration:.001ms!important; animation-iteration-count:1!important; }\r\n  .mhlhero-char,.mhlhero-desc-in{ transform:none!important; }\r\n  .mhlhero-brand,.mhlhero-cta-wrap,.mhlhero-scroll,.mhlhero-nav,.mhlhero-ticker{ opacity:1!important; }\r\n  .mhlhero-ticker-track{ animation:none!important; }\r\n  .mhlhero-particles{ opacity:.5!important; }\r\n  .mhlhero-loader{ display:none!important; }\r\n  .mhlhero-aurora{ animation:none!important; }\r\n  .mhlhero-video{ opacity:1; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \"use strict\";\r\n\r\n  var root = document.querySelector('[data-mhl-hero]');\r\n  if(!root || root.dataset.mhlInit) return;\r\n  root.dataset.mhlInit = \"1\";\r\n\r\n  \/* ============ ENV \/ CAPABILITY ============ *\/\r\n  var mq = function(s){ return window.matchMedia ? window.matchMedia(s).matches : false; };\r\n  var reduce   = mq('(prefers-reduced-motion:reduce)');\r\n  var canHover = mq('(hover:hover) and (pointer:fine)');\r\n  var vw       = window.innerWidth || document.documentElement.clientWidth;\r\n  var cores    = navigator.hardwareConcurrency || 4;\r\n  var mem      = (typeof navigator.deviceMemory === 'number') ? navigator.deviceMemory : 4;\r\n  var isMobile = vw < 700;\r\n  var isTablet = vw >= 700 && vw < 1100;\r\n  var lowPower = cores <= 4 || mem <= 2;\r\n  var saveData = !!(navigator.connection && navigator.connection.saveData);\r\n  var slowNet  = !!(navigator.connection && \/2g\/.test(navigator.connection.effectiveType || ''));\r\n\r\n  var q  = function(s,c){ return (c||root).querySelector(s); };\r\n  var qa = function(s,c){ return Array.prototype.slice.call((c||root).querySelectorAll(s)); };\r\n  var PASSIVE = (function(){\r\n    var ok=false;\r\n    try{ window.addEventListener('t',null,Object.defineProperty({},'passive',{get:function(){ok=true;return true;}})); }catch(e){}\r\n    return ok ? {passive:true} : false;\r\n  })();\r\n\r\n  var PARTICLES =\r\n    reduce   ? 0  :\r\n    isMobile ? (lowPower ? 14 : 22) :\r\n    isTablet ? (lowPower ? 26 : 38) :\r\n               (cores >= 8 ? 74 : 52);\r\n  var LOADER_PARTICLES = reduce ? 0 : (isMobile ? 16 : (isTablet ? 26 : 40));\r\n  var DPR_CAP = isMobile ? 1.5 : 2;\r\n\r\n  \/* ============ REFS ============ *\/\r\n  var loader     = q('.mhlhero-loader');\r\n  var fillEl     = q('.mhlhero-loader-fill');\r\n  var pctEl      = q('.mhlhero-loader-pct');\r\n  var video      = q('.mhlhero-video');\r\n  var source     = video ? video.querySelector('source') : null;\r\n  var nav        = q('[data-mhl-nav]');\r\n  var burger     = q('.mhlhero-burger');\r\n  var drawer     = q('.mhlhero-drawer');\r\n  var drawerBg   = q('.mhlhero-drawer-bg');\r\n  var drawerPnl  = q('.mhlhero-drawer-panel');\r\n  var drawerX    = q('.mhlhero-drawer-close');\r\n  var heroCanvas = q('.mhlhero-particles');\r\n  var loadCanvas = q('.mhlhero-loader-canvas');\r\n  var stage      = q('.mhlhero-stage');\r\n  var ticker     = q('[data-mhl-ticker]');\r\n\r\n  \/* ============ TITLE SPLIT (word-safe for Persian) ============ *\/\r\n  qa('[data-split]').forEach(function(el){\r\n    var words = el.textContent.trim().split(\/\\s+\/);\r\n    var frag  = document.createDocumentFragment();\r\n    el.textContent = '';\r\n    words.forEach(function(w,i){\r\n      var s = document.createElement('span');\r\n      s.className = 'mhlhero-char';\r\n      s.textContent = w;\r\n      frag.appendChild(s);\r\n      if(i < words.length-1) frag.appendChild(document.createTextNode('\\u00A0'));\r\n    });\r\n    el.appendChild(frag);\r\n  });\r\n\r\n  \/* ============ SAFE REVEAL ============ *\/\r\n  var revealed = false;\r\n  function revealAll(){\r\n    if(revealed) return; revealed = true;\r\n    qa('.mhlhero-char,.mhlhero-desc-in').forEach(function(e){ e.style.transform='none'; });\r\n    ['.mhlhero-brand','.mhlhero-cta-wrap','.mhlhero-scroll','.mhlhero-nav','[data-mhl-ticker]']\r\n      .forEach(function(s){ var e=q(s); if(e){ e.style.opacity=1; } });\r\n    if(heroCanvas) heroCanvas.style.opacity = 1;\r\n    if(nav) nav.classList.add('is-ready');\r\n    if(video) video.classList.add('is-ready');\r\n    if(loader) loader.style.display = 'none';\r\n    if(loaderField){ loaderField.destroy(); loaderField = null; }\r\n    document.body.classList.remove('mhlhero-noscroll');\r\n    cleanupWillChange();\r\n  }\r\n  function cleanupWillChange(){\r\n    qa('.mhlhero-char,.mhlhero-desc-in').forEach(function(e){ e.style.willChange='auto'; });\r\n  }\r\n\r\n  \/* ============ PARTICLE FIELD (sprite-based) ============ *\/\r\n  function makeSprite(rgb, radius){\r\n    var pad = radius * 4;\r\n    var c = document.createElement('canvas');\r\n    c.width = c.height = pad * 2;\r\n    var x = c.getContext('2d');\r\n    var g = x.createRadialGradient(pad,pad,0,pad,pad,pad);\r\n    g.addColorStop(0,   'rgba('+rgb+',1)');\r\n    g.addColorStop(0.28,'rgba('+rgb+',0.55)');\r\n    g.addColorStop(0.6, 'rgba('+rgb+',0.12)');\r\n    g.addColorStop(1,   'rgba('+rgb+',0)');\r\n    x.fillStyle = g;\r\n    x.beginPath(); x.arc(pad,pad,pad,0,6.2832); x.fill();\r\n    return c;\r\n  }\r\n  var SPRITES = null;\r\n  function sprites(){\r\n    if(!SPRITES) SPRITES = [ makeSprite('201,167,255',6), makeSprite('230,197,131',6) ];\r\n    return SPRITES;\r\n  }\r\n\r\n  function ParticleField(canvas, opts){\r\n    if(!canvas) return null;\r\n    var ctx = canvas.getContext('2d', {alpha:true});\r\n    if(!ctx) return null;\r\n\r\n    var count = opts.count|0, repel = !!opts.repel, speed = opts.speed || .22;\r\n    var frameGap = 1000 \/ (opts.fps || (isMobile ? 34 : 60));\r\n    var W=0,H=0,dpr=1,ps=[],sp=sprites();\r\n    var raf=0,last=0,running=false,visible=true,resizeT=0;\r\n    var mouse={x:-9999,y:-9999};\r\n\r\n    function measure(){\r\n      var r = canvas.getBoundingClientRect();\r\n      if(!r.width || !r.height) return false;\r\n      dpr = Math.min(window.devicePixelRatio || 1, DPR_CAP);\r\n      W = r.width; H = r.height;\r\n      canvas.width  = Math.round(W*dpr);\r\n      canvas.height = Math.round(H*dpr);\r\n      ctx.setTransform(dpr,0,0,dpr,0,0);\r\n      return true;\r\n    }\r\n    function seed(){\r\n      ps.length = 0;\r\n      for(var i=0;i<count;i++){\r\n        ps.push({ x:Math.random()*W, y:Math.random()*H,\r\n          vx:(Math.random()-.5)*speed, vy:(Math.random()-.5)*speed,\r\n          r:Math.random()*1.7+.5, a:Math.random()*.55+.22, s:Math.random()>.5?0:1 });\r\n      }\r\n    }\r\n    function draw(ts){\r\n      if(!running) return;\r\n      raf = requestAnimationFrame(draw);\r\n      if(ts - last < frameGap) return;\r\n      last = ts;\r\n      ctx.clearRect(0,0,W,H);\r\n      ctx.globalCompositeOperation = 'lighter';\r\n      for(var i=0;i<ps.length;i++){\r\n        var p = ps[i];\r\n        if(repel){\r\n          var dx=p.x-mouse.x, dy=p.y-mouse.y, d2=dx*dx+dy*dy;\r\n          if(d2 < 14400 && d2 > .01){\r\n            var d=Math.sqrt(d2), f=(120-d)\/120;\r\n            p.x += (dx\/d)*f*2.1; p.y += (dy\/d)*f*2.1;\r\n          }\r\n        }\r\n        p.x += p.vx; p.y += p.vy;\r\n        if(p.x < -10) p.x = W+10; else if(p.x > W+10) p.x = -10;\r\n        if(p.y < -10) p.y = H+10; else if(p.y > H+10) p.y = -10;\r\n        var size = p.r*7;\r\n        ctx.globalAlpha = p.a;\r\n        ctx.drawImage(sp[p.s], p.x-size\/2, p.y-size\/2, size, size);\r\n      }\r\n      ctx.globalAlpha = 1;\r\n      ctx.globalCompositeOperation = 'source-over';\r\n    }\r\n    function start(){ if(running || !count) return; running=true; last=0; raf=requestAnimationFrame(draw); }\r\n    function stop(){ running=false; if(raf) cancelAnimationFrame(raf); raf=0; }\r\n    function onResize(){ clearTimeout(resizeT); resizeT=setTimeout(function(){ if(measure()) seed(); },180); }\r\n\r\n    if(!measure()) return null;\r\n    seed();\r\n    window.addEventListener('resize', onResize, PASSIVE);\r\n\r\n    var io = null;\r\n    if('IntersectionObserver' in window){\r\n      io = new IntersectionObserver(function(en){\r\n        for(var i=0;i<en.length;i++){\r\n          visible = en[i].isIntersecting;\r\n          if(visible && !document.hidden) start(); else stop();\r\n        }\r\n      },{threshold:.01});\r\n      io.observe(canvas);\r\n    }\r\n    function onVis(){ if(document.hidden) stop(); else if(visible) start(); }\r\n    document.addEventListener('visibilitychange', onVis, PASSIVE);\r\n    start();\r\n\r\n    return { mouse:mouse, start:start, stop:stop,\r\n      destroy:function(){\r\n        stop();\r\n        window.removeEventListener('resize', onResize);\r\n        document.removeEventListener('visibilitychange', onVis);\r\n        if(io) io.disconnect();\r\n        try{ ctx.clearRect(0,0,W,H); }catch(e){}\r\n      }\r\n    };\r\n  }\r\n\r\n  \/* ============ LOADER PROGRESS ============ *\/\r\n  var loaderField = LOADER_PARTICLES\r\n    ? ParticleField(loadCanvas,{count:LOADER_PARTICLES,repel:false,speed:.18,fps:isMobile?30:48})\r\n    : null;\r\n\r\n  var WEIGHTS = { gsap:32, video:38, fonts:12, page:18 };\r\n  var state   = { gsap:0, video:0, fonts:0, page:0 };\r\n  var shown=0, target=0, progRaf=0, finished=false;\r\n\r\n  function computeTarget(){\r\n    var t=0; for(var k in WEIGHTS){ if(WEIGHTS.hasOwnProperty(k)) t += WEIGHTS[k]*state[k]; }\r\n    target = Math.min(100,t);\r\n  }\r\n  function mark(key,val){\r\n    var v = (val==null?1:val);\r\n    if(state[key] >= v) return;\r\n    state[key] = v; computeTarget();\r\n    if(target >= 99.5) finished = true;\r\n  }\r\n  function tickProgress(){\r\n    progRaf = requestAnimationFrame(tickProgress);\r\n    var goal = finished ? 100 : Math.min(target,96);\r\n    shown += (goal - shown) * .12;\r\n    if(goal - shown < .3) shown = goal;\r\n    var n = Math.round(shown);\r\n    if(fillEl) fillEl.style.width = n + '%';\r\n    if(pctEl)  pctEl.textContent  = n + '%';\r\n    if(finished && n >= 100){ cancelAnimationFrame(progRaf); progRaf=0; closeLoader(); }\r\n  }\r\n  if(!reduce && loader){ progRaf = requestAnimationFrame(tickProgress); document.body.classList.add('mhlhero-noscroll'); }\r\n\r\n  var loaderClosed = false;\r\n  function closeLoader(){\r\n    if(loaderClosed) return; loaderClosed = true;\r\n    document.body.classList.remove('mhlhero-noscroll');\r\n    var done = function(){\r\n      if(loader) loader.style.display='none';\r\n      if(loaderField){ loaderField.destroy(); loaderField=null; }\r\n      startHero();\r\n    };\r\n    if(window.gsap && !reduce){\r\n      window.gsap.to(loader,{opacity:0,duration:.6,ease:\"power2.inOut\",onComplete:done});\r\n      setTimeout(startHero,120);\r\n    } else { done(); }\r\n  }\r\n\r\n  \/* ============ VIDEO GATE ============ *\/\r\n  var videoReady = false;\r\n  function markVideoReady(){\r\n    if(videoReady) return; videoReady = true;\r\n    if(video) video.classList.add('is-ready');\r\n    mark('video');\r\n  }\r\n  function initVideo(){\r\n    if(!video || !source){ mark('video'); return; }\r\n    if(saveData || slowNet){ video.remove(); mark('video'); return; }\r\n\r\n    source.src = source.getAttribute('data-src') || source.src;\r\n    video.preload = 'auto';\r\n\r\n    var evs = ['loadeddata','canplay','canplaythrough','playing'];\r\n    var onReady = function(){ evs.forEach(function(e){ video.removeEventListener(e,onReady); }); markVideoReady(); };\r\n    evs.forEach(function(e){ video.addEventListener(e,onReady,PASSIVE); });\r\n\r\n    video.addEventListener('progress',function(){\r\n      try{\r\n        if(video.buffered.length && video.duration){\r\n          var p = video.buffered.end(0)\/video.duration;\r\n          mark('video', Math.min(p*.9,.9));\r\n        }\r\n      }catch(e){}\r\n    },PASSIVE);\r\n    video.addEventListener('error',markVideoReady,PASSIVE);\r\n    try{ video.load(); }catch(e){}\r\n\r\n    var play = function(){ var pr = video.play(); if(pr && pr.catch) pr.catch(function(){}); };\r\n    play();\r\n\r\n    var retry = function(){ play(); window.removeEventListener('touchstart',retry); window.removeEventListener('click',retry); };\r\n    window.addEventListener('touchstart',retry,PASSIVE);\r\n    window.addEventListener('click',retry,PASSIVE);\r\n\r\n    if('IntersectionObserver' in window && stage){\r\n      new IntersectionObserver(function(en){\r\n        for(var i=0;i<en.length;i++){\r\n          if(en[i].isIntersecting) play(); else { try{ video.pause(); }catch(e){} }\r\n        }\r\n      },{threshold:.05}).observe(stage);\r\n    }\r\n    document.addEventListener('visibilitychange',function(){\r\n      if(document.hidden){ try{ video.pause(); }catch(e){} } else { play(); }\r\n    },PASSIVE);\r\n\r\n    setTimeout(markVideoReady,3200);\r\n  }\r\n\r\n  \/* ============ TICKER (pause off-screen \/ hidden tab) ============ *\/\r\n  function initTicker(){\r\n    if(!ticker) return;\r\n    var vis = true;\r\n    function apply(){\r\n      if(vis && !document.hidden) ticker.classList.remove('is-paused');\r\n      else ticker.classList.add('is-paused');\r\n    }\r\n    if('IntersectionObserver' in window){\r\n      new IntersectionObserver(function(en){\r\n        vis = !!(en[0] && en[0].isIntersecting); apply();\r\n      },{threshold:0}).observe(ticker);\r\n    }\r\n    document.addEventListener('visibilitychange', apply, PASSIVE);\r\n    apply();\r\n  }\r\n\r\n  \/* ============ NAVIGATION ============ *\/\r\n  function initNav(){\r\n    if(!nav) return;\r\n    var lastY = window.pageYOffset || 0, navRaf = 0;\r\n\r\n    function onScroll(){\r\n      if(navRaf) return;\r\n      navRaf = requestAnimationFrame(function(){\r\n        navRaf = 0;\r\n        var y = window.pageYOffset || document.documentElement.scrollTop || 0;\r\n        if(y > 40) nav.classList.add('is-scrolled'); else nav.classList.remove('is-scrolled');\r\n        if(!drawerOpen){\r\n          if(y > lastY && y > 240) nav.classList.add('is-hidden');\r\n          else nav.classList.remove('is-hidden');\r\n        }\r\n        lastY = y;\r\n      });\r\n    }\r\n    window.addEventListener('scroll', onScroll, PASSIVE);\r\n    onScroll();\r\n\r\n    qa('.mhlhero-nav-link, .mhlhero-drawer-link, .mhlhero-nav-cta, .mhlhero-drawer-cta, .mhlhero-cta').forEach(function(a){\r\n      a.addEventListener('click', function(e){\r\n        var href = a.getAttribute('href') || '';\r\n        if(href.length > 1 && href.charAt(0) === '#'){\r\n          var t = document.querySelector(href);\r\n          if(t){\r\n            e.preventDefault();\r\n            closeDrawer();\r\n            var top = t.getBoundingClientRect().top + (window.pageYOffset||0) - 56;\r\n            try{ window.scrollTo({top:top, behavior: reduce ? 'auto' : 'smooth'}); }\r\n            catch(err){ window.scrollTo(0, top); }\r\n          }\r\n        }\r\n      });\r\n    });\r\n\r\n    var links = qa('.mhlhero-nav-link');\r\n    var sections = links.map(function(l){\r\n      var h = l.getAttribute('href')||'';\r\n      return (h.length>1 && h.charAt(0)==='#') ? document.querySelector(h) : null;\r\n    });\r\n    if('IntersectionObserver' in window && sections.some(Boolean)){\r\n      var sio = new IntersectionObserver(function(en){\r\n        en.forEach(function(entry){\r\n          if(!entry.isIntersecting) return;\r\n          var idx = sections.indexOf(entry.target);\r\n          if(idx > -1){\r\n            links.forEach(function(l){ l.classList.remove('is-active'); });\r\n            links[idx].classList.add('is-active');\r\n          }\r\n        });\r\n      },{rootMargin:'-45% 0px -50% 0px'});\r\n      sections.forEach(function(s){ if(s) sio.observe(s); });\r\n    }\r\n  }\r\n\r\n  \/* ---- drawer ---- *\/\r\n  var drawerOpen = false, drawerTl = null;\r\n\r\n  function openDrawer(){\r\n    if(drawerOpen || !drawer) return;\r\n    drawerOpen = true;\r\n    drawer.classList.add('is-open');\r\n    drawer.setAttribute('aria-hidden','false');\r\n    if(burger){ burger.classList.add('is-open'); burger.setAttribute('aria-expanded','true'); }\r\n    document.body.classList.add('mhlhero-noscroll');\r\n    nav && nav.classList.remove('is-hidden');\r\n\r\n    if(window.gsap && !reduce){\r\n      if(drawerTl) drawerTl.kill();\r\n      drawerTl = window.gsap.timeline({defaults:{ease:\"power3.out\"}});\r\n      drawerTl\r\n        .to(drawerBg,{opacity:1,duration:.35},0)\r\n        .to(drawerPnl,{x:\"0%\",duration:.55,ease:\"power4.out\"},0)\r\n        .fromTo(qa('.mhlhero-drawer-link'),{x:36,opacity:0},{x:0,opacity:1,duration:.5,stagger:.05},.12)\r\n        .fromTo(q('.mhlhero-drawer-cta'),{y:22,opacity:0},{y:0,opacity:1,duration:.5},.3);\r\n    } else {\r\n      if(drawerBg)  drawerBg.style.opacity = 1;\r\n      if(drawerPnl) drawerPnl.style.transform = 'translateX(0%)';\r\n    }\r\n  }\r\n  function closeDrawer(){\r\n    if(!drawerOpen || !drawer) return;\r\n    drawerOpen = false;\r\n    if(burger){ burger.classList.remove('is-open'); burger.setAttribute('aria-expanded','false'); }\r\n    document.body.classList.remove('mhlhero-noscroll');\r\n    drawer.setAttribute('aria-hidden','true');\r\n    var done = function(){ drawer.classList.remove('is-open'); };\r\n    if(window.gsap && !reduce){\r\n      if(drawerTl) drawerTl.kill();\r\n      drawerTl = window.gsap.timeline({onComplete:done});\r\n      drawerTl.to(drawerPnl,{x:\"101%\",duration:.45,ease:\"power3.inOut\"},0)\r\n              .to(drawerBg,{opacity:0,duration:.4},0);\r\n    } else {\r\n      if(drawerBg)  drawerBg.style.opacity = 0;\r\n      if(drawerPnl) drawerPnl.style.transform = 'translateX(101%)';\r\n      done();\r\n    }\r\n  }\r\n  if(burger)   burger.addEventListener('click', function(){ drawerOpen ? closeDrawer() : openDrawer(); });\r\n  if(drawerX)  drawerX.addEventListener('click', closeDrawer);\r\n  if(drawerBg) drawerBg.addEventListener('click', closeDrawer);\r\n  document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeDrawer(); });\r\n  window.addEventListener('resize', function(){ if(drawerOpen && window.innerWidth > 980) closeDrawer(); }, PASSIVE);\r\n\r\n  \/* ============ HERO ANIMATION ============ *\/\r\n  var heroStarted = false, heroField = null;\r\n\r\n  function startHero(){\r\n    if(heroStarted) return; heroStarted = true;\r\n    var gsap = window.gsap;\r\n\r\n    if(PARTICLES && heroCanvas){\r\n      heroField = ParticleField(heroCanvas,{\r\n        count:PARTICLES, repel:canHover, speed:.22,\r\n        fps: isMobile ? 32 : (isTablet ? 44 : 60)\r\n      });\r\n    }\r\n    if(!gsap || reduce){ revealAll(); return; }\r\n    if(nav) nav.classList.add('is-ready');\r\n\r\n    var tl = gsap.timeline({defaults:{ease:\"power3.out\"}, onComplete:cleanupWillChange});\r\n\r\n    tl.fromTo(video ? video : {}, {scale:1.16}, {scale:isMobile?1.04:1.08,duration:2.2,ease:\"power2.out\"},0)\r\n      .fromTo('.mhlhero-blob',{opacity:0,scale:.86},\r\n        {opacity:function(i,t){ return getComputedStyle(t).opacity; },scale:1,duration:1.8,stagger:.12,ease:\"power2.out\"},0)\r\n      .to('.mhlhero-particles',{opacity:1,duration:1.4},.15)\r\n      .fromTo('.mhlhero-brand',{y:20,opacity:0},{y:0,opacity:1,duration:.9},.18)\r\n      .to('.mhlhero-char',{y:\"0%\",duration:1.05,stagger:.05,ease:\"power4.out\"},.3)\r\n      .to('.mhlhero-desc-in',{y:\"0%\",duration:1,ease:\"power4.out\"},.68)\r\n      .fromTo('.mhlhero-cta-wrap',{y:16,opacity:0},{y:0,opacity:1,duration:.85},.88)\r\n      .to('.mhlhero-scroll',{opacity:1,duration:.8},1.05)\r\n      .fromTo('[data-mhl-ticker]',{y:26,opacity:0},{y:0,opacity:1,duration:1,ease:\"power3.out\"},1.0)\r\n      .fromTo(nav,{y:-24,opacity:0},{y:0,opacity:1,duration:.9,ease:\"power3.out\"},.05);\r\n\r\n    \/* ---------- AMBIENT ---------- *\/\r\n    var ambient = [];\r\n    ambient.push(gsap.to('.mhlhero-blob--1',{x:\"+=46\",y:\"+=30\",duration:13,ease:\"sine.inOut\",yoyo:true,repeat:-1}));\r\n    ambient.push(gsap.to('.mhlhero-blob--2',{x:\"-=36\",y:\"-=26\",duration:15,ease:\"sine.inOut\",yoyo:true,repeat:-1}));\r\n    ambient.push(gsap.to('.mhlhero-blob--3',{x:\"+=28\",y:\"-=34\",duration:17,ease:\"sine.inOut\",yoyo:true,repeat:-1}));\r\n    if(!isMobile){\r\n      ambient.push(gsap.to('.mhlhero-grain',{x:\"+=7%\",y:\"-=5%\",duration:7,ease:\"sine.inOut\",yoyo:true,repeat:-1}));\r\n    }\r\n    if('IntersectionObserver' in window && stage){\r\n      new IntersectionObserver(function(en){\r\n        var vis = en[0] && en[0].isIntersecting;\r\n        ambient.forEach(function(t){ vis ? t.play() : t.pause(); });\r\n      },{threshold:.02}).observe(stage);\r\n    }\r\n    document.addEventListener('visibilitychange',function(){\r\n      ambient.forEach(function(t){ document.hidden ? t.pause() : t.play(); });\r\n    },PASSIVE);\r\n\r\n    \/* ---------- PARALLAX \/ TILT \/ LIGHTSPOT ---------- *\/\r\n    if(canHover){\r\n      var content = q('.mhlhero-content'), lightspot = q('.mhlhero-lightspot');\r\n      var vX = video ? gsap.quickTo(video,'x',{duration:1.4,ease:\"power3.out\"}) : null;\r\n      var vY = video ? gsap.quickTo(video,'y',{duration:1.4,ease:\"power3.out\"}) : null;\r\n      var rX = gsap.quickTo(content,'rotationX',{duration:.9,ease:\"power3.out\"});\r\n      var rY = gsap.quickTo(content,'rotationY',{duration:.9,ease:\"power3.out\"});\r\n      var lX = lightspot ? gsap.quickTo(lightspot,'x',{duration:.85,ease:\"power3.out\"}) : null;\r\n      var lY = lightspot ? gsap.quickTo(lightspot,'y',{duration:.85,ease:\"power3.out\"}) : null;\r\n      var lO = lightspot ? gsap.quickTo(lightspot,'opacity',{duration:.4,ease:\"power2.out\"}) : null;\r\n\r\n      gsap.set(content,{transformPerspective:1000});\r\n\r\n      var pending=null, moveRaf=0, rect=null, rectT=0;\r\n      function refreshRect(){ rect = root.getBoundingClientRect(); }\r\n      refreshRect();\r\n      window.addEventListener('resize',function(){ clearTimeout(rectT); rectT=setTimeout(refreshRect,150); },PASSIVE);\r\n      window.addEventListener('scroll',function(){ clearTimeout(rectT); rectT=setTimeout(refreshRect,150); },PASSIVE);\r\n\r\n      function applyMove(){\r\n        moveRaf = 0;\r\n        if(!pending || !rect) return;\r\n        var mxp = pending.x-rect.left, myp = pending.y-rect.top;\r\n        var px = mxp\/rect.width-.5, py = myp\/rect.height-.5;\r\n        if(vX){ vX(px*26); vY(py*18); }\r\n        rY(px*5.5); rX(-py*5.5);\r\n        if(lX){ lX(mxp); lY(myp); lO(.6); }\r\n        if(heroField){ heroField.mouse.x = mxp; heroField.mouse.y = myp; }\r\n      }\r\n      root.addEventListener('mousemove',function(e){\r\n        pending = {x:e.clientX,y:e.clientY};\r\n        if(!moveRaf) moveRaf = requestAnimationFrame(applyMove);\r\n      },PASSIVE);\r\n      root.addEventListener('mouseleave',function(){\r\n        if(lO) lO(0);\r\n        gsap.to(content,{rotationX:0,rotationY:0,duration:.9,ease:\"power3.out\"});\r\n        if(heroField){ heroField.mouse.x=-9999; heroField.mouse.y=-9999; }\r\n      },PASSIVE);\r\n    } else if(video){\r\n      gsap.to(video,{y:isMobile?8:12,duration:9,ease:\"sine.inOut\",yoyo:true,repeat:-1});\r\n    }\r\n\r\n    \/* ---------- MAGNETIC ---------- *\/\r\n    if(canHover){\r\n      qa('[data-magnetic]').forEach(function(el){\r\n        var mx = gsap.quickTo(el,'x',{duration:.45,ease:\"power3.out\"});\r\n        var my = gsap.quickTo(el,'y',{duration:.45,ease:\"power3.out\"});\r\n        var r = null;\r\n        el.addEventListener('mouseenter',function(){ r = el.getBoundingClientRect(); },PASSIVE);\r\n        el.addEventListener('mousemove',function(e){\r\n          if(!r) r = el.getBoundingClientRect();\r\n          mx((e.clientX-r.left-r.width\/2)*.32);\r\n          my((e.clientY-r.top-r.height\/2)*.32);\r\n        },PASSIVE);\r\n        el.addEventListener('mouseleave',function(){ mx(0); my(0); r=null; },PASSIVE);\r\n      });\r\n    }\r\n\r\n    \/* ---------- SHINE ---------- *\/\r\n    [['.mhlhero-cta','.mhlhero-cta-shine'],['.mhlhero-nav-cta','.mhlhero-nav-cta-shine']].forEach(function(pair){\r\n      var btn = q(pair[0]), sh = q(pair[1]);\r\n      if(!btn || !sh || !canHover) return;\r\n      btn.addEventListener('mouseenter',function(){\r\n        gsap.fromTo(sh,{right:\"-80%\"},{right:\"150%\",duration:.85,ease:\"power2.out\",overwrite:true});\r\n      },PASSIVE);\r\n    });\r\n\r\n    \/* ---------- CURSOR ---------- *\/\r\n    if(canHover){\r\n      root.classList.add('mhlhero-cursor-on');\r\n      var cur = q('.mhlhero-cursor'), dot = q('.mhlhero-cursor-dot');\r\n      if(cur && dot){\r\n        var cx = gsap.quickTo(cur,'x',{duration:.45,ease:\"power3.out\"});\r\n        var cy = gsap.quickTo(cur,'y',{duration:.45,ease:\"power3.out\"});\r\n        var dx = gsap.quickTo(dot,'x',{duration:.08,ease:\"none\"});\r\n        var dy = gsap.quickTo(dot,'y',{duration:.08,ease:\"none\"});\r\n        var curOn = false;\r\n        window.addEventListener('mousemove',function(e){\r\n          if(!curOn){ curOn = true; gsap.to([cur,dot],{opacity:1,duration:.3,overwrite:'auto'}); }\r\n          cx(e.clientX); cy(e.clientY); dx(e.clientX); dy(e.clientY);\r\n        },PASSIVE);\r\n        document.addEventListener('mouseleave',function(){\r\n          curOn = false; gsap.to([cur,dot],{opacity:0,duration:.3,overwrite:'auto'});\r\n        },PASSIVE);\r\n        qa('a,button').forEach(function(el){\r\n          el.addEventListener('mouseenter',function(){ gsap.to(cur,{scale:1.85,duration:.35,overwrite:'auto'}); },PASSIVE);\r\n          el.addEventListener('mouseleave',function(){ gsap.to(cur,{scale:1,duration:.35,overwrite:'auto'}); },PASSIVE);\r\n        });\r\n      }\r\n    }\r\n\r\n    \/* ---------- SCROLLTRIGGER ---------- *\/\r\n    var ST = window.ScrollTrigger;\r\n    if(ST){\r\n      gsap.registerPlugin(ST);\r\n      if(video){\r\n        gsap.to(video,{yPercent:isMobile?6:12,ease:\"none\",\r\n          scrollTrigger:{trigger:stage,start:\"top top\",end:\"bottom top\",scrub:isMobile?.6:true,invalidateOnRefresh:true}});\r\n      }\r\n      gsap.to('.mhlhero-content',{y:isMobile?-40:-70,opacity:.45,ease:\"none\",\r\n        scrollTrigger:{trigger:stage,start:\"top top\",end:\"bottom top\",scrub:isMobile?.6:true,invalidateOnRefresh:true}});\r\n      gsap.to('.mhlhero-scroll',{opacity:0,ease:\"none\",\r\n        scrollTrigger:{trigger:stage,start:\"top top\",end:\"14% top\",scrub:true}});\r\n\r\n      var doRefresh = function(){ ST.refresh(); };\r\n      window.addEventListener('load', doRefresh);\r\n      setTimeout(doRefresh, 400);\r\n      if(document.fonts && document.fonts.ready){ document.fonts.ready.then(doRefresh).catch(function(){}); }\r\n      if(video) video.addEventListener('loadedmetadata', doRefresh, PASSIVE);\r\n    }\r\n  }\r\n\r\n  \/* ============ LIBS \/ ASSETS ============ *\/\r\n  function loadScript(src, cb){\r\n    var s = document.createElement('script');\r\n    s.src = src; s.async = true;\r\n    s.onload = function(){ cb(true); };\r\n    s.onerror = function(){ cb(false); };\r\n    document.head.appendChild(s);\r\n  }\r\n  function bootGSAP(){\r\n    var CDN = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/\";\r\n    if(window.gsap){\r\n      mark('gsap',.5);\r\n      if(window.ScrollTrigger){ mark('gsap'); return; }\r\n      loadScript(CDN+\"ScrollTrigger.min.js\", function(){ mark('gsap'); });\r\n      return;\r\n    }\r\n    loadScript(CDN+\"gsap.min.js\", function(ok){\r\n      if(!ok || !window.gsap){ mark('gsap'); revealAll(); return; }\r\n      mark('gsap',.6);\r\n      loadScript(CDN+\"ScrollTrigger.min.js\", function(){ mark('gsap'); });\r\n    });\r\n  }\r\n\r\n  if(document.fonts && document.fonts.ready){\r\n    document.fonts.ready.then(function(){ mark('fonts'); }).catch(function(){ mark('fonts'); });\r\n    setTimeout(function(){ mark('fonts'); }, 2200);\r\n  } else { mark('fonts'); }\r\n\r\n  if(document.readyState === 'complete'){ mark('page'); }\r\n  else { window.addEventListener('load', function(){ mark('page'); }, PASSIVE); }\r\n  setTimeout(function(){ mark('page'); }, 3500);\r\n\r\n  initTicker();\r\n\r\n  if(reduce){ initVideo(); initNav(); revealAll(); return; }\r\n\r\n  bootGSAP();\r\n  initVideo();\r\n  initNav();\r\n\r\n  \/* ---------- SAFETY TIMEOUTS ---------- *\/\r\n  setTimeout(function(){ if(!loaderClosed) finished = true; }, 4200);\r\n  setTimeout(function(){\r\n    if(!loaderClosed) closeLoader();\r\n    if(!heroStarted) startHero();\r\n    if(!window.gsap) revealAll();\r\n  }, 6500);\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f793e35 elementor-widget elementor-widget-html\" data-id=\"f793e35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"mhlsci\" id=\"mhlsci\">\r\n  <div class=\"mhlsci-video-wrap\">\r\n    <video class=\"mhlsci-video\" autoplay muted loop playsinline preload=\"auto\"\r\n      poster=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/07\/mahlern-sci-poster.jpg\">\r\n      <source src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/07\/Floating_hair_strands_with_pigments_202607240038.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <div class=\"mhlsci-grade\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlsci-vignette\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlsci-glow mhlsci-glow--purple\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mhlsci-glow mhlsci-glow--gold\" aria-hidden=\"true\"><\/div>\r\n    <canvas class=\"mhlsci-particles\" aria-hidden=\"true\"><\/canvas>\r\n  <\/div>\r\n\r\n  <div class=\"mhlsci-inner\">\r\n    <div class=\"mhlsci-badge\" data-parallax=\"0.10\">\r\n      <span class=\"mhlsci-badge-en\">MAHLERN ACADEMY<\/span>\r\n      <span class=\"mhlsci-badge-line\" aria-hidden=\"true\"><\/span>\r\n      <span class=\"mhlsci-badge-tag\">ART \u2022 SCIENCE \u2022 COLOR<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"mhlsci-content\" data-parallax=\"0.05\">\r\n      <p class=\"mhlsci-eyebrow\" data-reveal>\u067e\u0634\u062a \u0635\u062d\u0646\u0647 \u062e\u0644\u0642 \u06cc\u06a9 \u0631\u0646\u06af \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/p>\r\n      <h2 class=\"mhlsci-title\">\r\n        <span class=\"mhlsci-line\" data-blur>\u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u06cc\u06a9 \u0631\u0646\u06af<\/span>\r\n        <span class=\"mhlsci-line mhlsci-line--sub\" data-blur>\u0639\u0644\u0645\u060c \u0647\u0646\u0631 \u0648 \u062e\u0644\u0627\u0642\u06cc\u062a \u062f\u0631 \u0647\u0631 \u062a\u0627\u0631 \u0645\u0648<\/span>\r\n      <\/h2>\r\n      <p class=\"mhlsci-desc\" data-reveal>\r\n        \u062f\u0631 MAHLERN \u0631\u0646\u06af \u0645\u0648 \u0641\u0642\u0637 \u062a\u0631\u06a9\u06cc\u0628 \u0686\u0646\u062f \u0645\u0627\u062f\u0647 \u0646\u06cc\u0633\u062a\u061b\r\n        \u0634\u0646\u0627\u062e\u062a \u0631\u0646\u06af\u060c \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0648 \u0648 \u062e\u0644\u0642 \u06cc\u06a9 \u0627\u062b\u0631 \u0647\u0646\u0631\u06cc \u0627\u0633\u062a.\r\n      <\/p>\r\n      <div class=\"mhlsci-meta\" data-reveal>\r\n        <span class=\"mhlsci-dot\" aria-hidden=\"true\"><\/span>\r\n        <span>Luxury Hair Color Education<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<style>\r\n.mhlsci{position:relative;width:100%;min-height:100vh;overflow:hidden;\r\n  background:#050308;display:flex;align-items:center;direction:rtl;\r\n  font-family:\"IRANSansX\",\"Vazirmatn\",system-ui,sans-serif;isolation:isolate}\r\n.mhlsci-video-wrap{position:absolute;inset:0;z-index:0}\r\n.mhlsci-video{position:absolute;inset:0;width:100%;height:100%;\r\n  object-fit:cover;filter:saturate(1.05) contrast(1.08) brightness(.82);\r\n  transform:scale(1.06);will-change:transform}\r\n.mhlsci-grade{position:absolute;inset:0;\r\n  background:linear-gradient(90deg,rgba(5,3,8,.15) 0%,rgba(5,3,8,.55) 55%,rgba(5,3,8,.92) 100%),\r\n  radial-gradient(120% 90% at 20% 40%,rgba(120,60,180,.20),transparent 60%);\r\n  mix-blend-mode:multiply}\r\n.mhlsci-vignette{position:absolute;inset:0;\r\n  box-shadow:inset 0 0 240px 60px rgba(0,0,0,.9);pointer-events:none}\r\n.mhlsci-glow{position:absolute;border-radius:50%;filter:blur(90px);\r\n  opacity:.5;will-change:transform,opacity;pointer-events:none}\r\n.mhlsci-glow--purple{width:46vw;height:46vw;left:-8vw;top:8vw;\r\n  background:radial-gradient(circle,rgba(150,80,230,.55),transparent 68%)}\r\n.mhlsci-glow--gold{width:34vw;height:34vw;right:6vw;bottom:-6vw;\r\n  background:radial-gradient(circle,rgba(214,178,110,.42),transparent 66%)}\r\n.mhlsci-particles{position:absolute;inset:0;z-index:1;pointer-events:none}\r\n.mhlsci-inner{position:relative;z-index:2;width:100%;max-width:1320px;\r\n  margin:0 auto;padding:0 clamp(24px,5vw,90px);\r\n  display:flex;flex-direction:column;align-items:flex-end;\r\n  justify-content:center;gap:clamp(28px,4vw,56px)}\r\n.mhlsci-badge{display:flex;align-items:center;gap:14px;\r\n  padding:12px 22px;border-radius:100px;\r\n  background:rgba(255,255,255,.04);backdrop-filter:blur(14px);\r\n  border:1px solid rgba(255,255,255,.10);\r\n  box-shadow:0 8px 40px rgba(120,60,180,.15) inset,0 1px 0 rgba(255,255,255,.08)}\r\n.mhlsci-badge-en{color:#f3ecff;font-size:13px;letter-spacing:.28em;\r\n  font-weight:600;direction:ltr}\r\n.mhlsci-badge-line{width:1px;height:16px;background:rgba(255,255,255,.2)}\r\n.mhlsci-badge-tag{color:#d6b26e;font-size:11px;letter-spacing:.24em;\r\n  font-weight:500;direction:ltr}\r\n.mhlsci-content{max-width:640px;text-align:right}\r\n.mhlsci-eyebrow{color:#c9a7e8;font-size:clamp(14px,1.4vw,17px);\r\n  letter-spacing:.04em;margin:0 0 18px;font-weight:500;opacity:.9}\r\n.mhlsci-title{margin:0;display:flex;flex-direction:column;gap:10px}\r\n.mhlsci-line{display:block;color:#fff;font-weight:800;line-height:1.15;\r\n  font-size:clamp(34px,5.4vw,74px);\r\n  background:linear-gradient(180deg,#ffffff 0%,#e9dcff 60%,#d6b26e 140%);\r\n  -webkit-background-clip:text;background-clip:text;color:transparent;\r\n  filter:blur(0);will-change:filter,opacity,transform;\r\n  text-shadow:0 2px 40px rgba(150,80,230,.25)}\r\n.mhlsci-line--sub{font-size:clamp(22px,3.2vw,42px);font-weight:600;\r\n  background:linear-gradient(180deg,#e9dcff,#a98fce);\r\n  -webkit-background-clip:text;background-clip:text;color:transparent;\r\n  text-shadow:none;opacity:.96}\r\n.mhlsci-desc{margin:28px 0 0;color:#cfc6dd;font-weight:400;\r\n  font-size:clamp(15px,1.5vw,19px);line-height:2;max-width:520px;\r\n  margin-inline-start:auto}\r\n.mhlsci-meta{display:flex;align-items:center;gap:12px;margin-top:26px;\r\n  color:#9a8fb0;font-size:13px;letter-spacing:.16em;\r\n  direction:ltr;justify-content:flex-end}\r\n.mhlsci-dot{width:7px;height:7px;border-radius:50%;\r\n  background:#d6b26e;box-shadow:0 0 14px 3px rgba(214,178,110,.7);\r\n  animation:mhlsci-pulse 2.6s ease-in-out infinite}\r\n@keyframes mhlsci-pulse{0%,100%{opacity:.4;transform:scale(.85)}\r\n  50%{opacity:1;transform:scale(1.2)}}\r\n@media(max-width:768px){\r\n  .mhlsci{min-height:92vh}\r\n  .mhlsci-inner{align-items:flex-start;text-align:right}\r\n  .mhlsci-content{text-align:right;max-width:100%}\r\n  .mhlsci-video{filter:saturate(1.05) contrast(1.06) brightness(.7)}\r\n  .mhlsci-grade{background:linear-gradient(180deg,rgba(5,3,8,.35),rgba(5,3,8,.9))}\r\n  .mhlsci-glow{opacity:.35}\r\n}\r\n@media(prefers-reduced-motion:reduce){\r\n  .mhlsci-video{transform:none}\r\n  .mhlsci-dot{animation:none}\r\n  .mhlsci-glow{opacity:.35}\r\n}\r\n<\/style>\r\n<script>\r\n(function(){\r\n  var root=document.getElementById('mhlsci');\r\n  if(!root)return;\r\n  var reduce=window.matchMedia('(prefers-reduced-motion:reduce)').matches;\r\n  var touch=window.matchMedia('(hover:none)').matches;\r\n\r\n  \/* ---- particles ---- *\/\r\n  var cv=root.querySelector('.mhlsci-particles'),ctx=cv.getContext('2d'),\r\n      w,h,parts=[],raf;\r\n  function size(){w=cv.width=root.offsetWidth;h=cv.height=root.offsetHeight;}\r\n  function build(){parts=[];var n=Math.min(70,Math.floor(w\/22));\r\n    for(var i=0;i<n;i++)parts.push({x:Math.random()*w,y:Math.random()*h,\r\n      r:Math.random()*1.8+.4,vy:-(Math.random()*.3+.05),\r\n      vx:(Math.random()-.5)*.15,a:Math.random()*.5+.15,\r\n      c:Math.random()>.5?'214,178,110':'170,120,230'});}\r\n  function draw(){ctx.clearRect(0,0,w,h);\r\n    for(var i=0;i<parts.length;i++){var p=parts[i];p.y+=p.vy;p.x+=p.vx;\r\n      if(p.y<-6){p.y=h+6;p.x=Math.random()*w;}\r\n      ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,6.283);\r\n      ctx.fillStyle='rgba('+p.c+','+p.a+')';\r\n      ctx.shadowBlur=8;ctx.shadowColor='rgba('+p.c+',.6)';ctx.fill();}\r\n    raf=requestAnimationFrame(draw);}\r\n  if(!reduce){size();build();draw();\r\n    window.addEventListener('resize',function(){size();build();});}\r\n\r\n  \/* ---- parallax (mouse) ---- *\/\r\n  if(!touch&&!reduce&&window.gsap){\r\n    var layers=root.querySelectorAll('[data-parallax]');\r\n    root.addEventListener('mousemove',function(e){\r\n      var r=root.getBoundingClientRect(),\r\n          x=(e.clientX-r.left)\/r.width-.5,\r\n          y=(e.clientY-r.top)\/r.height-.5;\r\n      layers.forEach(function(el){\r\n        var d=parseFloat(el.getAttribute('data-parallax'))*100;\r\n        gsap.to(el,{x:-x*d,y:-y*d,duration:1.1,ease:'power3.out'});\r\n      });\r\n      gsap.to(root.querySelector('.mhlsci-video'),\r\n        {x:-x*24,y:-y*24,duration:1.4,ease:'power3.out'});\r\n    });\r\n  }\r\n\r\n  \/* ---- reveal \/ blur-to-sharp ---- *\/\r\n  if(window.gsap&&window.ScrollTrigger&&!reduce){\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    var tl=gsap.timeline({scrollTrigger:{trigger:root,start:'top 68%'}});\r\n    tl.from(root.querySelector('.mhlsci-badge'),\r\n        {y:24,opacity:0,duration:.9,ease:'power3.out'})\r\n      .from(root.querySelector('.mhlsci-eyebrow'),\r\n        {y:20,opacity:0,duration:.7,ease:'power2.out'},'-=.5')\r\n      .from(root.querySelectorAll('[data-blur]'),\r\n        {filter:'blur(18px)',opacity:0,y:34,duration:1.15,\r\n         stagger:.22,ease:'power3.out'},'-=.35')\r\n      .from(root.querySelectorAll('.mhlsci-desc,.mhlsci-meta'),\r\n        {y:22,opacity:0,duration:.8,stagger:.15,ease:'power2.out'},'-=.6');\r\n\r\n    \/* slow drift on glow + gentle video zoom while in view *\/\r\n    gsap.to(root.querySelector('.mhlsci-glow--purple'),\r\n      {x:60,y:-40,duration:9,yoyo:true,repeat:-1,ease:'sine.inOut'});\r\n    gsap.to(root.querySelector('.mhlsci-glow--gold'),\r\n      {x:-50,y:30,duration:11,yoyo:true,repeat:-1,ease:'sine.inOut'});\r\n    gsap.fromTo(root.querySelector('.mhlsci-video'),\r\n      {scale:1.06},{scale:1.14,ease:'none',\r\n       scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});\r\n  }else{\r\n    \/* fallback: everything visible *\/\r\n    root.querySelectorAll('[data-blur],[data-reveal]').forEach(function(el){\r\n      el.style.opacity=1;el.style.filter='none';});\r\n  }\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0978ee5 e-con e-atomic-element e-flexbox-base e-065ce7a \" data-id=\"0978ee5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0978ee5\">\n    \t\t<div class=\"elementor-element elementor-element-bcbbc47 elementor-widget elementor-widget-html\" data-id=\"bcbbc47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"mhlx-stories\" id=\"mhlx-stories\" dir=\"rtl\" aria-labelledby=\"mhlx-st-title\">\r\n\r\n  <!-- ============ BACKGROUND ============ -->\r\n  <div class=\"mhlx-bg\" aria-hidden=\"true\">\r\n    <span class=\"mhlx-beam mhlx-beam--gold\"><\/span>\r\n    <span class=\"mhlx-beam mhlx-beam--warm\"><\/span>\r\n    <span class=\"mhlx-orb mhlx-orb--a\"><\/span>\r\n    <span class=\"mhlx-orb mhlx-orb--b\"><\/span>\r\n    <div class=\"mhlx-academy-lines\"><\/div>\r\n    <canvas class=\"mhlx-particles\"><\/canvas>\r\n    <span class=\"mhlx-fog\"><\/span>\r\n    <span class=\"mhlx-vignette\"><\/span>\r\n    <span class=\"mhlx-grain\"><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"mhlx-inner\">\r\n\r\n    <!-- ============ INTRO ============ -->\r\n    <header class=\"mhlx-intro\">\r\n\r\n      <p class=\"mhlx-eyebrow\">\r\n        <i class=\"mhlx-eb-line\" aria-hidden=\"true\"><\/i>\r\n        <i class=\"mhlx-dot\" aria-hidden=\"true\"><\/i>\r\n        <span>MAHLERN ACADEMY \u00b7 STUDENT STORIES<\/span>\r\n        <i class=\"mhlx-eb-line\" aria-hidden=\"true\"><\/i>\r\n      <\/p>\r\n\r\n      <h2 class=\"mhlx-title\" id=\"mhlx-st-title\">\r\n        \u062f\u0627\u0633\u062a\u0627\u0646 \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0646\u062f\r\n        <span class=\"mhlx-gold\">\u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0634\u0648\u0646\u062f<\/span>\r\n      <\/h2>\r\n\r\n      <p class=\"mhlx-sub\">\r\n        \u0647\u0631 \u0645\u062a\u062e\u0635\u0635 \u0628\u0632\u0631\u06af\u060c \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u062f\u0627\u0631\u062f.\r\n        \u0627\u06cc\u0646\u062c\u0627 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0645\u0633\u06cc\u0631 \u0647\u0646\u0631\u062c\u0648\u06cc\u0627\u0646\u06cc \u0631\u0627 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u062f\u0631\u0633\u062a \u0631\u0634\u062f \u06a9\u0631\u062f\u0646\u062f.\r\n      <\/p>\r\n\r\n      <span class=\"mhlx-hairline\" aria-hidden=\"true\"><i><\/i><\/span>\r\n\r\n    <\/header>\r\n\r\n    <!-- ============ STAGE ============ -->\r\n    <div class=\"mhlx-stage\">\r\n\r\n      <div class=\"mhlx-track\" role=\"list\">\r\n\r\n        <!-- ---- MAIN STORY ---- -->\r\n        <article class=\"mhlx-card mhlx-card--hero\" role=\"listitem\">\r\n\r\n          <div class=\"mhlx-media\">\r\n\r\n            <video class=\"mhlx-video\"\r\n                   preload=\"none\"\r\n                   playsinline\r\n                   webkit-playsinline\r\n                   disablepictureinpicture\r\n                   data-src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/07\/\u0647\u0646\u0631\u062c\u0648-\u0647\u0627\u06cc-\u0645\u062c\u0627\u0632\u06cc-\u0648-\u062f\u0648\u0631\u0647-\u0634\u06cc\u0631\u0627\u0632-.mp4\"><\/video>\r\n\r\n            <span class=\"mhlx-poster mhlx-poster--hero\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlx-scrim\" aria-hidden=\"true\"><\/span>\r\n\r\n            <span class=\"mhlx-corner mhlx-corner--tl\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlx-corner mhlx-corner--tr\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlx-corner mhlx-corner--bl\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlx-corner mhlx-corner--br\" aria-hidden=\"true\"><\/span>\r\n\r\n            <span class=\"mhlx-progress\" aria-hidden=\"true\"><i><\/i><\/span>\r\n\r\n            <span class=\"mhlx-badge mhlx-badge--gold\">MAHLERN COMMUNITY<\/span>\r\n\r\n            <button class=\"mhlx-play mhlx-play--lg\" type=\"button\"\r\n                    aria-label=\"\u067e\u062e\u0634 \u062f\u0627\u0633\u062a\u0627\u0646 \u0647\u0646\u0631\u062c\u0648\u06cc\u0627\u0646 MAHLERN\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5.2v13.6L19 12z\"\/><\/svg>\r\n              <span class=\"mhlx-ring\" aria-hidden=\"true\"><\/span>\r\n            <\/button>\r\n\r\n            <div class=\"mhlx-caption\">\r\n              <h3 class=\"mhlx-c-title\">MAHLERN \u0628\u062f\u0648\u0646 \u0645\u0631\u0632<\/h3>\r\n              <p class=\"mhlx-c-text\">\r\n                \u0627\u0632 \u0642\u0632\u0648\u06cc\u0646 \u062a\u0627 \u0634\u06cc\u0631\u0627\u0632\u061b<br>\r\n                \u0622\u0645\u0648\u0632\u0634 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06cc\u0633\u062a.\r\n              <\/p>\r\n            <\/div>\r\n\r\n            <span class=\"mhlx-loader\" aria-hidden=\"true\"><\/span>\r\n\r\n          <\/div>\r\n\r\n          <p class=\"mhlx-under\">\r\n            <i aria-hidden=\"true\"><\/i>\r\n            \u06cc\u06a9 \u062e\u0627\u0646\u0648\u0627\u062f\u0647 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u060c \u0628\u0627 \u06cc\u06a9 \u0647\u062f\u0641 \u0645\u0634\u062a\u0631\u06a9.\r\n            <i aria-hidden=\"true\"><\/i>\r\n          <\/p>\r\n\r\n        <\/article>\r\n\r\n        <!-- ---- STUDENT 01 ---- -->\r\n        <article class=\"mhlx-card mhlx-card--side mhlx-card--s1\" role=\"listitem\">\r\n\r\n          <div class=\"mhlx-media\">\r\n\r\n            <video class=\"mhlx-video\"\r\n                   preload=\"none\"\r\n                   playsinline\r\n                   webkit-playsinline\r\n                   disablepictureinpicture\r\n                   data-src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/07\/\u0641\u0627\u0637\u0645\u0647-\u062a\u0631\u0627\u0628\u06cc-.mp4\"><\/video>\r\n\r\n            <span class=\"mhlx-poster mhlx-poster--a\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlx-scrim\" aria-hidden=\"true\"><\/span>\r\n\r\n            <span class=\"mhlx-progress\" aria-hidden=\"true\"><i><\/i><\/span>\r\n\r\n            <span class=\"mhlx-badge\">STORY 01<\/span>\r\n\r\n            <button class=\"mhlx-play\" type=\"button\" aria-label=\"\u067e\u062e\u0634 \u062f\u0627\u0633\u062a\u0627\u0646 \u0641\u0627\u0637\u0645\u0647 \u062a\u0631\u0627\u0628\u06cc\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5.2v13.6L19 12z\"\/><\/svg>\r\n              <span class=\"mhlx-ring\" aria-hidden=\"true\"><\/span>\r\n            <\/button>\r\n\r\n            <div class=\"mhlx-caption\">\r\n              <span class=\"mhlx-name\">\u0641\u0627\u0637\u0645\u0647 \u062a\u0631\u0627\u0628\u06cc<\/span>\r\n              <h3 class=\"mhlx-c-title\">\u0634\u0631\u0648\u0639 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/h3>\r\n              <p class=\"mhlx-c-text\">\r\n                \u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0634\u0627\u06cc\u062f \u06a9\u0648\u0686\u06a9 \u0628\u0627\u0634\u062f\u060c<br>\r\n                \u0627\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0622\u063a\u0627\u0632 \u06cc\u06a9 \u0622\u06cc\u0646\u062f\u0647 \u0628\u0632\u0631\u06af \u0628\u0627\u0634\u062f.\r\n              <\/p>\r\n            <\/div>\r\n\r\n            <span class=\"mhlx-loader\" aria-hidden=\"true\"><\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/article>\r\n\r\n        <!-- ---- STUDENT 02 ---- -->\r\n        <article class=\"mhlx-card mhlx-card--side mhlx-card--s2\" role=\"listitem\">\r\n\r\n          <div class=\"mhlx-media\">\r\n\r\n            <video class=\"mhlx-video\"\r\n                   preload=\"none\"\r\n                   playsinline\r\n                   webkit-playsinline\r\n                   disablepictureinpicture\r\n                   data-src=\"https:\/\/mahlern.com\/wp-content\/uploads\/2026\/07\/\u0632\u0647\u0631\u0627-\u067e\u06cc\u0631\u0627\u06cc\u0634-.mp4\"><\/video>\r\n\r\n            <span class=\"mhlx-poster mhlx-poster--b\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"mhlx-scrim\" aria-hidden=\"true\"><\/span>\r\n\r\n            <span class=\"mhlx-progress\" aria-hidden=\"true\"><i><\/i><\/span>\r\n\r\n            <span class=\"mhlx-badge\">STORY 02<\/span>\r\n\r\n            <button class=\"mhlx-play\" type=\"button\" aria-label=\"\u067e\u062e\u0634 \u062f\u0627\u0633\u062a\u0627\u0646 \u0632\u0647\u0631\u0627 \u067e\u06cc\u0631\u0627\u06cc\u0634\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5.2v13.6L19 12z\"\/><\/svg>\r\n              <span class=\"mhlx-ring\" aria-hidden=\"true\"><\/span>\r\n            <\/button>\r\n\r\n            <div class=\"mhlx-caption\">\r\n              <span class=\"mhlx-name\">\u0632\u0647\u0631\u0627 \u067e\u06cc\u0631\u0627\u06cc\u0634<\/span>\r\n              <h3 class=\"mhlx-c-title\">\u0627\u0632 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062a\u0627 \u062e\u0644\u0642 \u0627\u062b\u0631<\/h3>\r\n              <p class=\"mhlx-c-text\">\r\n                \u0648\u0642\u062a\u06cc \u0622\u0645\u0648\u0632\u0634 \u062f\u0631\u0633\u062a \u0628\u0627\u0634\u062f\u060c<br>\r\n                \u0645\u0647\u0627\u0631\u062a \u0628\u0647 \u0627\u0645\u0636\u0627\u06cc \u0634\u062e\u0635\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.\r\n              <\/p>\r\n            <\/div>\r\n\r\n            <span class=\"mhlx-loader\" aria-hidden=\"true\"><\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/article>\r\n\r\n      <\/div>\r\n\r\n      <!-- ---- MOBILE DOTS ---- -->\r\n      <div class=\"mhlx-dots\">\r\n        <button class=\"mhlx-dot-btn is-on\" type=\"button\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u06f1\"><\/button>\r\n        <button class=\"mhlx-dot-btn\" type=\"button\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u06f2\"><\/button>\r\n        <button class=\"mhlx-dot-btn\" type=\"button\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u06f3\"><\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- ============ BRAND STATEMENT ============ -->\r\n    <footer class=\"mhlx-statement\">\r\n\r\n      <span class=\"mhlx-st-line\" aria-hidden=\"true\"><\/span>\r\n\r\n      <span class=\"mhlx-monogram\" aria-hidden=\"true\">M<\/span>\r\n\r\n      <div class=\"mhlx-count\">\r\n        <span class=\"mhlx-count-rule\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"mhlx-count-num\" data-mhlx-count=\"1000\">\u06f0<\/span>\r\n        <span class=\"mhlx-count-plus\">+<\/span>\r\n        <span class=\"mhlx-count-rule\" aria-hidden=\"true\"><\/span>\r\n      <\/div>\r\n\r\n      <p class=\"mhlx-count-label\">\u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u0631 \u0645\u0633\u06cc\u0631 \u0622\u0645\u0648\u0632\u0634<\/p>\r\n\r\n      <p class=\"mhlx-note\">\r\n        \u0627\u06cc\u0646 \u062a\u0646\u0647\u0627 \u0628\u062e\u0634\u06cc \u06a9\u0648\u0686\u06a9 \u0627\u0632 \u062f\u0627\u0633\u062a\u0627\u0646 \u0628\u0632\u0631\u06af \u0647\u0646\u0631\u062c\u0648\u06cc\u0627\u0646 MAHLERN \u0627\u0633\u062a.\r\n        <br>\r\n        \u0648 \u0627\u06cc\u0646 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0631\u0627\u0647 \u0627\u0633\u062a.\r\n      <\/p>\r\n\r\n      <span class=\"mhlx-sign\">MAHLERN ACADEMY \u00b7 EST. 2026<\/span>\r\n\r\n    <\/footer>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n\"use strict\";\r\n\r\n\/* =========================================================\r\n   MAHLERN ACADEMY \u2014 STUDENT STORIES\r\n   Unified controller v4  \u00b7  mobile & iOS safe\r\n========================================================= *\/\r\n\r\nvar ROOT = document.getElementById(\"mhlx-stories\");\r\nif (!ROOT || ROOT.dataset.mhlxReady) return;\r\nROOT.dataset.mhlxReady = \"1\";\r\n\r\n\/* ---------------- ENVIRONMENT ---------------- *\/\r\n\r\nfunction mq(q){ try { return window.matchMedia(q).matches; } catch(e){ return false; } }\r\n\r\nvar isMobile = mq(\"(max-width:780px)\");\r\nvar reduce   = mq(\"(prefers-reduced-motion:reduce)\");\r\nvar hasIO    = \"IntersectionObserver\" in window;\r\n\r\nvar conn     = navigator.connection || navigator.mozConnection || {};\r\nvar saveData = !!conn.saveData || \/(^|-)2g$\/.test(conn.effectiveType || \"\");\r\nvar cores    = navigator.hardwareConcurrency || 8;\r\nvar ram      = navigator.deviceMemory || 8;\r\n\r\n\/* \u062f\u0633\u062a\u06af\u0627\u0647 \u06a9\u0645\u200c\u062a\u0648\u0627\u0646 \u2192 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062a\u0632\u0626\u06cc\u0646\u06cc \u062e\u0627\u0645\u0648\u0634 *\/\r\nvar lowPower = isMobile || saveData || cores <= 4 || ram <= 4;\r\n\r\nvar cards  = [].slice.call(ROOT.querySelectorAll(\".mhlx-card\"));\r\nvar videos = [].slice.call(ROOT.querySelectorAll(\".mhlx-video\"));\r\nvar track  = ROOT.querySelector(\".mhlx-track\");\r\nvar dots   = [].slice.call(ROOT.querySelectorAll(\".mhlx-dot-btn\"));\r\n\r\nif (lowPower) ROOT.classList.add(\"mhlx-lite\");\r\nif (!isMobile && !lowPower) ROOT.classList.add(\"mhlx-rich\");\r\n\r\n\r\n\/* =========================================================\r\n   1) VIDEO \u2014 lazy load, state, memory release\r\n========================================================= *\/\r\n\r\nfunction loadVideo(v){\r\n  if (!v || v.dataset.loaded) return;\r\n  var src = v.dataset.src;\r\n  if (!src) return;\r\n  v.dataset.loaded = \"1\";\r\n  v.src = encodeURI(src);\r\n  v.preload = \"metadata\";\r\n}\r\n\r\n\/* \u0622\u0632\u0627\u062f\u0633\u0627\u0632\u06cc \u062d\u0627\u0641\u0638\u0647 \u0628\u0631\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0645\u062a\u0648\u0642\u0641 \u0648 \u062f\u0648\u0631 \u0627\u0632 \u062f\u06cc\u062f\r\n   (\u0631\u06cc\u0634\u0647\u200c\u06cc \u0627\u0635\u0644\u06cc \u062e\u0637\u0627\u06cc \u00abOops\u00bb \u062f\u0631 \u0627\u0646\u062f\u0631\u0648\u06cc\u062f) *\/\r\nfunction unloadVideo(v){\r\n  if (!v || !v.dataset.loaded || !v.paused) return;\r\n  v.removeAttribute(\"src\");\r\n  try { v.load(); } catch(e){}\r\n  delete v.dataset.loaded;\r\n  resetProgress(v);\r\n}\r\n\r\nfunction flag(card, cls, on){\r\n  if (card) card.classList[on ? \"add\" : \"remove\"](cls);\r\n}\r\n\r\nfunction resetProgress(v){\r\n  var bar = v.parentNode && v.parentNode.querySelector(\".mhlx-progress i\");\r\n  if (bar) bar.style.transform = \"scaleX(0)\";\r\n}\r\n\r\nfunction stopOthers(active){\r\n  videos.forEach(function(v){\r\n    if (v === active) return;\r\n    try { v.pause(); } catch(e){}\r\n    try { v.currentTime = 0; } catch(e){}      \/* iOS-safe *\/\r\n    var c = v.closest(\".mhlx-card\");\r\n    flag(c, \"is-playing\", false);\r\n    flag(c, \"is-loading\", false);\r\n    v.controls = false;\r\n    resetProgress(v);\r\n  });\r\n}\r\n\r\nfunction resetCard(v){\r\n  var c = v.closest(\".mhlx-card\");\r\n  flag(c, \"is-playing\", false);\r\n  flag(c, \"is-loading\", false);\r\n  v.controls = false;\r\n  try { v.currentTime = 0; } catch(e){}\r\n  resetProgress(v);\r\n}\r\n\r\nvideos.forEach(function(v){\r\n\r\n  var card = v.closest(\".mhlx-card\");\r\n  var btn  = card.querySelector(\".mhlx-play\");\r\n  var bar  = card.querySelector(\".mhlx-progress i\");\r\n\r\n  function play(){\r\n    loadVideo(v);\r\n    stopOthers(v);\r\n    flag(card, \"is-loading\", true);\r\n\r\n    var p;\r\n    try { p = v.play(); } catch(e){}\r\n\r\n    if (p && p.catch){\r\n      p.catch(function(){\r\n        flag(card, \"is-loading\", false);\r\n        v.controls = true;                 \/* \u0641\u0627\u0644\u0628\u06a9: \u06a9\u0646\u062a\u0631\u0644 \u0628\u0648\u0645\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 *\/\r\n      });\r\n    }\r\n  }\r\n\r\n  if (btn) btn.addEventListener(\"click\", function(e){ e.preventDefault(); play(); });\r\n\r\n  v.addEventListener(\"play\", function(){\r\n    stopOthers(v);\r\n    flag(card, \"is-playing\", true);\r\n    v.controls = true;\r\n  });\r\n\r\n  v.addEventListener(\"playing\", function(){ flag(card, \"is-loading\", false); });\r\n  v.addEventListener(\"waiting\", function(){ flag(card, \"is-loading\", true);  });\r\n  v.addEventListener(\"pause\",   function(){ flag(card, \"is-loading\", false); });\r\n  v.addEventListener(\"ended\",   function(){ resetCard(v); });\r\n  v.addEventListener(\"error\",   function(){ resetCard(v); });\r\n\r\n  \/* \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u2014 timeupdate \u062d\u062f\u0648\u062f \u06f4 \u0628\u0627\u0631 \u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0641\u0627\u06cc\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0628\u0627\u0631 \u067e\u0631\u062f\u0627\u0632\u0634\u06cc \u0646\u062f\u0627\u0631\u062f *\/\r\n  if (bar){\r\n    v.addEventListener(\"timeupdate\", function(){\r\n      var d = v.duration;\r\n      if (!d || !isFinite(d)) return;\r\n      bar.style.transform = \"scaleX(\" + (v.currentTime \/ d).toFixed(4) + \")\";\r\n    });\r\n  }\r\n\r\n});\r\n\r\nif (hasIO){\r\n\r\n  var near = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(en){\r\n      var v = en.target.querySelector(\".mhlx-video\");\r\n      if (en.isIntersecting) loadVideo(v);\r\n      else if (lowPower)     unloadVideo(v);\r\n    });\r\n  }, { rootMargin: isMobile ? \"120px 0px\" : \"300px 0px\", threshold: 0.01 });\r\n\r\n  cards.forEach(function(c){ near.observe(c); });\r\n\r\n} else {\r\n  videos.forEach(loadVideo);\r\n}\r\n\r\nfunction pauseAll(){ videos.forEach(function(v){ try { v.pause(); } catch(e){} }); }\r\ndocument.addEventListener(\"visibilitychange\", function(){ if (document.hidden) pauseAll(); });\r\nwindow.addEventListener(\"pagehide\", pauseAll);\r\n\r\n\r\n\/* =========================================================\r\n   2) MOBILE SLIDER DOTS\r\n========================================================= *\/\r\n\r\nif (track && dots.length){\r\n\r\n  var ticking = false;\r\n\r\n  function activeIndex(){\r\n    var center = track.scrollLeft + track.clientWidth \/ 2;\r\n    var best = 0, min = Infinity;\r\n    cards.forEach(function(card, i){\r\n      var d = Math.abs((card.offsetLeft + card.offsetWidth \/ 2) - center);\r\n      if (d < min){ min = d; best = i; }\r\n    });\r\n    return best;\r\n  }\r\n\r\n  function syncDots(){\r\n    var i = activeIndex();\r\n    dots.forEach(function(d, n){ d.classList.toggle(\"is-on\", n === i); });\r\n    ticking = false;\r\n  }\r\n\r\n  track.addEventListener(\"scroll\", function(){\r\n    if (ticking) return;\r\n    ticking = true;\r\n    requestAnimationFrame(syncDots);\r\n  }, { passive: true });\r\n\r\n  dots.forEach(function(dot, i){\r\n    dot.addEventListener(\"click\", function(){\r\n      var card = cards[i];\r\n      if (!card) return;\r\n      var left = card.offsetLeft - (track.clientWidth - card.offsetWidth) \/ 2;\r\n      try {\r\n        track.scrollTo({ left: left, behavior: reduce ? \"auto\" : \"smooth\" });\r\n      } catch(e){ track.scrollLeft = left; }\r\n    });\r\n  });\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   3) PARTICLES \u2014 desktop only\r\n========================================================= *\/\r\n\r\nvar canvas = ROOT.querySelector(\".mhlx-particles\");\r\n\r\nif (canvas && !reduce && !lowPower){\r\n\r\n  var ctx = canvas.getContext(\"2d\", { alpha: true });\r\n  var W = 0, H = 0, pts = [], raf = null, live = false;\r\n  var COUNT = 44;\r\n\r\n  function resize(){\r\n    var r = canvas.getBoundingClientRect();\r\n    W = r.width; H = r.height;\r\n    var dpr = Math.min(window.devicePixelRatio || 1, 1.5);\r\n    canvas.width  = Math.round(W * dpr);\r\n    canvas.height = Math.round(H * dpr);\r\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n  }\r\n\r\n  function seed(){\r\n    pts = [];\r\n    for (var i = 0; i < COUNT; i++){\r\n      pts.push({\r\n        x: Math.random() * W,\r\n        y: Math.random() * H,\r\n        s: Math.random() * 1.3 + 0.3,\r\n        v: Math.random() * 0.24 + 0.05,\r\n        o: Math.random() * 0.38 + 0.14,\r\n        p: Math.random() * Math.PI * 2\r\n      });\r\n    }\r\n  }\r\n\r\n  function frame(t){\r\n    if (!live) return;\r\n    ctx.clearRect(0, 0, W, H);\r\n    for (var i = 0; i < pts.length; i++){\r\n      var d = pts[i];\r\n      d.y -= d.v;\r\n      if (d.y < -10){ d.y = H + 10; d.x = Math.random() * W; }\r\n      var a = d.o * (0.6 + Math.sin(t * 0.001 + d.p) * 0.4);\r\n      ctx.beginPath();\r\n      ctx.fillStyle = \"rgba(233,205,146,\" + a.toFixed(3) + \")\";\r\n      ctx.arc(d.x, d.y, d.s, 0, Math.PI * 2);\r\n      ctx.fill();\r\n    }\r\n    raf = requestAnimationFrame(frame);\r\n  }\r\n\r\n  function start(){ if (live) return; live = true; raf = requestAnimationFrame(frame); }\r\n  function stop(){ live = false; if (raf) cancelAnimationFrame(raf); raf = null; }\r\n\r\n  resize(); seed();\r\n\r\n  var rt;\r\n  window.addEventListener(\"resize\", function(){\r\n    clearTimeout(rt);\r\n    rt = setTimeout(function(){ resize(); seed(); }, 300);\r\n  }, { passive: true });\r\n\r\n  if (hasIO){\r\n    new IntersectionObserver(function(en){\r\n      en[0].isIntersecting ? start() : stop();\r\n    }, { rootMargin: \"80px\" }).observe(ROOT);\r\n  } else {\r\n    start();\r\n  }\r\n\r\n  document.addEventListener(\"visibilitychange\", function(){ if (document.hidden) stop(); });\r\n  window.addEventListener(\"pagehide\", stop);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   4) COUNTER\r\n========================================================= *\/\r\n\r\nvar counter = ROOT.querySelector(\"[data-mhlx-count]\");\r\n\r\nfunction fa(n){\r\n  try { return Number(n).toLocaleString(\"fa-IR\"); } catch(e){ return String(n); }\r\n}\r\n\r\nfunction fillCounter(){\r\n  if (!counter || counter.dataset.done) return;\r\n  counter.dataset.done = \"1\";\r\n  counter.textContent = fa(counter.dataset.mhlxCount);\r\n}\r\n\r\nfunction runCounter(){\r\n  if (!counter || counter.dataset.done) return;\r\n  if (reduce){ fillCounter(); return; }\r\n\r\n  counter.dataset.done = \"1\";\r\n\r\n  var target = Number(counter.dataset.mhlxCount) || 0;\r\n  var dur = 2000;\r\n  var t0 = performance.now();\r\n\r\n  function step(now){\r\n    var p = Math.min((now - t0) \/ dur, 1);\r\n    var e = 1 - Math.pow(1 - p, 3);\r\n    counter.textContent = fa(Math.floor(target * e));\r\n    if (p < 1) requestAnimationFrame(step);\r\n    else counter.textContent = fa(target);\r\n  }\r\n\r\n  requestAnimationFrame(step);\r\n}\r\n\r\nif (counter && hasIO){\r\n  var co = new IntersectionObserver(function(en){\r\n    if (en[0].isIntersecting){ runCounter(); co.disconnect(); }\r\n  }, { threshold: 0.4 });\r\n  co.observe(counter);\r\n} else {\r\n  fillCounter();\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   5) GSAP REVEAL \u2014 \u0628\u0627 \u0633\u0647 \u0644\u0627\u06cc\u0647 fail-safe\r\n========================================================= *\/\r\n\r\nvar REVEAL = [\r\n  \".mhlx-eyebrow\", \".mhlx-title\", \".mhlx-sub\", \".mhlx-hairline i\",\r\n  \".mhlx-card--hero\", \".mhlx-card--side\", \".mhlx-statement > *\"\r\n].join(\",\");\r\n\r\nfunction revealAll(){\r\n  ROOT.classList.add(\"mhlx-revealed\");\r\n  if (window.gsap){\r\n    try {\r\n      window.gsap.set(ROOT.querySelectorAll(REVEAL), {\r\n        opacity: 1, x: 0, y: 0, scale: 1, scaleX: 1,\r\n        clearProps: \"filter,willChange,transform\"\r\n      });\r\n    } catch(e){}\r\n  }\r\n  fillCounter();\r\n}\r\n\r\nvar GSAP_URL   = \"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\";\r\nvar SCROLL_URL = \"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\";\r\n\r\nfunction loadScript(src){\r\n  return new Promise(function(res, rej){\r\n    if (document.querySelector('script[src=\"' + src + '\"]')){ res(); return; }\r\n    var s = document.createElement(\"script\");\r\n    s.src = src; s.async = true;\r\n    s.onload = res; s.onerror = rej;\r\n    document.head.appendChild(s);\r\n  });\r\n}\r\n\r\nfunction initGSAP(){\r\n\r\n  var gsap = window.gsap, ST = window.ScrollTrigger;\r\n  if (!gsap || !ST){ revealAll(); return; }\r\n\r\n  try {\r\n\r\n    gsap.registerPlugin(ST);\r\n    ROOT.dataset.mhlxGsap = \"on\";\r\n\r\n    var q     = gsap.utils.selector(ROOT);\r\n    var hero  = ROOT.querySelector(\".mhlx-card--hero\");\r\n    var sides = q(\".mhlx-card--side\");\r\n\r\n    \/* \u0628\u062f\u0648\u0646 filter:blur \u2014 \u0639\u0627\u0645\u0644 \u0642\u0641\u0644 \u0631\u0646\u062f\u0631 \u062f\u0631 iOS Safari \u0628\u0648\u062f *\/\r\n    gsap.set(q(\".mhlx-eyebrow\"),    { opacity: 0, y: 18 });\r\n    gsap.set(q(\".mhlx-title\"),      { opacity: 0, y: 26, scale: 0.985 });\r\n    gsap.set(q(\".mhlx-sub\"),        { opacity: 0, y: 18 });\r\n    gsap.set(q(\".mhlx-hairline i\"), { scaleX: 0, transformOrigin: \"center\" });\r\n    gsap.set(hero,                  { opacity: 0, y: 26, scale: 0.94 });\r\n    gsap.set(sides,                 { opacity: 0, y: isMobile ? 22 : 42 });\r\n\r\n    var tl = gsap.timeline({\r\n      defaults: { ease: \"power3.out\" },\r\n      scrollTrigger: { trigger: ROOT, start: \"top 82%\", once: true }\r\n    });\r\n\r\n    tl.to(q(\".mhlx-eyebrow\"),    { opacity: 1, y: 0, duration: 0.7 })\r\n      .to(q(\".mhlx-title\"),      { opacity: 1, y: 0, scale: 1, duration: 1.05 }, \"-=0.4\")\r\n      .to(q(\".mhlx-sub\"),        { opacity: 1, y: 0, duration: 0.85 }, \"-=0.75\")\r\n      .to(q(\".mhlx-hairline i\"), { scaleX: 1, duration: 1, ease: \"power3.inOut\" }, \"-=0.6\")\r\n      .to(hero,                  { opacity: 1, y: 0, scale: 1, duration: 1.1 }, \"-=0.65\")\r\n      .to(sides,                 { opacity: 1, y: 0, duration: 0.95, stagger: 0.14 }, \"-=0.8\");\r\n\r\n    gsap.from(q(\".mhlx-statement > *\"), {\r\n      opacity: 0, y: 28, duration: 0.95, stagger: 0.1, ease: \"power3.out\",\r\n      scrollTrigger: { trigger: q(\".mhlx-statement\"), start: \"top 86%\", once: true }\r\n    });\r\n\r\n    \/* \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 \u0648 \u0646\u0648\u0631 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a: \u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e\u060c \u0628\u06cc\u0631\u0648\u0646 \u0627\u0632 \u062f\u06cc\u062f pause *\/\r\n    if (!isMobile && !lowPower){\r\n\r\n      gsap.to(q(\".mhlx-card--hero .mhlx-media\"), {\r\n        scale: 1.05, ease: \"none\",\r\n        scrollTrigger: { trigger: hero, start: \"top bottom\", end: \"bottom top\", scrub: 1 }\r\n      });\r\n\r\n      gsap.to(q(\".mhlx-card--s1\"), {\r\n        y: -34, ease: \"none\",\r\n        scrollTrigger: { trigger: ROOT, start: \"top bottom\", end: \"bottom top\", scrub: 1.2 }\r\n      });\r\n\r\n      gsap.to(q(\".mhlx-card--s2\"), {\r\n        y: 42, ease: \"none\",\r\n        scrollTrigger: { trigger: ROOT, start: \"top bottom\", end: \"bottom top\", scrub: 1.2 }\r\n      });\r\n\r\n      var amb = gsap.timeline({ repeat: -1, yoyo: true, paused: true });\r\n      amb.to(q(\".mhlx-beam--gold\"), { xPercent: -5, yPercent:  4, duration: 24, ease: \"sine.inOut\" }, 0)\r\n         .to(q(\".mhlx-beam--warm\"), { xPercent:  6, yPercent: -3, duration: 20, ease: \"sine.inOut\" }, 0)\r\n         .to(q(\".mhlx-orb--a\"),     { xPercent: -7, duration: 26, ease: \"sine.inOut\" }, 0)\r\n         .to(q(\".mhlx-orb--b\"),     { xPercent:  8, duration: 30, ease: \"sine.inOut\" }, 0);\r\n\r\n      ST.create({\r\n        trigger: ROOT, start: \"top bottom\", end: \"bottom top\",\r\n        onToggle: function(self){ self.isActive ? amb.play() : amb.pause(); }\r\n      });\r\n\r\n    }\r\n\r\n    ST.refresh();\r\n\r\n    \/* \u0627\u06af\u0631 ScrollTrigger \u0641\u0627\u06cc\u0631 \u0646\u0634\u062f (\u0644\u0628\u0647\u200c\u0647\u0627\u06cc iOS) \u2192 \u0646\u0645\u0627\u06cc\u0634 \u0627\u062c\u0628\u0627\u0631\u06cc *\/\r\n    setTimeout(function(){\r\n      if (hero && parseFloat(getComputedStyle(hero).opacity) === 0) revealAll();\r\n    }, 2500);\r\n\r\n  } catch(e){\r\n    revealAll();\r\n  }\r\n}\r\n\r\n\/* \u0634\u0628\u06a9\u0647 \u0627\u06cc\u0645\u0646\u06cc \u0646\u0647\u0627\u06cc\u06cc: \u0627\u06af\u0631 GSAP \u0644\u0648\u062f \u0646\u0634\u062f\u060c \u0645\u062d\u062a\u0648\u0627 \u0647\u0631\u06af\u0632 \u067e\u0646\u0647\u0627\u0646 \u0646\u0645\u06cc\u200c\u0645\u0627\u0646\u062f *\/\r\nsetTimeout(function(){ if (ROOT.dataset.mhlxGsap !== \"on\") revealAll(); }, 3000);\r\n\r\nif (reduce){\r\n  revealAll();\r\n} else if (window.gsap && window.ScrollTrigger){\r\n  initGSAP();\r\n} else {\r\n  loadScript(GSAP_URL)\r\n    .then(function(){ return loadScript(SCROLL_URL); })\r\n    .then(initGSAP)\r\n    .catch(revealAll);\r\n}\r\n\r\nwindow.addEventListener(\"load\", function(){\r\n  if (window.ScrollTrigger) window.ScrollTrigger.refresh();\r\n});\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MAHLERN ACADEMY OF HAIR COLOR 0% MAHLERN ACADEMY \u062e\u0627\u0646\u0647 \u062f\u0648\u0631\u0647\u200c\u0647\u0627 \u0645\u062f\u0631\u0633\u0627\u0646 \u06af\u0627\u0644\u0631\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u062a\u0645\u0627\u0633 \u062b\u0628\u062a\u200c\u0646\u0627\u0645 MAHLERN 01\u062e\u0627\u0646\u0647 02\u062f\u0648\u0631\u0647\u200c\u0647\u0627 03\u0645\u062f\u0631\u0633\u0627\u0646 04\u06af\u0627\u0644\u0631\u06cc 05\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 06\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 \u0634\u0631\u0648\u0639 \u062b\u0628\u062a\u200c\u0646\u0627\u0645 ACADEMY OF HAIR COLOR MAHLERN ACADEMY OF HAIR COLOR \u0647\u0646\u0631 \u0648 \u0639\u0644\u0645 \u0631\u0646\u06af \u0645\u0648 \u0622\u0645\u0648\u0632\u0634 \u062a\u062e\u0635\u0635\u06cc \u0631\u0646\u06af\u060c \u062a\u0631\u06a9\u06cc\u0628 \u0648 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0645\u0648 \u0627\u0632 \u067e\u0627\u06cc\u0647 \u062a\u0627 \u0633\u0637\u062d \u0627\u0633\u062a\u0627\u062f\u06cc\u060c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mahlern.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mahlern.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mahlern.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mahlern.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mahlern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":90,"href":"https:\/\/mahlern.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/mahlern.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/mahlern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}