/*==================================================
    VALENTINO X — GALLERY PAGE (additional styles)
    Load AFTER css/style.css
==================================================*/

/*==================================================
    SCROLL HINT
    (Small, premium nudge explaining the scroll-to-rotate
    interaction. Sits low in the leftover space below the
    focused card, fades out on its own once the visitor
    starts scrolling — see gallery.js.)
==================================================*/
.vx-gallery-hint{
    position:fixed;
    left:50%;
    /* top is set dynamically by gallery.js, just below the focused
       card and its caption, so it never drifts into either. This is
       just a safe fallback before JS runs. */
    top:520px;
    z-index:25;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:40px;
    background:rgba(11,11,11,.35);
    border:1px solid rgba(212,175,55,.16);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .6s ease, transform .6s ease;
}

.vx-gallery-hint.vx-show{
    opacity:1;
}

.vx-gallery-hint.vx-fade-out{
    opacity:0;
    transform:translateX(-50%) translateY(-8px);
}

.vx-gallery-hint-text{
    font-family:Poppins,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--vx-text,#ececec);
    opacity:.65;
}

.vx-gallery-hint-arrow{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(212,175,55,.4);
    background:rgba(212,175,55,.08);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--vx-purple);
    font-size:12px;
    animation:vxHintBounce 1.7s ease-in-out infinite;
}

@keyframes vxHintBounce{
    0%,100%{ transform:translateY(0); opacity:.75; }
    50%{ transform:translateY(7px); opacity:1; }
}

/* Kept off desktop — the desktop gallery has plenty of visible
   context and doesn't need the same nudge a narrow phone screen
   does. */
@media (min-width:992px){
    .vx-gallery-hint{ display:none; }
}

/*==================================================
    INSTAGRAM "TRENDING" SECTION
==================================================*/
.vx-insta-section{
    position:relative;
    background:#0b0b0b;
    padding:110px 0 100px;
    overflow:hidden;
}

/* ambient floating orbs — same visual language as the rest of the site */
.vx-insta-orb{
    position:absolute;
    z-index:0;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 70%);
    animation:vxDrift 14s ease-in-out infinite;
}
.vx-insta-orb-1{ width:420px; height:420px; top:-160px; left:-140px; animation-duration:16s; }
.vx-insta-orb-2{ width:300px; height:300px; bottom:-100px; right:-100px; animation-duration:13s; animation-delay:1s; }

@keyframes vxDrift{
    0%,100%{ transform:translateY(0) translateX(0); }
    50%{ transform:translateY(-22px) translateX(14px); }
}

.vx-insta-head{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:640px;
    margin:0 auto 60px;
}

.vx-insta-head .vx-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.vx-insta-head .vx-h2{
    margin-bottom:16px;
}

.vx-insta-sub{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:15.5px;
    line-height:1.85;
    opacity:.75;
    margin:0;
}

/*==================================================
    REEL GRID
==================================================*/
.vx-insta-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    max-width:1140px;
    margin:0 auto;
    padding:0 15px;
}

@media (max-width:991px){
    .vx-insta-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
}

@media (max-width:575px){
    .vx-insta-grid{ grid-template-columns:repeat(2, 1fr); max-width:460px; gap:14px; }
}

/*==================================================
    REEL PREVIEW TILE — NATIVE VIDEO
    (real .mp4 plays right in the grid; no popup,
    no external embed — just a clean, premium card)
==================================================*/
.vx-reel-card{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:3 / 4;
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(212,175,55,.18);
    background:#111;
    padding:0;
    cursor:pointer;
    transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.vx-reel-card:hover,
.vx-reel-card:focus-within{
    transform:translateY(-8px);
    border-color:var(--vx-purple);
    box-shadow:0 28px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.15);
    outline:none;
}

.vx-reel-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#111;
    transition:filter .5s ease;
}

/* subtle dim while paused so the play icon reads clearly;
   once playing (see .vx-playing, toggled by reels.js) it clears */
.vx-reel-card:not(.vx-playing) .vx-reel-video{
    filter:brightness(.75);
}

.vx-reel-card:hover .vx-reel-video{
    transform:scale(1.03);
}

/* permanent bottom gradient so text/badges stay legible */
.vx-reel-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(11,11,11,0) 42%, rgba(11,11,11,.88) 100%);
    pointer-events:none;
    z-index:1;
}

.vx-insta-tag{
    position:absolute;
    top:14px;
    left:14px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:30px;
    background:rgba(11,11,11,.55);
    backdrop-filter:blur(6px);
    font-family:Poppins,sans-serif;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.6px;
    color:#fff;
    text-transform:uppercase;
}

.vx-insta-tag i{ color:var(--vx-purple); font-size:11px; }

.vx-reel-play{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    width:56px;
    height:56px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.65);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    transition:opacity .4s ease, transform .4s ease, background .4s ease, border-color .4s ease;
    pointer-events:none;
}

.vx-reel-play i{
    color:#fff;
    font-size:18px;
    margin-left:3px;
    transition:.4s;
}

/* hidden once the reel is actually playing (see reels.js) */
.vx-reel-card.vx-playing .vx-reel-play{
    opacity:0;
    transform:translate(-50%,-50%) scale(.8);
}

.vx-reel-card:hover .vx-reel-play{
    background:var(--vx-purple);
    border-color:var(--vx-purple);
}

.vx-reel-card:hover .vx-reel-play i{
    color:var(--vx-dark);
}

/*==================================================
    SOUND TOGGLE
    (every reel autoplays muted; tap/click this to
    unmute — unmuting one reel re-mutes any other
    that was previously unmuted, handled in reels.js)
==================================================*/
.vx-reel-sound{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(11,11,11,.55);
    backdrop-filter:blur(6px);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12.5px;
    cursor:pointer;
    transition:.35s;
}

.vx-reel-sound:hover{
    background:var(--vx-purple);
    color:var(--vx-dark);
    border-color:var(--vx-purple);
}

.vx-reel-card.vx-unmuted .vx-reel-sound{
    background:var(--vx-purple);
    color:var(--vx-dark);
    border-color:var(--vx-purple);
}

.vx-insta-caption{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:2;
    font-family:Poppins,sans-serif;
    font-size:12.5px;
    font-weight:600;
    line-height:1.4;
    color:#fff;
}

@media (max-width:575px){
    .vx-reel-play{ width:44px; height:44px; }
    .vx-reel-play i{ font-size:14px; }
    .vx-insta-caption{ font-size:11px; }
    .vx-insta-tag{ font-size:9.5px; padding:5px 10px; }
    .vx-reel-sound{ width:30px; height:30px; font-size:11px; top:10px; right:10px; }
}

/*==================================================
    FOLLOW CTA
==================================================*/
.vx-insta-follow{
    position:relative;
    z-index:2;
    text-align:center;
    margin-top:58px;
}

.vx-insta-follow-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:17px 40px;
    color:#fff;
    border:2px solid var(--vx-purple);
    text-decoration:none !important;
    font-family:Poppins,sans-serif;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:.3px;
    border-radius:50px;
    background:rgba(212,175,55,.12);
    backdrop-filter:blur(10px);
    transition:.4s;
}

.vx-insta-follow-btn i.fa-instagram{
    font-size:18px;
    color:var(--vx-purple);
    transition:.4s;
}

.vx-insta-follow-btn i.fa-arrow-right{
    font-size:13px;
    transition:transform .4s ease;
}

.vx-insta-follow-btn:hover{
    background:var(--vx-purple);
    color:var(--vx-dark);
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(212,175,55,.25);
}

.vx-insta-follow-btn:hover i.fa-instagram{ color:var(--vx-dark); }
.vx-insta-follow-btn:hover i.fa-arrow-right{ transform:translateX(4px); }

@media (max-width:767px){
    /* Extra top padding so there's clear breathing room after the
       gallery section's own new bottom padding (see style.css),
       instead of the Instagram heading crowding right in. */
    .vx-insta-section{ padding:110px 0 70px; }
    .vx-insta-head{ margin-bottom:42px; }
}