/**
 * =========================================================
 * PERTECNICA HOMEPAGE ENGINE
 * HOMEPAGE GOVERNANCE
 * =========================================================
 *
 * PURPOSE:
 * Centralized homepage orchestration layer
 *
 * RESPONSIBILITIES:
 * - homepage rendering flow
 * - section stacking
 * - overflow governance
 * - typography normalization
 * - interaction governance
 * - reveal animations
 * - responsive orchestration
 *
 * =========================================================
 */


/* =========================================================
   HOMEPAGE ROOT
========================================================= */

.phe-homepage {
    position: relative;

    width: 100%;

    overflow-x: hidden;

    background: var(--phe-bg-white);

    color: var(--phe-text-primary);
}


/* =========================================================
   GLOBAL BOX SIZING
========================================================= */

.phe-homepage *,
.phe-homepage *::before,
.phe-homepage *::after {
    box-sizing: border-box;
}


/* =========================================================
   GLOBAL SECTION FLOW
========================================================= */

.phe-homepage .phe-section {
    position: relative;

    z-index: var(--phe-z-base);
}


/* =========================================================
   SECTION BACKGROUND MODIFIERS
========================================================= */

.phe-section-light {
    background: var(--phe-bg-light);
}


.phe-section-soft {
    background: var(--phe-bg-soft);
}


.phe-section-dark {
    background: var(--phe-bg-dark);

    color: #ffffff;
}


.phe-section-dark .phe-section-title,
.phe-section-dark .phe-section-subtitle {
    color: #ffffff;
}


/* =========================================================
   IMAGE GOVERNANCE
========================================================= */

.phe-homepage img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* =========================================================
   LINK GOVERNANCE
========================================================= */

.phe-homepage a {
    text-decoration: none;

    transition: var(--phe-transition-base);
}


/* =========================================================
   BUTTON NORMALIZATION
========================================================= */

.phe-homepage button {
    font-family: inherit;
}


/* =========================================================
   LIST NORMALIZATION
========================================================= */

.phe-homepage ul,
.phe-homepage ol {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   TYPOGRAPHY NORMALIZATION
========================================================= */

.phe-homepage h1,
.phe-homepage h2,
.phe-homepage h3,
.phe-homepage h4,
.phe-homepage h5,
.phe-homepage h6,
.phe-homepage p {
    margin-top: 0;
}


/* =========================================================
   REVEAL ANIMATION SYSTEM
========================================================= */

.phe-reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

    will-change:
        opacity,
        transform;
}


.phe-reveal-active {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .phe-reveal,
    .phe-reveal-active {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

}


/* =========================================================
   RESPONSIVE GOVERNANCE
========================================================= */

@media (max-width: 768px) {

    .phe-homepage {
        overflow-x: hidden;
    }

}