/* global React */ // IntroScene.jsx — pinned scrollytelling intro, retro letterpress feel. // 4× viewport scroll height. Team-aware: shows pivo OR vejce scene. // Bonus: pivo → foam overflows into "Na zdraví" word; vejce → 7th egg cracks open to reveal &. const { useEffect, useRef, useState } = React; // ============ SHARED — RETRO TEXTURES =================================== // Reusable SVG block: dotted halftone fills + paper grain. function RetroDefs() { return ( {/* Halftone dot pattern — dark dots on transparent (for shading) */} {/* Paper grain — subtle noise via turbulence */} {/* Liquid clip — used to clip beer fill to glass shape */} ); } // ============ EASING ==================================================== const easeOut = (t) => 1 - Math.pow(1 - t, 3); const easeInOut = (t) => t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2)/2; const clamp = (v, a=0, b=1) => Math.max(a, Math.min(b, v)); // progress within a sub-range [a,b] of overall p const range = (p, a, b) => clamp((p - a) / (b - a)); // ============ PIVO SCENE ================================================ // Phases of progress p (0 → 1): // 0.00–0.10 glass appears, tap descends from above // 0.10–0.55 beer pours: fill rises, head builds, drip trails // 0.55–0.70 glass full, head settles, slight wobble // 0.70–0.90 BONUS: foam overflows, droplets fly, droplets reform into "NA ZDRAVÍ" // 0.90–1.00 word locks, stamp drops in function PivoScene({ p }) { // glass entrance const glassY = (1 - easeOut(range(p, 0, 0.08))) * 80; const glassOpacity = easeOut(range(p, 0, 0.06)); // tap entrance const tapY = -100 + easeOut(range(p, 0.04, 0.12)) * 100; // pour active const pouring = p > 0.10 && p < 0.58; // beer fill height (0 = empty, 488 = full inside the clipPath) const fillProgress = easeInOut(range(p, 0.10, 0.55)); const beerHeight = fillProgress * 488; const beerY = 612 - beerHeight; // head (foam) thickness on top — grows with pour, then plateaus const headThickness = Math.min(60, fillProgress * 78); // wobble const wobble = p > 0.55 && p < 0.70 ? Math.sin((p - 0.55) * 60) * 1.5 : 0; // overflow phase const overflowAmt = easeOut(range(p, 0.68, 0.85)); // word reveal const wordOpacity = easeOut(range(p, 0.78, 0.92)); const wordY = 40 + (1 - easeOut(range(p, 0.78, 0.92))) * 30; // stamp const stampScale = easeOut(range(p, 0.92, 1.0)); const stampRot = -8 + (1 - easeOut(range(p, 0.92, 1.0))) * 30; // droplets — 14 droplets, each at staggered timing const droplets = []; for (let i = 0; i < 14; i++) { const start = 0.70 + (i / 14) * 0.10; const end = start + 0.08; const dp = range(p, start, end); if (dp <= 0 || dp >= 1) continue; const ix = (i % 2 === 0) ? -1 : 1; const dx = ix * (40 + (i * 13) % 80) * dp; const dy = -20 - dp * 80 + dp * dp * 220; const r = 4 + (i % 3) * 2; const op = 1 - dp * 0.3; droplets.push( ); } return ( ); } // ============ VEJCE SCENE =============================================== // Phases: // 0.00–0.08 basket appears // 0.08–0.65 6 eggs fall in sequence, each lands & wobbles // 0.65–0.78 basket settles, last wobble // 0.78–0.92 BONUS: 7th egg falls, cracks open mid-air revealing huge "&" // 0.92–1.00 & locks, stamp drops function VejceScene({ p }) { const basketY = (1 - easeOut(range(p, 0, 0.08))) * 80; const basketOpacity = easeOut(range(p, 0, 0.06)); // 6 eggs falling in sequence const eggs = []; // rest positions inside the basket — arranged in a 3-2-1 pyramid const eggPositions = [ { x: 130, y: 510, rot: -10 }, { x: 200, y: 510, rot: 4 }, { x: 270, y: 510, rot: 12 }, { x: 165, y: 470, rot: -6 }, { x: 235, y: 470, rot: 8 }, { x: 200, y: 432, rot: 2 }, ]; for (let i = 0; i < 6; i++) { const start = 0.10 + i * 0.085; const land = start + 0.06; const fp = range(p, start, land); if (fp <= 0) continue; const target = eggPositions[i]; // fall: from y = -80 down to target.y const startY = -80 - (i % 2) * 30; const cy = startY + easeIn(fp) * (target.y - startY); // little wobble after landing const settled = range(p, land, land + 0.04); const wobble = settled > 0 && settled < 1 ? Math.sin(settled * 18) * 4 * (1 - settled) : 0; // rotation while falling const rot = (1 - fp) * (i % 2 === 0 ? -180 : 180) + target.rot + wobble; eggs.push(); } // BONUS: 7th egg falls, cracks at peak const seventhFall = range(p, 0.78, 0.86); const seventhCrack = range(p, 0.86, 0.92); const seventhOpen = range(p, 0.88, 0.96); const seventhX = 200; const seventhY = -60 + easeIn(seventhFall) * 320; const seventhRot = seventhFall * 360; // Big "&" reveal const ampScale = easeOut(seventhOpen); const ampOpacity = easeOut(seventhOpen); // shell shards flying outward const shards = seventhCrack > 0 && seventhCrack < 1 ? [ { dx: -1, dy: -1, rot: -45 }, { dx: 1, dy: -1, rot: 45 }, { dx: -1.2, dy: 0.3, rot: -90 }, { dx: 1.2, dy: 0.4, rot: 90 }, { dx: -0.6, dy: 1.3, rot: -160 }, { dx: 0.7, dy: 1.4, rot: 160 }, ] : []; // Stamp const stampScale = easeOut(range(p, 0.93, 1.0)); const stampRot = -8 + (1 - easeOut(range(p, 0.93, 1.0))) * 30; return ( ); } // Egg helper — used by VejceScene function Egg({ cx, cy, rot = 0, highlight = false }) { return ( {/* shading dots on right */} {/* highlight */} {highlight && } ); } const easeIn = (t) => t * t; // ============ INTRO SCROLL CONTAINER ==================================== function IntroScene() { const teamCtx = window.usePivoTeam ? window.usePivoTeam() : { team: 'pivo' }; const team = teamCtx.team || 'pivo'; const containerRef = useRef(null); const [progress, setProgress] = useState(0); useEffect(() => { const handleScroll = () => { const el = containerRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const total = el.offsetHeight - window.innerHeight; const scrolled = -rect.top; const p = clamp(scrolled / total); setProgress(p); }; handleScroll(); window.addEventListener('scroll', handleScroll, { passive: true }); window.addEventListener('resize', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); window.removeEventListener('resize', handleScroll); }; }, []); // 4× viewport scroll height for dramatic pacing return (

{team === 'pivo' ? : }

{/* HUD: scroll prompt + team title */}

★ {team === 'pivo' ? 'TÝM PIVO' : 'TÝM VEJCE'} ★

{team === 'pivo' ? <>Studené.
Plzeňské.
Ticho. : <>Měkká.
Máslová.
Ráno.}

{/* scroll hint — fades after first scroll */}

SCROLLUJTE ↓

); } const isStyles = { container: { position:'relative', height:'650vh', background:'var(--shell)' }, sticky: { position:'sticky', top:0, height:'100vh', overflow:'hidden', borderBottom:'6px solid var(--ink)' }, bg: { position:'absolute', inset:0, background:'var(--team-bg, var(--shell))', transition:'background 600ms ease' }, scene: { position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', padding:'2vh 4vw' }, sceneInner: { height:'min(86vh, 720px)', aspectRatio:'400 / 720', maxWidth:'92vw', position:'relative' }, hud: { position:'absolute', top:'7vh', left:'4vw', maxWidth:'40vw', pointerEvents:'none' }, eyebrow: { fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'0.24em', color:'var(--paprika)', fontWeight:700, marginBottom:14 }, title: { fontFamily:'var(--font-display)', fontSize:'clamp(40px, 6.4vw, 88px)', lineHeight:0.92, color:'var(--ink)', letterSpacing:'-0.02em', margin:0 }, titleEm: { fontFamily:'"Fraunces", serif', fontStyle:'italic', fontWeight:900, color:'var(--team-accent, var(--paprika))' }, scrollHint: { position:'absolute', bottom:'5vh', left:'50%', transform:'translateX(-50%)', display:'flex', flexDirection:'column', alignItems:'center', gap:10, transition:'opacity 300ms', pointerEvents:'none' }, hintLine: { width:2, height:40, background:'var(--ink)', animation:'pivoBounce 1.2s ease-in-out infinite' }, hintText: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.22em', color:'var(--ink)', fontWeight:700 }, }; // inject keyframe + responsive tweaks if (typeof document !== 'undefined' && !document.getElementById('intro-keyframes')) { const st = document.createElement('style'); st.id = 'intro-keyframes'; st.textContent = ` @keyframes pivoBounce { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } } @media (max-width: 720px) { .intro-hud { max-width: 80vw !important; } } `; document.head.appendChild(st); } Object.assign(window, { IntroScene });

{team === 'pivo' ? <>Studené.Plzeňské.Ticho. : <>Měkká.Máslová.Ráno.}

{team === 'pivo' ? <>Studené.
Plzeňské.
Ticho. : <>Měkká.
Máslová.
Ráno.}