/* ==========================================================================
   Bear Care AFH II
   Base styles carried over verbatim from the original template, plus the
   small additions needed for the mobile menu, gallery lightbox and the
   reduced-motion / touch fallbacks. Colours, type and spacing are unchanged.
   ========================================================================== */

body { font-family: 'Inter', sans-serif; background-color: #fcfbf9; }
.font-serif { font-family: 'Playfair Display', serif; }

/* Clean scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Hero masked-word reveal */
.masked-word { display: inline-block; transform: translateY(110%); }
.word-wrapper { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* Rotating scroll indicator */
.circular-text-svg { animation: spin 20s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   No horizontal page overflow, at any width.
   -------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #111; color: #fff; padding: 12px 20px;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 2px solid #c86b46;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */
#mobile-menu {
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
#mobile-menu.is-open { transform: translateX(0); }
body.menu-open { overflow: hidden; }

.mm-link {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
#mobile-menu.is-open .mm-link { opacity: 1; transform: translateY(0); }
#mobile-menu.is-open .mm-link:nth-child(1) { transition-delay: .10s; }
#mobile-menu.is-open .mm-link:nth-child(2) { transition-delay: .16s; }
#mobile-menu.is-open .mm-link:nth-child(3) { transition-delay: .22s; }
#mobile-menu.is-open .mm-link:nth-child(4) { transition-delay: .28s; }
#mobile-menu.is-open .mm-link:nth-child(5) { transition-delay: .34s; }

/* --------------------------------------------------------------------------
   Service rows — the hover preview is desktop-only, so touch users get the
   description as always-visible text instead of a hidden hover state.
   -------------------------------------------------------------------------- */
.service-blurb { display: block; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  /* Only hide the description where a real hover preview can replace it. */
  .service-blurb { display: none; }
}

/* --------------------------------------------------------------------------
   Horizontal pinned section — mobile fallback.
   Below 768px the track stops being pinned/translated and simply stacks,
   scrolling vertically. GSAP skips the pin at this width to match.
   -------------------------------------------------------------------------- */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  #horizontal-section .h-scroll-viewport { height: auto; padding: 5rem 0; }
  #horizontal-track {
    flex-direction: column;
    align-items: stretch;
    transform: none !important;
    padding-right: 1.5rem;
  }
  #horizontal-track > * { width: 100% !important; margin-top: 0 !important; }
  #h-progress-rail { display: none; }
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery-item { transition: opacity .4s ease, transform .4s ease; }
.gallery-item.is-hidden { display: none; }

.filter-btn.is-active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

/* Lightbox — background is set here rather than with a Tailwind opacity
   utility, so it can never depend on a class the compiler did not emit. */
#lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  background: rgba(0, 0, 0, .93);
}
#lightbox.is-open { opacity: 1; pointer-events: auto; }
#lightbox img { max-height: 82vh; }

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences: keep the layout, drop the movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .circular-text-svg { animation: none; }
  .masked-word { transform: none !important; }
  .fade-in-up,
  .section-fade-up,
  .feature-item,
  .service-row,
  .project-card,
  .stat-item,
  .process-step,
  .gallery-item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  * { scroll-behavior: auto !important; }
}


/* --------------------------------------------------------------------------
   MOTION FALLBACK
   site.js adds .no-motion to <html> when GSAP or ScrollTrigger fails to load,
   and <noscript> covers JavaScript being off entirely. Either way, content
   that GSAP would have revealed must be visible — the page must never ship
   a blank hero because a CDN was blocked.
   -------------------------------------------------------------------------- */
.no-motion .fade-in-up,
.no-motion .section-fade-up,
.no-motion .feature-item,
.no-motion .project-card,
.no-motion .stat-item,
.no-motion .process-step,
.no-motion .gallery-item,
.no-motion .service-row {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.no-motion .masked-word { transform: none !important; }
.no-motion .manifesto-word { opacity: 1 !important; }
.no-motion .process-line { transform: scaleX(1) !important; }
.no-motion #horizontal-track {
  flex-direction: column;
  align-items: stretch;
  transform: none !important;
  padding-right: 1.5rem;
}
.no-motion #horizontal-track > * { width: 100% !important; margin-top: 0 !important; }
.no-motion #horizontal-section .h-scroll-viewport { height: auto; padding: 5rem 0; }
.no-motion #h-progress-rail { display: none; }

/* --------------------------------------------------------------------------
   Touch targets — every interactive control reaches 44px on coarse pointers,
   without changing how anything looks on a mouse-driven screen.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  nav#main-nav a,
  footer a,
  .filter-btn,
  #lightbox button,
  #mobile-menu a,
  #mobile-menu button {
    min-height: 44px;
  }
  nav#main-nav .space-x-8 > a,
  nav#main-nav .xl\:space-x-10 > a {
    display: inline-flex;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   Pointer target size on fine pointers (WCAG 2.5.8 — 24x24 minimum).
   The nav links are small caps by design, so grow the hit area with a
   pseudo-element rather than padding: the underline is anchored to the link
   box and must not move.
   -------------------------------------------------------------------------- */
nav#main-nav a { position: relative; }
nav#main-nav a::before {
  content: '';
  position: absolute;
  inset: -14px -8px;
  z-index: -1;
}