/* Import image optimization styles */
@import url('image-optimization.css');

/* Hide Locomotive Scroll custom scrollbar */
.c-scrollbar {
  display: none !important; 
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: AvgLight;
  color: #1a1a1a;
}

body {
  overscroll-behavior: none;
  font-variation-settings: normal;
  font-feature-settings: normal;
  z-index: 2;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Force clean white backgrounds on About/Contact (mobile-safe) */
body.about-page,
body.contact-page,
body.about-page #main,
body.contact-page #main,
body.about-page [data-scroll-container],
body.contact-page [data-scroll-container],
body.about-page .scroll-content,
body.contact-page .scroll-content {
  background-color: #ffffff;
}

@media (max-width: 868px) {
  body.about-page,
  body.contact-page,
  body.about-page #main,
  body.contact-page #main,
  body.about-page [data-scroll-container],
  body.contact-page [data-scroll-container],
  body.about-page .scroll-content,
  body.contact-page .scroll-content,
  body.about-page .hero,
  body.contact-page .hero,
  body.about-page .about,
  body.contact-page .tabs_block,
  body.contact-page .right_contact_details,
  body.contact-page .contact_details,
  body.about-page #footerContainer,
  body.contact-page #footerContainer,
  body.about-page footer,
  body.contact-page footer {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
}

/* Prevent horizontal scroll at all viewport sizes */
html {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Hard-stop horizontal overflow from off-canvas elements */
html,
body,
#main,
[data-scroll-container],
.scroll-content {
  overflow-x: clip;
}

/* Ensure all containers respect viewport width */
#main,
[data-scroll-container],
.scroll-content {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Hide all content by default - show only when loader completes */
/* This prevents flashing before loader is visible */
#main,
[data-scroll-container],
.scroll-content,
.hero,
nav {
  visibility: hidden;
  opacity: 0;
}

/* Ensure loader is always visible when present */
.loader {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 99999 !important;
}

/* Show content only when loader is complete */
body:not(.loader-active) #main,
body:not(.loader-active) [data-scroll-container],
body:not(.loader-active) .scroll-content,
body:not(.loader-active) .hero,
body:not(.loader-active) nav {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-track {
  display: none;
}

::-moz-selection {
  color: rgb(255, 255, 255);
  background: #000;
}

::selection {
  color: rgb(255, 255, 255);
  background: #000;
}

html.has-scroll-smooth {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: visible;
}

.c-scrollbar_thumb {
  background: #000;
  opacity: 1;
}

@font-face {
  font-family: AvgLight;
  src:
    url(/assets/fonts/ZenMaruGothic-Light.woff2) format("woff2"),
    url(/assets/fonts/ZenMaruGothic-Light.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: AvgBold;
  src:
    url(/assets/fonts/ZenMaruGothic-Bold.woff2) format("woff2"),
    url(/assets/fonts/ZenMaruGothic-Bold.ttf) format("truetype");
  font-display: swap;
}

/* Preloader styles */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10001;
}

.preloader-bar-progress {
  width: 0%;
  height: 2px;
  background: #000;
  transition: width 0.3s ease;
  margin-bottom: 20px;
  z-index: 10001;
}

.preloader-text {
  font-family: AvgLight;
  font-size: 1.6rem;
  color: #000;
  z-index: 10001;
}

.scroll-content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  opacity: 1 !important;
  visibility: visible !important;
  /* CRITICAL: Removed will-change: transform to prevent interference with Locomotive Scroll parallax */
  /* will-change: transform; REMOVED - causes parallax calculation issues */
  z-index: var(--z-project-links);
}

.preloader-active .scroll-content {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10001;
}

h1, h2, h3, h5 {
  transition: all 0.3s ease-in-out;
}

h1 {
  font-size: 6.4rem;
  line-height: 100%;
  font-family: AvgBold;
  letter-spacing: -0.3rem;
}

h2 {
  font-size: 4.8rem;
  font-family: AvgBold;
  letter-spacing: -0.2rem;
}

h3 {
  font-size: 3rem;
  letter-spacing: -0.05rem;
  font-family: AvgBold;
}

h5 {
  font-size: 2rem;
  letter-spacing: -0.05rem;
  font-family: AvgBold;
}

p {
  font-size: 1.6rem;
  line-height: 140%;
  font-family: AvgLight;
}

a {
  text-decoration: none;
  color:#000666;
  transition: all 0.3s ease-in-out;
  border-bottom: none;
}

.headerH {
  font-size: 9rem;
  letter-spacing: -0.4rem;
  transition: all 0.3s ease-in-out;
  position: relative; /* Required for z-index to work */
  z-index: var(--z-nav) !important; /* Same z-index as nav (9999) - mouse trail will appear behind */
  /* Prevent header from triggering ScrollTrigger recalculations */
  will-change: auto !important; /* Don't optimize for transforms - prevent recalculation triggers */
  transform: none !important; /* Ensure no transforms that could trigger recalculations */
}

/* ======================== 3D Layered Text Effects ======================== */
/* Based on CSS-Tricks: https://css-tricks.com/3d-layered-text-motion-and-variations/ */

/* Shared styles for layered text */
.layered-text-scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  /* Allow overflow for wobbling animation */
  overflow: visible;
  /* Ensure container is tall enough for wobbling text */
  min-height: 1.5em;
  padding: 0.5em 0;
  /* Base responsive font size - scales with viewport */
  font-size: clamp(6.66rem, 8vw, 9rem);
  /* Use flexbox for reliable centering during resize - more stable than inline-block + margin: auto */
  /* CRITICAL: Ensure layered text is above mouse trail (999) but below nav (9999) */
  z-index: 1000;
  /* Ensure pointer events work correctly */
  pointer-events: auto;
}

.layered-text-layers {
  position: relative;
  transform-style: preserve-3d;
  display: inline-block;
  width: auto;
  height: auto;
  white-space: nowrap;
  word-break: keep-all;
  /* Ensure container accommodates wobbling animation */
  min-height: 1.5em;
  padding: 0.5em 0;
  transition: all 0.3s ease-in-out;
  /* Center the layers container - use flexbox on parent (.layered-text-scene) for reliable centering */
  margin: 0 auto;
  text-align: center;
  /* CRITICAL: Do NOT use transform here - it conflicts with child layer transforms */
  /* Parent (.layered-text-scene) uses flexbox centering which is more reliable during resize */
}

.layered-text-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
  white-space: nowrap !important;
  /* Prevent text wrapping at all costs */
  word-break: keep-all;
  overflow-wrap: normal;
  /* Ensure all layers are perfectly aligned - no visual duplication */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Layer offset for 3D depth - layers stack in Z space (CSS-Tricks approach) */
  --layer-offset: 0.05em;
  /* Transform combines centering (translateX) with Z-depth */
  /* Base transform: center with translateX(-50%) and add Z-depth */
  transform: translateX(-50%) translateZ(calc(var(--i) * var(--layer-offset)));
  /* Ensure perfect alignment - layers should overlap exactly */
  transform-origin: center center;
  margin: 0;
  padding: 0;
  /* CRITICAL: Don't use "transition: all" for floating layers - it interferes with animation */
  /* transition: all 0.3s ease-in-out; */
  /* All layers visible - they create the 3D depth effect when animated */
  /* Add border to text for better visibility - color depends on text color */
  /* Default: black border for white text (about page) */
  -webkit-text-stroke: 2px black;
  paint-order: stroke fill;
  /* CRITICAL: Ensure all layers are visible by default */
  visibility: visible;
  opacity: 1;
  display: block;
}

.layered-text-base {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(45%);
  pointer-events: none;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}

/* Contact page: pink border for black text */
.layered-text-pulsing .layered-text-base .layered-text-layer {
  color: white;
  -webkit-text-stroke: 2px #FF66CC;
  stroke:2px solid #FF66CC;
  transition: all 0.3s ease-in-out;
}

.layered-text-scene .layered-text-pulsing:hover {
  color: white;
  -webkit-text-stroke: 2px solid #FF66CC;
  stroke: 2px solid #FF66CC;
  transition: all 0.3s ease-in-out;
}
.layered-text-pulsing .layered-text-layer:hover {
  color: white;
  -webkit-text-stroke: 2px solid black;
  stroke: 2px solid black;
  transition: all 0.3s ease-in-out;
}
/* ======================== Responsive Layered Text ======================== */
/* Scale layered text relative to viewport on mobile devices */
@media (max-width: 868px) {
  .layered-text-scene {
    font-size: clamp(4.5rem, 10vw, 6.66rem);
  }
  
  /* Adjust layer offset for smaller screens */
  .layered-text-layer {
    --layer-offset: 0.03em;
  }
  
  /* Adjust border width for smaller text */
  .layered-text-layer {
    -webkit-text-stroke: 1.5px black;
    stroke: 1.5px solid black;
  }
  
  .layered-text-pulsing .layered-text-layer {
    -webkit-text-stroke: 1.5px #FF66CC;
    stroke: 1.5px solid #FF66CC;
  }
}

@media (max-width: 600px) {
  .layered-text-scene {
    font-size: clamp(3rem, 8vw, 4.5rem);
  }
  
  .layered-text-layer {
    --layer-offset: 0.02em;
  }
  
  .layered-text-layer {
    -webkit-text-stroke: 1px black;
    stroke: 1px solid black;
  }
  
  .layered-text-pulsing .layered-text-layer {
    -webkit-text-stroke: 1px #FF66CC;
    stroke: 1px solid #FF66CC;
  }
}

@media (max-width: 480px) {
  .layered-text-scene {
    font-size: clamp(2.2rem, 7vw, 3rem);
  }
  
  .layered-text-layer {
    --layer-offset: 0.015em;
  }
  
  .layered-text-floating .layered-text-layer {
    -webkit-text-stroke: 1px black;
    stroke: 1px solid black;
  }
}

/* ======================== Wobble + Float Effect (About Page) ======================== */
.layered-text-scene {
  display: flex;
}
.layered-text-wobble-float .layered-text-layers {
  animation: hover 2s infinite ease-in-out alternate;
}

@keyframes hover {
  from { transform: translateZ(0.3em); }
  to { transform: translateZ(0.6em); }
}

.layered-text-wobble-float .layered-text-layer {
  animation: wobble 8s infinite linear;
}

@keyframes wobble {
  from { transform: translateX(-50%) translateZ(calc(var(--i) * var(--layer-offset))) rotate(0deg) rotateX(20deg) rotate(360deg); }
  to { transform: translateX(-50%) translateZ(calc(var(--i) * var(--layer-offset))) rotate(360deg) rotateX(20deg) rotate(0deg); }
}

.layered-text-wobble-float .layered-text-base {
  color: transparent;
  animation: shadow 2s infinite ease-in-out alternate;
}

@keyframes shadow {
  from { text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3); }
  to { text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.5); }
}

/* ======================== Pulsing with Layer Delay (Contact Page) ======================== */
.layered-text-pulsing .layered-text-layer {
  --delay: calc(var(--n) * 0.3s);
  animation: pulsing 2s var(--delay) infinite ease-out;
}

.layered-text-pulsing .layered-text-base {
  --delay: 0s;
  animation: pulsing-base 2s var(--delay) infinite ease-out;
}

@keyframes pulsing {
  0%, 100% { 
    transform: translateX(-50%) translateZ(calc(var(--i) * var(--layer-offset))) scale(1); 
  }
  20% { 
    transform: translateX(-50%) translateZ(calc(var(--i) * var(--layer-offset))) scale(1.2); 
  }
}

@keyframes pulsing-base {
  0%, 100% { 
    transform: scale(1); 
  }
  20% { 
    transform: scale(1.2); 
  }
}

/* ======================== Floating Text Effect (Index Page - .foxHeader) ======================== */
/* CRITICAL: Ensure .foxHeader and its floating text are always above mouse trail (z-index: 999) */
.foxHeader {
  position: relative;
  z-index: 20000 !important; /* Above mouse trail (999) and nav (9999) */
  /* Ensure header is always visible */
  visibility: visible !important;
  opacity: 1 !important;
  /* CRITICAL: Prevent Locomotive Scroll from applying transforms - keep header static */
  transform: translateZ(0) !important;
  will-change: auto !important;
  /* CRITICAL: Don't use isolation: isolate - it creates a stacking context that traps layers */
  /* Individual layers have their own z-index values that work in global context */
  /* Ensure proper centering */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CRITICAL: Exclude hero section containing .foxHeader from Locomotive Scroll transforms */
.hero .foxHeader,
.hero-content .foxHeader,
header.hero .foxHeader,
.hero .foxHeader .layered-text-floating,
.hero-content .foxHeader .layered-text-floating,
header.hero .foxHeader .layered-text-floating {
  /* Prevent Locomotive Scroll from tracking this element */
  transform: translateZ(0) !important;
  will-change: auto !important;
}

/* CRITICAL: Exclude hero section itself from Locomotive Scroll parallax on index page */
/* Only apply to hero section that contains .foxHeader (index page) */
.hero:has(.foxHeader),
header.hero:has(.foxHeader) {
  /* Prevent Locomotive Scroll from applying transforms to the hero section */
  transform: translateZ(0) !important;
  will-change: auto !important;
}

.layered-text-floating {
  /* CRITICAL: Ensure floating text scene is above mouse trail (z-index: 999) */
  z-index: 20000 !important;
  position: relative;
  /* Ensure animation never stops */
  animation-play-state: running !important;
  /* Ensure scene is always visible */
  visibility: visible !important;
  opacity: 1 !important;
  /* CRITICAL: Don't use isolation: isolate - it creates a stacking context that prevents layers from going above mouse trail */
  /* Instead, rely on high z-index values on individual layers */
  /* CRITICAL: Keep perspective for 3D depth effect */
  /* Don't set transform: translateZ(0) - it interferes with 3D transforms */
  /* CRITICAL: Override base .layered-text-scene styles that cause vertical stacking */
  /* Remove min-height and padding that cause layers to stack vertically */
  min-height: auto !important;
  padding: 0 !important;
  /* Ensure proper centering */
  display: flex;
  justify-content: center;
  align-items: center;
  /* CRITICAL: Allow overflow for 3D depth and animation */
  overflow: visible !important;
}

/* CRITICAL: Match CodePen structure - .layeredText contains visible span and layers */
.layered-text-floating-text {
  position: relative;
  display: inline-block;
  /* Match CodePen's .layeredText structure */
  /* CRITICAL: Allow overflow for 3D depth and animation */
  overflow: visible !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

.layered-text-floating-text > span {
  /* Visible text span - like CodePen's <span>Floating</span> */
  position: relative;
  z-index: 20001;
  display: inline-block;
}

.layered-text-floating .layered-text-layers {
  animation: float-container 3s ease-in-out infinite;
  /* Ensure animation continues during hover and when mouse trail is active */
  animation-play-state: running !important;
  /* Prevent any interference from mouse trail */
  pointer-events: none;
  /* CRITICAL: Match CodePen - layers container is absolutely positioned to overlap visible text */
  /* Position it to match the visible text (centered) */
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: none !important;
  /* height is set dynamically in JavaScript using Math.ceil(Math.max(...)) */
  /* CRITICAL: Override base .layered-text-layers styles that cause vertical stacking */
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  /* CRITICAL: Use visible overflow to prevent text clipping during animation */
  /* Animation moves text up (-8px) and 3D depth extends beyond container */
  overflow: visible !important;
  /* CRITICAL: Enable 3D transforms so translateZ creates depth */
  transform-style: preserve-3d !important;
  /* CRITICAL: Higher z-index to ensure container is above mouse trail (z-index: 999) */
  z-index: 20000 !important;
}

@keyframes float-container {
  0%, 100% { 
    /* CRITICAL: Preserve the translateX(-50%) centering from initial transform */
    transform: translateX(-50%) translateY(0) translateZ(0); 
  }
  50% { 
    /* CRITICAL: Preserve the translateX(-50%) centering during animation */
    transform: translateX(-50%) translateY(-15px) translateZ(0.2em); 
  }
}

/* CRITICAL: Match CodePen's .layer structure exactly */
.layered-text-floating .layered-text-layer {
  --delay: calc(var(--n) * 0.15s);
  /* CRITICAL: Increase layer offset for more visible 3D depth (like CodePen) */
  --layer-offset: 0.08em; /* Increased from 0.05em for more visible depth */
  /* CRITICAL: Match CodePen - layers are absolutely positioned and overlap */
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  /* CRITICAL: Initial transform with translateZ for 3D depth - layers stack in Z-space */
  /* Use var(--i) directly (starts from 1) to create depth from first layer */
  transform: translateX(-50%) translateY(0) translateZ(calc((var(--i) - 1) * var(--layer-offset))) rotateX(0deg) !important;
  animation: float-layer 3s var(--delay) ease-in-out infinite !important;
  /* CRITICAL: Override base "transition: all" to only transition color (not transform) */
  transition: color 0.3s ease-in-out !important;
  /* Ensure animation continues during hover and when mouse trail is active - NEVER pause */
  animation-play-state: running !important;
  /* Prevent pointer events from interfering with animation */
  pointer-events: none !important;
  /* CRITICAL: z-index is set explicitly in JavaScript for each layer */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  /* Ensure proper color inheritance */
  color: inherit;
  /* CRITICAL: Ensure layers scroll with their parent container */
  will-change: transform;
  /* CRITICAL: Override base layer stroke to match floating effect */
  -webkit-text-stroke: 1.5px solid black !important;
  stroke: 1.5px solid black !important;
  /* CRITICAL: Ensure layers are ALWAYS visible, independent of mouse trail state */
  visibility: visible !important;
  opacity: 1 !important;
}

@keyframes float-layer {
  0%, 100% { 
    /* CRITICAL: Preserve translateZ offset for 3D depth throughout animation */
    transform: translateX(-50%) translateY(0) translateZ(calc((var(--i) - 1) * var(--layer-offset))) rotateX(0deg) !important; 
    opacity: 1;
  }
  50% { 
    /* CRITICAL: Preserve translateZ offset and add animation movement */
    transform: translateX(-50%) translateY(-8px) translateZ(calc((var(--i) - 1) * var(--layer-offset) + 0.1em)) rotateX(5deg) !important; 
    opacity: 0.9;
  }
}

/* Floating text effect - inherit color from parent .foxHeader */
/* Note: Color inheritance is handled above, this section removed to avoid duplicate rules */

/* CRITICAL: Ensure the last layer (highest index, should be on top visually) is animated and visible */
/* The last layer should have the highest z-index and be fully animated - it IS part of the animation */
/* CRITICAL: Last child should animate exactly like all other layers */
/* No special handling needed - the base .layered-text-floating .layered-text-layer rule applies */
/* z-index is set in JavaScript to 30000 for last layer */

/* Base visible text removed - all layers are now animated */
/* No separate base text to avoid off-center positioning issues */

/* Hover effect for floating text - match .foxHeader hover color */
/* CRITICAL: Only change color, don't interfere with animation */
.foxHeader:hover .layered-text-floating .layered-text-layer {
  color: #FF66CC !important;
  -webkit-text-stroke: 1.5px solid black;
  stroke: 1.5px solid black;
  /* Keep animation running */
  animation-play-state: running !important;
  /* Only transition color */
  transition: color 0.3s ease-in-out !important;
}

/* Hover effect applies to all layers including last-child via the general rule */
/* No special handling needed for last-child */

/* CRITICAL: Last-child uses same hover rule as all other layers */
/* No special handling needed - the general hover rule applies to all layers including last-child */

/* Ensure the scene container doesn't block pointer events but allows hover */
/* CRITICAL: Always visible, independent of mouse trail state */
.layered-text-floating {
  pointer-events: auto;
  visibility: visible !important;
  opacity: 1 !important;
}

/* But individual layers should not block pointer events */
.layered-text-floating .layered-text-layer {
  pointer-events: none !important;
  /* CRITICAL: Always visible, even when mouse trail hides */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure hover effects still work */
.layered-text-scene .layered-text-base:hover .layered-text-layer {
  color: white;
  -webkit-text-stroke: 1.5px solid black;
  stroke: 1.5px solid black;
  transition: color 0.3s ease-in-out;
}

.headerH .layered-text-layer {
  color: white;
  -webkit-text-stroke: 1.5px solid black;
  stroke: 1.5px solid black;
  transition: color 0.3s ease-in-out;
}
/* Hover effect for headers with layered text */
.headerH:hover .layered-text-layer {
  color: #FF66CC;
  -webkit-text-stroke: 1.5px solid black;
  stroke: 1.5px solid black;
  transition: color 0.3s ease-in-out;
}

.headerH-sub {
    position: relative;
  bottom: -66.6px;
  font-size: 2rem;
  letter-spacing: -0.05rem;
  font-family: AvgBold;
}

/* Portal clone of headerH - appears above mouse trail when active */
.headerH-portal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out !important;
  cursor: default;
  }

.headerH-portal:hover {
  color: #FF66CC !important;
  transition: color 0.3s ease-in-out !important;
}

.menu {
  transition: all 0.3s ease-in-out;
  }



.foxLogo1 {
  position: relative;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  top: 0;
  left:-6.66px;
  display: inline-block;
  background-image: var(--fox-logo, url('../../assets/Fox-2.png'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in-out;
}

/* foxLogo1 now uses background-image via CSS, not img tag */

.foxLogo2 {
  position: relative;
  top: clamp(1rem, 3.33vw, 3.33rem);
  /* Responsive width that scales with viewport */
  width: clamp(200px, 100vw, 500px);
  height: auto;
  background-image: var(--fox-logo, url('../../assets/Fox-2.png'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in-out;
  z-index: 666;
}
/* used to prevent the gap in the nav on mobile */
nav[data-scroll-sticky] {
  height: auto;
}
@media (min-width: 869px) {
  nav[data-scroll-sticky] {
    height: auto;
  }
}

.foxText {
  position: relative;
  font-size: 2.5rem;
  font-family: avgBold;
  display: flex;
  align-items: center;
  letter-spacing: 1rem;
  transition: all 0.3s ease-in-out;
  left: 50%;
  margin-top: 0; /* Changed from 2.25em to 0 for better alignment */
  transform: translate(-50%, 0); /* Centered horizontally, no vertical offset */
  z-index: 666;
}

/* Ensure foxText positioning is consistent on Folio pages */
body:has(.folio-gallery-page) nav[data-scroll-sticky] .foxText,
.folio-gallery-page ~ nav[data-scroll-sticky] .foxText {
  margin-top: 2.25em;
  transform: translate(6.66%, -90%);
}
@media (min-width: 1600px) {
  .foxText {
    margin-left: 50px;
  }
}

.foxText:hover {
  color: #FF66CC;
}

.foxText:hover .foxLogo1 {
  transition: all 0.3s ease-in-out;
  /* Switch to Fox-2.png on hover */
  background-image: var(--fox-logo-hover, url('../../assets/Fox-1.png'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 50px;
  left: -6.66px;
  z-index: 999;
}
/* Image swap is now handled by JavaScript */

.hoverLinks:hover {
  color: #66CCFF;
  transition: all 0.3s ease-in-out;
}

.about {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 6.66rem 2rem!important;
  position: relative;
  background: #fff;
  z-index: 2;
}
.about h2, .about p {
  margin-top: 6.66rem;
}
.about h2, .about > div {
  flex: 1 1;
}
.about .separator {
  flex: 0 0 1.11px;
  background: #66CCFF;
  margin: 0 3.33rem;
}

.aboutHeader {
  font-size: 9rem;
  letter-spacing: -0.4rem;
  transition: all 0.3s ease-in-out;
  color: #FFF;
  z-index: 3; /* Just above hero-content (2) but not creating stacking context */
  position: relative; /* Ensure z-index works */
  pointer-events: all !important; /* Don't block parallax scrolling - keep this to allow scroll events to pass through */
  /* Allow text selection even with pointer-events: none */
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  /* Prevent header from triggering ScrollTrigger recalculations */
  will-change: auto !important; /* Don't optimize for transforms - prevent recalculation triggers */
  transform: none !important; /* Ensure no transforms that could trigger recalculations */
  /* DO NOT create stacking context */
  isolation: auto !important;
}
aboutHeader:hover {
  color: #FF66CC;
  transition: all 0.3s ease-in-out;
}

/* About page image wrapper - now outside hero (matching demo structure) */
.about-image-wrapper {
  position: absolute; /* Position absolutely to overlay hero - matching contact page approach */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Match hero height */
  overflow: hidden; /* Clip image for parallax movement */
  z-index: 1; /* Behind hero-content (z-index: 2) but above background */
  pointer-events: none !important; /* Allow clicks to pass through to content - consistent with .fullImage */
  /* CRITICAL: No padding or margin that could cause offset */
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  /* CRITICAL: Position relative to #main (not .scroll-content) to match contact page structure */
  /* Removed .scroll-content wrapper from about.html to match contact.html structure */
}

/* When combined with fullImage class - match contact page structure */
.about-image-wrapper.fullImage {
  position: absolute !important; /* Position absolutely to overlay hero - matching contact page approach */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
  z-index: 1 !important; /* Behind hero-content but above hero background - needs to be visible */
  pointer-events: none !important; /* Allow clicks to pass through - consistent with base .about-image-wrapper */
  /* CRITICAL: No padding or margin that could cause offset */
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Override fullImage defaults */
  transform-style: flat !important;
  perspective: none !important;
  /* Ensure it's visible - override any hiding */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  /* DO NOT use contain or isolation - they block Locomotive Scroll transforms */
  /* Ensure it's not affected by hero's stacking context */
  isolation: auto !important; /* Don't create new stacking context */
  /* CRITICAL: Position relative to #main (not .scroll-content) to match contact page structure */
  /* Removed .scroll-content wrapper from about.html to match contact.html structure */
}

/* Ensure the image inside is visible - override all default parallax-image styles */
.about-image-wrapper.fullImage img,
.about-image-wrapper.fullImage .parallax-image,
.about-image-wrapper.fullImage img[data-scroll],
.about-image-wrapper.fullImage img[data-scroll-speed],
.about-image-wrapper.fullImage .parallax-image[data-scroll],
.about-image-wrapper.fullImage .parallax-image[data-scroll-speed] {
  width: 100% !important;
  height: 120% !important; /* Make taller for parallax movement */
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  /* Override any transition that might hide it */
  transition: none !important;
  /* Ensure parallax transform is always applied - prevent header from blocking */
  will-change: transform !important; /* Keep transform optimization active */
  /* CRITICAL: Do NOT set transform in CSS - let JavaScript set initial transform, then Locomotive Scroll takes over */
  /* Setting transform in CSS (even translate3d(0,0,0)) can prevent Locomotive Scroll from applying parallax */
  /* The JavaScript in locomotive.js will set the initial transform to translate3d(0,0,0) before Locomotive Scroll initializes */
}

/* Parallax image specific styles - Locomotive Scroll compatible (matching contact page) */
.parallax-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative; /* Locomotive Scroll needs relative positioning for parallax */
  z-index: 1;
  /* CRITICAL: Start visible so Locomotive Scroll can detect and apply parallax */
  opacity: 1 !important; /* Must be visible for Locomotive Scroll to work */
  visibility: visible !important; /* Must be visible for Locomotive Scroll to work */
  will-change: transform; /* Remove opacity from will-change - image is always visible */
  /* CRITICAL: Do NOT set transform here - Locomotive Scroll applies it via inline style */
  /* Setting transform in CSS can conflict with Locomotive Scroll's inline transforms */
  /* For parallax images, Locomotive Scroll will apply transform via inline style */
  backface-visibility: hidden;
  /* Remove transition - it can interfere with Locomotive Scroll's transforms */
  transition: none !important;
}

/* Show parallax image after it loads */
.parallax-image.loaded,
.parallax-image[data-loaded="true"] {
  opacity: 1;
  visibility: visible;
}

/* About page parallax image - make taller for parallax movement with overflow hidden */
.about-image-wrapper img[data-scroll-speed],
.about-image-wrapper .parallax-image[data-scroll-speed],
.about-image-wrapper img[data-scroll][data-scroll-speed] {
  height: 120% !important; /* Make image taller than container for parallax movement */
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important; /* Center the image */
  /* Optimize for smooth parallax - but don't block Locomotive Scroll transforms */
  will-change: transform !important;
  /* CRITICAL: Do NOT set transform in CSS - Locomotive Scroll applies it via inline style */
  /* Setting transform in CSS (even translateZ(0)) can conflict with Locomotive Scroll's inline transforms */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Ensure Locomotive Scroll can apply transforms */
  position: relative !important;
  /* Ensure no transition interferes */
  transition: none !important;
}

/* .aboutDetails {
  width: 77.7%;
  margin-left: 11.1%;
} */

/* Prevent erratic behavior in about section */
.about {
  opacity: 1 !important;
  visibility: visible !important;
  /* DO NOT use transform: none !important - it blocks Locomotive Scroll parallax */
  position: relative !important;
  will-change: auto !important;
}

/* IMPORTANT: Exclude hero section from .about restrictions */
/* Don't set transform: none on hero or its children - let Locomotive Scroll handle transforms for parallax */
/*
.about * {
  opacity: 1 !important;
  visibility: visible !important;
  /* Ensure all child elements are static 
  will-change: auto !important;
}*/

/* IMPORTANT: Exclude parallax containers and images from .about * rule */
/* These selectors are more specific and will override .about * */

/* Exclude parallax images from .about restrictions - matching working version */
.about .parallax-image,
.about img[data-scroll],
.about img[data-scroll-speed],
.hero .parallax-image,
.hero img[data-scroll],
.hero img[data-scroll-speed],
header.hero .parallax-image,
header.hero img[data-scroll],
header.hero img[data-scroll-speed],
.about-image-wrapper img[data-scroll],
.about-image-wrapper img[data-scroll-speed],
.about-image-wrapper .parallax-image[data-scroll],
.about-image-wrapper .parallax-image[data-scroll-speed],
/* Contact page parallax images */
.contact-image-container img[data-scroll],
.contact-image-container img[data-scroll-speed],
.tabs_img img[data-scroll],
.tabs_img img[data-scroll-speed] {
  /* DO NOT set transform: none - let Locomotive Scroll control transform for parallax */
  will-change: transform !important; /* Enable transform optimization for parallax - must override .about * */
  opacity: 1 !important;
  visibility: visible !important;
  /* CRITICAL: Do NOT set transform in CSS - Locomotive Scroll applies it via inline style */
  /* Setting transform in CSS (even translateZ(0)) can conflict with Locomotive Scroll's inline transforms */
  /* No transition - let Locomotive Scroll handle all transforms directly for best performance */
  transition: none !important; /* Prevent any CSS transitions from interfering */
  position: relative !important; /* Ensure relative positioning for parallax calculation */
}

#about_block {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8rem;
  background: #fff;
  z-index: 2;
  padding: 4rem 0;
}
#about_block h1, #about_block p {
  margin: 6.66rem 0;
}
#about_block > div {
  flex: 1 1;
}
#about_block .separator {
  flex: 0 0 1.11px;
  background: #66CCFF;
}

/*========================== animated arrow ==========================*/
.arrowContainer {
  position: relative;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: rotate(-90deg);
  cursor: pointer;
  left: 150px;
}

.arrow span {
  display: block;
  width: 1.5vw;
  height: 1.5vw;
  border-bottom: 5px solid #FF66CC;
  border-right: 5px solid #FF66CC;
  transform: rotate(45deg);
  margin: -25px 0 0 0;
  animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

.arrowLeft {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: rotate(90deg);
  cursor: pointer;
  left: 166px;
}

.arrowLeft span {
  display: block;
  width: 1.5vw;
  height: 1.5vw;
  border-bottom: 5px solid #FF66CC;
  border-right: 5px solid #FF66CC;
  transform: rotate(-45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

.arrowLeft span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrowLeft span:nth-child(3) {
  animation-delay: -0.4s;
}

.arrowDown {
  position: absolute;
  transform: rotate(90deg);
  cursor: pointer;
  left: 166px;
}

.arrowDown span {
  display: block;
  width: 1.5vw;
  height: 1.5vw;
  border-bottom: 5px solid #FF66CC;
  border-right: 5px solid #FF66CC;
  transform: rotate(45deg);
  margin: -22px 0 0 0;
  animation: animate 2s infinite;
}

.arrowDown span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrowDown span:nth-child(3) {
  animation-delay: -0.4s;
}

.arrowContainer2 {
  position: relative;
  cursor: pointer;
  top:-120px;
  left: 0;
  transform: translateX(-145px);
}
@media (max-width: 768px) {
  .arrowContainer2 {
    top: 66.6px;
    transform: translateX(-173px);
  }
}

@keyframes animate {
  0% {
      opacity: 0;
      transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      transform: rotate(45deg) translate(20px, 20px);
  }
}
.hoverLinks {
  font-family: AvgBold;
  font-size: 1.4rem;
  letter-spacing: -0.02rem;
  position: relative;
  top: 0.25em;
  overflow: hidden;
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}
.hoverLinks::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #FF66CC;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
.hoverLinks:hover::before {
  transform: translateX(0);
}
/* 404 page Home link styles */

.hoverLinks.homeLink,
a.homeLink.hoverLinks {
  position: relative;
  top: 0;
  overflow: hidden;
  padding: 0.2rem 0;
  display: inline;
  align-items: center;
  color: #66CCFF;
  transition: all 0.3s ease-in-out;
}


/* Live2D widget uses sticky positioning on all pages including 404 */
/* Positioned in bottom-right corner */
/* CRITICAL: Exclude from Locomotive Scroll transforms */
body.page-404 #live2d-widget,
body.page-404 #live2d-widget[data-scroll],
body.page-404 #live2d-widget[data-scroll-speed] {
  position: sticky !important;
  bottom: 20px !important;
  right: 20px !important;
  float: right;
  transform: translateZ(0) !important;
  will-change: auto !important;
}

.about.fourohfourcontent h2 {
  text-align: center;
}
.about.fourohfourcontent p {
  text-align: center;
}

.lain404container {
  position: relative;
  bottom: 0;
}

.lain404 {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain!important;
  /* Allow Locomotive Scroll to control transform for parallax */
  will-change: transform;
  /* Ensure transform is not overridden */
  transform: translateZ(0); /* Enable hardware acceleration */
  top: 25px;
  left: 0;
}

body.page-404 .hero {
  margin-top: 25px;
}

body.page-404 nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
}

body.page-404 #main {
  padding-top: 122px;
  min-height: calc(100vh - 122px);
  background-color: transparent;
}

.fourohfourcontent h2 {
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  word-break: keep-all;
  line-break: strict;
  font-size: clamp(1.4rem, 3.6vw, 2.8rem);
  max-height: calc(100vh - 160px);
  overflow: visible;
}

body.page-404 .about.fourohfourcontent {
  flex-direction: column;
  align-items: center;
}

body.page-404 .about.fourohfourcontent h2 {
  flex: 0 0 auto;
}

body.page-404 .about.fourohfourcontent .separator {
  width: min(60%, 240px);
  height: 1px;
  margin: 1.5rem 0;
  flex: 0 0 auto;
}

@media (min-width: 868px) {
  body.page-404 .horizontalLine.fourohfour-horizontal-line {
    margin-bottom: 66.66px;
  }
}

@media (max-width: 868px) {
  body.page-404 #main {
    padding-top: 80px;
    min-height: calc(100vh - 80px);
  }
  body.page-404 .hero {
    margin-top: 80px;
    overflow: hidden;
  }

  .fourohfourcontent h2 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    word-break: keep-all;
    line-break: strict;
    font-size: clamp(1.2rem, 4.8vw, 2.2rem);
    max-height: none;
    overflow: visible;
  }

  body.page-404 .lain404 {
    height: 120% !important;
    position: relative !important;
    top: 0 !important;
  }
  body.page-404 .parallax-image[data-scroll-speed],
  body.page-404 img[data-scroll-speed] {
    will-change: transform !important;
  }
}

@media (max-width: 767px) {
  .fourohfourcontent h2 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(1.1rem, 5vw, 2rem);
    max-height: calc(100vh - 120px);
  }
}

@media (max-width: 549px) {
  .fourohfourcontent h2 {
    font-size: clamp(1rem, 5.4vw, 1.8rem);
    max-height: calc(100vh - 110px);
  }
  .fourohfourcontent p {  
    font-size: 1.2rem;
  }
}

@media (max-width: 479px) {
  .fourohfourcontent h2 {
    font-size: clamp(0.95rem, 5.8vw, 1.6rem);
    max-height: calc(100vh - 100px);
  }
  .fourohfourcontent p {
    font-size: 0.8rem;
  }
}

body.page-404,
body.page-404 #main,
body.page-404 [data-scroll-container] {
  background-color: #141414;
}

/* 404 mobile: allow native scrolling when Locomotive is disabled */
body.page-404 [data-scroll-container] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 868px) {
  .lain404 {
    width: 100%;
    height: 100%;
  }
}

.arrowLink {
  gap: 1.5rem;
  border-bottom: 1px solid #FF66CC;
  width: -moz-fit-content;
  width: 9.5em;
}
.arrowLink img {
  width: 28px;
  transition: transform 0.3s ease-in-out;
}
.arrowLink:hover img {
  transform: translateX(-10px);
}
.arrowLink:hover {
  color: #FF66CC;
}

@media (max-width: 500px) {

  .projects .heading {
    width: 600px;
  }

  .arrowLink {
    width: 100%;
  }

  .arrow {
    position: relative;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(-90deg);
    cursor: pointer;
  }

  .viewWorkLink {
    position: relative;
    width: 600px;
    bottom: -130px;
    left: -135px;
    transform: rotate(90deg);
  }
  .viewWorkLink .arrow {
    position: relative;
    top: 5px;
    left: 60px;
  }
  

}

@media (min-width: 500px) and (max-width: 767px) {

  .projects .heading {
    width: 600px;
  }

  .arrowLink {
    width: 100%;
  }

  .arrow {
    position: relative;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(-90deg);
    cursor: pointer;
  }

  .viewWorkLink {
    position: relative;
    width: 600px;
    top: -10em;
    left: -200px;
    z-index: 10;
  }

  .viewWorkLink .arrow {
    position: relative;
    top: 5px;
    left: 60px;
  }
  .projects .heading p {
    position: relative;
    top:-180px;
    width: 100%;
    max-width: 868px;
    box-sizing: border-box;
    width: 868px
  }

}

@media (min-width: 768px) and (max-width: 868px) {

  .hoverLinks {
    overflow: hidden;
  }
  .arrow {
    top: 60%;
    left: 190px;
  }
  .viewWorkLink {
    position: relative;
    width: 200%;
    bottom: -130px;
    left: 100px;
    box-sizing: border-box;
    padding: 0 2rem;
  }
  .viewWorkLink a {
    width: 100%;
    max-width: 100%;
    left: 0;
    box-sizing: border-box;
  }
  .viewWorkLinkArrow {
    position: relative;
    top: 3px;
    left: 60px;
  }
  .projects .heading p {
    position: relative;
    top:-180px;
    width: 100%;
    max-width: 868px;
    box-sizing: border-box;
    width: 868px
  }
}


@media (min-width: 869px) and (max-width: 1140px) {

  .aboutThemLink {
    width: 250px;
    left: -10px;
  }

  .viewWorkLinkArrow {
    top: 2px;
    left: 40px;
  }
  .projects .heading {
    width: 100%;
    max-width: 868px;
    box-sizing: border-box;
    padding: 0 2rem;
  }
  .projects .heading p {
    top:-50px;
    width: 100%;
    max-width: 868px;
    box-sizing: border-box;
  }
  .hoverLinks {
    overflow: hidden;
  }
  .arrow {
    top: 60%;
    left: 180px;
  }
  .viewWorkLink {
    position: relative;
    width: 100%;
    max-width: 868px;
    bottom: -90px;
    left: 0;
    box-sizing: border-box;
  }
  .viewWorkLink a {
    width: 100%;
    max-width: 868px;
    left: 0;
    box-sizing: border-box;
  }
  .viewWorkLinkArrow {
    position: relative;
    top: 3px;
    left: 55px;
  }
  .projects .heading {
    width: 100%;
    max-width: 868px;
    box-sizing: border-box;
    padding: 0 2rem;
  }
  .projects .heading p {
    position: relative;
    width: 100%;
    max-width: 868px;
    box-sizing: border-box;
    width: 868px
  }
}

@media (min-width: 1141px) {
  .arrow {
    left: 165px;
    height: calc(1.2vh - 16.66px)
  }

  .arrow span {
    width: 1.5vw;
  height: 1.5vw;
  }
  .hoverLinks.arrowLink .arrow {
    width: 1em;
  }
  .viewWorkLink .arrow {
    position: relative;
    top: 5px;
    left: 40px;
  }
  .viewWorkLink {
    position: relative;
    width: 260px;
    top: -50px;
    left: 0;
    transform: translateX(-101px) rotate(90deg);
  }
  .projects .heading p {
    width: 200px;
    position: relative;
    top: -275px;
  }
}
@media (min-width: 1600px) {
  .viewWorkLink {
    top: -50px;
    left: 0;
    transform: translateX(-550px) rotate(90deg);
    height:75px;
  }
}

@media (min-width: 2000px) {

  .arrow {
    left: 165px;
    height: calc(1.2vh - 0px)
  }

  .viewWorkLink {
    top: -50px;
    left: -550px;
    height:75px;
  }
}



/*========================== Folio Overrides ==========================*/

.-text-heading {
  font-family: AvgBold;
  color: #fff!important;
}

.text-white {
  color: #fff!important;
}

.-md .ui-enumeration {
  bottom: -7px!important;
  display: block!important;
}

.-lg .ui-enumeration {
  bottom: -7px!important;
  display: block!important;
}

.ui-pagination li.act a .dot, .ui-pagination li.act a .line {
  background-color: #FF66CC;
}

/* Pagination container - fixed width with scrollable content */
.ui-pagination.horizontal {
  bottom: -.75rem;
  margin: 0 auto;
  width: 100%;
  max-width: 600px; /* Fixed width - adjust as needed */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  display: none;
}

/* Hide scrollbar for Chrome/Safari */
.ui-pagination.horizontal::-webkit-scrollbar {
  display: none;
}

/* Pagination list - allows horizontal scrolling */
.ui-pagination.horizontal ul {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.ui-button span {
  font-family: AvgLight;
  transition: all 0.3s ease-in-out;
  color: #fff !important;
}

.ui-button span:hover {
  color: #66CCFF;
}

.menu-item a {
  font-family: AvgLight;
  transition: all 0.3s ease-in-out;
}

.menu-item a:hover {
  color: #66CCFF;
}

/* Folio Gallery Positioning Fixes for Shows Page */
/* Add padding-top to main on shows page to account for nav height */
main#main.folio-gallery-page img {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  margin: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Ensure Folio article header is properly spaced */
main#main article[layout="centered"] {
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: center;
  padding-top: 0 !important; /* Reset any conflicting padding */
}

main#main article[layout="centered"], h2 p {
  margin-top: -6.66rem !important;
}

.page {
  background-color: #141414 !important;
}

/* Force neutral dark background during transitions (prevents intro flash) */
main#main.folio-gallery-page,
main#main.folio-gallery-page .content,
main#main.folio-gallery-page .project,
main#main.folio-gallery-page article[layout="centered"] {
  background-color: #141414 !important;
}

/* Hide intro page when it's not the current page to prevent flashes */
.folio-gallery-page .folio-intro-page {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.folio-gallery-page .folio-intro-page.page-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Use Folio body classes to keep intro hidden during transitions */
body:not(.on-page-1) .folio-intro-page {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.on-page-1 .folio-intro-page {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hide intro text content unless we're on page 1 (prevents flashes) */
body:not(.on-page-1):not(.folio-intro-hold) .folio-gallery-page article[layout="centered"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.on-page-1 .folio-gallery-page article[layout="centered"],
body.folio-intro-hold .folio-gallery-page article[layout="centered"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Fix Folio's fixed/absolute positioned elements to start below nav */
/* Folio uses .page, .content, .project, .thumbs classes */
/* Allow .thumbs container to use top: 20% from animation (don't override with !important) */
/* Only target the main .thumbs container, not individual pages */

/* .page elements INSIDE .thumbs should not have top set - they follow the container */
/* Remove any top positioning from pages inside thumbs to prevent bottom thumbs from being pushed down */
.folio-gallery-page .content .thumbs .page,
.folio-gallery-page .thumbs .page,
main.folio-gallery-page .content .thumbs .page,
main.folio-gallery-page .thumbs .page {
  top: auto !important; /* Reset top to auto so pages don't get pushed down */
}

/* Target child elements that might also be positioned */
/* NOTE: Don't set position: relative on .page-content-photo as it breaks z-index stacking */
.folio-gallery-page .content > *:not(.page-content-photo),
.folio-gallery-page .project > *:not(.page-content-photo),
.folio-gallery-page .thumbs > *:not(.page-content-photo) {
  position: relative; /* Prevent fixed/absolute children from overlapping */
}

.page .page-current .thumb {
  top: 0% !important;
}

@media (max-width: 868px) {
  /* Allow .thumbs container to use top: 20% from animation on mobile too */
  /* .page elements inside .thumbs should not have top set - prevents bottom thumbs from being pushed down */
  .folio-gallery-page .content .thumbs .page,
  .folio-gallery-page .thumbs .page,
  main.folio-gallery-page .content .thumbs .page,
  main.folio-gallery-page .thumbs .page {
    top: auto !important; /* Reset top to auto so pages don't get pushed down */
  }
}

/* Captions disabled - removed from Folio templates */
.page-caption,
.thumb-caption {
  display: none !important;
}

.project, .thumbs {
  background-color: #141414 !important;
}

.thumbs {
  z-index: 9999 !important;
}

.-md.portrait .thumb {
  height: 16.66vh !important;
  padding: 6.66px;
}

@media (min-width: 813px) {
  .thumb {
    height: 33.33vh!important;
  }

}
/* Offset the content inside .thumbs back up so it doesn't get pushed down */
/* This keeps the container at 20% but pulls the content back to the top */
/* Use -20vh to match the 20% viewport offset */
.folio-gallery-page .thumbs .page,
.folio-gallery-page .content .thumbs .page,
main.folio-gallery-page .thumbs .page,
main.folio-gallery-page .content .thumbs .page {
  transform: translateY(-20vh) !important;
}

@media (min-width: 720px) and (max-width: 868px) {
  .folio-gallery-page .thumbs .page,
  .folio-gallery-page .content .thumbs .page,
  main.folio-gallery-page .thumbs .page,
  main.folio-gallery-page .content .thumbs .page {
    transform: none !important;
  }
  .thumb {
    margin-bottom: 0 !important;
    height: 18vh !important;
    max-height: 18vh !important;
  }
  .thumb-photo {
    background-size: contain;
    padding-top: 0 !important;
    max-width: 270px;
    max-height: 180px;
    margin: 0px auto;
    }
}

@media (max-width: 868px) and (max-height: 480px) and (orientation: landscape) {
  .folio-gallery-page .thumbs .page.page-current .page-content,
  main.folio-gallery-page .thumbs .page.page-current .page-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 4px !important;
    height: 100% !important;
    min-height: calc(100vh - 80px) !important;
  }

  .folio-gallery-page .thumbs .page.page-current .page-content .thumb,
  main.folio-gallery-page .thumbs .page.page-current .page-content .thumb {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    height: calc((100% - 12px) / 4) !important;
    max-height: calc((100% - 12px) / 4) !important;
    width: calc((100% - 4px) / 2) !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .folio-gallery-page .thumbs .page.page-current .page-content .thumb-photo,
  main.folio-gallery-page .thumbs .page.page-current .page-content .thumb-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

/* UI button styling */
.thumbs, .ui .ui-button span {
  color: #fff !important;
}

body > div.content > div > div.ui.ui-button.ui-button-section {
  top: 69px !important;
}

@media (min-width: 868px) {
  body > div.content > div > div.ui.ui-button.ui-button-section {
    top: 125px !important;
  }
}

/* Image hiding is now handled by JavaScript in main.js for better reliability during transitions */

/* Fix Folio aside (sidebar/navigation) positioning - critical for gallery */
body > aside {
  top: 122px !important; /* Desktop nav height */
  height: calc(100vh - 122px) !important;
  position: fixed !important;
  z-index: 9998 !important; /* Below nav */
}

@media (max-width: 868px) {
  body > aside {
    top: 80px !important; /* Mobile nav height */
    height: calc(100vh - 80px) !important;
  }
}

/* Fix Folio lightbox/viewer z-index to be below nav */
aside,
.folio-viewer,
.ui-viewer,
[role="complementary"],
body > aside {
  z-index: 9998 !important; /* Below nav (9999) but above content */
}

/* Ensure Folio aside doesn't block nav menu button on gallery pages */
/* The aside is already z-index: 9998 (below nav's 9999), so menu button should work */
/* But add explicit pointer-events to ensure menu is clickable */
body:has(.folio-gallery-page) nav[data-scroll-sticky] > div .menu,
.folio-gallery-page ~ nav[data-scroll-sticky] > div .menu {
  pointer-events: auto !important;
  z-index: 10001 !important;
}

/* Ensure Folio images display properly and are centered */
main#main.folio-gallery-page > img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* Folio navigation/controls z-index fix */
.folio-nav,
.folio-controls,
.ui-nav,
.ui-controls,
[data-folio-nav],
[data-folio-controls] {
  z-index: 9998 !important;
}

/* Fix Fit and Thumbnails button positioning - position below nav */
.folio-gallery-page .ui-button-views,
.folio-gallery-page .ui-button-section {
  top: 122px !important;
  color:#FF66CC;
  bottom: auto !important;
  position: absolute !important;
  z-index: 9998 !important;
}

@media (max-width: 868px) {
  .folio-gallery-page .ui-button-views,
  .folio-gallery-page .ui-button-section {
    top: 77.7px !important;
  }
}

.ui-button-section {
  position: relative!important;
  right: 0!important;
  float: right!important;
}

.ui-button, .ui-group {
  position: absolute!important;
  padding: .75rem .2rem!important;
  margin: .75rem 2.25rem!important;
}

@media (max-width: 868px) {
  .ui-button, .ui-group {
    margin: .75rem 1.25rem!important;
  }
}
/* Override Folio's positioning - target elements that might have inline styles */
/* Use margin-top as additional push for gallery images */
.folio-gallery-page > article[layout="centered"] + img:first-of-type,
.folio-gallery-page > img:first-of-type {
  margin-top: 0 !important; /* Remove any conflicting margins */
}

/* Additional fix for Folio content areas */
/* NOTE: Don't set position: relative on main or .page elements as it breaks z-index stacking during transitions */
.folio-gallery-page main {
  position: relative;
}

/* Ensure Folio doesn't start at viewport top */
.folio-gallery-page .ui-page,
.folio-gallery-page .ui-content,
body:has(.folio-gallery-page) aside {
  top: auto !important;
  margin-top: 122px !important; /* Push down with margin instead */
}

.page-content {
  padding: 0 !important;
}

.scroll .page {
  overflow-y: visible !important;
  background: #141414;
}

.thumb-caption {
  color: #fff!important;
}

/* Prevent Locomotive Scroll from adding extra height on gallery pages */
.folio-gallery-page {
  height: 100vh !important;
  overflow: hidden !important;
  position: relative;
  background-color: #141414 !important;
}

/* Fix page container to account for nav height - prevent scrolling */
/* Ensure pages can stack properly with z-index during transitions */
.folio-gallery-page .page {
  height: calc(100vh - 122px) !important;
  max-height: calc(100vh - 122px) !important;
  overflow: hidden !important;
  top: 122px !important;
  position: absolute !important; /* Must be absolute for z-index stacking to work */
  z-index: 1; /* Default z-index, Folio will override during transitions */
  /* Optimize transitions */
  will-change: transform, opacity;
  background-color: #141414 !important;
}

/* Only apply backface-visibility during transitions to prevent seeing stacked pages */
/* Don't apply it by default as it can hide visible pages */
.folio-gallery-page .page:not(.page-current) {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.folio-gallery-page .page-content img {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important; /* Ensure images are above page background */
}

@media (max-width: 868px) {
  html:has(.folio-gallery-page),
  body:has(.folio-gallery-page) {
    background-color: #141414 !important;
  }

  .folio-gallery-page {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  .folio-gallery-page .page {
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    top: 80px !important;
  }
}

@supports (height: 100dvh) {
  .folio-gallery-page {
    min-height: 100dvh !important;
    height: 100dvh !important;
  }

  .folio-gallery-page .page {
    height: calc(100dvh - 122px) !important;
    max-height: calc(100dvh - 122px) !important;
  }

  @media (max-width: 868px) {
    .folio-gallery-page .page {
      height: calc(100dvh - 80px) !important;
      max-height: calc(100dvh - 80px) !important;
    }
  }
}

.folio-gallery-page .page-content-photo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  z-index: 1 !important; /* Ensure photo container is above page background */
}

/* Ensure images fill the viewport without gaps - account for nav height */
.folio-gallery-page .page-content-photo img {
  max-height: calc(100vh - 122px) !important;
  max-width: calc(100vw - 48px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Photo-enlarged CSS removed - fit view is disabled in Folio config */

@media (max-width: 868px) {
  .folio-gallery-page .page-content-photo img {
    max-height: calc(100vh - 80px) !important;
  }
}

/* Override Folio's inline styles with higher specificity */
.folio-gallery-page .page-content-photo img[style] {
  max-height: calc(100vh - 122px) !important;
}

body.post-media-page .folio-gallery-page .page-content-photo img,
body.post-media-page .folio-gallery-page .page-content-photo img[style] {
  max-height: calc((100vh - 122px) * 0.9) !important;
  max-width: calc((100vw - 48px) * 0.9) !important;
}

@media (max-width: 868px) {
  .folio-gallery-page .page-content-photo img[style] {
    max-height: calc(100vh - 80px) !important;
  }

  body.post-media-page .folio-gallery-page .page-content-photo img,
  body.post-media-page .folio-gallery-page .page-content-photo img[style] {
    max-height: calc((100vh - 80px) * 0.9) !important;
    max-width: calc((100vw - 32px) * 0.9) !important;
  }
}

@supports (height: 100dvh) {
  body.post-media-page .folio-gallery-page .page-content-photo img,
  body.post-media-page .folio-gallery-page .page-content-photo img[style] {
    max-height: calc((100dvh - 122px) * 0.9) !important;
  }

  @media (max-width: 868px) {
    body.post-media-page .folio-gallery-page .page-content-photo img,
    body.post-media-page .folio-gallery-page .page-content-photo img[style] {
      max-height: calc((100dvh - 80px) * 0.9) !important;
    }
  }
}

@media (max-width: 868px) {
  .folio-gallery-page .ui-page,
  .folio-gallery-page .ui-content,
  body:has(.folio-gallery-page) aside {
    margin-top: 80px !important;
  }
}
/*========================== Breakpoints ==========================*/
@media (max-width: 1660px) {
  .headerH {
    font-size: 8rem;
  }
  h1 {
    font-size: 5.5rem;
    line-height: 120%;
  }
  h2 {
    font-size: 4.2rem;
  }
  h3 {
    font-size: 2.8rem;
  }
}
@media (max-width: 1140px) {
  .headerH {
    font-size: 6rem;
    letter-spacing: -0.25rem;
  }
  h1 {
    font-size: 4.5rem;
  }
  h2 {
    font-size: 3.5rem;
  }
  h3 {
    font-size: 2.5rem;
  }
  h5 {
    font-size: 1.8rem;
  }
  p {
    font-size: 1.4rem;
    line-height: 160%;
  }
}
@media (max-width: 868px) {
  .headerH {
    font-size: 5rem;
    line-height: 95%;
  }
  h1 {
    font-size: 3.8rem;
  }
  h2 {
    font-size: 3rem;
  }
  nav {
    height: 4rem;
  }
  nav > div {
    padding: 2rem 3rem 0.7rem 3rem;
  }
  nav .links,
  nav > div .hoverLinks {
    display: none;
  }
  nav > div .menu {
    display: block !important;
    cursor: pointer;
    z-index: 9999;
  }
  
  /* Menu styles */
  .menu {
    font-size: 1.5rem;
    font-family: AvgBold;
    display: block !important;
    cursor: pointer;
    z-index: 9999;
    position: relative;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  h1 {
    margin-top: 6.66rem;
  }
}
@media (max-width: 430px) {
  .headerH {
    font-size: 4.6rem;
    letter-spacing: -0.1rem;
    line-height: 95%;
  }
  h1 {
    font-size: 3.5rem;
  }
}

/* ======================== Margins ======================== */
.mT2 {
  margin-top: 2rem;
}

.mT4 {
  margin-top: 3.9rem;
}

/*========================== Breakpoints ==========================*/
@media (max-width: 1660px) {
  #main {
    padding: 0 6rem;
  }
}
@media (max-width: 1440px) {
  #main {
    padding: 0;
  }
  nav > div {
    padding: 1rem 4rem 1rem 4rem;
  }
}
@media (max-width: 868px) {
  .mT2 {
    margin-top: 1.6rem;
  }
  .mT4 {
    margin-top: 3.2rem;
  }
  #main {
    padding: 0 3rem;
    gap: 6rem;
  }
  nav > div {
    padding: 2rem 3rem 0.7rem 3rem;
  }
}
@media (max-width: 430px) {
  #main {
    padding: 0 2rem;
    gap: 4rem;
  }
  nav > div {
    padding: 2rem 2rem 0.7rem 2rem;
  }
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  color: #fff;
  z-index: 10001 !important; /* Above nav (9999) */
}
.loader .loader_wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  /* Responsive padding that scales with viewport */
  padding: clamp(2rem, 5vw, 5rem);
}
.loader .loader_wrapper .bar {
  /* Responsive width - max 600px on large screens, 80% on smaller */
  width: min(600px, 80%);
  height: 2px;
  background: rgb(63, 63, 63);
  /* Responsive margin that scales with viewport */
  margin-top: clamp(1rem, 4vw, 4rem);
}
.loader .loader_wrapper .bar .bar_progress {
  width: 0%;
  height: 2px;
  background: #fff;
}
.loader .loader_wrapper h1 {
  /* Responsive font size that scales with viewport */
  font-size: clamp(3rem, 8vw, 10rem);
  line-height: 1;
}

nav {
  position: relative;
  z-index: var(--z-nav) !important;
  background-color: #fff;
  transition: background 0.3s ease;
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* Prevent scrolling when loader is active - must override Locomotive Scroll */
body.loader-active,
html.loader-active,
html.loader-active.has-scroll-smooth,
body.loader-active.has-scroll-smooth {
  overflow: hidden !important;
  height: 100% !important;
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Also prevent scrolling on the data-scroll-container when loader is active */
body.loader-active [data-scroll-container] {
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Hide nav when loader is active */
body.loader-active nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide all main content (including parallax images) when loader is active */
body.loader-active #main,
body.loader-active [data-scroll-container],
body.loader-active .scroll-content,
body.loader-active .hero,
body.loader-active .parallax-image,
body.loader-active img[data-scroll],
body.loader-active img[data-scroll-speed],
body.loader-active header.hero,
body.loader-active header.hero img {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure main content is visible when loader is NOT active */
/* CRITICAL: Keep pointer-events stable at 'auto' to prevent parallax calculation issues */
body:not(.loader-active) #main,
#main {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

nav[data-scroll-sticky] {
  z-index: var(--z-nav) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 122px !important; /* Desktop nav height */
  pointer-events: none; /* Don't block scroll events - allow parallax to work */
}

/* Re-enable pointer events on interactive nav elements */
nav[data-scroll-sticky] > div,
nav[data-scroll-sticky] .foxText,
nav[data-scroll-sticky] .links,
nav[data-scroll-sticky] .menu,
nav[data-scroll-sticky] a,
nav[data-scroll-sticky] .hoverLinks {
  pointer-events: auto; /* Re-enable for navigation interaction */
}

/* Ensure nav positioning is consistent on gallery pages (Folio) */
body:has(.folio-gallery-page) nav[data-scroll-sticky],
.folio-gallery-page ~ nav[data-scroll-sticky] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: var(--z-nav) !important;
  height: 122px !important; /* Desktop */
}

@media (max-width: 868px) {
  nav[data-scroll-sticky] {
    height: 80px !important; /* Mobile nav height */
  }
  
  body:has(.folio-gallery-page) nav[data-scroll-sticky],
  .folio-gallery-page ~ nav[data-scroll-sticky] {
    height: 80px !important; /* Mobile */
  }
}

nav.sticky {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

nav > div {
  position: relative;
  width: 100%;
  padding: 1rem 6rem 1rem 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center; /* Changed from flex-end to center for better alignment */
  margin: 0;
  box-sizing: border-box;
  height: 100%; /* Ensure nav > div takes full nav height */
  min-height: 122px; /* Desktop - match nav height */
}

/* Ensure nav > div has consistent height on Folio pages */
body:has(.folio-gallery-page) nav[data-scroll-sticky] > div,
.folio-gallery-page ~ nav[data-scroll-sticky] > div {
  height: 100% !important;
  min-height: 122px !important; /* Desktop */
}

@media (max-width: 868px) {
  nav > div {
    min-height: 80px; /* Mobile - match nav height */
  }
  
  body:has(.folio-gallery-page) nav[data-scroll-sticky] > div,
  .folio-gallery-page ~ nav[data-scroll-sticky] > div {
    min-height: 80px !important; /* Mobile */
  }
}

nav .links {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Ensure links positioning is consistent on Folio pages */
body:has(.folio-gallery-page) nav[data-scroll-sticky] .links,
.folio-gallery-page ~ nav[data-scroll-sticky] .links {
  top: 45% !important;
  transform: translate(-50%, -50%) !important;
}
nav > div .menu {
  font-size: 1.75rem;
  font-family: AvgBold;
  display: none;
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 10001 !important; /* Above nav (9999) and Folio elements to ensure clicks work */
  align-self: center; /* Align with foxText */
  margin: 0; /* Remove any default margins */
}

/* Ensure menu button works on gallery pages - override any Folio interference */
body:has(.folio-gallery-page) nav[data-scroll-sticky] > div .menu,
.folio-gallery-page ~ nav[data-scroll-sticky] > div .menu {
  z-index: 10001 !important;
  pointer-events: auto !important;
  position: relative !important;
}

.navigation_menu {
  position: fixed;
  top: 0;
  right: -60%;
  width: 60%;
  height: 100%;
  background: #1a1a1a;
  padding: 2rem 3rem;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(0);
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0; /* Ensure menu is completely hidden initially to prevent flash */
  pointer-events: none; /* Prevent interaction before menu is ready */
  contain: layout paint; /* Prevent off-canvas overflow affecting layout */
  will-change: transform;
}
.navigation_menu .links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.navigation_menu a {
  font-size: 2rem;
  color: #fff;
}
.navigation_menu .close {
  color: #fff;
  text-align: right;
  font-size: 2rem;
  padding-bottom: 2rem;
  cursor: pointer;
  position: relative;
  z-index: 9999999;
  transition: color 0.3s ease;
}
.navigation_menu .close:hover {
  color: #FF66CC;
}
.navigation_menu.active {
  right: 0;
  visibility: visible;
  opacity: 1; /* Show menu when active */
  pointer-events: auto; /* Enable interaction when active */
  z-index: 9999999;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  opacity: 0;
  z-index: 98;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
#overlay.active {
  opacity: 0.6;
  visibility: visible;
  z-index: 9999998; /* Just below navigation_menu (9999999) */
  pointer-events: auto;
}

/*========================== Breakpoints ==========================*/

@media (min-width: 350px) {
  .ui-button span {
    font-size: 1.5rem;
  }

  div.ui.ui-button.ui-button-section span {
    position: relative;
    top: -0.75rem !important;
    right: 25px !important;
  }

  .ui-button-prev span, .ui-button-next span {
    position: relative;
    top: 1rem !important;
    text-decoration: none;
  }
}

@media (min-width: 869px) {
  .foxText {
    right: 0;
    left: 0;
    position: relative;
  }
}

@media (max-width: 868px) {
  nav {
    height: 4rem;
  }
  nav > div {
    padding: 0;
  }
  nav .links,
  nav > div .hoverLinks {
    display: none;
  }
  nav > div .menu {
    position: relative;
    display: block !important;
    cursor: pointer;
    z-index: 9999;
  }
  
  /* Menu styles */
  .menu {
    top: -2.22px;
    left: -22.22px;
    font-size: 1.5rem;
    font-family: AvgBold;
    display: block !important;
    cursor: pointer;
    z-index: 10001 !important; /* Above nav and Folio elements */
    position: relative;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Ensure menu works on gallery pages */
  body:has(.folio-gallery-page) nav[data-scroll-sticky] > div .menu,
  .folio-gallery-page ~ nav[data-scroll-sticky] > div .menu {
    z-index: 10001 !important;
    pointer-events: auto !important;
  }
  
  .foxText {
      position: relative;
      top: -3.33px;
      left: 50%;
      transform: translate(-50%, 0);
      margin-top: 0;
  }
  
  /* Ensure foxText positioning is consistent on gallery pages */
  body:has(.folio-gallery-page) nav[data-scroll-sticky] .foxText,
  .folio-gallery-page ~ nav[data-scroll-sticky] .foxText {
    position: relative !important;
    top: 11.11px !important;
    left: 50% !important;
    transform: translate(-50%, -27%) !important;
    margin-top: 0 !important;
  }

}
@media (max-width: 600px) {
  .navigation_menu {
    width: 80%;
    right: -80%;
    padding: 2rem 2rem;
  }
  .navigation_menu a {
    font-size: 1.5rem;
  }
}

/*========================== arrowRight ==========================*/
.arrowRight {
  width: 28px;
  transition: transform 0.3s ease-in-out;
}
/* Horizontal Line */
.horizontalLine {
  width: 100%;
  height: 1px;
  background: #1a1a1a;
  opacity: 0.1;
  margin: 0;
}

#main > .horizontalLine:last-of-type {
  margin-bottom: -1rem;
}

/* Parallax Image full */
.fullImage {
  width: 100%;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}

.fullImage img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.1s ease-out;
}

/*========================== Breakpoints ==========================*/
@media (max-width: 1140px) {
  .fullImage img {
    max-height: 700px;
  }
}
@media (max-width: 600px) {
  .fullImage img {
    max-height: 400px;
  }
}

/* CRITICAL: Ensure parallax images work on mobile/tablet (868px and smaller) */
@media (max-width: 868px) {
  /* Ensure about page parallax images maintain parallax functionality on mobile */
  .about-image-wrapper.fullImage img[data-scroll-speed],
  .about-image-wrapper.fullImage .parallax-image[data-scroll-speed] {
    /* Force parallax to work - ensure image is tall enough for parallax movement */
    height: 120vh !important; /* Taller than viewport to allow parallax movement */
    object-fit: cover !important;
    /* Ensure transform is applied */
    will-change: transform !important;
    /* CRITICAL: Remove translateZ(0) on mobile - it might prevent Locomotive Scroll from applying transforms */
    /* transform: translateZ(0) !important; - REMOVED for mobile */
    backface-visibility: hidden !important;
    /* Ensure element is ready for transforms */
    position: relative !important;
  }
  
  /* Ensure wrapper allows overflow for parallax */
  .about-image-wrapper.fullImage {
    height: 100vh !important;
    overflow: hidden !important;
  }
  
  /* Ensure contact page parallax images also work on mobile */
  .contact-image-container img[data-scroll-speed],
  .contact-image-container img[data-scroll] {
    height: 120vh !important; /* Taller than viewport to allow parallax movement */
    object-fit: cover !important;
    will-change: transform !important;
    /* CRITICAL: Remove translateZ(0) on mobile - it might prevent Locomotive Scroll from applying transforms */
    /* transform: translateZ(0) !important; - REMOVED for mobile */
    backface-visibility: hidden !important;
    /* Ensure element is ready for transforms */
    position: relative !important;
  }
  
  .contact-image-container {
    height: 100vh !important;
    overflow: hidden !important;
  }
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 1000; /* Above mouse trail (999) to create stacking context for headerH */
  overflow: hidden;
  pointer-events: none; /* Don't block scroll events - allow them to reach Locomotive Scroll */
  /* Ensure scroll events pass through to Locomotive Scroll's container */
  touch-action: pan-y;
  overscroll-behavior: none;
}

/* About page hero - make background transparent so image shows through */
/* Since about-image-wrapper is a sibling of hero, we need to target hero on about page specifically */
/* Use a more specific selector - check if we're on about page by looking for about-image-wrapper */
main:has(.about-image-wrapper.fullImage) .hero {
  background: transparent !important;
  z-index: 2 !important; /* Above image (z-index: 1) but allow image to show through */
  overflow: visible !important; /* Allow image behind to be visible */
}

.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Prevent hero-content from triggering ScrollTrigger recalculations */
  will-change: auto !important; /* Don't optimize for transforms */
  transform: none !important; /* Ensure no transforms that could trigger recalculations */
  align-items: center;
  justify-content: center;
  z-index: 101; /* Above hero (z-index: 100) to ensure content is visible */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important; /* Don't block parallax scrolling - allow events to pass through */
  /* Ensure scroll events pass through */
  touch-action: pan-y; /* Allow vertical scrolling */
  -webkit-overflow-scrolling: touch;
  /* Ensure scroll events reach Locomotive Scroll's container */
  overscroll-behavior: none;
  /* Allow overflow for 3D layered text animations */
  overflow: visible;
}

/* Re-enable pointer events on interactive elements inside hero-content */
/* BUT: Keep pointer-events: none on aboutHeader and headerH to prevent blocking parallax scroll */
.hero-content h1 {
  pointer-events: auto; /* Re-enable for text selection/interaction */
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Keep headerH with pointer-events: none to allow scroll events to pass through */
.hero-content .headerH {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Keep aboutHeader with pointer-events: none to allow scroll events to pass through */
/* Text selection still works with user-select: text even with pointer-events: none */
.hero-content .aboutHeader {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  isolation: auto !important;
}

/* Apply same fixes to contact page hero structure (hero > div instead of hero-content) */
.hero > div:not(.hero-content) {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Prevent from triggering ScrollTrigger recalculations - matching hero-content fixes */
  will-change: auto !important; /* Don't optimize for transforms */
  transform: none !important; /* Ensure no transforms that could trigger recalculations */
  align-items: center;
  justify-content: center;
  z-index: 101; /* Above hero (z-index: 100) to ensure content is visible */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important; /* Don't block parallax scrolling - force this */
  isolation: auto !important; /* Don't create new stacking context */
  touch-action: pan-y; /* Allow vertical scrolling */
  overscroll-behavior: none; /* Ensure scroll events reach Locomotive Scroll's container */
}

.hero > div:not(.hero-content) h1 {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Keep headerH with pointer-events: none to allow scroll events to pass through for parallax */
.hero > div:not(.hero-content) .headerH {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.hero > div:not(.hero-content) .headerH:hover {
  color: white;
  -webkit-text-stroke: 1.5px solid black;
  stroke: 1.5px solid black;
  transition: all 0.3s ease-in-out;
}

.hero-images {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

.hero-images img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  will-change: transform;
}

.hero-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.hero-images img[data-scroll] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  will-change: transform;
}

/* Parallax image specific styles */
.parallax-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  will-change: transform;
  /* Enable hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}


.hero-images img:first-child {
  opacity: 1;
}

/* Mouse trail specific styles - REMOVED - was conflicting with parallax */

.has-scroll-smooth body {
  overflow: visible;
  position: fixed;
  width: 100%;
  height: 100%;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
  .scroll-content,
  [data-scroll-container],
  main {
    min-height: -webkit-fill-available;
  }
}

.projects {
  position: relative;
  width: 100%;
  padding: 100px 66.6px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Inner projects content section - needs same visibility as .projects */
.projects .projects-content,
.projects-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.projects .heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#projectWrapper {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  position: relative;
  transform: none;
}

#projectWrapper a {
  display: block;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: var(--z-project-links);
  transition: all 0.3s ease;
}

#projectWrapper a p {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

#projectWrapper a h3,
#projectWrapper a h5 {
  margin-bottom: 0.5rem;
}

#projectWrapper a:hover {
  color: #FF66CC;
}

#projectWrapper a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 102, 204, 0.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

#projectWrapper a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* Image reveal */
#image-reveal {
  position: absolute;
  width: 450px !important;
  height: 400px !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: var(--z-image-reveal);
  opacity: 0;
  visibility: hidden;
  display: none;
  will-change: transform !important;
  transform-origin: center !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 868px) {
  #image-reveal {
    width: 300px !important;
    height: 250px !important;
  }
}

@media (max-width: 430px) {
  #image-reveal {
    width: 200px !important;
    height: 200px !important;
  }
}

.clients {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 5rem 0;
}
.clients .clientsWrapper > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 0;
  border-bottom: 1px solid #cccccc;
}
.clients .clientsWrapper > div p {
  width: 50%;
  letter-spacing: -0.05rem;
}
.clients .clientsWrapper > div h3,
.clients .clientsWrapper > div h5 {
  width: 100%;
}
.clients .clientsWrapper > div:last-child {
  border-bottom: none;
}

/*========================== Breakpoints ==========================*/
@media (max-width: 1660px) {
  .hero > div h1 {
    max-width: 1030px;
  }
  /* .about {
    gap: 5rem;
  } */
}
@media (max-width: 1440px) {
  .hero > div {
    padding-right: 0rem;
  }
  .projects {
    gap: 3rem;
  }
  .projects #projectWrapper a p {
    width: 20%;
  }
  .clients {
    gap: 3rem;
    padding: 3rem 0;
  }
  .clients .clientsWrapper > div p {
    width: 20%;
  }
}
@media (max-width: 1140px) {
  .about {
    gap: 4rem;
  }
}
@media (max-width: 868px) {
  .hero > div img {
    display: none;
  }
  .about {
    flex-direction: column;
    /* gap: 3rem; */
  }
  .about .separator {
    background: #66CCFF;
  }
  .projects #projectWrapper a {
    padding: 2rem 0;
    flex-direction: column;
    gap: 1rem;
  }
  .projects #projectWrapper a p {
    width: 100%;
  }
  #image-reveal {
    width: 300px;
    height: 250px;
  }
  .clients {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 0rem 0;
  }
  .clients .clientsWrapper > div {
    flex-direction: column;
    padding: 2rem 0;
    gap: 1rem;
  }
  .clients .clientsWrapper > div p {
    width: 100%;
  }
}
.projectDetails {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8rem;
}
.projectDetails h2,
.projectDetails > div {
  flex: 1 1;
}
.projectDetails .separator {
  flex: 0 0 1.11px;
  background: #66CCFF;
}
.projectDetails > div .list h5 {
  padding: 1rem 0;
  border-bottom: 1px solid #cccccc;
}

.nextProject {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: stretch;
}
.nextProject a {
  flex: 1 1;
}
.nextProject a .image {
  height: 60vh;
  overflow: hidden;
}
.nextProject a .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.nextProject a .name {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  transition: padding 0.3s ease-in-out;
}
.nextProject a .name h3 {
  line-height: 100%;
}
.nextProject a:hover .image img {
  transform: scale(1.1);
}
.nextProject a:hover .name {
  padding: 0 2rem;
}
.nextProject .separator {
  flex: 0 0 1.11px;
  background: #66CCFF;
}

/*========================== Breakpoints ==========================*/
@media (max-width: 1660px) {
  .projectDetails {
    gap: 5rem;
  }
  .nextProject a .image {
    max-height: 400px;
  }
}
@media (max-width: 1140px) {
  .abprojectDetailsout {
    gap: 4rem;
  }
}
@media (max-width: 868px) {
  .projectDetails {
    flex-direction: column;
    gap: 3rem;
  }
  .projectDetails .separator {
    background: #66CCFF;
  }
  .nextProject {
    gap: 2rem;
  }
  .nextProject a .image {
    max-height: 300px;
  }
  .nextProject a .name {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
}
@media (max-width: 600px) {
  .nextProject {
    gap: 3rem;
    flex-direction: column;
  }
  .nextProject a .image {
    max-height: 350px;
  }
  .nextProject .separator {
    background: #66CCFF;
  }
}
.tabs_block {
  display: flex;
  gap: 8rem;
  flex-direction: row;
  align-items: stretch;
  /* Image */
  /* Seprator line */
  /* Right contact details tabs */
  position: relative; /* Ensure positioning context */
  z-index: 0; /* Behind hero (z-index: 2) */
  isolation: auto !important; /* Don't create stacking context */
  min-height: 100vh !important; /* Ensure section is tall enough to show full image */
  padding: 6.66rem 2rem !important; /* Add padding for better spacing */
}
.tabs_block .tabs_img {
  overflow: hidden; /* Clip image to create parallax window effect */
  flex: 1;
  position: relative; /* Ensure proper positioning context for parallax */
  min-height: 100vh; /* Prevent layout shift during fast scroll */
}

/* Contact page image container - matching about page structure */
.contact-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden; /* Clip image to create parallax window effect - image moves within this container */
  z-index: 1;
  pointer-events: none; /* Allow clicks to pass through to content */
  /* Remove transform isolation - let Locomotive Scroll handle transforms naturally */
}

.contact-image-container img {
  position: relative !important; /* Locomotive Scroll needs relative positioning for parallax */
  width: 100% !important;
  height: 120% !important; /* Make image taller than container for parallax movement */
  object-fit: cover !important;
  object-position: center center !important; /* Center the image */
  /* CRITICAL: Do NOT set transform in CSS - Locomotive Scroll applies it via inline style */
  /* Setting transform in CSS (even translateZ(0)) can conflict with Locomotive Scroll's inline transforms */
  display: block !important;
  opacity: 0;
  transition: opacity 120ms ease-out;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Remove transform-style isolation - let Locomotive Scroll handle transforms naturally */
}

.contact-image-container img.is-inview {
  opacity: 1;
}

body.contact-first-scroll .contact-image-container img.is-inview {
  opacity: 0.98;
}

body.page-404-first-scroll .page-404 .parallax-image,
body.page-404-first-scroll .page-404 img[data-scroll-speed] {
  opacity: 0.98;
}


.tabs_block .tabs_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(90%);
  /* Let Locomotive Scroll control transform completely */
}

/* About page image container - similar to contact page tabs_img */
.tabs_block #sperator {
  flex: 0 0 1px;
  background: #66CCFF;
}
.tabs_block .right_contact_details {
  flex: 1;
  /* Tabs */
  /* Details Wrapper */
}
.tabs_block .right_contact_details .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.tabs_block .right_contact_details .tabs .contactTab,
.tabs_block .right_contact_details .tabs .socialTab {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.tabs_block .right_contact_details .tabs .contactTab::before,
.tabs_block .right_contact_details .tabs .socialTab::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: -100%;
  bottom: 0%;
  background: #66CCFF;
  transition: all 0.3s ease-in-out;
}
.tabs_block .right_contact_details .tabs .contactTab.active-tab::before,
.tabs_block .right_contact_details .tabs .socialTab.active-tab::before {
  left: 0%;
}
/* Set initial tab state in CSS to prevent layout shift and loading delay */
.tabs_block .right_contact_details .contact_details .contactTabWrapper {
  display: block; /* Show first tab by default - prevents layout shift */
  opacity: 1; /* Ensure visible */
  visibility: visible;
}

.tabs_block .right_contact_details .contact_details .socialTabWrapper {
  display: none; /* Hide second tab by default */
  opacity: 0; /* Start hidden for smooth fade-in */
  visibility: hidden;
}

.tabs_block .right_contact_details .contact_details .contactTabWrapper p,
.tabs_block .right_contact_details .contact_details .socialTabWrapper p {
  border-bottom: 1px solid #cccccc;
  padding: 1.4rem 0;
}
.tabs_block .right_contact_details .contact_details .contactTabWrapper a,
.tabs_block .right_contact_details .contact_details .socialTabWrapper a {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabs_block .right_contact_details .contact_details .contactTabWrapper a::before,
.tabs_block .right_contact_details .contact_details .socialTabWrapper a::before {
  content: "";
  position: absolute;
  left: -100%;
  bottom: 0;
  background: #66CCFF;
  width: 100%;
  height: 1px;
  transition: all 0.3s ease-in-out;
}
.tabs_block .right_contact_details .contact_details .contactTabWrapper a:hover::before,
.tabs_block .right_contact_details .contact_details .socialTabWrapper a:hover::before {
  left: 0%;
}

/* Responsive Media Queries */
@media (max-width: 1140px) {
  .tabs_block {
    gap: 4rem;
  }
}
@media (max-width: 868px) {
  .tabs_block {
    flex-direction: column;
    gap: 3rem;
  }
  .tabs_block #sperator {
    background: #66CCFF;
  }
}
@media (max-width: 670px) {
  .tabs_block .tabs_img img {
    min-height: 400px;
  }
}

#about_block {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8rem;
  z-index: 2;
}
#about_block h1,
#about_block > div {
  flex: 1 1;
  z-index: 2;
}
#about_block .separator {
  flex: 0 0 1.11px;
  background: #66CCFF;
  z-index: 2;
}

.swiperCnt {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  z-index: 2;
}
.swiperCnt h1 {
  margin: 0 2rem;
}
.swiperCnt .swiper {
  width: 100%;
  cursor: grab;
  align-items: stretch;
  z-index: 666;
  overflow: hidden;
}
.swiperCnt .swiper .swiper-wrapper {
  display: flex;
  flex-direction: row;
}
.swiperCnt .swiper .swiper-slide {
  border: 1px solid #66CCFF;
  padding: 4rem 3rem;
  height: auto;
  z-index: 2;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*========================== Breakpoints ==========================*/
@media (max-width: 1660px) {
  #about_block {
    gap: 5rem;
  }
}
@media (max-width: 1440px) {
  .swiperCnt {
    gap: 3rem;
  }
}
@media (max-width: 868px) {
  #about_block {
    flex-direction: column;
    gap: 3rem;
  }
  #about_block .separator {
    background: #66CCFF;
  }
}
@media (max-width: 640px) {
  .swiperCnt .swiper .swiper-slide {
    padding: 2rem 1rem;
  }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .scroll-content,
    [data-scroll-container],
    main {
        min-height: -webkit-fill-available;
    }
}

.has-scroll-smooth [data-scroll-container] {
    min-height: 100vh;
    position: relative;
}


/* Projects section styles */
.projectwrapper_HOME,
.projectwrapper_Work {
  width: 100%;
  padding: 2rem;
  margin-top: 5rem;
  position: relative;
  z-index: var(--z-project-links);
}

.projectwrapper_HOME a,
.projectwrapper_Work a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  z-index: var(--z-project-links);
  pointer-events: auto !important;
  cursor: pointer;
}

.projectwrapper_HOME a:hover,
.projectwrapper_Work a:hover {
  color: #66CCFF;
}

.projectwrapper_HOME a::before,
.projectwrapper_Work a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #66CCFF;
  transform: translateX(-105%);
  transition: transform 0.5s ease-in-out;
  pointer-events: none !important;
  z-index: -1;
}

.projectwrapper_HOME a:hover::before,
.projectwrapper_Work a:hover::before {
  transform: translateX(0);
}

.projectwrapper_HOME a p:first-child,
.projectwrapper_Work a p:first-child {
  font-size: 1.2rem;
  opacity: 0.7;
  margin: 0;
}

.projectwrapper_HOME a h3,
.projectwrapper_Work a h3 {
  font-size: 2rem;
  margin: 0;
}

.projectwrapper_HOME a h5,
.projectwrapper_Work a h5 {
  font-size: 1.1rem;
  opacity: 0.8;
  margin: 0;
}

.projectwrapper_HOME a p:last-child,
.projectwrapper_Work a p:last-child {
  font-size: 1rem;
  opacity: 0.7;
  margin: 0;
}


@media (max-width: 868px) {
  .projectwrapper_HOME,
  .projectwrapper_Work {
    padding: 1rem;
    margin-top: 3rem;
  }

  .projectwrapper_HOME a,
  .projectwrapper_Work a {
    padding: 1.5rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .projectwrapper_HOME a h3,
  .projectwrapper_Work a h3 {
    font-size: 1.6rem;
  }

  #image-reveal {
    width: 300px;
    height: 250px;
  }
}

@media (max-width: 430px) {
  .projectwrapper_HOME a h3,
  .projectwrapper_Work a h3 {
    font-size: 1.4rem;
  }

  #image-reveal {
    width: 200px;
    height: 200px;
  }
}

.footer-container {
  width: 100%;
  padding: 10rem;
  margin-top: 5rem;
  background: #f9f9f9;
}

.footer {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 0;
}

.footer-title {
  text-align: center;
  margin-bottom: 5rem;
}

.footer-title h2 {
  font-size: 4.8rem;
  color: #1a1a1a;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-info p {
  font-size: 1.4rem;
  opacity: 0.7;
}

@media (max-width: 868px) {
  .projectwrapper_HOME,
  .projectwrapper_Work {
    padding: 0 2rem;
    margin-top: 5rem;
  }

  .project-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-title {
    font-size: 2.4rem;
    margin: 1rem 0;
  }

  .footer-container {
    padding: 5rem 2rem;
  }

  .footer-info {
    flex-direction: column;
    text-align: center;
  }

  .footer-info > div:first-child {
    margin-bottom: 2rem;
  }
}

@media (max-width: 430px) {
  .project-title {
    font-size: 2rem;
  }

  .footer-title h2 {
    font-size: 3.2rem;
  }
}

/* Z-index hierarchy - standardized across CSS and JavaScript */
:root {
  --z-nav: 9999;
  --z-image-reveal: 9997; /* Project hover image reveal - matches Z_INDICES.imageReveal in projectHover.js */
  --z-project-links: 9998; /* Project links - matches Z_INDICES.projectLinks in projectHover.js */
  --z-content: 2;
  --z-hero: 1000; /* Above mouse trail (999) to create stacking context for headerH */
  --z-mouse-trail: 999;
}

/* Main container */
#main {
    position: relative;
    width: 100%;
    min-height: 99vh;
    background-color: #fff;
    /* CRITICAL: Removed transform-style and will-change to prevent interference with Locomotive Scroll parallax */
    /* These properties create a new stacking context that can affect how Locomotive Scroll calculates transforms */
    /* Let Locomotive Scroll handle all transforms on child elements without interference */
    /* transform-style: preserve-3d; REMOVED - causes parallax calculation issues */
    /* will-change: transform; REMOVED - causes parallax calculation issues */
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: var(--z-project-links);
}

/* 404 page: keep all main backgrounds dark */
body.page-404,
body.page-404 #main,
body.page-404 [data-scroll-container],
body.page-404 .scroll-content,
body.page-404 .hero,
body.page-404 .about,
body.page-404 .fourohfourcontent {
    background-color: #141414 !important;
}

/* Locomotive scroll container */
[data-scroll-container] {
    position: relative;
    min-height: 100vh;
    background-color: #fff;
    z-index: var(--z-project-links);
    /* CRITICAL: Removed transform-style to prevent interference with Locomotive Scroll parallax */
    /* transform-style: preserve-3d; REMOVED - causes parallax calculation issues */
}

/* Scroll sections */
[data-scroll-section] {
    position: relative;
    background-color: #fff;
    will-change: transform;
    margin: 0 !important;
    padding: 0;
}

/* Ensure parallax images work correctly both inside and outside scroll sections */
/* Images with data-scroll-speed should work regardless of parent structure */
/* CRITICAL: Use position: relative, NOT absolute - Locomotive Scroll needs relative for parallax */
.hero img[data-scroll-speed],
header.hero img[data-scroll-speed],
[data-scroll-section] .parallax-image,
[data-scroll-section] img[data-scroll],
[data-scroll-section] img[data-scroll-speed] {
    /* Create independent transform context for parallax */
    transform-style: preserve-3d;
    /* CRITICAL: position: relative is required for Locomotive Scroll parallax to work */
    position: relative !important; /* Override any absolute positioning */
    /* Remove top/left - let natural flow handle positioning */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Parallax images inside scroll sections are handled by Locomotive Scroll */
/* No special CSS needed - Locomotive Scroll applies transforms directly */

/* Content sections */
#about_block,
.fullImage,
.swiperCnt,
#footerContainer,
.horizontalLine {
    position: relative;
    z-index: var(--z-content);
    background-color: #fff;
    transform: translateZ(0);
}

[data-scroll] {
  will-change: transform;
  /* CRITICAL: Do NOT set transform here - let Locomotive Scroll apply it via inline styles */
  /* transform: translateZ(0); - REMOVED - this was being overridden by CSS */
  backface-visibility: hidden;
  /* Remove transition for parallax elements - it interferes with Locomotive Scroll's smooth transforms */
  transition: none;
}

/* CRITICAL: Exclude floating text from Locomotive Scroll transforms - keep it static */
/* Prevent Locomotive Scroll from applying ANY transforms to floating text elements */
.layered-text-floating,
.layered-text-floating[data-scroll],
.layered-text-floating[data-scroll-speed],
.layered-text-floating .layered-text-layers,
.layered-text-floating .layered-text-layers[data-scroll],
.layered-text-floating .layered-text-layers[data-scroll-speed],
.layered-text-floating .layered-text-layer,
.layered-text-floating .layered-text-layer[data-scroll],
.layered-text-floating .layered-text-layer[data-scroll-speed],
.hero .layered-text-floating,
.hero-content .layered-text-floating,
header.hero .layered-text-floating {
  /* CRITICAL: Prevent Locomotive Scroll from applying transforms */
  /* Set explicit transform to override any Locomotive Scroll transforms */
  transform: translateZ(0) !important;
  /* Remove will-change to prevent Locomotive Scroll optimization */
  will-change: auto !important;
  /* Keep static - no parallax effect */
  position: relative !important;
}

/* CRITICAL: Ensure parallax images with data-scroll-speed can have inline transforms */
/* Locomotive Scroll applies transforms via inline styles, which should override CSS */
/* But CSS transform rules can interfere - so we explicitly exclude parallax elements from transform rules */
.parallax-image[data-scroll-speed],
.contact-image-container img[data-scroll-speed],
.about-image-wrapper img[data-scroll-speed],
.about-image-wrapper .parallax-image[data-scroll-speed],
img[data-scroll-speed] {
  /* CRITICAL: DO NOT set transform in CSS - Locomotive Scroll applies it via inline style */
  /* Inline styles should naturally override CSS, but we ensure no CSS conflicts */
  will-change: transform !important;
  backface-visibility: hidden;
  /* CRITICAL: Remove transition - it conflicts with Locomotive Scroll's real-time transforms and causes jumps */
  /* Locomotive Scroll needs instant transform updates, not smooth transitions */
  transition: none !important;
  /* Explicitly ensure no CSS transform is set - let Locomotive Scroll handle it */
}

/* CRITICAL: Do NOT override transform for parallax images - let Locomotive Scroll handle it */
/* Locomotive Scroll v3.5.4 applies transforms via JavaScript, which will override CSS */
/* The global [data-scroll] transform: translateZ(0) is fine - Locomotive Scroll will override it */
/* We just need to ensure no CSS is blocking the JavaScript transform application */

.hero-image-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-image-container img[data-scroll] {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  will-change: transform;
}

.trail-images img {
  position: fixed;
  object-fit: cover;
  opacity: 0;
  z-index: var(--z-mouse-trail) !important;
  will-change: transform, opacity;
  pointer-events: none;
  border-radius: 8px;
  width: auto !important;
  height: auto !important;
}

.trail-images {
  z-index: var(--z-mouse-trail) !important;
  pointer-events: none !important; /* Ensure mouse trail doesn't block scroll events */
  /* Ensure it doesn't create a blocking stacking context */
  transform: translateZ(0); /* Create hardware-accelerated layer without blocking */
}


.trail-image {
    position: fixed;
  object-fit: cover;
    border-radius: 8px;
    pointer-events: none;
    will-change: transform, opacity;
    filter: brightness(1.2) contrast(1.1) saturate(1.1);
    transform-origin: center center;
    opacity: 0;
    width: auto !important;
    height: auto !important;
    z-index: var(--z-mouse-trail) !important;
}

/*========================== Live2D ==========================*/
/* Live2D widget - sticky position to stay in viewport while scrolling */
/* Positioned in bottom-right corner */
/* CRITICAL: Exclude from Locomotive Scroll transforms - keep widget static */
#live2d-widget,
#live2d-widget[data-scroll],
#live2d-widget[data-scroll-speed] {
  position: sticky !important;
  bottom: 20px !important;
  right: 20px !important;
  float: right;
  z-index: 99999;
  pointer-events: none;
  width: 280px;
  height: 250px;
  /* CRITICAL: Prevent Locomotive Scroll from applying transforms */
  /* Set explicit transform to override any Locomotive Scroll transforms */
  transform: translateZ(0) !important;
  /* Remove will-change to prevent Locomotive Scroll optimization */
  will-change: auto !important;
}

#live2d-widget canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
}