{"version":3,"sources":["../scripts/illusions.js"],"names":["document","addEventListener","body","querySelector","section","texts","querySelectorAll","svg","height","clientHeight","svgPadding","parseFloat","window","getComputedStyle","getPropertyValue","scrollY","scroll","getBoundingClientRect","top","bottom","isInside","classList","toggle","phase1","phase2","childTop","childLength","phase3","phase4","phase5","phase6","phase7","phase8","style"],"mappings":";AAAAA,SAASC,iBAAiB,mBAAoB,WACtCC,IAAAA,EAAOF,SAASG,cAAc,QAC9BC,EAAUJ,SAASG,cAAc,qBAGjCE,EADOD,EAAQD,cAAc,YAChBG,iBAAiB,OAC9BC,EAAMH,EAAQD,cAAc,OAE5BK,EAASN,EAAKO,aACdC,EAAaC,WAAWC,OAAOC,iBAAiBT,EAAS,MAAMU,iBAAiB,gBAmCtFF,OAAOX,iBAAiB,SAjCP,WACAW,OAAOG,QAAhBC,IACkBZ,EAAAA,EAAQa,wBAAxBC,EAAAA,EAAAA,IAAKC,EAAAA,EAAAA,OACPC,EAAWF,GAAO,GAAKC,EAASX,EAEtCD,EAAIc,UAAUC,OAAO,QAASF,GAC9Bb,EAAIc,UAAUC,OAAO,SAAUH,EAASX,GAElCe,IAAAA,EAASL,EAAM,EACfM,EAASN,GAAO,EAEhBO,EAAWpB,EAAM,GAAGY,wBAAwBC,IAC5CQ,GAAeD,EAAWP,GAAO,EAEjCS,EAAST,EAAMQ,GAAe,EAC9BE,EAASV,EAAoB,EAAdQ,GAAmB,EAGlCG,EAASJ,GAAY,EACrBK,EAASzB,EAAM,GAAGY,wBAAwBC,IAAe,GAATV,GAAgB,EAChEuB,EAAS1B,EAAM,GAAGY,wBAAwBC,IAAe,GAATV,GAAgB,EAChEwB,EAAS3B,EAAM,GAAGY,wBAAwBC,IAAe,GAATV,GAAgB,EAEtED,EAAIc,UAAUC,OAAO,UAAWC,GAChChB,EAAIc,UAAUC,OAAO,UAAWE,IAAWG,GAC3CpB,EAAIc,UAAUC,OAAO,UAAWK,IAAWC,GAC3CrB,EAAIc,UAAUC,OAAO,UAAWM,IAAWC,GAC3CtB,EAAIc,UAAUC,OAAO,UAAWO,IAAWC,GAC3CvB,EAAIc,UAAUC,OAAO,UAAWQ,IAAWC,GAC3CxB,EAAIc,UAAUC,OAAO,UAAWS,IAAWC,GAC3CzB,EAAIc,UAAUC,OAAO,UAAWU,KAKlCzB,EAAI0B,MAAMzB,OAAYA,GAAAA,OAAAA,EAAsB,EAAbE,EAA/B","file":"illusions.f5f04a18.js","sourceRoot":"../src/pages","sourcesContent":["document.addEventListener('DOMContentLoaded', () => {\n  const body = document.querySelector('body');\n  const section = document.querySelector('section.illusions');\n\n  const text = section.querySelector('.content');\n  const texts = text.querySelectorAll('div');\n  const svg = section.querySelector('svg');\n\n  const height = body.clientHeight;\n  const svgPadding = parseFloat(window.getComputedStyle(section, null).getPropertyValue('padding-top'));\n\n  const onScroll = () => {\n    const scroll = window.scrollY;\n    const { top, bottom } = section.getBoundingClientRect();\n    const isInside = top <= 0 && bottom > height;\n\n    svg.classList.toggle('fixed', isInside);\n    svg.classList.toggle('bottom', bottom < height);\n\n    const phase1 = top > 0;\n    const phase2 = top <= 0;\n\n    const childTop = texts[2].getBoundingClientRect().top;\n    const childLength = (childTop - top) / 3;\n\n    const phase3 = top + childLength <= 0;\n    const phase4 = top + childLength * 2 <= 0;\n    // end of child\n\n    const phase5 = childTop <= 0;\n    const phase6 = texts[3].getBoundingClientRect().top - height * 0.3 <= 0;\n    const phase7 = texts[4].getBoundingClientRect().top - height * 0.3 <= 0;\n    const phase8 = texts[5].getBoundingClientRect().top - height * 0.3 <= 0;\n\n    svg.classList.toggle('phase-1', phase1);\n    svg.classList.toggle('phase-2', phase2 && !phase3);\n    svg.classList.toggle('phase-3', phase3 && !phase4);\n    svg.classList.toggle('phase-4', phase4 && !phase5);\n    svg.classList.toggle('phase-5', phase5 && !phase6);\n    svg.classList.toggle('phase-6', phase6 && !phase7);\n    svg.classList.toggle('phase-7', phase7 && !phase8);\n    svg.classList.toggle('phase-8', phase8);\n  }\n\n  window.addEventListener('scroll', onScroll);\n\n  svg.style.height = `${height - svgPadding * 2}px`;\n});\n\n// первые 2 абзаца:\n// phase1 - сначала child-1 (ребёнок + диск)\n// phase2 - когда стал fixed - child-2 (появляется круг)\n// phase3 - child-3 (пропадает круг, появляется ellipse\n// phase4 - child-4, (пропадает ellipse, появляется arc)\n\n// phase5 - третий абзац — исчезает ребёнок, появляется голова\n// phase6 - четвёртый абзац — исчезает голова, появляются бык и человек\n// phase7 - пятый абзац — исчезают бык и человек, появляются маски\n// phase8 - шестой абзац — маски меняются\n"]}