/* ==========================================================================
   Concept: THE FUNNEL RUN
   Technique reference: landonorris.com (oversized type, pinned/scrubbed
   scenes, one reveal shape used everywhere) — palette, fonts, imagery and
   copy are all Vertex's own. Scoped entirely under #concept-funnel /
   #funnel-preloader. Uses the brand tokens already on :root in
   css/style.css (Ink/Paper/Kraft/Signal, Syne + Inter) — nothing new.
   ========================================================================== */

#concept-funnel{
  --gap: 1.25rem;
  --pad: 1.25rem;
  color:var(--ink);
  /* No background here on purpose — the .fn-stage-track sections have no
     background of their own either, so document.body (set + swapped by
     funnel.js, Rule 8) shows through cleanly. Every other section (hero,
     confirm, receipts, checkout) sets its own explicit background and is
     unaffected either way. */
}
/* Safety net: at clamp(...,20rem) sizes a single long word can be wider
   than its column — break it rather than letting it run off-screen. */
#concept-funnel h1, #concept-funnel h2{ overflow-wrap:break-word; word-break:break-word; }

/* Rule 2 — 4-column grid */
#concept-funnel .fn-grid{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:var(--gap); max-width:1600px; margin:0 auto; padding:0 var(--pad); }
#concept-funnel .fn-wrap{ max-width:1600px; margin:0 auto; padding:0 var(--pad); }

/* Rule 6 — the one reveal shape */
#concept-funnel .reveal-ellipse{ clip-path: ellipse(100% 0% at 50% 0); }

#funnel-preloader{
  position:fixed; inset:0; z-index:5000;
  background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
#funnel-preloader .fp-basket{ width:64px; height:52px; border:2px solid var(--ink); border-top:none; position:relative; overflow:hidden; }
#funnel-preloader .fp-basket::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:0%; background:var(--signal); }
#funnel-preloader.is-filling .fp-basket::before{ animation:fp-fill 1.6s cubic-bezier(.19,1,.22,1) forwards; }
@keyframes fp-fill{ to{height:100%;} }
#funnel-preloader .fp-label{ margin-top:22px; font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; font-size:clamp(18px,3vw,26px); text-transform:uppercase; }
#funnel-preloader .fp-sub{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate); margin-top:8px;}
#funnel-preloader .fp-skip{ position:absolute; bottom:28px; right:28px; background:transparent; border:1px solid var(--line); color:var(--slate); font-family:var(--font-body); font-size:12px; padding:9px 16px; }
#funnel-preloader .fp-skip:hover{border-color:var(--ink); color:var(--ink);}
#funnel-preloader.is-done{ animation:fp-cut .45s cubic-bezier(.19,1,.22,1) forwards; pointer-events:none; }
@keyframes fp-cut{ to{opacity:0; transform:scale(0.98);} }

/* ==========================================================================
   HERO — Rule 4 pinned scene, 200vh track. The order sits at the top,
   ready to travel.
   ========================================================================== */
#concept-funnel .fn-hero-track{ position:relative; height:calc(var(--vh, 1vh) * 200); background:var(--ink); }
#concept-funnel .fn-hero-sticky{
  position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); overflow:hidden;
  display:flex; align-items:center; color:var(--paper);
}
#concept-funnel .fn-hero-sticky::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 0%, rgba(225,75,61,0.16), transparent 62%); }
#concept-funnel .fn-hero-inner{ position:relative; z-index:1; text-align:center; min-width:0; width:100%; }
#concept-funnel .fn-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--kraft);
}
#concept-funnel .fn-hero-sticky h1{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.045em; line-height:0.86;
  font-size:clamp(1.8rem, 8vw, 7rem); margin:22px auto 0; max-width:16ch;
  overflow-wrap:break-word; word-break:break-word;
}
#concept-funnel .fn-hero-sticky p{font-size:17px; color:#c9c2b6; max-width:480px; margin:24px auto 0;}
#concept-funnel .fn-parcel{
  width:46px; height:46px; margin:52px auto 0;
  background:var(--signal); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:11px; text-transform:uppercase;
  box-shadow:0 14px 30px rgba(225,75,61,0.4);
  will-change:transform;
}
#concept-funnel .fn-drag-hint{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); margin-top:16px; }

@media (max-width:990px){
  #concept-funnel .fn-hero-track{ height:auto; }
  #concept-funnel .fn-hero-sticky{ position:static; height:auto; overflow:visible; padding:calc(var(--nav-h) + 60px) 0 60px; }
}
#concept-funnel .fn-hero-track.no-pin{ height:auto; }
#concept-funnel .fn-hero-track.no-pin .fn-hero-sticky{ position:static; height:auto; overflow:visible; padding:calc(var(--nav-h) + 60px) 0 60px; }

/* ==========================================================================
   SCROLL SPINE — vertical track the parcel runs down
   ========================================================================== */
/* Sits on the right (matching ascent.css's spine) — the stage panels'
   own text starts flush against the same left-edge padding this spine
   used to occupy, so on the left it clipped straight through the first
   glyph of whatever copy happened to sit at its vertical mid-point. */
#concept-funnel .fn-spine{ position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:60; }
#concept-funnel .fn-spine svg{ width:2px; height:260px; overflow:visible; }
#concept-funnel .fn-spine-route{ fill:none; stroke:var(--line); stroke-width:2; }
#concept-funnel .fn-spine-fill{ fill:none; stroke:var(--signal); stroke-width:2; stroke-dasharray:260; stroke-dashoffset:260; }
#concept-funnel .fn-spine-marker{
  position:absolute; left:-5px; top:0%; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid var(--signal); transform:translateY(-50%);
}
@media (max-width:990px){ #concept-funnel .fn-spine{display:none;} }

/* ==========================================================================
   STAGES — Rule 4, five pinned/scrubbed scenes the parcel runs through
   ========================================================================== */
#concept-funnel .fn-stage-track{ position:relative; height:calc(var(--vh, 1vh) * 180); }
#concept-funnel .fn-stage-sticky{
  position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); overflow:hidden;
  display:flex; align-items:center; border-top:1px solid var(--line);
  transition:background-color .6s ease;
}
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stage-sticky{ border-top-color:var(--line-on-dark); }
#concept-funnel .fn-stage-row{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); column-gap:var(--gap); align-items:center; width:100%; min-width:0; }
#concept-funnel .fn-stage-panel{ grid-column:1 / 3; }
#concept-funnel .fn-stage-tag{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); }
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stage-tag{ color:var(--kraft); }
#concept-funnel .fn-stage-panel h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.04em; line-height:0.86; font-size:clamp(2.4rem, 4vw, 4.25rem); margin-top:16px;
}
/* The tag and paragraph both get an ink-tone override below, but the
   heading, stat number and stage-visual box never did — they were left on
   the default dark-ink text colour, which is nearly identical to the
   #1a1714 dark-tone background it sits on. */
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stage-panel h2{ color:var(--paper); }
#concept-funnel .fn-stage-panel p{ font-size:16px; line-height:1.75; margin-top:20px; max-width:480px; }
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stage-panel p{ color:#c9c2b6; }
#concept-funnel .fn-stage-track:not([data-tone="ink"]) .fn-stage-panel p{ color:#41392f; }
#concept-funnel .fn-stat{ display:inline-flex; flex-direction:column; gap:4px; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stat{ border-top-color:var(--line-on-dark); }
#concept-funnel .fn-stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,34px); }
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stat-num{ color:var(--paper); }
#concept-funnel .fn-stat-label{ font-size:12px; color:var(--slate); }
#concept-funnel .fn-stage-visual{ grid-column:3 / 5; display:flex; align-items:center; justify-content:center; min-height:220px; }
#concept-funnel .fn-stage-track[data-tone="ink"] .fn-stage-visual{ color:var(--paper); }
#concept-funnel .fn-stage-parcel{
  width:96px; height:96px; border:2px solid currentColor;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
  font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:0.01em; text-transform:uppercase;
  will-change:transform;
}

@media (max-width:990px){
  #concept-funnel .fn-stage-track{ height:auto; }
  #concept-funnel .fn-stage-sticky{ position:static; height:auto; overflow:visible; padding:80px 0; }
  #concept-funnel .fn-stage-row{ grid-template-columns:1fr; row-gap:28px; }
  #concept-funnel .fn-stage-panel, #concept-funnel .fn-stage-visual{ grid-column:1 / -1; }
}
#concept-funnel .fn-stage-track.no-pin{ height:auto; }
#concept-funnel .fn-stage-track.no-pin .fn-stage-sticky{ position:static; height:auto; overflow:visible; padding:80px 0; }
#concept-funnel .fn-stage-track.no-pin .fn-stage-row{ grid-template-columns:1fr; row-gap:28px; }
#concept-funnel .fn-stage-track.no-pin .fn-stage-panel,
#concept-funnel .fn-stage-track.no-pin .fn-stage-visual{ grid-column:1 / -1; }

/* ==========================================================================
   END STATE — order confirmed
   ========================================================================== */
#concept-funnel .fn-confirm{ padding:110px 0; text-align:center; border-top:1px solid var(--line); background:var(--white); }
#concept-funnel .fn-confirm-ping{ width:64px; height:64px; border-radius:50%; margin:0 auto 22px; background:var(--stock-green); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:26px; }
#concept-funnel .fn-confirm h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,3.6vw,2.8rem); letter-spacing:-0.03em; }
#concept-funnel .fn-confirm p{ font-size:15px; color:var(--slate); margin-top:12px; max-width:440px; margin-left:auto; margin-right:auto; }

/* ==========================================================================
   CASE STUDIES — receipts, Rule 5 horizontal strip
   ========================================================================== */
/* Unlike .fn-confirm/.fn-checkout, this section never got its own explicit
   background — it silently inherited whatever dark stage tone was last set
   on document.body (Rule 8), leaving this default dark-ink text invisible
   against a body background that could just as easily be #1a1714. */
#concept-funnel .fn-receipts{ background:var(--paper); }
#concept-funnel .fn-receipts-head{ padding:120px 0 48px; text-align:center; }
#concept-funnel .fn-receipts-head h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(2.2rem,5vw,4.2rem); letter-spacing:-0.03em; line-height:0.9; margin-top:14px; }
#concept-funnel .fn-receipts-spacer{ position:relative; height:calc(var(--vh, 1vh) * 220); border-top:1px solid var(--line); }
#concept-funnel .fn-receipts-sticky{ position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); overflow:hidden; display:flex; align-items:center; }
#concept-funnel .fn-receipt-track{ display:flex; gap:32px; padding-left:75vw; will-change:transform; }
#concept-funnel .fn-receipt{
  flex:0 0 auto; width:min(80vw, 320px);
  background:var(--white); border:1px solid var(--line); box-shadow:0 24px 50px rgba(26,23,20,0.1);
  padding:32px 28px 0; transition:background .3s cubic-bezier(.19,1,.22,1), color .3s cubic-bezier(.19,1,.22,1);
}
#concept-funnel .fn-receipt:hover{ background:var(--signal); color:var(--white); border-color:var(--signal); }
#concept-funnel .fn-receipt-head{ text-align:center; }
#concept-funnel .fn-receipt-head .rname{ font-family:var(--font-display); font-weight:800; font-size:18px; text-transform:uppercase; }
#concept-funnel .fn-receipt-head .rsub{ font-size:11px; color:var(--slate); margin-top:4px; }
#concept-funnel .fn-receipt:hover .rsub{ color:rgba(255,255,255,0.75); }
#concept-funnel .fn-receipt hr{ border:none; border-top:1px dashed var(--slate); margin:16px 0; }
#concept-funnel .fn-receipt-line{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; }
#concept-funnel .fn-receipt-line span:last-child{ font-weight:700; font-family:var(--font-display); }
#concept-funnel .fn-receipt-total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:16px; padding:14px 0; margin-top:6px; border-top:1px solid currentColor; }
#concept-funnel .fn-receipt-barcode{ height:34px; margin:16px -28px 0; background:repeating-linear-gradient(90deg, currentColor 0px, currentColor 2px, transparent 2px, transparent 4px, currentColor 4px, currentColor 5px, transparent 5px, transparent 9px); opacity:0.85; }

@media (max-width:990px){
  #concept-funnel .fn-receipts-spacer{ height:auto; }
  #concept-funnel .fn-receipts-sticky{ position:static; height:auto; overflow:visible; }
  #concept-funnel .fn-receipt-track{ flex-direction:column; padding-left:0; transform:none !important; align-items:center; }
}
#concept-funnel .fn-receipts-spacer.no-pin{ height:auto; }
#concept-funnel .fn-receipts-spacer.no-pin .fn-receipts-sticky{ position:static; height:auto; overflow:visible; }
#concept-funnel .fn-receipts-spacer.no-pin .fn-receipt-track{ flex-direction:column; padding-left:0; transform:none !important; align-items:center; }

/* ==========================================================================
   CURSOR-FOLLOWING REVEAL BOX (Rule 9) — desktop only
   ========================================================================== */
#concept-funnel .fn-cursor-reveal{
  position:fixed; top:0; left:0; width:240px; height:160px; margin:-80px 0 0 -120px;
  pointer-events:none; z-index:900;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  font-family:var(--font-display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:-0.01em;
  clip-path: ellipse(100% 0% at 50% 0);
  opacity:0;
}
@media (hover:none), (max-width:990px){ #concept-funnel .fn-cursor-reveal{display:none;} }

/* ==========================================================================
   FOOTER — order placed, checkout-styled CTA
   ========================================================================== */
#concept-funnel .fn-checkout{ padding:150px 0 100px; text-align:center; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
#concept-funnel .fn-checkout::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(225,75,61,0.18), transparent 65%); }
#concept-funnel .fn-checkout-inner{ position:relative; z-index:1; }
#concept-funnel .fn-checkout h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.045em; line-height:0.86; font-size:clamp(2.6rem, 7vw, 7rem); }
#concept-funnel .fn-checkout p{ font-size:15px; color:var(--slate); margin-top:16px; }
#concept-funnel .fn-checkout-btn{
  display:inline-flex; align-items:center; gap:12px; margin-top:40px;
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:700; font-size:15px; padding:18px 34px;
  transition:background .6s cubic-bezier(.19,1,.22,1), color .6s cubic-bezier(.19,1,.22,1), box-shadow .6s cubic-bezier(.19,1,.22,1);
}
#concept-funnel .fn-checkout-btn:hover{ background:var(--signal); color:var(--white); box-shadow:0 18px 40px rgba(225,75,61,0.35); }

@media (prefers-reduced-motion: reduce){
  #concept-funnel .fn-spine{display:none;}
  #concept-funnel .fn-cursor-reveal{display:none;}
}