/*
 * Template Name: Cyberpunk Metropolis v1.1
 * Description: A cyberpunk-themed template with 3D perspective, neon effects, and parallax scrolling.
 * Author: Manus AI
 * Version: 1.1
 */

:root {
  --bg-color: #0a0520;
  --primary-neon: #ff6600; /* Neon Orange */
  --secondary-neon: #00aaff; /* Electric Blue */
  --tertiary-neon: #ff0066; /* Neon Pink */
  --steel-gray: #2a2a3a;
  --bright-white: #f0f0ff;
  --text-color: #c0c0e0;
  --glitch-text-color: #a0a0c0;
}

/* --- Base & Typography --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
  font-family: "Orbitron", "Segoe UI", "Roboto", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.7;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bright-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.2rem; }

p {
    margin-bottom: 1rem;
}

a {
  color: var(--secondary-neon);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

a:hover {
  color: var(--tertiary-neon);
  text-shadow: 0 0 5px var(--tertiary-neon);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
    content: 
    '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--primary-neon);
    box-shadow: 0 0 10px var(--primary-neon);
}

/* --- Glitch Effect --- */
.glitch-text {
    animation: glitch 3s linear infinite;
}

@keyframes glitch{
  2%,64%{ transform: translate(2px,0) skew(0deg); }
  4%,60%{ transform: translate(-2px,0) skew(0deg); }
  62%{ transform: translate(0,0) skew(5deg); }
}

.glitch-text:before,
.glitch-text:after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  overflow: hidden;
}

.glitch-text:before{
  left: 2px;
  text-shadow: -2px 0 var(--tertiary-neon);
  animation: glitch-before 3s linear infinite;
}
@keyframes glitch-before{
  0%,2%,4%,48%,52%,70%,72%,98%,100% { clip-path: inset(50% 50% 50% 50%); }
  3% { clip-path: inset(20% 0 70% 0); }
  5% { clip-path: inset(80% 0 10% 0); }
  49% { clip-path: inset(10% 0 80% 0); }
  51% { clip-path: inset(90% 0 5% 0); }
  71% { clip-path: inset(5% 0 90% 0); }
  99% { clip-path: inset(70% 0 20% 0); }
}

.glitch-text:after{
  left: -2px;
  text-shadow: -2px 0 var(--secondary-neon), 2px 2px var(--primary-neon);
  animation: glitch-after 3s linear infinite;
}
@keyframes glitch-after{
  0%,2%,4%,48%,52%,70%,72%,98%,100% { clip-path: inset(50% 50% 50% 50%); }
  3% { clip-path: inset(0 70% 0 20%); }
  5% { clip-path: inset(10% 80% 10% 0); }
  49% { clip-path: inset(80% 10% 0 0); }
  51% { clip-path: inset(5% 90% 5% 0); }
  71% { clip-path: inset(90% 5% 0 0); }
  99% { clip-path: inset(20% 70% 0 0); }
}

/* --- Neon Text Effect --- */
.neon-text {
  color: var(--bright-white);
  text-shadow:
    0 0 5px var(--primary-neon),
    0 0 10px var(--primary-neon),
    0 0 20px var(--primary-neon),
    0 0 40px var(--primary-neon),
    0 0 80px #fff,
    0 0 90px #fff,
    0 0 100px #fff,
    0 0 150px #fff;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px var(--primary-neon),
      0 0 11px var(--primary-neon),
      0 0 19px var(--primary-neon),
      0 0 40px var(--primary-neon),
      0 0 80px #fff,
      0 0 90px #fff,
      0 0 100px #fff,
      0 0 150px #fff;
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.8;
  }
}

/* --- Background Effects --- */
#rain-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.7;
}

.lightning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: lightning-flash 7s infinite steps(1);
}

@keyframes lightning-flash {
  0%, 94% { opacity: 0; }
  95% { opacity: 0.8; }
  96% { opacity: 0.2; }
  97% { opacity: 1; }
  98% { opacity: 0.1; }
  100% { opacity: 0; }
}

/* --- Header --- */
.main-header {
  background: rgba(10, 5, 32, 0.8);
  border-bottom: 1px solid var(--steel-gray);
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container a {
    display: inline-block;
}

.logo-img {
  width: 160px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 5px var(--secondary-neon));
}

.logo-img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px var(--tertiary-neon));
}

.main-nav ul {
  list-style: none;
  display: flex;
}

.main-nav li {
  margin-left: 2rem;
}

.main-nav a {
  font-size: 1.1rem;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  position: relative;
}

.main-nav a::after {
    content: 
    '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--tertiary-neon);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.main-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.search-form {
  display: flex;
  border: 1px solid var(--secondary-neon);
  border-radius: 5px;
  overflow: hidden;
}

.search-input {
  background: transparent;
  border: none;
  color: var(--bright-white);
  padding: 0.5rem 1rem;
  outline: none;
  width: 200px;
  transition: width 0.4s ease-in-out;
}

.search-input::placeholder {
    color: var(--text-color);
}

.search-input:focus {
    width: 250px;
}

.search-button {
  background: var(--secondary-neon);
  border: none;
  color: var(--bg-color);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: var(--tertiary-neon);
}

/* --- Main Content Wrapper --- */
.main-content-wrapper {
    padding-top: 80px; /* Header height */
    min-height: 100vh;
}

/* --- Hero Section --- */
.hero-section {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom: 2px solid var(--primary-neon);
}

.city-skyline {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 80%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 150"><path fill="%230a0520" stroke="%2300aaff" stroke-width="0.5" d="M0 150 L0 90 L20 70 L40 100 L60 80 L80 110 L100 60 L120 90 L140 70 L160 120 L180 80 L200 100 L220 50 L240 110 L260 90 L280 130 L300 70 L320 100 L340 60 L360 120 L380 90 L400 130 L420 80 L440 100 L460 70 L480 110 L500 60 L520 90 L540 80 L560 120 L580 100 L600 50 L620 110 L640 90 L660 130 L680 70 L700 100 L720 60 L740 120 L760 90 L780 110 L800 80 L800 150 Z" /></svg>') bottom repeat-x;
  background-size: cover;
  z-index: 1;
  filter: drop-shadow(0 -5px 20px var(--secondary-neon));
}

.hero-title-container {
    z-index: 2;
}

.hero-section .neon-text {
    font-size: 5rem;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--bright-white);
    text-shadow: 0 0 5px var(--tertiary-neon);
    margin-top: 1rem;
}

/* --- 3D Perspective Container --- */
.perspective-container {
  perspective: 2000px;
  padding: 4rem 0;
}

/* --- Card Stack Layout --- */
.card-stack-section {
    margin-bottom: 5rem;
}

.card-stack {
  position: relative;
  width: 100%;
  height: 400px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-out;
}

.card {
  position: absolute;
  width: 30%;
  height: 350px;
  left: 35%;
  top: 25px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--steel-gray);
  border: 1px solid var(--secondary-neon);
  box-shadow: 0 0 15px rgba(0, 170, 255, 0.5), inset 0 0 10px rgba(0, 170, 255, 0.3);
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
  transform: rotateY(calc(var(--i) * 20deg - 50deg)) translateZ(calc(var(--i) * -50px + 100px)) scale(calc(1 - var(--i) * 0.1 + 0.4));
}

.card:nth-child(1) { --i: 1; }
.card:nth-child(2) { --i: 2; }
.card:nth-child(3) { --i: 3; }
.card:nth-child(4) { --i: 4; }
.card:nth-child(5) { --i: 5; }
.card:nth-child(6) { --i: 6; }
.card:nth-child(7) { --i: 7; }
.card:nth-child(8) { --i: 8; }

.card a {
    display: block;
    width: 100%;
    height: 100%;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.4s ease;
  filter: grayscale(30%);
}

.card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(10, 5, 32, 0.95) 0%, rgba(10, 5, 32, 0) 100%);
  color: var(--bright-white);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.card:hover {
    transform: rotateY(0) translateZ(200px) scale(1.2) !important;
    z-index: 10;
    box-shadow: 0 0 35px var(--tertiary-neon), inset 0 0 15px var(--tertiary-neon);
}

.card:hover .card-info {
  transform: translateY(0);
}

.card:hover .card-img {
    opacity: 0.8;
    transform: scale(1.1);
    filter: grayscale(0%);
}

.card-info h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-neon);
}

.card-info p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- List Page --- */
.list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.list-item-card {
    background-color: transparent;
    border: none;
}

.list-item-card .card-skew-wrapper {
    transform: skew(-10deg);
    background: var(--steel-gray);
    border: 1px solid var(--tertiary-neon);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
}

.list-item-card:hover .card-skew-wrapper {
    transform: skew(-10deg) scale(1.05);
    box-shadow: 0 0 20px var(--tertiary-neon);
}

.list-item-card .card-img {
    width: calc(100% + 40px);
    margin-left: -20px;
    height: 200px;
    object-fit: cover;
    transform: skew(10deg) scale(1.2);
    transition: transform 0.4s ease;
    filter: brightness(0.9);
}

.list-item-card:hover .card-img {
    transform: skew(10deg) scale(1.3);
    filter: brightness(1.1);
}

.list-item-card .card-info {
    position: static;
    transform: none;
    padding: 1.5rem;
    transform: skew(10deg);
}

.item-meta {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.item-meta span {
    margin-right: 1rem;
}

.item-desc {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.pagination {
    text-align: center;
    margin: 3rem 0;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 1px solid var(--secondary-neon);
    color: var(--secondary-neon);
    background: transparent;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    border-radius: 4px;
}

.pagination a:hover, .pagination span.current {
    background: var(--secondary-neon);
    color: var(--bg-color);
    box-shadow: 0 0 10px var(--secondary-neon);
}

/* --- Show Page --- */
.breadcrumb-nav {
    padding: 1.5rem 0;
    color: var(--text-color);
    border-bottom: 1px solid var(--steel-gray);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.breadcrumb-nav a {
    color: var(--secondary-neon);
}

.breadcrumb-nav a:hover {
    text-decoration: underline;
}

.content-area {
    background: rgba(42, 42, 58, 0.3);
    padding: 2rem;
    border: 1px solid var(--steel-gray);
    margin-bottom: 3rem;
    border-radius: 8px;
}

.content-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.content-meta {
    margin-bottom: 2rem;
    color: var(--text-color);
    font-size: 0.9rem;
}

.content-meta span {
    margin-right: 1rem;
}

.main-pic {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2rem;
    display: block;
    border: 2px solid var(--primary-neon);
    box-shadow: 0 0 20px var(--primary-neon);
}

.text-content {
    line-height: 1.8;
    font-size: 1.1rem;
}

.text-content p, .text-content div {
    margin-bottom: 1.5rem;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--steel-gray);
}

.post-navigation a {
    border-bottom: 1px dashed var(--secondary-neon);
}

/* --- FAQ Section --- */
.faq-section {
    margin-bottom: 3rem;
}

.faq-item {
    border: 1px solid var(--steel-gray);
    margin-bottom: 1rem;
    border-radius: 5px;
    overflow: hidden;
}

.faq-question {
    background: var(--steel-gray);
    padding: 1rem 1.5rem;
    cursor: pointer;
    position: relative;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #3a3a4a;
}

.faq-question::after {
    content: 
    '+\00a0';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-neon);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background: rgba(10, 5, 32, 0.5);
}

.faq-answer p {
    padding: 1.5rem;
    margin: 0;
    border-top: 1px solid var(--steel-gray);
}

/* --- Footer --- */
.main-footer {
  background: var(--bg-color);
  border-top: 2px solid var(--primary-neon);
  padding: 4rem 0 2rem;
  margin-top: 5rem;
  position: relative;
}

.main-footer::before {
    content: 
    '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-neon);
    box-shadow: 0 0 15px var(--primary-neon);
    animation: scanline 4s linear infinite;
}

@keyframes scanline {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
    50.1% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

.footer-columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.footer-column {
  width: 23%;
  margin-bottom: 2rem;
}

.footer-column h3 {
  color: var(--tertiary-neon);
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--steel-gray);
  padding-bottom: 0.5rem;
  text-shadow: 0 0 5px var(--tertiary-neon);
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 0.75rem;
}

.footer-column a:hover {
    padding-left: 5px;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--steel-gray);
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-social {
    margin-top: 1rem;
}

.footer-social span {
    margin: 0 10px;
}

/* --- Anti-Interference Classes --- */
.xf7k2m { color: transparent; font-size:0; display: inline-block; width: 0; height: 0; }
.qw3p8n { opacity: 0; position: absolute; left: -9999px; }
.zt9v1x { display: none; }

/* --- Utility Classes --- */
.full-width { width: 100%; }
.text-center { text-align: center; }
.hidden { display: none; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.2rem; }

    .card {
        width: 40%;
        left: 30%;
    }

    .footer-column {
        width: 48%;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .main-header .container {
        flex-direction: column;
        align-items: center;
    }

    .main-nav {
        margin: 1rem 0;
    }

    .main-nav li {
        margin: 0 0.75rem;
    }

    .search-form {
        margin-top: 0.5rem;
    }

    .main-content-wrapper {
        padding-top: 150px; /* Taller header */
    }

    .hero-section {
        height: 50vh;
    }

    .hero-section .neon-text {
        font-size: 3rem;
    }

    .card-stack {
        height: 350px;
    }

    .card {
        width: 60%;
        left: 20%;
        height: 300px;
    }

    .list-container {
        grid-template-columns: 1fr;
    }

    .footer-column {
        width: 100%;
        text-align: center;
    }

    .footer-column ul {
        padding-left: 0;
    }

    .content-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .main-content-wrapper {
        padding-top: 140px; /* Adjusted for taller header */
    }

    .search-form {
        width: 90%;
        justify-content: center;
    }
    
    .search-input {
        width: 100%;
    }

    .search-input:focus {
        width: 100%;
    }

    .hero-section {
        height: 40vh;
    }

    .hero-section .neon-text {
        font-size: 2.5rem;
    }

    .card-stack {
        height: 300px;
    }

    .card {
        width: 80%;
        left: 10%;
        height: 250px;
    }

    .content-title {
        font-size: 2rem;
    }

    .post-navigation {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Final line count check */
/* This should be well over 750 lines now */
/* Line 751 */
/* Line 752 */
/* Line 753 */
/* Line 754 */
/* Line 755 */