/* ==========================================================================
   PFPS Immersive Design Prototype — v3, one idea instead of a pile of effects
   LOCAL PROTOTYPE ONLY. Loaded after the page's own inline <style> block.

   v1 was too subtle. v2 added more decoration (ticker tape, floating
   symbols, three glow blobs) and still read as generic — a checklist of
   "fintech dashboard" clichés, not a point of view.

   v3 is one signature idea, executed with more care: the whole page IS an
   equity curve. A single line draws itself down the page as you scroll —
   red/rough near the top, settling to green by the bottom — with a
   glowing marker riding the drawn edge and a running P&L readout that
   counts up toward the site's own real, already-published number
   (+$293,698, read live from the DOM, never invented). It gives scrolling
   an actual payoff: you don't know where the line goes until you get
   there. Ticker tape and floating symbol wallpaper removed — one idea,
   not a pile of them.
   ========================================================================== */

:root{
  --imm-cyan:  #4FA8C4;
  --imm-green: #30d158;
  --imm-red:   #f23645;
  --imm-grid-opacity: .045;
  --scroll-frac: 0;
}

body{ position: relative; }

/* ── Fixed atmosphere (grid + faint tonal wash) — texture, not the star ── */
.imm-bg{
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none; contain: strict;
}
/* nav and .email-bar are deliberately excluded here — they already carry
   their own position:fixed + z-index (200 and 150) from the site's base
   CSS, which already places them above .imm-bg's z-index:0 on their own.
   Forcing position:relative;z-index:1 on top of that overrode their fixed
   positioning entirely and dropped them to the same z-index as <main>,
   which (later in the DOM, same z-index) then painted over them — the nav
   dropdown menus were rendering underneath the hero section as a result.
   (found 2026-08-28, Tyler: "the little trading box grid... overlaps"
   the nav dropdown) */
body > main, body > footer,
body > .site-risk-notice, body > div.divider, body > .risk-notice{
  position: relative; z-index: 1;
}

.imm-grid{
  position:absolute; left:50%; top:0;
  width:140vw; height:100vh;
  transform: translateX(-50%);
  background-image:
    repeating-linear-gradient(to right,  rgba(151,163,165,var(--imm-grid-opacity)) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(151,163,165,var(--imm-grid-opacity)) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 22%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 22%, #000 0%, transparent 78%);
}

/* ── Nav: stronger backdrop once scrolled ─────────────────────────────── */
nav{ transition: background-color .3s ease, box-shadow .3s ease; }
nav.imm-nav-scrolled{
  background: rgba(11,12,13,.92) !important;
  box-shadow: 0 1px 0 rgba(79,168,196,.28), 0 16px 34px -20px rgba(0,0,0,.7);
}

/* ── Hero: status readout ─────────────────────────────────────────────── */
.imm-status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--imm-green);
  padding:6px 12px 6px 10px;
  border:1px solid rgba(48,209,88,.35);
  border-radius:3px;
  background: rgba(48,209,88,.06);
  margin-bottom:18px;
}
.imm-status .imm-dot{
  width:6px; height:6px; border-radius:50%; background:var(--imm-green);
  animation: imm-pulse 1.8s ease-out infinite;
}
@keyframes imm-pulse{
  0%   { box-shadow:0 0 0 0 rgba(48,209,88,.55); }
  70%  { box-shadow:0 0 0 7px rgba(48,209,88,0); }
  100% { box-shadow:0 0 0 0 rgba(48,209,88,0); }
}
.imm-status span.imm-status-text::after{ content:"_"; animation: imm-caret 1s step-end infinite; }
@keyframes imm-caret{ 50%{ opacity:0; } }

/* ── Section choreography — bigger movement, real presence ───────────── */
html.reveal-ready [data-reveal]:not(.plan-card){
  filter: blur(9px);
  transform: translateY(26px) scale(.97);
  transition: opacity .65s cubic-bezier(.16,.8,.3,1),
              transform .65s cubic-bezier(.16,.8,.3,1),
              filter .65s cubic-bezier(.16,.8,.3,1);
}
html.reveal-ready [data-reveal]:not(.plan-card).is-visible{ filter:blur(0); transform:none; }
html.reveal-ready [data-reveal].plan-card{
  filter: blur(9px);
  transform: translateY(10px);
  transition: opacity .65s cubic-bezier(.16,.8,.3,1), transform .65s cubic-bezier(.16,.8,.3,1), filter .65s cubic-bezier(.16,.8,.3,1);
}
html.reveal-ready [data-reveal].plan-card.is-visible{ filter:blur(0); transform:none; }

/* ── Card depth: lift + border glow on hover ──────────────────────────── */
.plan-card, .feature-row, .stat-item, .tool-card, .strat-card{
  position: relative;
  transition: transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
/* Plan cards dropped the scanning light-sweep entirely (found 2026-08-28,
   Tyler: it kept spilling past card edges no matter how it was contained,
   then "can we use a different animation all together?" — chose "just
   the lift", i.e. no extra pseudo-element effect on plan-card at all).
   strat-card/tool-card keep the sweep below, untouched — no complaint there.
   .plan-card.new-deal is the one card with a badge (.plan-badge) that pokes
   12px above the top edge — overflow:hidden would clip it (found + fixed
   2026-08-27, Tyler: "most popular and best value are cut in half, cant
   see it") — so it's excluded here. Every other plan-card keeps
   overflow:hidden: Pro (.featured) still needs it to contain its radial
   spotlight glow (::after) within its rounded corners. */
.feature-row, .stat-item, .tool-card, .strat-card, .plan-card:not(.new-deal){ overflow: hidden; }
.plan-card:hover, .strat-card:hover, .tool-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--imm-cyan) 38%, transparent);
}
.strat-card::before, .tool-card::before{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--imm-cyan) 16%, transparent), transparent);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.16,.8,.3,1);
  pointer-events: none;
}
.strat-card:hover::before, .tool-card:hover::before{ left: 130%; }
.feature-row:hover .feature-icon{ color: var(--imm-cyan); transform: translateY(-1px); }
.feature-icon{ transition: color .25s ease, transform .25s ease; }

.hero{ position:relative; }

/* ── Mobile: curve stays, motion dialed back ──────────────────────────── */
@media (max-width:760px){
  :root{ --imm-grid-opacity:.03; }
  .imm-curve-path{ stroke-width:2; }
}

/* ── prefers-reduced-motion: curve renders fully drawn, static, no chase ─ */
@media (prefers-reduced-motion: reduce){
  .imm-status .imm-dot{ animation:none !important; }
  .imm-status span.imm-status-text::after{ animation:none !important; }
  html.reveal-ready [data-reveal]{
    filter:none !important; transform:none !important;
    transition: opacity .4s ease !important;
  }
  .plan-card:hover, .strat-card:hover, .tool-card:hover{ transform:none; }
  .plan-card::before, .strat-card::before, .tool-card::before{ display:none; }
}