/* "Der Prüfer" promo in articles (scripts/article-pruefer.mjs): the in-content banner at ~3/4 and the
   scroll popup. Built from the campaign page's elements (public/der-pruefer.html): a still from the
   series, the quoted learner error with the red wavy underline, the Prüfer's line in big Sora, the green
   check of the closing scene, gold kicker, letter-spaced "presents" billing and the caps title.
   Yellow stays the action. `:root` prefixes lift specificity above editorial.css (`:root .content p`). */

:root {
  --gcp-navy: hsl(222 47% 7%);
  --gcp-navy-2: hsl(222 40% 10%);
  --gcp-ink: hsl(210 40% 98%);
  --gcp-text: hsl(224 16% 76%);
  --gcp-dim: hsl(224 13% 61%);
  --gcp-line: hsl(0 0% 100% / 0.12);
  --gcp-action: hsl(45 100% 60%);
  --gcp-gold: #DC9335;
  --gcp-green: hsl(160 84% 39%);
  --gcp-red: hsl(350 96% 72%);
  --gcp-ease: cubic-bezier(.2, .8, .2, 1);
  --gcp-spring: cubic-bezier(.16, 1.12, .3, 1);
}

/* ---------- Shared bits ---------- */
:root .gcp-banner p, :root .gcp-pop p { margin: 0; }
:root .gcp-banner .gcp-who, :root .gcp-pop .gcp-who {
  display: block; font-family: Manrope, system-ui, sans-serif; font-style: normal; font-size: 13.5px; font-weight: 500;
  color: var(--gcp-dim); margin-bottom: 2px; letter-spacing: 0;
}
/* The wavy underline fades in once the scene is in view (the Prüfer "marks" the error), then stays. */
:root .gcp-err {
  position: relative; color: var(--gcp-ink);
  text-decoration: underline wavy transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-skip-ink: none;
  transition: text-decoration-color .5s var(--gcp-ease) .35s;
}
:root .gcp-in .gcp-err, :root .gcp-static .gcp-err { text-decoration-color: var(--gcp-red); }
:root .gcp-ok { color: var(--gcp-ink); text-decoration: underline; text-decoration-color: hsl(160 84% 39% / 0); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .5s var(--gcp-ease) .9s; }
:root .gcp-in .gcp-ok, :root .gcp-static .gcp-ok { text-decoration-color: var(--gcp-green); }
:root .gcp-check { display: inline-block; width: .85em; height: .85em; vertical-align: -0.08em; margin-left: .2em; }
:root .gcp-check path { fill: none; stroke: var(--gcp-green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
:root .gcp-in .gcp-check path { animation: gcp-draw .7s 1s var(--gcp-ease) forwards; }
:root .gcp-static .gcp-check path { stroke-dashoffset: 0; }
@keyframes gcp-draw { to { stroke-dashoffset: 0; } }

/* ---------- 1 · Banner at ~3/4 of the article ---------- */
:root .gcp-banner {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 28px; align-items: start;
  margin: 48px 0 56px; padding: 28px 0; border-top: 1px solid var(--gcp-line); border-bottom: 1px solid var(--gcp-line);
  position: relative;
}
/* The gold hairline from the poster's split, drawn across the top when the banner comes into view. */
:root .gcp-banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gcp-gold);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--gcp-ease);
}
:root .gcp-banner.gcp-in::before, :root .gcp-banner.gcp-static::before { transform: scaleX(1); }
:root .gcp-banner .gcp-media { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--gcp-navy-2); }
:root .gcp-banner .gcp-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.06); transition: transform 2.4s var(--gcp-ease); margin: 0; max-width: none; border-radius: 0; }
:root .gcp-banner.gcp-in .gcp-img, :root .gcp-banner.gcp-static .gcp-img { transform: scale(1); }
:root .gcp-banner .gcp-media:hover .gcp-img { transform: scale(1.025); }
:root .gcp-banner .gcp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
:root .gcp-banner .gcp-kicker { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gcp-gold); }
:root .gcp-banner .gcp-hook { font-family: Sora, Manrope, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; color: var(--gcp-ink); text-wrap: balance; }
:root .gcp-banner .gcp-read { font-family: Newsreader, Georgia, serif; font-size: 19px; line-height: 1.45; color: var(--gcp-text); }
:root .gcp-banner .gcp-say {
  font-family: Sora, Manrope, sans-serif; font-weight: 700; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.12; letter-spacing: -0.03em;
  color: var(--gcp-ink); text-wrap: balance;
}
:root .gcp-banner .gcp-gloss { font-size: 15px; line-height: 1.5; color: var(--gcp-dim); margin-top: -6px; }
:root .gcp-banner .gcp-fix { font-family: Newsreader, Georgia, serif; font-size: 18px; line-height: 1.45; }
:root .gcp-banner .gcp-cta { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-top: 4px; }
:root .gcp-banner .gcp-link {
  font-size: 16px; font-weight: 700; color: var(--gcp-ink); text-decoration: underline; text-decoration-color: hsl(45 100% 60% / .7);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-color .2s var(--gcp-ease);
}
:root .gcp-banner .gcp-link:hover { text-decoration-color: var(--gcp-action); text-decoration-thickness: 2px; }
:root .gcp-banner .gcp-link span { display: inline-block; transition: transform .25s var(--gcp-ease); }
:root .gcp-banner .gcp-link:hover span { transform: translateX(3px); }
:root .gcp-banner .gcp-more { font-size: 13.5px; color: var(--gcp-dim); }
/* Staged entrance: lines rise one after another (only when JS runs; without it all is visible). */
:root .gcp-banner.gcp-pre .gcp-body > * { opacity: 0; transform: translateY(10px); }
:root .gcp-banner.gcp-in .gcp-body > * { opacity: 1; transform: none; transition: opacity .6s var(--gcp-ease), transform .7s var(--gcp-ease); }
:root .gcp-banner.gcp-in .gcp-body > :nth-child(2) { transition-delay: .08s; }
:root .gcp-banner.gcp-in .gcp-body > :nth-child(3) { transition-delay: .16s; }
:root .gcp-banner.gcp-in .gcp-body > :nth-child(4) { transition-delay: .5s; }
:root .gcp-banner.gcp-in .gcp-body > :nth-child(5) { transition-delay: .62s; }
:root .gcp-banner.gcp-in .gcp-body > :nth-child(6) { transition-delay: .74s; }
:root .gcp-banner.gcp-in .gcp-body > :nth-child(7) { transition-delay: .86s; }

@media (max-width: 600px) {
  :root .gcp-banner { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; margin: 40px 0 44px; padding: 22px 0; }
  :root .gcp-banner .gcp-hook { font-size: 17px; }
  :root .gcp-banner .gcp-read { font-size: 17px; }
  :root .gcp-banner .gcp-say { font-size: 22px; }
  :root .gcp-banner .gcp-fix { font-size: 16.5px; }
}

/* ---------- 2 · Scroll popup: a title card (bottom right; bottom sheet on phones) ----------
   The closing loop fills the left of the card and fades into black, the type sits in the dark like
   an end card: billing, caps title, one line from the Prüfer, one CTA. */
:root .gcp-pop {
  position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(520px, calc(100vw - 32px)); min-height: 260px;
  display: grid; grid-template-columns: 42% minmax(0, 1fr); color: var(--gcp-text);
  background: hsl(222 50% 4%); border: 1px solid hsl(0 0% 100% / .08); border-radius: 12px;
  box-shadow: 0 30px 80px -20px hsl(222 60% 1% / .9);
  font-family: Manrope, system-ui, sans-serif; overflow: hidden;
  opacity: 0; transform: translateY(24px); transition: opacity .6s var(--gcp-ease), transform .9s var(--gcp-ease);
}
:root .gcp-pop[hidden] { display: none; }
:root .gcp-pop.gcp-open { opacity: 1; transform: none; }
:root .gcp-pop.gcp-leaving { opacity: 0; transform: translateY(12px); transition: opacity .3s var(--gcp-ease), transform .35s var(--gcp-ease); }
:root .gcp-pop .gcp-pop-media { position: relative; overflow: hidden; background: #000; }
:root .gcp-pop .gcp-pop-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 45%, hsl(222 50% 4%) 98%), linear-gradient(to top, hsl(222 50% 4% / .6), transparent 40%);
}
:root .gcp-pop video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform: scale(1.12); opacity: 0; filter: saturate(.85) contrast(1.05);
  transition: transform 3s var(--gcp-ease), opacity 1.2s var(--gcp-ease) .1s;
}
:root .gcp-pop.gcp-open video { transform: scale(1); opacity: 1; }
:root .gcp-pop .gcp-pop-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 32px 28px 28px 8px; }
:root .gcp-pop .gcp-presents { font-size: 10.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gcp-gold); }
/* The caps title settles from wide letter-spacing into the poster's tight one. */
:root .gcp-pop .gcp-title {
  font-family: Sora, Manrope, sans-serif; font-weight: 800; text-transform: uppercase; color: var(--gcp-ink);
  font-size: 38px; line-height: .9; letter-spacing: .14em; opacity: 0; filter: blur(6px);
  transition: letter-spacing 1.6s var(--gcp-ease) .2s, opacity 1s var(--gcp-ease) .2s, filter 1.1s var(--gcp-ease) .2s;
}
:root .gcp-pop.gcp-open .gcp-title { letter-spacing: -0.03em; opacity: 1; filter: none; }
:root .gcp-pop .gcp-quote { font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.35; color: var(--gcp-text); text-wrap: balance; }
:root .gcp-pop .gcp-actions { margin-top: 8px; }
:root .gcp-pop .gcp-btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--gcp-action); color: hsl(222 47% 9%);
  font-weight: 700; font-size: 14.5px; line-height: 1.3; text-decoration: none; padding: 12px 16px; border-radius: 8px; transition: filter .2s var(--gcp-ease);
}
:root .gcp-pop .gcp-btn:hover { filter: brightness(1.06); }
:root .gcp-pop .gcp-btn span { display: inline-block; transition: transform .25s var(--gcp-ease); }
:root .gcp-pop .gcp-btn:hover span { transform: translateX(3px); }
:root .gcp-pop .gcp-x {
  position: absolute; z-index: 1; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--gcp-dim); cursor: pointer; transition: color .2s var(--gcp-ease), background .2s var(--gcp-ease);
}
:root .gcp-pop .gcp-x:hover { color: var(--gcp-ink); background: hsl(0 0% 100% / .06); }
:root .gcp-pop .gcp-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
/* Lines fade in slowly after the title, like credits. */
:root .gcp-pop .gcp-pop-body > :not(.gcp-title) { opacity: 0; }
:root .gcp-pop.gcp-open .gcp-pop-body > :not(.gcp-title) { opacity: 1; transition: opacity .9s var(--gcp-ease); }
:root .gcp-pop.gcp-open .gcp-presents { transition-delay: .05s; }
:root .gcp-pop.gcp-open .gcp-quote { transition-delay: .9s; }
:root .gcp-pop.gcp-open .gcp-actions { transition-delay: 1.3s; }
:root .gcp-pop :focus-visible, :root .gcp-banner :focus-visible { outline: 2px solid var(--gcp-action); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 600px) {
  :root .gcp-pop {
    left: 0; right: 0; bottom: 0; width: auto; min-height: 0; border-radius: 16px 16px 0 0; border-bottom: 0;
    grid-template-columns: 34% minmax(0, 1fr); transform: translateY(100%);
  }
  :root .gcp-pop.gcp-leaving { transform: translateY(100%); }
  :root .gcp-pop .gcp-pop-body { gap: 8px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)) 4px; }
  :root .gcp-pop .gcp-presents { font-size: 9.5px; letter-spacing: .24em; padding-right: 28px; }
  :root .gcp-pop .gcp-title { font-size: 27px; }
  :root .gcp-pop .gcp-quote { font-size: 15.5px; }
  :root .gcp-pop .gcp-actions { margin-top: 4px; }
  :root .gcp-pop .gcp-btn { padding: 11px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :root .gcp-pop, :root .gcp-pop *, :root .gcp-pop::before, :root .gcp-banner, :root .gcp-banner *, :root .gcp-banner::before { transition: none !important; animation: none !important; }
  :root .gcp-check path { stroke-dashoffset: 0; }
  :root .gcp-pop .gcp-title { filter: none; }
}