/* ============================================================
   S. A. Agarwal & Associates — shared site styles
   Palette derived from the firm logo (gold / amber / bronze)
   ============================================================ */

:root { --gold: #C9870F; --ink: #241A0E; }

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; }
.font-serif { font-family: 'Playfair Display', serif; }

/* offset anchor jumps for the fixed header */
section[id], div[id].anchor { scroll-margin-top: 6rem; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.rise { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in .rise { opacity: 1; transform: translateY(0); }
.reveal.in .rise:nth-child(2){transition-delay:.08s}
.reveal.in .rise:nth-child(3){transition-delay:.16s}
.reveal.in .rise:nth-child(4){transition-delay:.24s}
.reveal.in .rise:nth-child(5){transition-delay:.32s}

/* ---------- drawing gold hairline ---------- */
.rule-draw { transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.7,.2,1) .2s; }
.reveal.in .rule-draw { transform: scaleX(1); }

/* ---------- shimmer sweep on primary CTA ---------- */
.cta-shimmer { position: relative; overflow: hidden; }
.cta-shimmer::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%); transform:translateX(-120%); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.cta-shimmer:hover::after { transform: translateX(120%); }

/* ---------- service card top rule ---------- */
.svc-rule { transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-rule { transform: scaleX(1); }

/* ---------- architectural lattice texture ---------- */
.lattice { background-image: linear-gradient(115deg, rgba(201,135,15,.12) 1px, transparent 1px), linear-gradient(65deg, rgba(36,26,14,.05) 1px, transparent 1px); background-size: 46px 46px, 46px 46px; }

/* ---------- animated underline link ---------- */
.underline-link { position:relative; }
.underline-link::after { content:''; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:var(--gold); transition:width .4s cubic-bezier(.2,.7,.2,1); }
.underline-link:hover::after { width:100%; }

/* ---------- nav active state ---------- */
.nav-link.active { color: var(--gold); }
.nav-link.active::after { width: 100%; }

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

/* ---------- hero carousel ---------- */
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease, transform 7s ease; transform:scale(1.06); }
.hero-slide.active { opacity:1; transform:scale(1.12); }
.hero-dot { width:34px; height:3px; border-radius:2px; background:rgba(255,255,255,.35); transition:background .4s ease; cursor:pointer; }
.hero-dot.active { background:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .reveal,.rise,.rule-draw,.cta-shimmer::after,.hero-slide{ transition:none!important; opacity:1!important; transform:none!important; }
}