/*
Theme Name: Creators Book Blog
Theme URI: https://creatorsbook.in
Author: Creators Book
Description: Custom WordPress theme for the Creators Book blog, matching the design system (colors, type, cursor, reveal animations) of the main creatorsbook.in agency website.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: creatorsbook
*/

:root{
  --void:#0a0a0c;
  --smoke:#141417;
  --smoke-2:#1c1c20;
  --bone:#f4efe6;
  --fog:#8f8c88;
  --pink:#ff2e63;
  --pink-dim:#7a1732;
  --lime:#c6ff3d;
  --lime-dim:#5a6b1c;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
::selection{background:var(--pink);color:var(--void);}

body{
  background:var(--void);
  color:var(--bone);
  font-family:'Sora',sans-serif;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width: 860px){ body{ cursor:auto; } }

h1,h2,h3,.display{
  font-family:'Unbounded',sans-serif;
  line-height:1.08;
  letter-spacing:-0.02em;
}
.mono{ font-family:'Space Mono',monospace; }

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
ul{list-style:none;}

/* ===== grain overlay ===== */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== custom cursor ===== */
.cursor{
  position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--lime);z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease);
}
.cursor-ring{
  position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(244,239,230,.4);z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.cursor.big{width:16px;height:16px;background:var(--pink);}
.cursor-ring.big{width:64px;height:64px;background:rgba(255,46,99,.08);border-color:var(--pink);}
@media (max-width: 860px){ .cursor,.cursor-ring{display:none;} }

/* ===== nav (matches main site header) ===== */
header.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 5%;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(10,10,12,.75), rgba(10,10,12,0));
  transition:padding .3s var(--ease), background .3s var(--ease);
}
header.site-header.scrolled{ padding:14px 5%; background:rgba(10,10,12,.85); border-bottom:1px solid rgba(244,239,230,.08); }
.logo{ font-size:1.15rem; font-weight:800; letter-spacing:0; font-family:'Unbounded',sans-serif; text-transform:uppercase; }
.logo span{ color:var(--pink); }
.main-nav ul{ display:flex; gap:34px; }
.main-nav ul li a{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:500;
  position:relative; padding-bottom:4px;
}
.main-nav ul li a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--lime);
  transition:width .3s var(--ease);
}
.main-nav ul li a:hover::after, .main-nav ul li.current-menu-item a::after{ width:100%; }
.nav-cta{
  display:flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:100px;background:var(--pink);color:var(--void);
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,46,99,.4); }
.burger{ display:none; width:28px; height:20px; position:relative; }
.burger span{ position:absolute; left:0; width:100%; height:2px; background:var(--bone); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; }

@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
}

/* ===== ambient blobs ===== */
.blob-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; transition:transform 1.2s var(--ease); }
.blob-1{ width:520px; height:520px; background:var(--pink); top:-10%; left:-8%; }
.blob-2{ width:460px; height:460px; background:var(--lime); bottom:5%; right:-10%; opacity:.18; }
.blob-3{ width:360px; height:360px; background:#7a4bff; top:45%; left:40%; opacity:.14; }
@media (max-width:860px){ .blob-field{ display:none; } }

/* ===== scroll progress ===== */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:600;
  background:linear-gradient(90deg, var(--pink), var(--lime));
  box-shadow:0 0 12px rgba(198,255,61,.6);
}

/* ===== preloader ===== */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--void);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-word{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.4rem; text-transform:uppercase; letter-spacing:.02em; overflow:hidden; }
.pre-word span{ display:inline-block; animation:preIn .6s var(--ease) forwards; }
.pre-word .p1{ color:var(--bone); } .pre-word .p2{ color:var(--pink); }
@keyframes preIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.pre-bar{ width:180px; height:2px; background:rgba(244,239,230,.15); border-radius:2px; overflow:hidden; }
.pre-bar span{ display:block; height:100%; width:0%; background:var(--lime); animation:preBar 1.4s var(--ease) forwards .2s; }
@keyframes preBar{ to{ width:100%; } }

/* ===== reveal on scroll ===== */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }

.tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink); margin-bottom:16px; display:inline-block; position:relative; padding-left:14px; }
.tag::before{
  content:''; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--pink); transform:translateY(-50%); box-shadow:0 0 8px var(--pink);
  animation:tagPulse 1.6s ease-in-out infinite;
}
@keyframes tagPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.btn-solid, .btn-ghost{
  position:relative; padding:16px 32px; border-radius:100px; font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
}
.btn-solid{ background:var(--lime); color:var(--void); }
.btn-ghost{ border:1px solid rgba(244,239,230,.3); color:var(--bone); }
.btn-solid:hover{ background:var(--bone); }
.btn-ghost:hover{ border-color:var(--lime); color:var(--lime); }

section{ position:relative; padding:130px 5%; }
@media (max-width:860px){ section{ padding:90px 6%; } }

/* ===== blog hero ===== */
.blog-hero{ min-height:52vh; display:flex; flex-direction:column; justify-content:center; padding:170px 5% 60px; position:relative; z-index:2; }
.blog-hero h1{ font-size:clamp(2.2rem,6vw,4.4rem); font-weight:800; text-transform:uppercase; max-width:900px; }
.blog-hero p{ margin-top:20px; max-width:560px; color:var(--fog); font-size:1.05rem; line-height:1.6; }

/* ===== blog grid & cards ===== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1320px; margin:0 auto; }
@media (max-width:1100px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
  background:var(--smoke); border:1px solid rgba(244,239,230,.08); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease-out, border-color .3s var(--ease);
  will-change:transform;
}
.blog-card:hover{ border-color:rgba(198,255,61,.35); }
.blog-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--smoke-2); position:relative; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.blog-card:hover .thumb img{ transform:scale(1.08); }
.blog-card .thumb .cat-badge{
  position:absolute; top:14px; left:14px; padding:6px 14px; border-radius:100px; background:rgba(10,10,12,.7);
  backdrop-filter:blur(6px); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--lime);
  border:1px solid rgba(198,255,61,.3);
}
.blog-card .body{ padding:24px 24px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.blog-card .meta{ font-family:'Space Mono',monospace; font-size:.72rem; color:var(--fog); text-transform:uppercase; letter-spacing:.06em; }
.blog-card h3{ font-size:1.15rem; line-height:1.3; text-transform:none; letter-spacing:-.01em; }
.blog-card h3 a:hover{ color:var(--lime); }
.blog-card p.excerpt{ color:var(--fog); font-size:.92rem; line-height:1.6; flex:1; }
.blog-card .read-more{
  margin-top:6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--bone);
  display:inline-flex; align-items:center; gap:8px;
}
.blog-card .read-more::after{ content:'→'; transition:transform .3s var(--ease); }
.blog-card:hover .read-more::after{ transform:translateX(4px); }

.no-posts{ text-align:center; padding:80px 0; color:var(--fog); max-width:1320px; margin:0 auto; }

/* ===== pagination ===== */
.cb-pagination{ display:flex; justify-content:center; gap:12px; margin-top:70px; flex-wrap:wrap; }
.cb-pagination a, .cb-pagination span{
  padding:10px 20px; border-radius:100px; border:1px solid rgba(244,239,230,.25);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; transition:all .3s var(--ease);
}
.cb-pagination a:hover, .cb-pagination .current{ background:var(--lime); border-color:var(--lime); color:var(--void); }

/* ===== single post ===== */
.single-hero{ padding:170px 5% 40px; max-width:900px; margin:0 auto; position:relative; z-index:2; }
.single-hero .tag{ margin-bottom:20px; }
.single-hero h1{ font-size:clamp(2rem,5.5vw,3.6rem); font-weight:800; text-transform:uppercase; }
.single-meta{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; padding-top:26px; border-top:1px solid rgba(244,239,230,.1);
  font-family:'Space Mono',monospace; font-size:.78rem; color:var(--fog); text-transform:uppercase; letter-spacing:.05em;
}
.single-featured{ max-width:1100px; margin:0 auto 20px; padding:0 5%; }
.single-featured img{ width:100%; border-radius:20px; aspect-ratio:16/9; object-fit:cover; }

.single-content{ max-width:760px; margin:0 auto; padding:60px 5% 40px; }
.single-content p{ color:var(--bone); opacity:.92; font-size:1.05rem; line-height:1.8; margin-bottom:24px; }
.single-content h2{ font-size:1.8rem; margin:50px 0 20px; text-transform:none; }
.single-content h3{ font-size:1.35rem; margin:36px 0 16px; text-transform:none; }
.single-content ul, .single-content ol{ margin:0 0 24px 22px; color:var(--bone); opacity:.92; line-height:1.8; }
.single-content li{ margin-bottom:8px; }
.single-content a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
.single-content blockquote{
  border-left:3px solid var(--pink); padding:6px 0 6px 24px; margin:32px 0; color:var(--fog); font-style:italic; font-size:1.1rem;
}
.single-content img{ border-radius:14px; margin:30px 0; }
.single-content pre{ background:var(--smoke); padding:20px; border-radius:12px; overflow-x:auto; margin-bottom:24px; }
.single-content code{ font-family:'Space Mono',monospace; background:var(--smoke); padding:2px 6px; border-radius:4px; font-size:.9em; }
.single-content pre code{ background:none; padding:0; }

.single-tags{ max-width:760px; margin:0 auto; padding:0 5% 20px; display:flex; gap:10px; flex-wrap:wrap; }
.single-tags a{
  padding:8px 16px; border-radius:100px; border:1px solid rgba(244,239,230,.2); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; transition:all .3s var(--ease);
}
.single-tags a:hover{ background:var(--lime); border-color:var(--lime); color:var(--void); }

.author-box{
  max-width:760px; margin:40px auto; padding:28px; border-radius:18px; background:var(--smoke);
  border:1px solid rgba(244,239,230,.08); display:flex; gap:20px; align-items:center;
}
.author-box img{ width:64px; height:64px; border-radius:50%; flex-shrink:0; }
.author-box .name{ font-weight:700; margin-bottom:6px; }
.author-box .bio{ color:var(--fog); font-size:.9rem; line-height:1.6; }

.related-posts{ max-width:1100px; margin:0 auto; padding:60px 5% 100px; }
.related-posts h3{ text-transform:uppercase; font-size:1.5rem; margin-bottom:34px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:800px){ .related-grid{ grid-template-columns:1fr; } }

.cb-cta-strip{
  max-width:1100px; margin:0 auto; padding:50px 5%; border-radius:24px; background:linear-gradient(120deg, var(--pink-dim), var(--smoke));
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
}
.cb-cta-strip h3{ font-size:1.5rem; text-transform:uppercase; max-width:480px; }

/* ===== footer ===== */
footer.site-footer{ padding:80px 5% 30px; border-top:1px solid rgba(244,239,230,.08); position:relative; z-index:2; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:60px; max-width:1320px; margin-left:auto; margin-right:auto; }
.foot-grid h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fog); margin-bottom:18px; }
.foot-grid ul{ display:grid; gap:12px; }
.foot-grid ul li a:hover{ color:var(--lime); }
.foot-logo{ font-size:1.6rem; font-weight:800; margin-bottom:16px; font-family:'Unbounded',sans-serif; text-transform:uppercase; }
.foot-logo span{ color:var(--pink); }
.socials{ display:flex; gap:14px; margin-top:22px; }
.socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,239,230,.2);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.socials a:hover{ background:var(--lime); border-color:var(--lime); color:var(--void); transform:translateY(-3px); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid rgba(244,239,230,.08);
  font-size:.78rem; color:var(--fog); flex-wrap:wrap; gap:14px; max-width:1320px; margin:0 auto;
}
.to-top{ display:flex; align-items:center; gap:8px; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--smoke-2); border-radius:10px; }

.tilt{ transition:transform .15s ease-out; will-change:transform; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}