/* ==========================================
   PORTFOLIO GALLERY — STANDALONE STYLES
   Built on top of styles.css tokens:
   --bg, --bg-secondary, --card, --card-hover,
   --primary, --primary-light, --text-secondary,
   --border, --shadow, --glow
========================================== */

:root{
    --green:#16a34a;
    --green-light:#22c55e;
    --tile-radius:18px;
}

/* ==========================================
   PAGE HEADER OVERRIDES
========================================== */

.gallery-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:1.15rem;
    color:#fff;
    text-decoration:none;
    letter-spacing:.3px;
}

.gallery-logo-mark{
    display:inline-flex;
    font-size:1.2rem;
    filter:drop-shadow(0 0 8px rgba(59,130,246,.6));
}

.gallery-back-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    font-size:.9rem;
}

.gallery-back-btn svg{
    transition:transform .3s ease;
}

.gallery-back-btn:hover svg{
    transform:translateX(-3px);
}

/* ==========================================
   GALLERY HERO
========================================== */

.gallery-hero{
    position:relative;
    min-height:62vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:160px 8% 90px;
    overflow:hidden;
}

.gallery-hero-inner{
    position:relative;
    z-index:1;
    max-width:760px;
}

.gallery-hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary-light);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    opacity:0;
    animation:heroRise .7s cubic-bezier(.25,1,.5,1) .1s both;
}

.gallery-hero-title{
    font-size:clamp(2.4rem,5vw,3.6rem);
    font-weight:800;
    line-height:1.15;
    margin:18px 0 20px;
    opacity:0;
    animation:heroRise .7s cubic-bezier(.25,1,.5,1) .22s both;
}

.gallery-hero-title span{
    background:linear-gradient(135deg,var(--primary-light),var(--green-light));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.gallery-hero-sub{
    color:var(--text-secondary);
    font-size:1.05rem;
    max-width:560px;
    margin:0 auto 36px;
    opacity:0;
    animation:heroRise .7s cubic-bezier(.25,1,.5,1) .34s both;
}

.gallery-hero-actions{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
    opacity:0;
    animation:heroRise .7s cubic-bezier(.25,1,.5,1) .46s both;
}

@keyframes heroRise{
    0%{ opacity:0; transform:translateY(18px); }
    100%{ opacity:1; transform:translateY(0); }
}

.gallery-hero-scroll{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--text-secondary);
    font-size:.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.gallery-hero-scroll span{
    width:1px;
    height:28px;
    background:linear-gradient(to bottom,var(--primary-light),transparent);
    animation:scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse{
    0%,100%{ opacity:.3; transform:scaleY(.7); }
    50%{ opacity:1; transform:scaleY(1); }
}

/* ==========================================
   SECTION HEADERS (extends .section-header)
========================================== */

.gallery-section{
    position:relative;
    padding:70px 8% 110px;
}

.gallery-section-alt{
    background:linear-gradient(180deg,transparent,rgba(11,18,38,.55) 12%,rgba(11,18,38,.55) 88%,transparent);
}

.gallery-section-header{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.25,1,.5,1), transform .7s cubic-bezier(.25,1,.5,1);
}

.gallery-section-header.in-view{
    opacity:1;
    transform:translateY(0);
}

.tag-green,
.tag-blue{
    display:inline-block;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:30px;
}

.tag-green{
    color:var(--green-light);
    background:rgba(22,163,74,.1);
    border:1px solid rgba(22,163,74,.25);
}

.tag-blue{
    color:var(--primary-light);
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.25);
}

/* ==========================================
   MEDIA GRID — 3x3
========================================== */

.media-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    max-width:1100px;
    margin:0 auto;
}

/* ==========================================
   MEDIA TILE
========================================== */

.media-tile{
    position:relative;
    aspect-ratio:1/1;
    border-radius:var(--tile-radius);
    overflow:hidden;
    cursor:pointer;
    background:var(--card);
    border:1px solid var(--border);
    box-shadow:var(--shadow);

    opacity:0;
    transform:translateY(28px) scale(.94);
    transition:
        opacity .55s cubic-bezier(.25,1,.5,1),
        transform .55s cubic-bezier(.25,1,.5,1),
        border-color .35s ease,
        box-shadow .35s ease;

    -webkit-tap-highlight-color:transparent;
}

.media-tile.tile-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* staggered reveal per column position, "blocks popping into place" */
.media-tile:nth-child(3n+1){ transition-delay:0ms; }
.media-tile:nth-child(3n+2){ transition-delay:80ms; }
.media-tile:nth-child(3n+3){ transition-delay:160ms; }

.media-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s cubic-bezier(.25,1,.5,1), filter .5s ease;
}

/* idle ambient animation — gentle breathing glow, staggered per tile */
.media-tile{
    animation:tileIdleGlow 6s ease-in-out infinite;
}
.media-tile:nth-child(1){ animation-delay:0s; }
.media-tile:nth-child(2){ animation-delay:.4s; }
.media-tile:nth-child(3){ animation-delay:.8s; }
.media-tile:nth-child(4){ animation-delay:1.2s; }
.media-tile:nth-child(5){ animation-delay:1.6s; }
.media-tile:nth-child(6){ animation-delay:2s; }
.media-tile:nth-child(7){ animation-delay:2.4s; }
.media-tile:nth-child(8){ animation-delay:2.8s; }
.media-tile:nth-child(9){ animation-delay:3.2s; }

@keyframes tileIdleGlow{
    0%,100%{ box-shadow:var(--shadow); }
    50%{ box-shadow:var(--shadow), 0 0 26px rgba(59,130,246,.18); }
}

#imageGrid .media-tile{ animation-name:tileIdleGlowGreen; }

@keyframes tileIdleGlowGreen{
    0%,100%{ box-shadow:var(--shadow); }
    50%{ box-shadow:var(--shadow), 0 0 26px rgba(22,163,74,.18); }
}

/* hover state */
.media-tile:hover,
.media-tile:focus-visible{
    border-color:rgba(59,130,246,.5);
    box-shadow:var(--shadow), 0 0 36px rgba(59,130,246,.3);
    outline:none;
}

#imageGrid .media-tile:hover,
#imageGrid .media-tile:focus-visible{
    border-color:rgba(22,163,74,.5);
    box-shadow:var(--shadow), 0 0 36px rgba(22,163,74,.3);
}

.media-tile:hover img,
.media-tile:focus-visible img{
    transform:scale(1.08);
    filter:brightness(1.05);
}

/* keyboard focus ring, accessible */
.media-tile:focus-visible{
    box-shadow:var(--shadow), 0 0 0 3px rgba(96,165,250,.55);
}

/* corner pixel-block accent, on-theme detail */
.media-tile::before{
    content:"";
    position:absolute;
    top:10px;
    left:10px;
    width:14px;
    height:14px;
    border-radius:3px;
    background:var(--primary);
    opacity:0;
    transform:scale(.4) rotate(-20deg);
    transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    z-index:2;
    box-shadow:0 0 10px rgba(59,130,246,.7);
}

#imageGrid .media-tile::before{
    background:var(--green);
    box-shadow:0 0 10px rgba(22,163,74,.7);
}

.media-tile:hover::before,
.media-tile:focus-visible::before{
    opacity:1;
    transform:scale(1) rotate(0deg);
}

/* ==========================================
   TILE OVERLAY (title / caption on hover)
========================================== */

.tile-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    padding:18px;
    background:linear-gradient(to top,rgba(2,4,10,.92) 0%,rgba(2,4,10,.55) 45%,transparent 80%);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .35s ease, transform .35s cubic-bezier(.25,1,.5,1);
}

.media-tile:hover .tile-overlay,
.media-tile:focus-visible .tile-overlay{
    opacity:1;
    transform:translateY(0);
}

.tile-overlay h3{
    font-size:1.05rem;
    font-weight:700;
    color:#fff;
    margin-bottom:2px;
}

.tile-overlay p{
    font-size:.82rem;
    color:var(--text-secondary);
}

.tile-icon{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(5,8,22,.7);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    font-size:.95rem;
    backdrop-filter:blur(6px);
    transform:scale(.6) rotate(-15deg);
    opacity:0;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}

.media-tile:hover .tile-icon,
.media-tile:focus-visible .tile-icon{
    transform:scale(1) rotate(0deg);
    opacity:1;
}

.tile-icon-play{
    background:rgba(59,130,246,.25);
    border-color:rgba(96,165,250,.5);
    font-size:.8rem;
    padding-left:1px;
}

/* play badge always lightly visible on video tiles, even idle */
.media-tile-video .tile-icon-play{
    opacity:.85;
    transform:scale(1);
}

.media-tile-video:hover .tile-icon-play,
.media-tile-video:focus-visible .tile-icon-play{
    opacity:1;
    transform:scale(1.12);
}

/* ==========================================
   CENTER PLAY BUTTON (video tiles)
   Always visible — hovered or not.
========================================== */

.tile-play-center{
    position:absolute;
    top:50%;
    left:50%;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(5,8,22,.55);
    border:1.5px solid rgba(255,255,255,.35);
    backdrop-filter:blur(4px);
    color:#fff;
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    pointer-events:none;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
}

.tile-play-center svg{
    width:24px;
    height:24px;
    margin-left:2px; /* optical centering for triangle shape */
    fill:#fff;
}

.media-tile-video:hover .tile-play-center,
.media-tile-video:focus-visible .tile-play-center{
    transform:translate(-50%,-50%) scale(1.12);
    background:rgba(59,130,246,.45);
    border-color:rgba(96,165,250,.7);
}

/* reduce blur work on mobile / low-power */
@media (hover:none){
    .tile-overlay{
        opacity:1;
        transform:translateY(0);
        background:linear-gradient(to top,rgba(2,4,10,.85) 0%,rgba(2,4,10,.15) 60%,transparent 100%);
    }
    .tile-icon{
        opacity:1;
        transform:scale(1);
    }
}

/* ==========================================
   MODAL EXTENSIONS (video support + nav)
========================================== */

/* Auto-fit: the modal-content grows/shrinks to hug the media */
.modal-content{
    /* override any fixed width — let content drive size */
    width:fit-content !important;
    max-width:min(92vw, 1200px) !important;
    transition:width .3s cubic-bezier(.25,1,.5,1),
               height .3s cubic-bezier(.25,1,.5,1);
}

.modal-media{
    /* no fixed height — let the image/video report its own */
    width:auto;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    /* smooth size transition when switching items */
    transition:min-height .25s ease;
}

.modal-media img{
    width:auto;
    height:auto;
    max-width:min(86vw, 1100px);
    max-height:78vh;
    display:block;
    border-radius:10px;
    /* fade in once loaded */
    opacity:0;
    transition:opacity .3s ease;
}

.modal-media img.loaded{
    opacity:1;
}

/* ---- VIDEO PLAYER ---- */
.modal-media video{
    width:auto;
    height:auto;
    max-width:min(86vw, 1100px);
    max-height:78vh;
    display:block;
    border-radius:10px;
    background:transparent;
    will-change:transform;
}

/* Custom video wrapper for extra controls */
.video-wrapper{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    background:transparent;
    border-radius:10px;
    overflow:hidden;
    max-width:min(86vw, 1100px);
}

.video-wrapper video{
    width:auto;
    height:auto;
    max-width:min(86vw, 1100px);
    max-height:72vh;
    display:block;
    border-radius:10px 10px 0 0;
    background:transparent;
    will-change:transform;
    object-fit:contain;
}

/* Buffering spinner overlay */
.video-spinner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:44px;
    height:44px;
    border:3px solid rgba(255,255,255,.15);
    border-top-color:var(--primary-light,#60a5fa);
    border-radius:50%;
    animation:spinnerSpin .7s linear infinite;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:5;
}

.video-spinner.visible{ opacity:1; }

@keyframes spinnerSpin{
    to{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* Custom speed bar */
.video-speed-bar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    background:rgba(5,8,22,.85);
    border-top:1px solid rgba(255,255,255,.07);
    width:100%;
    box-sizing:border-box;
}

.video-speed-bar label{
    color:rgba(255,255,255,.45);
    font-size:.72rem;
    font-family:'Poppins',sans-serif;
    letter-spacing:.5px;
    white-space:nowrap;
    flex-shrink:0;
}

.speed-btn{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.6);
    border-radius:5px;
    font-size:.72rem;
    font-family:'Poppins',sans-serif;
    padding:3px 8px;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
}

.speed-btn:hover{
    background:rgba(59,130,246,.25);
    border-color:rgba(96,165,250,.5);
    color:#fff;
}

.speed-btn.active{
    background:var(--primary,#3b82f6);
    border-color:var(--primary,#3b82f6);
    color:#fff;
}

/* PiP button */
.pip-btn{
    margin-left:auto;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.5);
    border-radius:5px;
    font-size:.72rem;
    font-family:'Poppins',sans-serif;
    padding:3px 8px;
    cursor:pointer;
    transition:all .2s ease;
    flex-shrink:0;
}

.pip-btn:hover{
    background:rgba(59,130,246,.2);
    border-color:rgba(96,165,250,.4);
    color:#fff;
}

.modal-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(5,8,22,.7);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2510;
    transition:all .25s ease;
}

.modal-nav:hover{
    background:var(--primary);
    border-color:var(--primary);
    box-shadow:0 0 20px rgba(59,130,246,.5);
}

.modal-prev{ left:16px; }
.modal-next{ right:16px; }

@media (max-width:700px){
    .modal-nav{
        width:38px;
        height:38px;
    }
    .modal-prev{ left:8px; }
    .modal-next{ right:8px; }
}

/* loading shimmer while media swaps in modal */
.modal-media.is-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 70%);
    background-size:200% 100%;
    animation:modalShimmer 1.1s linear infinite;
}

@keyframes modalShimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:900px){
    .media-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
    .gallery-hero{
        min-height:54vh;
        padding:140px 6% 70px;
    }
}

@media (max-width:560px){
    .media-grid{
        grid-template-columns:1fr;
        gap:14px;
    }
    .gallery-section{
        padding:50px 6% 80px;
    }
    .gallery-hero-actions{
        flex-direction:column;
        align-items:center;
        width:100%;
    }
    .gallery-hero-actions .primary-btn,
    .gallery-hero-actions .secondary-btn{
        width:100%;
        max-width:280px;
    }
    .tile-overlay{
        opacity:1;
        transform:translateY(0);
    }
    .tile-icon{
        opacity:1;
        transform:scale(1);
    }
    .tile-play-center{
        width:52px;
        height:52px;
    }
    .tile-play-center svg{
        width:20px;
        height:20px;
    }
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce){
    .media-tile,
    .gallery-hero-eyebrow,
    .gallery-hero-title,
    .gallery-hero-sub,
    .gallery-hero-actions,
    .gallery-section-header{
        animation:none !important;
        transition-duration:.01ms !important;
        opacity:1 !important;
        transform:none !important;
    }
    .gallery-hero-scroll span{
        animation:none !important;
    }
}