/*
Theme Name: PNGStake Apple Glass V2
Version: 2.0
*/

:root{
  --glass:rgba(255,255,255,0.28);
  --border:rgba(255,255,255,0.38);
  --accent:#38bdf8;
  --text:#fff;
  --dark:#0f172a;
}

body{background:#efeff3 !important;}

/* Top Navigation Bar */
.topbar{
  position:fixed;
  top:0;left:0;width:100%;
  display:flex;align-items:center;
  padding:14px 30px;
  gap:20px;
  backdrop-filter:blur(28px) saturate(180%);
  background:rgba(255,255,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.15);
  z-index:2000;
}

.topbar-title{
  font-size:1.8rem;
  font-weight:700;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont;
  letter-spacing:-1px;
}

/* Hero Section Apple Style */
.hero-wrap{
  margin-top:0 !important;
  padding:1px 4px 2px !important;
  text-align:center;
  background:rgba(245,245,250,0.6);
  backdrop-filter:blur(12px);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 8px 22px rgba(0,0,0,0.15);
}

.hero-main h1{
  font-size:3.2rem;
  font-weight:700;
  text-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.hero-main p{
  font-size:1.2rem;
  opacity:.95;
  max-width:700px;
  margin:0 auto;
}

/* Search Bar */
.hero-search form{
  display:flex;
  justify-content:center;
  gap:12px;
  backdrop-filter:blur(22px) saturate(180%);
  background:var(--glass);
  border:1px solid var(--border);
  padding:10px 18px;
  border-radius:999px;
  margin-top:22px;
}
.hero-search input{
  background:transparent;
  border:none;
  color:white;
  width:300px;
}
.hero-search button{
  background:white;
  color:black;
  border:none;
  padding:8px 16px;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
}

/* Categories */
.hero-cats{
  margin-top:24px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-cats a{
  padding:8px 14px;
  border-radius:12px;
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.25);
  color:white;
  text-decoration:none;
}

/* Grid Apple style */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:26px;
  padding:40px 20px;
}

.card{
  backdrop-filter:blur(30px) saturate(180%);
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  padding:18px;
  border-radius:20px;
  text-align:center;
  transition:all 0.3s ease;
}
.card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 60px rgba(0,0,0,0.55);
}

/* PNG Square */
.square{
  aspect-ratio:1/1;
  background:white;
  border-radius:18px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .2s;
}

.square:hover{
  transform:scale(1.06);
}

.square img{
  max-width:100%;max-height:100%;object-fit:contain;
}

/* Modal Viewer */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:3000;
}
.modal.active{display:flex;}

.modal-box{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(18px);
  padding:20px;border-radius:20px;
  width:90%;max-width:720px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.3);
}

.modal-box img{
  max-width:100%;border-radius:14px;
}

.suggestions{
  margin-top:20px;
  display:flex;
  gap:14px;
  overflow-x:auto;
}
.suggestions img{
  height:80px;
  border-radius:12px;
  cursor:pointer;
  transition:opacity .2s;
}
.suggestions img:hover{opacity:.7;}

.download-button{
  display:inline-block;margin-top:14px;padding:10px 16px;
  border-radius:999px;background:white;color:black;font-weight:700;
  text-decoration:none;
}


/* Center text under logo */
.center-text{
  font-size:28px;
  font-weight:600;
  color: rgba(10,10,10,0.9);
  margin-top:18px;
  letter-spacing:0.2px;
}

/* Smooth card load animation */
.card{
  opacity:0;
  transform:translateY(18px);
  transition:all .64s cubic-bezier(.16,.84,.44,1);
  will-change:transform,opacity;
}
.card.show{
  opacity:1;
  transform:translateY(0);
}

/* Hero logo prominence */
.hero-main img{ height:200px; margin-bottom:18px; display:block; margin-left:auto; margin-right:auto; }

/* Make site background and container soft */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}


/* Floating gradient orbs */
.floating-orbs{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.floating-orbs .orb{
  position:absolute;
  width:260px;height:260px;
  border-radius:50%;
  filter:blur(60px);
  opacity:.45;
  animation:orbMove 14s ease-in-out infinite alternate;
}
.orb1{background:#7fc1ff; top:10%; left:15%;}
.orb2{background:#ff7fd1; bottom:15%; right:20%; animation-delay:2s;}

@keyframes orbMove{
  from{transform:translate(0,0);}
  to{transform:translate(40px,-40px);}
}

/* Logo fade-in */
.hero-main img{
  opacity:0;
  transform:translateY(20px);
  animation:logoIn 1.2s ease forwards;
}
@keyframes logoIn{
  to{opacity:1; transform:translateY(0);}
}

/* Search focus glow */
.hero-search input:focus{
  outline:none;
  border-color:rgba(0,122,255,0.5);
  box-shadow:0 0 10px rgba(0,122,255,0.35);
}

/* Chip/category improvement */
.hero-cats a{
  padding:10px 18px;
  border-radius:14px;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.35);
  color:#000;
  transition:0.25s ease;
}
.hero-cats a:hover{
  background:rgba(255,255,255,0.45);
  transform:translateY(-3px);
}

/* 3D tilt hover */
.card{
  transform-style:preserve-3d;
}
.card:hover{
  transform:perspective(900px) rotateX(6deg) rotateY(6deg);
  transition:0.2s ease-out;
}

/* Smooth scroll */
html{ scroll-behavior:smooth; }

.center-text{ color:#000 !important; }

.download-button{
  background:linear-gradient(135deg,#ff7bd1,#7bb8ff);
  color:white !important;
  padding:12px 20px;
  border-radius:14px;
  font-weight:600;
  display:inline-block;
  transition:0.25s ease;
}
.download-button:hover{
  filter:brightness(1.15);
  transform:translateY(-3px);
}

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700&display=swap');

.center-text{
  font-family:'Archivo', sans-serif !important;
  font-size:36px !important;
  font-weight:700 !important;
}

.center-text{
  font-size:40px !important;
  letter-spacing:0.3px;
  margin-top:24px;
}

.hero-search input{
  position:relative;
  border:2px solid transparent;
  background-clip:padding-box;
}

.hero-search{
  position:relative;
}




  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Light grey + blur grid background */


.hero-search input{
  border-radius:40px !important;
  padding:16px 20px !important;
  font-size:18px !important;
}

.hero-bg-wrap{
  background:#f5f5f7;
  padding:20px;
  border-radius:30px;
}

.img-meta{
  font-size:14px;
  color:#333;
  margin-top:6px;
  opacity:0.8;
}

.center-text{
  font-size:28px !important;
  margin-top:10px !important;
}

.hero-search input{
  border-radius:30px !important;
  padding:12px 18px !important;
  font-size:16px !important;
  margin-top:14px !important;
}

body{background:#efeff3 !important;}
.container, .site-main{
  background:rgba(245,245,245,0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:20px;
  padding:20px;
}

.hero-search input{
  width:60% !important;
  max-width:420px !important;
  border-radius:18px !important; /* curved rectangle */
  padding:8px 14px !important;
  font-size:14px !important;
  margin-top:6px !important; /* closer to logo */
  border:2px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(10px);
}

.center-text{
  margin-top:6px !important;
  margin-bottom:4px !important;
}

/* Stroke animation for search bar */
.hero-search{
  position:relative;
  display:inline-block;
}


  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.hero-search input{
  width:70% !important;
  max-width:500px !important;
  padding:14px 20px !important;
  font-size:18px !important;
  border-radius:24px !important;
  margin-top:10px !important;
}

body{background:#efeff3 !important;}
.container, .site-main{
  background:rgba(235,235,238,0.75);
  backdrop-filter:blur(10px);
  border-radius:20px;
  padding:20px;
}

.hero-search input{
  width:80% !important;
  max-width:600px !important;
  padding:16px 22px !important;
  font-size:20px !important;
  border-radius:28px !important;
  margin-top:6px !important;
  border:2px solid rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(12px);
}

.center-text{
  margin-top:4px !important;
  margin-bottom:4px !important;
}

.hero-search{
  position:relative;
  display:inline-block;
}


  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.hero-search input{
  width:85% !important;
  max-width:650px !important;
  padding:18px 24px !important;
  font-size:22px !important;
  border-radius:30px !important;
  margin-top:6px !important;
  border:2px solid rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(14px);
}

.center-text{
  margin-top:2px !important;
  margin-bottom:2px !important;
  font-size:26px !important;
}

.hero-search{
  position:relative;
  display:inline-block;
  width:85%;
  max-width:700px;
}

.hero-search input{
  width:100% !important;
  padding:16px 22px !important;
  font-size:20px !important;
  border-radius:28px !important;
  background:rgba(255,255,255,0.5);
  border:2px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(14px);
}

.search-btn{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:linear-gradient(135deg,#ff7bd1,#7bb8ff);
  color:white;
  padding:8px 14px;
  border-radius:18px;
  font-size:14px;
  border:none;
  cursor:pointer;
}



  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Inside stroke animation */
.hero-search{
  position:relative;
  display:inline-block;
  width:85%;
  max-width:720px;
}

.hero-search input{
  width:100%;
  padding:16px 22px;
  font-size:20px;
  border-radius:26px;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(14px);
  border:2px solid transparent;
  position:relative;
}

.


  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.center-text{
  margin-top:2px !important;
  margin-bottom:2px !important;
  font-size:24px !important;
  color:#222 !important;
}

.hero-search{ margin-top:4px !important; }

.card-title, .img-meta{
  color:#333 !important;
}

body{background:#efeff3 !important;}

.center-text{
  font-size:26px !important;
  margin-top:4px !important;
  margin-bottom:4px !important;
}
.hero-search{
  margin-top:4px !important;
}
.hero-search input{
  margin-top:4px !important;
}

.hero-bg-wrap{
  background:#f5f5f7 !important;
}

.card-title, .img-meta, .image-title, .item-title {
    color:#222 !important;
}

.hero-search{
  position:relative;
  display:inline-block;
  width:85%;
  max-width:720px;
}

.hero-search input{
  width:100%;
  padding:16px 22px;
  font-size:20px;
  border-radius:28px;
  background:rgba(255,255,255,0.6);
  border:2px solid transparent;
  backdrop-filter:blur(12px);
  position:relative;
}

.

@keyframes innerStroke{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.center-text{
  margin-top:2px !important;
  margin-bottom:2px !important;
  font-size:22px !important;
}
.hero-search{
  margin-top:2px !important;
}
.hero-search input{
  margin-top:2px !important;
}

.
@keyframes glowPulse{
  0%{ opacity:0.3; }
  50%{ opacity:1; }
  100%{ opacity:0.3; }
}

.img-meta{
  margin-top:4px !important;
  color:#222 !important;
  font-size:14px !important;
}

.grid, .site-main, .container{
  background:#f3f3f5 !important;
  border-radius:16px;
  padding:20px;
}
body{
  background:#e1e1e6 !important;
}

.center-text{
  margin-top:2px !important;
  margin-bottom:2px !important;
  font-size:24px !important;
}
.hero-search{
  margin-top:2px !important;
}

.hero-search{
  position:relative;
  display:inline-block;
  width:85%;
  max-width:700px;
}




  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.center-text{
  margin-top:2px !important;
  margin-bottom:2px !important;
  font-size:22px !important;
}

.hero-search input{
  position:relative;
  z-index:2;
  background:rgba(255,255,255,0.55);
  border-radius:28px;
  border:2px solid transparent;
  backdrop-filter:blur(12px);
}

.


  50%{ opacity:1; background-position:100% 50%; }
  100%{ opacity:.4; background-position:0% 50%; }
}

.hero-search input{
  background:rgba(200,200,200,0.3) !important;
  backdrop-filter:blur(10px);
  border-radius:26px !important;
  border:2px solid transparent;
  position:relative;
}

.hero-search input::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:2px;
  background:linear-gradient(120deg,#ff7bd1,#7bb8ff,#ffe17b,#ff7bd1);
  background-size:300% 300%;
  animation:gradFlow 3s ease infinite;
  -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

@keyframes gradFlow{
  0%{ background-position:0% 50%; opacity:.4; }
  50%{ background-position:100% 50%; opacity:1; }
  100%{ background-position:0% 50%; opacity:.4; }
}

.hero-search input:hover{
  box-shadow:0 0 16px rgba(120,160,255,0.55);
  transition:0.25s ease;
}


/* THIN RGB 2px border stroke */


    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


.hero-search input{
    box-shadow:0 10px 24px rgba(0,0,0,0.25) !important;
    color:#000 !important;
}
::placeholder{ color:rgba(0,0,0,0.5) !important; }





.hero-search input{
    border:2px solid transparent !important;
    background:rgba(255,255,255,0.22) !important;
    backdrop-filter:blur(18px) saturate(150%) !important;
    box-shadow:0 10px 24px rgba(0,0,0,0.25) !important;
}


/* === ANIMATED RGB STROKE BORDER === */



    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


/* === RGB OUTLINE BORDER ANIMATION FOR SEARCH BAR === */



    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


/* === 3D GRID CARD EFFECT === */
.grid .card{
    transform: perspective(700px) translateZ(0px);
    transition: transform .28s ease, box-shadow .28s ease;
    border-radius:14px;
    background:rgba(255,255,255,0.85);
    box-shadow:0 10px 26px rgba(0,0,0,0.22);
    overflow:hidden;
}

.grid .card:hover{
    transform: perspective(700px) translateZ(28px) scale(1.04);
    box-shadow:0 16px 40px rgba(0,0,0,0.32);
}


/* Ensure typing color is black */
.hero-search input, input[type='search'], input, textarea {
  color: #000 !important;
}

/* Add subtle border outline to search bar while keeping animated stroke */
.hero-search input {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
}

/* 3D perspective effect on click (toggle) */
.grid .card {
  transition: transform 0.32s cubic-bezier(.2,.9,.2,1), box-shadow 0.32s ease;
  transform-origin: center center;
}
.grid .card.active-3d {
  transform: perspective(800px) translateZ(36px) rotateX(6deg) scale(1.05);
  box-shadow: 0 22px 48px rgba(0,0,0,0.36);
  z-index: 40;
}


/* === RGB OUTLINE STROKE ANIMATION === */

@keyframes strokeRGB{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


/* === HERO BACKGROUND ANIMATION === */
.hero-wrap{
    background: linear-gradient(120deg,#e3e3e6,#fafafa,#dcdce0);
    background-size:300% 300%;
    animation:heroBG 8s ease-in-out infinite;
}
@keyframes heroBG{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


/* === NEON OUTLINE ANIMATION FOR SEARCH BAR === */
.hero-search input::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:3px;
    background:linear-gradient(120deg,#ff00ff,#00e1ff,#00ff88,#ff00ff);
    background-size:300% 300%;
    animation:neonStroke 2s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255,0,255,0.6))
            drop-shadow(0 0 12px rgba(0,225,255,0.45))
            drop-shadow(0 0 10px rgba(0,255,136,0.45));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
    z-index:1;
}

@keyframes neonStroke{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


/* === VERY SLOW HERO BACKGROUND SHIFT === */
.hero-wrap{
    background:linear-gradient(120deg,#e8e8eb,#f3f3f5,#e0e0e4);
    background-size:300% 300%;
    animation:heroShift 22s ease-in-out infinite;
}
@keyframes heroShift{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}


/* --- Patch B: Search under logo inside hero, stroke outline, hero slow BG, suggestions box fixes --- */

/* Ensure hero layout: logo at top, search right under it */
.hero-wrap { text-align: center !important; padding: 30px 0 40px !important; position: relative; }

/* Make sure logo is large and centered */
.hero-wrap img { display:block; margin: 0 auto; height: 800px; max-width: 90%; object-fit: contain; }

/* Centered search under logo */
.hero-search { width: 100%; max-width: 720px; margin: 14px auto 0 auto; display:block; position: relative; }

/* Input styling */
.hero-search input {
  width: 100%;
  padding: 16px 22px;
  border-radius: 28px;
  border: none;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(16px);
  color: #000;
  font-size: 18px;
  position: relative;
  z-index: 2;
}

/* Stroke outline applied to wrapper for reliability */
.hero-search::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  padding: 3px;
  background: linear-gradient(90deg,#ff0066,#00ccff,#00ff88,#ff0066);
  background-size: 300% 300%;
  animation: strokeAnim 2.6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* stroke keyframes */
@keyframes strokeAnim{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* Suggestion box safe defaults - prevents white fullscreen */
.search-suggestions-box, .search-suggestions-box * {
  box-sizing: border-box;
}
.search-suggestions-box{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  display: none;
  z-index: 99999 !important;
}

/* Grid drop shadow */
.grid .card { box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important; border-radius:12px !important; transition: transform .25s ease, box-shadow .25s ease; }
.grid .card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,0.28) !important; }

/* Slow-motion hero bg */
.hero-wrap { background: linear-gradient(120deg,#e8e8eb,#f3f3f5,#e0e0e4) !important; background-size: 300% 300% !important; animation: heroSlow 22s ease-in-out infinite !important; }
@keyframes heroSlow { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* Ensure typing color black */
.hero-search input, input, textarea { color: #000 !important; }
::placeholder { color: rgba(0,0,0,0.45) !important; }


/* === Small Hero (Option B) Patch === */

/* Hero container spacing */
.hero-wrap {
    padding: 24px 0 32px !important;
    text-align: center !important;
}

/* Logo reduced to 400px */
.hero-wrap img {
    height: 400px !important;
    display: block;
    margin: 0 auto;
}

/* Search bar slightly below logo */
.hero-search {
    margin-top: 22px !important;
    max-width: 700px !important;
    width: 100% !important;
    position: relative !important;
}

/* Keep stroke animation */
.hero-search::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 3px;
    background: linear-gradient(90deg,#ff0066,#00ccff,#00ff88,#ff0066);
    background-size: 300% 300%;
    animation: strokeAnim 2.6s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Stroke animation keyframes */
@keyframes strokeAnim {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}


/* FIXED: Suggestions box */
.search-suggestions-box{
  position:absolute!important;
  top:100%!important;
  left:0!important;
  right:0!important;
  background:#fff!important;
  border-radius:12px!important;
  max-height:260px!important;
  overflow-y:auto!important;
  display:none!important;
  box-shadow:0 8px 28px rgba(0,0,0,0.18)!important;
  z-index:999999!important;
}

/* FORCE hero animation */
.hero-wrap{
  background:linear-gradient(120deg,#e8e8eb,#f3f3f5,#e0e0e4)!important;
  background-size:300% 300%!important;
  animation:heroShift 22s ease-in-out infinite!important;
}
@keyframes heroShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Remove top hero spacing */
.hero{margin-top:0!important;padding-top:0!important;}