/*
Theme Name: Caption Atlas
Theme URL: https://captionatlas.com
Author: Caption Atlas
Description: Animated caption blog theme with hero, about, latest posts, testimonials and footer.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: captionatlas
*/

  :root {
    --bg:#0e0b1f; --bg2:#17123a; --ink:#f4f1ff; --muted:#a9a3cf;
    --pink:#ff6fa5; --violet:#7c5cff; --cyan:#34d8ff; --sun:#ffc857;
    --paper:#fff8f0; --dark:#201a3d;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body { font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; overflow-x:hidden; }
  a { color:inherit; }
  .wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

  /* ---------- Header ---------- */
  header { position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(12px); background:rgba(14,11,31,.72); border-bottom:1px solid rgba(255,255,255,.07); }
  .nav { display:flex; justify-content:space-between; align-items:center; height:68px; }
  .logo { font-weight:800; font-size:22px; text-decoration:none; letter-spacing:.01em; }
  .logo span { background:linear-gradient(90deg,var(--pink),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .links a { text-decoration:none; color:var(--muted); margin-left:26px; font-size:15px; position:relative; transition:color .2s; }
  .links a:hover { color:var(--ink); }
  .links a::after { content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--pink); transition:width .3s; }
  .links a:hover::after { width:100%; }

  /* ---------- Hero ---------- */
  .hero { position:relative; min-height:100vh; display:flex; align-items:center; padding:110px 0 70px; overflow:hidden; background:radial-gradient(1000px 600px at 80% 20%,rgba(124,92,255,.35),transparent 60%),radial-gradient(800px 500px at 10% 90%,rgba(255,111,165,.25),transparent 60%),var(--bg); }
  .hero .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; }
  .badge { display:inline-block; padding:7px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.2); font-size:13px; color:var(--muted); animation:up .8s both; }
  .hero h1 { font-size:clamp(38px,6vw,70px); line-height:1.05; margin:20px 0 18px; animation:up .8s .12s both; }
  .grad { background:linear-gradient(90deg,var(--pink),var(--sun),var(--cyan),var(--pink)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 7s linear infinite; }
  .hero p.lead { font-size:19px; color:var(--muted); max-width:500px; animation:up .8s .24s both; }
  .cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; animation:up .8s .36s both; }
  .btn { display:inline-block; padding:15px 30px; border-radius:14px; font-weight:700; text-decoration:none; transition:transform .25s, box-shadow .25s, background .25s; }
  .btn.main { background:linear-gradient(90deg,var(--pink),var(--violet)); color:#fff; box-shadow:0 10px 32px rgba(124,92,255,.45); position:relative; overflow:hidden; }
  .btn.main::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation:sweep 3.2s infinite; }
  .btn.main:hover { transform:translateY(-3px) scale(1.04); }
  .btn.ghost { border:1px solid rgba(255,255,255,.28); }
  .btn.ghost:hover { background:rgba(255,255,255,.08); }
  @keyframes sweep { 0%{ left:-60%; } 60%,100%{ left:130%; } }
  @keyframes shine { to { background-position:300% 0; } }
  @keyframes up { from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

  /* hero art */
  .art { width:100%; max-width:520px; justify-self:center; animation:up 1s .2s both; }
  .art svg { width:100%; height:auto; overflow:visible; }
  .floaty { animation:floaty 6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .floaty.b { animation-duration:7.5s; animation-delay:-2s; }
  .floaty.c { animation-duration:5s; animation-delay:-3s; }
  @keyframes floaty { 50% { transform:translateY(-16px); } }
  .spin { animation:spin 40s linear infinite; transform-box:fill-box; transform-origin:center; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .twinkle { animation:tw 2.6s ease-in-out infinite; }
  .twinkle:nth-child(2n){ animation-delay:-.8s; } .twinkle:nth-child(3n){ animation-delay:-1.6s; }
  @keyframes tw { 50% { opacity:.2; } }
  .bubble { animation:bub 7s ease-in infinite; opacity:0; transform-box:fill-box; transform-origin:center; }
  .bubble.two { animation-delay:2.3s; } .bubble.three { animation-delay:4.6s; }
  @keyframes bub { 0%{ opacity:0; transform:translateY(40px) scale(.7); } 15%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; transform:translateY(-90px) scale(1); } }

  /* ---------- About ---------- */
  .about { background:var(--paper); color:#2a2140; padding:110px 0; position:relative; }
  .about .wrap { display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center; }
  .about .pic { position:relative; }
  .about .pic svg { width:100%; height:auto; border-radius:28px; box-shadow:0 30px 60px rgba(60,30,120,.25); }
  .about .tag { color:#7c5cff; font-weight:700; letter-spacing:.2em; font-size:12px; text-transform:uppercase; }
  .about h2 { font-size:clamp(30px,4.5vw,50px); line-height:1.12; margin:12px 0 18px; }
  .about h2 em { font-style:normal; color:#ff4f8f; }
  .about p { color:#5a5075; margin-bottom:14px; font-size:17px; }
  .ticks { list-style:none; margin-top:18px; display:grid; gap:10px; }
  .ticks li { padding-left:34px; position:relative; font-weight:600; }
  .ticks li::before { content:'✓'; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:#7c5cff; color:#fff; display:grid; place-items:center; font-size:13px; }

  /* ---------- Section titles ---------- */
  .sec { padding:110px 0 30px; }
  .sec .head { text-align:center; margin-bottom:46px; }
  .sec .head .tag { color:var(--cyan); font-weight:700; letter-spacing:.2em; font-size:12px; text-transform:uppercase; }
  .sec .head h2 { font-size:clamp(30px,4.5vw,46px); margin-top:8px; }
  .sec .head p { color:var(--muted); margin-top:8px; }

  /* ---------- Latest posts ---------- */
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:26px; }
  .post { background:var(--bg2); border:1px solid rgba(255,255,255,.08); border-radius:22px; overflow:hidden; text-decoration:none; display:block; transition:transform .4s, box-shadow .4s, border-color .4s; }
  .post:hover { transform:translateY(-10px) rotate(-.6deg); box-shadow:0 26px 50px rgba(0,0,0,.45); border-color:rgba(255,111,165,.6); }
  .thumb { height:190px; position:relative; overflow:hidden; display:grid; place-items:center; font-size:60px; background:var(--g); }
  .thumb::before { content:''; position:absolute; inset:-40%; background:radial-gradient(circle,rgba(255,255,255,.35),transparent 55%); animation:glow 5s ease-in-out infinite alternate; }
  .thumb span { position:relative; transition:transform .5s; }
  .post:hover .thumb span { transform:scale(1.3) rotate(8deg); }
  @keyframes glow { from{ transform:translate(-20%,-10%); } to{ transform:translate(20%,10%); } }
  .post .body { padding:22px 24px 26px; }
  .post .cat { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink); }
  .post h3 { font-size:21px; margin:8px 0; line-height:1.3; }
  .post p { color:var(--muted); font-size:15px; }
  .post .more { display:inline-block; margin-top:14px; color:var(--cyan); font-weight:700; font-size:14px; }
  .post .more::after { content:' →'; display:inline-block; transition:transform .3s; }
  .post:hover .more::after { transform:translateX(6px); }
  .center { text-align:center; margin-top:40px; }

  /* scroll reveal */
  .rv { opacity:0; transform:translateY(46px) scale(.97); transition:opacity .8s ease, transform .8s ease, box-shadow .4s, border-color .4s; }
  .rv.in { opacity:1; transform:none; }
  .rv.left { transform:translateX(-50px); } .rv.right { transform:translateX(50px); }
  .rv.left.in,.rv.right.in { transform:none; }
  .post.rv.in:hover { transform:translateY(-10px) rotate(-.6deg); }

  /* ---------- Testimonials ---------- */
  .tm { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; max-width:900px; margin:0 auto; }
  .quote { background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:34px 30px; position:relative; }
  .quote::before { content:'“'; position:absolute; top:6px; left:22px; font-size:90px; line-height:1; font-family:Georgia,serif; color:var(--pink); opacity:.5; }
  .quote p { position:relative; font-size:18px; margin-top:28px; }
  .who { display:flex; align-items:center; gap:14px; margin-top:22px; }
  .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--violet)); display:grid; place-items:center; font-weight:800; }
  .who b { display:block; }
  .who small { color:var(--muted); }
  .stars { color:var(--sun); letter-spacing:3px; margin-top:4px; }

  /* ---------- Footer ---------- */
  footer { margin-top:120px; background:#09071a; border-top:1px solid rgba(255,255,255,.08); padding:70px 0 26px; position:relative; }
  footer::before { content:''; position:absolute; top:-1px; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan),var(--pink)); background-size:300% 100%; animation:shine 8s linear infinite; }
  .fgrid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:36px; }
  footer h4 { margin-bottom:14px; font-size:15px; letter-spacing:.08em; text-transform:uppercase; }
  footer p,footer li { color:var(--muted); font-size:15px; }
  footer ul { list-style:none; display:grid; gap:9px; }
  footer ul a { text-decoration:none; color:var(--muted); transition:color .2s, padding .2s; }
  footer ul a:hover { color:var(--pink); padding-left:5px; }
  .sub { display:flex; margin-top:12px; }
  .sub input { flex:1; min-width:0; padding:13px 14px; border-radius:12px 0 0 12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--ink); outline:none; }
  .sub button { border:0; padding:0 18px; border-radius:0 12px 12px 0; background:linear-gradient(90deg,var(--pink),var(--violet)); color:#fff; font-weight:700; cursor:pointer; }
  .copy { margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--muted); }

  @media (max-width:860px) {
    .hero .wrap,.about .wrap { grid-template-columns:1fr; }
    .hero { text-align:center; } .hero p.lead { margin:0 auto; } .cta { justify-content:center; }
    .art { max-width:380px; order:-1; }
    .links a:not(.keep) { display:none; }
    .fgrid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:520px) { .fgrid { grid-template-columns:1fr; } }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none !important; transition:none !important; }
    .rv { opacity:1; transform:none; } .bubble { opacity:1; }
  }

/* ---------- WordPress additions ---------- */
body.admin-bar header { top:32px; }
@media (max-width:782px) { body.admin-bar header { top:46px; } }
.thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb { position:relative; }
.article { max-width:760px; margin:0 auto; padding:130px 24px 40px; }
.article h1 { font-size:clamp(30px,5vw,46px); line-height:1.15; margin-bottom:10px; }
.article .meta { color:var(--muted); font-size:14px; margin-bottom:26px; }
.article .content { font-size:18px; }
.article .content p, .article .content ul, .article .content ol { margin-bottom:18px; }
.article .content h2, .article .content h3 { margin:30px 0 12px; }
.article .content a { color:var(--cyan); }
.article .content img { max-width:100%; height:auto; border-radius:14px; }
.article .content blockquote { border-left:4px solid var(--pink); padding:4px 18px; margin:20px 0; color:var(--muted); }
.archive-wrap { padding-top:130px; }
.pagination { text-align:center; margin:40px 0 0; }
.pagination .page-numbers { display:inline-block; padding:8px 14px; margin:0 3px; border-radius:10px; background:var(--bg2); text-decoration:none; }
.pagination .current { background:var(--pink); }
.alignleft { float:left; margin:0 20px 10px 0; } .alignright { float:right; margin:0 0 10px 20px; } .aligncenter { display:block; margin:0 auto; }
.screen-reader-text { position:absolute; left:-9999px; }
.quote .av { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.quote .av img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.quote .av { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.quote .av img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
footer {
  background:
    linear-gradient(rgba(9,7,26,.35), rgba(9,7,26,.55)),
    url(https://captionsatlas.com/wp-content/uploads/2026/10/footer-background.webp) center / cover no-repeat;
}