/* HBMIC main v6 for Cafe24 builder: load after #hbMain, Anime.js loaded in <head> */
document.getElementById('hbMain').classList.add('js', matchMedia('(prefers-reduced-motion: reduce)').matches ? 'rm' : 'm');
(function () {
'use strict';
var root = document.getElementById('hbMain');
if (!root) return;
var RM = root.classList.contains('rm');
var A = window.anime;
if (!A) { root.classList.remove('js'); root.classList.add('rm'); RM = true; }

/* ================= language (same rules as hbmic-translation-client.js) ================= */
var LANGS = ['ko', 'en', 'zh-CN', 'ja', 'vi', 'id'];
var SHORT = { 'ko': 'KO', 'en': 'EN', 'zh-CN': 'ZH', 'ja': 'JA', 'vi': 'VI', 'id': 'ID' };
function normLang(v) {
v = String(v || '').toLowerCase().replace('_', '-');
if (v === 'zh' || v === 'zh-cn') return 'zh-CN';
for (var i = 0; i < LANGS.length; i++) if (LANGS[i].toLowerCase() === v || LANGS[i].toLowerCase() === v.split('-')[0]) return LANGS[i];
return '';
}
function pageLang() {
try { var u = normLang(new URL(location.href).searchParams.get('lang')); if (u) return u; } catch (e) {}
var gm = document.cookie.match(/(?:^|;\s*)googtrans=[^;]*/g), m = gm ? [0, gm[gm.length - 1].replace(/^;?\s*googtrans=/, '')] : null; // last cookie wins, same as hbmic-translation-client.js
if (m) { var c = normLang(decodeURIComponent(m[1]).split('/')[2]); if (c) return c; }
// first visit: same guess as the client (browser's first preferred locale)
var f = String((navigator.languages && navigator.languages[0]) || navigator.language || '').replace('_', '-').toLowerCase().split('-');
var reg = f.length > 1 ? f[f.length - 1].toUpperCase() : '';
if (reg === 'KR' || f[0] === 'ko') return 'ko';
if (reg === 'CN') return 'zh-CN';
if (reg === 'JP' || f[0] === 'ja') return 'ja';
if (reg === 'VN' || f[0] === 'vi') return 'vi';
if (reg === 'ID' || f[0] === 'id') return 'id';
return 'en';
}
var LANG = pageLang();
function initLang() {
var box = root.querySelector('.hb-lang');
if (!box) return;
var btn = box.querySelector('.hb-lang__btn'), list = box.querySelector('.hb-lang__list'), cur = box.querySelector('.hb-lang__cur');
function mark(l) {
cur.textContent = SHORT[l] || 'KO';
root.querySelectorAll('.gtranslate_wrapper a[data-gt-lang]').forEach(function (a) {
var on = normLang(a.getAttribute('data-gt-lang')) === l;
a.classList.toggle('gt-current-lang', on);
if (on) a.setAttribute('aria-current', 'true'); else a.removeAttribute('aria-current');
});
}
function show(v) { list.hidden = !v; btn.setAttribute('aria-expanded', v ? 'true' : 'false'); }
btn.addEventListener('click', function () { show(list.hidden); if (!list.hidden) { var a = list.querySelector('.gt-current-lang') || list.querySelector('a'); a.focus({ preventScroll: true }); } });
// registered before the translation client (it loads with defer), so this runs first
window.addEventListener('click', function (e) {
var a = e.target && e.target.closest ? e.target.closest('.gtranslate_wrapper a[data-gt-lang]') : null;
if (a) { e.preventDefault(); LANG = normLang(a.getAttribute('data-gt-lang')) || 'ko'; mark(LANG); show(false); return; }
if (!box.contains(e.target)) show(false);
}, true);
box.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !list.hidden) { show(false); btn.focus(); } });
mark(LANG); show(false);
}
initLang();

/* ================= background: temporary pastel / video + WebGL ripple ================= */
var Bg = (function () {
var host = root.querySelector('.hb-bg');
var glc = host.querySelector('.hb-bg__gl');
var video = host.querySelector('.hb-bg__video');
var src = document.createElement('canvas');
src.className = 'hb-bg__src'; src.setAttribute('aria-hidden', 'true');
host.insertBefore(src, glc);
var ctx = src.getContext('2d');
var mobile = matchMedia('(max-width: 767px)').matches;
var useVideo = false;

var url = (mobile ? host.dataset.videoMobile : host.dataset.videoPc) || '';
if (url) {
video.src = url;
video.addEventListener('playing', function () { useVideo = true; host.classList.add('has-video'); });
if (!RM) video.play().catch(function () {});
}

// pastel: lavender, sky, light pink, mint (temporary)
var BLOBS = [
{ c: '205,192,247', x: .62, y: .30, r: .62, sx: .11, sy: .08, p: 41 },
{ c: '178,220,248', x: .86, y: .70, r: .70, sx: .09, sy: .10, p: 53 },
{ c: '250,205,224', x: .74, y: .92, r: .55, sx: .12, sy: .07, p: 37 },
{ c: '190,238,216', x: .95, y: .18, r: .58, sx: .08, sy: .11, p: 47 },
{ c: '214,200,250', x: .48, y: .80, r: .50, sx: .10, sy: .09, p: 59 }
];
function draw2D(t) {
var w = src.width, h = src.height, m = Math.max(w, h);
ctx.fillStyle = '#F4F2FB'; ctx.fillRect(0, 0, w, h);
for (var i = 0; i < BLOBS.length; i++) {
var b = BLOBS[i], k = t / b.p * Math.PI * 2;
var x = (b.x + Math.sin(k) * b.sx) * w, y = (b.y + Math.cos(k * .8) * b.sy) * h, r = b.r * m;
var g = ctx.createRadialGradient(x, y, 0, x, y, r);
g.addColorStop(0, 'rgba(' + b.c + ',1)'); g.addColorStop(.55, 'rgba(' + b.c + ',.45)'); g.addColorStop(1, 'rgba(' + b.c + ',0)');
ctx.fillStyle = g; ctx.fillRect(0, 0, w, h);
}
// keep the left 40-45% bright (wider on mobile because text spreads wider)
var wash = ctx.createLinearGradient(0, 0, w, 0);
if (mobile) { wash.addColorStop(0, 'rgba(255,255,255,.9)'); wash.addColorStop(.6, 'rgba(255,255,255,.62)'); wash.addColorStop(1, 'rgba(255,255,255,.15)'); }
else { wash.addColorStop(0, 'rgba(255,255,255,.96)'); wash.addColorStop(.36, 'rgba(255,255,255,.9)'); wash.addColorStop(.6, 'rgba(255,255,255,0)'); }
ctx.fillStyle = wash; ctx.fillRect(0, 0, w, h);
}

// ---- WebGL ----
var gl = null, prog, tex, U = {}, N = 32;
var pts = new Float32Array(N * 4), ptI = 0;
var mouse = { x: -9999, y: -9999, amt: 0, target: 0, last: 0 };
var VS = 'attribute vec2 p;varying vec2 v;void main(){v=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
var FS = [
'precision highp float;',
'uniform sampler2D u_tex;uniform vec2 u_res;uniform float u_time;uniform vec4 u_pts[32];uniform vec3 u_mouse;uniform vec2 u_scale;uniform vec2 u_off;',
'varying vec2 v;',
'void main(){',
' vec2 px=v*u_res; vec2 disp=vec2(0.); float shade=0.;',
' for(int i=0;i<32;i++){',
' vec4 q=u_pts[i]; float age=u_time-q.z;',
' if(q.w<=0.||age<0.||age>2.8) continue;',
' vec2 d=px-q.xy; float dist=length(d)+.001;',
' float r=age*240.; float band=exp(-pow((dist-r)/80.,2.));',
' float amp=q.w*exp(-age*1.5)*smoothstep(0.,.18,age);',
' float w=sin((dist-r)*.05)*band*amp;',
' disp+=d/dist*w; shade+=w;',
' }',
' vec2 dm=px-u_mouse.xy; float g=exp(-dot(dm,dm)/(2.*160.*160.))*u_mouse.z;',
' disp+=-dm/160.*g*.55+vec2(sin(px.y*.03+u_time*1.6),cos(px.x*.03+u_time*1.3))*g*.45;',
' vec2 off=disp*15./u_res;',
' vec2 t=u_off+(v+off)*u_scale; vec2 ca=off*.5*u_scale;',
' vec3 col=vec3(texture2D(u_tex,t+ca).r,texture2D(u_tex,t).g,texture2D(u_tex,t-ca).b);',
' col+=shade*.055+g*.025;',
' gl_FragColor=vec4(clamp(col,0.,1.),1.);',
'}'
].join('\n');
function sh(type, s) { var o = gl.createShader(type); gl.shaderSource(o, s); gl.compileShader(o); if (!gl.getShaderParameter(o, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(o)); return o; }
try {
gl = glc.getContext('webgl', { alpha: false, antialias: false, premultipliedAlpha: false, preserveDrawingBuffer: false });
if (!gl) throw new Error('no webgl');
prog = gl.createProgram();
gl.attachShader(prog, sh(gl.VERTEX_SHADER, VS)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FS));
gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error('link');
gl.useProgram(prog);
var buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
var loc = gl.getAttribLocation(prog, 'p'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
['u_tex', 'u_res', 'u_time', 'u_pts', 'u_mouse', 'u_scale', 'u_off'].forEach(function (n) { U[n] = gl.getUniformLocation(prog, n); });
tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.uniform1i(U.u_tex, 0);
} catch (e) { gl = null; host.classList.add('no-gl'); }

var dpr = 1, cw = 1, ch = 1, lastVT = -2, isIdle = false;
function resize() {
var r = host.getBoundingClientRect();
cw = Math.max(1, r.width); ch = Math.max(1, r.height);
dpr = Math.min(window.devicePixelRatio || 1, 1.5);
glc.width = Math.round(cw * dpr); glc.height = Math.round(ch * dpr);
src.width = 420; src.height = Math.max(1, Math.round(420 * ch / cw)); // blurred background, low resolution is enough
if (gl) gl.viewport(0, 0, glc.width, glc.height);
}
function source() { return useVideo && video.readyState >= 2 ? video : src; }
function fit(s) {
var sw = s.videoWidth || s.width, shh = s.videoHeight || s.height, sa = sw / shh, ca = cw / ch;
return sa > ca ? [ca / sa, 1, (1 - ca / sa) / 2, 0] : [1, sa / ca, 0, (1 - sa / ca) / 2];
}
function render(now) {
var t = now / 1000;
if (!useVideo) draw2D(RM ? 0 : t);
if (!gl) return;
var s = source();
// 11/11 13:20 speed: upload a video frame only when it changed (video 24-30fps, screen 60-144Hz); skip drawing when nothing moves
var vid = s === video;
// 11/11 13:30 speed: mouse still for 3.2s (no ripple left) -> show the real <video> (no copying, full resolution) and stop drawing; touch screens stay here
if (vid && !RM) { var idle = now - mouse.last > 3200; if (idle !== isIdle) { isIdle = idle; host.classList.toggle('hb-idle', idle); if (!idle) lastVT = -2; } if (idle) return; }
var vt = vid ? video.currentTime : -1, fresh = !vid || vt !== lastVT;
gl.bindTexture(gl.TEXTURE_2D, tex);
if (fresh) { lastVT = vt; try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, s); } catch (e) { /* video without CORS: keep the temporary background */ useVideo = false; host.classList.remove('has-video'); return; } }
var f = fit(s);
mouse.amt += (mouse.target - mouse.amt) * .06;
if (now - mouse.last > 1600) mouse.target = Math.min(mouse.target, .35);
gl.uniform2f(U.u_res, glc.width, glc.height);
gl.uniform1f(U.u_time, t);
gl.uniform4fv(U.u_pts, pts);
gl.uniform3f(U.u_mouse, mouse.x * dpr, mouse.y * dpr, mouse.amt);
gl.uniform2f(U.u_scale, f[0], f[1]); gl.uniform2f(U.u_off, f[2], f[3]);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
// pointer -> ripple point (background coords, y from bottom to top)
var lastPt = { x: -1e4, y: -1e4, t: 0 };
function addPoint(x, y, s) {
var i = ptI * 4; pts[i] = x * dpr; pts[i + 1] = y * dpr; pts[i + 2] = performance.now() / 1000; pts[i + 3] = s;
ptI = (ptI + 1) % N;
}
function onPointer(e, force) {
var r = glc.getBoundingClientRect();
var x = e.clientX - r.left, y = r.height - (e.clientY - r.top);
var inside = x >= 0 && x <= r.width && y >= 0 && y <= r.height;
mouse.x = x; mouse.y = y; mouse.target = inside ? 1 : 0; mouse.last = performance.now();
if (!inside) return;
var dx = x - lastPt.x, dy = y - lastPt.y, d = Math.sqrt(dx * dx + dy * dy), now = performance.now();
if (force || d > 46 || (d > 6 && now - lastPt.t > 110)) {
addPoint(x, y, force ? 1 : Math.min(1, .35 + d / 120));
lastPt = { x: x, y: y, t: now };
}
}

var visible = true, raf = 0;
function loop(now) { raf = requestAnimationFrame(loop); if (visible) render(now); }
resize();
if (RM) { render(0); video.pause(); }
else {
raf = requestAnimationFrame(loop);
window.addEventListener('pointermove', function (e) { onPointer(e, false); }, { passive: true });
window.addEventListener('pointerdown', function (e) { onPointer(e, true); }, { passive: true });
if ('IntersectionObserver' in window) new IntersectionObserver(function (en) { visible = en[0].isIntersecting; }).observe(host);
}
window.addEventListener('resize', function () { resize(); if (RM) render(0); });
return { gl: !!gl };
})();
root.dataset.gl = Bg.gl ? '1' : '0';

if (RM) { var t2 = root.querySelector('.hb-title__l2'); t2.textContent = t2.textContent; initMenu(); return; }

var animate = A.animate, createTimeline = A.createTimeline, stagger = A.stagger, utils = A.utils;

/* ================= split headline into letters ================= */
function splitChars(el) {
var text = el.textContent; el.textContent = '';
var out = [];
text.split(/(\s+)/).forEach(function (part) {
if (!part) return;
if (/^\s+$/.test(part)) { el.appendChild(document.createTextNode(' ')); return; }
var w = document.createElement('span'); w.className = 'hb-w';
Array.from(part).forEach(function (c) { var s = document.createElement('span'); s.className = 'hb-ch'; s.textContent = c; w.appendChild(s); out.push(s); });
el.appendChild(w);
});
return out;
}
var l1 = root.querySelector('.hb-title__l1'), l2 = root.querySelector('.hb-title__l2'), roll = root.querySelector('.hb-roll');
var rollText = roll.textContent.trim();
var l1Text = l1.textContent, tailText = l2.lastChild.textContent;
// Korean: letters scatter and gather. Other languages: the client translates whole lines, so do not split.
var split = LANG === 'ko';
var chars = [];
if (split) {
var tailSpan = document.createElement('span'); tailSpan.textContent = tailText; l2.replaceChild(tailSpan, l2.lastChild);
chars = splitChars(l1); tailSpan.style.display = 'inline-block';
} else {
l2.textContent = rollText + tailText;
root.querySelector('.hb-title').removeAttribute('aria-label');
l1.removeAttribute('aria-hidden'); l2.removeAttribute('aria-hidden');
}
// after the intro: back to plain text so a later language switch translates whole lines
function flatten() {
if (!split) return;
l1.textContent = l1Text; l2.textContent = rollText + tailText;
}

function buildRoll() {
roll.textContent = '';
var cols = [];
rollText.split('').forEach(function (d, i) {
var n = +d, col = document.createElement('span'); col.className = 'hb-roll__col';
var inner = document.createElement('span'); inner.style.display = 'block';
var seq = [], len = 10 * (1 + i) + n + 1;
for (var k = 0; k < len; k++) seq.push(k % 10);
seq.forEach(function (v) { var s = document.createElement('span'); s.textContent = v; inner.appendChild(s); });
col.appendChild(inner); roll.appendChild(col); cols.push({ inner: inner, steps: len - 1 });
});
return cols;
}

/* ================= intro ================= */
function intro() {
var cols = split ? buildRoll() : [];
var introEl = root.querySelector('.hb-intro');
var paths = introEl.querySelectorAll('path');
var drawables = A.svg.createDrawable(paths);
if (split) { utils.set(chars, { opacity: 0 }); utils.set(roll, { opacity: 0 }); utils.set(tailSpan, { opacity: 0 }); }
else utils.set([l1, l2], { opacity: 0 });
l1.style.visibility = l2.style.visibility = 'visible';

var tl = createTimeline({ defaults: { ease: 'inOutQuad' } });
tl.add(drawables, { draw: ['0 0', '0 1'], duration: 800, delay: stagger(55) }, 0)
.add(paths, { fillOpacity: [0, 1], strokeOpacity: [1, 0], duration: 320, ease: 'outQuad' }, 820)
.add(introEl.querySelector('svg'), { y: [0, -24], opacity: [1, 0], duration: 420, ease: 'inQuad' }, 1180)
.add(introEl, { clipPath: ['inset(0% 0% 0% 0%)', 'inset(0% 0% 100% 0%)'], duration: 620, ease: 'inOutQuart', onComplete: function () { introEl.remove(); } }, 1220)
// header and eyebrow
.add(root.querySelectorAll('.hb-head > *'), { opacity: [0, 1], y: [-10, 0], duration: 700, ease: 'outExpo', delay: stagger(80) }, 1500)
.add(root.querySelector('.hb-eyebrow'), { opacity: [0, 1], y: [14, 0], duration: 800, ease: 'outExpo' }, 1450)
.add(root.querySelector('.hb-title__logo'), { opacity: [0, 1], y: [18, 0], filter: ['blur(8px)', 'blur(0px)'], duration: 900, ease: 'outExpo' }, 1500)
;
if (!split) tl.add([l1, l2], { opacity: [0, 1], y: [22, 0], filter: ['blur(8px)', 'blur(0px)'], duration: 1000, ease: 'outExpo', delay: stagger(140), onComplete: function () { l1.style.cssText = l2.style.cssText = 'visibility:visible'; } }, 1580);
// letters gather from scattered positions (staggered)
else tl.add(chars, {
opacity: [0, 1],
x: function () { return [utils.random(-36, 36), 0]; },
y: function () { return [utils.random(-30, 30), 0]; },
rotate: function () { return [utils.random(-14, 14), 0]; },
filter: ['blur(10px)', 'blur(0px)'],
duration: 1000, ease: 'outExpo', delay: stagger(26),
onComplete: function () { chars.forEach(function (c) { c.removeAttribute('style'); }); }
}, 1580);
// 1985: digits roll and stop (no bounce)
if (split) tl.add(roll, { opacity: [0, 1], filter: ['blur(6px)', 'blur(0px)'], duration: 500, ease: 'outQuad' }, 1720);
cols.forEach(function (c, i) {
tl.add(c.inner, { y: ['0em', (-1.1 * c.steps) + 'em'], duration: 1100 + i * 160, ease: 'outQuart' }, 1720);
});
// '³βΊΞΕΝ': no flying in. Rises about 10px in place and fades in as the digits are almost stopped (digits first, then the words)
if (split) tl.add(tailSpan, { opacity: [0, 1], y: [10, 0], duration: 700, ease: 'outQuad' }, 2800);
tl.add(root.querySelectorAll('.hb-big'), { opacity: [0, 1], y: [24, 0], duration: 900, ease: 'outExpo', delay: stagger(110) }, 2050);
tl.then(function () {
if (split) { roll.textContent = rollText; roll.removeAttribute('style'); } // restore plain text at the end so the resting state is certain
flatten();
root.querySelectorAll('.hb-big').forEach(function (b) { b.style.transform = ''; });
root.classList.add('ready');
});
}

/* ================= link hover: text roll + underline/arrow (magnetic pull removed 11/10) ================= */
function magnets() { /* removed: header buttons now use CSS hover (lift, fill, sheen) */ }
function bigLinks() {
root.querySelectorAll('.hb-big').forEach(function (b) {
var u = b.querySelector('.hb-big__u'), ar = b.querySelector('.hb-big__a'), t = b.querySelector('.hb-big__t'), r = null, busy = false;
if (t && !t.querySelector('.hb-roll')) { r = document.createElement('i'); r.className = 'hb-roll'; while (t.firstChild) r.appendChild(t.firstChild); t.appendChild(r); } else if (t) { r = t.querySelector('.hb-roll'); }
function roll() {
if (!r || busy || RM) return; busy = true;
animate(r, { y: '-110%', duration: 200, ease: 'inQuad', onComplete: function () { animate(r, { y: ['110%', '0%'], duration: 520, ease: 'outExpo', onComplete: function () { busy = false; } }); } });
setTimeout(function () { busy = false; }, 1000);
}
function on() { roll(); u.style.setProperty('--uo', 'left'); animate(u, { '--u': 1, duration: 520, ease: 'outExpo' }); animate(ar, { rotate: -45, duration: 640, ease: 'outExpo' }); }
function off() { u.style.setProperty('--uo', 'right'); animate(u, { '--u': 0, duration: 420, ease: 'outQuad' }); animate(ar, { rotate: 0, duration: 520, ease: 'outExpo' }); }
b.addEventListener('pointerenter', on); b.addEventListener('pointerleave', off);
b.addEventListener('focus', on); b.addEventListener('blur', off);
});
}

/* ================= pastel sparkles ================= */
function sparks() {
var layer = root.querySelector('.hb-sparks');
var COLORS = ['#C9B8F5', '#9FD3F7', '#F7B8D2', '#A8E6CF'];
var alive = 0, last = { x: -1e4, y: -1e4, t: 0 };
function one(x, y, big) {
if (alive > 46) return;
var s = document.createElement('span'), size = big ? utils.random(9, 15) : utils.random(5, 11);
s.className = 'hb-spark';
s.style.cssText = 'left:' + (x - size / 2) + 'px;top:' + (y - size / 2) + 'px;width:' + size + 'px;height:' + size + 'px;background:' + utils.randomPick(COLORS);
layer.appendChild(s); alive++;
animate(s, {
x: utils.random(-26, 26) * (big ? 2 : 1), y: utils.random(-44, -8) * (big ? 1.6 : 1),
rotate: utils.random(-120, 120),
scale: [{ from: .2, to: 1, duration: 260, ease: 'outQuad' }, { to: 0, duration: 700, ease: 'inQuad' }],
opacity: [{ from: 0, to: 1, duration: 200 }, { to: 0, duration: 760 }],
onComplete: function () { s.remove(); alive--; }
});
}
window.addEventListener('pointermove', function (e) {
if (e.pointerType !== 'mouse') return;
var dx = e.clientX - last.x, dy = e.clientY - last.y, now = performance.now();
if (dx * dx + dy * dy < 196 || now - last.t < 28) return;
last = { x: e.clientX, y: e.clientY, t: now };
one(e.clientX, e.clientY, false);
}, { passive: true });
window.addEventListener('pointerdown', function (e) {
if (e.pointerType === 'mouse') return;
for (var i = 0; i < 9; i++) one(e.clientX, e.clientY, true);
}, { passive: true });
}

/* ================= process: reveal in order on scroll ================= */
function process() {
var list = root.querySelector('.hb-steps');
if (!list) return;
var steps = list.querySelectorAll('.hb-step');
var vertical = matchMedia('(max-width: 767px)').matches;
var done = false;
var io = new IntersectionObserver(function (en) {
if (done || !en[0].isIntersecting) return;
done = true; io.disconnect();
var tl = createTimeline({ defaults: { ease: 'outExpo' } });
steps.forEach(function (st, i) {
tl.add(st, { opacity: [0, 1], y: [28, 0], duration: 760 }, i === 0 ? 0 : '-=260');
var line = st.querySelector('.hb-step__line');
if (line) {
var p = {}; p[vertical ? 'scaleY' : 'scaleX'] = [0, 1]; p.duration = 560; p.ease = 'inOutQuad';
tl.add(line, p, '-=420');
}
});
}, { threshold: .3 });
io.observe(list);
}

initMenu(true);
magnets(); bigLinks(); sparks(); process();
var fontsReady = document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
Promise.race([fontsReady, new Promise(function (r) { setTimeout(r, 900); })]).then(intro);

/* ================= full menu ================= */
function initMenu(motion) {
var btn = root.querySelector('.hb-menu-btn'), menu = root.querySelector('.hb-menu');
var close = menu.querySelector('.hb-menu__close'), links = menu.querySelectorAll('.hb-menu__list a');
var rows = menu.querySelectorAll('.hb-menu__in'), isOpen = false, busy = null;
function open() {
if (isOpen) return; isOpen = true;
menu.hidden = false; btn.setAttribute('aria-expanded', 'true');
document.documentElement.style.overflow = 'hidden';
if (motion) {
if (busy) busy.pause();
A.utils.set(rows, { y: '110%' });
busy = A.createTimeline()
.add(menu, { clipPath: ['inset(0% 0% 100% 0%)', 'inset(0% 0% 0% 0%)'], duration: 560, ease: 'inOutQuart' })
.add(rows, { y: ['110%', '0%'], duration: 760, ease: 'outExpo', delay: A.stagger(80) }, 260);
}
links[0].focus({ preventScroll: true });
}
function shut(back) {
if (!isOpen) return; isOpen = false;
btn.setAttribute('aria-expanded', 'false');
document.documentElement.style.overflow = '';
function hide() { menu.hidden = true; menu.style.clipPath = ''; }
if (motion) { if (busy) busy.pause(); busy = A.animate(menu, { clipPath: 'inset(0% 0% 100% 0%)', duration: 420, ease: 'inOutQuart', onComplete: hide }); }
else hide();
if (back !== false) btn.focus({ preventScroll: true });
}
btn.addEventListener('click', open);
close.addEventListener('click', function () { shut(); });
links.forEach(function (a) { a.addEventListener('click', function () { shut(false); }); });
menu.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { shut(); return; }
if (e.key !== 'Tab') return;
var f = Array.from(menu.querySelectorAll('button, a[href]')), first = f[0], lastF = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); lastF.focus(); }
else if (!e.shiftKey && document.activeElement === lastF) { e.preventDefault(); first.focus(); }
});
}
})();

/* 11/9 21:05: two scroll stops (first screen / footer) with a fast glide. Replaces CSS scroll-snap, whose speed cannot be set.
Used only when the page is one screen + a footer shorter than the screen. */
(function () {
'use strict';
var H = document.documentElement;
var isProc = !!document.querySelector('.hb-proc');
var RMs = matchMedia('(prefers-reduced-motion: reduce)').matches;
var DUR = 360, raf = 0, lock = 0, ty = 0;
function max() { return Math.max(0, H.scrollHeight - innerHeight); }
function on() { var m = max(); return m > 0 && m < innerHeight && (!isProc || innerWidth > 900); }
function busyUI(t) {
if (!t || !t.closest) return false;
if (t.closest('.pp-sheet, .hb-menu, .hb-lang__list, input, textarea, select')) return true;
return false;
}
function inner(t, dir) { // a scrollable box under the pointer that can still scroll that way keeps the wheel
var r = t && t.closest ? t.closest('.pp-r') : null;
if (!r || r.scrollHeight <= r.clientHeight + 1) return false;
return dir > 0 ? r.scrollTop + r.clientHeight < r.scrollHeight - 1 : r.scrollTop > 0;
}
function go(to) {
cancelAnimationFrame(raf);
var from = window.pageYOffset, d = to - from;
if (Math.abs(d) < 1) return;
if (RMs) { window.scrollTo(0, to); return; }
var t0 = performance.now();
(function step(t) {
var p = Math.min(1, (t - t0) / DUR), e = 1 - Math.pow(1 - p, 3);
window.scrollTo(0, from + d * e);
if (p < 1) raf = requestAnimationFrame(step); else raf = 0;
})(t0);
}
function toward(dir) {
var now = Date.now();
if (now < lock) return;
var target = dir > 0 ? max() : 0;
if (Math.abs(target - window.pageYOffset) < 1) return;
lock = now + DUR + 120;
go(target);
}
window.addEventListener('wheel', function (e) {
if (!on() || e.ctrlKey || busyUI(e.target) || Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
var dir = e.deltaY > 0 ? 1 : -1;
if (inner(e.target, dir)) return;
e.preventDefault();
toward(dir);
}, { passive: false });
window.addEventListener('touchstart', function (e) { ty = e.touches[0].clientY; }, { passive: true });
window.addEventListener('touchmove', function (e) {
if (!on() || busyUI(e.target)) return;
e.preventDefault();
}, { passive: false });
window.addEventListener('touchend', function (e) {
if (!on() || busyUI(e.target)) return;
var dy = ty - e.changedTouches[0].clientY;
if (Math.abs(dy) > 24) toward(dy > 0 ? 1 : -1);
}, { passive: true });
window.addEventListener('keydown', function (e) {
if (!on() || busyUI(e.target) || busyUI(document.activeElement)) return;
var k = e.key, dir = 0;
if (k === 'PageDown' || k === 'ArrowDown' || k === 'End' || (k === ' ' && !e.shiftKey)) dir = 1;
if (k === 'PageUp' || k === 'ArrowUp' || k === 'Home' || (k === ' ' && e.shiftKey)) dir = -1;
if (!dir) return;
if (k === ' ' && /BUTTON|A/.test((document.activeElement || {}).tagName || '')) return;
e.preventDefault();
toward(dir);
});
// scrollbar drag or anything else: settle on the nearer stop
var st = 0;
window.addEventListener('scroll', function () {
if (!on() || raf) return;
clearTimeout(st);
st = setTimeout(function () {
if (raf) return;
var y = window.pageYOffset, m = max();
if (y > 0 && y < m) go(y > m / 2 ? m : 0);
}, 160);
}, { passive: true });
})();
/* 11/10: logo (header and full menu) on the main page goes back to the first screen; elsewhere it is a normal link to the main page */
(function () {
var logos = document.querySelectorAll('.hb-head__logo, .hb-menu__logo');
if (!logos.length) return;
function norm(p) { return p.replace(/index\.php$/, '').replace(/\/+$/, '/'); }
if (norm(location.pathname) !== norm(logos[0].pathname)) return;
try { history.scrollRestoration = 'manual'; } catch (e) {}
Array.prototype.forEach.call(logos, function (a) {
a.addEventListener('click', function (e) {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
e.preventDefault();
var inMenu = a.classList.contains('hb-menu__logo');
if (inMenu) {
window.scrollTo(0, 0);
var close = document.querySelector('.hb-menu__close');
if (close) close.click();
return;
}
if (window.scrollY > 2) window.scrollTo({ top: 0, behavior: 'smooth' });
else location.href = a.href;
});
});
})();