/*
 * Homepage hero film (assets/js/hero-film.js): the hero diagram as a short looping film of one invoice
 * (email -> b4 reads it -> Finance and ERP -> Service ticket), with a 3D camera, captions and a chapter bar.
 * Also: network dots in the hero that follow the cursor, and the A M D O tiles section (template-parts/section-amdo.php).
 * Loaded on the front page only. Colours follow the theme tokens, so light and dark mode both work.
 */

/* Hero: text comes in softly, network canvas behind */
.hero { position: relative; }
.hero__inner { position: relative; z-index: 1; }
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; animation: film-fade 2s ease .6s forwards;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
.hero__spot { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .8;
	background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 65%); }
html[data-theme="dark"] .hero__spot { background: radial-gradient(circle, rgba(143, 176, 255, .12), rgba(143, 176, 255, 0) 65%); }
@keyframes film-fade { to { opacity: 1; } }
.hero__title, .hero__lead, .hero__actions { opacity: 0; animation: film-up 1s cubic-bezier(.16, 1, .3, 1) forwards; }
.hero__title { animation-delay: .1s; }
.hero__lead { animation-delay: .45s; }
.hero__actions { animation-delay: .65s; }
@keyframes film-up { from { opacity: 0; translate: 0 24px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: none; } }

/* scene tokens (light) */
.film{--ink:var(--color-text,#101e36);--mute:var(--color-text-muted,#52617a);--red:var(--color-primary,#d52d43);
  --ok:var(--color-success,#14a66b);--amber:#e29a1b;--blue:#3b6fe0;--card:rgba(255,255,255,.9);--card-b:rgba(16,30,54,.08);
  --shadow:0 22px 44px -22px rgba(29,58,110,.38),0 2px 6px rgba(29,58,110,.06);--dots:rgba(29,58,110,.20);--track:rgba(16,30,54,.12);
  position:relative;width:100%;font-family:Manrope,system-ui,sans-serif}
html[data-theme="dark"] .film{--card:rgba(17,32,54,.92);--card-b:rgba(255,255,255,.10);--shadow:0 22px 44px -20px rgba(0,0,0,.7);--dots:rgba(200,215,255,.16);--track:rgba(255,255,255,.14)}

/* the "screen": frameless, edges fade into the hero */
.film-screen{position:relative;width:100%;aspect-ratio:720/600;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 90%,transparent);mask-composite:intersect}
.film-view{position:absolute;left:0;top:0;width:720px;height:600px;transform-origin:0 0;perspective:1500px;perspective-origin:50% 46%}
.film-world{position:absolute;left:0;top:0;width:720px;height:580px;transform-style:preserve-3d;transform-origin:0 0}
.film-world>*{position:absolute;left:0;top:0;transform-style:preserve-3d}

.film-floor{left:-420px;top:-340px;width:1560px;height:1260px;background:radial-gradient(var(--dots) 1px,transparent 1.5px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent);transform:translateZ(-80px)}
.film-bloom{border-radius:50%;width:720px;height:720px;margin:-360px 0 0 -360px}
.film-bloom.r{background:radial-gradient(closest-side,rgba(213,45,67,.20),transparent)}
.film-bloom.b{background:radial-gradient(closest-side,rgba(80,120,255,.22),transparent)}
.film-pt{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%}

/* wires */
.film-wires{overflow:visible}
.film-wires path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.film-w{stroke:rgba(213,45,67,.38);stroke-width:2}
.film-flow{stroke:var(--red);stroke-width:2;stroke-dasharray:2 12;opacity:.55}
.film-trail{stroke:var(--red);stroke-width:3.5;filter:drop-shadow(0 0 5px rgba(213,45,67,.8))}
.film-end{fill:var(--red)}

/* cards */
.film-card{background:var(--card);border:1px solid var(--card-b);border-radius:16px;padding:13px 15px 12px;color:var(--mute);
  font-size:12.5px;line-height:1.2;--g:0;
  box-shadow:0 0 0 calc(var(--g)*1.5px) rgba(213,45,67,calc(var(--g)*.55)),0 12px calc(var(--g)*44px) rgba(213,45,67,calc(var(--g)*.32)),var(--shadow)}
.film-hd{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.film-ic{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(213,45,67,.10);color:var(--red)}
.film-ic svg{width:14px;height:14px}
.film-hd b{font-weight:700;color:var(--ink);font-size:13.5px}
.film-hd small{margin-left:auto;font-size:11.5px;white-space:nowrap}
.film-hd small strong{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.film-live{display:inline-flex;align-items:center;gap:6px}
.film-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:film-live 1.6s ease-in-out infinite}
@keyframes film-live{50%{box-shadow:0 0 0 5px rgba(20,166,107,.0),0 0 0 3px rgba(20,166,107,.25)}}
.film-rows{position:relative;overflow:hidden;height:46px}
.film-rows.r3{height:69px}
.film-row{display:flex;justify-content:space-between;align-items:center;height:23px;gap:10px;white-space:nowrap;border-radius:6px;font-variant-numeric:tabular-nums}
.film-row.g3,.film-th{display:grid;grid-template-columns:1.05fr 1fr 74px;gap:6px}
.film-th{height:20px;font-size:11.5px;opacity:.85}
.film-row.g3>:nth-child(2),.film-th>:nth-child(2){text-align:right}
.film-row.g3>:nth-child(3),.film-th>:nth-child(3){justify-self:end}
.film-row b{font-weight:600;color:var(--ink)}
.film-dot{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.film-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);transition:background .3s}
.film-dot.am::before{background:var(--amber);box-shadow:0 0 0 3px rgba(226,154,27,.2)}
.film-dot.bl::before{background:var(--blue)}

/* hub */
.film-hub{width:236px;height:104px;border-radius:20px;background:var(--card);border:1px solid var(--card-b);--g:0;--a:0deg;--ra:0;
  box-shadow:0 0 0 calc(var(--g)*2px) rgba(213,45,67,calc(var(--g)*.6)),0 30px 60px -24px rgba(213,45,67,calc(.35 + var(--g)*.4)),var(--shadow)}
.film-hub::before{content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;
  background:conic-gradient(from var(--a),rgba(213,45,67,0) 0deg,rgba(213,45,67,var(--ra)) 70deg,rgba(213,45,67,0) 150deg,rgba(80,120,255,0) 180deg,rgba(80,120,255,var(--ra)) 250deg,rgba(80,120,255,0) 330deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.film-logo{position:absolute;left:0;right:0;top:26px;text-align:center;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.film-logo i{font-style:normal;color:var(--red)}
.film-hubst{position:absolute;left:0;right:0;top:68px;text-align:center;font-size:11px;font-weight:600;color:var(--mute);white-space:nowrap}
.film-hubbar{position:absolute;left:22px;right:22px;bottom:9px;height:2px;border-radius:2px;background:rgba(213,45,67,.12);overflow:hidden}
.film-hubbar i{display:block;height:100%;transform-origin:0 0;transform:scaleX(0);background:linear-gradient(90deg,var(--red),#ff7d8e)}
.film-ring{width:260px;height:130px;margin:-65px 0 0 -130px;border-radius:50%;border:1.5px solid var(--red);opacity:0;
  box-shadow:0 0 24px rgba(213,45,67,.35),inset 0 0 24px rgba(213,45,67,.25)}

/* the invoice that travels */
.film-doc{width:150px;height:184px;border-radius:12px;background:#fff;color:#52617a;padding:12px 12px 0;overflow:hidden;
  box-shadow:0 30px 50px -20px rgba(16,30,54,.45),0 0 0 1px rgba(16,30,54,.06);font-size:9.5px;opacity:0}
.film-doc-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.film-doc-hd b{color:#d52d43;font-weight:800;letter-spacing:.12em;font-size:10px}
.film-doc-hd span{font-weight:700;color:#fff;background:#d52d43;border-radius:4px;padding:2px 5px;font-size:8px}
.film-doc-f{display:flex;justify-content:space-between;gap:6px;padding:4px 5px;margin:0 -5px 6px;border-radius:5px;transition:background .25s,box-shadow .25s}
.film-doc-f b{color:#101e36;font-weight:700;font-variant-numeric:tabular-nums}
.film-doc-f.hit{background:rgba(213,45,67,.12);box-shadow:inset 0 0 0 1px rgba(213,45,67,.45)}
.film-doc-l{height:5px;border-radius:3px;background:#e9eef5;margin:0 0 8px}
.film-doc-l.s{width:62%}
/* dark mode: the invoice is a dark card like the others (solid, because it floats over the hub) */
html[data-theme="dark"] .film-doc{background:#13243b;color:#aeb9c8;box-shadow:0 30px 50px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
html[data-theme="dark"] .film-doc-hd b{color:#ff5a6e}
html[data-theme="dark"] .film-doc-f b{color:#f2efe8}
html[data-theme="dark"] .film-doc-f.hit{background:rgba(255,77,99,.16);box-shadow:inset 0 0 0 1px rgba(255,77,99,.55)}
html[data-theme="dark"] .film-doc-l{background:rgba(255,255,255,.10)}
.film-scan{position:absolute;left:0;right:0;top:0;height:2px;background:#ff4d63;box-shadow:0 0 12px 3px rgba(255,77,99,.55);opacity:0}
.film-scan::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:34px;background:linear-gradient(to top,rgba(255,77,99,.18),transparent)}

/* extracted values + packets */
.film-chip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid rgba(213,45,67,.45);
  color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(213,45,67,.45);opacity:0;font-variant-numeric:tabular-nums}
.film-chip small{font-weight:600;color:var(--mute);font-size:10.5px}
.film-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.film-pk{padding:4px 10px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap;opacity:0;
  box-shadow:0 0 0 4px rgba(213,45,67,.15),0 6px 18px rgba(213,45,67,.5)}
.film-pk.dot{padding:0;width:10px;height:10px}

/* captions + chapter bar */
.film-ui{position:relative;margin:-4px 7% 0;display:flex;flex-direction:column;gap:10px;z-index:2}
.film-cap{position:relative;height:22px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.film-cap span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1),filter .7s}
.film-cap span.pre{opacity:0;transform:translateY(12px);filter:blur(6px)}
.film-cap span.out{opacity:0;transform:translateY(-12px);filter:blur(6px)}
.film-cap em{font-style:normal;color:var(--red);margin-right:10px;font-variant-numeric:tabular-nums}
.film-bar{display:flex;gap:6px;align-items:center}
.film-seg{flex:1;height:15px;padding:6px 0;border:0;background:none;cursor:pointer}
.film-seg i{display:block;height:3px;border-radius:3px;background:var(--track);overflow:hidden}
.film-seg i::after{content:"";display:block;height:100%;background:var(--red);transform-origin:0 0;transform:scaleX(var(--p,0))}
.film-pp{flex:none;width:30px;height:30px;margin-left:8px;border-radius:50%;border:1px solid var(--card-b);background:var(--card);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;font-size:10px;box-shadow:var(--shadow);transition:transform .25s}
.film-pp:hover{transform:scale(1.08)}
@media (max-width:600px){.film-cap{font-size:13.5px}}

/* captions wrap on narrow screens (German is longer) */
.film-cap { height: 2.7em; line-height: 1.3; }
.film-cap span { right: 0; white-space: normal; }

/* A M D O strip (template-parts/section-amdo.php): one quiet row, word with a red first letter, thin dividers */
.amdo { position: relative; padding-block: clamp(8px, 1.6vw, 20px) 0; }
.amdo__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--color-border); }
.amdo__tile { position: relative; padding: 24px 28px; overflow: hidden; }
.amdo__tile + .amdo__tile { border-left: 1px solid var(--color-border); }
.amdo__tile h3 { font-size: 20px; margin: 0 0 8px; color: var(--color-text); letter-spacing: -.005em; }
.amdo__tile h3 span { color: var(--color-primary); }
@media (min-width: 521px) { .amdo__tile h3 { text-align: center; } }
.amdo__tile p { color: var(--color-text-muted); line-height: 1.55; font-size: 15.5px; margin: 0; }
@media (max-width: 900px) {
	.amdo__grid { grid-template-columns: repeat(2, 1fr); }
	.amdo__tile:nth-child(3) { border-left: 0; }
	.amdo__tile:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 520px) {
	.amdo__grid { grid-template-columns: 1fr; }
	.amdo__tile + .amdo__tile { border-left: 0; border-top: 1px solid var(--color-border); }
	.amdo__tile { padding: 14px 4px; }
}
/* entrance (only when the script runs): the row fades up one by one, a thin red line sweeps the top edge */
.amdo__grid.is-anim .amdo__tile { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.amdo__grid.is-anim .amdo__tile.in { opacity: 1; transform: none; }
.amdo__grid.is-anim .amdo__tile:nth-child(2) { transition-delay: .1s; }
.amdo__grid.is-anim .amdo__tile:nth-child(3) { transition-delay: .2s; }
.amdo__grid.is-anim .amdo__tile:nth-child(4) { transition-delay: .3s; }
.amdo__grid::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #e0293f 30%, #ff6b7d 50%, #e0293f 70%, transparent);
	transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.amdo__grid.is-anim:has(.amdo__tile.in)::before { animation: amdo-sweep 1.6s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes amdo-sweep { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* soft light follows the cursor on each part */
.amdo__tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 41, 63, .09), transparent 70%); }
.amdo__tile:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.hero__title, .hero__lead, .hero__actions, .hero__net { animation: none; opacity: 1; }
	.amdo__grid::before { display: none; }
}

/* card widths in the 720 x 600 scene */
.film-card[data-card="fin"] { width: 254px; }
.film-card[data-card="erp"] { width: 222px; }
.film-card[data-card="mail"] { width: 204px; }
.film-card[data-card="srv"] { width: 200px; }
.film-card[data-card="act"] { width: 232px; }