/*
Theme Name: Blogommerce
Theme URI: https://blogommerce.com
Author: Blogommerce
Description: Tech review and buying-guide theme in Blogommerce's own navy/orange/pink brand, with a 3D hero and a scroll-driven 3D category reel. Homepage shows only the 5 newest posts.
Version: 3.5
Requires PHP: 7.4
Text Domain: blogommerce
*/

:root{
  --navy:#10173F;
  --navy-2:#1B2456;
  --navy-3:#252F6B;
  --paper:#FFFFFF;
  --bg-soft:#F4F4F8;
  --orange:#FF7A29;
  --pink:#FF2D78;
  --gradient:linear-gradient(120deg, var(--orange), var(--pink));
  --text-dim:#9AA1C4;
  --ink-dim:#6B7080;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--navy); font-family:'Inter',sans-serif; margin:0; overflow-x:hidden; }
::selection{ background:var(--pink); color:#fff; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.01em; margin:0; }
.mono{ font-family:'JetBrains Mono',monospace; }
.grad-text{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--pink); display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:''; width:18px; height:1px; background:var(--gradient); }

/* Nav */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:18px 48px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); }
@media (max-width:720px){ .site-header{ padding:16px 20px; } }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:34px; width:auto; }
.brand span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--navy); }
.navlinks{ display:flex; gap:28px; font-size:13px; color:var(--ink-dim); list-style:none; margin:0; padding:0; }
.navlinks a{ text-decoration:none; }
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; }
.hamburger span{ display:block; width:100%; height:2px; background:var(--navy); border-radius:2px; transition:transform 0.25s ease, opacity 0.25s ease; }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:720px){
	.hamburger{ display:flex; }
	.navlinks{
		display:flex; flex-direction:column; gap:0;
		position:fixed; top:64px; left:0; right:0;
		background:var(--paper); padding:8px 24px;
		box-shadow:0 16px 30px -12px rgba(16,23,63,0.3);
		max-height:0; overflow:hidden; opacity:0;
		transition:max-height 0.3s ease, opacity 0.25s ease;
	}
	.navlinks.is-open{ max-height:80vh; opacity:1; overflow-y:auto; }
	.navlinks li{ border-bottom:1px solid #eee; list-style:none; }
	.navlinks li:last-child{ border-bottom:none; }
	.navlinks a{ display:block; padding:16px 4px; color:var(--navy); font-size:15px; }
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 48px; }
@media (max-width:720px){ .wrap{ padding:0 20px; } }

/* Hero with 3D logo stage */
#hero{ min-height:100vh; display:flex; align-items:center; position:relative; padding-top:80px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; width:100%; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
h1.headline{ font-size:clamp(34px,6vw,68px); line-height:1.04; }
.hero-sub{ margin-top:22px; max-width:440px; font-size:16px; line-height:1.65; color:var(--ink-dim); }
.scroll-cue{ position:absolute; bottom:36px; left:48px; font-size:11px; color:var(--ink-dim); display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; }
@media (max-width:720px){ .scroll-cue{ left:20px; } }
.scroll-cue .line{ width:1px; height:28px; background:#ddd; overflow:hidden; }
.scroll-cue .line::after{ content:''; display:block; width:100%; height:40%; background:var(--pink); animation:cue 1.6s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(250%);} }

.hero-3d-stage{ perspective:1200px; height:420px; position:relative; display:flex; align-items:center; justify-content:center; }
.hero-3d-plate{ position:relative; width:260px; height:260px; transform-style:preserve-3d; will-change:transform; }
.hero-logo-card{ position:absolute; inset:0; background:var(--paper); border-radius:28px; box-shadow:0 40px 80px -20px rgba(16,23,63,0.35); display:flex; align-items:center; justify-content:center; padding:32px; }
.hero-logo-card img{ width:100%; height:auto; }
.orbit-chip{ position:absolute; width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 20px 40px -10px rgba(16,23,63,0.3); color:#fff; }
.orbit-chip.c1{ background:var(--gradient); top:-22px; right:-28px; }
.orbit-chip.c2{ background:var(--navy); top:60%; left:-38px; }
.orbit-chip.c3{ background:var(--orange); bottom:-18px; right:20%; }

/* 3D category reel */
#reel-wrap{ position:relative; background:var(--bg-soft); }
#reel-pin{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.reel-label{ position:absolute; top:64px; left:0; right:0; text-align:center; }
.reel-label .idx{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--pink); margin-top:8px; }
.reel-stage{ position:relative; width:100%; height:420px; perspective:1400px; display:flex; align-items:center; justify-content:center; }
.reel-track{ position:relative; width:280px; height:360px; transform-style:preserve-3d; }
.reel-card{ position:absolute; inset:0; width:280px; height:360px; background:var(--paper); background-size:cover; background-position:center; border-radius:16px; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; will-change:transform, opacity; box-shadow:0 30px 60px -20px rgba(16,23,63,0.25); overflow:hidden; }
.reel-card:not(.has-photo)::before{ content:''; position:absolute; inset:0; background:var(--gradient); opacity:0.06; }
.reel-card.has-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,23,63,0) 30%, rgba(16,23,63,0.92) 100%); }
.reel-card .cat-num{ position:absolute; top:20px; left:20px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-dim); z-index:1; }
.reel-card.has-photo .cat-num{ color:rgba(255,255,255,0.8); }
.reel-card .cat-icon{ width:48px; height:48px; border-radius:12px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; position:relative; z-index:1; }
.reel-card.has-photo .cat-icon{ background:rgba(255,255,255,0.18); backdrop-filter:blur(6px); }
.reel-card h3{ font-size:21px; line-height:1.15; margin-bottom:8px; position:relative; z-index:1; color:var(--navy); }
.reel-card.has-photo h3{ color:#fff; }
.reel-card .cat-count{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--pink); position:relative; z-index:1; }
.reel-card.has-photo .cat-count{ color:#fff; opacity:0.85; }
.reel-progress{ margin-top:36px; display:flex; gap:6px; }
.reel-progress span{ width:20px; height:3px; border-radius:2px; background:#dcdce6; transition:background 0.3s; }
.reel-progress span.active{ background:var(--gradient); }

/* Reveal */
.reveal-section{ padding-top:100px; padding-bottom:60px; }
.rev{ opacity:0; transform:translateY(24px); transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.rev.in{ opacity:1; transform:translateY(0); }

/* Post grid (homepage top-5 + archive cards) */
.post-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-top:32px; }
@media (max-width:820px){ .post-grid{ grid-template-columns:1fr; } }
.post-grid .side-posts{ display:flex; flex-direction:column; gap:20px; }
.post-card{ background:var(--paper); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; display:block; border:1px solid #eee; box-shadow:0 10px 30px -18px rgba(16,23,63,0.25); }
.post-card .thumb{ height:230px; background:var(--navy-2); background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center; }
.post-card.small .thumb{ height:110px; }
.thumb-icon{ position:relative; font-size:36px; opacity:0.5; }
.post-card.small .thumb-icon{ font-size:22px; }
.post-card .thumb .cat-chip{ position:absolute; top:14px; left:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; background:rgba(16,23,63,0.75); color:#fff; padding:5px 10px; border-radius:20px; z-index:2; }
.post-card .body{ padding:18px 20px; }
.post-card.small .body{ padding:14px 16px; }
.post-card h4{ font-size:19px; line-height:1.25; margin-bottom:8px; color:var(--navy); }
.post-card.small h4{ font-size:15px; margin-bottom:4px; }
.post-card .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-dim); }

/* CTA / footer */
#cta{ padding:150px 48px 100px; background:var(--navy); color:#fff; }
#cta h2{ font-size:clamp(30px,5vw,52px); max-width:700px; line-height:1.08; color:#fff; }
.cta-row{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{ font-family:'JetBrains Mono',monospace; font-size:13px; padding:13px 26px; border-radius:30px; border:none; background:var(--gradient); color:#fff; text-decoration:none; display:inline-block; font-weight:500; }
.btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.3); }
.site-footer{ border-top:1px solid #eee; padding:26px 48px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; }
@media (max-width:720px){ #cta{ padding:100px 20px; } .site-footer{ padding:22px 20px; flex-direction:column; gap:8px; } }

/* Archive / blog listing (older posts) */
.archive-wrap{ padding:150px 48px 100px; }
@media (max-width:720px){ .archive-wrap{ padding:110px 20px 60px; } }
.archive-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px; margin-top:32px; }
.pagination{ margin-top:48px; display:flex; gap:16px; font-family:'JetBrains Mono',monospace; font-size:13px; }
.pagination a{ text-decoration:none; color:var(--pink); }

/* Category archive header */
.category-hero{ padding:150px 48px 60px; background:var(--bg-soft); }
.category-hero h1{ font-size:clamp(32px,5.5vw,56px); }
.category-hero .count{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-dim); margin-top:12px; }

/* Single post */
.article-wrap{ background:var(--paper); color:var(--navy); padding:150px 48px 100px; }
@media (max-width:720px){ .article-wrap{ padding:110px 20px 60px; } }
.article-inner{ max-width:720px; margin:0 auto; }
.article-inner .eyebrow{ color:var(--pink); }
.article-title{ font-size:clamp(30px,5vw,50px); line-height:1.06; margin:16px 0 20px; }
.article-meta{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-dim); margin-bottom:36px; }
.article-body{ font-size:18px; line-height:1.75; }
.article-body p{ margin:0 0 22px; }
.article-body h2{ margin:44px 0 16px; font-size:26px; font-family:'Space Grotesk',sans-serif; }
.article-body img{ border-radius:6px; margin:28px 0; }
.article-body a{ color:var(--pink); }

/* Colorful dot-particle brand name at the very bottom of every page */
.brand-dots-wrap{ width:100%; height:clamp(70px, 14vw, 150px); background:var(--paper); overflow:hidden; touch-action:none; }
.brand-dots-wrap canvas{ display:block; width:100%; height:100%; }