/* Smart Homes By Us demo: custom styles on top of Tailwind */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.hero-title { font-size: clamp(3rem, 14.4vw, 9rem); line-height: 0.88; letter-spacing: -0.045em; }
.display { letter-spacing: -0.035em; }

/* Angled top edge on the red before and after band */
.angle-top { clip-path: polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%); }

/* Scroll reveals (only hidden once JS confirms it is running) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .reveal.from-left { transform: translateX(-28px); }
.js .reveal.from-right { transform: translateX(28px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Before and after slider */
.ba { --pos: 50%; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba .ba-handle { left: var(--pos); }
.ba input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; }
.ba input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100vh; background: transparent; }
.ba input[type=range]::-moz-range-thumb { width: 56px; height: 100vh; background: transparent; border: 0; }
.ba input[type=range]:focus-visible + .ba-handle .ba-knob { outline: 3px solid #fff; outline-offset: 4px; }
.ba.is-sweeping .ba-before, .ba.is-sweeping .ba-handle { transition: clip-path 1.4s cubic-bezier(.65,0,.35,1), left 1.4s cubic-bezier(.65,0,.35,1); }

/* Image hover zoom in the work section */
.zoom img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.zoom:hover img { transform: scale(1.04); }

/* Circuit motif draw-in */
.circuit path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .circuit.is-in path { transition: stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1); stroke-dashoffset: 0; }
.circuit circle { opacity: 0; transition: opacity .6s ease 1.8s; }
.circuit.is-in circle { opacity: 1; }

/* Mobile call bar safe area, and room so it never covers the footer */
.call-bar { padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
@media (max-width: 767px) { body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.from-left, .js .reveal.from-right { opacity: 1; transform: none; transition: none; }
  .zoom img, .zoom:hover img { transition: none; transform: none; }
  .circuit path { stroke-dashoffset: 0; transition: none; }
  .circuit circle { opacity: 1; transition: none; }
  .ba.is-sweeping .ba-before, .ba.is-sweeping .ba-handle { transition: none; }
}