frescobol-story

{% comment %}
two46 Frescobol - Story-Hero (Scroll-Video)
Ablage: sections/frescobol-story.liquid
Dateien: hero.mp4 + hero-poster.jpg im Theme unter Assets
Template: page.frescobol-story.json verweist per "type": "frescobol-story" hierher
{% endcomment %}

/* ---------- Nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
justify-content:space-between;padding:1.9rem clamp(1.5rem,5vw,5rem);
transition:background .3s ease,padding .3s ease,border-color .3s ease;
border-bottom:1px solid transparent;}
header.nav-scrolled{background:rgba(18,33,29,.72);backdrop-filter:blur(16px);
border-bottom-color:rgba(249,249,237,.10);padding-top:1.05rem;padding-bottom:1.05rem;}
.logo{font-family:'Outfit',sans-serif;font-size:1.32rem;font-weight:600;letter-spacing:.02em;color:var(--cream);text-decoration:none;}
.logo span{color:var(--terra);}
nav a{color:rgba(249,249,237,.82);text-decoration:none;font-size:.83rem;letter-spacing:.14em;
text-transform:uppercase;margin-left:2.4rem;transition:color .2s;}
nav a:hover{color:var(--terra);}
@media(max-width:760px){nav a{margin-left:1.1rem;font-size:.68rem;letter-spacing:.08em;}}

/* ---------- Hero scrub engine ---------- */
#hero-section{position:relative;height:400vh;width:100%;}
.hero-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.veil,.veil-x{position:absolute;inset:0;pointer-events:none;}
.veil{
background:linear-gradient(to top,rgba(18,33,29,.80) 0%,rgba(18,33,29,.34) 45%,rgba(18,33,29,.48) 100%);}
.veil-x{background:linear-gradient(to right,rgba(18,33,29,.45) 0%,rgba(18,33,29,0) 36%,rgba(18,33,29,0) 64%,rgba(18,33,29,.45) 100%);}
.phase{position:absolute;will-change:opacity,transform;pointer-events:none;max-width:34rem;}
.phase h1,.phase h2{font-weight:300;line-height:1.03;margin:0;
text-shadow:0 2px 44px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.25);}
.phase h1{font-size:clamp(2.7rem,7.2vw,5.6rem);}
.phase h2{font-size:clamp(2.1rem,5vw,3.9rem);}
.phase p{margin:1.1rem 0 0;font-size:clamp(.95rem,1.4vw,1.12rem);line-height:1.6;
color:rgba(249,249,237,.95);max-width:26rem;font-weight:300;
text-shadow:0 2px 26px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.3);}
#phase-0{bottom:14vh;left:clamp(1.5rem,5vw,5rem);}
#phase-1{top:26vh;right:clamp(1.5rem,5vw,5rem);text-align:right;opacity:0;}
#phase-1 p{margin-left:auto;}
#phase-2{bottom:16vh;left:clamp(1.5rem,5vw,5rem);opacity:0;}
.rule{display:inline-block;width:3.2rem;height:1px;background:var(--terra);margin-bottom:1.6rem;}
.scroll-hint{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(249,249,237,.75);text-shadow:0 1px 12px rgba(0,0,0,.6);}

/* ---------- Body ---------- */
section{position:relative;}
.band{padding:clamp(6rem,14vh,11rem) 0;}
.cream{background:var(--cream);color:var(--ink);}
.eyebrow{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
color:var(--green-bright);margin:0 0 1.6rem;font-weight:500;}
.cream .eyebrow{color:var(--green-mid);}
.lead{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:300;line-height:1.24;max-width:22ch;margin:0;}
.body-copy{font-size:1.06rem;line-height:1.78;font-weight:300;max-width:38rem;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;}
@media(max-width:820px){.split{grid-template-columns:1fr;}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4.5rem);margin-top:5rem;}
@media(max-width:820px){.pillars{grid-template-columns:1fr;gap:2.6rem;}}
.pillar .num{font-family:'Outfit',sans-serif;font-size:.8rem;letter-spacing:.2em;
color:var(--terra);display:block;margin-bottom:1rem;}
.cream .pillar .num{color:var(--green-mid);}
.pillar h3{font-size:1.32rem;font-weight:500;margin:0 0 .7rem;}
.pillar p{margin:0;font-size:.98rem;line-height:1.7;font-weight:300;opacity:.85;}
.showcase{width:100%;height:clamp(320px,62vh,640px);object-fit:cover;display:block;}
.quote{font-family:'Outfit',sans-serif;font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:300;
line-height:1.32;max-width:24ch;margin:0 auto;text-align:center;}
.cta-band{background:var(--terra);color:var(--ink);text-align:center;}
.cta-band .lead{margin:0 auto;max-width:18ch;}
.btn{display:inline-block;margin-top:2.6rem;background:var(--green);color:var(--cream);
text-decoration:none;padding:1.05rem 2.9rem;font-size:.82rem;letter-spacing:.2em;
text-transform:uppercase;transition:transform .2s ease,background .2s ease;}
.btn:hover{background:var(--ink);transform:translateY(-2px);}
footer{background:var(--ink);padding:3.4rem 0;font-size:.82rem;color:rgba(249,249,237,.55);}
.foot-row{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
</style>
<script>
// Shopify: Dateien liegen im Theme unter Assets (Code bearbeiten > Assets).
const heroSrc = "{{ 'hero.mp4' | asset_url }}";
const showcaseSrc = "{{ 'showcase.mp4' | asset_url }}";
</script>

<header>
<a class="logo" href="#">two<span>46</span></a>
<nav>
<a href="#spiel">Das Spiel</a>
<a href="#regeln">Die Regeln</a>
<a href="#set">Rio Classico</a>
</nav>
</header>

<div id="hero-section">
<div class="hero-sticky">
<video id="hero-video" playsinline muted preload="auto" poster="{{ 'hero-poster.jpg' | asset_url }}"></video>
<div class="veil"></div>
<div class="veil-x"></div>

<div class="phase" id="phase-0">
<span class="rule"></span>
<h1>Zwei Schläger.<br>Ein Ball.<br>Kein Gegner.</h1>
</div>

<div class="phase" id="phase-1">
<h2>Erfunden am Strand von Rio.</h2>
<p>Aus einem einzigen Gedanken: Der Ball darf nicht fallen. Alles andere ergibt sich.</p>
</div>

<div class="phase" id="phase-2">
<h2>Kein Netz. Keine Punkte.<br>Kein Verlierer.</h2>
<p>Frescobol ist das einzige Spiel, bei dem ihr nur gemeinsam gewinnen könnt.</p>
</div>

<div class="scroll-hint">Scrollen</div>
</div>
</div>

<section class="band" id="spiel">
<div class="wrap split">
<div>
<p class="eyebrow">Was ist Frescobol</p>
<p class="lead">In Brasilien gehört es zum Strand wie das Meer.</p>
</div>
<div class="body-copy">
<p>In den 1940ern schlugen sich zwei Freunde am Copacabana-Strand einen Ball zu — ohne Netz, ohne Linien, ohne Punkte. Was daraus wurde, spielt heute halb Brasilien: Frescobol.</p>
<p>Bei uns kennen es die meisten höchstens als „Beachball". Dabei ist es etwas ganz anderes. Es geht nicht darum, den anderen zu schlagen. Es geht darum, den Ball so lange wie möglich zwischen euch zu halten — schneller, sauberer, länger als beim letzten Mal.</p>
</div>
</div>
</section>

<section class="band cream" id="regeln">
<div class="wrap">
<p class="eyebrow">Warum es süchtig macht</p>
<p class="lead">In zwei Minuten verstanden. Nie ganz ausgespielt.</p>
<div class="pillars">
<div class="pillar">
<span class="num">I</span>
<h3>Miteinander statt gegeneinander</h3>
<p>Kein Punktestand, keine Sieger. Der einzige Gegner ist der Boden — und ihr spielt gemeinsam dagegen an.</p>
</div>
<div class="pillar">
<span class="num">II</span>
<h3>Überall spielbar</h3>
<p>Kein Netz, kein Feld, keine Aufbauzeit. Strand, Wiese, Hinterhof. Zwei Meter Platz genügen für den ersten Ballwechsel.</p>
</div>
<div class="pillar">
<span class="num">III</span>
<h3>Für jedes Alter</h3>
<p>Der erste Rückschlag klappt sofort. Der hundertste in Folge braucht Jahre. Genau dazwischen liegt der Spaß.</p>
</div>
</div>
</div>
</section>

<section class="band" id="set">
<div class="wrap">
<p class="quote">„Der Ball darf nicht fallen." Mehr Regeln gibt es nicht.</p>
</div>
</section>

<section class="band cta-band">
<div class="wrap">
<p class="eyebrow" style="color:rgba(18,33,29,.6)">two46 — Rio Classico</p>
<p class="lead">Entdecke das Spiel ohne Sieger.</p>
<a class="btn" href="#">Frescobol entdecken</a>
</div>
</section>

<footer>
<div class="wrap foot-row">
<span>two46 — eine Marke von Kindskopf</span>
<span>Never stop playing!</span>
</div>
</footer>

// 1. Blob-Preloader: garantiert seekbares Video ohne Range-Request-Gehample
fetch(heroSrc)
.then(res => { if (!res.ok) throw new Error('bad response'); return res.blob(); })
.then(blob => { heroVideo.src = URL.createObjectURL(blob); heroVideo.load(); })
.catch(() => { heroVideo.src = heroSrc; heroVideo.load(); });

// Showcase nur laden, wenn vorhanden
if (showcase) {
fetch(showcaseSrc, {method:'HEAD'})
.then(r => { if (r.ok) { showcase.src = showcaseSrc; showcase.load(); }
else showcase.closest('section').style.display = 'none'; })
.catch(() => showcase.closest('section').style.display = 'none');
}

// 2. Normalisierter Scroll-Fortschritt
let targetProgress = 0, currentProgress = 0;
function updateScroll() {
const rect = heroSection.getBoundingClientRect();
const max = rect.height - window.innerHeight;
if (max > 0) targetProgress = Math.max(0, Math.min(1, -rect.top / max));
nav.classList.toggle('nav-scrolled', window.scrollY > 80);
}
window.addEventListener('scroll', updateScroll, { passive: true });
window.addEventListener('resize', updateScroll);
updateScroll();

// 3. Opazitaet direkt aus dem Fortschritt - keine CSS-Transitions
function calcOpacity(p, enterStart, enterEnd, exitStart, exitEnd) {
if (p < enterStart || p > exitEnd) return 0;
if (p < enterEnd) return (p - enterStart) / (enterEnd - enterStart);
if (p > exitStart) return Math.max(0, 1 - (p - exitStart) / (exitEnd - exitStart));
return 1;
}
const WINDOWS = [
[-0.01, 0.00, 0.20, 0.28],
[0.30, 0.39, 0.56, 0.65],
[0.66, 0.75, 0.94, 1.01]
];
const ANCHORS = [0.10, 0.45, 0.80];

// 4. Loop
function scrubLoop() {
currentProgress += (targetProgress - currentProgress) * 0.15;

if (heroVideo.duration && !heroVideo.seeking) {
const t = currentProgress * heroVideo.duration;
if (Math.abs(heroVideo.currentTime - t) > 0.015) heroVideo.currentTime = t;
}

phases.forEach((el, i) => {
if (!el) return;
const op = calcOpacity(targetProgress, ...WINDOWS[i]);
el.style.opacity = op.toFixed(3);
el.style.transform = `translateY(${(ANCHORS[i] - targetProgress) * 60}px)`;
});

if (hint) hint.style.opacity = Math.max(0, 1 - targetProgress * 8).toFixed(3);

requestAnimationFrame(scrubLoop);
}
requestAnimationFrame(scrubLoop);
});
</script>

{% schema %}
{
"name": "Frescobol Story-Hero",
"tag": "div",
"class": "frescobol-story-section",
"settings": [],
"presets": [
{ "name": "Frescobol Story-Hero" }
]
}
{% endschema %}

Soumettre une demande de rétractation

Veuillez remplir le formulaire suivant pour soumettre votre demande de rétractation.

EU Widerrufsbutton

Dein Warenkorb: 0

Désolé, il semble que nous n'ayons pas assez de ce produit.

frescobol-story

Soumettre une demande de rétractation

Devise

Dein Warenkorb: 0

Désolé, il semble que nous n'ayons pas assez de ce produit.

frescobol-story

Soumettre une demande de rétractation