/* ===========================================================
   Hardset Concrete Co. - site styles
   Tailwind utilities come from the CDN; this file holds the
   custom components, textures and motion.
   =========================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: #DEDBD6; color: #101010; overflow-x: hidden; }
section[id] { scroll-margin-top: 64px; }
@media (min-width: 768px) { section[id] { scroll-margin-top: 0; } }

/* ---- outlined numerals (signature device) ---- */
.numeral {
  color: transparent;
  -webkit-text-stroke: 1px #101010;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  line-height: 0.78;
}
.numeral--pale { -webkit-text-stroke: 1px #EFEDEA; }
.numeral--rust { -webkit-text-stroke: 1px #A9502A; }

/* ---- keyboard focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #A9502A;
  outline-offset: 3px;
}

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- service row hover ---- */
.svc-name { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.svc-row:hover .svc-name, .svc-row:focus-within .svc-name { transform: translateX(14px); }
.svc-arrow { opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .35s ease; }
.svc-row:hover .svc-arrow, .svc-row:focus-within .svc-arrow { opacity: 1; transform: none; }

.proj-img { filter: grayscale(100%) contrast(1.05); transition: filter .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.proj-row:hover .proj-img, .proj-row:focus-within .proj-img { filter: grayscale(0%); transform: scale(1.02); }

/* ---- finish swatch textures (CSS only) ---- */
.fin { background-color: #C9C5BF; }
.fin-broom {
  background-image: repeating-linear-gradient(90deg, rgba(16,16,16,.16) 0 1px, rgba(255,255,255,.10) 1px 4px);
}
.fin-smooth {
  background-image: radial-gradient(120% 90% at 25% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
                    linear-gradient(160deg, #D6D2CC 0%, #BEB9B2 100%);
}
.fin-exposed {
  background-image: radial-gradient(circle at 18% 22%, rgba(16,16,16,.42) 0 3px, transparent 4px),
                    radial-gradient(circle at 62% 38%, rgba(16,16,16,.34) 0 4px, transparent 5px),
                    radial-gradient(circle at 82% 74%, rgba(16,16,16,.40) 0 3px, transparent 4px),
                    radial-gradient(circle at 34% 78%, rgba(16,16,16,.30) 0 5px, transparent 6px),
                    radial-gradient(circle at 48% 12%, rgba(255,255,255,.55) 0 3px, transparent 4px),
                    radial-gradient(circle at 8% 62%, rgba(255,255,255,.45) 0 4px, transparent 5px),
                    linear-gradient(0deg, #C4C0B9, #C4C0B9);
  background-size: 42px 42px, 56px 56px, 48px 48px, 64px 64px, 38px 38px, 52px 52px, 100% 100%;
}
.fin-ashlar {
  background-image: linear-gradient(90deg, rgba(16,16,16,.30) 0 1.5px, transparent 1.5px),
                    linear-gradient(0deg, rgba(16,16,16,.30) 0 1.5px, transparent 1.5px),
                    linear-gradient(160deg, #D2CDC6, #B7B2AB);
  background-size: 46px 30px, 46px 30px, 100% 100%;
  background-position: 0 0, 23px 15px, 0 0;
}
.fin-salt {
  background-image: radial-gradient(circle at 20% 30%, rgba(16,16,16,.30) 0 1.5px, transparent 2px),
                    radial-gradient(circle at 70% 60%, rgba(16,16,16,.26) 0 1.5px, transparent 2px),
                    radial-gradient(circle at 45% 85%, rgba(16,16,16,.30) 0 1.5px, transparent 2px),
                    radial-gradient(circle at 88% 18%, rgba(16,16,16,.24) 0 1.5px, transparent 2px),
                    linear-gradient(0deg, #CBC7C1, #CBC7C1);
  background-size: 18px 18px, 22px 22px, 26px 26px, 15px 15px, 100% 100%;
}
.fin-polished {
  background-image: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 34%, rgba(255,255,255,0) 52%, rgba(16,16,16,.10) 78%, rgba(255,255,255,.30) 100%),
                    linear-gradient(160deg, #CFCAC3, #ADA8A1);
}

/* ---- form ---- */
.field {
  background: transparent; border: 0; border-bottom: 1px solid #101010;
  padding: 10px 0; width: 100%; font-family: 'Inter', Arial, sans-serif; font-size: 15px; color: #101010;
}
.field::placeholder { color: rgba(16,16,16,.38); }
.field:focus { outline: none; border-bottom-color: #A9502A; }
.field.err { border-bottom-color: #A9502A; border-bottom-width: 2px; }
select.field { appearance: none; -webkit-appearance: none; border-radius: 0; }

::selection { background: #101010; color: #EFEDEA; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc-name, .svc-arrow, .proj-img { transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}