/* AfriSkill AI — Premium Device Mockups (generic, no brand logos) */

.device-phone {
    --device-w: min(260px, 72vw);
    position: relative;
    width: var(--device-w);
    aspect-ratio: 9 / 19.5;
    margin: 0 auto;
    border-radius: calc(var(--device-w) * 0.14);
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 45%, #020617 100%);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 48px rgba(79, 70, 229, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    padding: calc(var(--device-w) * 0.035);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
    transform-style: preserve-3d;
}

.device-phone--android {
    border-radius: calc(var(--device-w) * 0.1);
    background: linear-gradient(160deg, #334155 0%, #0f172a 50%, #020617 100%);
}

.device-phone--android .device-phone__notch {
    width: 22%;
    height: 2.2%;
    top: 2.2%;
    border-radius: 100px;
    background: #020617;
}

.device-phone--ios .device-phone__notch {
    width: 38%;
    height: 3.4%;
    top: 2%;
    border-radius: 100px;
    background: #020617;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.device-phone__notch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.device-phone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--device-w) * 0.11);
    overflow: hidden;
    background: #020617;
    isolation: isolate;
}

.device-phone--android .device-phone__screen {
    border-radius: calc(var(--device-w) * 0.075);
}

.device-phone__screen img,
.device-phone__screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.device-phone::after {
    content: '';
    position: absolute;
    inset: 8% 10% auto 10%;
    height: 35%;
    border-radius: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
    z-index: 4;
}

.device-phone.is-active,
.device-phone:hover {
    transform: translateY(-8px) scale(1.02) rotateY(-6deg);
    box-shadow:
        0 40px 80px rgba(37, 99, 235, 0.25),
        0 0 0 1px rgba(96, 165, 250, 0.25),
        0 0 40px rgba(37, 99, 235, 0.15);
}

.ma-showcase-row.is-reverse .device-phone:hover,
.ma-case-hero-grid .device-phone:hover {
    transform: translateY(-8px) scale(1.02) rotateY(6deg);
}

.device-phone--float {
    animation: deviceFloat 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes deviceFloat {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    25% { transform: translateY(-8px) rotateY(-3deg); }
    50% { transform: translateY(-12px) rotateY(0deg); }
    75% { transform: translateY(-8px) rotateY(3deg); }
}

.device-tablet {
    --device-w: min(420px, 88vw);
    position: relative;
    width: var(--device-w);
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    border-radius: 28px;
    background: linear-gradient(145deg, #1e293b, #020617);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    padding: 18px;
}

.device-tablet__screen {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}

.device-tablet__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .device-phone { --device-w: min(220px, 68vw); }
    .device-tablet { --device-w: min(100%, 92vw); }
}

@media (prefers-reduced-motion: reduce) {
    .device-phone,
    .device-phone--float {
        animation: none !important;
        transition: none !important;
    }
}