/* =========================================================================
   The landing page's kit, carried lightly to the rest of the site
   (17 Oct 2026, "apply this new design kit to other pages subtly ... so
   everything goes well together"). Loaded after app.css and glass.css on
   every public page, so taking this file out puts the site back as it was.

   Three things, none of them a new layout:
   - A campus photograph at the top of the public pages, under a heavy shade
     (views/partials/page-band.php), as the landing page's hero and blocks
     are on campus photographs.
   - Page titles in the landing page's headline voice: tighter and heavier,
     still small and on the left.
   - Panels with the landing panels' soft depth instead of a flat box.

   No glow, no new colour, no blur on anything in the page's flow.
   ========================================================================= */

/* ---- The photograph ------------------------------------------------------
   Behind everything (z-index -1 in the page's own stacking: html has no
   background, so the body's paints the canvas and this lies on top of it),
   from the very top of the page under the floating bar, faded into the
   page's ground before the content below the header starts. */
.pk-band {
  position: absolute; z-index: -1;
  left: 0; right: 0; top: 0;
  height: clamp(300px, 34vw, 440px);
  overflow: hidden; overflow: clip;
  pointer-events: none;
}
.pk-band img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
/* The shade: the page's own ground over the photograph, thick enough that
   the header's grey line keeps its contrast over any part of it (measured),
   and solid ground by the foot. */
.pk-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .74) 0%,
    rgba(var(--scrim-rgb), .80) 45%,
    rgba(var(--scrim-rgb), .93) 75%,
    var(--bg) 100%);
}
:root[data-theme="light"] .pk-band::after {
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .86) 0%,
    rgba(var(--scrim-rgb), .89) 45%,
    rgba(var(--scrim-rgb), .95) 75%,
    var(--bg) 100%);
}
/* The landing's photographs ease in; these arrive the same way, once. */
@media (prefers-reduced-motion: no-preference) {
  .pk-band img { animation: pkBandIn 1.2s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes pkBandIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* The photograph's credit, in the footer of the page that shows it. */
.foot-credit { margin: 0.35rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.foot-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ---- Titles ----------------------------------------------------------------
   The landing's headline voice at the app's size: heavier, tighter. */
.page-head h1 {
  font-size: clamp(1.55rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

/* ---- Panels ----------------------------------------------------------------
   The landing's panels are lifted by a soft shadow, not drawn by a border.
   The page's panels keep their hairline (it is what separates them on a flat
   ground) and gain the same depth. */
.af-step,
.explore-card,
.prodi-card,
.hist-card,
.card-chunky,
.hp-qs,
.hp-card,
.at-card,
.sk-form,
.pf-drop,
.qz-side {
  border-color: var(--glass-edge);
  box-shadow: 0 24px 48px -30px rgba(var(--shadow-rgb), .55);
}

/* Over the photograph the header's grey line drops below AA (3.9:1 measured);
   one tone up holds it on every page that has one. */
.pk-band ~ * .page-head p { color: var(--ink-2); }
/* The reading pages' section links sit over it too (4.0:1 in light); the
   same tone. Hover still goes to ink, as it did. */
.pk-band ~ * .rd-toc a { color: var(--ink-2); }
.pk-band ~ * .rd-toc a:hover { color: var(--ink); }

/* ==== Effects (17 Oct 2026: "shiny button like apple or google or yt",
   "outline animation like subscribe button where applicable", "more micro
   animation where suited ... not too much") =================================

   A sheen across the main buttons. Every primary button has it on hover: a
   band of light crosses once, left to right, and the press sinks a little.
   The few that are the next step (.pk-shine: the landing's first button, the
   form's button once the form is complete) also catch the light by
   themselves every few seconds. It is a background layer over the button's
   own colour, so nothing outside the button is touched. */
.btn-primary {
  background-image: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, .34) 50%, transparent 60% 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
}
/* The sweep is an animation, not a transition: several buttons carry their
   own transition list (the chat's, the reveal's), which would replace one. */
@media (prefers-reduced-motion: no-preference) {
  .pk-shine { animation: pkShine 6s ease-in-out 2s infinite; }
  .btn-primary:hover { animation: pkShineNow .8s cubic-bezier(.2, .6, .2, 1) both; }
}
@keyframes pkShineNow { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes pkShine {
  0%, 74% { background-position: 100% 0; }
  92%, 100% { background-position: 0% 0; }
}

/* The outline round the button that is the next step, as YouTube's
   subscribe button does it: a blue line chasing round the pill twice with a
   faint glow under it, gone, and back again after a pause, for as long as
   the button is the thing to press. A button rings while it has .is-ringing
   (in the markup for the landing's buttons, the quiz's start and a campus
   page's "Cek peluangku"; set by apply-steps.js while the analysis form is
   complete) or, with .pk-ring--filled, while its form's required field has
   something typed in it (a code). --ring-delay staggers buttons so two on
   one screen do not flash in step. */
@property --pk-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pk-ring { position: relative; isolation: isolate; }
.pk-ring::before,
.pk-ring::after {
  content: ""; position: absolute; inset: -4px; z-index: -1;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(from var(--pk-a), transparent 0deg 210deg, color-mix(in srgb, var(--primary) 45%, rgba(255, 255, 255, .7)) 280deg, var(--primary) 330deg, color-mix(in srgb, var(--primary) 25%, white) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
}
.pk-ring::after { inset: -6px; padding: 4px; filter: blur(8px); z-index: -2; }
@media (prefers-reduced-motion: no-preference) {
  .pk-ring.is-ringing::before,
  form:has(input[required]:not(:placeholder-shown)) .pk-ring--filled::before { animation: pkRingCycle 6.8s linear var(--ring-delay, 0s) infinite; }
  .pk-ring.is-ringing::after,
  form:has(input[required]:not(:placeholder-shown)) .pk-ring--filled::after { animation: pkRingCycleGlow 6.8s linear var(--ring-delay, 0s) infinite; }
}
/* Two laps in the first third (about 2.2s), faded out by 38%, then still
   for about four seconds before the next round. */
@keyframes pkRingCycle {
  0% { --pk-a: 0deg; opacity: 0; }
  4% { opacity: 1; }
  32% { --pk-a: 720deg; opacity: 1; }
  38%, 100% { --pk-a: 720deg; opacity: 0; }
}
@keyframes pkRingCycleGlow {
  0% { --pk-a: 0deg; opacity: 0; }
  4% { opacity: .5; }
  32% { --pk-a: 720deg; opacity: .5; }
  38%, 100% { --pk-a: 720deg; opacity: 0; }
}
/* A slow phone keeps the shine but not the turning line. */
.pk-lite .pk-ring::before, .pk-lite .pk-ring::after { animation: none !important; }

/* ---- Micro animations, where something just happened ------------------- */
/* A step of the analysis form ticks over: its number turns into a check
   with a small pop (the form and its rail). */
@media (prefers-reduced-motion: no-preference) {
  .af-step.is-done .af-step-head .af-num i,
  .af-steps a.is-done .af-num i { animation: pkPop .4s cubic-bezier(.2, .9, .3, 1.4) both; }
}
@keyframes pkPop { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* A card that is a link lifts a little under the pointer. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.explore-card,
  a.hist-card {
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
  }
  a.explore-card:hover,
  a.hist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 52px -28px rgba(var(--shadow-rgb), .7);
  }
}

/* The photographs' credits, on whichever landing page shows them (the old
   page has them too since its photographs were replaced, 17 Oct 2026). */
.lp3-credits { padding-block: 1.5rem 0.5rem; font-size: 0.8rem; color: var(--muted); }
.lp3-credits summary { cursor: pointer; width: max-content; max-width: 100%; }
.lp3-credits summary:hover { color: var(--ink-2); }
.lp3-credits ul { margin: 0.75rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; line-height: 1.5; }
.lp3-credits a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }