/* ==========================================
   FEATURE: TABLET CONNECTION - FULLSCREEN
========================================== */

.feature-tablet-card{
    cursor:pointer;
}

.tablet-animation{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:6;
    background:rgba(0,0,0,.14);
    overflow:hidden;
    animation:tabletSceneFade 3.6s ease forwards;
}

.tablet-device{
    position:absolute;
    left:50%;
    top:48%;
    width:520px;
    height:330px;
    transform:translate(-50%,-50%);
    border-radius:34px;
    background:linear-gradient(145deg,#1d1d1d,#050505);
    border:3px solid rgba(255,106,0,.55);
    box-shadow:
        0 0 55px rgba(255,106,0,.35),
        0 35px 95px rgba(0,0,0,.75),
        inset 0 0 0 8px #080808;
    animation:tabletDeviceIn 3.6s cubic-bezier(.16,.84,.24,1) forwards;
}

.tablet-camera{
    position:absolute;
    top:50%;
    left:14px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#020202;
    box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.tablet-screen{
    position:absolute;
    inset:18px 22px;
    border-radius:24px;
    background:
        radial-gradient(circle at top, rgba(255,106,0,.24), transparent 38%),
        linear-gradient(180deg,#181818,#050505);
    overflow:hidden;
    padding:28px;
}

.tablet-status{
    color:#ff8a00;
    font-weight:900;
    letter-spacing:3px;
    font-size:.9rem;
    text-shadow:0 0 16px rgba(255,140,0,.75);
}

.tablet-screen h2{
    margin:34px 0 26px;
    color:white;
    font-size:2rem;
    line-height:1.1;
}

.tablet-apps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.tablet-apps div{
    height:92px;
    border-radius:20px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:2rem;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
    animation:tabletAppPop .55s ease both;
}

.tablet-apps div:nth-child(1){animation-delay:.45s;}
.tablet-apps div:nth-child(2){animation-delay:.65s;}
.tablet-apps div:nth-child(3){animation-delay:.85s;}

.tablet-apps span{
    font-size:.75rem;
    font-weight:900;
    letter-spacing:1px;
    color:rgba(255,255,255,.82);
}

.tablet-sync{
    position:absolute;
    right:26px;
    bottom:20px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,106,0,.14);
    border:1px solid rgba(255,106,0,.38);
    color:#ffb06b;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:1px;
    animation:tabletSyncPop .6s 1.2s ease both;
}

.tablet-glow{
    position:absolute;
    left:50%;
    top:48%;
    width:650px;
    height:380px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(255,106,0,.18);
    filter:blur(60px);
    animation:tabletGlowPulse 3.6s ease forwards;
}

@keyframes tabletSceneFade{
    0%,100%{opacity:0;}
    12%,82%{opacity:1;}
}

@keyframes tabletDeviceIn{
    0%{
        transform:translate(-50%,120%) rotate(12deg) scale(.75);
        opacity:0;
    }
    18%,76%{
        transform:translate(-50%,-50%) rotate(-2deg) scale(1);
        opacity:1;
    }
    100%{
        transform:translate(-50%,120%) rotate(10deg) scale(.82);
        opacity:0;
    }
}

@keyframes tabletAppPop{
    from{opacity:0;transform:translateY(18px) scale(.75);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes tabletSyncPop{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:translateY(0);}
}

@keyframes tabletGlowPulse{
    0%,100%{opacity:0;}
    20%,75%{opacity:1;}
}