/*
Theme Name: Clara Theme V168.7
Author: Clara Thym
Version: 168.7
*/
/* =========================
   Reset & Normalize
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  /* Smoother fonts on Mac */
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe {
  max-width: 100%;
  display: block;
}

/* =========================
   General Page & hide default cursor
========================= */
:root {
  /* Named Colors for Navigation Logic */
  --color-home: yellow;
  --color-internal: rgb(138, 43, 226);

  --theme-color: var(--color-home);
  --theme-glow: rgba(255, 255, 0, 0.5);
  --theme-glow-strong: rgba(255, 255, 0, 0.7);
  --theme-glow-soft: rgba(255, 255, 0, 0.4);
  --theme-glow-weak: rgba(255, 255, 0, 0.2);
  --theme-glow-box: rgba(255, 255, 0, 0.3);
  --theme-glow-box-inside: rgba(255, 255, 0, 0.1);
  --theme-glow-bubble: rgba(255, 255, 0, 0.05);

  --cursor-grad-1: rgba(138, 43, 226, 0.6);
  --cursor-grad-2: rgba(75, 0, 130, 0.3);
  --cursor-glow: rgba(138, 43, 226, 0.6);
  --cursor-glow-inset: rgba(238, 130, 238, 0.5);

  --selection-text-color: white;


  /* Independent Cursor Color - explicitly lila for default homepage state */
  --cursor-color: blueviolet;
}


body.yellow-theme {
  --theme-color: yellow;
  --theme-glow: rgba(255, 255, 0, 0.5);
  --theme-glow-strong: rgba(255, 255, 0, 0.7);
  --theme-glow-soft: rgba(255, 255, 0, 0.4);
  --theme-glow-weak: rgba(255, 255, 0, 0.2);
  --theme-glow-box: rgba(255, 255, 0, 0.3);
  --theme-glow-box-inside: rgba(255, 255, 0, 0.1);
  --theme-glow-bubble: rgba(255, 255, 0, 0.05);

  --cursor-grad-1: rgba(255, 255, 0, 0.6);
  --cursor-grad-2: rgba(150, 150, 0, 0.3);
  --cursor-glow: rgba(255, 255, 0, 0.6);
  --cursor-glow-inset: rgba(255, 255, 150, 0.5);

  box-shadow: inset 0 0 30px var(--theme-glow);

  --cursor-color: var(--theme-color);

  --selection-text-color: black;
}

body.lila-theme {
  --theme-color: var(--color-internal);
  --theme-glow: rgba(138, 43, 226, 0.5);
  --theme-glow-strong: rgba(138, 43, 226, 0.7);
  --theme-glow-soft: rgba(138, 43, 226, 0.4);
  --theme-glow-weak: rgba(138, 43, 226, 0.2);
  --theme-glow-box: rgba(138, 43, 226, 0.3);
  --theme-glow-box-inside: rgba(138, 43, 226, 0.1);
  --theme-glow-bubble: rgba(138, 43, 226, 0.05);

  --cursor-grad-1: rgba(138, 43, 226, 0.6);
  --cursor-grad-2: rgba(75, 0, 130, 0.3);
  --cursor-glow: rgba(138, 43, 226, 0.6);
  --cursor-glow-inset: rgba(238, 130, 238, 0.5);

  --cursor-color: var(--theme-color);

  box-shadow: inset 0 0 30px var(--theme-glow);
}

/* =========================
   Back Arrow Logic
   (Color matches the page it leads TO)
========================= */
/* Internal Page -> Leads to Home (Yellow frame) */
#things-page .back-arrow,
#about-page .back-arrow,
#from-page .back-arrow {
  --arrow-color: yellow;
}

/* Sub-page -> Leads to Things (Lila frame) */
#content-page .back-arrow,
#butterfly-page .back-arrow {
  --arrow-color: rgb(138, 43, 226);
}

.back-arrow {
  border: 1px solid var(--arrow-color) !important;
  box-shadow: 0 0 15px var(--arrow-color) !important;
  color: var(--arrow-color) !important;
  cursor: none !important;
  /* Managed by JS custom cursor */
}

body.red-theme {
  --theme-color: rgb(255, 0, 0);
  --theme-glow: rgba(255, 0, 0, 0.5);
  --theme-glow-strong: rgba(255, 0, 0, 0.7);
  --theme-glow-soft: rgba(255, 0, 0, 0.4);
  --theme-glow-weak: rgba(255, 0, 0, 0.2);
  --theme-glow-box: rgba(255, 0, 0, 0.3);
  --theme-glow-box-inside: rgba(255, 0, 0, 0.1);
  --theme-glow-bubble: rgba(255, 0, 0, 0.05);

  --cursor-grad-1: rgba(255, 0, 0, 0.6);
  --cursor-grad-2: rgba(150, 0, 0, 0.3);
  --cursor-glow: rgba(255, 0, 0, 0.6);
  --cursor-glow-inset: rgba(255, 100, 100, 0.5);

  /* CURSOR Override -> YELLOW (for Content Pages) */
  --cursor-color: yellow;

  box-shadow: inset 0 0 30px var(--theme-glow);

  --selection-text-color: white;
  pointer-events: auto;
}

body.red-cursor-lila-theme {
  /* Internal Theme Color (Text, Circles, Glows) -> LILA */
  --theme-color: var(--color-internal);
  --theme-glow: rgba(138, 43, 226, 0.5);
  --theme-glow-strong: rgba(138, 43, 226, 0.7);
  --theme-glow-soft: rgba(138, 43, 226, 0.4);
  --theme-glow-weak: rgba(138, 43, 226, 0.2);
  --theme-glow-box: rgba(138, 43, 226, 0.3);
  --theme-glow-box-inside: rgba(138, 43, 226, 0.1);
  --theme-glow-bubble: rgba(138, 43, 226, 0.05);

  /* CURSOR Override -> RED */
  --cursor-color: red;

  box-shadow: inset 0 0 30px var(--theme-glow);
}

/* Force Red Frames for Content Items in this mixed theme */
body.red-cursor-lila-theme .portfolio-item {
  --theme-glow-box: rgba(255, 0, 0, 0.5);
  --theme-glow-weak: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.2);
}

body.red-cursor-lila-theme .portfolio-item:hover {
  background: rgba(255, 0, 0, 0.08);
  border-color: red;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 0, 0, 0.5);
}

body.red-glow-lila-theme {
  --theme-color: var(--color-internal);
  /* Lila Text/Circles */

  /* RED GLOWS (Page Border + Boxes) */
  --theme-glow: rgba(255, 0, 0, 0.5);
  --theme-glow-strong: rgba(255, 0, 0, 0.7);
  --theme-glow-soft: rgba(255, 0, 0, 0.4);
  --theme-glow-weak: rgba(255, 0, 0, 0.2);
  --theme-glow-box: rgba(255, 0, 0, 0.5);
  --theme-glow-box-inside: rgba(255, 0, 0, 0.1);
  --theme-glow-bubble: rgba(255, 0, 0, 0.05);

  --cursor-grad-1: rgba(255, 0, 0, 0.6);
  --cursor-grad-2: rgba(150, 0, 0, 0.3);
  --cursor-glow: rgba(255, 0, 0, 0.6);
  --cursor-glow-inset: rgba(255, 100, 100, 0.5);

  --cursor-color: red;

  box-shadow: inset 0 0 30px var(--theme-glow);
}



body.blue-theme {
  --theme-color: #0F52BA;
  /* Sapphire Blue */
  --theme-glow: rgba(15, 82, 186, 0.5);
  --theme-glow-strong: rgba(15, 82, 186, 0.7);
  --theme-glow-soft: rgba(15, 82, 186, 0.4);
  --theme-glow-weak: rgba(15, 82, 186, 0.2);
  --theme-glow-box: rgba(15, 82, 186, 0.3);
  --theme-glow-box-inside: rgba(15, 82, 186, 0.1);
  --theme-glow-bubble: rgba(15, 82, 186, 0.05);

  --cursor-grad-1: rgba(15, 82, 186, 0.6);
  --cursor-grad-2: rgba(0, 0, 100, 0.3);
  --cursor-glow: rgba(15, 82, 186, 0.6);
  --cursor-glow-inset: rgba(100, 150, 255, 0.5);

  --cursor-color: var(--theme-color);

  box-shadow: inset 0 0 30px var(--theme-glow);

  --selection-text-color: white;
}




/* =========================
   Selection Styling
========================= */
::selection {
  background: var(--cursor-color);
  color: inherit;
  text-shadow: none;
}

::-moz-selection {
  background: var(--cursor-color);
  color: inherit;
  text-shadow: none;
}

html,
body,
a,
button,
div,
span,
input,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
img {
  cursor: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: black;
  font-family: dolly-new, sans-serif;
  font-style: normal;
  font-weight: 400;
  width: 100vw;
  height: 100vh;
  box-shadow: inset 0 0 30px var(--theme-glow);
  transition: box-shadow 0.5s ease;
}

/* Allow scrolling on from-page */
#from-page.active {
  overflow-y: auto;
}

/* =========================
   Animations
========================= */
@keyframes electroshock {
  0% {
    box-shadow: 0 0 0 0 var(--theme-glow-strong);
    border-color: var(--theme-color);
  }

  50% {
    box-shadow: 0 0 20px 10px var(--theme-glow-soft);
    border-color: #fff;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
    border-color: var(--theme-color);
  }
}

@keyframes text-shock {
  0% {
    transform: translate(0, 0);
    color: var(--theme-color);
  }

  20% {
    transform: translate(-2px, 2px);
    color: #fff;
  }

  40% {
    transform: translate(2px, -2px);
    text-shadow: 0 0 8px var(--theme-color);
  }

  60% {
    transform: translate(-2px, -2px);
  }

  80% {
    transform: translate(2px, 2px);
    color: #fff;
    text-shadow: 0 0 10px var(--theme-color), 0 0 20px var(--theme-color);
  }

  100% {
    transform: translate(0, 0);
    color: var(--theme-color);
    text-shadow: none;
  }
}

.electroshock-effect {
  animation: electroshock 0.3s linear;
}

.text-shock-effect {
  animation: text-shock 0.3s linear;
}

@keyframes sparkle-text {

  0%,
  100% {
    text-shadow: 0 0 2px red;
  }

  50% {
    text-shadow: 0 0 5px red, 1px -1px 2px white, -1px 1px 2px white;
  }

  /* Subtle glitter */
}

@keyframes sparkle-stars {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(90deg);
    opacity: 1;
  }

  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

.sparkle {
  position: relative;
  display: inline-block;
  /* animation: sparkle-text REMOVED to stop flashy effect */
  color: red;
  /* Always Red */
  font-weight: bold;
}

.sparkle::before,
.sparkle::after {
  content: '✦';
  position: absolute;
  color: white;
  /* White sparkles */
  font-size: 0.4em;
  /* Smaller */
  opacity: 0;
  animation: sparkle-stars 1s infinite;
  /* Faster */
}

.sparkle::before {
  top: -2px;
  left: -4px;
  animation-delay: 0s;
}

.sparkle::after {
  bottom: 0px;
  right: -4px;
  animation-delay: 0.5s;
}

.romantic-italic {
  font-style: italic;
  font-family: 'Garamond', 'Georgia', serif;
  font-size: 1.1em;
}


/* =========================
   Floating Circles
========================= */
@font-face {
  font-family: 'Climate Base';
  src: url('assets/fonts/climate-base.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.floating-circle {
  position: absolute;
  border: 2px solid var(--theme-color);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;

  /* Responsive Size - JS controls width/height dynamically */
  /* Font scales with viewport to match large circles */
  font-size: clamp(1rem, 2.1vw, 2.4rem);

  text-align: center;
  text-transform: uppercase;
  font-family: 'Climate Base', sans-serif;
  /* Custom Font */
  font-weight: normal;
  color: var(--theme-color);
  opacity: 0.95;
  transition: background 0.2s, color 0.2s, border-color 0.2s ease;
  pointer-events: auto;
  z-index: 10;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transform: translate3d(0, 0, 0);
  /* Hardware acceleration for Safari */
  padding: 10px;
}

/* JS handles all circle sizing dynamically */

.floating-circle:hover {
  border-color: var(--cursor-color, var(--theme-color));
  color: var(--cursor-color, var(--theme-color));
  background: transparent !important;
  box-shadow: 0 0 20px var(--cursor-color, var(--theme-color)), inset 0 0 10px var(--cursor-color, var(--theme-color));
  text-shadow: 0 0 0.5px var(--cursor-color, var(--theme-color));
  /* Subtle stroke */
  opacity: 1;
}

.floating-circle:hover span {
  color: var(--cursor-color, var(--theme-color));
  z-index: 100;
}



.floating-circle span {
  position: relative;
  z-index: 5;
  pointer-events: none;
  /* Let clicks pass to circle */
}

/* Override removed for consistency */





/* =========================
   Pages
========================= */
.page {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Space for back arrow */
}

.film-description a,
.text-content a {
  color: #007bff !important;
  text-decoration: underline;
}

.film-description a:hover,
.text-content a:hover,
.text-item a:hover {
  color: yellow !important;
}

.page.active {
  display: block;
}



/* =========================
   Top Glowing Frame Fix
========================= */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 30px var(--theme-glow);
  pointer-events: none;
  z-index: 9999;
  transition: box-shadow 0.5s ease;
}

/* =========================
   Back Arrow
========================= */
.back-arrow {
  position: absolute;
  top: 100px;
  /* Moved down from 60px */
  left: 80px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: black;
  border: 2px solid var(--arrow-color, var(--theme-color));
  box-shadow: 0 0 15px var(--theme-glow);
  cursor: none !important;
  color: transparent;
  opacity: 0.9;
  /* user-select: none; - REMOVED */

  transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
  pointer-events: auto;
  z-index: 100;
}

.back-arrow:hover {
  transform: scale(1.2);
  box-shadow: 0 0 25px var(--theme-glow-strong);
}

/* =========================
   Side Text Box
========================= */
.side-text-box {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  width: 300px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--theme-glow-box);
  box-shadow: 0 0 20px var(--theme-glow-weak), inset 0 0 15px var(--theme-glow-box-inside);
  color: var(--theme-color);
  font-size: 1.4rem;
  line-height: 1.6;
  z-index: 5;
  /* pointer-events: none; - REMOVED */

  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.side-text-box p {
  margin: 0;
}

/* =========================
   Content Bubble (Level 3)
========================= */
.content-bubble {
  border-width: 3px;
  background: var(--theme-glow-bubble);
  box-shadow: 0 0 20px var(--theme-glow-weak);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--theme-color);
  max-width: 90vw;
  max-height: 90vh;
  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, width 0.5s ease, height 0.5s ease;
  overflow: hidden;
  padding: 40px;

  /* Center the bubble */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.content-text {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* Special styling for about me bubble */
.content-bubble.about-me-bubble {
  background: transparent;
  color: var(--theme-color);
  /* Red (from theme) */
  border: none;
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* No extra padding framing */
  width: auto;
  font-size: 1.4rem;
  /* Increased size for dolly-new/readability */
  max-width: 600px;
  /* Natural text width */
  height: auto;
  max-height: 80vh;
  border-radius: 0;
  overflow-y: auto;
  display: block;

  /* Position */
  top: 55%;
  left: 35%;
  /* Shifted to the left as requested */
  transform: translate(-50%, -50%);

  /* Ensure visibility and interaction */
  z-index: 2000;
  /* Higher than everything */
  pointer-events: auto !important;
}

.content-bubble.about-me-bubble .content-text {
  color: var(--theme-color);
  text-shadow: none;
  font-size: clamp(1rem, 2.2vh, 1.4rem);
  line-height: 1.6;
  text-align: justify;

  /* Reset Width Constraints to allow split layout */
  width: 100%;
  max-width: none;
}



/* =========================
   Portfolio Gallery
========================= */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  width: 100%;
  height: 100%;
  padding: 200px 40px 40px 40px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar for IE and Edge */
}

.portfolio-grid::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome, Safari and Opera */
}

/* Message Form Subtitle */
.message-subtitle {
  margin-top: 20px;
  width: 100%;
  max-width: 100%;
  /* Full width of container */
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
  color: #000;
  background-color: var(--color-internal);
  /* Match post text lila */
  /* Lila square background */
  padding: 8px 15px;
  /* Less padding vertically */
  display: block;
  /* Block to fill width */
  line-height: 1.4;
  white-space: pre-wrap;
  margin-bottom: 20px;
  box-sizing: border-box;
  /* Ensure padding inside width */
}

/* Form Styles */
.portfolio-grid.collage-view {
  display: block;
  column-count: 3;
  column-gap: 20px;
  padding: 40px;
}

@media (max-width: 800px) {
  .portfolio-grid.collage-view {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .portfolio-grid.collage-view {
    column-count: 1;
  }
}

.gallery-item {
  position: relative;
  overflow: visible;
  /* Changed from hidden to avoid cutting off effects, though textflow usually handles it */
  border-radius: 0;
  /* Sharp corners */
  cursor: none !important;
  margin-bottom: 20px;
  break-inside: avoid;
  background: transparent;
  height: auto !important;
}

.gallery-item:hover {
  z-index: 10;
}

.gallery-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 0;
  transition: all 0.3s ease;
}

.gallery-item:hover .gallery-img {
  box-shadow: 0 0 15px 2px rgba(255, 0, 0, 0.4);
  /* Tight light red glow */
}



.portfolio-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--theme-glow-box);
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transform: translate3d(0, 0, 0);
}

.portfolio-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--theme-glow-weak);
}

.portfolio-img {
  width: 100%;
  /* height: 200px; REMOVED to prevent conflict with mosaic items */
  object-fit: cover;
  border-bottom: 1px solid var(--theme-glow-box);
  opacity: 1;
  /* Reset opacity to 1 */
  transition: opacity 0.3s ease;
}

/* Apply fixed height ONLY to cards (non-mosaic items) */
.portfolio-item:not(.mosaic-item) .portfolio-img {
  height: 200px;
}

.portfolio-item:hover .portfolio-img {
  opacity: 1;
}

.portfolio-info {
  padding: 20px;
  color: var(--theme-color);
}

.portfolio-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.portfolio-type {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-bottom: 15px;
  display: block;
}

.portfolio-desc {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.8;
}

/* =========================
   Photography Gallery (Image Grid) - REMOVED redudant styles causing crop
   ========================= */

/* =========================
   Ball Cursor
========================= */
#custom-cursor {
  position: fixed;
  width: 65px;
  height: 65px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 200000;
  /* Above lightboxes and popups */
  /* Parent handles movement and size transitions */
  transition: transform 0.1s ease-out, width 0.3s ease, height 0.3s ease;
  /* Ensure children can overflow for glow */
  overflow: visible;
}

.cursor-visual,
.cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--cursor-color, red);
  -webkit-mask-image: url('assets/blue_morphos.png');
  mask-image: url('assets/blue_morphos.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: translateZ(0);
  /* GPU Trigger */
  transition: background-color 0.3s ease;
}

/* The Sharp Image */
.cursor-visual {
  z-index: 2;
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--cursor-color));
  /* Tight immediate glow */
}

/* The Glow Layer (Blurred Copy) */
.cursor-glow {
  z-index: 1;
  filter: blur(15px);
  opacity: 0.8;
  background-color: var(--cursor-color) !important;
}

/* The Sharp Image */
.cursor-visual {
  z-index: 2;
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--cursor-color));
  /* Tight immediate glow */
}

/* The Glow Layer (Blurred Copy) */
.cursor-glow {
  z-index: 1;
  filter: blur(15px);
  /* Softer blur */
  opacity: 0.6;
  /* Less opaque */
  transform: scale(1.1);
  /* Slightly larger */
}



/* Link Styling in Content Bubbles */
.content-bubble.about-me-bubble a {
  color: var(--theme-color);
  text-decoration: underline;
  font-weight: bold;
  cursor: none !important;
  transition: opacity 0.2s ease;
}

.content-bubble.about-me-bubble a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* =========================
   Video Modal
========================= */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 3000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}

.video-modal.active {
  display: flex !important;
  opacity: 1;
}

.video-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  border: 1px solid red;
  box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
  max-width: 80vw;
  max-height: 80vh;
  width: fit-content;
  height: fit-content;
  z-index: 3005;
  box-sizing: border-box;
  overflow: hidden;
}

.video-container.no-frame {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: red;
  font-size: 5rem;
  cursor: pointer;
  z-index: 3100;
  transition: all 0.3s ease;
  user-select: none;
  opacity: 0.7;
  padding: 20px;
}

.modal-nav:hover {
  opacity: 1;
  text-shadow: 0 0 25px red;
  transform: translateY(-50%) scale(1.2);
}

.modal-prev {
  left: 40px;
}

.modal-next {
  right: 40px;
}

/* Series Column Responsiveness */
.series-column {
  width: 500px;
  min-width: 500px;
}

/* Hide arrows on mobile if they take too much space */
@media (max-width: 768px) {
  .modal-nav {
    font-size: 2.5rem;
    padding: 10px;
  }

  .modal-prev {
    left: 5px;
  }

  .modal-next {
    right: 5px;
  }

  .series-column {
    width: 100vw;
    min-width: 100vw;
  }

  .portfolio-grid {
    padding: 120px 20px 50px 20px !important;
    gap: 40px !important;
  }
}

.close-video {
  position: absolute;
  top: -40px;
  right: -0px;
  font-size: 2rem;
  color: white;
  cursor: none !important;
  transition: color 0.3s;
}

.close-video:hover {
  color: var(--theme-color);
}

#video-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 80vw;
  max-height: 80vh;
}

#video-content iframe,
#video-content video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
  border: none;
  outline: none;
}

/* Watch Button */
.watch-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
  background: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  cursor: none !important;
  transition: all 0.3s ease;
  border-radius: 4px;
  text-align: center;
}

.watch-btn:hover {
  background: var(--theme-color);
  color: black;
  box-shadow: 0 0 15px var(--theme-glow);
}

/* Image Modal Overrides */
.video-modal.image-mode .video-container {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  aspect-ratio: unset;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  /* Horizontal layout */
  justify-content: center;
  /* Center the image block */
  align-items: center;
  position: relative;
  /* For possible absolute arrow positioning if needed, but flex handles it */
}

/* Container for Image and Caption */
/* Container for Image and Caption */
/* Container for Image and Caption */
/* Container for Image and Caption */
.lightbox-inner-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Align contents to left edge */
  width: fit-content;
  /* Shrink to fit image width */
  margin: auto;
  /* Center in the flex container */
  max-width: 80vw;
  max-height: 90vh;
  position: relative;
  /* Establish stacking context */
  padding-top: 5vh;
  /* Space from top */
}

/* Arrows */
/* Arrows */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  /* Adjusted size */
  color: rgba(255, 255, 255, 0.7);
  cursor: none !important;
  padding: 20px;
  user-select: none;
  transition: all 0.3s ease;
  z-index: 3000;
  /* font-family: sans-serif; - Removed to inherit dolly-new */
  /* Clean font */
}

.lightbox-nav.prev {
  left: 20px;
}

.lightbox-nav.next {
  right: 20px;
}

.lightbox-nav:hover {
  color: var(--theme-color);
  transform: translateY(-50%) scale(1.2);
}



.lightbox-image {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  /* Allow natural width */
  object-fit: contain;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;
  display: block;
}

.lightbox-caption {
  text-align: left;
  color: white;
  margin-top: 10px;
  width: 100%;
  align-self: flex-start;
  /* Align to left of container */
}

.lightbox-title {
  font-size: 1.2rem;
  font-weight: bold;
  /* text-transform: uppercase; REMOVED */
  letter-spacing: 1px;
  color: white;
  /* White title */
  margin-bottom: 5px;
}

.lightbox-legend {
  font-size: 0.9rem;
  opacity: 0.7;
  font-style: normal;
  /* Check - no italics */
}

.video-modal.image-mode .close-video {
  /* Position fixed relative to viewport, responsive spacing */
  top: 5vmin;
  /* Moves with screen size */
  right: 5vmin;
  /* Moves with screen size */
  position: fixed;
  z-index: 2005;

  /* Make it a neat neat circle button */
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  /* Reasonable size */
  color: white;
  transition: all 0.3s ease;
  cursor: none !important;
}

.video-modal.image-mode .close-video:hover {
  background: var(--theme-color);
  color: black;
  transform: rotate(90deg);
  /* Playful interaction */
  box-shadow: 0 0 15px var(--theme-glow);
}

/* =========================
   Mosaic Layout & Detailed View
========================= */

/* Vertical Column for Films */
.portfolio-grid.mosaic-grid {
  /* Default for Film */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 300px;
  width: 100%;
  padding-bottom: 200px;
  /* Extra space at bottom */
}

/* Pics overrides */
.portfolio-grid.mosaic-grid.pics-view {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 60px;
  justify-items: unset;
  align-items: flex-start;
}

/* Scroll Animation Initial State (applied via JS scroll-trigger class) */


/* Scroll Animation: Pixel/Digital Reveal */
/* Scroll Animation: Smooth Fade In */
.scroll-trigger-pixel {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(2px);
  /* Very subtle blur */

  transition: opacity 1.2s ease-out, transform 1.2s ease-out, filter 1.2s ease-out;
  will-change: opacity, transform, filter;
}

.scroll-trigger-pixel.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Ensure film items have a proper width constraint in this flexible column */
.portfolio-grid.mosaic-grid:not(.pics-view) .portfolio-item.mosaic-item {
  width: auto;
  /* Let width follow height aspect ratio */
  height: auto;
  max-width: 90vw;
  max-height: 85vh;
  /* Ensure it fits vertically within viewport without scrolling */
  margin: 0 auto;
}

.portfolio-item.mosaic-item {
  display: block !important;
  /* Override flex */
  cursor: none !important;
  position: relative;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  height: auto;
  /* Respect aspect ratio */
  width: 100%;
}

.portfolio-item.mosaic-item .portfolio-img {
  width: 100%;
  height: auto !important;
  display: block;
  object-fit: contain !important;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.portfolio-item.mosaic-item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* Let clicks pass through if needed, though parent handles it */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-item.mosaic-item:hover video {
  opacity: 1;
  transform: none;
}

/* Hide image when video is playing to prevent border bleed */
.portfolio-item.mosaic-item.has-video:hover img {
  opacity: 0;
}

.portfolio-item.mosaic-item:hover img,
.portfolio-item.mosaic-item:hover video {
  transform: none;
  /* filter: grayscale(0%); REMOVED */
  opacity: 1;
}

.portfolio-item.mosaic-item.full-width-mosaic-item {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin: 150px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  /* Ensure no background clash */
}

.portfolio-item.mosaic-item.full-width-mosaic-item img {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  /* Prevent it from being too tall */
  margin: 0 auto;
  /* Center it */
}




/* Detailed View inside Modal */
.detailed-view-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  overflow: hidden;
}

.detailed-media-area {
  flex: 2;
  /* Takes up most space */
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.detailed-media-area iframe,
.detailed-media-area video,
.detailed-media-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detailed-info-area {
  flex: 1;
  /* Description below */
  padding: 20px;
  border-top: 1px solid var(--theme-color);
  background: rgba(20, 20, 20, 0.95);
  overflow-y: auto;
}

.detailed-title {
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  color: var(--theme-color);
}

.detailed-type {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  display: block;
  margin-bottom: 15px;
}

.detailed-desc {
  font-size: 1rem;
  line-height: 1.6;
}

/* Adjust Video Container for Detailed View */
.video-modal .video-container {
  /* Allow variable height for detailed view */
  height: 80vh;
  max-width: 900px;
  display: flex;
  /* Flex context for inner */
  flex-direction: column;
  aspect-ratio: auto;
  /* Reset aspect ratio restriction */
}

/* =========================
   Mosaic Overlay Styles
========================= */
.mosaic-item {
  position: relative;
}



/* Wrapper for Image/Video to handle relative positioning */
.mosaic-media-wrapper {
  position: relative;
  width: 100%;
  line-height: 0;
  /* Remove gap */
}

/* Title below image */
.mosaic-title {
  color: red;
  /* font-family: sans-serif; */
  /* Or custom font */
  font-size: 1rem;
  font-weight: normal;
  text-align: left;
  margin-top: 15px;
  /* Space between image and title */
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}

.mosaic-description {
  display: none;
  /* font-family: sans-serif; */
  font-size: 0.9rem;
  color: red;
  /* Updated to red */
  margin-top: 10px;
  text-align: left;
  line-height: 1.4;
  word-wrap: break-word;
}

.video-info-toggle {
  display: none;
  /* Hidden by default */
  color: red;
  cursor: none !important;
  margin-top: 5px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: left;
}

.mosaic-item.playing-inline .video-info-toggle {
  display: block;
  /* Show when playing */
}



/* =========================
   Play Icon Overlay
========================= */
.play-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  z-index: 5;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  /* Shadow on the SVG shape itself */
}

/* Ensure SVG is white */
.play-icon-overlay svg {
  fill: white;
  width: 80px;
  /* Adjust size here */
  height: 80px;
  display: block;
}

/* Hide Overlays when playing inline */
.mosaic-item.playing-inline .mosaic-overlay,
.mosaic-item.playing-inline .play-icon-overlay,
.mosaic-item.playing-inline img {
  display: none !important;
}

.mosaic-item.playing-inline video {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  cursor: none !important;
  /* Enable cursor for controls */
}

.portfolio-item.mosaic-item:hover .play-icon-overlay {
  transform: translate(-50%, -50%) scale(1.1);
  /* background: transparent; - kept transparent */
}

/* =========================
   Messy Mosaic (Pics Mode)
========================= */
/* =========================
   Messy Mosaic (Pics Mode) - FLEXBOX REFACTOR for Safe Staggering
========================= */
.portfolio-grid.mosaic-grid.pics-view {
  display: flex !important;
  /* Override grid */
  flex-direction: row;
  /* FORCE Row for pics to restore messy mosaic */
  flex-wrap: wrap;
  gap: 60px;
  /* Safe space between items */
  padding: 100px 40px;
  justify-content: center;
  align-items: flex-start;
  /* Important for unequal margins */
}

.portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item {
  width: 300px;
  /* Consistent width */
  margin: 0;
  transition: transform 0.3s ease;
  /* Remove z-index transition as it's less critical now */
}

/* Responsive Film Metadata */
.responsive-film-title {
  font-size: 1.1rem;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: bold;
}

.responsive-film-desc {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.8;
  margin-bottom: 20px;
}

.portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item:nth-child(odd) {
  margin-top: 0;
}

.portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item:nth-child(even) {
  margin-top: 80px;
  /* Push every second item down significantly */
}

.portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item:nth-child(3n) {
  margin-top: 40px;
  /* Varying offsets */
}

/* Hover effect - simple pop */
.portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item:hover {
  transform: scale(1.05);
  z-index: 10;
}

/* =========================
   Responsive Adjustments for Messy Mosaic
========================= */
/* =========================
   Responsive Adjustments for Messy Mosaic
========================= */
@media (max-width: 1200px) {
  .portfolio-grid.mosaic-grid.pics-view {
    gap: 30px;
  }

  /* Reduce offsets */
  .portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item:nth-child(even) {
    margin-top: 40px;
  }

  .portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item:nth-child(3n) {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .portfolio-grid.mosaic-grid.pics-view {
    gap: 20px;
    padding: 80px 20px;
    display: grid !important;
    /* Revert to simple grid for mobile */
    grid-template-columns: 1fr;
  }

  .portfolio-grid.mosaic-grid.pics-view .portfolio-item.mosaic-item {
    width: 100%;
    margin-top: 0 !important;
  }
}

/* =========================
   CRITICAL: FORCE VIDEO INTERACTION
   Use !important to override global cursor:none and any other blocking styles
========================= */
iframe,
video,
.mosaic-media-wrapper iframe,
.mosaic-media-wrapper video,
.video-container iframe,
.video-container video {
  cursor: auto !important;
  /* Restore default mouse cursor so you can see where you click */
  pointer-events: auto !important;
  /* Ensure clicks register */
  z-index: 1000 !important;
  /* Sit on top of everything */
}

/* Ensure the wrapper doesn't block it */
/* Ensure the wrapper doesn't block it */
.mosaic-media-wrapper {
  z-index: 50 !important;
}

/* Responsive Image for Film Section */
.portfolio-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Responsive Max Height */
  max-height: clamp(250px, 50vh, 600px) !important;
  /* Responsive Max Width relative to container */
  max-width: clamp(300px, 80vw, 800px) !important;
}

@media (min-width: 601px) and (max-width: 1100px) {
  .portfolio-img {
    /* Scale down significantly for square/windowed modes so sidebar + video fits */
    max-height: 40vh !important;
    max-width: 55vw !important;
    /* Leave room for sidebar (which is ~250px) */
  }
}

/* Responsive Video Titles */
.responsive-film-title {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  white-space: normal;
  text-align: left;
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  color: red;
}

/* Film item container - ensures title aligns with thumbnail */
.film-series-content .portfolio-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Left align everything */
  max-width: 800px;
  width: 100%;
}

/* =========================
   About Page Text Container
========================= */
.about-me-text-container {
  background: transparent;
  color: rgb(138, 43, 226) !important;
  /* Force lila */
  font-size: clamp(1rem, 2.2vh, 1.4rem);
  line-height: 1.6;
  text-align: left !important;
  width: 100%;
  max-width: 600px;
  position: absolute;
  top: 55%;
  left: 35%;
  /* Matching previous about-me-bubble position */
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
  padding: 0;
}

.about-me-text-container a {
  color: var(--theme-color);
  text-decoration: underline;
  font-weight: bold;
  cursor: none !important;
  transition: opacity 0.2s ease;
  display: inline-block;
}

.about-me-text-container a:hover {
  text-decoration: none;
  opacity: 1;
  /* Keep full opacity to show color clearly */
  color: var(--cursor-color) !important;
  /* Change to cursor color */
}

@media (max-width: 800px) {
  .about-me-text-container {
    left: 50%;
    width: 85%;
    text-align: left;
    padding: 0 20px;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* =========================
   Film Series Parallax/Sticky Layout
========================= */
.film-series-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 100px;
}

.film-series-wrapper::-webkit-scrollbar {
  display: none;
}

/* Each series row is a 3-column grid */
.film-series-row {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  width: 100%;
  gap: 60px;
  align-items: start;
  margin-bottom: 80px;
}

/* Sidebar (Left Column) */
.film-series-sidebar {
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.film-series-title {
  position: sticky;
  top: 15vh;
  color: red;
  opacity: 0.85;
  /* font-family: sans-serif; */
  font-size: 2rem;
  text-align: left;
  padding-left: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  white-space: normal;
  pointer-events: auto;
  z-index: 10;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Clickable series title link */
.series-title-link {
  color: red;
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.series-title-link:hover {
  color: #ff4444;
  text-decoration: underline;
}

.film-series-title:hover {
  color: var(--cursor-color);
}

/* Back button for series view */
.series-back-button {
  color: red;
  cursor: pointer;
  padding: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  transition: color 0.2s ease;
  grid-column: 1 / -1;
}

.series-back-button:hover {
  color: #ff4444;
  text-decoration: underline;
}

/* Content (Middle Column) */
.film-series-content {
  grid-column: 2;
  justify-self: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding-bottom: 80px;
}

/* Right Column (Years) */
.film-series-right {
  grid-column: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 100px;
  /* Match content gap */
  padding-top: 0;
}

/* Individual year display */
.film-year {
  color: red;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  opacity: 0.85;
  /* Match video height + gap roughly */
  min-height: 450px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 10px;
  position: relative;
}

.sticky-year {
  position: relative;
  /* changed from sticky to prevent overlap */
  top: auto;
  z-index: 5;
  height: auto;
  /* Allow it to collapse if needed, but min-height keeps spacing */
}

.year-link {
  color: red;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.year-link:hover {
  text-decoration: underline;
  color: var(--cursor-color);
}



/* =========================
   Responsive: Stacked Layout (< 1100px)
   "Layout for when there is not enough space"
========================= */
@media (max-width: 1100px) {
  .film-series-wrapper {
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    align-items: center;
  }

  .film-series-sidebar {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    text-align: center;
    position: static;
    pointer-events: auto;
  }

  .film-series-title {
    position: static;
    /* Remove sticky */
    text-align: center;
    padding-left: 0;
    width: 100%;
    font-size: 1.8rem;
  }

  .film-series-content {
    width: 100%;
    padding: 0 20px;
  }
}

/* Adjust responsive adjustments for intermediate or very small not needed as much due to clean stack */
@media (max-width: 600px) {
  .film-series-title {
    font-size: 1.5rem;
  }
}

/* =========================
   Filtered Series View Styles
   (When a specific series is active)
========================= */
.filtered-series-title {
  font-size: 2.5rem !important;
  /* Bigger, but not too big */
  text-align: center !important;
  /* Force center alignment */
  width: 100%;
  margin-bottom: 60px !important;
  pointer-events: none !important;
  /* Not clickable when already active */
  cursor: default !important;
}

/* FILM SPECIFIC: Stack the layout when filtered */
.filtered-series-wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0 !important;
  /* Gap handled by margin-bottom of title */
}

/* PICS SPECIFIC: Center data grid when filtered */
.filtered-series-title+.pics-view {
  justify-content: center;
}

/* Pics Series Title Hover */
.pics-series-title {
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.pics-series-title:hover {
  color: var(--color-home) !important;
  /* Yellow */
  text-decoration: underline;
}

/* Reset Sidebar constraints in filtered mode */
.filtered-series-wrapper .film-series-sidebar {
  width: 100%;
  height: auto;
  position: static;
  text-align: center;
}

/* Reset Title constraints in filtered mode */
.filtered-series-wrapper .film-series-title {
  position: static;
  padding-left: 0;
  width: 100%;
}

/* Ensure Film Title in Filtered Mode uses the class styles */
.film-series-title.filtered-series-title {
  font-size: 2.5rem;
}

/* Butterfly Drawing Description Text */
.butterfly-description {
  width: 80%;
  max-width: 800px;
  text-align: center;
  color: #0F52BA;
  font-family: inherit;
  font-size: 1.3rem;
  /* Bigger */
  line-height: 1.5;
  z-index: 40;
  margin-bottom: 60px;
}



.butterfly-description p {
  margin-bottom: 0;
}

/* Butterfly Controls */
.butterfly-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.05);
  padding: 15px 30px;
  border-radius: 50px;
  z-index: 30;
  margin: 0 auto 60px auto;
  width: fit-content;
}

.butterfly-btn {
  width: 280px;
  /* Fixed width for symmetry */
  padding: 15px 10px;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 50px;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black !important;
  /* Button text black */
}

.butterfly-btn:hover {
  transform: scale(1.05);
}

@media (max-width: 1100px) {
  .filtered-series-title {
    margin-bottom: 40px !important;
  }
}

/* Cursor Trail */
.cursor-trail {
  position: fixed;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--cursor-color, blueviolet);
  pointer-events: none;
  z-index: 9998;
  transform: translate3d(-50%, -50%, 0);
  animation: trail-fade 1.2s cubic-bezier(0.2, 0, 0.2, 1) forwards;
  filter: blur(2px);
  will-change: transform, opacity;
}

@keyframes trail-fade {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  30% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
}

/* Fix: Hide circles until positioned */
/* .floating-circle {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.floating-circle.ready {
    opacity: 1;
} */
/* Text Link Hover Effect */
.text-link:hover {
  color: var(--cursor-color) !important;
  border-bottom-color: var(--cursor-color) !important;
  text-decoration: none !important;
}

.text-series-title {
  color: var(--color-internal) !important;
  font-size: 2.5rem !important;
  margin: 80px 0 40px 0 !important;
  font-weight: normal !important;
  display: block !important;
  text-align: center !important;
}

.film-scroll-nav {
  position: fixed;
  top: 235px;
  font-size: 5rem;
  color: rgb(138, 43, 226);
  text-shadow: 0 0 25px rgba(138, 43, 226, 0.9);
  z-index: 2000;
  pointer-events: auto;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.6s ease, transform 0.3s ease;
  font-family: serif;
  padding: 0 20px;
  /* Prevent cropping */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#film-scroll-arrow-left {
  left: 20px;
}

#film-scroll-arrow-right {
  right: 20px;
}

.film-scroll-nav:hover {
  transform: scale(1.2);
}

.homepage-copyright {
  position: absolute;
  bottom: 30px;
  right: 40px;
  color: rgb(138, 43, 226);
  font-size: 0.9rem;
  opacity: 0.6;
  pointer-events: none;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .homepage-copyright {
    bottom: 20px;
    right: 20px;
    font-size: 0.8rem;
  }
}

@media (max-width: 800px) {
  .back-arrow {
    top: 60px !important;
    left: 40px !important;
  }

  .floating-circle {
    font-size: 1.5rem !important;
    /* Slightly smaller to fit 'Sewing' */
    padding: 10px !important;
  }

  /* Red X at top right for mobile modal */
  .close-video {
    top: 25px !important;
    right: 25px !important;
    color: red !important;
    font-size: 3rem !important;
    font-weight: bold !important;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    z-index: 10001;
    transform: scale(1.1);
  }
}