/* ============================================================
   NORMA.EXE — ILLEGAL THREAD TECHNOLOGY
   ------------------------------------------------------------
   A deliberate act of vandalism against a perfectly nice
   gallery website. Every class name matches the original
   stylesheet so the HTML never had to change — only the
   presentation is on fire.

   Flash discipline: nothing in here strobes. All pulses run on
   2s+ cycles with shallow opacity dips. Loud, not seizure-y.
   ============================================================ */

:root {
  --void:        #05010a;
  --void-2:      #0d0318;
  --magenta:     #ff2bd6;
  --cyan:        #00f0ff;
  --acid:        #b6ff00;
  --hazard:      #ffe600;
  --blood:       #ff3c00;
  --chrome:      #e8e0ff;

  --display: "Monoton", "Impact", fantasy;
  --techno:  "Chakra Petch", "Arial Black", sans-serif;
  --term:    "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

::selection { background: var(--magenta); color: #000; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--techno);
  font-size: 18px;
  line-height: 1.65;
  color: var(--chrome);
  background: var(--void);
  overflow-x: hidden;
  position: relative;
}

/* ---------- The living background ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(45% 40% at 15% 20%, rgba(255,43,214,.40), transparent 60%),
    radial-gradient(40% 45% at 85% 25%, rgba(0,240,255,.34), transparent 60%),
    radial-gradient(50% 40% at 50% 90%, rgba(182,255,0,.20), transparent 60%),
    var(--void);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)   scale(1.05); }
  50%  { transform: translate3d( 3%,  2%, 0) rotate(4deg)   scale(1.15); }
  100% { transform: translate3d(-2%,  3%, 0) rotate(-3deg)  scale(1.08); }
}

/* Grid floor, because of course there is one */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,240,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,43,214,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(transparent 0%, #000 45%, #000 100%);
}

/* ---------- CRT overlay ---------- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px,
    transparent 1px, transparent 3px
  );
  animation: roll 9s linear infinite, breathe 5s ease-in-out infinite;
}
@keyframes roll   { to { background-position-y: 300px; } }
@keyframes breathe { 0%,100% { opacity: .85; } 50% { opacity: .62; } }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.72) 100%);
}

/* ---------- Marquee bars ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  background: var(--magenta);
  color: #12000e;
  font-family: var(--techno);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding: 7px 0;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 0 22px rgba(255,43,214,.85);
}
.ticker--alt { background: var(--acid); color: #0a1200; box-shadow: 0 0 22px rgba(182,255,0,.7); }
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: slide 22s linear infinite;
}
.ticker--alt span { animation-duration: 28s; animation-direction: reverse; }
@keyframes slide { to { transform: translateX(-100%); } }

/* ---------- Header ---------- */
.site-header {
  text-align: center;
  padding: 40px 16px 26px;
  position: relative;
}

.brand {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.brand a {
  color: var(--cyan);
  text-decoration: none;
  text-shadow:
    0 0 6px var(--cyan),
    0 0 22px var(--cyan),
    0 0 48px rgba(0,240,255,.8),
    0 0 90px rgba(0,240,255,.45);
  animation: tube 4.5s ease-in-out infinite;
  display: inline-block;
}
/* Slow neon-tube throb. Deliberately NOT a strobe. */
@keyframes tube {
  0%, 100% { opacity: 1; }
  48%      { opacity: .82; }
  52%      { opacity: .95; }
}

/* Glitch: RGB split ghosts sitting behind the real text */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before { color: var(--magenta); animation: shiftA 3.4s steps(2, end) infinite; }
.glitch::after  { color: var(--acid);    animation: shiftB 4.1s steps(2, end) infinite; }
@keyframes shiftA {
  0%, 92%, 100% { transform: translate(0,0);   opacity: 0; }
  93%           { transform: translate(-4px,2px); opacity: .85; }
  96%           { transform: translate(3px,-2px); opacity: .7; }
}
@keyframes shiftB {
  0%, 88%, 100% { transform: translate(0,0);   opacity: 0; }
  90%           { transform: translate(5px,1px); opacity: .7; }
  94%           { transform: translate(-3px,-2px); opacity: .55; }
}

.tagline {
  font-family: var(--term);
  font-size: 1.5rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--acid);
  margin: 14px 0 0;
  text-shadow: 0 0 12px rgba(182,255,0,.9);
}

/* ---------- Nav: terminal brackets ---------- */
.main-nav {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.main-nav a {
  font-family: var(--term);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--cyan);
  text-decoration: none;
  padding: 4px 14px;
  border: 2px solid transparent;
  transition: none;
}
.main-nav a::before { content: "["; color: var(--magenta); margin-right: 6px; }
.main-nav a::after  { content: "]"; color: var(--magenta); margin-left: 6px; }
.main-nav a:hover {
  color: #000;
  background: var(--hazard);
  border-color: var(--blood);
  text-shadow: none;
  animation: jitter .18s steps(2, end) infinite;
}
.main-nav a:hover::before, .main-nav a:hover::after { color: #000; }
@keyframes jitter {
  0%   { transform: translate(0,0)    skewX(0deg); }
  50%  { transform: translate(-2px,1px) skewX(-6deg); }
  100% { transform: translate(2px,-1px) skewX(5deg); }
}
.main-nav a.active {
  color: #000;
  background: var(--magenta);
  box-shadow: 0 0 18px var(--magenta);
}
.main-nav a.active::before, .main-nav a.active::after { color: #000; }

/* ---------- Layout ---------- */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 20px 70px;
  position: relative;
}

.page-head { text-align: center; margin: 20px 0 8px; }
.page-head h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 4.2rem);
  font-weight: 400;
  color: var(--hazard);
  margin: 0;
  text-shadow: 0 0 8px var(--hazard), 0 0 34px rgba(255,230,0,.75);
  transform: rotate(-1.4deg);
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; }

.ornament {
  height: 8px;
  margin: 18px auto 0;
  max-width: 340px;
  background: repeating-linear-gradient(
    45deg,
    var(--hazard) 0 14px,
    #000 14px 28px
  );
  border: 2px solid var(--blood);
  box-shadow: 0 0 20px rgba(255,60,0,.8);
}

.lead {
  font-family: var(--term);
  font-size: 1.45rem;
  text-align: center;
  color: var(--cyan);
  letter-spacing: .06em;
  margin: 22px auto;
  max-width: 780px;
  text-shadow: 0 0 10px rgba(0,240,255,.7);
}
.lead::before { content: "> "; color: var(--acid); }
.lead::after  { content: " _"; color: var(--acid); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ---------- Prose ---------- */
.prose {
  max-width: 780px;
  margin: 0 auto;
  background: rgba(5,1,10,.78);
  border: 2px solid var(--magenta);
  box-shadow: 0 0 26px rgba(255,43,214,.55), inset 0 0 40px rgba(255,43,214,.14);
  padding: 30px 34px;
  transform: rotate(.5deg);
}
.prose p { margin: 0 0 1.2em; }
.prose h2 {
  color: var(--acid);
  font-size: 1.9rem;
  margin: 1.4em 0 .4em;
  text-shadow: 0 0 14px rgba(182,255,0,.8);
}
a { color: var(--hazard); text-decoration: underline wavy var(--magenta); }
a:hover { color: #000; background: var(--acid); }

/* ---------- Filters ---------- */
.filters {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 12px; margin: 30px 0 14px;
}
.filter-btn {
  font-family: var(--techno);
  font-weight: 700;
  background: #000;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 22px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .8rem;
  cursor: crosshair;
  box-shadow: 0 0 14px rgba(0,240,255,.5);
}
.filter-btn:hover {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 30px var(--cyan);
  transform: scale(1.08) rotate(-2deg);
}
.filter-btn.active {
  background: var(--magenta);
  border-color: var(--hazard);
  color: #000;
  box-shadow: 0 0 30px var(--magenta);
  animation: tube 3s ease-in-out infinite;
}

/* ---------- The gallery ---------- */
.gallery {
  columns: 3 300px;
  column-gap: 26px;
  margin: 34px 0 10px;
}

.piece {
  break-inside: avoid;
  margin: 0 0 30px;
  padding: 12px;
  position: relative;
  background: #000;
  cursor: crosshair;
  border: 2px solid transparent;
  /* Animated conic neon frame around her very delicate embroidery */
  background-image:
    linear-gradient(#000, #000),
    conic-gradient(from var(--spin, 0deg),
      var(--magenta), var(--cyan), var(--acid), var(--hazard), var(--magenta));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 26px rgba(255,43,214,.45);
  animation: spin 6s linear infinite;
}
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }

.piece:hover {
  transform: scale(1.05) rotate(-2.2deg);
  box-shadow: 0 0 46px var(--cyan), 0 0 90px rgba(255,43,214,.6);
  z-index: 5;
}
.piece img {
  width: 100%;
  display: block;
  filter: saturate(1.55) contrast(1.12);
}
.piece:hover img { filter: saturate(2.2) contrast(1.25) hue-rotate(12deg); }

.piece figcaption { text-align: center; padding: 14px 6px 8px; }
.piece .title {
  font-family: var(--display);
  font-size: 1.32rem;
  color: var(--hazard);
  text-shadow: 0 0 12px rgba(255,230,0,.85);
  line-height: 1.3;
}
.piece .meta {
  font-family: var(--term);
  color: var(--acid);
  font-size: 1.1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 6px;
}
.piece.static { cursor: default; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  border-bottom: 4px solid var(--magenta);
  box-shadow: 0 0 40px rgba(255,43,214,.7);
  overflow: hidden;
}
.hero-img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  display: block;
  filter: saturate(1.7) contrast(1.15) hue-rotate(-8deg);
  animation: hue 14s linear infinite;
}
@keyframes hue {
  0%, 100% { filter: saturate(1.7) contrast(1.15) hue-rotate(-8deg); }
  50%      { filter: saturate(2.1) contrast(1.25) hue-rotate(18deg); }
}
/* Neon wash over her gentle bluebell wood */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,43,214,.34), transparent 42%, rgba(0,240,255,.34));
  mix-blend-mode: screen;
}
.hero-caption {
  text-align: center;
  padding: 34px 24px 6px;
}
.hero-caption h1 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--magenta);
  text-shadow: 0 0 10px var(--magenta), 0 0 38px rgba(255,43,214,.8);
}
.hero-caption p {
  font-family: var(--term);
  color: var(--cyan);
  font-size: 1.45rem;
  letter-spacing: .08em;
  margin: 0;
  text-shadow: 0 0 12px rgba(0,240,255,.75);
}

/* ---------- Featured strip ---------- */
.featured { margin: 54px 0 10px; text-align: center; }
.featured h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--acid);
  text-shadow: 0 0 10px var(--acid), 0 0 34px rgba(182,255,0,.7);
  transform: rotate(1.2deg);
  margin: 0 0 6px;
}
.featured .gallery { columns: 3 260px; text-align: left; }

/* ---------- Contact card ---------- */
.contact-card {
  max-width: 620px;
  margin: 34px auto;
  text-align: center;
  background: rgba(0,0,0,.82);
  border: 3px solid var(--cyan);
  padding: 44px 32px;
  box-shadow: 0 0 34px rgba(0,240,255,.65), inset 0 0 50px rgba(0,240,255,.12);
  transform: rotate(-.7deg);
}
.contact-card .email {
  font-family: var(--term);
  font-size: 1.9rem;
  margin: 18px 0;
  color: var(--hazard);
  letter-spacing: .06em;
  text-shadow: 0 0 16px rgba(255,230,0,.85);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  margin-top: 26px;
  padding: 16px 40px;
  font-family: var(--techno);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: #000;
  text-decoration: none;
  border: 3px solid #000;
  background: repeating-linear-gradient(45deg,
    var(--hazard) 0 16px, var(--blood) 16px 32px);
  box-shadow: 0 0 26px rgba(255,230,0,.8);
  cursor: crosshair;
}
.btn:hover {
  background: repeating-linear-gradient(45deg,
    var(--cyan) 0 16px, var(--magenta) 16px 32px);
  color: #000;
  transform: scale(1.09) rotate(1.6deg);
  box-shadow: 0 0 46px var(--cyan);
  animation: jitter .2s steps(2, end) infinite;
}

/* ---------- HUD ---------- */
.hud {
  font-family: var(--term);
  font-size: 1.15rem;
  color: var(--acid);
  text-align: center;
  letter-spacing: .16em;
  margin: 34px 0 0;
  text-transform: uppercase;
}
.hud b { color: var(--magenta); }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 40px 20px 70px;
  border-top: 3px solid var(--magenta);
  margin-top: 40px;
  font-family: var(--term);
  font-size: 1.2rem;
  color: var(--cyan);
  letter-spacing: .1em;
  background: rgba(0,0,0,.55);
}
.site-footer .ig a { color: var(--hazard); }

/* ---------- Lightbox (built by main.js) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3,0,8,.94);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 88vw; max-height: 76vh;
  border: 4px solid var(--cyan);
  box-shadow: 0 0 60px var(--cyan), 0 0 120px rgba(255,43,214,.6);
  filter: saturate(1.5);
}
.lightbox figcaption {
  font-family: var(--display);
  color: var(--hazard);
  font-size: 1.6rem;
  margin-top: 22px;
  text-align: center;
  text-shadow: 0 0 18px rgba(255,230,0,.85);
}
.lightbox figcaption .meta {
  display: block;
  font-family: var(--term);
  color: var(--acid);
  font-size: 1.15rem;
  letter-spacing: .18em;
  margin-top: 6px;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: #000;
  border: 2px solid var(--magenta);
  color: var(--magenta);
  font-family: var(--techno);
  font-weight: 700;
  font-size: 1.6rem;
  width: 58px; height: 58px;
  cursor: crosshair;
  box-shadow: 0 0 20px rgba(255,43,214,.8);
}
.lb-close { top: 24px; right: 24px; }
.lb-prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
  background: var(--magenta); color: #000; box-shadow: 0 0 40px var(--magenta);
}

/* ---------- Cursor sparks ---------- */
.spark {
  position: fixed;
  width: 7px; height: 7px;
  pointer-events: none;
  z-index: 9996;
  border-radius: 50%;
  animation: die .85s ease-out forwards;
}
@keyframes die {
  from { transform: scale(1.5) translateY(0);   opacity: 1; }
  to   { transform: scale(0)   translateY(26px); opacity: 0; }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--magenta), var(--cyan));
  border: 2px solid #000;
}

/* ---------- Respect the setting, even in a joke ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker span { animation: none; padding-left: 0; }
}

@media (max-width: 640px) {
  .gallery { columns: 1; }
  .tagline { letter-spacing: .22em; font-size: 1.15rem; }
  .prose { padding: 22px 18px; transform: none; }
}