/* ==========================================================================
   PCM — "Best viewed on a bigger screen" mobile notice.
   Include this file + mobile-notice.js on any public page. Works with
   BOTH theme systems used across the site (html[data-theme] and
   body.dark-mode) so it looks correct no matter which page it's on.
   ========================================================================== */

/* ==========================================================================
   PCM — Freeze background scrolling while a page preloader is showing.
   This file is linked on every public page, so it's the one shared place
   that can cover every preloader variant used across the site in a single
   rule instead of duplicating it per page:
     - the standard crest/orbital-ring overlay          → #preloader
     - Home's matrix-shield variant (Back/Forward nav)  → #preloaderMatrix
     - the alternate overlay used on a few pages        → #pcm-custom-preloader
   Each variant's own script already adds a "finished" class when it
   dismisses itself (.dismissed for the first two, .fade-out for the third)
   — this just keys off that same class, so the scrollbar/scroll position
   locks the instant the preloader appears and frees itself the instant it
   starts sliding away, with no extra JS needed on any page.
   ========================================================================== */
html:has(#preloader:not(.dismissed)),
body:has(#preloader:not(.dismissed)),
html:has(#preloaderMatrix:not(.dismissed)),
body:has(#preloaderMatrix:not(.dismissed)),
html:has(#pcm-custom-preloader:not(.fade-out)),
body:has(#pcm-custom-preloader:not(.fade-out)) {
  overflow: hidden !important;
  height: 100vh !important;
}

.pcm-mn-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(8, 12, 9, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.22,1,.36,1);
}
.pcm-mn-overlay.pcm-mn-visible { opacity: 1; pointer-events: auto; }

@media (min-width: 520px) {
  .pcm-mn-overlay { align-items: center; padding: 20px; }
}

.pcm-mn-card {
  --mn-bg: #171d18;
  --mn-bg-2: #1e2520;
  --mn-border: rgba(255,255,255,0.09);
  --mn-text: #eef1ee;
  --mn-text-2: #9aa39c;
  width: 100%;
  max-width: 420px;
  background: var(--mn-bg);
  border: 1px solid var(--mn-border);
  border-radius: 22px 22px 0 0;
  padding: 26px 24px 22px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--mn-text);
}
@media (min-width: 520px) {
  .pcm-mn-card { border-radius: 22px; transform: translateY(10px) scale(.97); }
}
.pcm-mn-overlay.pcm-mn-visible .pcm-mn-card { transform: translateY(0) scale(1); opacity: 1; }

/* Follow whichever theme system the current page happens to use. */
body.dark-mode .pcm-mn-card,
html[data-theme="dark"] .pcm-mn-card {
  --mn-bg: #171d18; --mn-bg-2: #1e2520; --mn-border: rgba(255,255,255,0.09);
  --mn-text: #eef1ee; --mn-text-2: #9aa39c;
}
html[data-theme="light"] .pcm-mn-card,
body:not(.dark-mode) .pcm-mn-card {
  --mn-bg: #ffffff; --mn-bg-2: #f4f7f4; --mn-border: rgba(20,37,26,.10);
  --mn-text: #132018; --mn-text-2: #66766c;
}

.pcm-mn-grabber {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--mn-border);
  margin: 0 auto 18px;
}
@media (min-width: 520px) { .pcm-mn-grabber { display: none; } }

.pcm-mn-icon {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pcm-mn-icon svg { width: 100%; height: 100%; overflow: visible; }
.pcm-mn-icon .pcm-mn-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,89,.25), transparent 70%);
  animation: pcmMnPulse 2.4s ease-in-out infinite;
}
.pcm-mn-icon .pcm-mn-laptop { animation: pcmMnFloat 3s ease-in-out infinite; }
.pcm-mn-icon .pcm-mn-arrow { animation: pcmMnArrow 1.8s ease-in-out infinite; transform-origin: center; }

@keyframes pcmMnPulse {
  0%, 100% { transform: scale(0.85); opacity: .55; }
  50% { transform: scale(1.15); opacity: .95; }
}
@keyframes pcmMnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes pcmMnArrow {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50% { transform: translateX(4px); opacity: 1; }
}

.pcm-mn-title {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  letter-spacing: .2px;
  margin-bottom: 8px;
}
.pcm-mn-body {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--mn-text-2);
  text-align: center;
  margin-bottom: 20px;
}
.pcm-mn-body b { color: var(--mn-text); }

.pcm-mn-actions { display: flex; flex-direction: column; gap: 10px; }

.pcm-mn-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
}
.pcm-mn-btn:active { transform: scale(.97); }

.pcm-mn-btn-primary {
  background: linear-gradient(135deg, #00A859, #00c46a);
  color: #05130a;
  box-shadow: 0 8px 20px rgba(0,168,89,.28);
}
.pcm-mn-btn-primary:hover { filter: brightness(1.08); }

.pcm-mn-btn-secondary {
  background: var(--mn-bg-2);
  color: var(--mn-text);
  border: 1px solid var(--mn-border);
}
.pcm-mn-btn-secondary:hover { filter: brightness(1.1); }

.pcm-mn-hint {
  font-size: .72rem;
  line-height: 1.5;
  color: var(--mn-text-2);
  text-align: center;
  background: var(--mn-bg-2);
  border: 1px solid var(--mn-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 14px;
}
.pcm-mn-hint b { color: var(--mn-text); }

.pcm-mn-dismiss-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}
.pcm-mn-dismiss-row label {
  font-size: .74rem;
  color: var(--mn-text-2);
  cursor: pointer;
  user-select: none;
}
.pcm-mn-dismiss-row input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: #00A859;
  cursor: pointer;
}

.pcm-mn-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--mn-border);
  background: var(--mn-bg-2);
  color: var(--mn-text-2);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .pcm-mn-icon .pcm-mn-ring,
  .pcm-mn-icon .pcm-mn-laptop,
  .pcm-mn-icon .pcm-mn-arrow { animation: none; }
}

/* ---------- Floating "back to mobile" pill, shown while a user has
   forced desktop rendering on their phone ---------- */
.pcm-back-to-mobile {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99998;
  background: #171d18;
  color: #eef1ee;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}