/* ==================================================
   ÆKOZ - COMPONENTS.CSS
   Composants réutilisables
================================================== */

/* ==================================================
   SECTION TITLE
================================================== */

.section-title {

    text-align: center;

    max-width: 1000px;

    margin-inline: auto;

    margin-bottom: 72px;
}

/* ==================================================
   PERSONA CARD
================================================== */

.persona-card {

    display: grid;

    grid-template-columns:
        1fr 1.4fr;

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(255,255,255,0.08);
}

.persona-content {

    padding:
        48px;
}

.persona-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ==================================================
   PHONE MOCKUP
================================================== */

.phone-mockup {

    position: relative;

    width: 320px;

    aspect-ratio: 9 / 19;

    margin-inline: auto;

    border-radius:
        48px;

    overflow: hidden;

    border:
        10px solid rgba(255,255,255,0.08);

    background:
        #000;

    box-shadow:
        0 0 80px rgba(255,255,255,0.06);
}

/* ==================================================
   ORBIT RINGS
================================================== */

.orbit-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(231,79,1,0.45);

    animation:
        orbitRotate 40s linear infinite;
}

.orbit-ring.reverse {

    animation-direction: reverse;
}

@keyframes orbitRotate {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }
}

/* ==================================================
   FLOATING MEMORY CARD
================================================== */

.memory-card {

    position: absolute;

    overflow: hidden;

    border-radius:
        14px;

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 0 30px rgba(0,0,0,0.35);

    transition:
        var(--transition-medium);
}

.memory-card:hover {

    transform:
        scale(1.04);

    z-index:
        5;
}

/* ==================================================
   DIVIDER
================================================== */

.divider {

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );
}

/* ==================================================
   SURFACE SYSTEM
   Hiérarchie des surfaces visuelles
================================================== */

.card.surface-primary,
.surface-primary {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0)
        ),
        #10202D;

    border: 1px solid rgba(153,167,170,0.22);

    box-shadow:
        0 0 48px rgba(0,0,0,0.38);
}

.card.surface-secondary,
.surface-secondary {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0)
        ),
        #243644;

    border: 1px solid rgba(153,167,170,0.28);

    box-shadow:
        0 0 36px rgba(0,0,0,0.28);
}

.card.surface-tertiary,
.surface-tertiary {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0)
        ),
        rgba(73,91,105,0.14);

    border: 1px solid rgba(153,167,170,0.12);

    box-shadow: none;

    opacity: 0.82;
}