/* ==========================================
   CUSTOM FONT IMPORTS
   ========================================== */
@font-face {
  font-family: 'High Spirited';
  src: url('./assets/fonts/HighSpirited.ttf') format('truetype'); /* Update filename if needed */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barett Street';
  src: url('./assets/fonts/BarettStreet.ttf') format('truetype'); /* Update filename if needed */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Ultra';
  src: url('./assets/fonts/GothamUltraItalic.ttf') format('truetype'); /* Update filename if needed */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Bold';
  src: url('./assets/fonts/Gotham-Bold.otf') format('truetype'); /* Update filename if needed */
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* --- Your existing CSS continues below --- */
:root {
  --bg-cream: #F4EEDF;
  --accent-yellow: #eaa023;
  --text-slate: #667C88;
  --dark-bg: #0B0B0C;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ...rest of your code... */

/* ==========================================
   1. MASTER BASE STYLES
   ========================================== */
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* CRITICAL: Hides native scrollbar for GSAP */
  background-color: var(--bg-cream);
  font-family: 'Inter', sans-serif;
}

/* Slide Container Setup */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  z-index: 1;
  overflow: hidden;
  display: block; 
}

.slide:nth-child(1) {
  visibility: visible;
  z-index: 2;
}

/* Typography Classes */
.font-script { font-family: 'High Spirited', cursive; display: block; }
.font-bold { font-family: 'Gotham Ultra', sans-serif; font-style: italic; letter-spacing: -0.02em; }
.color-yellow { color: var(--accent-yellow); }
.color-slate { color: var(--text-slate); }
.color-white { color: #FFFFFF; }
.text-mask-wrapper { overflow: hidden; display: inline-block; }

/* ==========================================
   LOADING SCREEN / INTRO OVERLAY
   ========================================== */
#intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #1c1c1c, #4d4d4d);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.intro-content {
  text-align: center;
  opacity: 0; 
}

.intro-name {
  font-family: 'Barett Street', cursive;
  color: #EAA023;
  font-size: clamp(3.5rem, 8vw, 6.5rem); 
  margin-bottom: 12px;
  font-weight: normal; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

.intro-title {
  font-family: 'Gotham Bold', sans-serif;
  color: #f4eedf;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  letter-spacing: 0.15em; 
  text-transform: uppercase;
}

/* ==========================================
   FLOATING GLASS PILL NAVIGATION
   ========================================== */
.navbar {
  position: fixed;
  top: 30px; 
  left: 100px; 
  width: calc(100vw - 200px); 
  height: 80px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 0 40px; 
  border-radius: 100px; 
  z-index: 9998;
  background: rgba(244, 238, 223, 0.65); 
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); 
}

.nav-logo { height: 40px; width: auto; display: block; }
.nav-links { display: flex; gap: 3.5vw; }
.nav-links a {
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: #0B0B0C; 
  font-size: 1.05rem;
  transition: opacity 0.3s ease;
}

.nav-links a:hover { opacity: 0.5; }
.nav-action { height: 100%; display: flex; align-items: center; }

.btn-cv {
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: #0B0B0C;
  background-color: rgba(225, 217, 200, 0.9); 
  padding: 16px 32px;
  border-radius: 100px; 
  transition: all 0.3s ease;
}
.btn-cv:hover { background-color: #EAA023; color: #fff; }

/* ==========================================
   SLIDE 2: INTERLOCKING TYPOGRAPHY & SPLASH
   ========================================== */
.bg-splash {
  position: absolute;
  top: 50%;
  right: -5vw;
  transform: translateY(-50%);
  height: 115vh;
  width: auto;
  z-index: 1; 
  pointer-events: none; 
}

#slide-complex .text-group {
  position: absolute;
  bottom: 12vh; 
  left: 100px;  
  display: flex;
  flex-direction: column;
  z-index: 3;
}

#slide-complex .mask-script { position: relative; z-index: 4; padding-left: 20px; margin-left: -20px; padding-bottom: 30px; }
#slide-complex .font-script { font-size: clamp(6rem, 9vw, 10rem); line-height: 0.8; display: inline-block; }
#slide-complex .drop-cap { font-size: 1.4em; vertical-align: text-bottom; margin-right: 10px; }
#slide-complex .mask-bold { position: relative; z-index: 3; margin-top: -6vh; }
#slide-complex .font-bold { font-size: clamp(3.5rem, 6vw, 6rem); white-space: nowrap; line-height: 1; margin: 0; }

/* ==========================================
   SLIDE 3: CANVAS & TEXT LAYOUT
   ========================================== */
.canvas-container {
  position: absolute;
  top: 50%;
  left: 12vw; 
  transform: translateY(-50%);
  height: 90vh; 
  width: auto;
  z-index: 1;
  pointer-events: none;
}

#mountain-canvas {
  height: 100%;
  width: auto;
  object-fit: contain; 
  mix-blend-mode: darken; 
}

#slide-motion .text-group {
  position: absolute;
  top: 50%;
  left: 55vw; 
  transform: translateY(-40%); 
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  z-index: 3;
}

#slide-motion .mask-script { position: relative; z-index: 4; margin-bottom: -6vh; margin-left: 2vw; }
#slide-motion .font-script { font-size: clamp(8rem, 12vw, 14rem); line-height: 0.8; display: inline-block; }
#slide-motion .mask-bold { position: relative; z-index: 3; }
#slide-motion .font-bold { font-size: clamp(4.5rem, 7.5vw, 7rem); line-height: 0.85; margin: 0; }

/* ==========================================
   SLIDE 4: SHOWREEL & DRAGON
   ========================================== */
#slide-showreel .layer-bg, 
#slide-showreel .layer-fg, 
#slide-showreel .full-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* Base Layers */
#slide-showreel .layer-bg { z-index: 1; object-fit: cover; }
#slide-showreel .full-layer { z-index: 2; pointer-events: none; }

/* The Foreground Dunes (Forced to the absolute front) */
#slide-showreel .layer-fg { z-index: 5 !important; object-fit: cover; pointer-events: none; }

/* 1. Video Player Setup */
#slide-showreel .video-container {
  position: absolute;
  top: 45%; 
  left: 8vw; 
  transform: translateY(-50%);
  width: 50vw; 
  max-width: 1000px;
  pointer-events: auto; /* Clickable */
  z-index: 1;
}

.premium-video-box { width: 100%; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7); }
.native-showreel { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background-color: #000; }

/* 2. Text Group Setup (Anchored Right, Front of Sand) */
.showreel-label {
  position: absolute;
  bottom: 12vh; 
  right: 5vw; 
  z-index: 10 !important; 
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
}

/* Script Layer ("My") */
#slide-showreel .mask-script { 
  position: relative; 
  z-index: 10 !important; /* FORCED TO THE ABSOLUTE FRONT */
  
  /* THE CROPPING FIX: Expands the invisible animation box so the font isn't chopped */
  padding-bottom: 25vh; 
  padding-right: 5vw; 
  
  /* THE OVERLAP FIX: Counteracts the padding and forces the overlap */
  margin-bottom: -28vh; /* Drags the text vertically down into SHOWREEL */
  margin-right: 5vw; /* Pushes it horizontally to land directly over the "W" and "R" */
}

#slide-showreel .font-script { 
  font-size: clamp(14rem, 24vw, 26rem); 
  line-height: 0.8; 
  display: inline-block; 
}

/* Bold Layer ("SHOWREEL") */
#slide-showreel .mask-bold { 
  position: relative; 
  z-index: 1 !important; /* FORCED TO THE BACK */
}

#slide-showreel .font-bold { 
  font-size: clamp(4.5rem, 8vw, 8.5rem); 
  white-space: nowrap; 
  line-height: 1; 
  margin: 0; 
}

/* 3. Floating Dragon */
#slide-showreel .dragon-element {
  position: absolute;
  bottom: 35vh; 
  right: 8vw;  
  width: clamp(150px, 15vw, 220px); 
  pointer-events: none;
  z-index: 4;
}

#slide-showreel .showreel-action {
  position: absolute; /* Disconnects it from the video box entirely */
  bottom: -65px; /* Pushes it exactly below the video player */
  left: 0; /* Aligns it perfectly to the left edge of the video */
  z-index: 10;
  pointer-events: auto;
}

.btn-action {
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 28px;
  border-radius: 100px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  display: inline-block;
}

.btn-action:hover {
  background-color: var(--accent-yellow);
  color: #000000;
  border-color: var(--accent-yellow);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(234, 160, 35, 0.2);
}

/* ==========================================
   MARQUEE TICKER (Slide 4 Overlay)
   ========================================== */
.marquee-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--accent-yellow);
  padding: 12px 0;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-content {
  display: flex;
  font-family: 'Gotham Bold', sans-serif;
  color: var(--dark-bg);
  font-size: 1.2rem;
  text-transform: uppercase;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Continuous Idle Breath for Background Plates */
.layer-bg { transform: scale(1); animation: slow-breath 15s ease-in-out infinite alternate; }
@keyframes slow-breath { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }

/* ==========================================
   SLIDE 5: ABOUT ME 
   ========================================== */
#slide-about { padding: 0; }

#slide-about .layer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}

#slide-about .full-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

/* 1. Text Group (ANCHORED TOP: Physically prevents it from touching the mountains) */
.about-text-group {
  position: absolute;
  top: 16vh; /* Locks the text high up on the screen, just under the nav */
  left: 8vw; 
  width: 55vw; /* Keeps paragraphs wide and short */
  max-width: 900px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

/* 2. Heading Interlock */
#slide-about .about-heading { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
  margin-bottom: 2vh; 
}

#slide-about .mask-script { 
  position: relative; 
  z-index: 4; 
  margin-bottom: -5vh; /* Gentle tuck */
  margin-left: -2vw; 
  overflow: visible !important; 
}

#slide-about .font-script { 
  font-size: clamp(9rem, 13vw, 15rem); 
  line-height: 0.8; 
  display: inline-block; 
}

#slide-about .mask-bold { 
  position: relative; 
  z-index: 3; 
  margin-left: 11vw; /* Shifts ME precisely under the 'o' and 'u' */
}

#slide-about .font-bold { 
  font-size: clamp(3.5rem, 6vw, 6.5rem); 
  line-height: 1; 
  margin: 0; 
}

/* 3. Description Paragraphs */
.about-description {
  display: flex;
  flex-direction: column;
  gap: 1.5vh; 
}

.about-description p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1vw, 1.1rem); /* Slightly smaller to match your reference layout */
  line-height: 1.6;
  color: var(--text-slate);
  font-weight: 500;
  margin: 0;
}

/* 4. Giant Avatar (Taller, moved left, feet deep in grass) */
.avatar-element {
  position: absolute;
  bottom: 2vh; /* Plants feet lower on the screen */
  right: 12vw; /* Moves him away from the extreme right edge */
  height: 85vh; /* Scales him up so his head nears the top */
  width: auto;
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0px 30px 40px rgba(0,0,0,0.3)); 
}

/* ==========================================
   SLIDE 6: CONNECT / CONTACT
   ========================================== */
#slide-contact {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   padding: 0;
   display: block; 
}

/* 1. Swinging Telephone (Moved far left) */
.telephone-element {
   position: absolute;
   top: -5vh; 
   left: 5vw; /* CRITICAL FIX: Pushed all the way to the left margin */
   height: 85vh; 
   width: auto;
   object-fit: contain;
   z-index: 2;
   transform-origin: top center; 
}

/* 2. Text Group (Anchored Right) */
.contact-cta {
   position: absolute;
   top: 50%;
   right: 12vw; 
   transform: translateY(-50%);
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: flex-end; 
}

/* 3. Script Layer ("Let's") */
#slide-contact .mask-script { 
  position: relative; 
  z-index: 4; 
  margin-bottom: -6vh; /* CRITICAL FIX: Lifted up so it rests elegantly on the top edges of CONNECT */
  margin-right: 22vw; /* Pushes it left over the 'C' and 'O' */
  overflow: visible !important; 
}

#slide-contact .font-script { 
  font-size: clamp(12rem, 18vw, 20rem); 
  line-height: 0.8; 
  display: inline-block; 
}

/* 4. Bold Layer ("CONNECT") */
#slide-contact .mask-bold { 
  position: relative; 
  z-index: 3;
  padding-right: 20px; /* CRITICAL FIX: Expands the mask so the slanted 'T' doesn't get clipped */
  margin-right: -20px; /* Compensates for the padding so the text stays perfectly flush-right */ 
}

#slide-contact .font-bold { 
  font-size: clamp(5rem, 9vw, 9.5rem); 
  white-space: nowrap; 
  line-height: 1; 
  margin: 0; 
}

/* 5. Button Layer ("Heya!") - Scaled down 20% */
#slide-contact .btn-wrapper {
  margin-top: 2vh; 
  overflow: visible !important; 
}

.btn-heya {
  display: inline-block;
  text-decoration: none;
  font-family: 'Gotham Ultra', sans-serif; 
  font-style: italic; 
  font-size: clamp(1.6rem, 2.8vw, 3.2rem); /* Reduced from 4rem to 3.2rem cap */
  color: var(--bg-cream); 
  background-color: var(--accent-yellow);
  padding: 10px 32px; /* Padding mathematically reduced by 20% */
  border-radius: 12px; /* Slightly tighter rounding for the smaller scale */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-heya:hover {
  background-color: var(--dark-bg);
  color: var(--accent-yellow);
  transform: scale(1.05); 
}

/* ==========================================
   PREMIUM LIGHT FOOTER (MATCHING WEBSITE THEME)
   ========================================== */
.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: transparent; 
  padding: 5vh 10vw 2vh 10vw; 
  border-top: 1px solid rgba(102, 124, 136, 0.2); 
  z-index: 5;
  font-family: 'Inter', sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4vh;
}

/* Left Column: Brand */
.footer-brand {
  width: 35%;
}

.footer-name {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 1.4rem;
  color: var(--dark-bg); 
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.footer-tagline {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-slate); 
}

/* Center Column: Links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-slate);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent-yellow);
}

/* Right Column: Contact */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.footer-contact p, .footer-contact a {
  color: var(--text-slate);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

.footer-contact a:hover {
  color: var(--accent-yellow);
}

.footer-contact .color-yellow {
  color: var(--accent-yellow);
  margin-left: 4px;
}

/* Bottom Copyright */
.footer-bottom {
  text-align: center;
  padding-top: 2vh;
  font-size: 0.75rem;
  color: var(--text-slate);
  opacity: 0.7; 
}

/* ==========================================
   SLIDE: MY WORK (CINEMATIC HYBRID)
   ========================================== */
#slide-my-work {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  padding: 0;
  background-color: var(--bg-cream);
  overflow: hidden;
  display: block;
}

/* Accordion Container */
#slide-my-work .accordion-container {
  position: absolute;
  top: 13vh;    
  bottom: 16vh !important; 
  left: 0;
  width: 100vw;
  display: flex !important;
  flex-direction: row !important;
  z-index: 2;
  cursor: none; 
}

/* Footer Fix */
#slide-my-work .site-footer {
  background-color: var(--bg-cream);
  padding-top: 3vh;
  padding-bottom: 2vh;
  z-index: 10;
}

/* 1. Base Panel Setup (Dark Mode) */
#slide-my-work .accordion-panel {
  position: relative;
  flex-grow: 1; 
  flex-shrink: 1;
  flex-basis: 0;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.15); 
  overflow: hidden;
  background-color: var(--dark-bg); /* Pitch black behind videos */
  transition: flex-grow 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
  color: #FFFFFF;
}

#slide-my-work .accordion-panel:last-child { border-right: none; }
#slide-my-work .accordion-panel.active { flex-grow: 6; }

/* 2. The Video Engine (Dark & Blurred when inactive) */
#slide-my-work .panel-bg-video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
  filter: grayscale(100%) blur(12px) brightness(0.25);
  transform: scale(1.1);
  transition: filter 0.8s ease, transform 0.8s ease;
}

#slide-my-work .panel-bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
#slide-my-work .video-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%); z-index: 2; }

/* Active Video State */
#slide-my-work .accordion-panel.active .panel-bg-video { 
  filter: grayscale(0%) blur(0px) brightness(0.85); 
  transform: scale(1);
}

/* 3. Inactive Content (The Blueprint Grid from Image 2) */
#slide-my-work .panel-content-inactive {
  position: absolute;
  inset: 0;
  padding: 3vh 1.5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  transition: opacity 0.4s ease;
}

#slide-my-work .accordion-panel.active .panel-content-inactive { opacity: 0; pointer-events: none; }

.meta-top, .meta-bottom { 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.meta-top .num { font-size: 2rem; color: rgba(255,255,255,0.4); font-weight: 300; margin-bottom: 5px; }
.meta-top .cat { font-size: 0.65rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.meta-bottom .desc { font-size: 0.55rem; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 15px;}
.meta-bottom .meta-line { width: 10px; height: 1px; background-color: rgba(255,255,255,0.5); }

.title-vertical {
  font-family: 'Gotham Bold', sans-serif;
  font-size: clamp(2rem, 3.5vw, 4.5rem);
  margin: 0;
  writing-mode: vertical-rl; 
  transform: rotate(180deg); 
  letter-spacing: 0.05em;
  color: #FFFFFF; /* White so it pops against dark video */
}

/* 4. Active Content (Centered Yellow Script from Image 1) */
#slide-my-work .panel-content-expanded {
  position: absolute;
  top: 0; left: 0;
  width: 100%; min-width: 60vw; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
  opacity: 0;
  transform: translateX(-30px); 
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0.1s; 
  pointer-events: none;
}

#slide-my-work .accordion-panel.active .panel-content-expanded { opacity: 1; transform: translateX(0); pointer-events: auto; }
#slide-my-work .panel-text-group { display: flex; flex-direction: column; align-items: center; }

/* Restored Yellow Script Typography */
#slide-my-work .panel-text-group .mask-script { position: relative; z-index: 2; margin-bottom: -5vh; margin-left: -5vw; }
#slide-my-work .panel-text-group .font-script { font-size: clamp(8rem, 12vw, 15rem); line-height: 0.8; color: var(--accent-yellow); font-family: 'High Spirited', cursive; }
#slide-my-work .panel-text-group .mask-bold { position: relative; z-index: 1; }
#slide-my-work .panel-text-group .font-white { color: #FFFFFF; font-size: clamp(5rem, 8vw, 10rem); line-height: 1; margin: 0; font-family: 'Gotham Ultra', sans-serif; font-style: italic; letter-spacing: -0.02em;}
#slide-my-work .panel-subtitle { margin-top: 2vh; font-family: 'Inter', sans-serif; font-size: clamp(1.2rem, 1.5vw, 1.8rem); color: #E2E2E2; font-weight: 400; letter-spacing: 0.02em; }

/* 5. Custom Cursor */
.magnetic-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4); 
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; 
  z-index: 9999;
  opacity: 0; 
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--accent-yellow); 
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.4;
}

/* ==========================================
   DARK MODE OVERRIDES (MY WORK PAGE ONLY)
   ========================================== */
   
/* 1. Turn the master background pitch black */
#slide-my-work {
  background-color: var(--dark-bg) !important;
}

/* 2. Dark Mode Navigation Header */
#slide-my-work .navbar {
  background: rgba(11, 11, 12, 0.7) !important; 
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#slide-my-work .nav-links a {
  color: #FFFFFF !important;
}

#slide-my-work .nav-links a:hover,
#slide-my-work .nav-links a.active {
  color: var(--accent-yellow) !important;
}

/* Inverts your black signature logo to pure white */
#slide-my-work .nav-logo {
  filter: invert(1) brightness(100) !important; 
}

#slide-my-work .btn-cv {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

#slide-my-work .btn-cv:hover {
  background-color: var(--accent-yellow) !important;
  color: var(--dark-bg) !important;
}

/* 3. Dark Mode Footer */
#slide-my-work .site-footer {
  background-color: var(--dark-bg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#slide-my-work .footer-name {
  color: #FFFFFF !important;
}

#slide-my-work .footer-tagline,
#slide-my-work .footer-links a,
#slide-my-work .footer-contact p,
#slide-my-work .footer-contact a,
#slide-my-work .footer-bottom {
  color: rgba(255, 255, 255, 0.5) !important;
}

#slide-my-work .footer-links a:hover,
#slide-my-work .footer-contact a:hover {
  color: var(--accent-yellow) !important;
}

/* ==========================================
   MY WORK PAGE (Scroll, Scaling & Footer Fix)
   ========================================== */

/* 1. Unlock the body to allow natural scrolling */
body.work-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: var(--dark-bg) !important;
}

/* 2. Convert the master slide from a locked box into a flowing flex column */
body.work-page #slide-my-work {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* 3. Scale the accordion for 2880px screens & remove the black bands */
body.work-page #slide-my-work .accordion-container {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  width: 96% !important;
  max-width: 2600px !important; 
  height: 88vh !important; /* Massively increased to swallow the empty black space */
  min-height: 700px !important;
  /* 110px top (tucks neatly under the navbar) | auto sides | 150px bottom */
  margin: 110px auto 150px auto !important; 
}

/* 4. Release the footer from absolute positioning and lock it to the bottom */
body.work-page #slide-my-work .site-footer {
  position: relative !important;
  bottom: auto !important;
  margin-top: auto !important;
  background-color: var(--dark-bg) !important;
  z-index: 10 !important;
}