/*
Theme Name: Cocoon Child
Template: cocoon-master
*/

/* === Pinya: TikTok Pop Cyber Holographic === */
:root {
  --tk-pink: #FF0080;
  --tk-pink-hot: #FF1493;
  --tk-cyan: #00F2FF;
  --tk-purple: #B026FF;
  --tk-lavender: #E0AAFF;
  --tk-yellow: #FFD60A;
  --tk-bg: #FFE4F1;
  --tk-text: #1a0033;
}

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

@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,0,128,0.5), 0 0 40px rgba(0,242,255,0.3); }
  50% { box-shadow: 0 0 30px rgba(255,0,128,0.8), 0 0 60px rgba(0,242,255,0.5); }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 0.8; }
}

body { 
  background: linear-gradient(135deg, #FFE4F1 0%, #E0F7FF 25%, #F0E4FF 50%, #FFE4F1 75%, #E0F7FF 100%);
  background-size: 400% 400%;
  animation: hologradient 18s ease infinite;
  color: var(--tk-text);
  font-family: "Hiragino Sans","Noto Sans JP",sans-serif;
}

/* Header - holographic */
#header { 
  background: linear-gradient(90deg, #FF0080, #B026FF, #00F2FF, #FF0080);
  background-size: 300% 100%;
  animation: hologradient 8s ease infinite;
  padding: 18px 0;
  border-bottom: 4px solid rgba(255,255,255,0.5);
}
.site-name a, .site-name-text { 
  color: #fff !important; 
  font-weight: 900 !important; 
  letter-spacing: 0.04em;
  font-size: 1.8em !important;
  text-shadow: 0 0 20px rgba(255,255,255,0.9), 2px 2px 0 var(--tk-pink), -2px -2px 0 var(--tk-cyan);
}
.tagline { 
  color: #fff !important; 
  font-weight: 700; 
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* Card grid */
#list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 768px) { #list { grid-template-columns: 1fr; } }
.list .entry-card-wrap, .a-wrap.entry-card-wrap { 
  background: #fff !important;
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(255,0,128,0.15), 0 0 0 3px rgba(255,255,255,0.8) inset;
  transition: transform 0.3s, box-shadow 0.3s;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: relative;
}
.list .entry-card-wrap::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, var(--tk-pink), var(--tk-cyan), var(--tk-purple), var(--tk-yellow));
  background-size: 300% 300%;
  animation: hologradient 6s ease infinite;
  z-index: -1;
  border-radius: 27px;
  opacity: 0;
  transition: opacity 0.3s;
}
.list .entry-card-wrap:hover { 
  transform: translateY(-8px) scale(1.02);
}
.list .entry-card-wrap:hover::before { opacity: 1; }

.entry-card { display: flex; flex-direction: column; padding: 0; }
.entry-card-thumb { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; max-width: none !important; position: relative; overflow: hidden; }
.entry-card-thumb-image, .entry-card-thumb img { width: 100% !important; aspect-ratio: 4/3; object-fit: cover !important; border-radius: 0 !important; height: auto !important; }
.entry-card-content { padding: 20px !important; margin-left: 0 !important; }
.entry-card-title, .entry-card-snippet, .entry-card-meta { margin-left: 0 !important; padding-left: 0 !important; }
.entry-card-title { 
  font-size: 1.05em !important; 
  font-weight: 800 !important; 
  background: linear-gradient(90deg, var(--tk-pink), var(--tk-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.5 !important; 
  margin-bottom: 10px !important;
}
.entry-card-snippet { display: none !important; }
.entry-card-meta { font-size: 12px !important; color: #999 !important; }
.entry-card-categories { position: absolute; top: 14px; right: 14px; z-index: 2; }
.cat-label, .entry-card-categories a, .entry-card-categories .cat-label {
  background: linear-gradient(135deg, var(--tk-pink), var(--tk-cyan)) !important;
  background-size: 200% 200%;
  animation: hologradient 4s ease infinite;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(255,0,128,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* NO IMAGE placeholder pop */
.no-image { 
  background: linear-gradient(135deg, var(--tk-pink), var(--tk-cyan), var(--tk-purple)) !important;
  background-size: 200% 200%;
  animation: hologradient 5s ease infinite;
}
.no-image::before { 
  content: "♡♥︎";
  font-size: 4em; 
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  text-shadow: 0 0 20px rgba(255,255,255,0.8);
  letter-spacing: 0.1em;
}

/* Sidebar */
#sidebar .widget { 
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(255,0,128,0.1);
  border: 2px solid rgba(255,255,255,0.6) !important;
}
#sidebar h3, #sidebar .widget-sidebar-title {
  background: linear-gradient(90deg, var(--tk-pink), var(--tk-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  padding-bottom: 10px;
}
#sidebar h3::after, #sidebar .widget-sidebar-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--tk-pink), var(--tk-cyan));
  border-radius: 999px;
}
#sidebar .widget ul li a { color: var(--tk-text); font-weight: 600; }
#sidebar .widget ul li a:hover { color: var(--tk-pink); }

.search-edit { 
  border: 2px solid var(--tk-pink) !important; 
  border-radius: 999px !important; 
  padding: 12px 20px !important;
  background: #fff !important;
}
.search-submit { 
  background: linear-gradient(135deg, var(--tk-pink), var(--tk-cyan)) !important; 
  background-size: 200% 200% !important;
  animation: hologradient 4s ease infinite;
  border: none !important; 
  color: #fff !important; 
  border-radius: 999px !important; 
  padding: 12px 22px !important; 
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(255,0,128,0.4);
}

/* Links */
.entry-content a, article a { color: var(--tk-pink); font-weight: 600; }
.entry-content a:hover, article a:hover { color: var(--tk-purple); }

/* Pagination */
.pagination .page-numbers { 
  border-radius: 999px !important;
  border: 2px solid var(--tk-pink) !important;
  color: var(--tk-pink) !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
}
.pagination .page-numbers.current {
  background: linear-gradient(135deg, var(--tk-pink), var(--tk-cyan)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Footer */
#footer { 
  background: linear-gradient(135deg, #1a0033, #330066) !important; 
  color: #fff;
  border-top: 4px solid;
  border-image: linear-gradient(90deg, var(--tk-pink), var(--tk-cyan), var(--tk-purple)) 1;
}
#footer a { color: var(--tk-cyan); }

/* NOT FOUND state */
.no-post-found, .alert { 
  background: rgba(255,255,255,0.85) !important;
  border-radius: 20px !important;
  border: 2px dashed var(--tk-pink) !important;
  padding: 40px !important;
  text-align: center;
  font-weight: 700;
}

/* Article wrap */
.main { background: transparent !important; }
#main, .entry { background: transparent; }