/* Site-wide motion and typography layer (benchmark: Harvey, Stripe, Linear, Palantir). Loaded on every page. */

/* Editorial serif for display headings; Inter stays for text */
h1, h2, .ph h1, .hx h1, .sec-head h2, h2.big, .svc-txt h2, .cta-in h2, .ent h2, .ct-side h2, .ab h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.02em; font-optical-sizing: auto;
}
.hx h1 { font-weight: 500; letter-spacing: -.03em; }
h2.big span, .cta-in h2 span { font-style: italic; }

/* Smooth cross-page transitions (Chromium) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Reading-progress bar */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #C9A227, #E2BD4A); z-index: 50; pointer-events: none; }

/* Cursor spotlight on cards */
.spot { position: relative; overflow: hidden; }
.spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(226,189,74,.16), transparent 60%); }
.spot:hover::after { opacity: 1; }

/* Page-hero headline: word-by-word rise */
.ph h1 .w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: wrise .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wrise { to { opacity: 1; transform: none; } }

/* Services: illustrations come alive when revealed */
.svc.in .svc-art rect[fill="#E2BD4A"] { transform-box: fill-box; transform-origin: left center; animation: grow 1.1s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.svc.in .svc-art circle[stroke="#E2BD4A"], .svc.in .svc-art path[stroke="#E2BD4A"] { animation: glide 4s ease-in-out infinite; }
@keyframes glide { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-60px,-30px); } }
.svc.in .svc-art rect[x="160"][fill="#E2BD4A"] { transform-origin: center bottom; animation: rise-bar 1.2s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes rise-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* How it works: the timeline line fills as you scroll; the current step glows */
.tl::before { background: rgba(226,189,74,.18) !important; }
.tl .fill { position: absolute; left: 27px; top: 10px; width: 2px; height: 0; background: linear-gradient(#E2BD4A, #C9A227); z-index: 0; transition: height .15s linear; }
.tl li .tn { transition: box-shadow .4s, transform .4s; }
.tl li.now .tn { box-shadow: 0 0 0 6px var(--bg), 0 0 0 10px rgba(226,189,74,.35); transform: scale(1.06); }
.tl li.now h3 { color: #8A6D12; }

/* Trust: the hash chain */
.chain { display: flex; align-items: center; gap: 0; margin: 2.5rem 0 0; overflow: hidden; padding: .5rem 0; }
.chain .blk { flex: none; width: 150px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: .7rem .8rem; box-shadow: var(--shadow); opacity: 0; transform: translateX(-20px); }
.chain .blk b { display: block; font-size: .78rem; color: var(--ink); }
.chain .blk code { display: block; font-size: .68rem; background: none; padding: 0; color: #8A6D12; margin-top: .25rem; }
.chain .lnk { flex: none; width: 34px; height: 2px; background: repeating-linear-gradient(90deg, #E2BD4A 0 6px, transparent 6px 10px); opacity: 0; }
.chain.in .blk, .chain.in .lnk { animation: chainin .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes chainin { to { opacity: 1; transform: none; } }
.chain-cap { font-size: .85rem; color: var(--ink2); margin-top: .7rem; }

/* About: the Devanagari word draws itself */
.ab-mark svg { width: 78%; height: auto; }
.ab-mark svg text { fill: transparent; stroke: #E2BD4A; stroke-width: 1.2; stroke-dasharray: 600; stroke-dashoffset: 600; }
.ab.in .ab-mark svg text { animation: draw 3.2s ease forwards; }
@keyframes draw { 70% { fill: transparent; } to { stroke-dashoffset: 0; fill: #E2BD4A; } }

/* Booking basket: new lines flash in */
.cart-row.fresh { animation: fresh .7s ease; }
@keyframes fresh { from { background: rgba(226,189,74,.25); } to { background: transparent; } }

/* Forms: a slow gold sheen around the active form */
.ct-form { background-image: linear-gradient(var(--card), var(--card)), linear-gradient(120deg, rgba(226,189,74,.0), rgba(226,189,74,.55), rgba(226,189,74,.0)); background-origin: border-box; background-clip: padding-box, border-box; border: 1px solid transparent; background-size: 100% 100%, 300% 100%; animation: sheen 6s linear infinite; }
@keyframes sheen { from { background-position: 0 0, 100% 0; } to { background-position: 0 0, -200% 0; } }

/* Feature cards lift with a gold top line drawing in */
.feat { position: relative; }
.feat::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, #E2BD4A, #C9A227); border-radius: 3px; transition: width .5s; }
a.feat:hover::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ph h1 .w { opacity: 1; transform: none; animation: none; }
  .chain .blk, .chain .lnk { opacity: 1; transform: none; animation: none !important; }
  .ab-mark svg text { stroke-dashoffset: 0; fill: #E2BD4A; animation: none !important; }
  .ct-form { animation: none; }
  .svc.in .svc-art * { animation: none !important; }
}

/* Brand: seal monogram + larger wordmark, understated */
.wordmark { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.75rem; letter-spacing: .015em; }
.wordmark .mk { display: inline-flex; width: 38px; height: 38px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wordmark:hover .mk { transform: rotate(-12deg); }
.wordmark .wm-t { line-height: 1; }
.wordmark sup { color: #E2BD4A; }
.site-footer .wm { display: flex; align-items: center; gap: .55rem; font-size: 1.6rem; }
.site-footer .wm .mk { display: inline-flex; width: 32px; height: 32px; }
@media (max-width: 560px) { .wordmark { font-size: 1.5rem; } .wordmark .mk { width: 32px; height: 32px; } }