/* Hearthstone Roofing — shared custom styles (groovy retro 70s) */
html { scroll-behavior: smooth; }
body {
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.font-display { font-family: "Shrikhand", serif; }
.font-rounded { font-family: "Fredoka", sans-serif; }

.accent-gradient { background: linear-gradient(90deg, #f2a93b 0%, #e0653a 50%, #c9434e 100%); }
.accent-gradient-animated {
  background: linear-gradient(90deg,#f2a93b 0%,#e0653a 35%,#c9434e 50%,#e0653a 65%,#f2a93b 100%);
  background-size: 200% 200%;
}
.retro-stripes {
  background: repeating-linear-gradient(45deg,#6f8f2f 0 18px,#e8a33d 18px 36px,#e0653a 36px 54px,#c9434e 54px 72px);
}
.text-shadow-groovy { text-shadow: 0 2px 0 rgba(43,29,18,0.4); }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: hsl(36 44% 90%); }
::-webkit-scrollbar-thumb { background: hsl(24 80% 55%); border: 3px solid hsl(36 44% 90%); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(351 50% 53%); }
::selection { background: hsl(38 82% 59%); color: hsl(24 45% 11%); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.25,.1,.25,1), transform .8s cubic-bezier(.25,.1,.25,1); }
.reveal.in { opacity: 1; transform: none; }

/* hero load entrance */
.load-up { opacity: 0; transform: translateY(40px); animation: loadUp 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.blur-in { opacity: 0; filter: blur(10px); transform: translateY(20px); animation: blurIn 1s ease forwards; }
@keyframes loadUp { to { opacity: 1; transform: none; } }
@keyframes blurIn { to { opacity: 1; filter: blur(0); transform: none; } }

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 40s linear infinite; }

/* mobile nav slide-in */
#mobileMenu { transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
#mobileMenu.closed { transform: translateY(-12px); opacity: 0; pointer-events: none; }
#mobileMenu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* services dropdown */
.has-dropdown > .dropdown {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* color swatch */
.swatch { box-shadow: inset 0 0 0 2px rgba(43,29,18,.15); }

/* simple form fields */
.field {
  width: 100%; border-radius: 1rem; border: 2px solid hsl(24 45% 11% / .8);
  background: hsl(40 56% 95%); padding: .75rem 1rem; font-size: .95rem; color: hsl(24 45% 11%);
  outline: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.field:focus { box-shadow: 0 0 0 3px hsl(38 82% 59% / .5); }
.field::placeholder { color: hsl(27 24% 38% / .7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}