/* Premium Projects header (2026-10-06), built to the owner's mockup.

   The mockup is drawn 1982px wide; every size here is in EM off one font-size that follows the
   header's own width (a container query), so 16px reproduces the design and the page's 80rem
   column gets the same header smaller. The smallest text has px floors (max()) so it stays
   readable at that size.

   The 3D scene on the right is the mockup's own pixels (assets/img/premium-hero/pph-art.webp) with
   its dashed arrows painted OUT; the arrows are redrawn on top as SVG so they can move. */

/* padding:0 is load-bearing: the theme pads every bare <section> by ~3.5rem top and bottom, which
   put a 150px gap between the menu and this header and another below it. */
.pph { container-type: inline-size; margin-bottom: 1.25rem; padding: 0; }

.pph-card {
  position: relative;
  font-size: clamp(10px, calc(100cqw / 123.9), 16px);
  height: 36.56em;
  overflow: hidden;
  border: 1px solid #eceefb;
  border-radius: 1.75em;
  background:
    radial-gradient(62em 36em at 80% 28%, #dfe3fd 0, rgba(223, 227, 253, 0) 70%),
    linear-gradient(90deg, #f7f8fe 0, #f3f4fe 48%, #eaedfd 100%);
  color: #0b0d24;
}

/* ---- the scene and its arrows ---- */
/* At the 10px font floor the words are wider than drawn (px floors), so below the design width
   the scene gives way: it never takes more than what is left after ~600px of words, and shrinks
   from the bottom-right corner it is anchored to. At full size the min() changes nothing. */
.pph-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(66.25em, calc(100% - 600px));
  aspect-ratio: 1060 / 585;
  pointer-events: none;
}
.pph-art img,
.pph-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* left edge fades into the card; so does the top, which shows once the scene is smaller than the card */
.pph-art img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 5%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 5%);
  mask-composite: intersect;
}
.pph-arrow {
  fill: none;
  stroke: #3a72f2;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 9;
  animation: pphFlow 1.1s linear infinite;
}
/* the dashes march toward the arrowhead: offset runs down by one dash+gap per cycle */
@keyframes pphFlow { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
.pph-head { fill: none; stroke: #3a72f2; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pph-head-g { animation: pphNudge 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pphNudge { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
/* a light that travels each arrow, one after another: build -> run -> open -> report */
.pph-spark { fill: #fff; stroke: #3a72f2; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(58, 114, 242, .8)); }

/* ---- the words ---- */
.pph-copy { position: absolute; left: 3.125em; top: 3.7em; z-index: 1; width: 59em; }
.pph-pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  height: 2.45em;
  padding: 0 1em 0 .85em;
  border: 1px solid #fbdcae;
  border-radius: 999px;
  background: #fde9c9;
  font-size: 1.17em;
  font-weight: 700;
  color: #d57a09;
}
.pph-pill .fa-solid { font-size: 1.1em; color: #e8890c; }
.pph h1 {
  margin: .14em 0 0;
  /* 4.79em in the design; 4.4em since the title became "Student Premium Projects" (2026-10-07),
     so it still fits on one line beside the art */
  font-size: 4.4em;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #0b0d24;
}
.pph h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #5a2bff, #4116f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pph-lede { margin: .45em 0 0; font-size: max(1.59em, 14px); line-height: 1.395; color: #4d556b; }

.pph-feats { display: flex; gap: 1.3em; margin: 1.86em 0 0; padding: 0; list-style: none; }
.pph-feats li { display: flex; align-items: center; gap: .85em; }
.pph-feats img {
  flex: 0 0 auto;
  width: 4em;
  height: 4em;
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
}
.pph-feats b { display: block; font-size: max(1.09em, 12.5px); font-weight: 700; color: #0b0d24; white-space: nowrap; }
.pph-feats i { display: block; margin-top: .25em; font-style: normal; font-size: max(1.06em, 12px); color: #5d6675; white-space: nowrap; }

.pph-acts { display: flex; gap: 1.6em; margin-top: 2.6em; }
.pph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  height: 3.3em;
  padding: 0 1.6em;
  border-radius: .55em;
  font-size: max(1.375em, 13px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pph-btn:hover { transform: translateY(-2px); }
.pph-btn.is-primary {
  width: 19.7em;
  border: 0;
  background: linear-gradient(90deg, #7240fb, #5b2cf6);
  color: #fff;
  box-shadow: 0 .55em 1.2em rgba(91, 44, 246, .32);
}
.pph-btn.is-primary:hover { color: #fff; box-shadow: 0 .7em 1.5em rgba(91, 44, 246, .4); }
.pph-btn.is-primary .fa-arrow-right { transition: transform .15s ease; }
.pph-btn.is-primary:hover .fa-arrow-right { transform: translateX(3px); }
.pph-btn.is-ghost { border: 1px solid #ddd5fb; background: #fff; color: #5626ea; }
.pph-btn.is-ghost:hover { color: #5626ea; background: #faf8ff; box-shadow: 0 .5em 1.1em rgba(86, 38, 234, .12); }
.pph-btn[hidden] { display: none; }

/* the card the "Try a live demo" button points at, for a moment */
.pp-card.pph-flash { animation: pphFlash 2.4s ease-out 1; }
@keyframes pphFlash {
  0%, 40% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .75), 0 .8rem 2rem rgba(34, 197, 94, .25); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* A laptop-width header: the px floors make the feature labels wider than drawn, so the row tightens
   rather than running into the plant at the left edge of the scene. */
@container (max-width: 1500px) {
  .pph-feats { gap: .7em; }
  .pph-feats li { gap: .55em; }
  .pph-feats img { width: 3.5em; height: 3.5em; }
  .pph-btn.is-primary { width: auto; }
}

/* ---- narrower than the design can hold: the words alone, in flow ---- */
@container (max-width: 1060px) {
  .pph-card { height: auto; font-size: 11px; padding: 2.4em 2.2em 2.6em; }
  .pph-art { display: none; }
  .pph-copy { position: static; width: auto; }
  .pph h1 { font-size: 4em; }
  .pph-lede br { display: none; }
  .pph-feats { flex-wrap: wrap; gap: 1em 1.6em; }
  .pph-acts { flex-wrap: wrap; gap: .8em; }
}
@container (max-width: 520px) {
  .pph h1 { font-size: 3.2em; }
  .pph-feats li { flex: 1 1 100%; }
  .pph-btn, .pph-btn.is-primary { width: 100%; }
}

/* dark theme: the card stays light - the scene is painted on that light ground */
[data-bs-theme="dark"] .pph-card { border-color: rgba(165, 180, 252, .2); }

@media (prefers-reduced-motion: reduce) {
  .pph-arrow, .pph-head-g { animation: none; }
  .pph-spark { display: none; }
  .pph-btn, .pph-btn.is-primary .fa-arrow-right { transition: none; }
  .pph-btn:hover { transform: none; }
  .pp-card.pph-flash { animation: none; outline: 3px solid #22c55e; }
}