/* Texas Tower — motion & interaction layer (loaded after site.css).
   Rules: eased, never bouncy; no parallax; no scroll-jacking; nothing here changes layout.
   Every effect is optional — without this file (or without JS) the site is unchanged.
   prefers-reduced-motion: all non-essential motion is switched off at the bottom of the file. */

:root {
  --fx-ease: cubic-bezier(.22, .8, .24, 1);      /* long, soft landing — no overshoot */
  --fx-ease-io: cubic-bezier(.65, 0, .35, 1);
  --fx-glow: rgba(255, 196, 132, .11);
}

/* ---------- 1. Cross-document view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: fx-header; }
.action-bar { view-transition-name: fx-actions; }
.hero-ed h1, .page-hero h1 { view-transition-name: fx-title; }
.hero-ed .c1 img, .page-hero-media img { view-transition-name: fx-hero; }

::view-transition-old(root) { animation: fx-vt-out .28s var(--fx-ease-io) both; }
::view-transition-new(root) { animation: fx-vt-in .42s var(--fx-ease) .06s both; }
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; translate: 0 10px; } }

/* The photo you clicked grows into the next page's hero; crop, never stretch. */
::view-transition-group(fx-hero) { animation-duration: .55s; animation-timing-function: var(--fx-ease); border-radius: var(--radius); overflow: clip; }
::view-transition-old(fx-hero), ::view-transition-new(fx-hero) { height: 100%; object-fit: cover; overflow: clip; }
/* Titles swap in place rather than stretching between two different lines of text. */
::view-transition-group(fx-title) { animation-duration: .45s; animation-timing-function: var(--fx-ease); }
::view-transition-old(fx-title), ::view-transition-new(fx-title) { width: auto; height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(fx-title) { animation: fx-vt-out .2s var(--fx-ease-io) both; }
::view-transition-new(fx-title) { animation: fx-vt-in .45s var(--fx-ease) .18s both; }
/* Arriving through a morph: the hero photo is already in place, so skip its own entrance. */
.fx-arrived :is(.page-hero-media img, .collage .c1) { animation: none; }
::view-transition-group(fx-header), ::view-transition-group(fx-actions) { animation-duration: .3s; }

/* ---------- 2. Hero entrance: a soft mask wipe down the headline, then the rest settles ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-ed h1, .page-hero h1 { animation: fx-wipe 1.15s var(--fx-ease) .05s backwards; }
  .hero-ed h1 em { animation: fx-ember 2.4s var(--fx-ease) .5s backwards; }
  :is(.hero-ed, .page-hero) :is(.eyebrow, .lede, .btn-row, .hero-facts) { animation: fx-rise .9s var(--fx-ease) backwards; }
  :is(.hero-ed, .page-hero) .eyebrow { animation-delay: 0s; }
  :is(.hero-ed, .page-hero) .lede { animation-delay: .35s; }
  :is(.hero-ed, .page-hero) .btn-row { animation-delay: .5s; }
  :is(.hero-ed, .page-hero) .hero-facts { animation-delay: .65s; }
  .page-hero-media img { animation: fx-lcp-settle 1.3s var(--fx-ease) .1s backwards; }
  .page-hero-media::before { animation: fx-frame 1.4s var(--fx-ease) .35s backwards; }
  .collage figure { animation: fx-develop 1.2s var(--fx-ease) backwards; }
  .collage .c1 { animation-name: fx-lcp-settle; }
  .collage .c2 { animation-delay: .25s; }
  .collage .c3 { animation-delay: .4s; }
  .collage .badge-card, .fx-sky-chip { animation: fx-rise .9s var(--fx-ease) .7s backwards; }
  .fx-sky-chip { animation-delay: .85s; }
}
/* The mask only exists while animating (backwards fill), so it can never clip descenders afterwards. */
@keyframes fx-wipe {
  from {
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0 58%, transparent 72%);
    -webkit-mask-size: 100% 320%; mask-size: 100% 320%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
    translate: 0 .18em;
  }
  to {
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0 58%, transparent 72%);
    -webkit-mask-size: 100% 320%; mask-size: 100% 320%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    translate: 0 0;
  }
}
@keyframes fx-ember { from { color: #fff1dc; text-shadow: 0 0 .5em rgba(255, 150, 80, .45); } }
@keyframes fx-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes fx-develop { from { opacity: 0; scale: 1.035; filter: saturate(.5) brightness(.75); } }
/* Same feel without the opacity step, for the LCP image (visible from the first frame). */
@keyframes fx-lcp-settle { from { scale: 1.035; filter: saturate(.5) brightness(.75); } }
@keyframes fx-frame { from { opacity: 0; translate: -14px -14px; } }

/* ---------- 3. Pune sky: the hero glow follows the real time of day in Kharadi ---------- */
html { --sky-a: transparent; --sky-b: transparent; --star: transparent; }
html[data-sky="dawn"]   { --sky-a: rgba(255, 170, 140, .16); --sky-b: rgba(140, 120, 200, .10); }
html[data-sky="day"]    { --sky-a: rgba(255, 214, 150, .11); --sky-b: rgba(130, 170, 215, .06); }
html[data-sky="golden"] { --sky-a: rgba(255, 150, 60, .30);  --sky-b: rgba(232, 100, 60, .13); }
html[data-sky="dusk"]   { --sky-a: rgba(214, 84, 110, .24);  --sky-b: rgba(92, 70, 160, .20); }
html[data-sky="night"]  { --sky-a: rgba(80, 100, 190, .18);  --sky-b: rgba(24, 34, 90, .30); --star: rgba(255, 244, 220, .55); }
.page-hero { position: relative; isolation: isolate; }
.hero-ed::after, .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1.4px 1.4px at 14% 12%, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 31% 6%, var(--star), transparent),
    radial-gradient(1px 1px at 47% 17%, var(--star), transparent),
    radial-gradient(1.4px 1.4px at 63% 9%, var(--star), transparent),
    radial-gradient(1px 1px at 79% 21%, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 91% 5%, var(--star), transparent),
    radial-gradient(55% 62% at 78% 6%, var(--sky-a), transparent 70%),
    linear-gradient(180deg, var(--sky-b), transparent 62%);
  transition: opacity 1.5s;
}
/* Inner heroes sit under the breadcrumb: keep the glow away from the top edge so there is no seam. */
.page-hero::before {
  background:
    radial-gradient(1.2px 1.2px at 58% 16%, var(--star), transparent),
    radial-gradient(1px 1px at 72% 10%, var(--star), transparent),
    radial-gradient(1.4px 1.4px at 88% 22%, var(--star), transparent),
    radial-gradient(42% 58% at 74% 48%, var(--sky-a), transparent 72%);
}
.fx-sky-chip {
  position: absolute; right: 2%; z-index: 1; display: flex; align-items: center; gap: .7rem;
  margin: 0; padding: .7rem 1rem; border-radius: 14px; font-size: .8rem; line-height: 1.35;
  background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); color: var(--text);
}
.fx-sky-chip b { display: block; font: 400 1rem/1.2 var(--f-display); }
.fx-sun { width: 22px; height: 22px; flex: none; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 50% 50%, #ffd28a 0 34%, rgba(255, 170, 80, .35) 36% 52%, transparent 54%); }
html[data-sky="golden"] .fx-sun, html[data-sky="dusk"] .fx-sun { background: radial-gradient(circle at 50% 70%, #ff9a52 0 34%, rgba(255, 110, 60, .35) 36% 54%, transparent 56%); }
html[data-sky="golden"] .fx-sun::after, html[data-sky="dusk"] .fx-sun::after { content: ""; position: absolute; left: 0; right: 0; top: 70%; border-top: 1.5px solid rgba(243, 234, 216, .6); }
html[data-sky="night"] .fx-sun { background: radial-gradient(circle at 60% 40%, transparent 0 30%, #e9e1ff 32% 44%, transparent 46%); }
@media (max-width: 520px) { .fx-sky-chip { right: 3%; padding: .5rem .7rem; font-size: .72rem; gap: .5rem; } .fx-sky-chip b { font-size: .9rem; } }

/* ---------- 4. Pointer spotlight on cards and panels (fine pointers only) ---------- */
.pillar, .offer, .feature, .review, .answer-box, .cta-band-inner, .announce-inner, .hub-item, .featured-pack { position: relative; }
@media (hover: hover) and (pointer: fine) {
  :is(.card, .pillar, .moment, .space, .offer, .feature, .package, .review, .answer-box, .cta-band-inner, .announce-inner, .hub-item, .featured-pack)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    background: radial-gradient(380px circle at var(--fx-x, 50%) var(--fx-y, 50%), var(--fx-glow), transparent 62%);
    opacity: 0; transition: opacity .45s var(--fx-ease);
  }
  :is(.answer-box, .cta-band-inner, .announce-inner)::after { background: radial-gradient(620px circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(255, 190, 120, .075), transparent 62%); }
  :is(.card, .pillar, .moment, .space, .offer, .feature, .package, .review, .answer-box, .cta-band-inner, .announce-inner, .hub-item, .featured-pack):hover::after { opacity: 1; }
  /* A matching hairline: the border warms up under the pointer. */
  :is(.offer, .feature, .review, .package, .answer-box):hover { border-color: rgba(var(--brass-rgb), .45); }
  :is(.offer, .feature, .review, .package, .answer-box) { transition: border-color .45s var(--fx-ease); }
}

/* ---------- 5. Magnetic primary buttons (JS sets --fx-mx/--fx-my, max 4px) ---------- */
.btn { translate: var(--fx-mx, 0) var(--fx-my, 0); transition: transform .2s var(--ease), translate .5s var(--fx-ease), background .2s, color .2s, border-color .2s, box-shadow .3s; }
.btn.fx-near { transition: transform .2s var(--ease), translate .18s linear, background .2s, color .2s, border-color .2s, box-shadow .3s; }
.btn:not(.btn-ghost):not(.btn-ghost-dark):hover { box-shadow: 0 10px 28px -12px rgba(var(--accent-rgb), .75); }

/* ---------- 6. Images: slow zoom inside the frame on hover; scroll-linked "settle" as they enter ---------- */
.pillar { overflow: hidden; }
.pillar img, .collage figure img { transition: transform 1.1s var(--fx-ease); }
.pillar:hover img, .collage figure:hover img { transform: scale(1.045); }
.card img, .space img, .moment img { transition-duration: 1.1s; transition-timing-function: var(--fx-ease); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Uses the `scale` property so it composes with the hover zoom (which uses `transform`). Not parallax: nothing moves relative to the page. */
    :is(.pillar, .moment, .space, .card, .hub-item, .featured-pack) img {
      animation: fx-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
    .kitchen-media > * { animation: fx-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes fx-settle { from { scale: 1.12; filter: brightness(.7) saturate(.7); } to { scale: 1; filter: none; } }

    /* Brand statement lights up word by word as it scrolls into view (words wrapped by fx.js). */
    .fx-words { view-timeline-name: --fx-words; }
    .fx-words .fx-w {
      animation: fx-lit linear both; animation-timeline: --fx-words;
      animation-range: cover calc(12% + var(--i) / var(--n) * 30%) cover calc(18% + var(--i) / var(--n) * 30%);
    }
    @keyframes fx-lit { from { opacity: .16; } }

    /* Food / bar menu: reading progress drawn along the bottom of the sticky section nav. */
    .section.light:has(> .menu-nav) { view-timeline-name: --fx-menu; }
    .menu-nav::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--paper-em);
      transform-origin: 0 50%; scale: 0 1; animation: fx-progress linear both; animation-timeline: --fx-menu; animation-range: contain 0% contain 100%;
    }
    @keyframes fx-progress { to { scale: 1 1; } }
  }
}

/* ---------- 7. Animated underline for quiet text links ---------- */
@media (hover: hover) {
  :is(.footer-links, .footer-base, .nap address, .visit-nap, .facts, .crumbs) a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .5s var(--fx-ease), color .2s;
  }
  :is(.footer-links, .footer-base, .nap address, .visit-nap, .facts, .crumbs) a:is(:hover, :focus-visible) { background-size: 100% 1px; }
}

/* ---------- 8. "Open now" dot breathes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .status.is-open::before { animation: fx-pulse 2.8s var(--fx-ease) infinite; }
}
@keyframes fx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(134, 201, 138, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(134, 201, 138, 0); }
}

/* ---------- 9. FAQ answers open smoothly (where the browser supports animating to auto) ---------- */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--fx-ease), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- 10. Menu tools: search + veg-only filter (built by fx.js) ---------- */
.menu-nav a { transition: background .25s var(--fx-ease), color .25s var(--fx-ease), border-color .25s; }
.menu-nav.fx-stuck { box-shadow: 0 10px 24px -18px rgba(var(--ink-rgb), .55); }
.menu-nav li[hidden] { display: none; }
.fx-menu-tools { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0 0; padding: .75rem; border-radius: 16px; background: var(--paper-2); }
.fx-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.fx-search .i { position: absolute; left: .95rem; width: 18px; height: 18px; color: var(--ink-muted); pointer-events: none; }
.fx-search input {
  width: 100%; min-height: 48px; padding: 0 1rem 0 2.75rem; border-radius: 12px; border: 1px solid rgba(var(--ink-rgb), .22);
  background: #fffaf0; color: var(--ink); font: 500 1rem var(--f-body); transition: border-color .2s, box-shadow .2s;
}
.fx-search input::-webkit-search-cancel-button { display: none; }
.fx-search input::placeholder { color: var(--ink-muted); opacity: .85; }
.fx-search input:focus { outline: none; border-color: var(--paper-em); box-shadow: 0 0 0 3px rgba(var(--ink-rgb), .15); }
.fx-veg {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1.1rem 0 .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--ink-rgb), .25); background: #fffaf0; color: var(--ink); font: 600 .92rem var(--f-body);
  transition: background .25s var(--fx-ease), color .25s, border-color .25s;
}
.fx-veg .fx-switch { width: 34px; height: 20px; border-radius: 999px; background: rgba(var(--ink-rgb), .2); position: relative; transition: background .25s var(--fx-ease); }
.fx-veg .fx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: translate .3s var(--fx-ease); }
.fx-veg[aria-pressed="true"] { border-color: #2e8b3a; background: #e7f2e3; }
.fx-veg[aria-pressed="true"] .fx-switch { background: #2e8b3a; }
.fx-veg[aria-pressed="true"] .fx-switch::after { translate: 14px 0; }
.fx-veg .veg { margin: 0; }
.fx-count { flex: 1 0 100%; margin: 0; padding: 0 .25rem; font-size: .88rem; color: var(--ink-muted); min-height: 1.4em; }
/* Idle: the status line stays in the accessibility tree but takes no space. */
.fx-menu-tools:not(.is-active) .fx-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-count button { font: inherit; font-weight: 700; color: var(--paper-em); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.dish mark { background: rgba(var(--accent-rgb), .35); color: inherit; border-radius: 3px; padding: 0 .08em; }
.fx-empty { padding: 2.5rem 0 0; font: 400 var(--step-1)/1.4 var(--f-display); color: var(--ink); }
.dish.fx-hit { animation: fx-hit .5s var(--fx-ease) backwards; }
@keyframes fx-hit { from { opacity: 0; translate: 0 6px; } }
@media (max-width: 600px) { .fx-menu-tools { padding: .6rem; gap: .6rem; } .fx-veg { flex: 1 1 auto; justify-content: center; } }

/* ---------- Reduced motion: keep the information, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn { translate: none; }
  .status.is-open::before, .dish.fx-hit { animation: none; }
  .pillar:hover img, .collage figure:hover img { transform: none; }
}