/* ===== FIXES ===== */

/* 1. Remove Webflow badge */
.w-webflow-badge { display: none !important; }

/* 2. Hide native scrollbar */
html {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
html::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* Custom minimal scrollbar */
#custom-scrollbar {
  position: fixed;
  top: 0;
  right: 6px;
  width: 2px;
  height: 100vh;
  z-index: 99999;
  pointer-events: none;
}
#custom-scrollbar-track {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
#custom-scrollbar-thumb {
  width: 100%;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
}
body.is-dark #custom-scrollbar-thumb,
.page-wrapper.nf ~ #custom-scrollbar #custom-scrollbar-thumb {
  background: rgba(255,255,255,0.55);
}


/* 4. Fix hero text visibility on About and Works pages */
.hero [data-w-id],
.hero p[style*="opacity:0"],
.hero h1[style*="opacity:0"],
.hero h2[style*="opacity:0"] {
  opacity: 1 !important;
  transform: none !important;
}

/* 5. Scroll arrow bounce indicator */
.scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: scroll-hint-fade 3s ease 1.5s forwards;
  pointer-events: none;
}
.scroll-hint svg { animation: scroll-bounce 1.2s ease-in-out infinite; opacity: 0.7; }
@keyframes scroll-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes scroll-hint-fade { 0%,80%{opacity:1} 100%{opacity:0} }

/* 6. Fix project images — let the image define its own height naturally */
.work-inner-image {
  height: auto !important;
  overflow: visible !important;
}
.work-inner-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  display: block !important;
}

/* 7. Footer: name at top, overflowing above section like reference */
.section-footer.full { overflow: visible !important; }

.footer-logo-section {
  position: relative !important;
  overflow: visible !important;
}

/* Push the name div to the top, overflowing above */
.footer-logo-section .div-block {
  position: absolute !important;
  top: -13vw !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  pointer-events: none;
}

/* Three.js canvas container and the original img inside div-block */
.footer-logo-section .div-block > div,
.footer-logo-section .div-block > canvas {
  width: 100% !important;
  pointer-events: auto;
}

/* 8. Scrollbar: dark thumb when over light sections */
#custom-scrollbar-thumb.is-dark {
  background: rgba(0, 0, 0, 0.35) !important;
}

/* 9. Project pages — content scrolls OVER the fixed navbar (navbar has no z-index,
   page-wrapper already has z-index:12 in original CSS which keeps content on top) */
.navbar {
  position: fixed !important;
  /* no z-index override — page-wrapper z-index:12 puts content above navbar */
}

/* All images — rounded corners matching site's 18px default */
img:not(.nav-logo-wrapper img):not(.brand img):not(.footer-logo-small img):not(#custom-scrollbar *) {
  border-radius: 18px;
}

/* Spinner cards keep their own 24px */
.spinner-card-3 img,
.spinner-card img,
.hover-t-01, .hover-t-02, .hover-t-03 {
  border-radius: 0 !important;
}

/* Spinner: force perfect square so rotation pivots on true geometric center.
   Webflow sets width:100% (inherits parent width) but height:100vw — mismatch
   causes the circle center to not align with the rotation pivot → drifts.
   left:50% + translateX(-50%) in JS (scroll.js) re-centers after Webflow writes
   inline style transforms. */
.spinner-container-2 {
  width: 100vw !important;
  height: 100vw !important;
  max-width: none !important;
  transform-origin: center center !important;
}

@media screen and (max-width: 991px) {
  .spinner-container-2 {
    width: 200vw !important;
    height: 200vw !important;
  }
}


/* 10. Footer nav — same padding as header (30px), anchored to bottom */
.section-footer.full {
  justify-content: flex-end !important;  /* push nav to bottom */
}

.footer-logo-section {
  flex: 1 !important;
  justify-content: center !important;   /* center the CTA text vertically */
  align-items: center !important;
}

.footer-cta {
  text-align: center !important;
}

.footer-nav {
  padding-bottom: 30px !important;
  padding-left: 30px !important;
  padding-right: 18px !important;
  padding-top: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}