/* =============================================================================
   chyk-gold.css — the site's last word: one gold for its static headings and
   its buttons, and the plain cursor.

   The user, 2026-09-30: every big bold static heading's gold, and every
   button everywhere, in one colour -- the moving white-and-gold of "Seekers
   find." on the Leaders page (and of the YEP page's turns of phrase, which
   were already the same): a gradient of six golds and two near-whites,
   twice the width of the word, drifting across it and back every eight
   seconds. Before this the golds were four different things: a flat
   var(--gold) (.text-gold in base.css), a static three-stop gradient laid
   over it (premium-upgrade.css), a pulse (.gold-text in home.css) and a
   flat gold with a halo (the phone home page's .m-gold).

   How it moves. The drift is an animation of --chyk-x, a registered custom
   property, and the gradient is placed at var(--chyk-x). It used to animate
   background-position itself, which did nothing on any button: the rules
   this sheet replaces set their backgrounds with !important, so does this
   one, and an !important declaration outranks an animation -- the position
   was pinned at 0% and the gold stood still (the user: "Join CHYK has to be
   MOVING, like Seekers find."). Nothing else sets --chyk-x, so nothing can
   pin it.

   Only the STATIC headings: the gold word of a section or page title
   ("Milestones" in "Events & Milestones", "CHYK" and "Kendra" on About,
   and so on). The headings that are set pieces of their own -- the Centers
   word, the chalk's "Leaders", the pledge's title, "So... Why CHYK?", YEP-16
   and the like -- keep their own treatment.

   Buttons: the pills that say something (Join CHYK, Register, Sponsor a
   Yuva Veer, Read more ...) take the gradient as their fill, with dark type
   on it, and keep it on hover, focus and press: the nav's JOIN turned a
   see-through grey under the pointer, because premium-upgrade.css has a
   :hover rule of its own that outranked the plain one here. Controls that
   are only an icon -- carousel arrows, close crosses, play/pause, the menu,
   the Leaders' pips -- are not buttons in this sense and are left as they
   are.

   It is loaded last on every page, and it says !important because the
   rules it replaces (premium-upgrade.css and the page sheets) do. A
   gradient clipped to text cannot carry a text-shadow (HANDOFF §8.1), so
   the old halos are taken off where the gradient goes on.
   ========================================================================== */
@property --chyk-x { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
:root {
  --chyk-sheen: linear-gradient(100deg, #c99a44 0%, #f6d98a 25%, #fff6d8 38%, #e6bd60 52%, #fff1c2 72%, #d4a64e 100%);
}
@keyframes chykSheen { 0%, 100% { --chyk-x: 0%; } 50% { --chyk-x: 100%; } }

/* ── headings ────────────────────────────────────────────────────────────── */
.text-gold,
.gold-text,
.m-gold,
.ay-title .gold,
.ld-end h2 em,
.btn-text-arrow {
  background: var(--chyk-sheen) var(--chyk-x) 50% / 220% 100% no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important;
  animation: chykSheen 8s ease-in-out infinite !important;
  /* a word broken over two lines is given the whole gradient on each */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Descenders run below the box a gradient is clipped to, and in a tightly
   tracked heading the last letter runs past its right edge: the V of
   "Mahotsav" lost its right arm (the user, 2026-09-30: "amateur mistake").
   The box is let out by .1em on each side and pulled back by as much, so
   the glyphs are whole and nothing moves. */
.text-gold, .gold-text, .m-gold, .ay-title .gold { padding: 0 .1em .06em; margin-left: -.1em; margin-right: -.1em; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
:root .btn, :root .btn-primary, :root .btn-outline, :root .btn-ghost, :root .btn-dark, :root .btn-gold,
:root .nav-cta, :root .mobile-cta,
:root .yp-btn, :root .yp-btn--ghost,
:root .join-cta-btn, :root .pub-buy-btn, :root .view-btn, :root .talk-youtube-btn,
:root .ay-endcard-btn, :root .ay-more, :root .event-list-cta, :root .pb-buy, :root .pb-explore, :root .ay-launch,
:root button[type="submit"], :root input[type="submit"],
:root .btn:hover, :root .btn-primary:hover, :root .btn-outline:hover, :root .btn-ghost:hover, :root .btn-dark:hover, :root .btn-gold:hover,
:root .nav-cta:hover, :root .mobile-cta:hover,
:root .yp-btn:hover, :root .yp-btn--ghost:hover,
:root .join-cta-btn:hover, :root .pub-buy-btn:hover, :root .view-btn:hover, :root .talk-youtube-btn:hover,
:root .ay-endcard-btn:hover, :root .ay-more:hover, :root .event-list-cta:hover, :root .pb-buy:hover, :root .pb-explore:hover, :root .ay-launch:hover,
:root button[type="submit"]:hover, :root input[type="submit"]:hover,
:root .btn:focus-visible, :root .nav-cta:focus-visible, :root .mobile-cta:focus-visible, :root .yp-btn:focus-visible,
:root .btn:active, :root .nav-cta:active, :root .mobile-cta:active, :root .yp-btn:active,
:root .site-header .nav-cta, :root .site-header .nav-cta:hover, :root .desktop-nav .nav-link.nav-cta, :root .desktop-nav .nav-link.nav-cta:hover {
  /* --tone is 0 on a dark ground and 1 on a light one (js/chyk-tone.js);
     every stop is mixed between the gold and the black metal by it, so the
     two cross-fade instead of swapping */
  background: linear-gradient(100deg,
      color-mix(in srgb, #2c2c30 calc(var(--tone) * 100%), #c99a44) 0%,
      color-mix(in srgb, #0d0d0f calc(var(--tone) * 100%), #f6d98a) 25%,
      color-mix(in srgb, #414147 calc(var(--tone) * 100%), #fff6d8) 38%,
      color-mix(in srgb, #121214 calc(var(--tone) * 100%), #e6bd60) 52%,
      color-mix(in srgb, #34343a calc(var(--tone) * 100%), #fff1c2) 72%,
      color-mix(in srgb, #0a0a0b calc(var(--tone) * 100%), #d4a64e) 100%)
    var(--chyk-x) 50% / 220% 100% no-repeat !important;
  animation: chykSheen 8s ease-in-out infinite !important;
  color: color-mix(in srgb, #efcb72 calc(var(--tone) * 100%), #0b0906) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: color-mix(in srgb, rgba(214, 170, 80, .6) calc(var(--tone) * 100%), rgba(255, 241, 194, .55)) !important;
  text-shadow: none !important;
  opacity: 1;
  /* the hover used to arrive all at once: premium-upgrade.css's transition
     list, which outranks base.css's, left out the shadow and the lift, so
     the glow and the 2 px jump had nothing to ease them (the user: "it pops
     out so repulsively"). Now the glow blooms over .8 s and nothing jumps. */
  transition: color .6s ease, border-color .7s ease, box-shadow .8s cubic-bezier(.22, 1, .36, 1),
              filter .8s cubic-bezier(.22, 1, .36, 1),
              --tone .7s cubic-bezier(.4, 0, .2, 1) !important;
}
.btn *, .nav-cta *, .mobile-cta *, .yp-btn *, .join-cta-btn *, .pub-buy-btn *,
.view-btn *, .talk-youtube-btn *, .ay-endcard-btn *, .ay-more *, .event-list-cta *, .pb-buy *, .pb-explore *, .ay-launch * {
  color: inherit !important; -webkit-text-fill-color: inherit !important;
}
.btn svg, .nav-cta svg, .mobile-cta svg, .yp-btn svg { stroke: currentColor; }
/* the Amrit Yatra pill's pulsing dot is the pill's type colour */
.ay-launch::before { background: color-mix(in srgb, #efcb72 calc(var(--tone) * 100%), #0b0906) !important; }
:root .btn:hover, :root .nav-cta:hover, :root .mobile-cta:hover, :root .yp-btn:hover, :root .join-cta-btn:hover,
:root .pub-buy-btn:hover, :root .view-btn:hover, :root .talk-youtube-btn:hover, :root .ay-endcard-btn:hover, :root .ay-more:hover,
:root .event-list-cta:hover, :root .pb-buy:hover, :root .pb-explore:hover, :root .ay-launch:hover,
:root button[type="submit"]:hover, :root input[type="submit"]:hover {
  box-shadow: 0 0 0 1px rgba(255, 238, 190, .32), 0 8px 26px rgba(232, 190, 90, .26) !important;
  filter: brightness(1.05);
}
/* no jump: base.css lifted the nav's JOIN 2 px the instant the pointer
   touched it. Where the button follows the pointer (js/base.js's magnetic
   buttons, now a softer pull that eases back instead of springing) that
   pull is the only motion. */
:root .nav-cta:hover { transform: none; }

/* ── light grounds ───────────────────────────────────────────────────────────
   The user, 2026-09-30: "if background dark, then gold button with black
   font; if light, metallic black button with gold font." js/chyk-tone.js
   marks a button on a light ground .on-light, and the nav bar over one
   .is-light; --tone carries it, and eases, so a fixed button crossing from
   dark to light cross-fades. */
@property --tone { syntax: "<number>"; inherits: true; initial-value: 0; }
:root .on-light { --tone: 1; }
:root .on-light:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(214, 170, 80, .45), 0 10px 26px rgba(0, 0, 0, .22) !important; }

/* The bar over a light ground turns light itself. On the home page it did
   this by inverting (mix-blend-mode: difference), which is also what turned
   its gold JOIN blue there; it now changes colour instead. */
:root .nav.site-header { mix-blend-mode: normal !important; }
:root .site-header { transition: background-color .7s ease, border-color .7s ease, box-shadow .7s ease,
                     transform .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, --tone .7s cubic-bezier(.4, 0, .2, 1) !important; }
:root .site-header.is-light, :root header#site-header.is-light, :root header.nav.site-header.is-light {
  --tone: 1;
  background-color: rgba(250, 248, 243, .9) !important;
  border-color: rgba(0, 0, 0, .07) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1) !important;
}
:root .site-header .nav-link:not(.nav-cta), :root .site-header .hamburger span, :root .site-header .header-logo img {
  transition: color .6s ease, background-color .6s ease, filter .6s ease !important;
}
:root .site-header.is-light .nav-link:not(.nav-cta) { color: rgba(16, 14, 10, .66) !important; }
:root .site-header.is-light .nav-link.active:not(.nav-cta), :root .site-header.is-light .nav-link:not(.nav-cta):hover { color: #0b0906 !important; }
:root .site-header.is-light .hamburger span { background: #0b0906 !important; }
:root .site-header.is-light .header-logo img { filter: brightness(0) !important; }

@media (prefers-reduced-motion: reduce) {
  .text-gold, .gold-text, .m-gold, .ay-title .gold, .ld-end h2 em, .btn-text-arrow,
  :root .btn, :root .nav-cta, :root .mobile-cta, :root .yp-btn, :root .join-cta-btn, :root .pub-buy-btn, :root .view-btn,
  :root .talk-youtube-btn, :root .ay-endcard-btn, :root .ay-more, :root .event-list-cta, :root .pb-buy, :root .pb-explore, :root .ay-launch,
  :root button[type="submit"], :root input[type="submit"] { animation: none !important; --chyk-x: 30%; }
}

/* ── the cursor ─────────────────────────────────────────────────────────────
   The system's own pointer, everywhere (the user, 2026-09-30: "this dot
   thing is causing too much delay"). The site drew its own -- a 9 px dot a
   script moved to the pointer on an ease, over a hidden system cursor -- and
   a pointer that follows the hand, however quickly, is behind it. The dot is
   hidden and the scripts that drove it stand down when it is (js/base.js);
   the system cursor is back, the arrow over the page and the hand over what
   can be clicked. */
.cursor-dot, .cursor-ring, .cursor { display: none !important; }
html, body { cursor: auto !important; }