/* ShortVid — Video Player Styles */

/* Video Feed Container */
#video-feed{
    position:absolute;inset:0;
    overflow-y:scroll;
    scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:none;
    will-change:scroll-position;
}

/* Each Video Card = Full Screen */
.video-card{
    position:relative;
    width:100%;
    height:100dvh;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    overflow:hidden;
    background:var(--bg-primary);
    contain:layout paint;
}

/* Video Background (CSS animated placeholder) */
.video-bg{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}

.video-bg::before{
    content:'';position:absolute;inset:-20%;
    background:var(--grad, linear-gradient(135deg,#667eea 0%,#764ba2 100%));
    background-size:200% 200%;
    animation:gradientShift 8s ease infinite;
    filter:brightness(.85);
}

.video-bg::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.3) 100%);
    z-index:1;
}

/* Disable pseudo-elements on iframe/instagram video backgrounds */
.video-bg-iframe::before,.video-bg-instagram::before{display:none}
.video-bg-iframe::after,.video-bg-instagram::after{
    z-index:2;
    background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 25%,transparent 75%,rgba(0,0,0,.3) 100%);
}
.video-bg-iframe iframe{
    z-index:1;
    position:absolute;inset:0;
    width:100%;height:100%;
    border:0;
}

/* Floating Emoji Icon in video */
.video-emoji{
    position:relative;z-index:2;
    font-size:80px;
    animation:floatEmoji 3s ease-in-out infinite;
    filter:drop-shadow(0 4px 20px rgba(0,0,0,.3));
}

@keyframes floatEmoji{
    0%,100%{transform:translateY(0) rotate(-5deg)}
    50%{transform:translateY(-20px) rotate(5deg)}
}

/* Video element (for real videos) */
.video-card video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:1;
}

/* Tap to play/pause overlay */
.video-tap-zone{
    position:absolute;inset:0;z-index:5;
}

/* Play/Pause Icon */
.play-pause-icon{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0);
    width:72px;height:72px;
    background:rgba(0,0,0,.5);
    border-radius:var(--radius-full);
    display:flex;align-items:center;justify-content:center;
    z-index:10;
    opacity:0;
    transition:transform .2s var(--ease-spring),opacity .2s;
    pointer-events:none;
}

.play-pause-icon.show{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
}

.play-pause-icon.hide-anim{
    transform:translate(-50%,-50%) scale(1.5);
    opacity:0;
}

.play-pause-icon svg{
    width:32px;height:32px;color:#fff;
}

/* Double-tap heart */
.double-tap-heart{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0);
    font-size:80px;
    z-index:15;
    pointer-events:none;
    opacity:0;
}

.double-tap-heart.burst{
    animation:heartBurst .6s var(--ease-spring) forwards, floatUp 1s .4s ease forwards;
}

/* Video Progress Bar */
.video-progress{
    position:absolute;
    bottom:0;left:0;right:0;
    height:3px;
    z-index:20;
    background:rgba(255,255,255,.15);
}

.video-progress-fill{
    height:100%;
    background:var(--accent-gradient);
    border-radius:0 2px 2px 0;
    width:0%;
    will-change:width;
}

/* Right Side Action Buttons */
.video-actions{
    position:absolute;
    right:var(--space-md);
    bottom:160px;
    z-index:10;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-lg);
}

.action-btn{
    display:flex;flex-direction:column;
    align-items:center;gap:3px;
    transition:transform var(--trans-spring);
}

.action-btn:active{transform:scale(.85)}

.action-btn-circle{
    width:44px;height:44px;
    border-radius:var(--radius-full);
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    transition:background var(--trans-fast),transform var(--trans-spring);
    border:1px solid rgba(255,255,255,.1);
}

.action-btn-circle svg{width:24px;height:24px;color:#fff}

.action-btn-count{
    font-size:var(--font-xs);font-weight:600;
    color:var(--text-primary);
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* Liked state */
.action-btn.liked .action-btn-circle{
    background:rgba(233,69,96,.25);
    border-color:rgba(233,69,96,.4);
}
.action-btn.liked .action-btn-circle svg{
    color:var(--accent-primary);
    animation:heartBurst .4s var(--ease-spring);
}

/* Creator Avatar */
.action-avatar{
    position:relative;margin-bottom:var(--space-sm);
}

.action-avatar-img{
    width:44px;height:44px;
    border-radius:var(--radius-full);
    background:var(--accent-gradient);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--font-sm);font-weight:700;color:#fff;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}

.action-avatar-follow{
    position:absolute;
    bottom:-6px;left:50%;transform:translateX(-50%);
    width:20px;height:20px;
    background:var(--accent-primary);
    border-radius:var(--radius-full);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;color:#fff;
    border:2px solid var(--bg-primary);
}

/* Video Info (Bottom Left) */
.video-info{
    position:absolute;
    bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px);
    left:var(--space-md);
    right:80px;
    z-index:10;
}

.video-creator{
    display:flex;align-items:center;gap:var(--space-sm);
    margin-bottom:var(--space-xs);
}

.creator-name{
    font-size:var(--font-base);font-weight:700;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}

.creator-verified{
    width:16px;height:16px;
    background:var(--accent-secondary);
    border-radius:var(--radius-full);
    display:flex;align-items:center;justify-content:center;
    font-size:10px;color:#fff;
}

.video-title{
    font-size:var(--font-sm);
    color:rgba(255,255,255,.9);
    margin-bottom:var(--space-sm);
    display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;
    text-shadow:0 1px 4px rgba(0,0,0,.4);
    line-height:1.4;
}

/* Read Article Button */
.read-article-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:var(--radius-pill);
    font-size:var(--font-xs);font-weight:600;
    color:var(--text-primary);
    border:1px solid rgba(255,255,255,.15);
    transition:background var(--trans-fast),transform var(--trans-spring);
}

.read-article-btn:active{transform:scale(.95);background:rgba(255,255,255,.2)}
.read-article-btn svg{width:14px;height:14px}

/* Music Marquee */
.video-music{
    display:flex;align-items:center;gap:var(--space-sm);
    margin-top:var(--space-sm);
}

.music-icon{font-size:12px}

.music-text{
    font-size:var(--font-xs);color:rgba(255,255,255,.7);
    overflow:hidden;white-space:nowrap;max-width:180px;
}

.music-text span{
    display:inline-block;
    animation:marquee 8s linear infinite;
}

@keyframes marquee{
    0%{transform:translateX(0)}
    100%{transform:translateX(-100%)}
}

/* Spinning Disc (music) */
.action-disc{
    width:36px;height:36px;
    border-radius:var(--radius-full);
    background:var(--bg-card);
    border:2px solid var(--border-light);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
    animation:spin 4s linear infinite;
    box-shadow:0 0 12px rgba(0,0,0,.3);
}

/* Desktop layout */
@media(min-width:768px){
    #video-feed{
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    .video-card{
        max-width:420px;
        height:100dvh;
        border-radius:0;
        position:relative;
    }
    .video-info{
        bottom:20px;
    }
    .video-actions{
        bottom:100px;
    }
}

@media(min-width:1024px){
    .video-card{
        max-width:400px;
        margin:0 auto;
        border-left:1px solid var(--border-subtle);
        border-right:1px solid var(--border-subtle);
    }
}

/* Feed Display Ad Card Styles */
.ad-feed-card {
    background: linear-gradient(135deg, #0b0b16 0%, #151528 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-feed-container {
    width: 90%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: fadeInUp 0.6s var(--ease-out);
}

.ad-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ad-feed-badge {
    padding: 3px 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.ad-feed-label {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    font-weight: 500;
}

.ad-feed-content {
    width: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-display-ad {
    width: 300px;
    height: 250px;
    background: #000;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ad-feed-footer {
    text-align: center;
}

.ad-feed-title {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ad-feed-desc {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}