/* Jason Eberly Coaching -- shared stylesheet
   Loaded on every real page (Home, About, Waitlist, Legal).
   Placeholder pages (/book, /welcome, /members/welcome) use only the
   "Base" section below, not the component/page-specific rules. */

/* ---------- Base ---------- */
@font-face {
  font-family: 'Aglatia';
  src: url('/assets/fonts/Aglatia.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  background: #FFFFE3;
  font-family: 'Figtree', sans-serif;
  color: #252525;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: #F7CAC9; }
a { color: inherit; }
a:hover { color: inherit; }

/* Grain texture -- a masked speckle layer over any element with this class */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .32;
  background-image: url('/assets/images/grain.png');
  background-size: 180px;
}
.grain-strong::after { opacity: .5; }
body[data-grain='off'] .grain::after { display: none; }
body[data-notes='off'] .hand-note { display: none !important; }

/* ---------- Shared keyframes ---------- */
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
@keyframes twinkleFar { 0%, 100% { opacity: .12; } 50% { opacity: .42; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(224, 80, 60, .45); } 100% { box-shadow: 0 0 0 16px rgba(224, 80, 60, 0); } }
@keyframes dashMarch { to { stroke-dashoffset: -29; } }

/* ---------- Shared interior-page header/footer (About, Waitlist, Book, Legal) ---------- */
@media (max-width: 840px) { [data-nav-links] { display: none !important; } }

.nav-link { text-decoration: none; }
.nav-link:hover { opacity: .55; }

.site-footer-links a,
.site-footer-cookie-btn { text-decoration: none; }

/* Footer utility bar is set in caps. The jason.eberly wordmark is left as-is: it's the logo. */
.site-footer-links,
.site-footer-links .site-footer-cookie-btn,
.ft-caps { text-transform: uppercase; letter-spacing: .12em; }
.site-footer-links a:hover,
.site-footer-cookie-btn:hover { opacity: .6; }

/* ---------- Cookie banner (shared) ---------- */
.cookie-accept:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #8FD9FB; }
.cookie-decline:hover { background: #252525; color: #FFFFE3; }
.cookie-policy-link:hover { color: #252525; }

/* "Almost open" popup (built by site.js while JE_PRELAUNCH is true) */
.pl-wrap { position: fixed; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 22px); z-index: 94; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: min(360px, calc(100vw - 24px)); opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.pl-wrap.is-in { opacity: 1; transform: none; }
.pl-card { position: relative; background: #FFFFE3; border: 3px solid #252525; border-radius: 22px; box-shadow: 6px 6px 0 #F7CAC9; padding: 20px 22px 18px; color: #252525; font-family: 'Figtree', sans-serif; }
.pl-wrap.is-collapsed .pl-card { display: none; }
.pl-pill { display: none; background: #E0503C; color: #FFFFE3; border: 2.5px solid #252525; border-radius: 999px; padding: 10px 18px; font-family: 'Aglatia', serif; font-size: 16px; cursor: pointer; box-shadow: 3px 3px 0 #252525; transform: rotate(-3deg); transition: transform .15s; }
.pl-pill:hover { transform: rotate(0) translateY(-2px); }
.pl-wrap.is-collapsed .pl-pill { display: inline-block; }
.pl-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: none; background: none; font-size: 24px; line-height: 1; color: rgba(37, 37, 37, .5); cursor: pointer; border-radius: 50%; z-index: 2; }
.pl-close:hover { color: #252525; background: rgba(37, 37, 37, .06); }
.pl-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #E0503C; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; background: #E0503C; animation: plPulse 1.8s ease-in-out infinite; }
@keyframes plPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 80, 60, .45); } 50% { box-shadow: 0 0 0 6px rgba(224, 80, 60, 0); } }
.pl-lead { font-family: 'Aglatia', serif; font-size: 19px; line-height: 1.25; margin: 10px 28px 0 0; }
.pl-body { font-size: 14px; line-height: 1.55; color: rgba(37, 37, 37, .75); margin: 9px 0 0; text-wrap: pretty; }
.pl-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 15px; }
.pl-btn { background: #252525; color: #FFFFE3; border-radius: 999px; padding: 11px 18px; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 3px 3px 0 #8FD9FB; transition: transform .15s; }
.pl-btn:hover { transform: translate(-1px, -1px); }
.pl-link { font-size: 13.5px; font-weight: 700; color: #252525; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .pl-card { padding: 16px 18px 15px; border-radius: 18px; box-shadow: 4px 4px 0 #F7CAC9; }
  .pl-lead { font-size: 16.5px; }
  .pl-body { font-size: 13px; margin-top: 7px; }
  .pl-actions { margin-top: 12px; }
  .pl-btn { padding: 10px 16px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .pl-wrap { transition: none; } .pl-dot { animation: none; } }

/* "waiting on paperwork..." dots on the home timeline */
.wait-dots span { animation: waitDot 1.4s infinite both; }
.wait-dots span:nth-child(2) { animation-delay: .2s; }
.wait-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes waitDot { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wait-dots span { animation: none; } }