/* ==========================================================================
   PKOUG homepage — layout only.
   Requires pkoug-tokens.css and pkoug-components.css.

   Anything reusable belongs in pkoug-components.css; this file holds only
   the arrangements specific to the homepage.
   ========================================================================== */

/* Zero-height targets that keep previously published #fragment URLs working
   after a section was renamed. scroll-margin clears the sticky header. */
.pk-anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------- HERO --- */
.pk-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--pk-space-12), 6vw, var(--pk-space-24));
  background: var(--pk-bg);
  border-bottom: 1px solid var(--pk-border);
}

/* Two decorative gradient layers that drift against each other. Each sits on
   its own compositor layer, so neither ever repaints the hero content.
   Purely decorative, hence aria-hidden in the markup.

   The inset is generous on purpose: the layers travel several percent in each
   direction and must never expose an unpainted edge inside .pk-hero, which
   clips them with overflow:hidden.

   WHY TWO LAYERS. A single soft gradient sliding at a constant rate is close
   to invisible — the eye has no reference to measure it against, and the
   previous single-layer version drifted 0.79px/sec, which measured as
   "animating" and read as completely static. Two layers moving in opposite
   directions at different periods give each other that reference, so the
   movement registers as depth at an amplitude that is still calm. */
.pk-hero__wash {
  position: absolute;
  inset: -18% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 420px at 12% 0%, var(--pk-brand-red-tint), transparent 62%),
    radial-gradient(900px 400px at 92% 12%, var(--pk-brand-navy-tint), transparent 58%);
  will-change: transform;
  /* The negative delay is not a detail. With ease-in-out the cycle is slowest
     at its endpoints, and an animation that starts at 0s puts that dead spot
     exactly where the visitor arrives — the hero measured 1.5px of movement
     over the first two seconds after load while sustaining ~4.5px/sec later.
     Starting half a period in lands the first paint at peak velocity. */
  animation: pk-hero-drift 19s ease-in-out -9.5s infinite alternate;
}

/* The counter-drifting layer. A single wide, very soft wash — it carries no
   edge of its own, so all it contributes is the parallax. Its period is
   deliberately not a multiple of the layer above, so the pair never settles
   into a visible repeating beat. */
.pk-hero__wash::after {
  content: "";
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(820px 380px at 68% 96%, var(--pk-brand-navy-tint), transparent 60%),
    radial-gradient(680px 300px at 28% 88%, var(--pk-brand-red-tint), transparent 64%);
  opacity: 0.85;
  will-change: transform;
  animation: pk-hero-counter 27s ease-in-out -13.5s infinite alternate;
}

/* A third, much tighter highlight sitting under the heading. It is what gives
   the hero a focal point instead of an even wash across the whole band: the
   two drifting layers supply depth, this supplies a centre. It does not move
   — three moving layers is where "alive" becomes "busy" — so it also anchors
   the other two, which is what makes their movement legible rather than
   making the whole panel appear to slide.

   `radial-gradient` on a pseudo-element of the hero itself, so it costs one
   painted layer and no markup on the eight pages that use this component. */
.pk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(680px 320px at 22% 42%,
              color-mix(in srgb, var(--pk-brand-green-ink) 9%, transparent), transparent 68%);
}

/* A vignette pulls the eye off the edges and stops the two washes ending in a
   visible straight line where the hero is clipped. Sits above the washes and
   below the content. */
.pk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(140% 120% at 50% 40%, transparent 55%,
              color-mix(in srgb, var(--pk-bg) 55%, transparent) 100%);
}

/* Amplitude is set to read at roughly 4-6px/sec on a desktop hero — above the
   threshold where a soft-edged wash registers as moving, well below anything
   that competes with the text for attention. transform only: no layout, no
   repaint, no shift. */
@keyframes pk-hero-drift {
  from { transform: translate3d(-3.2%, -1.8%, 0) scale(1.03); }
  to   { transform: translate3d( 3.2%,  1.8%, 0) scale(1.08); }
}

@keyframes pk-hero-counter {
  from { transform: translate3d( 2.6%,  1.4%, 0) scale(1.06); }
  to   { transform: translate3d(-2.6%, -1.4%, 0) scale(1.02); }
}

/* Honoured, not damped: the layers stop where they are and the hero is
   simply a static gradient. */
@media (prefers-reduced-motion: reduce) {
  .pk-hero__wash,
  .pk-hero__wash::after { animation: none; transform: none; }
}

.pk-hero__inner { position: relative; z-index: 1; }

.pk-hero__inner {
  display: grid;
  gap: var(--pk-space-12);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .pk-hero__inner { grid-template-columns: 1.35fr 1fr; gap: var(--pk-space-16); }
}

/* "Pakistan" in a heading is a brand mark, and the brand green is the shade
   for it — not the red, which reads as the link/action colour everywhere else
   in this system. Token, not a literal, so it flips with the theme. */
.pk-hero__accent { color: var(--pk-brand-green-ink); }
.pk-hero__lead { margin-top: var(--pk-space-5); }
.pk-hero__cta { margin-top: var(--pk-space-8); }
.pk-hero__note { margin-top: var(--pk-space-6); max-width: 52ch; }

.pk-hero__panel {
  padding: var(--pk-space-8);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-xl);
  background: var(--pk-surface);
  box-shadow: var(--pk-shadow-md);
}
.pk-hero__panel-title {
  margin: 0 0 var(--pk-space-5);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-bold);
  letter-spacing: var(--pk-tracking-wide);
  text-transform: uppercase;
  color: var(--pk-ink-muted);
}
.pk-hero__panel-note { margin: var(--pk-space-5) 0 var(--pk-space-5); }

/* Live counts. Deliberately plain — these are small real numbers, and
   dressing them up as achievements would misrepresent them. */
.pk-stat-row { display: grid; gap: var(--pk-space-4); margin: 0; }
.pk-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pk-space-4);
  padding-bottom: var(--pk-space-3);
  border-bottom: 1px solid var(--pk-divider);
}
.pk-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.pk-stat dt { color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }
.pk-stat dd {
  margin: 0;
  font-size: var(--pk-text-2xl);
  font-weight: var(--pk-weight-heavy);
  font-variant-numeric: tabular-nums;
  color: var(--pk-ink);
}

/* -------------------------------------------------------------- CARDS --- */
.pk-path__badge {
  margin: 0 0 var(--pk-space-3);
  color: var(--pk-ink-faint);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-bold);
  letter-spacing: var(--pk-tracking-wide);
  text-transform: uppercase;
}

.pk-audience__mark,
.pk-sig-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pk-radius-md);
  background: var(--pk-brand-red-tint);
  border: 1px solid var(--pk-brand-red-edge);
  color: var(--pk-brand-red-ink);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-heavy);
  letter-spacing: 0.02em;
}
.pk-sig-card__mark {
  background: var(--pk-brand-navy-tint);
  border-color: var(--pk-info-edge);
  color: var(--pk-brand-navy);
  margin-bottom: var(--pk-space-4);
}

/* --------------------------------------------------------- MEMBERSHIP --- */
.pk-membership {
  display: grid;
  gap: var(--pk-space-8);
  margin-top: var(--pk-space-10);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .pk-membership { grid-template-columns: minmax(300px, 400px) 1fr; gap: var(--pk-space-10); }
}

.pk-plans { display: flex; flex-direction: column; gap: var(--pk-space-3); }

.pk-plan {
  display: grid;
  gap: var(--pk-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--pk-space-5);
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pk-dur) var(--pk-ease),
              box-shadow var(--pk-dur) var(--pk-ease);
}
.pk-plan:hover { border-color: var(--pk-brand-red-ink); }

/* Selected state carries a border, a ring and a filled marker — not colour
   alone — and is exposed through aria-pressed. */
.pk-plan[aria-pressed="true"] {
  border-color: var(--pk-brand-red-ink);
  box-shadow: 0 0 0 3px var(--pk-focus-halo);
}
.pk-plan[aria-pressed="true"] .pk-plan__name::before { background: var(--pk-brand-red); }

.pk-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-3); }
.pk-plan__name {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-heavy);
  letter-spacing: var(--pk-tracking-wide);
  text-transform: uppercase;
  color: var(--pk-ink);
}
.pk-plan__name::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pk-border-strong);
  background: transparent;
}
.pk-plan__price {
  font-size: var(--pk-text-xl);
  font-weight: var(--pk-weight-heavy);
  color: var(--pk-ink);
}
.pk-plan__was {
  margin-left: var(--pk-space-2);
  color: var(--pk-ink-faint);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-medium);
}
.pk-plan__desc { color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }

.pk-skills {
  display: grid;
  gap: 0 var(--pk-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
/* Checkboxes disabled once the six-skill cap is reached. */
.pk-skills input:disabled + .pk-check__text { color: var(--pk-ink-faint); }
.pk-skills .pk-check:has(input:disabled) { cursor: not-allowed; }

/* ------------------------------------------------------------- STEPS --- */
.pk-steps {
  display: grid;
  gap: var(--pk-space-6);
  margin: var(--pk-space-10) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: pk-step;
}
.pk-step { display: flex; gap: var(--pk-space-4); align-items: flex-start; }
.pk-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pk-brand-red);
  color: var(--pk-on-brand);
  font-weight: var(--pk-weight-heavy);
}
.pk-step__title { margin: 0 0 var(--pk-space-2); font-size: var(--pk-text-lg); font-weight: var(--pk-weight-bold); }
.pk-step__body { margin: 0; color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }

/* ------------------------------------------------------- SPONSOR TIERS --- */
.pk-tier-card { border-top: 3px solid var(--_tier, var(--pk-border-strong)); }
.pk-tier-card__price {
  margin: var(--pk-space-2) 0 0;
  font-size: var(--pk-text-2xl);
  font-weight: var(--pk-weight-heavy);
  color: var(--pk-ink);
}

/* --------------------------------------------------- DIRECTORY TOOLS --- */
/* Search + filter bar on members.php and sponsors.php. A plain GET form, so
   it works with JavaScript disabled. */
.pk-directory-tools {
  margin-top: var(--pk-space-8);
  padding: var(--pk-space-6);
}
.pk-directory-tools .pk-form-row { align-items: end; }

/* ---------------------------------------------------------------- FORM --- */
.pk-form .pk-fieldset { margin-block: var(--pk-space-5); }
#memberFormStatus { margin-top: var(--pk-space-5); }
#memberFormStatus[hidden] { display: none; }

/* ==========================================================================
   TIER 1 — THE HERO ENTRANCE
   The one place on the site with an orchestrated sequence. Everything else
   reveals; this arrives.

   CSS only, and that is deliberate. It runs with JavaScript disabled, and
   the whole block sits inside prefers-reduced-motion: no-preference so a
   visitor who has asked for less motion gets the finished hero on first
   paint — not a fast version of the sequence.

   WHY THE MEDIA QUERY RATHER THAN THE DURATION TOKENS. `animation-fill-mode:
   backwards` holds the element at its FROM state during the delay, and the
   global reduced-motion rule shortens durations but not delays. Tokens alone
   would leave the hero blank for the length of the stagger and then snap it
   in — worse than no animation. Removing the animation entirely is correct.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* The eyebrow, heading, lead, buttons and note, in reading order. Each
     starts as the one before is halfway through, so the sequence reads as a
     single movement rather than five separate ones. */
  .pk-hero__copy > * {
    animation: pk-hero-rise 680ms var(--pk-ease-out) backwards;
  }
  .pk-hero__copy > :nth-child(1) { animation-delay:  60ms; }
  .pk-hero__copy > :nth-child(2) { animation-delay: 140ms; }
  .pk-hero__copy > :nth-child(3) { animation-delay: 220ms; }
  .pk-hero__copy > :nth-child(4) { animation-delay: 300ms; }
  .pk-hero__copy > :nth-child(5) { animation-delay: 360ms; }

  /* The statistics panel is the counterweight to the copy, so it arrives as
     one object slightly after the heading rather than with the buttons —
     late enough to be noticed, early enough not to feel detached. */
  .pk-hero__panel {
    animation: pk-hero-panel 760ms var(--pk-ease-out) 240ms backwards;
  }

  /* The statistics themselves then count in behind the panel. This is the
     only NESTED stagger on the site, and it is what makes the panel read as
     live community data rather than a picture of some numbers.

     Applied to `.pk-stat`, not to the panel's direct children: those are the
     title, the definition list and the note, and staggering those would
     animate the wrapper rather than the figures anyone is looking at. */
  .pk-stat {
    animation: pk-hero-rise 520ms var(--pk-ease-out) backwards;
  }
  .pk-stat:nth-child(1) { animation-delay: 460ms; }
  .pk-stat:nth-child(2) { animation-delay: 540ms; }
  .pk-stat:nth-child(3) { animation-delay: 620ms; }
  .pk-stat:nth-child(4) { animation-delay: 700ms; }

  /* The heading's green mark brightens once, as the heading settles. A single
     accent moment, on the word the brand is built around. */
  .pk-hero__accent {
    animation: pk-accent-settle 900ms var(--pk-ease-out) 320ms backwards;
  }
}

/* 14px is enough to read as arriving without the page appearing to assemble
   itself. Transform and opacity only — no layout, no shift. */
@keyframes pk-hero-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* The panel travels slightly further and scales a hair, so it reads as
   settling into place rather than sliding up a track. */
@keyframes pk-hero-panel {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes pk-accent-settle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* ==========================================================================
   CHAPTER PHOTOGRAPHS
   ==========================================================================

   A chapter page leads with its city. The hero is two columns on a desktop —
   the words one side, the place the other — and ONE column below 60rem, where
   the source order puts the text first deliberately: on a phone the heading is
   what tells you which chapter you opened, and a photograph above it would push
   that off the first screen.

   Both slots are `aspect-ratio` boxes with `object-fit: cover`, so a picture
   that is not the expected shape is cropped rather than distorted or
   letterboxed, and the layout around it never moves. The shipped pictures are
   1200x1200; an uploaded one may be anything within the bounds in
   pkoug_chapter_image_bounds().
   ========================================================================== */

.pk-chapter-hero {
  display: grid;
  gap: clamp(var(--pk-space-6), 4vw, var(--pk-space-10));
  align-items: center;
}

@media (min-width: 60rem) {
  .pk-chapter-hero {
    /* The text gets the larger share: it is the content, the picture is the
       welcome. minmax(0, …) on both tracks so a long word or a wide image
       cannot push the grid past its container. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* A chapter with no picture at all keeps one column at every width, rather
   than leaving half the hero empty beside the text. */
.pk-chapter-hero--textonly { grid-template-columns: minmax(0, 1fr) !important; }

.pk-chapter-hero__text { min-width: 0; }

.pk-chapter-hero__figure {
  margin: 0;
  min-width: 0;
}

.pk-chapter-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--pk-radius-xl);
  border: 1px solid var(--pk-border);
  box-shadow: var(--pk-shadow-lg);
  background: var(--pk-surface-sunk);
}

.pk-chapter-hero__credit {
  margin-top: var(--pk-space-3);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-xs, .75rem);
  text-align: right;
}

/* --------------------------------------------------------- the index card */

/* 16:9 here rather than square: the index is a grid of cards and a column of
   squares makes each card tall enough that three of them stop fitting on one
   screen. The same picture reads fine cropped — every one of them is a
   landmark centred in frame. */
.pk-chapter-card__figure {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--pk-space-4);
  border-radius: var(--pk-radius-lg);
  overflow: hidden;
  background: var(--pk-surface-sunk);
}

.pk-chapter-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--pk-dur) var(--pk-ease);
}

/* A slow, small lift on hover — the card is a link, and the picture is the
   largest part of it. Suppressed under reduced motion with everything else. */
.pk-card--link:hover .pk-chapter-card__figure img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .pk-chapter-card__figure img { transition: none; }
  .pk-card--link:hover .pk-chapter-card__figure img { transform: none; }
}