/*
  case-paywall.css
  The soft-paywall look, extracted from portfolio-shared.css 2026-09-20 so the
  scrolling case studies and the presentation decks share ONE source of truth.

  Loaded by:
    - portfolio-shared.css, via @import (every case-study page)
    - case-study-presentation/*.html decks, via their own <link>

  The deck gate reuses these exact class names, so both surfaces look and
  behave identically. Change the look here and both follow.
  Behaviour lives in portfolio-shared.js (pages) and deck-gate.js (decks).
*/

/* ─────────────────────────────────────────────────────────────────────────
   Case-study soft paywall (v3 — bottom banner + content-only blur)
   ─────────────────────────────────────────────────────────────────────────
   Pattern: the reader scrolls through hero + Problem freely. Everything
   after Problem is wrapped in `.case-locked` and only the CONTENT inside
   it (text + media) is blurred — layout containers, sections, dividers,
   the side nav, page chrome, etc. stay sharp. A fixed banner pinned to
   the bottom of the viewport (cookie-banner style) holds the password
   form. Banner slides in when reader passes Problem, slides out when
   they scroll back to it. Password unlocks the whole session.

   Injection + scroll observation handled in portfolio-shared.js.
   ───────────────────────────────────────────────────────────────────────── */

/* Lock the interaction of every descendant — selecting blurred text or
   tabbing into hidden controls would defeat the lock. */
.case-locked {
  position: relative;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Selective blur: target CONTENT elements (text + media + icons + form
   controls) rather than their containers. The page structure — section
   padding, dividers, borders, background — stays sharp; only the readable
   content is illegible. */
.case-locked :is(p, h1, h2, h3, h4, h5, h6, li, dt, dd,
                  blockquote, figcaption, summary, label, time, code, pre,
                  span:not(.case-paywall-request-arrow):not([class*="badge"]):not([class*="dot"]):not([class*="-icon"]),
                  a, button, input, textarea, select,
                  img, picture, video, iframe, canvas, svg,
                  [class*="-title"], [class*="-desc"], [class*="-label"],
                  [class*="-text"], [class*="-num"], [class*="-name"],
                  [class*="-overview"], [class*="-stat"], [class*="-quote"]) {
  filter: blur(7px) saturate(0.7);
  -webkit-filter: blur(7px) saturate(0.7);
  transition: filter 0.55s ease;
}

/* When unlocked, lift blur from everything inside the locked region. */
body.case-unlocked .case-locked {
  pointer-events: auto;
  user-select: auto;
  -webkit-user-select: auto;
}
body.case-unlocked .case-locked * {
  filter: none !important;
  -webkit-filter: none !important;
}
body.case-unlocked .case-paywall {
  transform: translateY(110%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CASE PAYWALL — bottom-sticky sheet (cookies-banner pattern).
   Replicated from phisayoo/portfolio's case-studies.css (lines 3509–3927).
   Fixed to the bottom of the viewport, frosted glass, slides up on reveal.
   The `.case-locked` blur on content underneath is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
.case-paywall-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(42vh, 360px);
  padding: 56px 48px max(48px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 -1px 2px rgba(15, 23, 42, 0.04),
    0 -24px 60px -16px rgba(15, 23, 42, 0.18);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  pointer-events: none;
}
body.dark .case-paywall-bar {
  background: rgba(20, 20, 20, 0.82);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 -1px 2px rgba(0, 0, 0, 0.5),
    0 -24px 60px -16px rgba(0, 0, 0, 0.7);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .case-paywall-bar { background: rgba(255, 255, 255, 0.98); }
  body.dark .case-paywall-bar { background: rgba(20, 20, 20, 0.98); }
}

/* Top fade — washes the join between blurred content above and the sheet. */
.case-paywall-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -56px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 100%);
  pointer-events: none;
}
body.dark .case-paywall-bar::before {
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.45) 100%);
}

/* Reveal once reader passes Problem; unlock hides. */
body.case-past-problem .case-paywall-bar {
  transform: translateY(0);
  pointer-events: auto;
}
body.case-unlocked .case-paywall-bar {
  transform: translateY(100%);
  pointer-events: none;
}

.case-paywall-bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 1180px;
}

.case-paywall-bar-main {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
}

/* ---- Left column: eyebrow + title + blurb ---- */
.case-paywall-bar-copy { min-width: 0; }

.case-paywall-bar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.78);
}
body.dark .case-paywall-bar-eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(240, 240, 240, 0.82);
}
.case-paywall-bar-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1a1a;
}
body.dark .case-paywall-bar-eyebrow-dot { background: #f0f0f0; }

.case-paywall-bar-title {
  font-family: 'Satoshi', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 14px;
  max-width: 18ch;
}
body.dark .case-paywall-bar-title { color: #f0f0f0; }

.case-paywall-bar-blurb {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(60, 60, 67, 0.65);
  margin: 0;
  max-width: 38ch;
}
body.dark .case-paywall-bar-blurb { color: rgba(200, 200, 207, 0.6); }
.case-paywall-bar-blurb a {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body.dark .case-paywall-bar-blurb a {
  color: #f0f0f0;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.case-paywall-bar-blurb a:hover { text-decoration-color: currentColor; }

/* ---- Vertical hairline divider ---- */
.case-paywall-bar-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 20%,
    rgba(0, 0, 0, 0.1) 80%,
    transparent 100%
  );
  max-height: 140px;
}
body.dark .case-paywall-bar-divider {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0.12) 80%,
    transparent 100%
  );
}

/* ---- Right column: labelled form group ---- */
.case-paywall-bar-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.case-paywall-bar-label {
  font-family: 'Satoshi', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(60, 60, 67, 0.6);
}
body.dark .case-paywall-bar-label { color: rgba(200, 200, 207, 0.55); }

.case-paywall-bar-field {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.case-paywall-bar-input {
  width: 260px;
  padding: 14px 18px;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.case-paywall-bar-input::placeholder { color: rgba(60, 60, 67, 0.4); }
.case-paywall-bar-input:hover { border-color: rgba(0, 0, 0, 0.22); }
.case-paywall-bar-input:focus-visible {
  border-color: #1a1a1a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(22, 21, 19, 0.08);
}
body.dark .case-paywall-bar-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f0f0f0;
}
body.dark .case-paywall-bar-input::placeholder { color: rgba(200, 200, 207, 0.42); }
body.dark .case-paywall-bar-input:focus-visible {
  border-color: #f0f0f0;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 3px rgba(240, 240, 240, 0.08);
}
.case-paywall-bar-input.is-error {
  border-color: rgba(192, 28, 28, 0.55);
  box-shadow: 0 0 0 3px rgba(192, 28, 28, 0.1);
}

.case-paywall-bar-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: #1a1a1a;
  color: #fafafa;
  border: none;
  border-radius: 12px;
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  cursor: pointer;
  transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}
body.dark .case-paywall-bar-submit { background: #f0f0f0; color: #1a1a1a; }
.case-paywall-bar-submit:hover { opacity: 0.92; }
.case-paywall-bar-submit:hover .case-paywall-bar-arrow { transform: translateX(2px); }
.case-paywall-bar-submit:active { transform: translateY(1px); }
.case-paywall-bar-submit:disabled { opacity: 0.55; cursor: progress; }
.case-paywall-bar-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
}

/* Narrow viewports: collapse 3-col grid to one column, hide divider. */
@media (max-width: 860px) {
  .case-paywall-bar {
    min-height: max(44vh, 360px);
    padding: 28px 22px max(24px, env(safe-area-inset-bottom));
  }
  .case-paywall-bar-inner { gap: 22px; }
  .case-paywall-bar-main { grid-template-columns: 1fr; gap: 22px; }
  .case-paywall-bar-divider { display: none; }
  .case-paywall-bar-title { font-size: 24px; max-width: none; }
  .case-paywall-bar-blurb { font-size: 14px; max-width: none; }
  .case-paywall-bar-form { width: 100%; }
  .case-paywall-bar-field { width: 100%; }
  .case-paywall-bar-input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Very short viewports — trim breathing room so sheet doesn't dominate. */
@media (max-height: 560px) {
  .case-paywall-bar {
    min-height: 0;
    padding: 22px 32px max(20px, env(safe-area-inset-bottom));
  }
  .case-paywall-bar-inner { gap: 16px; }
  .case-paywall-bar-title { font-size: 22px; margin-bottom: 6px; }
  .case-paywall-bar-eyebrow { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-paywall-bar { transition: none; }
}