/* ==========================================================================
   COMPONENTS - nav, cursor label, toast, page curtain, contact + footer
   ========================================================================== */

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 16px 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.nav__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 8px;
  border-radius: 1000px;
  background: rgba(246, 245, 241, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-s);
  pointer-events: auto;
  overflow: clip;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 8px;
  border-radius: 1000px;
  font-size: var(--fs-label);
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: background-color 200ms ease;
}

.nav__mark {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding-bottom: 2px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  transition: rotate 640ms var(--ease-out), background-color 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__brand:hover .nav__mark { rotate: -12deg; background: var(--accent); }
}

.nav__back-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.nav__back-icon svg { width: 16px; height: 16px; }

.nav__crumb { display: flex; align-items: center; gap: 8px; color: var(--ink-3); max-width: 320px; overflow: hidden; }
.nav__crumb b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-inline: 8px; }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: 1000px;
  font-size: var(--fs-label);
  line-height: 20px;
  color: var(--ink-2);
  transition: color 200ms ease, background-color 200ms ease;
}
.nav__link svg { width: 12px; height: 12px; opacity: 0.56; }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .nav__brand:hover, .nav__link:hover { background: var(--line-2); color: var(--ink); }
}

.nav__cta { --btn-h: 40px; padding: 0 16px 0 12px; gap: 8px; font-size: var(--fs-label); background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .nav__cta:hover { background: var(--accent); } }

.nav__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.nav__menu { display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: scale var(--t-fast) var(--ease-out); }
.nav__menu:active { scale: 0.92; }
/* The button holds one wrapper span with two bar spans inside it, so the bar
   styles have to be scoped to the inner two. An unscoped `span` rule paints
   the wrapper as a third bar, and leaves a 2px-tall box for place-items to
   centre while the real bars hang below it. */
.nav__menu > span { display: grid; gap: 6px; width: 16px; }
.nav__menu > span > span { width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 320ms var(--ease-out); }
/* Two 2px bars 6px apart: each travels 4px to meet on the centre line. */
.nav.is-open .nav__menu > span > span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__menu > span > span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav__sheet {
  position: fixed;
  inset: 80px var(--gutter) auto;
  padding: 8px;
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-l);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 200ms ease, transform 320ms var(--ease-out), visibility 0ms linear 320ms;
}
.nav.is-open .nav__sheet { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 320ms var(--ease-out), visibility 0ms; }
.nav__sheet a { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-radius: var(--r-s); font-size: 20px; line-height: 28px; letter-spacing: -0.024em; }
.nav__sheet a:active { background: var(--well); }

@media (width < 768px) {
  .nav { inset-block-start: 12px; }
  .nav__pill { width: 100%; justify-content: space-between; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: grid; }
  .nav__crumb { max-width: 200px; }
}

/* ---------- Cursor label (fine pointers only) ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 1000px;
  white-space: nowrap;
  background: var(--c-bg, #0F0F0F);
  color: var(--c-fg, #fff);
  font-size: var(--fs-label);
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  translate: -50% -50%;
  opacity: 0;
  scale: 0.32;
  filter: blur(8px);
  transition: opacity 200ms ease, scale 480ms var(--ease-spring), filter 240ms ease;
}
.cursor__label svg { width: 16px; height: 16px; rotate: -45deg; }
.cursor.is-active .cursor__label { opacity: 1; scale: 1; filter: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 12px;
  border-radius: 1000px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-label);
  line-height: 20px;
  font-weight: 500;
  box-shadow: var(--shadow-l);
  translate: -50% calc(100% + 32px);
  transition: translate 480ms var(--ease-drawer);
  pointer-events: none;
}
.toast.is-visible { translate: -50% 0; }
.toast__check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; }
.toast__check svg { width: 12px; height: 12px; }

/* ---------- Boot (home page, first view of the session) ----------
   Same language as the share card: paper ground, the rupee printed as ink
   dots, one mono line. Hidden unless core.js opts in, so a repeat visit or
   a page wipe never flashes it. */
.boot { display: none; position: fixed; inset: 0; z-index: 1100; place-items: center; background: var(--bg); will-change: clip-path; }
.booting .boot, .boot--lifting { display: grid; }
.boot__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.boot__mark {
  font-size: 176px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.04em;
  /* ~35 dots across the glyph, the same density as the share card's rupee.
     A coarser grid at this size reads as scattered specks, not a ₹. */
  background-image: radial-gradient(var(--ink) 1.05px, transparent 1.25px);
  background-size: 5px 5px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.boot__rule { display: block; width: 160px; height: 1px; background: var(--line); }
.boot__rule i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
/* ink-3 on the paper ground is ~2.6:1, too faint to read for the second it is up */
.boot__label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-2); }

.motion.booting .boot__mark { animation: boot-mark 640ms var(--ease-out) both; }
.motion.booting .boot__rule i { animation: boot-rule 940ms var(--ease-out) both; }
/* Settled by ~600ms, so the line is readable for a beat before the lift at 1250ms */
.motion.booting .boot__label { animation: fade-rise 520ms var(--ease-out) both; animation-delay: 80ms; }
@keyframes boot-mark { from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(6px); } }
@keyframes boot-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The hero intro waits underneath, then plays as the layer lifts off it */
.booting .intro .line > span,
.booting .intro [data-intro] { animation-play-state: paused; }

@media (width < 640px) { .boot__mark { font-size: 128px; } }

/* ---------- Page curtain (between pages) ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--curtain, #0C0C0E);
  color: #F5F4F0;
  pointer-events: none;
  will-change: clip-path;
}
.curtain__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; will-change: transform, opacity; }
.curtain__kicker { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: rgba(245, 244, 240, 0.6); }
.curtain__title { font-size: 72px; line-height: 72px; font-weight: 500; letter-spacing: -0.044em; }
@media (width < 640px) { .curtain__title { font-size: 44px; line-height: 48px; } }

/* Covers the page before scripts run when arriving through a wipe */
.curtain-cover body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--curtain, #0C0C0E);
}

/* ---------- Contact (dark panel) ---------- */
.contact { padding: var(--section) 12px 12px; }

.contact__panel {
  position: relative;
  padding-block: 96px 32px;
  border-radius: var(--r-xl);
  background: var(--deep);
  color: var(--on-deep);
  overflow: clip;
  isolation: isolate;
}
.contact__panel::before {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 244, 240, 0.28), transparent);
}

.contact__label { color: var(--on-deep-2); }
.contact__title { margin-top: 16px; font-size: 64px; line-height: 64px; letter-spacing: -0.044em; }
.contact__title em { color: var(--accent); }
.contact__sub { max-width: 480px; margin-top: 24px; color: var(--on-deep-2); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

.email-btn { --btn-h: 56px; gap: 16px; padding: 0 8px 0 24px; background: #F5F4F0; color: #0C0C0E; transition: scale var(--t-fast) var(--ease-out), background-color 320ms ease, color 320ms ease; }
.email-btn__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0C0C0E; color: #F5F4F0; transition: background-color 320ms ease, color 320ms ease; }
.btn--inv-ghost { --btn-h: 56px; padding: 0 24px; color: #F5F4F0; box-shadow: inset 0 0 0 1px rgba(245, 244, 240, 0.2); }
@media (hover: hover) and (pointer: fine) {
  .email-btn:hover { background: var(--accent); color: #fff; }
  .email-btn:hover .email-btn__icon { background: #fff; color: var(--accent); }
  .btn--inv-ghost:hover { background: rgba(245, 244, 240, 0.08); }
}

.footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 244, 240, 0.12);
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--on-deep-2);
}
.footer__col { display: flex; flex-direction: column; gap: 4px; }
.footer__col .t-label { margin-bottom: 4px; color: rgba(245, 244, 240, 0.4); }
.footer__col a, .footer__col button { color: #F5F4F0; }
.footer__col--end { align-items: flex-end; text-align: right; }
.footer .to-top svg { width: 12px; height: 12px; rotate: -90deg; }

@media (width < 1024px) {
  .contact__panel { padding-block: 80px 32px; }
  .contact__title { font-size: 48px; line-height: 52px; }
  .footer { margin-top: 80px; }
}
@media (width < 640px) {
  .contact { padding-inline: 8px; padding-bottom: 8px; }
  .contact__panel { padding-block: 64px 24px; border-radius: 24px; }
  .contact__title { font-size: 40px; line-height: 44px; }
  .footer { grid-template-columns: 1fr 1fr; row-gap: 32px; margin-top: 64px; }
  .footer__col--end { align-items: flex-start; text-align: left; }
  .email-btn { width: 100%; justify-content: space-between; font-size: var(--fs-label); padding-left: 20px; }
  .btn--inv-ghost { width: 100%; }
}