/*
Theme Name: Tron Terminal v4
Theme URI: https://dhruvyadav.in
Author: Dhruv Yadav
Author URI: https://dhruvyadav.in
Description: Tron × Terminal WordPress theme with hero Matrix digital rain (cyan), hero-only effect, and sticky header transition. Landing includes Origin & About plus terminal-style Stories & Essays index.
Version: 4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tron-terminal-v4
Tags: dark, one-column, accessibility-ready, custom-menu, featured-images, blog, terminal, retro
*/
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Fira+Code:wght@400;700&display=swap');

:root {
  --bg: #000000;
  --terminal-text: #b8ffb3;
  --neon: #00faff;
  --muted: #6da285;
  --max-width: 70ch;
}

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--terminal-text); font-family: 'Fira Code', monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Hero (full screen) */
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
#matrix-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: transparent; }

/* Hero content */
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; }
.site-title { font-family: 'VT323', monospace; font-size: 5rem; color: var(--neon); text-shadow: 0 0 14px rgba(0,250,255,0.95); margin: 0; line-height: 1; }
.hero-nav { margin-top: 0.6rem; display: flex; gap: 1rem; justify-content: center; font-weight: 700; }
.hero-nav a { color: var(--neon); text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 6px; background: rgba(0,250,255,0.03); }
.hero-nav a:hover { text-shadow: 0 0 8px #fff; }

/* Sticky header (hidden until scroll) */
.sticky-header { position: fixed; top: 0; left: 0; right: 0; display: none; background: rgba(0,0,0,0.92); border-bottom: 1px solid rgba(0,250,255,0.06); z-index: 999; }
.sticky-header.visible { display: block; animation: fadeInDown 0.35s ease; }
.sticky-inner { max-width: var(--max-width); margin: 0 auto; padding: 0.8rem 1rem; text-align: center; }
.header-title { font-family: 'VT323', monospace; color: var(--neon); font-size: 1.6rem; margin: 0; }

/* Main content wrap (below hero) */
.site-wrap { max-width: var(--max-width); margin: 2.25rem auto; padding: 1rem; }

/* Sections */
.section { margin: 2rem 0; padding: 1rem; border-radius: 6px; background: rgba(0,0,0,0.0); }
.section h2 { color: var(--neon); text-shadow: 0 0 8px rgba(0,250,255,0.9); font-family: 'VT323', monospace; font-size: 1.8rem; margin-bottom: 0.6rem; }
.section p { color: var(--terminal-text); margin-bottom: 0.9rem; font-size: 1rem; line-height: 1.6; }

/* Stories list */
.story-list { margin-top: 0.5rem; font-family: 'Fira Code', monospace; }
.story-item { padding: 0.6rem 0; border-bottom: 1px dashed rgba(255,255,255,0.03); }
.story-title { color: var(--neon); font-size: 1.05rem; text-decoration: none; display: inline-block; }
.story-meta { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0; }
.story-excerpt { color: var(--terminal-text); display: block; font-size: 0.98rem; max-width: 60ch; }

/* Footer */
.site-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(0,250,255,0.06); color: var(--neon); text-align: center; font-size: 0.9rem; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) { #matrix-canvas { display: none; } }

/* Responsive tweaks */
@media (max-width: 720px) {
  .site-title { font-size: 3rem; }
  .header-title { font-size: 1.2rem; }
  .site-wrap { padding: 0.9rem; margin: 1rem; }
}

@keyframes fadeInDown {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}