/* ===== Variables (reference palette) ===== */
:root{
  --page-grey: #bfbfbf;

  --blue-bg: #1900ff;
  --blue-fg: rgba(254,255,0,0.85);
  --red-bg: #ff0000;
  --green-bg: #26ff00;
  --black-bg: #000000;
  --white-bg: #ffffff;
  --grey1-bg: #bfbfbf;
  --whiteblue-border: #000dff;
  --yellow-bg: #f5ff00;

  --ink-85: rgba(0,0,0,0.85);
  --ink-60: rgba(0,0,0,0.6);
  --paper-85: rgba(255,255,255,0.85);

  --gutter: 3rem;

  /* Reference sizing */
  --fs-body: 2rem;
  --fs-h1: 4.5rem;
  --fs-h2: 3.8rem;
  --fs-h3: 2.0rem;
}

/* Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:62.5%; }
body{
  margin:0;
  background: var(--page-grey);
  color: var(--ink-85);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:active{ opacity:.7; }

/* Layout: left 2/3, right 1/3 — right always reserved */
.frame{
  min-height:100svh;
  display:grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(280px, 1fr);
}
.left{ padding: 0; background: var(--page-grey); min-height: 100vh; overflow-x:hidden; }
.right{ background:#fff; min-height: 100vh; }

/* Right text wrapper */
.sidebar-content{
  padding: 18px;
  line-height: 1.3;
}
@media (min-width: 960px){
  .sidebar-content{ position: sticky; top: 0; }
}

/* Page content */
.page-content{
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

/* Typography */
.title{
  margin:0 0 1rem 0;
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing:-0.02em;
  line-height:1;
}
.subtitle{
  margin:0 0 .6rem 0;
  font-size: var(--fs-h2);
  font-weight: 440;
  line-height:1.1;
}
.kicker{ font-size: var(--fs-h3); margin: 1.2em 0 .4em; font-weight: 600; }

.flow{ font-size: var(--fs-body); }
bodycopy{ display:block; font-size: var(--fs-body); color: var(--paper-85); line-height:1.2; }
bodycopy a{ color: inherit; }

/* Alignment helpers */
.txt-left{ text-align:left; }
.txt-right{ text-align:right; }
.txt-center{ text-align:center; }

/* Inline chips for headings */
.chip{ display:inline-block; padding:0 .12em; }
.chip--blue{ background:var(--blue-bg); color:var(--blue-fg); }
.chip--red{ background:var(--red-bg); color:var(--paper-85); }
.chip--green{ background:var(--green-bg); color:var(--ink-85); }
.chip--black{ background:var(--black-bg); color:var(--paper-85); }
.chip--white{ background:var(--white-bg); color:var(--ink-85); }
.chip--grey1{ background:var(--grey1-bg); color:var(--ink-85); }
.chip--yellow{ background:var(--yellow-bg); color:var(--ink-85); }

/* Bands (no white sections) */
.section{ padding: 0; }
.band--grey1{ background: var(--grey1-bg); color: var(--ink-85); }
.band--black{ background: #000; color: var(--paper-85); }
.band--blue{ background: var(--blue-bg); color: var(--blue-fg); }

/* Chaotic bodycopy blocks (mirroring reference spans) */
.chaotic span.red{ background: var(--red-bg); color: var(--paper-85); padding:0 .1em; display:inline-block; }
.chaotic span.blue{ background: var(--blue-bg); color: var(--blue-fg); padding:0 .1em; display:inline-block; }
.chaotic span.green{ background: var(--green-bg); color: var(--ink-85); padding:0 .1em; display:inline-block; }
.chaotic span.black{ background: var(--black-bg); color: var(--paper-85); padding:0 .1em; display:inline-block; }
.chaotic span.white{ background: var(--white-bg); color: var(--ink-85); padding:0 .1em; display:inline-block; }
.chaotic span.grey1{ background: var(--grey1-bg); color: var(--ink-85); padding:0 .1em; display:inline-block; }
.chaotic span.greygreen{ background:#8ed8b0; color: var(--ink-85); padding:0 .1em; display:inline-block; }
.chaotic a.white-blue{
  background:#fff; color: var(--ink-85);
  border: .4rem solid var(--whiteblue-border);
  text-decoration: none; padding:0 .2em; display:inline-block;
}

/* Stripes before/after sections */
.stripe{ height: 20px; margin: 1.2rem 0; }
.stripe--blue{ background: var(--blue-bg); }
.stripe--red{ background: var(--red-bg); }
.stripe--green{ background: var(--green-bg); }
.stripe--yellow{ background: var(--yellow-bg); }

/* Three.js area */
.three-wrap{
  margin-top: 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 0;
  overflow: hidden;
}
#ontographyCanvas{ display:block; width:100%; height: min(54vh, 520px); }

/* ===== Ontography split layout ===== */
.onto-split{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left text / right canvas, equal halves */
  gap: var(--gutter);
  align-items: start;
}
.onto-split .title {
  font-family: 'Libre Barcode 39 Text';
  font-size: 4.5rem;
  letter-spacing: 0.05em;
}

.onto-left{
  min-width: 0; /* prevent overflow */
}

.onto-right{
  min-width: 0;
  display: flex;
  justify-content: flex-end; /* push canvas group to the right edge */
}

/* Half-width canvas container */
.three-wrap--half{
  width: 100%;
  max-width: 680px;               /* keeps it around half the section on large screens */
}

/* Adjust canvas height a touch for this split */
.three-wrap--half #ontographyCanvas{
  width: 100%;
  height: min(48vh, 460px);
  display: block;
}

/* Stack on small screens */
@media (max-width: 900px){
  .onto-split{
    grid-template-columns: 1fr;   /* stack */
    gap: calc(var(--gutter) * 0.66);
  }
  .onto-right{ justify-content: flex-start; }
  .three-wrap--half{ max-width: none; }
}


/* Captions */
.caption{ font-size: 1.4rem; color: var(--ink-60); padding: .8rem .9rem; }
.caption--invert{ color: rgba(255,255,255,0.85); }

/* Media grid (~1/3 page) */
.media-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.4vw, 16px);
  align-items:start;
}
.media-grid--varied{ grid-template-columns: repeat(3, 1fr); }
.media-grid a{ text-decoration:none; }
img.ph{
  width:100%; height:auto;
  aspect-ratio:4/3;
  background:#fff; /* plain white */
  display:block;
  border:1px solid rgba(0,0,0,0.12);
}
img.ph.ph--tall{ aspect-ratio:3/4; }
img.ph.ph--wide{ aspect-ratio:16/9; }

/* NEW: single-image section that fills left cleanly */
.media-single{ width:100%; margin: 0; }
.media-single img{ width:100%; height:auto; display:block; }

/* Avoid left content pushing into right */
.left img,
.left canvas,
.left video{ max-width:100%; height:auto; display:block; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center;
  z-index:9999;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:92vh; background:#fff; }
.lightbox__close{
  position:absolute; top:14px; right:16px;
  font-size:3.2rem; line-height:1;
  background: rgba(255,255,255,0.15);
  color:#fff; border:none; border-radius:50%;
  width:44px; height:44px; cursor:pointer;
}

/* Bigger, stronger blinking pop-up ad (fade out then reappear) */
@keyframes blinkFade {
  0%   { opacity: 1; transform: translateY(0); }
  45%  { opacity: 0; transform: translateY(2px); }
  55%  { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.popup-ad{
  position: fixed;
  right: 6px;
  bottom: 2px;
  z-index: 10000;
  background: var(--red-bg);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border-radius: 0px;
  overflow: hidden;
  animation: blinkFade 1.25s ease-in-out infinite;
}
.popup-ad__inner{
  padding: 18px 22px;
  min-width: 280px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Diatype Variable", -apple-system,BlinkMacSystemFont,"Inter",sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  text-transform: lowercase;
}

/* Lists */
ul{ margin:.6em 0; padding:0 0 0 2em; }
li{ margin:.15em 0; }

/* Responsive */
@media (max-width: 1080px){
  .frame{ grid-template-columns: 1fr; }
  .right{ min-height: 18svh; }
  .page-content{ padding: calc(var(--gutter) * .66); }
  .media-grid, .media-grid--varied{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .media-grid, .media-grid--varied{ grid-template-columns: 1fr; }
  .popup-ad__inner{ min-width: 220px; min-height: 72px; font-size: 2.2rem; }
}

/* ===== Alternating two-column sections for alt-page ===== */
.alt-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.2vw, 28px);
  align-items: start;
  padding: 1.2rem 0;
}
.alt-row .col{text-align: inherit;}
.alt-row .text{ order: 1; }
.alt-row .media{ order: 2; }

.alt-row--reverse .text{ order: 2; }
.alt-row--reverse .media{ order: 1; }

.alt-row .media a{ text-decoration: none; display: block; }
.alt-row .media .ph{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
}

/* Keep it legible on mobile */
@media (max-width: 900px){
  .alt-row{ grid-template-columns: 1fr; }
  .alt-row .text, .alt-row .media{ order: unset; }
}

/* Similar Artworks list */
.artlist { list-style: none; margin: .6rem 0 0; padding: 0; font-size: 2rem;}
.artlist li { margin: .25rem 0; }

/* Slideshow shell (keeps ~1/3-page look) */
.slideshow{
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  overflow: hidden;
  border-radius: 0;
}
.ss-viewport{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ss-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
  background: #fff;
  cursor: zoom-in;
}
.ss-slide.is-active{ opacity: 1; }

/* Arrows */
.ss-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}
.ss-prev{ left: 10px; }
.ss-next{ right: 10px; }
.ss-nav:active{ opacity: .7; }

.media-grid--varied {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(10px, 2vw, 20px);
  align-items: start;
}

.media-grid--varied a:nth-child(1) img { aspect-ratio: 16 / 9; }
.media-grid--varied a:nth-child(2) img { aspect-ratio: 3 / 4; }
.media-grid--varied a:nth-child(3) img { aspect-ratio: 1 / 1; }


/* ===== UML diagram full-width display ===== */
.uml-large {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 2rem 0;
}

.uml-large a {
  display: block;
  width: 100%;
  max-width: 96%;
  text-decoration: none;
}

.uml-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}

/* Keep it responsive */
@media (max-width: 1080px) {
  .uml-img {
    max-width: 100%;
    aspect-ratio: auto;
  }
}

/* ======================================================
   FINAL PROJECT PAGE ADDITIONS
   (Cyberpunk / Glitch / Dystopian Styling)
   ====================================================== */

/* 1. Themed Separators */
.stripe--glitch {
  background: repeating-linear-gradient(
    45deg,
    var(--black-bg),
    var(--black-bg) 10px,
    var(--grey1-bg) 10px,
    var(--grey1-bg) 20px
  );
  height: 24px;
  border-bottom: 2px solid var(--red-bg);
}

/* 2. Terminal Text Box (Section 1) */
.terminal-box {
  background: var(--ink-85);
  border: 2px solid var(--blue-bg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 4px 4px 0px var(--grey1-bg);
}

.terminal-header {
  font-family: "Courier New", Courier, monospace;
  color: var(--red-bg);
  font-weight: bold;
  font-size: 1.4rem;
  border-bottom: 1px solid #444;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

/* 3. Glitch Image Containers */
.glitch-img-container {
  position: relative;
}
.glitch-img-container::after {
  content: "+";
  position: absolute;
  top: -5px;
  left: -5px;
  color: var(--blue-bg);
  font-weight: bold;
  font-size: 2rem;
}
.glitch-img-container::before {
  content: "+";
  position: absolute;
  bottom: -5px;
  right: -5px;
  color: var(--blue-bg);
  font-weight: bold;
  font-size: 2rem;
}

/* 4. 3D Viewer & Video Grid (Section 4) */
/* --- FIXED LAYOUT: 50/50 Split --- */
    .media-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        gap: 30px;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        align-items: center; /* Vertically align them */
        z-index: 2;
        position: relative;
    }

    /* Stack them on mobile */
    @media (max-width: 900px) {
        .media-container {
            grid-template-columns: 1fr;
        }
    }

    /* --- The Video Container --- */
    .video-frame {
        position: relative;
        width: 100%;
        /* IMPORTANT: No fixed height here, let the Vimeo embed handle it */
        border: 1px solid #333;
        background: #000;
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
    }

    /* --- The 3D Model Container --- */
    .model-frame {
        position: relative;
        width: 100%;
        /* FORCE 16:9 Aspect Ratio to match the Video */
        aspect-ratio: 16 / 9; 
        border: 1px solid #333;
        background: #000;
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
        overflow: hidden;
    }

/* Scanline effect overlay */
.scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0.2)
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 2;
}

.viewer-ui-top, .viewer-ui-bottom {
  position: absolute;
  left: 0; right: 0;
  padding: 8px;
  font-family: monospace;
  font-size: 1.2rem;
  color: var(--green-bg);
  display: flex;
  justify-content: space-between;
  z-index: 3;
  background: rgba(0,0,0,0.6);
}
.viewer-ui-top { top: 0; border-bottom: 1px solid var(--green-bg); }
.viewer-ui-bottom { bottom: 0; border-top: 1px solid var(--green-bg); }

.viewer-placeholder-content {
  text-align: center;
  color: #fff;
  font-family: monospace;
  z-index: 1;
}

.blink { animation: blinkAnim 1s infinite; }
@keyframes blinkAnim {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Video Placeholder */
.video-embed-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: #222;
  border: 1px solid var(--grey1-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: monospace;
  cursor: pointer;
  transition: background 0.2s;
}
.video-embed-placeholder:hover { background: #333; }
.play-icon { font-size: 4rem; margin-bottom: 1rem; }

/* 5. Long Graphic (Section 5) */
.long-graphic-container {
  width: 100%;
  border: 1px solid #000;
  padding: 4px;
  background: #fff;
}
.long-graphic-inner {
  width: 100%;
  height: 60vh; /* Arbitrary tall height for placeholder */
  background: repeating-linear-gradient(
    0deg,
    #ddd,
    #ddd 1px,
    #fff 1px,
    #fff 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-family: monospace;
  font-size: 2rem;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* 6. Warning Popup Variant */
.warning-popup {
  background: var(--black-bg) !important;
  border: 2px solid var(--yellow-bg);
  bottom: 20px;
}
.warning-popup .popup-ad__inner {
  color: var(--yellow-bg);
  font-family: monospace;
  text-transform: uppercase;
  font-size: 2rem;
}

/* ======================================================
   FINAL PAGE UPDATES (Visceral / Glitch / Backgrounds)
   ====================================================== */

/* --- 1. Non-Uniform Backgrounds --- */

/* Utility container to apply backgrounds while keeping padding */
.section-wrapper {
  padding: 2rem;
  margin: 1rem -2rem; /* Bleed out to edge of left column */
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Texture 1: Scanline Grey (Subtle) */
.bg-scanline {
  background-color: #dcdcdc;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* Texture 2: Dark Grid (Trace) */
.bg-dark-grid {
  background-color: #b0b0b0;
  background-image: 
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Texture 3: Red Alert (Crisis) */
.bg-red-alert {
  background-color: #dcdcdc;
  background: radial-gradient(circle at center, #e0e0e0 0%, #d6a2a2 100%);
  border-left: 5px solid var(--red-bg);
}

/* Texture 4: Terminal Green (Prototype) */
.bg-terminal-green {
  background-color: #111;
  color: #0f0; /* Force text green inside unless overridden */
  border: 1px solid #0f0;
}
/* Override chaotic spans inside the dark terminal section for readability */
.bg-terminal-green .chaotic span.black { background: #0f0; color: #000; }
.bg-terminal-green .chaotic span.white { background: #222; color: #0f0; border: 1px solid #0f0; }

/* Texture 5: Static Noise (Manifestations) */
.bg-static {
  background-color: #e5e5e5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
}

/* Texture 6: Void (Errors) */
.bg-void {
  background-color: #000;
  color: #ccc;
  border: 1px solid var(--red-bg);
}

/* --- 2. Floating Bouncing GIF (DVD Logic) --- */
#bouncing-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 140px;
  height: 80px;
  z-index: 999;
  pointer-events: none; /* Let clicks pass through */
  mix-blend-mode: exclusion; /* Cool effect over text */
  will-change: transform;
}



/* --- 3. Glitch Text Effects --- */
.glitch-text {
  position: relative;
  display: inline-block;
}

/* Creates the duplicate layers for the glitch */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--page-grey); /* Match background to hide original briefly */
}

/* Layer 1: Red shift */
.glitch-text::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip-path: inset(44% 0 61% 0);
  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

/* Layer 2: Blue shift */
.glitch-text::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip-path: inset(50% 0 30% 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* Glitch Keyframes */
@keyframes glitch-anim-1 {
  0% { clip-path: inset(20% 0 80% 0); }
  20% { clip-path: inset(60% 0 10% 0); }
  40% { clip-path: inset(40% 0 50% 0); }
  60% { clip-path: inset(80% 0 5% 0); }
  80% { clip-path: inset(10% 0 70% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}
@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 60% 0); }
  20% { clip-path: inset(30% 0 10% 0); }
  40% { clip-path: inset(80% 0 5% 0); }
  60% { clip-path: inset(15% 0 80% 0); }
  80% { clip-path: inset(60% 0 30% 0); }
  100% { clip-path: inset(40% 0 20% 0); }
}

/* --- 4. ASCII Art Styling --- */
.ascii-art {
  font-family: 'VT323', monospace;
  white-space: pre;
  overflow: hidden;
  line-height: 1;
  color: #333;
  font-size: 1.4rem;
  margin: 1rem 0;
  opacity: 0.8;
}

.ascii-top {
  font-size: 1.2rem;
  color: var(--blue-bg);
  margin-bottom: 2rem;
  font-weight: bold;
}

.ascii-divider {
  color: var(--ink-60);
  text-align: center;
}

/* Dark Bizarre Vibe overrides for ASCII */
.bg-void .ascii-art { color: var(--red-bg); }
.bg-terminal-green .ascii-art { color: #0f0; }

/* ======================================================
   TEXT FX: CRT FLICKER & INLINE GLITCH
   ====================================================== */

/* 1. NEW: The "CRT Flicker" Effect
   Simulates a dying backlight or bad cable connection.
   Use class="flicker-text" on spans. */
.flicker-text {
  animation: crt-flicker 0.15s infinite;
  display: inline-block; /* Helps rendering */
}

@keyframes crt-flicker {
  0% { opacity: 1; transform: skewX(0deg); }
  25% { opacity: 0.8; }
  50% { opacity: 0.95; transform: skewX(1deg); }
  75% { opacity: 0.5; } /* Sudden dim */
  80% { opacity: 1; }
  90% { opacity: 0.2; transform: skewX(-1deg); } /* Hard flicker */
  100% { opacity: 1; }
}

/* 2. UPDATED: Inline Glitch Word
   Adapted from the previous header glitch to work inline.
   Requires data-text="WORD" in HTML. */
.glitch-word {
  position: relative;
  display: inline-block;
}

.glitch-word::before,
.glitch-word::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--page-grey); /* Hides the original text briefly */
  opacity: 0.8;
}

/* Specific background fixes for colored sections to ensure the glitch mask matches */
.bg-void .glitch-word::before, .bg-void .glitch-word::after { background: #000; }
.bg-scanline .glitch-word::before, .bg-scanline .glitch-word::after { background: #dcdcdc; }

.glitch-word::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip-path: inset(44% 0 61% 0);
  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

.glitch-word::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip-path: inset(50% 0 30% 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* Existing Glitch Keyframes (ensure these are present) */
@keyframes glitch-anim-1 {
  0% { clip-path: inset(20% 0 80% 0); }
  20% { clip-path: inset(60% 0 10% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}
@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 60% 0); }
  20% { clip-path: inset(30% 0 10% 0); }
  100% { clip-path: inset(40% 0 20% 0); }
}

/* --- Section Five Setup --- */
.cyber-glitch-section {
    position: relative;
    min-height: 100vh; /* Takes up full screen height */
    background-color: #2b00ff;
    overflow: hidden; /* Prevents images from spilling out */
    padding-top: 60px;
}

/* --- The Scattered Thumbnails --- */
.glitch-container {
    position: relative;
    width: 100%;
    height: 80vh;
}

.glitch-thumb {
    position: absolute;
    border: 1px solid #333;
    opacity: 0.7;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.1);
    filter: grayscale(100%) contrast(1.2);
}

.glitch-thumb:hover {
    z-index: 100 !important; /* Bring to front on hover */
    opacity: 1;
    border-color: #00ff41; /* Matrix Green */
    box-shadow: 0 0 15px #00ff41;
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* --- The Lightbox (Overlay) --- */
.cyber-lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 9, 131, 0.95);
    z-index: 9999;
    backdrop-filter: blur(5px);
    overflow-y: auto; /* Allows scrolling if image is long */
    animation: fadeIn 0.3s forwards;
}

.lightbox-content {
    position: relative;
    max-width: 800px; /* Limits width for readability */
    margin: 40px auto;
    border: 1px solid #00ff41;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.2);
    background: #000;
}

.lightbox-header {
    background: #00ff41;
    color: #000;
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
}

.close-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    color: #000;
}

.close-btn:hover {
    text-decoration: underline;
}

.lightbox-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.blinking-cursor {
    animation: blink 1s infinite;
    color: #00ff41;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* --- Section 6: Context Styling --- */

/* The Text Block - INCREASED SIZE */
.system-manifesto {
    font-family: 'Share Tech Mono', monospace; 
    font-size: 1.2rem; /* Increased from 0.9rem for readability */
    line-height: 1.6;  /* More spacing between lines */
    color: #a0a0a0;    /* Light grey for better contrast against dark */
    text-align: left; 
    background: rgba(10, 10, 10, 0.8); /* Darker background for readability */
    border-left: 4px solid #ff003c; /* Thicker accent line */
    padding: 30px; /* More padding */
    margin-top: 25px;
    max-width: 650px;
    margin-left: auto; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.sys-cmd {
    color: #00ff41; 
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
}

.sys-comment {
    color: #555;
    font-style: italic;
}

/* Text Highlights */
.highlight-red { color: #ff003c; font-weight: bold; }
.highlight-blue { color: #00d2ff; font-weight: bold; }
.highlight-white { color: #fff; text-decoration: underline; text-decoration-color: #ff003c; }


/* --- The Face Image Styling --- */
.face-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensures image isn't too small */
    overflow: hidden;
    border: 1px solid #333;
}

.cyber-face-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the face fills the box without stretching */
    filter: grayscale(100%) contrast(1.2) brightness(0.9); /* Cyber noir look */
    transition: filter 0.5s ease;
}

/* Hover Effect: Bring color back slightly */
.face-wrapper:hover .cyber-face-img {
    filter: grayscale(50%) contrast(1.1) brightness(1);
}

/* Scanline Overlay on top of the face */
.face-scanline {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0.3)
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
}