/* ==========================================================================
   Homify Designer — Custom Stylesheet
   Loaded AFTER Tailwind CDN. Contains only what utility classes can't do:
   hero crossfade, infinite marquee, scroll-snap sliders, focus rings,
   and the accordion open/close transition.
   ========================================================================== */

:root{
  --brand:#E4720F;
  --brand-deep:#B85608;
  --ink:#26221E;
}

/* Smooth, respectful scrolling (disabled for users who ask for less motion) */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* Visible, accessible focus state for keyboard users (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:2px;
}

/* Skip-to-content link: hidden until focused */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; font-size:14px;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- Hero slider ---------- */
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-slide.is-active{ opacity:1; }

/* ---------- Horizontal snap sliders (textures / categories / portfolio) ---------- */
.snap-row{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.snap-row::-webkit-scrollbar{ height:6px; }
.snap-row::-webkit-scrollbar-thumb{ background:rgba(38,34,30,0.18); border-radius:4px; }
.snap-item{ scroll-snap-align:start; }

/* ---------- Infinite logo/finish marquee ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- FAQ accordion ---------- */
.accordion-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.accordion-panel > div{ overflow:hidden; }
.accordion-item[data-open="true"] .accordion-panel{ grid-template-rows:1fr; }
.accordion-item[data-open="true"] .accordion-chevron{ transform:rotate(180deg); }
.accordion-chevron{ transition:transform .25s ease; }

/* ---------- Reveal-on-scroll (progressive enhancement; content visible without JS) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Mobile nav ---------- */
.mobile-menu{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.mobile-menu.is-open{ max-height:420px; }

/* ---------- Sticky mobile conversion bar ---------- */
.mobile-cta-bar{ padding-bottom:env(safe-area-inset-bottom,0px); }

/* ---------- Texture / portfolio image hover ---------- */
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform .5s ease; }
.img-zoom:hover img{ transform:scale(1.06); }