{"version":3,"sources":["../scripts/intro.js"],"names":["document","addEventListener","body","querySelector","section","text","svg","svgBackground","svgGroups","querySelectorAll","svgDetails","height","clientHeight","svgPadding","parseFloat","window","getComputedStyle","getPropertyValue","animationHeight","animationDistance","Math","round","length","hideSvg","style","opacity","forEach","gr","i","prevScroll","scrollY","morphingHeight","morphingDistance","headElement","circleElement","eyeElement","lineElement","eyeCenterElement","humanElement","waterElement","human2Element","scroll","getBoundingClientRect","top","bottom","svgTop","svgBottom","isInside","classList","toggle","animationStart","morph1","morph2","morph3","morph4","morph5","transform","value","index","floor"],"mappings":"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","file":"intro.7a8ae58d.js","sourceRoot":"../src/pages","sourcesContent":["document.addEventListener('DOMContentLoaded', () => {\n  const body = document.querySelector('body');\n  const section = document.querySelector('section.intro');\n\n  const text = section.querySelector('.content');\n  const svg = section.querySelector('svg');\n\n  const svgBackground = svg.querySelector('g.background');\n  const svgGroups = svg.querySelectorAll('g.group');\n  const svgDetails  = svg.querySelectorAll('g.details');\n\n  const height = body.clientHeight;\n  const svgPadding = parseFloat(window.getComputedStyle(section, null).getPropertyValue('padding-top'));\n\n  // голова висит подольше\n  const animationHeight = text.querySelector('div').clientHeight * 2;\n  const animationDistance = Math.round(animationHeight / svgGroups.length);\n\n  const hideSvg = () => {\n    svgBackground.style.opacity = 0;\n    svgGroups.forEach((gr, i) => {\n      gr.style.opacity = 0;\n    });\n  };\n\n  let prevScroll = window.scrollY;\n\n  const morphingHeight = text.clientHeight - animationHeight;\n  const morphingDistance = Math.round(morphingHeight / 4); // всего превращений 6, но 3 за 1 время\n\n  const headElement = svg.querySelector('#head');\n  const circleElement = svg.querySelector('#circle');\n  const eyeElement = svg.querySelector('#eye');\n  const lineElement = svg.querySelector('#line');\n  const eyeCenterElement = svg.querySelector('#eye-center');\n  const humanElement = svg.querySelector('#fall-01');\n  const waterElement = svg.querySelector('#fall-02');\n  const human2Element = svg.querySelector('#fall-03');\n\n  const onScroll = () => {\n    const scroll = window.scrollY;\n    const { top, bottom } = section.getBoundingClientRect();\n    const svgTop = top + scroll - height + svgPadding;\n    const svgBottom = bottom + scroll - height;\n    const isInside = scroll >= svgTop && scroll < svgBottom;\n\n    svg.classList.toggle('fixed', isInside);\n    svg.classList.toggle('bottom', scroll >= svgBottom);\n\n    const animationStart = svgTop + animationHeight;\n    const morph1 = animationStart + morphingDistance / 3;\n    const morph2 = animationStart + morphingDistance / 3 * 2;\n    const morph3 = animationStart + morphingDistance;\n    const morph4 = animationStart + morphingDistance * 2;\n    const morph5 = animationStart + morphingDistance * 3;\n\n    if (isInside) {\n      if (scroll <= animationStart) {\n        if (prevScroll > animationStart) {\n          circleElement.style.transform = 'scale(0)';\n          headElement.style.transform = 'scale(1)';\n        }\n\n        const value = (scroll - svgTop) / animationDistance;\n        const index = Math.floor(value);\n\n        svgBackground.style.opacity = 1;\n        svgDetails.forEach(gr => { gr.style.opacity = 1; });\n\n        svgGroups.forEach((gr, i) => {\n          gr.style.opacity = i === index ? 1 : 0;\n        });\n      } else {\n        svgDetails.forEach(gr => { gr.style.opacity = 0; });\n        svgGroups.forEach(gr => { gr.style.opacity = 0; });\n\n        // первый морфинг — из головы в круг\n        if (prevScroll <= animationStart) {\n          circleElement.style.transform = 'scale(1)'\n          headElement.style.transform = 'scale(0)';\n        }\n\n        // второй морфинг — из круга в глаз\n        if (scroll > morph1 && prevScroll <= morph1) {\n          circleElement.style.transform = 'scale(0)';\n          eyeElement.style.opacity = 1;\n          eyeCenterElement.style.transform = 'scale(0.9)';\n        }\n        if (scroll <= morph1 && prevScroll > morph1) {\n          circleElement.style.transform = 'scale(1)';\n          eyeElement.style.opacity = 0;\n          eyeCenterElement.style.transform = 'scale(0)';\n        }\n\n        // третий морфинг — из глаза в линию\n        if (scroll > morph2 && prevScroll <= morph2) {\n          eyeCenterElement.style.transform = 'scale(0)';\n          eyeElement.style.opacity = 0;\n          lineElement.style.opacity = 1;\n        }\n        if (scroll <= morph2 && prevScroll > morph2) {\n          eyeCenterElement.style.transform = 'scale(0.9)';\n          eyeElement.style.opacity = 1;\n          lineElement.style.opacity = 0;\n        }\n\n        // четвертый морфинг — из линии в человека\n        if (scroll > morph3 && prevScroll <= morph3) {\n          lineElement.style.opacity = 0;\n          humanElement.style.opacity = 1;\n          humanElement.classList.toggle('shift', true);\n        }\n        if (scroll <= morph3 && prevScroll > morph3) {\n          lineElement.style.opacity = 1;\n          humanElement.style.opacity = 0;\n        }\n\n        // пятый морфинг — из человека в воду\n        if (scroll > morph4 && prevScroll <= morph4) {\n          humanElement.style.opacity = 0;\n          waterElement.style.transform = 'scaleY(1)';\n          waterElement.style.opacity = 1;\n        }\n        if (scroll <= morph4 && prevScroll > morph4) {\n          humanElement.style.opacity = 1;\n          humanElement.classList.toggle('shift', false);\n          waterElement.style.transform = 'scaleY(0)';\n          waterElement.style.opacity = 0;\n        }\n\n        // шестой морфинг — из воды в человека\n        if (scroll > morph5 && prevScroll <= morph5) {\n          waterElement.style.transform = 'scaleY(0)'\n          waterElement.style.opacity = 0\n          human2Element.style.opacity = 1;\n          human2Element.classList.toggle('shift', true);\n        }\n        if (scroll <= morph5 && prevScroll > morph5) {\n          waterElement.style.transform = 'scaleY(1)';\n          waterElement.style.opacity = 1;\n          human2Element.style.opacity = 0;\n          human2Element.classList.toggle('shift', false);\n        }\n      }\n    } else if (scroll < svgTop) {\n      hideSvg();\n    }\n\n    prevScroll = scrollY;\n  }\n\n  window.addEventListener('scroll', onScroll);\n\n  svg.style.height = `${height - svgPadding * 2}px`;\n  hideSvg();\n});\n"]}