// templates-ext.jsx — Extended templates specific to the deck content structure. // TemplateNav (deck map / index), TemplateIdea (hypothesis cards), TemplateEvidence (CHL vs SUPPORT) // Inject hover/connector stylesheet once. Two-layer card scheme: the OUTER // div holds the entry animation + rotation + position (its transform is // rewritten every RAF tick), while the INNER div carries the hover // scale-up via plain CSS — so it doesn't fight the RAF-driven transform. (function injectThumbStyles() { if (typeof document === 'undefined') return; if (document.getElementById('thumb-card-styles')) return; const s = document.createElement('style'); s.id = 'thumb-card-styles'; s.textContent = ` .thumb-card-outer { /* When hovered, lift to top of stacking context so neighbouring cards (which come later in DOM order = naturally above) don't overlap the enlarged card. */ transition: z-index 0s; } .thumb-card-outer:hover { z-index: 200; } .thumb-card-inner { width: 100%; height: 100%; transition: transform 240ms cubic-bezier(.22,1,.36,1), filter 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease-out; will-change: transform; transform-origin: center; } .thumb-card-outer:hover .thumb-card-inner { transform: scale(1.08); filter: brightness(1.08); } /* Section connector — vertical line + dot between buckets */ .section-connector { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 70px 0 24px; opacity: 0.78; } .section-connector .conn-line { width: 1.5px; height: 140px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); } .section-connector .conn-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.65); } .section-connector .conn-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 6px; } `; document.head.appendChild(s); })(); // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE NAV — DECK MAP / INDEX // • Use as the "Explore the deck" slide // • 4 BUCKETS in a 4-col strip (large cards, clickable to jump) // • Below: row of SHIFTS (S1..S5) // • Below: TAIL AREAS (A..J) as small tiles // • Below: IDEAS (IDEA-01..07) as horizontal rail // ═══════════════════════════════════════════════════════════════════════════ function TemplateNav({ slide, scheme, onJump }) { const { title, subtitle, buckets = [], shifts = [], tail = [], ideas = [] } = slide; return ( {/* Heading */}

Deck Index · 4 Buckets + 5 Shifts + Tail + Ideas

{title || 'Explore the Deck'}

{subtitle && (

{subtitle}

)}

{/* 4 Buckets — top row */}

{buckets.map((b, i) => { const panel = CARD_PANELS[b.panel || 'purpleMid']; return ( ); })}

{/* SHIFTS — middle row */}

Strategic Shifts

{shifts.map((s, i) => ( ))}

{/* TAIL + IDEAS — bottom row, 2 col */}

{/* Tail */}

Tail Areas · {tail.length}

{tail.map((t, i) => ( ))}

{/* Ideas */}

Own Ideas · {ideas.length}

{ideas.map((id, i) => ( ))}

); } // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE IDEA — HYPOTHESIS / FUTURISTIC // • For IDEA-01..07 slides // • Big "IDEA · 0X" header // • Title + hypothesis statement // • Validation grid: SUPPORT × N | CHALLENGE × N // • Glow accent, holographic vibe // ═══════════════════════════════════════════════════════════════════════════ function TemplateIdea({ slide, scheme }) { const { ideaNum, title, hypothesis, status = 'EARLY', upside, caveats = [], proof = [], chl = [], quantification, source, } = slide; return ( {/* Glow halo */}

{/* IDEA header */}

IDEA · {String(ideaNum || 1).padStart(2, '0')}

Status · {status}

{/* Title */}

30 ? 64 : 84, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.94, }}>{renderTitle(title)}

{/* Hypothesis */} {hypothesis && (

HYPOTHESIS

"{hypothesis}"

)} {/* Quantification card (centered between hypothesis and evidence) */} {quantification && (

QUANTIFICATION

{quantification.value}

{quantification.label}

)} {/* Evidence grid */}

{/* PROOF */}

✓ PROOF · {proof.length}

{proof.map((p, i) => (

• {p}

))}

{/* CHALLENGE */}

⚠ CHALLENGE · {chl.length}

{chl.map((p, i) => (

• {p}

))}

{source && (

{source}

)} ); } // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE EVIDENCE — CHL vs SUPPORT stack // • For tail areas / shift slides with strong evidence base // • 2 columns: SUPPORT cards on left (green), CHALLENGE cards on right (red) // • Each card: tier badge (A/B/C), source, snippet // ═══════════════════════════════════════════════════════════════════════════ function TemplateEvidence({ slide, scheme }) { const { kicker, title, subtitle, support = [], challenge = [], source, } = slide; return ( {/* Heading */}

{kicker && (

{kicker}

)}

28 ? 56 : 72, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.95, }}>{renderTitle(title)}

{subtitle && (

{subtitle}

)}

{/* 2-col evidence */}

{source && (

{source}

)} ); } function EvidenceColumn({ title, color, items }) { return (

{title === 'SUPPORT' ? '✓' : '⚠'} {title}

· {items.length} ITEMS

{items.map((it, i) => (

TIER {it.tier || 'B'} {it.source}

{it.text}

))}

); } Object.assign(window, { TemplateNav, TemplateIdea, TemplateEvidence, EvidenceColumn }); // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE GLOBE — Earth + arcing cards (signature, à la Netflix Effect) // • Europe-focused earth-from-space at center bottom (CSS sphere) // • Fan of N thumbnails arcing across the top of the earth // • Each card is tangentially rotated to the arc // • Below: STORY 0X label + huge title + paragraph // • Corner brackets frame the image area // • Use for: bucket intros, where N thumbnails tell the bucket story // ═══════════════════════════════════════════════════════════════════════════ function TemplateGlobe({ slide, scheme, onJump }) { const { kicker, storyNum, title, subtitle, thumbs = [], source } = slide; // ── Geometry ──────────────────────────────────────────────────────────── const stageW = 1920; const boxLeft = 220, boxRight = 220, boxTop = 130, boxHeight = 460; const boxW = stageW - boxLeft - boxRight; // Earth center — below the image box so only the curved top is visible. const earthCx = stageW / 2; const earthCy = boxTop + boxHeight + 100; // = 690 const earthR = 340; const arcR = earthR + 40; // = 380 const N = thumbs.length; // Narrower 90° arc keeps every card inside the box bounds, even at the ends. const arcSpanDeg = 90; const arcStartDeg = -135; // ── Animation state machine ───────────────────────────────────────────── // "entering" → cards spin into place (≈1.4s) // "orbiting" → cards drift gently around the earth (forever) // (We skip the "playing" phase now that the video is removed.) const [phase, setPhase] = React.useState('entering'); const phaseStartRef = React.useRef(performance.now()); const [now, setNow] = React.useState(performance.now()); // RAF clock React.useEffect(() => { let raf; const tick = () => { setNow(performance.now()); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Transition entering → orbiting const ENTRY_MS = 1400; React.useEffect(() => { if (phase !== 'entering') return; const id = setTimeout(() => { phaseStartRef.current = performance.now(); setPhase('orbiting'); }, ENTRY_MS); return () => clearTimeout(id); }, [phase]); const elapsedSec = (now - phaseStartRef.current) / 1000; let cardOpacity = 0; let cardScale = 0.4; let arcDriftDeg = 0; let cardSpinDeg = 0; if (phase === 'entering') { const t = Math.min(1, elapsedSec / (ENTRY_MS / 1000)); const eased = 1 - Math.pow(1 - t, 3); cardOpacity = eased; cardScale = 0.4 + 0.6 * eased; arcDriftDeg = -45 * (1 - eased); cardSpinDeg = -90 * (1 - eased); } else if (phase === 'orbiting') { cardOpacity = 1; cardScale = 1; // Static at base angles — the orbital wobble made the arc midpoint // drift ±20px off the earth's vertical axis, which read as "not // centered". Locked to 0 keeps the arc symmetric around the earth. arcDriftDeg = 0; } // ── Compute card positions ────────────────────────────────────────────── const cardData = thumbs.map((t, i) => { const u = N === 1 ? 0.5 : i / (N - 1); const baseAngDeg = arcStartDeg + u * arcSpanDeg; const angDeg = baseAngDeg + arcDriftDeg; const angRad = angDeg * Math.PI / 180; const cx = earthCx + Math.cos(angRad) * arcR; const cy = earthCy + Math.sin(angRad) * arcR; const rot = angDeg + 90 + cardSpinDeg; return { ...t, cx, cy, rot }; }); return ( {/* Image box ────────────────────────────────────────────────────── */}

{/* Earth — CSS sphere (clean, no video for now) */} {/* Arcing cards — two-layer outer/inner so hover scale-up doesn't collide with the RAF-driven rotation+scale on the outer ─────── */} {cardData.map((c, i) => { const w = c.w || 112; const h = c.h || 156; const clickable = !!c.slideIdx; return (

{ if (clickable) onJump && onJump(c.slideIdx); }} style={{ position: 'absolute', left: c.cx - boxLeft, top: c.cy - boxTop, width: w, height: h, transform: `translate(-50%, -50%) rotate(${c.rot}deg) scale(${cardScale})`, transformOrigin: 'center', opacity: cardOpacity, willChange: 'transform, opacity', cursor: clickable ? 'pointer' : 'default', }}>

{ if (!clickable) return; e.currentTarget.style.boxShadow = `0 30px 80px rgba(0,0,0,0.8), 0 0 0 2px ${scheme.accent}`; }} onMouseLeave={(e) => { if (!clickable) return; e.currentTarget.style.boxShadow = '0 20px 60px rgba(0,0,0,0.7)'; }} > {c.label

{c.label

{c.channelLogo ?

{c.channel

: (c.channel || 'CHANNEL')}

); })}

{/* Corner brackets framing the image area */}

{/* STORY 0X label */} {storyNum != null && (

)} {kicker && storyNum == null && (

{kicker}

)} {/* Title */}

28 ? 44 : title.length > 18 ? 56 : 68, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.95, }}>{renderTitle(title)}

{subtitle && (

{subtitle}

)}

{source && (

{source}

)} ); } // ── Earth (CSS sphere with Europe-focus styling) ───────────────────────── function Earth({ cx, cy, r, scheme }) { return ( <> {/* Outer atmospheric glow */}

{/* Earth sphere — brighter so it reads against the dark box */}

{/* Subtle land mass hint via faint city-light pattern (SVG dots) */} {/* Top rim light — brighter atmospheric glow */}

); } // ═══════════════════════════════════════════════════════════════════════════ // DONUT PAIR — animated "oggi vs 2030" pair of donut charts with shared legend // • Each segment animates its arc length on mount (easeOutCubic, 1200ms) // • Percentage values count up alongside the arcs // • Pass `segments: [{ label, color, today, target }]` summing to 100 each side // ═══════════════════════════════════════════════════════════════════════════ function useAnimatedProgress(duration = 1200, delay = 250) { const [p, setP] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now() + delay; const tick = (now) => { const elapsed = Math.max(0, now - start); const t = Math.min(1, elapsed / duration); const eased = 1 - Math.pow(1 - t, 3); setP(eased); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => raf && cancelAnimationFrame(raf); }, []); return p; } function Donut({ segments, valueKey, label, sublabel, totalLabel, size = 220, thickness = 26, progress = 1, scheme }) { const cx = size / 2, cy = size / 2; const r = (size - thickness) / 2; const C = 2 * Math.PI * r; let cumulative = 0; return (

{label}

{totalLabel}

{sublabel &&

{sublabel}

}

); } function DonutPair({ scheme, segments, todayLabel = 'OGGI · 2025', targetLabel = 'TARGET 2030', todayTotal, targetTotal, large = false }) { const progress = useAnimatedProgress(1400, 250); const donutSize = large ? 280 : 220; const donutThickness = large ? 34 : 26; return (

{/* arrow */}

→

{/* shared legend */}

{segments.map((s, i) => { const todayVal = Math.round((s.today || 0) * progress); const targetVal = Math.round((s.target || 0) * progress); return (

{s.label}

{todayVal}% → {targetVal}%

); })}

); } // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE CLAIM — Statement-led slide with optional killer number // • Big bold statement (centered or left-aligned) // • Optional killer number that pops below or to the side // • Optional donutPair (oggi vs 2030) replaces killerNumber when provided // • Source footer // • Use for: thesis/claim slides like "MFE non è più broadcaster italiano" // ═══════════════════════════════════════════════════════════════════════════ function TemplateClaim({ slide, scheme }) { const { kicker, statement, subtitle, body, killerNumber, killerLabel, killerPrefix, killerSuffix, donutPair, quote, quoteAuthor, numbersStrip, bridgeLine, numberGrid, closingLine, cornerIframe, cornerMap, chartPanel, source, align = 'left', bridge = false, } = slide; // Reserve right space for the chart panel OR the EU map; left content // area shrinks. Map and chart are mutually exclusive in practice. const hasChart = !!chartPanel; const hasMap = !!cornerMap; const hasRightPanel = hasChart || hasMap; // EU network map controller — init after the