/* ============================================
   YEAR IN REVIEW - REUSABLE ALBUM STYLESHEET
   ============================================
   
   A standardized stylesheet for photo album pages
   with video overlay, gallery modal, and seasonal theming.
   
   Usage:
   1. Link this CSS file in your HTML
   2. Set theme variables in :root or inline <style>
   3. Use the provided HTML structure
   
   ============================================ */

/* Theme Variables - Override these for different albums/seasons */
:root{
    /* Base colors */
    --bg:#0f1724; 
    --card:#0b1220; 
    --muted:#94a3b8;
    --gap:14px;
    
    /* Theme-specific colors (Set these per album) */
    --theme-accent:#c2410c;
    --theme-logo-from:#7c2d12;
    --theme-logo-to:#ff7a18;
    
    /* Applied theme colors */
    --accent:var(--theme-accent);
    --logo-gradient-from:var(--theme-logo-from);
    --logo-gradient-to:var(--theme-logo-to);
}

/* ============================================
   BASE STYLES
   ============================================ */

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background:linear-gradient(180deg,#071025 0%,var(--bg) 100%);
    color:#e6eef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:28px;
}

/* ============================================
   HEADER
   ============================================ */

header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.logo{
    width:56px;
    height:56px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--logo-gradient-from),var(--logo-gradient-to));
    box-shadow:0 6px 18px rgba(0,0,0,.45);
    font-weight:700;
    font-size:36px;
    color:white;
}

h1{
    font-size:20px;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

h1 .seasonal-text{
    background:linear-gradient(135deg,var(--logo-gradient-from),var(--logo-gradient-to));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-style:italic;
    font-weight:700;
}

p.lead{
    margin:2px 0 0;
    color:var(--muted);
    font-size:13px;
}

.controls{
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:center;
}

.btn{
    background:transparent;
    border:1px solid rgba(255,255,255,.06);
    color:var(--muted);
    padding:8px 12px;
    border-radius:8px;
    font-size:13px;
    cursor:pointer;
    transition:all 0.3s ease;
}

.btn:hover{
    border-color:rgba(255,255,255,.12);
    color:#fff;
}

.btn.rewatch-attention{
    animation:subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse{
    0%, 100% { 
        box-shadow:0 0 0 rgba(255,122,24,0);
    }
    50% { 
        box-shadow:0 0 15px rgba(255,122,24,0.3);
    }
}

/* ============================================
   ALBUM GRID
   ============================================ */

.albums-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
    margin-top:24px;
}

/* Album Cover Card with Stacked Effect */
.album-cover{
    position:relative;
    cursor:pointer;
    transition:transform .2s ease;
}

.album-cover.loading{
    pointer-events:none;
}

.album-cover.loading::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    z-index:100;
}

.album-cover.loading::before{
    content:'Loading...';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:16px;
    font-weight:600;
    z-index:101;
    animation:pulse 1.5s ease-in-out infinite;
}

@keyframes pulse{
    0%, 100% { opacity:0.5; }
    50% { opacity:1; }
}

.album-cover:hover .album-cover-img{
    transform:scale(1.02);
    box-shadow:0 8px 24px rgba(0,0,0,.5);
}

.album-cover:active{
    transform:scale(.98);
}

.album-stack{
    position:relative;
    width:100%;
    height:280px;
}

.album-stack::before,
.album-stack::after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.12));
    border:1px solid rgba(255,255,255,0.03);
    border-radius:12px;
}

.album-stack::before{
    transform:rotate(-3deg) translateY(-6px);
    z-index:1;
    opacity:0.7;
}

.album-stack::after{
    transform:rotate(2deg) translateY(-3px);
    z-index:2;
    opacity:0.85;
}

.album-cover-img{
    position:relative;
    z-index:3;
    width:100%;
    height:280px;
    border-radius:12px;
    background:linear-gradient(135deg,#0b1225,#102135);
    border:1px solid rgba(255,255,255,0.03);
    overflow:hidden;
    transition:all .2s ease;
}

.album-cover-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.album-info{
    margin-top:16px;
    text-align:center;
}

.album-name{
    font-size:16px;
    font-weight:600;
    color:#e2e8f0;
    margin-bottom:6px;
}

.album-count{
    font-size:13px;
    color:var(--muted);
    margin-bottom:12px;
}

.take-me-there{
    display:inline-block;
    padding:9px 18px;
    background:linear-gradient(135deg,var(--accent),#ff7a18);
    color:#fff;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:all .15s ease;
}

.take-me-there:hover{
    transform:scale(1.05);
    box-shadow:0 4px 12px rgba(194,65,12,.4);
}

.take-me-there:disabled{
    cursor:wait;
    position:relative;
    overflow:hidden;
    pointer-events:none;
    opacity:0.7;
}

.take-me-there:disabled::before{
    content:'Loading...';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:inherit;
    z-index:2;
}

.take-me-there:disabled::after{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);
    animation:shimmer 1s infinite;
    z-index:1;
}

@keyframes shimmer{
    to{left:100%;}
}

/* ============================================
   GALLERY MODAL
   ============================================ */

.gallery-modal{
    position:fixed;
    inset:0;
    background:#000;
    z-index:100;
    display:none;
    flex-direction:column;
    will-change:transform,opacity;
}

.gallery-modal.show{
    display:flex;
}

body.modal-open{
    overflow:hidden;
}

.gallery-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 24px;
    background:rgba(0,0,0,0.95);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.gallery-header h3{
    margin:0;
    font-size:18px;
    color:#fff;
}

.gallery-close{
    background:transparent;
    border:0;
    color:#fff;
    font-size:28px;
    cursor:pointer;
    padding:0 8px;
    line-height:1;
    transition:color .15s ease;
}

.gallery-close:hover{
    color:var(--accent);
}

.gallery-grid{
    flex:1;
    overflow-y:auto;
    padding:24px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:16px;
    contain:layout style paint;
    align-content:start;
}

.gallery-item{
    aspect-ratio:3/2;
    background:#111;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .15s ease;
    border:2px solid transparent;
    will-change:transform;
    transform:translateZ(0);
    position:relative;
}

.gallery-item.loading{
    background:linear-gradient(90deg,#1a1a1a 0%,#2a2a2a 50%,#1a1a1a 100%);
    background-size:200% 100%;
    animation:skeleton 1.5s ease-in-out infinite;
}

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

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:translateZ(0);
    opacity:0;
    transition:opacity 0.3s ease;
}

.gallery-item img.loaded{
    opacity:1;
}

.gallery-item:hover{
    transform:scale(1.05) translateZ(0);
    border-color:var(--accent);
}

/* ============================================
   PHOTO VIEWER MODAL
   ============================================ */

.modal{
    position:fixed;
    inset:0;
    display:none;
    place-items:center;
    background:rgba(0,0,0,0.95);
    z-index:150;
    padding:8px;
}

.modal.show{
    display:grid;
}

.modal-content{
    max-width:1100px;
    width:100%;
    border-radius:8px;
    overflow:hidden;
    background:#041024;
    color:#fff;
    position:relative;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    padding:12px 16px;
    align-items:center;
    background:rgba(0,0,0,0.5);
}

.modal-body{
    padding:0;
    display:grid;
    background:#000;
}

.large{
    width:100%;
    height:80vh;
    background:#000;
    display:grid;
    place-items:center;
}

@media (max-width:520px){
    .modal{
        padding:4px;
    }
    
    .large{
        height:85vh;
    }
}

.close-btn{
    background:transparent;
    border:0;
    color:var(--muted);
    cursor:pointer;
    font-size:24px;
    transition:color .15s ease;
}

.close-btn:hover{
    color:#fff;
}

.close-btn.hint{
    animation:closeHint 2s ease-in-out 3;
}

@keyframes closeHint{
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.2); color:var(--accent); }
}

/* Navigation Arrows */
.nav-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.1);
    color:#fff;
    font-size:32px;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:all .15s ease;
    z-index:160;
}

.nav-arrow:hover{
    background:rgba(255,122,24,0.9);
    border-color:var(--accent);
    transform:translateY(-50%) scale(1.1);
}

.nav-arrow.disabled{
    opacity:0.3;
    cursor:not-allowed;
    pointer-events:none;
}

.nav-arrow.left{left:16px}
.nav-arrow.right{right:16px}

/* Navigation Hints */
.nav-arrow.hint{
    animation:arrowHint 2s ease-in-out 3;
}

@keyframes arrowHint{
    0%, 100% { transform:translateY(-50%) scale(1); }
    50% { transform:translateY(-50%) scale(1.15); box-shadow:0 0 20px rgba(255,122,24,0.8); }
}

/* ============================================
   VIDEO OVERLAY
   ============================================ */

.video-overlay{
    position:fixed;
    inset:0;
    background:#000;
    z-index:200;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.video-overlay.hidden{
    display:none !important;
}

.video-container{
    position:relative;
    width:auto;
    max-width:500px;
    height:80vh;
    max-height:900px;
    background:#000;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.8);
}

.video-loading{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:#000;
    color:#fff;
    z-index:5;
}

.video-loading .spinner{
    width:60px;
    height:60px;
    border:4px solid rgba(255,122,24,0.2);
    border-top-color:#ff7a18;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.video-loading p{
    font-size:16px;
    font-weight:500;
    color:rgba(255,255,255,0.8);
}

.video-container video{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    background:#000;
}

video{
    background:#1a1a1a;
}

.video-controls{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    padding:12px;
    background:rgba(0,0,0,0.7);
    border-radius:12px;
    display:flex;
    gap:12px;
    justify-content:center;
    align-items:center;
    backdrop-filter:blur(10px);
    z-index:10;
}

.video-btn{
    padding:8px 16px;
    background:rgba(0,0,0,0.8);
    border:1px solid rgba(255,255,255,0.3);
    color:#fff;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
    backdrop-filter:blur(10px);
    white-space:nowrap;
}

.video-btn:hover{
    background:rgba(255,255,255,0.2);
    border-color:rgba(255,255,255,0.4);
}

.video-btn.primary{
    background:linear-gradient(135deg,#c2410c,#ff7a18);
    border-color:transparent;
}

.video-btn.primary:hover{
    transform:scale(1.05);
    box-shadow:0 4px 12px rgba(194,65,12,.6);
}

/* Unmute Hint with Attention Animation */
.unmute-hint{
    position:absolute;
    bottom:80px;
    left:50%;
    transform:translateX(-50%);
    padding:12px 20px;
    background:rgba(0,0,0,0.9);
    border:2px solid rgba(255,122,24,0.6);
    border-radius:12px;
    color:#fff;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.5s ease;
    backdrop-filter:blur(10px);
    z-index:5;
    box-shadow:0 0 20px rgba(255,122,24,0.4);
}

.unmute-hint.show{
    opacity:1;
    animation:pulseAttention 2s ease-in-out infinite;
}

.unmute-hint.hide{
    opacity:0;
}

.unmute-hint .icon{
    font-size:20px;
    animation:pulseIcon 1.5s ease-in-out infinite;
}

@keyframes pulseAttention{
    0%, 100% {
        transform:translateX(-50%) scale(1);
        box-shadow:0 0 20px rgba(255,122,24,0.4);
    }
    50% {
        transform:translateX(-50%) scale(1.05);
        box-shadow:0 0 30px rgba(255,122,24,0.8);
    }
}

@keyframes pulseIcon{
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.2); }
}

/* ============================================
   NOTICE BANNER
   ============================================ */

.notice-banner{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(20,20,30,0.95);
    border:1px solid rgba(255,122,24,0.3);
    border-radius:12px;
    padding:16px 24px;
    max-width:400px;
    box-shadow:0 8px 24px rgba(0,0,0,0.6);
    backdrop-filter:blur(10px);
    z-index:50;
    display:flex;
    align-items:center;
    gap:12px;
    animation:slideUp 0.5s ease;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateX(-50%) translateY(20px);
    }
    to{
        opacity:1;
        transform:translateX(-50%) translateY(0);
    }
}

.notice-banner .icon{
    font-size:24px;
    flex-shrink:0;
}

.notice-content{
    flex:1;
}

.notice-content strong{
    display:block;
    color:#fff;
    font-size:14px;
    margin-bottom:4px;
}

.notice-content p{
    margin:0;
    font-size:13px;
    color:var(--muted);
    line-height:1.4;
}

.notice-banner .close-notice{
    background:transparent;
    border:0;
    color:var(--muted);
    font-size:20px;
    cursor:pointer;
    padding:0;
    line-height:1;
    transition:color 0.15s ease;
}

.notice-banner .close-notice:hover{
    color:#fff;
}

.notice-banner.hidden{
    display:none;
}

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

@media (max-width:520px){
    body{
        padding:14px;
    }
    
    header{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
        margin-bottom:16px;
    }
    
    header > div{
        width:100%;
    }
    
    .logo{
        width:48px;
        height:48px;
        font-size:36px;
    }
    
    h1{
        font-size:18px;
        line-height:1.3;
        width:100%;
    }
    
    p.lead{
        font-size:12px;
        margin-top:2px;
        width:100%;
    }
    
    .controls{
        gap:6px;
        margin-left:0;
        width:100%;
        justify-content:flex-start;
    }
    
    .btn{
        padding:7px 12px;
        font-size:12px;
    }
    
    .albums-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    
    .album-cover{
        max-width:100%;
    }
    
    .gallery-grid{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:12px;
        padding:16px;
    }
    
    .video-container{
        width:95%;
        max-width:280px;
        height:70vh;
        max-height:none;
    }
    
    .video-controls{
        top:10px;
        flex-direction:row;
        gap:8px;
        padding:8px;
    }
    
    .video-btn{
        padding:6px 12px;
        font-size:12px;
    }
    
    .unmute-hint{
        bottom:60px;
        font-size:12px;
        padding:8px 14px;
    }
    
    .notice-banner{
        bottom:16px;
        left:16px;
        right:16px;
        transform:none;
        max-width:none;
    }
    
    @keyframes slideUp{
        from{
            opacity:0;
            transform:translateY(20px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }
}