/* ================= RESET + GLOBAL ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:system-ui,-apple-system;
  -webkit-tap-highlight-color:transparent
}

body{
  background:#000;
  color:#fff;
  overflow-x:hidden
}

/* ================= GLOBAL MOTION VARIABLES ================= */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.18s var(--ease);
  --mid:.35s var(--ease);
  --slow:.55s var(--ease);
}

/* ================= HEADER ================= */
header,
.header{
  padding:26px;
  animation:slideDown .6s var(--ease) both
}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-16px)}
  to{opacity:1;transform:none}
}

h1{
  font-size:34px;
  font-weight:700
}

h1 span{
  color:#a855f7
}

.brand{
  display:flex;
  align-items:flex-start;
  gap:14px
}

.brand h1{
  line-height:1.1
}

.brand > div{
  display:flex;
  flex-direction:column
}

.brand-tagline{
  margin-top:6px;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.6);
  letter-spacing:.3px
}

.main-logo{
  width:42px;
  height:auto;
  object-fit:contain;
  transition:transform var(--mid)
}

.main-logo:hover{
  transform:scale(1.05)
}

/* ================= TABS ================= */
.tabs{
  display:flex;
  gap:12px;
  margin:18px 0
}

.tab{
  padding:12px 26px;
  border-radius:22px;
  background:#111;
  color:#fff;
  border:0;
  cursor:pointer;
  transition:
    background var(--mid),
    color var(--mid),
    transform var(--fast),
    box-shadow var(--mid)
}

.tab:hover{transform:translateY(-1px)}
.tab:active{transform:scale(.96)}

.tab.active{
  background:#a855f7;
  color:#000;
  box-shadow:0 10px 30px rgba(168,85,247,.35)
}

/* ================= FILTERS ================= */
.filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

#search,
#sort{
  padding:14px 18px;
  border-radius:18px;
  background:#111;
  color:#fff;
  border:0;
  transition:
    background var(--mid),
    box-shadow var(--mid),
    transform var(--fast)
}

#search:focus,
#sort:focus{
  outline:none;
  background:#151515;
  box-shadow:0 0 0 2px rgba(168,85,247,.35)
}

/* ================= GRID ================= */
#grid{
  padding:22px;
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  animation:fadeUp .7s var(--ease) both
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* ================= CARD ================= */
.card{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  background:#050505;
  transform:translateZ(0);
  transition:transform var(--mid), box-shadow var(--mid)
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(0,0,0,.65)
}

.card img{
  width:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  animation:imageIn .4s var(--ease) forwards;
  transition:transform 1.2s ease
}

.card:hover img{transform:scale(1.04)}

@keyframes imageIn{to{opacity:1}}

.card.desktop img{aspect-ratio:16/9}
.card.mobile img{aspect-ratio:9/16}

.fade{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:96px;
  background:linear-gradient(to top,rgba(0,0,0,.95),transparent)
}

.info{
  position:absolute;
  bottom:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  animation:fadeUp .4s var(--ease)
}

/* ================= ACTION ICONS ================= */
.actions i{
  font-size:18px;
  cursor:pointer;
  transition:transform var(--fast), color var(--fast)
}

.actions i:hover{transform:scale(1.15)}
.actions i:active{transform:scale(.9)}

/* ================= OVERLAY (CRITICAL FIX) ================= */
#overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:48px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity var(--mid),
    visibility 0s linear var(--mid);
  z-index:100
}

#overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity var(--mid),
    visibility 0s;
}

/* ================= MODAL ================= */
#modal{
  width:92%;
  max-width:420px;
  background:#050505;
  border-radius:32px;
  padding:16px;
  position:relative;
  transform:scale(.92) translateY(20px);
  opacity:0;
  will-change:transform,opacity;
  transition:transform var(--slow), opacity var(--mid)
}

#overlay.show #modal{
  transform:scale(1) translateY(0);
  opacity:1
}

#modal img{
  width:100%;
  max-height:60vh;
  object-fit:contain;
  border-radius:26px;
  display:block;
  margin:auto
}

.modal-body{padding:16px 6px 4px}

/* ================= TAGS ================= */
#modalTags{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

#modalTags span{
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:7px 16px;
  border-radius:18px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.2px;
  white-space:nowrap;
  animation:fadeUp .3s var(--ease)
}

#modalDate{
  margin-top:12px;
  opacity:.7;
  font-size:13px
}

#close{
  position:absolute;
  top:-16px;
  right:-16px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#1a1a1a;
  color:#fff;
  border:0;
  font-size:22px;
  cursor:pointer;
  transition:transform var(--fast)
}

#close:hover{transform:rotate(90deg)}

/* ================= BUTTON ================= */
#downloadBtn{
  margin-top:18px;
  padding:14px;
  width:100%;
  border-radius:26px;
  background:#a855f7;
  color:#000;
  border:0;
  font-weight:700;
  cursor:pointer;
  transition:transform var(--fast), box-shadow var(--mid)
}

#downloadBtn:hover{box-shadow:0 10px 40px rgba(168,85,247,.5)}
#downloadBtn:active{transform:scale(.96)}

/* ================= FOOTER ================= */
.footer{
  text-align:center;
  padding:40px;
  animation:fadeUp .6s var(--ease)
}

.footer-links{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap
}

.footer-links button{
  background:none;
  border:0;
  color:#a855f7;
  cursor:pointer;
  transition:opacity var(--fast)
}

.footer-links button:hover{opacity:.7}

.footer-copy{
  margin-top:18px;
  font-size:13px;
  opacity:.6
}

.footer-banner{
  width:140px;
  max-width:60%;
  margin:0 auto 26px;
  display:block;
  object-fit:contain;
  opacity:.9;
  animation:fadeUp .5s var(--ease)
}

/* ================= POPUP ================= */
.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity var(--mid),
    visibility 0s linear var(--mid);
  z-index:200
}

.popup-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity var(--mid),
    visibility 0s;
}

.popup{
  width:92%;
  max-width:520px;
  background:#050505;
  border-radius:28px;
  padding:28px;
  position:relative;
  transform:scale(.9);
  transition:transform var(--slow)
}

.popup-overlay.show .popup{transform:scale(1)}

.popup-close{
  position:absolute;
  top:-16px;
  right:-16px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#1a1a1a;
  color:#fff;
  border:0;
  font-size:22px;
  cursor:pointer
}

.popup-content{
  margin-top:12px;
  max-height:60vh;
  overflow:auto;
  line-height:1.7
}

/* ================= NOTIFY ================= */
.notify{
  position:fixed;
  left:20px;
  bottom:24px;
  background:rgba(20,20,20,.95);
  padding:14px 18px;
  border-radius:28px;
  display:flex;
  gap:10px;
  align-items:center;
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--mid), transform var(--mid);
  z-index:9999
}

.notify.show{
  opacity:1;
  transform:none
}

/* ================= RESPONSIVE ================= */
@media(max-width:480px){
  .main-logo{width:36px}
  .footer-banner{width:120px}
}