import re

with open('index.html', 'r', encoding='utf-8') as f:
    content = f.read()

# 1. Remove mission-tilt and preserve-3d
old_parent = '<div class="gsap-fade-left mission-tilt" style="position: relative; height: 650px; transform-style: preserve-3d;">'
new_parent = '<div class="gsap-fade-left hover-trigger" style="position: relative; height: 650px;">'
content = content.replace(old_parent, new_parent)

# 2. Add about-img-container to church image container
old_church_div = '<div style="position: absolute; left: 0; top: 0; width: 58%; height: 90%; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1);">'
new_church_div = '<div class="about-img-container" style="position: absolute; left: 0; top: 0; width: 58%; height: 90%; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);">'
content = content.replace(old_church_div, new_church_div)

# 3. Add a class to the priest image for the zoom effect
old_priest_img = '<img src="assets/images/mission-father.png" alt="Priest" style="width: 100%; height: auto; object-fit: contain; object-position: bottom center; max-height: 110%;">'
new_priest_img = '<img class="priest-zoom" src="assets/images/mission-father.png" alt="Priest" style="width: 100%; height: auto; object-fit: contain; object-position: bottom center; max-height: 110%;">'
content = content.replace(old_priest_img, new_priest_img)

with open('index.html', 'w', encoding='utf-8') as f:
    f.write(content)

css = """
.priest-zoom {
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hover-trigger:hover .priest-zoom,
.hover-trigger:hover .about-img-container img {
    transform: scale(1.03) !important;
}
.hover-trigger:hover .about-img-container::after {
    left: 150% !important;
}
"""

with open('css/styles.css', 'a', encoding='utf-8') as f:
    f.write('\n' + css)

print("Hover animations fixed.")