@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');

/*
Theme Name: I Am Vermin
Author: newperspectives.eu
Author URI: https://newperspectives.eu
Description: a core wordpress theme 
Version: 1.0r
License: GNU General Public License

*/
/*  variables - Change the look of your site simply.

-------------------------------------------------------------- */
:root {
  --color-primary: #ededed;
  --color-primary-hover: #ededed;
  --color-text: #ededed;
  --color-text-dark: #404040;
  --color-text-medium: #565656;
  --color-text-light: #888;
  --color-background: #111111;
  --color-border: #ddd;
  --color-code-bg: #eee;
  --color-highlight: #fff9c0;
  
  --font-body:  "Cutive Mono", monospace;
  --font-heading: "Spectral", serif;
  --font-mono: Monaco, Consolas, "Andale Mono", monospace;
  
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  
  --max-width: 720px;
  --max-paragraph-width: 640px;
  --border-radius: 0px;
}

/* Modern Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

/* 1. RESET & SCROLLBARS */

html, body {
    width: 100%; min-height: 100%;
    background-color: #000;
    font-family: 'Cutive Mono', monospace;
    overflow-x: hidden;
}

/* Base */
body {
    width: 100%; /* Changed from 100vw to 100% to prevent horizontal jitter */
    min-height: 100vh;
    background-color: #000; /* Fallback */
    position: relative;
    font-family: var(--font-body);
    color: var(--color-text);
    font-size: 2.1rem;
    font-weight: 200;
    display: flex;
    flex-direction: column; /* Stacks header on top of content */
    justify-content: flex-start; /* Aligns content to the top */
    align-items: stretch; /* Forces children to take up full width */
    touch-action: none;

    /* --- THE FIX --- */
    touch-action: pan-y; /* Allows vertical scrolling (pan-y) while still tracking touch for bugs */
    overflow-x: hidden;  /* Prevent horizontal scroll */
    overflow-y: auto;    /* Explicitly allow vertical scroll */
    height: auto;        /* Allow body to grow with content */
}

#masthead {
    width: 100%;
    z-index: 20; /* Ensure it stays above the vermin and lighting */
    position: relative;
}

/* 2. BACKGROUND SYSTEM */
#bg-system {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    background-color: #121214; 
    overflow: hidden;
    pointer-events: none;
}

.linen {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 4px 4px;
    z-index: 1;
}

.spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70vw 60vh at 50% 50%, 
        rgba(255, 200, 150, 0.18) 0%, 
        rgba(18, 18, 20, 0.4) 40%, 
        rgba(0, 0, 0, 0.95) 100%
    );
    z-index: 3;
}

#vermin-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* 3. VERMIN STYLING (High Visibility) */
.pest {
    position: absolute;
    background: #000; /* Deep black silhouette */
    will-change: transform;
    /* Added white rim light to catch the spotlight */
    box-shadow: inset 1.5px 1px 1px rgba(255, 255, 255, 0.25);
    filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.9));
}

.cockroach { width: 14px; height: 6px; border-radius: 50%; }
.mouse { width: 18px; height: 9px; border-radius: 70% 30% 60% 40%; }

/* Scuttling Legs */
.pest::after {
    content: '';
    position: absolute;
    width: 140%; height: 140%;
    top: -20%; left: -20%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: scuttle 0.07s infinite alternate linear;
}

@keyframes scuttle {
    from { transform: scaleY(1); opacity: 0.5; }
    to { transform: scaleY(1.5); opacity: 0.2; }
}


/* Chromatic Title Style */
.chromatic-title {
    font-family: 'Cutive Mono', monospace !important;
    color: #fff;
    letter-spacing: 0.4rem;
    animation: chroma-vibe 0.3s infinite alternate;
}

@keyframes chroma-vibe {
    from { text-shadow: 
        -2px 0px 1px rgba(255, 0, 80, 0.8), 
        2px 0px 1px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.2);}
    to { text-shadow: 
        -2px 0px 1px rgba(255, 0, 80, 0.8), 
        2px 0px 1px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5);}
}

/* Typography */
p { 
  max-width: var(--max-paragraph-width);
  margin: 0 auto 20px;
  padding: 0;
  line-height: 1.8;
  text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
  /* font-family: var(--font-heading);
  color: var(--color-text); */
    font-family: 'Cutive Mono', monospace !important;
    color: #fff;
    animation: chroma-vibe 0.3s ease-in-out infinite alternate;
  font-weight: 200;
  text-align: center;
  line-height: 1.2;
  margin: 1.6em 0 1em;
}

h1 { font-size: 4.8rem; }
h2 { font-size: 3.4rem; }
h3 { font-size: 2.8rem; }
h4 { font-size: 1.8rem; }


ul, ol { margin: 0 0 1.5em 3em; }
b, strong { font-weight: 700; }
em, i { font-style: italic; }

blockquote { 
  margin: 0 1.5em;
  font-style: italic;
}

code, kbd, pre { font-family: var(--font-mono); }

pre {
  background: var(--color-code-bg);
  padding: 1.6em;
  overflow-x: auto;
  border-radius: var(--border-radius);
  font-size: 1.5rem;
}

mark { 
  background: var(--color-highlight);
  padding: 0 0.2em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 1.5em 0;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 200;
  transition: color 0.25s ease-in-out, font-weight .3s ease-in-out;
}

a:hover, a:focus { 
  color: var(--color-primary-hover); 
  font-weight: 300;
  transition: color 0.25s ease-in-out, font-weight .3s ease-in-out;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.5em;
  width: 100%;
}

input:focus, textarea:focus {
  color: var(--color-text-dark);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

textarea { resize: vertical; }

button,
input[type="button"],
input[type="submit"] {
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.8em 1.5em;
  cursor: pointer;
  font-size: 1.4rem;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  opacity: 0.8;
}

/* Layout */
.container {
  max-width: var(--max-width);
  padding: var(--spacing-sm);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* Header */
header {
  display: block;
  width: 100vw;
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

header #brand h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--color-text-medium);
  text-transform: uppercase;
}

header #brand h1 a { color: inherit; }

header #brand h1 span {
  font-weight: 200;
  color: var(--color-text-light);
  text-transform: lowercase;
}


/* hamburger menu begin */
/* Hamburger container */

.hamburger-menu {
  padding-top: 10px;
  display: block;
  position: relative;
  float: right;
  width: 30px;
  height: 30px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}

.hamburger-menu:hover {
  opacity: 0.9;
}

.hamburger-menu .bar {
  width: 100%;
  height: 2px;
  margin: 3px 0;
  background-color: #efefef;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu.active .bar:first-child {
  transform: translateY(-5px) rotate(45deg);  /* Changed from 5px to 8px */
}

.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .bar:last-child {
  transform: translateY(5px) rotate(-45deg);  /* Changed from -5px to -8px */
}

/* -------------------------------------------------
   Overlay menu (hidden by default)
   ------------------------------------------------- */

/* ----- overlay base ----- */
.overlay-menu {
    position: fixed;
    inset: 0;
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 2.1rem;
    font-weight: 200;
    color: var(--color-text);
    display: flex;               /* keep flex so children stay centered */
    align-items: center;
    justify-content: center;
    z-index: 999;

    /* NEW: start hidden */
    opacity: 0;                  /* invisible initially */
    visibility: hidden;          /* removes it from tab order */
    transition: opacity 0.8s ease;   /* <-- slower fade (adjust time as you like) */
}

/* ----- when the menu is opened ----- */
.overlay-menu.open {
    opacity: 1;                  /* become fully visible */
    visibility: visible;         /* now reachable by keyboard/screen‑readers */
}

/* Container for the nav list */
.navigation-container {
    text-align: center;
}

/* Nav list styling */
.overlay-nav .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.overlay-nav .menu li {
    margin: 1rem 0;
}
.overlay-nav .menu a {
    font-size: 2rem;
    color: #fff;
    transition: color .2s;
}
.overlay-nav .menu a:hover {
    color: #ffd700;
}

/* -------------------------------------------------
   Animation for the hamburger → close (X) icon
   ------------------------------------------------- */
.hamburger-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger-active .bar:nth-child(2) { opacity: 0; }
.hamburger-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* -------------------------------------------------
   Fade‑in/out of the whole page (optional)
   ------------------------------------------------- */
#fader {
    position: fixed;
    inset: 0;
    background: #000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
}
.fade-in  { opacity: 1; }
.fade-out { opacity: 0; }


/* hamburger menu end */



header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5em;
  font-size: 1.4rem;
}

header nav a { color: var(--color-text-light); }

/* Articles */
article {
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

article .title {
  color: var(--color-text);
  font-weight: 200;
  margin-bottom: 0.5em;
}

article .title a { color: inherit; }
article .title a:hover { color: var(--color-primary); }

article .post-meta {
  margin-bottom: var(--spacing-md);
  font-size: 1.4rem;
  color: var(--color-text-light);
}

article .the-content a { font-weight: 700; }

article .meta {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: var(--spacing-sm);
}

article .post-categories {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1em;
}

/* Pages */
.page article { border-bottom: none; }


.the-content p {
}

/* REVEAL EFFECTS */



/* --- THE GRADUAL FOG LENS --- */
.fog-lens {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 1. INCREASE HEIGHT: A taller lens (50% of screen) 
       allows for a much more gradual transition */
    height: 50vh; 
    
    z-index: 500;
    pointer-events: none;
    
    /* 2. HEAVY BLUR: We start with a strong blur */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    /* 3. COLOR GRADIENT: 
       Bottom is 100% your background color.
       Top is 0% (transparent). 
       We add a stop at 50% to make the fade smoother. */
    background: linear-gradient(
        to bottom, 
        rgba(8, 26, 54, 0) 0%,
        rgba(8, 26, 54, 0.2) 30%,
        rgba(8, 26, 54, 0.7) 70%,
        rgba(8, 26, 54, 1) 100%
    );

    /* 4. THE MASTER GRADIENT MASK: 
       This is what makes the BLUR fade gradually.
       Instead of a simple 2-point gradient, we use a 'Curve'. 
       This removes the "hard cut" at the top. */
    -webkit-mask-image: linear-gradient(
        to top, 
        rgba(0,0,0,1) 0%,      /* Full strength at bottom */
        rgba(0,0,0,0.8) 40%,   /* Still strong nearly halfway up */
        rgba(0,0,0,0.3) 70%,   /* Fading out significantly */
        rgba(0,0,0,0) 100%     /* Completely gone at the very top */
    );
    mask-image: linear-gradient(
        to top, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,0.8) 40%, 
        rgba(0,0,0,0.3) 70%, 
        rgba(0,0,0,0) 100%
    );
}


/* Reveal images */

/* Initial hidden state - set by JavaScript */
img:not(.no-reveal) {
    margin: 1em 0;
    transition: opacity 1s ease-in-out, filter 1s ease-in-out;
}

/* Initial state when JavaScript hides them */
img:not(.no-reveal)[style*="opacity: 0"] {
    opacity: 0;
    filter: blur(10px);
}

/* Revealed state */
img:not(.no-reveal)[style*="opacity: 0.9"] {
    opacity: 0.9;
    filter: blur(0);
}

/* No-reveal images - always fully visible */
img.no-reveal {
    opacity: 1;
    filter: none;
    transition: none;
}

/* End of Reveal images */

    .spacer { height: 50vh; }

/* Pagination */
#pagination {
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: space-between;
}

/* Comments */
.commentlist {
  list-style: none;
  padding: 0;
}

.commentlist .comment {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.commentlist .children {
  margin-top: var(--spacing-sm);
  margin-left: var(--spacing-md);
}

.comment-author .says { display: none; }

.comment-meta {
  font-size: 1.2rem;
  color: var(--color-text-light);
  margin-bottom: 1em;
}

/* Footer */
footer {
  text-align: center;
  padding: var(--spacing-md) 0;
  font-size: 1.2rem;
  color: var(--color-text-light);
}

/* Utilities */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin: 0 auto; }

/* Media Queries */
@media (max-width: 767px) {
  header { flex-direction: column; text-align: center; }
  header nav ul { justify-content: center; }
}