/* InsightFlow 2.1 — Evidence Editorial Motion Layer
   Additive polish only: no core layout/API dependency is replaced. */
:root{
  --if-canvas:#f6f4ef;
  --if-ink:#12161d;
  --if-ink-soft:#5f6672;
  --if-blue:#5367ff;
  --if-blue-2:#8491ff;
  --if-cyan:#20b8a8;
  --if-coral:#ff7357;
  --if-line:rgba(18,22,29,.10);
  --if-ease:cubic-bezier(.22,.8,.24,1);
  --if-spring:cubic-bezier(.2,.9,.2,1.06);
}

/* A quiet progress artifact: more editorial index than loading bar. */
#if-scroll-progress{position:fixed;z-index:200;left:0;top:0;height:2px;width:100%;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--if-scroll,0));background:linear-gradient(90deg,var(--if-blue),var(--if-cyan));box-shadow:0 0 18px rgba(83,103,255,.28)}

/* Subtle field-grid. It should be felt before it is consciously seen. */
.portfolio-view::before{content:"";position:fixed;z-index:-3;inset:0;pointer-events:none;background-image:linear-gradient(rgba(18,22,29,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(18,22,29,.028) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.08) 70%,transparent)}
.portfolio-view::after{content:"";position:fixed;z-index:-2;width:42vw;height:42vw;right:-14vw;top:4vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(83,103,255,.12),rgba(83,103,255,0) 68%);filter:blur(10px);transform:translate3d(var(--if-aura-x,0),var(--if-aura-y,0),0);transition:transform .8s var(--if-ease)}

/* Navigation: calm by default, crisp on intent. */
.site-nav{backdrop-filter:saturate(120%) blur(16px);-webkit-backdrop-filter:saturate(120%) blur(16px);background:color-mix(in srgb,var(--if-canvas) 82%,transparent);border-bottom:1px solid transparent;transition:background .35s var(--if-ease),border-color .35s var(--if-ease),box-shadow .35s var(--if-ease)}
.site-nav.if-scrolled{border-color:var(--if-line);box-shadow:0 8px 36px rgba(18,22,29,.05);background:color-mix(in srgb,var(--if-canvas) 94%,transparent)}
.site-links a{position:relative}
.site-links a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--if-ink);transform:scaleX(0);transform-origin:right;transition:transform .25s var(--if-ease)}
.site-links a:hover::after,.site-links a.if-active::after{transform:scaleX(1);transform-origin:left}

/* Language toggle: make the switch feel intentional rather than utility chrome. */
.lang-switch{position:relative;overflow:hidden;min-width:66px;transition:background .25s var(--if-ease),color .25s var(--if-ease),border-color .25s var(--if-ease)}
.lang-switch::before{content:"";position:absolute;inset:3px auto 3px 3px;width:24px;border-radius:999px;background:var(--if-ink);opacity:.08;transform:translateX(var(--if-lang-shift,0));transition:transform .28s var(--if-spring),opacity .28s var(--if-ease);pointer-events:none}
.lang-switch:hover::before{opacity:.14}

/* Hero type and stage: cinematic, but still research-tool credible. */
.hero-v2-copy h1{max-width:820px;text-wrap:balance}
.hero-v2-copy h1 em{position:relative;display:inline-block}
.hero-v2-copy h1 em::after{content:"";position:absolute;left:3%;right:1%;height:.12em;bottom:-.02em;background:linear-gradient(90deg,var(--if-blue),var(--if-cyan));border-radius:999px;transform:scaleX(var(--if-emphasis,0));transform-origin:left;transition:transform 1s .35s var(--if-ease)}
.hero-v2-copy.if-entered h1 em::after{--if-emphasis:1}
.hero-signal-stage{isolation:isolate;overflow:hidden;transform-style:preserve-3d;will-change:transform;transition:box-shadow .4s var(--if-ease),border-color .4s var(--if-ease)}
.hero-signal-stage::after{content:"";position:absolute;z-index:-1;inset:-45%;pointer-events:none;background:radial-gradient(circle at var(--if-stage-x,50%) var(--if-stage-y,40%),rgba(83,103,255,.20),transparent 23%),radial-gradient(circle at 58% 64%,rgba(32,184,168,.10),transparent 24%);filter:blur(18px);transition:opacity .35s var(--if-ease)}
.hero-signal-stage:hover{box-shadow:0 34px 100px rgba(20,26,36,.19),inset 0 0 0 1px rgba(255,255,255,.04)}
.evidence-map .source-node{transition:transform .32s var(--if-spring),filter .32s var(--if-ease)}
.evidence-map .source-node:hover{filter:brightness(1.18)}
.evidence-map .insight-node rect{transform-box:fill-box;transform-origin:center;animation:if-node-breathe 3.6s ease-in-out infinite}
@keyframes if-node-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* Scroll cue gets an actual travelling signal. */
.scroll-cue span{position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;left:50%;top:-45%;width:1px;height:42%;background:var(--if-blue);animation:if-cue 1.8s ease-in-out infinite}
@keyframes if-cue{0%{transform:translateY(-30%);opacity:0}30%{opacity:1}75%{opacity:1}100%{transform:translateY(250%);opacity:0}}

/* Story stack: scroll-state is exposed by JS as --if-stack-progress. */
.story-card{position:relative;transform:translateY(calc((1 - var(--if-card-progress,0))*14px)) scale(calc(.986 + var(--if-card-progress,0)*.014));opacity:calc(.78 + var(--if-card-progress,0)*.22);transition:border-color .28s var(--if-ease),box-shadow .28s var(--if-ease)}
.story-card::before{content:"";position:absolute;left:-1px;top:24px;bottom:24px;width:2px;border-radius:10px;background:linear-gradient(var(--if-blue),var(--if-cyan));transform:scaleY(var(--if-card-progress,0));transform-origin:top;opacity:.8}
.story-card:hover{border-color:rgba(83,103,255,.22);box-shadow:0 24px 70px rgba(18,22,29,.08)}

/* Workspace preview: layered depth instead of a flat screenshot-like card. */
.workspace-preview{transform-style:preserve-3d;transition:transform .35s var(--if-spring),box-shadow .35s var(--if-ease)}
.workspace-preview.if-hover{box-shadow:0 42px 110px rgba(18,22,29,.14)}
.workspace-preview .preview-shell{position:relative}
.workspace-preview .preview-shell::after{content:"";position:absolute;pointer-events:none;inset:0;background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.40) 34%,transparent 48%);transform:translateX(-120%);opacity:.42}
.workspace-preview:hover .preview-shell::after{animation:if-sheen 1.1s var(--if-ease)}
@keyframes if-sheen{to{transform:translateX(130%)}}

/* Case posters become editorial objects, not generic cards. */
.editorial-case{transition:transform .35s var(--if-spring),box-shadow .35s var(--if-ease),border-color .35s var(--if-ease)}
.editorial-case:hover{box-shadow:0 35px 90px rgba(18,22,29,.11)}
.case-poster{position:relative;overflow:hidden}
.case-poster::after{content:"";position:absolute;inset:-25%;pointer-events:none;background:conic-gradient(from 210deg at var(--mx,50%) var(--my,50%),transparent 0 20%,rgba(255,255,255,.16) 28%,transparent 36% 100%);mix-blend-mode:soft-light;opacity:0;transition:opacity .25s var(--if-ease)}
.editorial-case:hover .case-poster::after{opacity:1}
.case-poster em{position:relative}
.case-poster em::after{content:"";position:absolute;left:0;bottom:-.12em;width:72%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s .08s var(--if-ease)}
.editorial-case:hover .case-poster em::after{transform:scaleX(1)}

/* Product workspace: make scanning feel closer to Linear/analyst software than card wall. */
.workspace-topbar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(255,255,255,.88)}
.workspace-sidebar{background:linear-gradient(180deg,#fbfbfa,#f7f6f2)}
.workspace-nav button{position:relative;overflow:hidden}
.workspace-nav button::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:999px;background:var(--if-blue);transform:scaleY(0);transition:transform .24s var(--if-ease)}
.workspace-nav button.active::before{transform:scaleY(1)}
.workspace-nav button:hover{transform:translateX(2px)}
.panel,.action-card,.decision-hero{transition:transform .28s var(--if-ease),box-shadow .28s var(--if-ease),border-color .28s var(--if-ease)}
.panel:hover{border-color:rgba(83,103,255,.15)}
.action-card:hover{transform:translateY(-2px);box-shadow:0 16px 45px rgba(18,22,29,.07)}
.decision-hero{position:relative;overflow:hidden}
.decision-hero::after{content:"";position:absolute;right:-10%;top:-80%;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(83,103,255,.22),transparent 66%);pointer-events:none}

/* Evidence rows are the product's signature interaction. */
.signal-row,.review-row,[data-evidence-topic]{position:relative;transition:background .2s var(--if-ease),transform .2s var(--if-ease)}
.signal-row:hover,[data-evidence-topic]:hover{background:linear-gradient(90deg,rgba(83,103,255,.055),transparent 70%);transform:translateX(2px)}
.signal-row::before,[data-evidence-topic]::before{content:"";position:absolute;left:-1px;top:16%;bottom:16%;width:2px;border-radius:10px;background:var(--if-blue);transform:scaleY(0);transition:transform .24s var(--if-ease)}
.signal-row:hover::before,[data-evidence-topic]:hover::before{transform:scaleY(1)}

/* Evidence drawer: a research surface, not a modal sheet. */
#evidenceDrawer{box-shadow:-35px 0 90px rgba(18,22,29,.14)}
#evidenceDrawer::before{content:"EVIDENCE / TRACE";position:absolute;left:20px;top:14px;font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--if-blue);pointer-events:none}
#evidenceDrawer .drawer-head{padding-top:34px}
.evidence-card{position:relative;overflow:hidden;transition:transform .25s var(--if-ease),border-color .25s var(--if-ease),background .25s var(--if-ease)}
.evidence-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--if-blue),var(--if-cyan));opacity:.55}
.evidence-card:hover{transform:translateX(-3px);border-color:rgba(83,103,255,.22);background:#fbfbff}

/* Command palette borrows the speed of Raycast, not its visual identity. */
.command-modal .modalCard,.ask-modal .modalCard{box-shadow:0 45px 120px rgba(12,16,24,.24);border:1px solid rgba(18,22,29,.09)}
.command-modal input,.ask-modal textarea{caret-color:var(--if-blue)}

/* Progressively reveal the section number as the section enters. */
.section-heading .eyebrow,.method-title .eyebrow{position:relative;padding-left:32px}
.section-heading .eyebrow::before,.method-title .eyebrow::before{content:"";position:absolute;left:0;top:50%;width:22px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(var(--if-rule,0));transition:transform .65s .12s var(--if-ease)}
[data-reveal].is-visible .section-heading .eyebrow::before,[data-reveal].is-visible.method-v2 .method-title .eyebrow::before{--if-rule:1}

/* Page transition veil. */
#if-transition-veil{position:fixed;z-index:9999;inset:0;pointer-events:none;background:var(--if-ink);transform:translateY(101%);transition:transform .52s var(--if-ease)}
body.if-leaving #if-transition-veil{transform:translateY(0)}

/* Demo style switcher is only present on the standalone design-lab pages. */
.if-demo-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--if-line);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);font-size:11px;font-weight:750}

@media (max-width:900px){
  .portfolio-view::before{background-size:32px 32px;opacity:.7}
  .site-nav{backdrop-filter:blur(12px)}
  .hero-v2-copy h1{font-size:clamp(42px,12vw,64px)}
  .story-card{transform:none!important;opacity:1!important}
  #evidenceDrawer::before{top:10px}
}

@media (pointer:coarse){
  .hero-signal-stage,.workspace-preview,.editorial-case{transform:none!important}
  .cursor-aura{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  #if-scroll-progress,.hero-v2-copy h1 em::after,.story-card::before,.scroll-cue span::after{animation:none!important;transition:none!important}
  .evidence-map .insight-node rect{animation:none!important}
  .story-card{transform:none!important;opacity:1!important}
  .workspace-preview .preview-shell::after{display:none!important}
}