/* ==========================================================
   ABOUT PAGE - Hero with growing flowers animation
   ========================================================== */

.about-page .hero-about {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.about-page .hero-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 3rem;
    gap: 2rem;
    align-items: center;
    position: relative;
    z-index: 10;
}

.about-page .hero-text {
    padding-left: 2rem;
}
.about-page .hero-subtitle {
    font-family: var(--font-handwritten);
    font-size: 1.8rem;
    color: var(--color-sage);
    margin-bottom: 1rem;
}
.about-page .hero-title {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-forest);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.about-page .hero-title span,
.about-page .hero-title em {
    color: var(--color-sage);
    font-style: italic;
}
.about-page .hero-description {
    font-size: 1.15rem;
    color: var(--color-forest);
    opacity: 0.85;
    line-height: 1.9;
}
.about-page .hero-description p {
    margin: 0 0 1rem;
}
.about-page .hero-description p:last-child { margin-bottom: 0; }

/* ============== FLOWERS CONTAINER ============== */
.about-page .flowers-container {
    position: relative;
    height: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 1000px;
}
.about-page .night {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.about-page .flowers {
    position: relative;
    transform: scale(0.7);
    z-index: 5;
}

/* ============== FLOWERS ============== */
.about-page .flower {
    position: absolute;
    bottom: 10vmin;
    transform-origin: bottom center;
    z-index: 10;
    --fl-speed: 0.8s;
}
.about-page .flower--1 { animation: aboutMovingFlower1 4s linear infinite; }
.about-page .flower--1 .flower__line { height: 70vmin; animation-delay: 0.3s; }
.about-page .flower--1 .flower__line__leaf--1 { animation: aboutBloomLeafR var(--fl-speed) 1.6s backwards; }
.about-page .flower--1 .flower__line__leaf--2 { animation: aboutBloomLeafR var(--fl-speed) 1.4s backwards; }
.about-page .flower--1 .flower__line__leaf--3 { animation: aboutBloomLeafL var(--fl-speed) 1.2s backwards; }
.about-page .flower--1 .flower__line__leaf--4 { animation: aboutBloomLeafL var(--fl-speed) 1s backwards; }
.about-page .flower--1 .flower__line__leaf--5 { animation: aboutBloomLeafR var(--fl-speed) 1.8s backwards; }
.about-page .flower--1 .flower__line__leaf--6 { animation: aboutBloomLeafL var(--fl-speed) 2s backwards; }

.about-page .flower--2 {
    left: 50%;
    transform: rotate(20deg);
    animation: aboutMovingFlower2 4s linear infinite;
}
.about-page .flower--2 .flower__line { height: 60vmin; animation-delay: 0.6s; }
.about-page .flower--2 .flower__line__leaf--1 { animation: aboutBloomLeafR var(--fl-speed) 1.9s backwards; }
.about-page .flower--2 .flower__line__leaf--2 { animation: aboutBloomLeafR var(--fl-speed) 1.7s backwards; }
.about-page .flower--2 .flower__line__leaf--3 { animation: aboutBloomLeafL var(--fl-speed) 1.5s backwards; }
.about-page .flower--2 .flower__line__leaf--4 { animation: aboutBloomLeafL var(--fl-speed) 1.3s backwards; }

.about-page .flower--3 {
    left: 50%;
    transform: rotate(-15deg);
    animation: aboutMovingFlower3 4s linear infinite;
}
.about-page .flower--3 .flower__line { animation-delay: 0.9s; }
.about-page .flower--3 .flower__line__leaf--1 { animation: aboutBloomLeafR var(--fl-speed) 2.5s backwards; }
.about-page .flower--3 .flower__line__leaf--2 { animation: aboutBloomLeafR var(--fl-speed) 2.3s backwards; }
.about-page .flower--3 .flower__line__leaf--3 { animation: aboutBloomLeafL var(--fl-speed) 2.1s backwards; }
.about-page .flower--3 .flower__line__leaf--4 { animation: aboutBloomLeafL var(--fl-speed) 1.9s backwards; }

.about-page .flower__leafs {
    position: relative;
    animation: aboutBlooming 2s backwards;
}
.about-page .flower__leafs--1 { animation-delay: 1.1s; }
.about-page .flower__leafs--2 { animation-delay: 1.4s; }
.about-page .flower__leafs--3 { animation-delay: 1.7s; }
.about-page .flower__leafs::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    width: 8vmin;
    height: 8vmin;
    background-color: var(--color-rose-light);
    filter: blur(10vmin);
}

.about-page .flower__leaf {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 8vmin;
    height: 11vmin;
    border-radius: 51% 49% 47% 53%/44% 45% 55% 69%;
    background-color: var(--color-rose-light);
    background-image: linear-gradient(to top, var(--color-rose), var(--color-rose-light));
    transform-origin: bottom center;
    opacity: 0.9;
    box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
}
.about-page .flower__leaf--1 { transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); }
.about-page .flower__leaf--2 { transform: translate(-50%, -4%) rotateX(40deg); }
.about-page .flower__leaf--3 { transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); }
.about-page .flower__leaf--4 {
    width: 8vmin;
    height: 8vmin;
    transform-origin: bottom left;
    border-radius: 4vmin 10vmin 4vmin 4vmin;
    transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
    background-image: linear-gradient(to top, var(--color-rose-deep), var(--color-rose-light));
    z-index: 1;
    opacity: 0.8;
}

.about-page .flower__white-circle {
    position: absolute;
    left: -3.5vmin;
    top: -3vmin;
    width: 9vmin;
    height: 4vmin;
    border-radius: 50%;
    background-color: #fff;
}
.about-page .flower__white-circle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border-radius: inherit;
    background-image: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}

.about-page .flower__line {
    height: 55vmin;
    width: 1.5vmin;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2)),
                      linear-gradient(to top, transparent 10%, var(--color-sage-dark), var(--color-sage));
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    animation: aboutGrowFlowerTree 4s backwards;
}

.about-page .flower__line__leaf {
    --w: 7vmin;
    --h: calc(var(--w) + 2vmin);
    position: absolute;
    top: 20%;
    left: 90%;
    width: var(--w);
    height: var(--h);
    border-top-right-radius: var(--h);
    border-bottom-left-radius: var(--h);
    background-image: linear-gradient(to top, rgba(90, 107, 79, 0.4), var(--color-sage));
}
.about-page .flower__line__leaf--1 { transform: rotate(70deg) rotateY(30deg); }
.about-page .flower__line__leaf--2 { top: 45%; transform: rotate(70deg) rotateY(30deg); }
.about-page .flower__line__leaf--3,
.about-page .flower__line__leaf--4,
.about-page .flower__line__leaf--6 {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: var(--h);
    border-bottom-right-radius: var(--h);
    left: -460%;
    top: 12%;
    transform: rotate(-70deg) rotateY(30deg);
}
.about-page .flower__line__leaf--4 { top: 40%; }
.about-page .flower__line__leaf--5 { top: 0; transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0.6); }
.about-page .flower__line__leaf--6 { top: -2%; left: -450%; transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0.6); }

.about-page .flower__light {
    position: absolute;
    bottom: 0vmin;
    width: 1vmin;
    height: 1vmin;
    background-color: var(--color-gold);
    border-radius: 50%;
    filter: blur(0.2vmin);
    animation: aboutLightAns 4s linear infinite backwards;
}
.about-page .flower__light:nth-child(odd) { background-color: var(--color-rose-light); }
.about-page .flower__light--1 { left: -2vmin; animation-delay: 1s; }
.about-page .flower__light--2 { left: 3vmin; animation-delay: 0.5s; }
.about-page .flower__light--3 { left: -6vmin; animation-delay: 0.3s; }
.about-page .flower__light--4 { left: 6vmin; animation-delay: 0.9s; }
.about-page .flower__light--5 { left: -1vmin; animation-delay: 1.5s; }
.about-page .flower__light--6 { left: -4vmin; animation-delay: 3s; }
.about-page .flower__light--7 { left: 3vmin; animation-delay: 2s; }
.about-page .flower__light--8 { left: -6vmin; animation-delay: 3.5s; }

.about-page .flower__grass {
    --c: var(--color-sage);
    --line-w: 1.5vmin;
    position: absolute;
    bottom: 12vmin;
    left: -7vmin;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 20;
    transform-origin: bottom center;
    transform: rotate(-48deg) rotateY(40deg);
}
.about-page .flower__grass--1 { animation: aboutMovingGrass 2s linear infinite; }
.about-page .flower__grass--top {
    width: 7vmin;
    height: 10vmin;
    border-top-right-radius: 100%;
    border-right: var(--line-w) solid var(--c);
    transform-origin: bottom center;
    transform: rotate(-2deg);
}
.about-page .flower__grass--bottom {
    margin-top: -2px;
    width: 7vmin;
    height: 25vmin;
    border-bottom-right-radius: 100%;
    border-right: var(--line-w) solid var(--c);
    transform-origin: top center;
    transform: rotate(6deg);
}
.about-page .flower__grass__leaf {
    --size: 10vmin;
    position: absolute;
    width: calc(var(--size) * 2);
    height: var(--size);
    border-top-left-radius: var(--size);
    border-top-right-radius: var(--size);
    background-image: linear-gradient(to top, transparent, var(--color-sage));
}
.about-page .flower__grass__leaf--1 { top: -6%; left: 30%; --size: 10vmin; transform: rotate(-20deg); }
.about-page .flower__grass__leaf--2 { top: 5%; left: -130%; --size: 8vmin; transform: rotate(5deg); }
.about-page .flower__grass__leaf--3 { top: 25%; left: 35%; --size: 14vmin; transform: rotate(-6deg); }
.about-page .flower__grass__leaf--4 { top: 30%; left: -180%; --size: 12vmin; transform: rotate(10deg); }
.about-page .flower__grass__leaf--5 { top: 50%; left: -120%; --size: 10vmin; transform: rotate(20deg); }
.about-page .flower__grass__leaf--6 { top: 55%; left: 70%; --size: 8vmin; transform: rotate(-10deg); }
.about-page .flower__grass__leaf--7 { top: 75%; left: 150%; --size: 6vmin; transform: rotate(-30deg); }
.about-page .flower__grass__leaf--8 { top: 85%; left: -70%; --size: 8vmin; transform: rotate(5deg); }
.about-page .flower__grass__overlay { display: none; }

.about-page .grow-ans { animation: aboutGrowAns 2s var(--d) backwards; }
.about-page .growing-grass { animation: aboutGrowingGrass 1s 2s backwards; }

.about-page .long-g {
    position: absolute;
    bottom: 25vmin;
    left: -42vmin;
    transform-origin: bottom left;
}
.about-page .long-g--4 { left: 25vmin; bottom: -3vmin; transform-origin: center; transform: scale(0.6) rotateX(60deg); }
.about-page .long-g--5 { left: 42vmin; bottom: 0vmin; transform: scale(0.8) rotate(2deg); }

.about-page .long-g .leaf {
    --w: 15vmin;
    --h: 40vmin;
    --c: var(--color-sage);
    position: absolute;
    bottom: 0;
    width: var(--w);
    height: var(--h);
    border-top-left-radius: 100%;
    border-left: 2vmin solid var(--c);
    -webkit-mask-image: linear-gradient(to top, transparent 20%, black);
    mask-image: linear-gradient(to top, transparent 20%, black);
    transform-origin: bottom center;
}
.about-page .long-g .leaf--0 { left: 2vmin; animation: aboutLeafAns1 4s linear infinite; }
.about-page .long-g .leaf--1 { --w: 5vmin; --h: 60vmin; animation: aboutLeafAns1 4s linear infinite; }
.about-page .long-g .leaf--2 { --w: 10vmin; --h: 40vmin; left: -0.5vmin; bottom: 5vmin; transform-origin: bottom left; transform: rotateY(-180deg); animation: aboutLeafAns2 3s linear infinite; }
.about-page .long-g .leaf--3 { --w: 5vmin; --h: 30vmin; left: -1vmin; bottom: 3.2vmin; transform-origin: bottom left; transform: rotate(-10deg) rotateY(-180deg); animation: aboutLeafAns3 3s linear infinite; }

/* כשלא טעון - מקפיא את כל האנימציות עד שהדף מוכן */
.about-page .hero-about.not-loaded * { animation-play-state: paused !important; }

/* ============== ANIMATIONS (כל ה-keyframes עם prefix about- כדי לא להתנגש) ============== */
@keyframes aboutMovingFlower1 { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
@keyframes aboutMovingFlower2 { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(14deg); } }
@keyframes aboutMovingFlower3 { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-20deg) rotateY(-10deg); } }
@keyframes aboutBloomLeafR  { 0% { transform-origin: left;  transform: rotate(70deg) rotateY(30deg) scale(0); } }
@keyframes aboutBloomLeafL  { 0% { transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0); } }
@keyframes aboutGrowFlowerTree { 0% { height: 0; border-radius: 1vmin; } }
@keyframes aboutBlooming { 0% { transform: scale(0); } }
@keyframes aboutMovingGrass    { 0%, 100% { transform: rotate(-48deg) rotateY(40deg); } 50% { transform: rotate(-50deg) rotateY(40deg); } }
@keyframes aboutGrowingGrass   { 0% { transform: scale(0); } }
@keyframes aboutGrowAns        { 0% { transform: scale(0); opacity: 0; } }
@keyframes aboutLightAns {
    0%   { opacity: 0; transform: translateY(0vmin); }
    25%  { opacity: 1; transform: translateY(-5vmin) translateX(-2vmin); }
    50%  { opacity: 1; transform: translateY(-15vmin) translateX(2vmin); filter: blur(0.2vmin); }
    75%  { transform: translateY(-20vmin) translateX(-2vmin); filter: blur(0.2vmin); }
    100% { transform: translateY(-30vmin); opacity: 0; filter: blur(1vmin); }
}
@keyframes aboutLeafAns1 { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.1); } }
@keyframes aboutLeafAns2 { 0%, 100% { transform: rotateY(-180deg) rotate(5deg); } 50% { transform: rotateY(-180deg) rotate(0deg) scale(1.1); } }
@keyframes aboutLeafAns3 { 0%, 100% { transform: rotate(-10deg) rotateY(-180deg); } 50% { transform: rotate(-20deg) rotateY(-180deg); } }

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px) {
    .about-page .hero-content-wrapper { grid-template-columns: 1fr; }
    .about-page .flowers-container { height: 500px; }
    .about-page .hero-text { padding: 0; text-align: center; order: -1; }
}
@media (max-width: 768px) {
    .about-page .hero-content-wrapper { padding: 1.5rem; }
    .about-page .hero-title { font-size: 2.8rem; }
    .about-page .hero-subtitle { font-size: 1.5rem; }
    .about-page .flowers-container { height: 400px; }
    .about-page .flowers { transform: scale(0.5); }
}