@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/typography.css');

@import url('layout/grid.css');
@import url('layout/header.css');
@import url('layout/footer.css');

@import url('components/buttons.css');
@import url('components/cards.css');

@import url('sections/hero.css');
@import url('sections/stats.css');
@import url('sections/services.css');
@import url('sections/projects.css');
@import url('sections/about.css');
@import url('sections/journey.css');
@import url('sections/testimonials.css');
@import url('sections/branches.css');

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero__content .reveal {
    opacity: 0;
    transform: translateY(0);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__content .reveal.visible {
    opacity: 1;
    filter: blur(0);
}

.about .reveal {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="ltr"] .about .reveal {
    transform: translateX(-40px);
}

.about .reveal.visible {
    opacity: 1;
    transform: translateX(0);
}

.about__image.reveal {
    transform: translateX(-40px);
}

[dir="ltr"] .about__image.reveal {
    transform: translateX(40px);
}

.about__image.reveal.visible {
    transform: translateX(0);
}

.journey__timeline.reveal {
    opacity: 0;
    transform: none;
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .journey__timeline.reveal {
    clip-path: inset(0 0 0 100%);
}

.journey__timeline.reveal.visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.placeholder-page {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: var(--header-height);
    padding: var(--space-4xl) var(--space-xl);
}

.placeholder-page__content h1 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-md);
}

.placeholder-page__content p {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-2xl);
    max-width: 480px;
    margin-inline: auto;
}