/* =========================
   RESET, FONTS, ROOT, BODY
   ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

@view-transition { navigation: auto; }

@font-face {
  font-family: 'LocalMedieval';
  src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpaceMono';
  src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; }

:root {
  --bg-color: #0b0b0c;
  --card-bg: #141416;
  --text-primary: #f3f4f6;
  --text-muted: #9ca3af;
  --accent: #ffffff;
  --sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --nav-h: 64px;
  --radius-s: 6px;
  --focus: #a179fd;

  /* About + Lightbox tuning */
  --about-max: 550px;
  --viewer-bottom-base: clamp(72px, 14vh, 140px);
  --viewer-safe: env(safe-area-inset-bottom, 0px);
  --viewer-bottom-pad: calc(var(--viewer-bottom-base) + var(--viewer-safe));
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--sans-serif);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--nav-h);
}
body.darker-background { --bg-color: #050505; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('images/lights_out_2012.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

article, img, main, iframe, video, embed,
.main-header, .portfolio-container, .case-study-body, .modal-overlay { position: relative; z-index: 2; }

/* =========================
   NAVIGATION
   ========================= */
.site-nav {
  display: flex; justify-content: space-between; align-items: center;
  position: fixed; top: 0; left: 0;
  width: 100%; min-height: var(--nav-h);
  padding: 0 2rem; box-sizing: border-box; z-index: 9999;
  background: #0b0b0c;
}
.nav-logo {
  font-family: 'SpaceMono','Courier New',monospace; font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #fff; text-decoration: none;
}
.nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: 'SpaceMono','Courier New',monospace; font-size: .85rem; color: var(--muted, #888);
  text-decoration: none; text-transform: uppercase; letter-spacing: .05em; transition: color .2s ease;
}
.nav-links a:hover { color: #fff; }

/* SVG logo */
.nav-logo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; text-decoration: none !important;
  transition: transform .4s cubic-bezier(.25,1,.5,1);
  --cosmic-glow: #432eff;
  --wire-muted: rgba(156, 163, 175, .6);
  --star-muted: #9ca3af;
  --core-muted: #9ca3af;
}
.constellation-wire { stroke: var(--wire-muted); stroke-width: 1.5; fill: none; stroke-linecap: round; transition: stroke .4s ease, opacity .4s ease; }
.star-node { fill: var(--star-muted); stroke: transparent; stroke-width: 0; transform-origin: center; transition: fill .4s ease, stroke .4s ease, filter .4s ease; }
.eye-core { fill: var(--core-muted); stroke: transparent; stroke-width: 0; transform-origin: 50px 52px; transition: fill .4s ease, stroke .4s ease, filter .4s ease; }
.nav-logo-icon:hover, .nav-logo-icon:active { transform: scale(1.08) rotate(5deg); }
.nav-logo-icon:hover .constellation-wire, .nav-logo-icon:active .constellation-wire { stroke: var(--cosmic-glow); opacity: .8; }
.nav-logo-icon:hover .star-node, .nav-logo-icon:active .star-node { fill: #fff; stroke: var(--cosmic-glow); stroke-width: 1.5; filter: drop-shadow(0 0 5px var(--cosmic-glow)); animation: starTwinklePulse 1.5s ease-in-out infinite alternate; }
.nav-logo-icon:hover .star-node:nth-child(2n) { animation-delay: .3s; }
.nav-logo-icon:hover .star-node:nth-child(3n) { animation-delay: .6s; }
.nav-logo-icon:hover .star-node:nth-child(4n) { animation-delay: .9s; }
.nav-logo-icon:hover .eye-core, .nav-logo-icon:active .eye-core { fill: #fff; stroke: var(--cosmic-glow); stroke-width: 2.5; animation: centralCoreBreathing 2s ease-in-out infinite alternate; }
@keyframes starTwinklePulse { 0%{opacity:.4; transform:scale(.85); filter:drop-shadow(0 0 2px var(--cosmic-glow));} 100%{opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 7px var(--cosmic-glow)) drop-shadow(0 0 12px rgba(118,62,250,.4));} }
@keyframes centralCoreBreathing { 0%{transform:scale(.94); filter:drop-shadow(0 0 6px var(--cosmic-glow)) drop-shadow(0 0 12px rgba(118,62,250,.3));} 100%{transform:scale(1.06); filter:drop-shadow(0 0 10px var(--cosmic-glow)) drop-shadow(0 0 24px rgba(118,62,250,.7));} }

/* Mobile menu */
#nav-toggle{ display:none; }
.nav-toggle-label { display:none; cursor:pointer; font-family:'SpaceMono','Courier New',monospace; font-size:.85rem; color:#fff; text-transform:uppercase; user-select:none; padding:.5rem; }

@media (max-width: 768px) {
  .nav-toggle-label { display:block; }
  .nav-links {
    position: absolute; top: 100%; right: 2rem;
    flex-direction: column; align-items: flex-end; gap: 1.2rem;
    background: rgba(15,15,15,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1.5rem 2rem; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  #nav-toggle:checked ~ .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* Hide nav when modal is open */
body:has(.modal-overlay:target) .site-nav { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }

/* =========================
   HEADER
   ========================= */
.main-header {
  padding: clamp(3rem, 6vw, 6rem) 2rem clamp(2rem, 4vw, 4rem) 2rem;
  text-align: center;
  background-color: #0b0b0c;
  position: relative;
  z-index: 100;
}
.main-header a { text-decoration: none; color: var(--text-primary); display:inline-block; cursor:pointer; transition: opacity .2s ease; }
.main-header a:hover { opacity: .75; }
.main-header h1 {
  font-family: 'Figtree','Century Gothic',AppleGothic,sans-serif;
  font-weight: 420;
  font-size: clamp(1.75rem, 6vw, 3.4rem);
  letter-spacing: clamp(0.08em, 1.5vw, 0.3em);
  margin-bottom: .5rem;
  text-transform: uppercase;
  color: #7d45ff;
  line-height: 1.15;
}
.sub-header {
  font-size: clamp(0.7rem, 1.8vw, 0.9rem);
  letter-spacing: clamp(0.15em, 1.5vw, 0.4em);
  color: #e0dede;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Scroll anchoring clears the fixed nav */
section { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* =========================
   MAIN CONTAINERS & SECTIONS
   ========================= */
.portfolio-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
section { margin-top: 1rem; }
.about-section, .section-block, .contact-section { padding: 6rem 4rem; width: 100%; }

.section-block > h2, .contact-section > h2 {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 2.4rem);
  letter-spacing: clamp(0.04em, 0.35vw, 0.1em);
  line-height: 1.25;
  margin-bottom: clamp(1.25rem, 2.5vw, 3rem);
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-weight: 400;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .about-section, .section-block, .contact-section { padding: 4rem 1.5rem; }
}

/* =========================
   DESIGN GRID & CARDS
   ========================= */
.design-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; width: 100%; }

.design-card {
  position: relative; display: block; width: 100%; overflow: hidden; text-decoration: none; color: var(--text-primary);
  background-color: var(--card-bg, #0b0a0e);
  border: 1px solid #4e4e6e;
  border-bottom: 2px solid rgba(255,255,255,.08) !important; /* fixed bad value */
  transition: transform .25s ease-out, box-shadow .25s ease-out, border-bottom-color .25s ease-out;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased; backface-visibility: hidden; will-change: transform;
}
.design-card::before {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%;
  background: linear-gradient(to bottom, rgba(11,10,14,0) 0%, rgba(11,10,14,.6) 50%, rgba(11,10,14,.95) 100%);
  z-index: 1; pointer-events: none;
}
.design-card::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(11,10,14,0) 0%, rgba(11,10,14,.3) 50%, rgba(11,10,14,.55) 100%);
  z-index: 2; pointer-events: none;
}
.design-card .card-title,
.design-card .card-text,
.design-card .read-more-link,
.design-card h2,
.design-card p { position: relative !important; z-index: 3 !important; }
.design-card:hover { transform: translateY(-2px) translateZ(0) rotate(.001deg) !important; box-shadow: 0 15px 35px rgba(0,0,0,.6) !important; border-bottom: 3px solid #a69ac2 !important;}

.design-card-info {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
  background: linear-gradient(to top, rgba(7,7,8,.9) 0%, rgba(7,7,8,.4) 50%, transparent 100%);
  z-index: 5; pointer-events: none; transform: translateZ(0);
}

h2 { font-family: 'LocalMedieval','Times New Roman',Georgia,serif !important; font-weight: 400; letter-spacing: .05em; color: #fff; }
.design-card-info h3 {
  font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.4rem);
  font-weight: 400;
  letter-spacing: clamp(0.02em, 0.3vw, 0.05em);
  text-transform: uppercase;
  color: #ffd499;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.design-card-info p { color: #e0dede; }

.pinned-card { grid-column: 1 / -1; aspect-ratio: 21 / 9; max-height: 80vh; overflow: hidden; border-radius: 6px; position: relative; }
@media (max-width: 1024px) { .pinned-card { aspect-ratio: 16 / 9; max-height: 70vh; } }
@media (max-width: 560px) { .pinned-card { aspect-ratio: 4 / 3; max-height: 65vh; min-height: clamp(220px, 48vh, 360px); } }

/* Media inside cards */
.pinned-video-target,
.pinned-video-fallback,
.design-card-video {
  width: 100% !important; height: 100% !important; display: block;
  object-fit: cover; object-position: center 50%;
  border-radius: inherit;
  filter: brightness(0.8) saturate(1) sepia(0.2) hue-rotate(30deg);
  transition: filter .4s ease-out, transform .6s cubic-bezier(.25,1,.5,1);
}

.design-card img {
  width: 100% !important; height: 100% !important; display: block;
  object-fit: cover; object-position: center 50%;
  border-radius: inherit;
  filter: brightness(0.8) saturate(1) sepia(0.1) hue-rotate(0deg);
  transition: filter .4s ease-out, transform .6s cubic-bezier(.25,1,.5,1);
}

/* Card minimum heights */
.design-card:not(.pinned-card) { min-height: clamp(220px, 28vw, 380px); }
@media (max-width: 900px) { .design-card:not(.pinned-card) { min-height: clamp(220px, 36vw, 420px); } }
@media (max-width: 560px) { .design-card:not(.pinned-card) { min-height: clamp(220px, 34vh, 420px); } }
@media (min-width: 561px) and (max-width: 900px) { .pinned-card { min-height: clamp(260px, 42vh, 480px); } }

@media (hover: hover) and (pointer: fine) {
  .design-card:hover img { filter: brightness(1) saturate(1) sepia(0) hue-rotate(0deg) !important; }
  .design-card:hover .pinned-video-target,
  .design-card:hover .pinned-video-fallback { filter: brightness(1.5) saturate(2) sepia(0) hue-rotate(0deg) !important; }
  .design-card:hover .design-card-video { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .design-card img, .pinned-video-target, .pinned-video-fallback, .design-card-video { transition: none; }
}
@media (max-width: 900px) { .design-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Edge vibrancy ring on hover */
.design-card { --edge-size: 10%; --edge-intensity: 0.14; --edge-soft: 0.10; }
@media (hover: hover) and (pointer: fine) {
  .design-card:hover::after {
    background:
      radial-gradient(circle, rgba(255,255,255,0) calc(100% - var(--edge-size) - 6%), rgba(255,255,255,var(--edge-soft)) 100%),
      radial-gradient(circle, rgba(255,255,255,0) calc(100% - var(--edge-size)), rgba(255,255,255,var(--edge-intensity)) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
  }
}
.pinned-card:hover::after { --edge-size: 12%; --edge-intensity: 0.18; --edge-soft: 0.12; }

/* =========================
   ABOUT SECTION (consolidated)
   ========================= */
.about-section {
  display: grid; grid-template-columns: 1fr 120px 1.2fr; gap: 0;
  align-items: flex-start; padding: 8rem 4rem;
}
.about-text { grid-column: 1; position: sticky; top: 6rem; margin: auto; }
.about-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  max-width: 420px;
  margin-inline: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
  margin-bottom: 2rem;
  color: #ffd499;
}
.about-text p {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 1rem; line-height: 1.7; color: var(--text-muted);
}
.about-text-inner p { padding-bottom: 2em; }

.about-img { grid-column: 3; width: 100%; }
.about-img img { width: 100%; max-width: 550px; height: auto; display: block; transition: var(--transition-smooth); }
.about-img img:hover { filter: grayscale(0%); }

/* Unified stacked/centered behavior <= 1100px */
@media (max-width: 1100px) {
  .about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 6rem 2rem;
  }
  .about-img { order: -1; }
  .about-text,
  .about-img,
  .about-text-inner {
    width: 100%;
    max-width: var(--about-max);
    margin-inline: auto;
  }
  .about-img img { display: block; margin-inline: auto; width: 100%; height: auto; }
  .about-text h2 { font-size: clamp(1.6rem, 4vw, 4rem); max-width: 38ch; }
  .about-text p { font-size: 1.1rem; }
}

@media (max-width: 500px) {
  .about-section { padding: 4rem 1.5rem; }
  .about-text h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}

/* Drop cap */
.editorial-dropcap {
  font-size: 4.2rem; font-weight: 300; float: left; line-height: .85; margin-top: .35rem; margin-right: .75rem; color: var(--text-primary);
}
@media (max-width: 768px) {
  .editorial-dropcap { font-size: 3.5rem; margin-top: .25rem; margin-right: .5rem; }
}

/* =========================
   MODALS, MEDIA, GALLERY (consolidated)
   ========================= */

/* Overlay, content, caption – single source of truth */
.modal-overlay {
  position: fixed; inset: 0;
  height: 100vh; /* fallback */
  background: rgba(4,4,5,.99);
  z-index: 10000; /* above nav */
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.25,1,.5,1);
  touch-action: none;
  overscroll-behavior: contain;
}
.modal-overlay:target { opacity: 1; pointer-events: auto; }

/* Visible viewport units when supported */
@supports (height: 100dvh) {
  .modal-overlay { height: 100dvh; }
}
@supports (height: 100svh) {
  .modal-overlay { height: 100svh; }
}
@supports (height: 100lvh) {
  .modal-overlay { min-height: 100lvh; }
}

.modal-content.modal-scrollable {
  position: absolute; inset: 0;
  padding: 6rem 0 4rem 0;
  overflow-y: auto; overflow-x: hidden;
  background-color: var(--bg-color);
  -webkit-overflow-scrolling: touch;
  z-index: 10002;
}
.modal-content.modal-fullscreen {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: center;
  background: transparent; z-index: 10002;
  padding-bottom: var(--viewer-bottom-pad); /* lift content for caption/bars */
}

.image-close-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; cursor: default; }
.modal-fullscreen .image-close-wrapper img {
  max-width: 100vw; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  padding: 2rem 2rem var(--viewer-bottom-pad) 2rem; /* leave bottom room */
}

.caption-overlay {
  position: absolute; left: 0; right: 0;
  bottom: var(--viewer-bottom-pad);
  padding: 2.5rem 2rem 1.5rem 2rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95) 50%);
  pointer-events: none;
  z-index: 10003;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.caption-overlay h3 {
  font-family: var(--sans-serif); font-size: 1.4rem; font-weight: 400; letter-spacing: .02em; color: #fff;
  margin-bottom: .75rem; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.caption-overlay p { text-align: center; font-size: .85rem; color: var(--text-muted); line-height: 1.4; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.caption-overlay h3, .caption-overlay p { max-width: 60ch; margin-left: auto; margin-right: auto; }
@media (max-width: 420px) {
  .caption-overlay { padding: 2rem 1.25rem 1.25rem; }
  .caption-overlay h3, .caption-overlay p { max-width: 48ch; }
}

/* Click-to-close layer on top */
.close-overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; z-index: 10005; }

/* While a modal is open */
body:has(.modal-overlay:target) {
  overflow: hidden;
  background-color: #000 !important;
}
body:has(.modal-overlay:target)::before { display: none !important; }
body:has(.modal-overlay:target) .site-nav { opacity: 0; visibility: hidden; pointer-events: none; }




/* Gallery grid (masonry columns) */
.gallery-compact-grid { column-count: 3; column-gap: 1.5rem; width: 100%; }
.gallery-card {
  display: inline-block; width: 100%; margin-bottom: 1.5rem;
  background-color: transparent; overflow: hidden; border-radius: var(--radius-s);
  break-inside: avoid; /* stability fix */
}
.gallery-card img {
  width: 100%; height: auto; display: block;
  filter: grayscale(55%) opacity(.8);
  transition: filter .5s cubic-bezier(.25,1,.5,1), transform .5s cubic-bezier(.25,1,.5,1);
  border-radius: inherit;
}
.gallery-card:hover img { filter: grayscale(0%) opacity(1); transform: scale(1.02); }

@media (max-width: 900px) { .gallery-compact-grid { column-count: 2; column-gap: 1rem; } .gallery-card { margin-bottom: 1rem; } }
@media (max-width: 400px) { .gallery-compact-grid { column-count: 1; column-gap: .75rem; } .gallery-card { margin-bottom: .75rem; } }

/* Full-bleed breakout for embedded video */
.main-video-breakout {
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 0;
}

/* Standard responsive iframe wrapper */
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background-color: #000; }
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Native inline article video */
.article-native-video {
  display: block; width: 100% !important; max-width: 100% !important; height: auto !important;
  aspect-ratio: 16 / 9; box-sizing: border-box; margin: 3rem auto; border: none; border-radius: 4px; background: #000;
}
iframe.article-native-video[width]  { width: 100% !important; }
iframe.article-native-video[height] { height: auto !important; }

/* =========================
   WRITING / NEWS / ARTICLES
   ========================= */
.text-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; }
.text-snippet-card {
  display: block; text-decoration: none; color: inherit; padding: 2.5rem;
  background-color: var(--card-bg); border: 1px solid #4e4e6e; border-left: 3px solid #4e4e6e; transition: var(--transition-smooth);
  border-radius: var(--radius-s);
}
.text-snippet-card:hover { border-left-color: #fff !important; border-left-color: #a69ac2 !important; box-shadow: 0 15px 35px rgba(0,0,0,.6); transform: translateY(-2px); }
.read-more-link { display: inline-block; margin-top: 1.25rem; color: #888; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.text-snippet-card:hover .read-more-link { color: #fff !important; text-shadow: 0 0 10px rgba(118,62,250,.4); }

.latest-news-box {
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05);
  position: static; isolation: isolate;
}
.latest-news-title {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted, #afaeac); margin-bottom: 1.5rem; font-weight: 600;
}
.news-log-list { display: flex; flex-direction: column; gap: .6rem; margin:auto; }
.news-item {
  display: flex; align-items: flex-start; gap: 1.5rem;
  font-family: 'SpaceMono','Courier New',Courier,monospace; font-size: .9rem; line-height: 1.4;
  border-radius: 4px; border-left: 2px solid transparent; padding: 1em 0; transform: translateX(0);
  will-change: background-color, border-color, transform;
  transition: background-color .2s cubic-bezier(.25,1,.5,1), border-color .2s cubic-bezier(.25,1,.5,1), transform .2s cubic-bezier(.25,1,.5,1);
}
.news-item:hover { background-color: rgba(255,255,255,.03); border-color: rgba(255,255,255,.3); transform: translateX(3px); }
.news-item:hover .news-text { color: #fff; font-size: 1.1em; }
.news-date { color: var(--muted, #a7a6a6); flex-shrink: 0; white-space: nowrap; user-select: none; border-top: 2px solid #666; }
.news-text { color: var(--text, #ccc); }
.news-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.news-text a:hover { background: rgba(255,255,255,.1); }
.news-content-wrap { display: flex; align-items: flex-start; gap: .8rem; flex-grow: 1; }
.news-thumb { width: 6rem; height: 6rem; object-fit: cover; flex-shrink: 0; margin-top: .1rem; border-radius: 2px; border: 1px solid rgba(255,255,255,.2); filter: grayscale(30%); transition: filter .2s ease, border-color .2s ease, transform .2s ease; }
.news-item:hover .news-thumb { transform: scale(1.05); }

@media (max-width: 480px) {
  .news-item { flex-direction: column; gap: .1rem; margin-bottom: .4rem; }
}

/* Typography for long-form */
.design-modal-meta h2, article h1 {
  font-family: 'LocalMedieval','Times New Roman',Georgia,serif !important;
  font-size: 2.5rem; font-weight: 300; text-transform: uppercase; color: var(--text-primary);
  margin: 4rem 0; line-height: 1.3; letter-spacing: .02em; text-align: center;
}
article h3 { margin-top: 4rem; font-family: 'Segoe UI', Georgia, serif !important; }
.caption-overlay h3, .text-snippet-card h3, .music-desc h3 {
  font-family: var(--sans-serif); font-size: 1.4rem; font-weight: 400; letter-spacing: .02em; color: #ffd499; margin-bottom: .75rem; text-transform: uppercase;
}
.caption-overlay h3 { color: #fff; }
.caption-overlay p,
.design-modal-meta p,
.essay-snippet-text,
.music-desc p,
article p {
  font-family: var(--sans-serif);
  font-size: 1rem; color: #bbb; line-height: 1.8; margin-bottom: 1.5rem; text-align: left;
}
.lead-text, .design-modal-meta .long-desc, article p:first-of-type {
  font-size: 1.2rem !important; margin-bottom: 4rem; line-height: 1.6;
}
.lead-text { text-align: center; color: #fff; }

@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  .design-modal-meta h2, article h1 { font-size: 1.8rem; margin-bottom: 1.2rem; }
  .lead-text, .design-modal-meta .long-desc, article p:first-of-type { font-size: 1.1rem !important; }
  .design-modal-meta p, .essay-snippet-text, .music-desc p, article p { font-size: .95rem; line-height: 1.7; }
}

/* Latest News: subtle hover without movement */
.latest-news-box .news-item {
  transform: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.latest-news-box .news-item:hover { background-color: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.12); }
.latest-news-box .news-item:hover .news-text { color: #ffffff; font-size: inherit !important; }
.latest-news-box .news-thumb { width: 6rem; height: 6rem; object-fit: cover; flex-shrink: 0; transition: filter 0.2s ease; transform: none !important; }
.latest-news-box .news-item:hover .news-thumb { filter: grayscale(15%); }

/* Footnotes and article utilities */
.prose-content { max-width: 680px !important; margin: 0 auto; }
.prose-content .lead-text { font-size: 1.35rem; line-height: 1.7; color: var(--text-primary); margin-bottom: 2.5rem; font-weight: 300; }
.prose-content figure { margin: 3rem 0; width: 100%; }
.prose-content figure figcaption { font-size: .85rem; color: var(--text-muted); text-align: center; margin-top: .75rem; letter-spacing: .02em; }
.prose-content blockquote { margin: 3rem 0; padding-left: 2rem; border-left: 2px solid var(--text-muted); font-style: italic; font-size: 1.25rem; color: var(--text-primary); }
.prose-content a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; transition: opacity .2s ease; }
.prose-content a:hover { opacity: .7; }

/* Return home */
.return-home-container { display: flex; justify-content: center; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.return-home-btn {
  display: inline-flex; align-items: center; gap: .75rem; color: var(--muted); text-decoration: none; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .75rem 1.5rem; border: 2px solid #4e4e6e; border-radius: 24px; background: transparent; cursor: pointer;
  transition: color .3s cubic-bezier(.25,1,.5,1), border-color .3s cubic-bezier(.25,1,.5,1), transform .3s cubic-bezier(.25,1,.5,1), background-color .3s cubic-bezier(.25,1,.5,1);
}
.return-home-btn span { display: inline-block; transition: transform .3s cubic-bezier(.25,1,.5,1); }
.return-home-btn:hover { color: #fff; border-bottom-color: #a69ac2; background-color: rgba(255,255,255,.03); transform: translateY(-4px); }
.return-home-btn:hover span { transform: translateY(-2px); }
.return-home-btn:active { transform: translateY(-1px); }

/* Inline footnote ref */
.footnote-ref { display:inline-flex; align-items:center; justify-content:center; text-decoration:none !important; font-size:.7rem; font-weight:600; color:#fff !important; padding:0 3px; position:relative; top:-.4em; line-height:0; transition: color .2s ease, transform .2s ease; }
.footnote-ref::before { content:'['; color:var(--muted); margin-right:1px; }
.footnote-ref::after { content:']'; color:var(--muted); margin-left:1px; }
.footnote-ref:hover { color:#fff !important; transform: scale(1.25) translateY(-1px); }
.footnote-ref:hover::before, .footnote-ref:hover::after { color:#fff; }

/* Footnotes list */
.footnotes-section { margin-top:4rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.08); font-family:'SpaceMono','Courier New',monospace; }
.footnotes-title { font-size:1.4rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:1.5rem; }
.footnotes-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; font-size:.9em; }
.footnotes-list a { color:#e6ceb3; }
.footnotes-list li { scroll-margin-top:10rem; transition: color .4s ease; font-size:1em; }
.footnotes-list li:target { color:#fff !important; animation: footnoteGlowFade 6s cubic-bezier(.25,1,.5,1) forwards; }
.footnotes-list li:target .footnote-backref { color:#fff; animation: bounceLeft .5s ease infinite alternate; }

/* Original paragraph highlight — restored */
article p { position: relative; }
article p:has(.footnote-ref:target)::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 4px 0 0 rgba(255,255,255,0.65);
  pointer-events: none; animation: paraOverlayFade 1.6s ease forwards;
}

/* Animations used above (single definition) */
@keyframes paraOverlayFade { 0%{opacity:1;} 100%{opacity:0;} }
@keyframes footnoteGlowFade {
  0% { background-color: rgba(255,255,255,.12); padding-left:.75rem; border-radius:4px; box-shadow:-4px 0 0 0 #fff; }
  15% { background-color: rgba(255,255,255,.08); box-shadow:-4px 0 0 0 #fff; }
  100% { background-color: transparent; padding-left:.5rem; box-shadow:-4px 0 0 0 transparent; }
}
@keyframes bounceLeft { to { transform: translateX(-3px); } }

article { max-width:900px; margin: 0 auto; padding: 0 2rem; }
article a { scroll-margin-top: 14rem; color: #e6ceb3; }
article li { color: #bbb; margin-bottom: 1em; }
.article-image { display: grid; place-items: center; margin: 4rem 0; }
.article-image img { width: min(100%, 840px); height: auto; display: block; }
article img { max-width: 100%; height: auto; display:block; }

/* Inline zoom image (kept) */
#img-container { display:block; }
#img-container img { max-width: 100%; height:auto; display:block; cursor: zoom-in; }
.close-layer { display:none; }
#img-container:target .open-link {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center; z-index: 9999; pointer-events: none;
}
#img-container:target img { max-width:95vw; max-height:95vh; object-fit: contain; cursor: zoom-out; }
#img-container:target .close-layer { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:10000; cursor: zoom-out; }

/* Constrain media inside article/prose */
article img,
.prose-content img,
article figure,
.prose-content figure,
article video,
.prose-content video {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}
article img[width], .prose-content img[width] { width: 100% !important; }
article img[height], .prose-content img[height] { height: auto !important; }
article table, .prose-content table, article pre, .prose-content pre {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
article figure, .prose-content figure { margin: 2rem auto; }
article figure > img, .prose-content figure > img { margin-inline: auto; }

/* =========================
   CONTACT + FOOTER
   ========================= */
.contact-wrapper {
  max-width: 550px; margin: 4rem auto 0 auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 2.5rem;
}
.contact-channels-box { display:flex; justify-content:center; align-items:center; gap:4rem; flex-wrap:wrap; width:100%; }
.contact-item-row { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; text-align:left; }
.contact-icon {
  width: 18px; height: 18px; fill: none; stroke: #ffd499; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease, transform .2s ease; flex-shrink: 0; margin-top: 2px;
}
@media(max-width: 480px) {
  .contact-channels-box { flex-direction: column; gap: 1.5rem; align-items: center; }
  .contact-item-row { width: auto; }
}
.contact-item-row:hover .contact-icon { stroke: #fff; transform: translateY(-1px); }
.contact-label-stack { display: flex; flex-direction: column; }
.contact-label-stack .label-title { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); line-height: 1.2; margin-bottom: .1rem; }
.contact-label-stack .channel-link-item { font-size: .95rem; color: var(--text); text-decoration: none; }
.contact-label-stack .channel-link-item:hover { color: #ffd499; text-underline-offset: 3px; }
.protected-email-box { unicode-bidi: bidi-override; direction: rtl; cursor: text; }

@media(max-width: 480px) {
  .contact-wrapper { padding: 2rem 1.5rem; }
  .contact-channels-box { flex-direction: column; gap: 1.5rem; align-items: flex-start; padding-left: 1rem; }
}

/* Footer */
footer.site-footer {
  width: 100%; margin-top: 6rem; padding: 3rem 1.5rem; border-top: 1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.5rem;
}
.footer-social-tray { display:flex; align-items:center; justify-content:center; gap: 2.5rem; }
.footer-icon-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none !important; position:relative; padding:.5rem; transition: transform .3s cubic-bezier(.25,1,.5,1); }
.footer-svg-icon { width: 28px; height: 28px; fill: none; stroke: var(--muted, #a179fd); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; will-change: stroke, transform; transition: stroke .3s cubic-bezier(.25,1,.5,1); }
.footer-icon-link:hover { transform: translateY(-2px); }
.footer-icon-link:active { transform: translateY(0) scale(.95); }
.footer-protected-mail { unicode-bidi: bidi-override; direction: rtl; }
.footer-copyright { font-size: .7rem; letter-spacing: .05em; color: var(--muted, #666); text-transform: uppercase; }

/* =========================
   ACCESSIBILITY / FOCUS
   ========================= */
.card, .design-card, .pinned-card, .gallery-card, .text-snippet-card, .text-card-accordion { border-radius: var(--radius-s); overflow: hidden; }
.design-card img, .pinned-video-target, .pinned-video-fallback, .design-card-video, .gallery-card img { border-radius: inherit; }

.design-card:focus-visible,
.text-snippet-card:focus-visible,
.nav-links a:focus-visible,
.about-social-link:focus-visible,
.footer-icon-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================
   VIEW TRANSITIONS / REDUCED MOTION
   ========================= */
::view-transition-old(root) { animation: fadeOutExit .4s cubic-bezier(.25,1,.5,1) forwards; }
::view-transition-new(root) { animation: fadeInEntrance .5s cubic-bezier(.25,1,.5,1) forwards; }
@keyframes fadeOutExit { from{opacity:1;} to{opacity:0;} }
@keyframes fadeInEntrance { from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* About CTAs */
.about-cta-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.about-cta-row .footer-svg-icon { stroke:#e6ceb3; }
.cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 2px solid #4e4e6e;
  border-radius: 8px;
  color: #afaeac; text-decoration: none; font-size: .9rem; letter-spacing: .02em;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.cta-btn:hover {background-color: rgba(255,255,255,.03); border-bottom-color: #a69ac2; color:#fff; transform: translateY(-1px); }
.cta-btn .footer-svg-icon { width: 33px; height: 33px; stroke: #a7a6a6;}
.cta-btn:hover .footer-svg-icon { stroke: #a69ac2;}

/* Overlay must be fixed */
.modal-overlay { position: fixed; inset: 0; }

/* Fix: missing class dot on image-close-wrapper selector */
.image-close-wrapper { display:flex; justify-content:center; align-items:center; width:100%; height:100%; }
.modal-fullscreen .image-close-wrapper img {
  max-width:100vw; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  padding:2rem 2rem var(--viewer-bottom-pad) 2rem;
}

/* Prevent background scroll for JS overlay fallback */
body.modal-open { overflow:hidden; }

/* Hide lightbox arrows everywhere (per request) */
.overlay-nav, .overlay-prev, .overlay-next,
.lightbox__nav, .lightbox__prev, .lightbox__next {
  display: none !important;
}

/* Smooth image swap to prevent flashing previous image */
.modal-fullscreen .image-close-wrapper img { opacity: 1; transition: opacity .2s ease; }
.modal-overlay.loading .image-close-wrapper img { opacity: 0; }


/* ============ FOOTNOTES — canonical, CSS-only ============ */

/* Inline footnote ref */
.footnote-ref {
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none !important; font-size:.7rem; font-weight:600;
  color:#fff !important; padding:0 3px; position:relative; top:-.4em; line-height:0;
  transition: color .2s ease, transform .2s ease;
}
.footnote-ref::before { content:'['; color:var(--muted); margin-right:1px; }
.footnote-ref::after  { content:']'; color:var(--muted); margin-left:1px; }
.footnote-ref:hover { color:#fff !important; transform: scale(1.25) translateY(-1px); }
.footnote-ref:hover::before, .footnote-ref:hover::after { color:#fff; }

/* Footnotes list */
.footnotes-section {
  margin-top:4rem; padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:'SpaceMono','Courier New',monospace;
}
.footnotes-title { font-size:1.4rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:1.5rem; }
.footnotes-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; font-size:.9em; }
.footnotes-list a { color:#e6ceb3; }
.footnotes-list li { scroll-margin-top:10rem; transition: color .4s ease; font-size:1em; }
.footnotes-list li:target { color:#fff !important; animation: footnoteGlowFade 6s cubic-bezier(.25,1,.5,1) forwards; }
.footnotes-list li:target .footnote-backref { color:#fff; animation: bounceLeft .5s ease infinite alternate; }

/* Back-to-text: highlight the paragraph that contains the targeted inline ref
   This is the original, working selector (no pseudo-element, no JS) */
article p:has(.footnote-ref:target) {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.65) !important;
  border-radius: 4px !important;
  padding-left: 0.5rem !important;
}

/* Animations used by the footnote list (kept) */
@keyframes footnoteGlowFade {
  0% { background-color: rgba(255,255,255,.12); padding-left:.75rem; border-radius:4px; box-shadow:-4px 0 0 0 #fff; }
  15% { background-color: rgba(255,255,255,.08); box-shadow:-4px 0 0 0 #fff; }
  100% { background-color: transparent; padding-left:.5rem; box-shadow:-4px 0 0 0 transparent; }
}
@keyframes bounceLeft { to { transform: translateX(-3px); } }

/* Article basics (as you had them) */
article { max-width:900px; margin: 0 auto; padding: 0 2rem; }
article a { scroll-margin-top: 14rem; color: #e6ceb3; }
article li { color: #bbb; margin-bottom: 1em; }
.article-image { display: grid; place-items: center; margin: 4rem 0; }
.article-image img { width: min(100%, 840px); height: auto; display: block; }



/* ==========================================================================
   1. GLOBAL & RESPONSIVE CONSTANTS
   ========================================================================== */
:root {
  --splash-size: 300px;
  --nav-h: 60px; /* Adapts to your fixed navigation bar height */
}

@media (max-width: 767px) {
  :root {
    --splash-size: 65vw; 
  }
}

/* ==========================================================================
   2. SITE NAVIGATION LAYOUT (THE HORIZONTAL FLEX HEADER)
   ========================================================================== */
.site-nav {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  position: fixed; 
  top: 0; 
  left: 0;
  width: 100%; 
  min-height: var(--nav-h);
  padding: 0 2rem; 
  box-sizing: border-box; 
  z-index: 9999;
  background: #0b0b0c;
}

.nav-logo {
  font-family: 'SpaceMono', 'Courier New', monospace; 
  font-size: .85rem; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: .1em; 
  color: #fff; 
  text-decoration: none;
}

.nav-links { 
  display: flex; 
  gap: 2rem; 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.nav-links a {
  font-family: 'SpaceMono', 'Courier New', monospace; 
  font-size: .85rem; 
  color: var(--muted, #888);
  text-decoration: none; 
  text-transform: uppercase; 
  letter-spacing: .05em; 
  transition: color .2s ease;
}

.nav-links a:hover { color: #fff; }

/* Mobile Menu Spacing Layouts */
#nav-toggle { display: none; }
.nav-toggle-label { 
  display: none; 
  cursor: pointer; 
  font-family: 'SpaceMono', 'Courier New', monospace; 
  font-size: .85rem; 
  color: #fff; 
  text-transform: uppercase; 
  user-select: none; 
  padding: .5rem; 
}

@media (max-width: 768px) {
  .site-nav { padding: 0 1.5rem !important; }
  .nav-toggle-label { display: block; }
  .nav-links {
    position: absolute; top: 100%; right: 2rem;
    flex-direction: column; align-items: flex-end; gap: 1.2rem;
    background: rgba(15,15,15,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1.5rem 2rem; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  #nav-toggle:checked ~ .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

body:has(.modal-overlay:target) .site-nav { 
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none; 
  transition: opacity .2s ease, visibility .2s ease; 
}

/* ==========================================================================
   3. ISOLATED TRACK A: THE NAVBAR CORNER ICON (IMMUNE TO SPLASH ENGINE LEAKS)
   ========================================================================== */
.nav-logo-icon {
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: center !important;
  width: 44px !important; 
  height: 44px !important; 
  text-decoration: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform .4s cubic-bezier(.25,1,.5,1);
  --cosmic-glow: #432eff;
  --wire-muted: rgba(156, 163, 175, .6);
  --star-muted: #9ca3af;
  --core-muted: #9ca3af;
}

/* Forces the inner SVG canvas to expand cleanly into the 44px boundaries */
.nav-logo-icon .stellar-eye-icon {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 1 !important; /* Stops index JS file from rendering the navbar invisible */
  transform: none !important;
  animation: none !important;
}

/* Explicitly locks down the static layout vectors for the navbar button */
.nav-logo-icon .constellation-wire { stroke: var(--wire-muted); stroke-width: 1.5; fill: none; stroke-linecap: round; opacity: 1 !important; animation: none !important; transition: stroke .4s ease, opacity .4s ease; }
.nav-logo-icon .star-node { fill: var(--star-muted); stroke: transparent; stroke-width: 0; transform-origin: center; opacity: 1 !important; transform: scale(1) !important; animation: none !important; transition: fill .4s ease, stroke .4s ease, filter .4s ease; }
.nav-logo-icon .eye-core { fill: var(--core-muted); stroke: transparent; stroke-width: 0; transform-origin: 50px 52px; opacity: 1 !important; transform: scale(1) !important; animation: none !important; transition: fill .4s ease, stroke .4s ease, filter .4s ease; }

/* Interactive Hover Mechanics (Navbar Only) */
.nav-logo-icon:hover, .nav-logo-icon:active { transform: scale(1.08) rotate(5deg); }
.nav-logo-icon:hover .constellation-wire, .nav-logo-icon:active .constellation-wire { stroke: var(--cosmic-glow); opacity: .8; }
.nav-logo-icon:hover .star-node, .nav-logo-icon:active .star-node { fill: #fff; stroke: var(--cosmic-glow); stroke-width: 1.5; filter: drop-shadow(0 0 5px var(--cosmic-glow)); animation: starTwinklePulse 1.5s ease-in-out infinite alternate; }
.nav-logo-icon:hover .star-node:nth-child(2n) { animation-delay: .3s; }
.nav-logo-icon:hover .star-node:nth-child(3n) { animation-delay: .6s; }
.nav-logo-icon:hover .star-node:nth-child(4n) { animation-delay: .9s; }
.nav-logo-icon:hover .eye-core, .nav-logo-icon:active .eye-core { fill: #fff; stroke: var(--cosmic-glow); stroke-width: 2.5; animation: centralCoreBreathing 2s ease-in-out infinite alternate; }

/* Responsive Boost: Scales the corner graphic up on mobile so it never feels small */
@media (max-width: 768px) {
  .nav-logo-icon {
    width: 48px !important;  
    height: 48px !important;
    align-self: center !important;
  }
}

/* ==========================================================================
   4. ISOLATED TRACK B: THE FULLSCREEN SPLASH MODAL (SANDBOX CONTAINER)
   ========================================================================== */
.eye-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(125,69,255,.15), transparent 60%), #08080a;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out; 
}

@media (max-width: 767px) {
  .eye-splash { background: radial-gradient(100vw 60vh at 50% 40%, rgba(125,69,255,.2), transparent 70%), #08080a; }
}

.eye-splash.show {
  opacity: 1 !important;
  pointer-events: auto;
  transition: none;
}

.eye-splash__close { 
  position: absolute; 
  inset: 0; 
  display: block; 
}

.eye-splash .eye-splash__inner {
  display: grid; 
  place-items: center; 
  gap: .75rem;
  width: var(--splash-size);
  height: var(--splash-size);
  max-width: 500px;
  max-height: 500px;
  opacity: 0;
}

/* Scoped trigger animation applies ONLY when inside the splash parent container wrapper */
.eye-splash .eye-splash__inner.anim {
  animation: 
    unifiedFadeInOut 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards,
    cosmicWave 7s ease-in-out infinite alternate;
}

.eye-splash .stellar-eye-icon {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Scoped Humming Glow Elements (Tied explicitly to the overlay vector file instance) */
.eye-splash .constellation-wire {
  stroke: rgba(125, 69, 255, 0.25);
  stroke-width: 1;
  fill: none;
}
.eye-splash .star-node {
  fill: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(125, 69, 255, 0.6));
  animation: starHum 2s ease-in-out infinite alternate !important;
  transform: translateZ(0);
  will-change: filter, opacity;
}
.eye-splash .ambient-pulse {
  fill: rgba(125, 69, 255, 0.5);
  filter: drop-shadow(0 0 4px rgba(125, 69, 255, 0.4));
  animation: starHum 3s ease-in-out infinite alternate-reverse !important;
}
.eye-splash .eye-core {
  fill: #fff;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(125, 69, 255, 0.7));
  transform: translateZ(0);
  will-change: filter;
}

.eye-splash__label {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 8px rgba(125, 69, 255, 0.3));
}

/* ==========================================================================
   5. DECOUPLED KEYFRAME ANIMATION MODULES
   ========================================================================== */
@keyframes unifiedFadeInOut { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }

@keyframes starHum { 
  0% { opacity: 0.75; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 4px rgba(125, 69, 255, 0.4)); }
  100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(125, 69, 255, 0.8)); }
}

@keyframes cosmicWave {
  0% { transform: translate3d(0, 0, 0) skewX(0deg); }
  33% { transform: translate3d(2px, -3px, 0) skewX(0.5deg); }
  66% { transform: translate3d(-3px, 1px, 0) skewX(-0.5deg); }
  100% { transform: translate3d(1px, -2px, 0) skewX(0.3deg); }
}

@keyframes starTwinklePulse { 
  0% { opacity: .4; transform: scale(.85); filter: drop-shadow(0 0 2px var(--cosmic-glow)); } 
  100% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 7px var(--cosmic-glow)) drop-shadow(0 0 12px rgba(118,62,250,.4)); } 
}

@keyframes centralCoreBreathing { 
  0% { transform: scale(.94); filter: drop-shadow(0 0 6px var(--cosmic-glow)) drop-shadow(0 0 12px rgba(118,62,250,.3)); } 
  100% { transform: scale(1.06); filter: drop-shadow(0 0 10px var(--cosmic-glow)) drop-shadow(0 0 24px rgba(118,62,250,.7)); } 
}