/* Hero (user's final choice, 14.11.2026): text left, a 3D wall of our videos on the right
   (YouTube, Twitch, TikTok, Instagram, Shorts) under a light veil, like alkos-gruppe.de. Active via <html data-hero="l">. */

/* ---------- headline: words rise out of a blur ---------- */
.hv-w { display: inline-block; padding-left: .1em; padding-right: .1em; margin-left: -.1em; margin-right: -.1em; opacity: 0; filter: blur(14px); transform: translateY(.35em);
  animation: hv-word .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.12s + var(--i) * .07s);
  background-image: var(--hv-grad, linear-gradient(to bottom right, #000 30%, rgba(0,0,0,.4))); -webkit-background-clip: text; background-clip: text;
  padding-bottom: .2em; margin-bottom: -.2em; }
h1.hv-split { background: none !important; }
@keyframes hv-word { to { opacity: 1; filter: none; transform: none; } }

/* ---------- shared: text left, 3D wall of our videos on the right (like a tilted mosaic) ---------- */
.hv-wall, .hv-shade { display: none; }
/* Veil over the wall: it stays a background, the videos read only half. */
html[data-hero] .hv-shade { display: block; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 56%; pointer-events: none;
  background: linear-gradient(to right, var(--hv-bg) 0%, rgba(var(--hv-rgb), .74) 30%, rgba(var(--hv-rgb), .58) 100%); }
html[data-hero="l"] { --hv-bg: #f4f4f5; --hv-rgb: 244, 244, 245; }
@media (max-width: 899px) { html[data-hero] .hv-shade { display: none; } html[data-hero] .hv-wall { opacity: .6; } }
html[data-hero] .hero { min-height: max(760px, 100vh); padding: 170px 24px 210px; text-align: left;
  padding-left: max(28px, calc((100vw - 1280px) / 2 + 28px)); }
html[data-hero] .hero .hero-grid, html[data-hero] .hero .arc, html[data-hero] .hero .fade { display: none; }
html[data-hero] .hero > :not(.hv-wall):not(.hv-shade):not(.arc) { position: relative; z-index: 2; }
html[data-hero] .hero h1 { animation: none; margin: 36px 0 0; line-height: 1.04; max-width: none; font-size: clamp(2.6rem, 5.5vw, 6rem); letter-spacing: -.06em; text-wrap: balance; }
html[data-hero] .hero .subtitle { margin: 26px 0 48px; line-height: 1.6; max-width: 37rem; text-wrap: pretty; color: #52525b; }
html[data-hero] .hero .cta-row { justify-content: flex-start; }
html[data-hero] .hero .proof { justify-content: flex-start; max-width: 36rem; margin-top: 34px; gap: 10px 26px; }
html[data-hero] .hv-wall { display: block; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 56%; pointer-events: none;
  perspective: 1200px; perspective-origin: 0% 45%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-composite: intersect; }
/* Built at 2x and scaled down inside the 3D transform: the browser rasterises the tilted layer at its layout
   size, so a 2x layout keeps the thumbnails sharp where perspective magnifies them (right side). */
.hv-tilt { position: absolute; left: 0%; top: 50%; height: 420%; display: flex; gap: 32px; transform-origin: 0 50%;
  transform: translateY(-50%) translateZ(-340px) rotateY(calc(-48deg + var(--mx, 0) * 4deg)) rotateX(calc(12deg + var(--my, 0) * -3deg)) rotateZ(6deg) scale(.5);
  transform-origin: 0% 50%; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hv-col { display: flex; flex-direction: column; gap: 32px; width: 460px; flex: none; animation: hv-up var(--d, 70s) linear infinite; }
.hv-col:nth-child(even) { animation-name: hv-down; }
.hv-tile { width: 100%; border-radius: 40px; overflow: hidden; flex: none; position: relative; background: #d4d4d8; }
.hv-tile.s { aspect-ratio: 9 / 16; }
.hv-tile.y { aspect-ratio: 16 / 9; }
.hv-tile img, .hv-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-tile video { opacity: 0; transition: opacity .4s; }
.hv-tile.playing video { opacity: 1; }
/* Platform logo bottom left (no box), views bottom right, small. */
.hv-tile .pf { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.hv-tile .pf svg { width: 34px; height: 34px; display: block; }
.hv-tile .vw { position: absolute; right: 18px; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.92);
  font: 600 20px/1 var(--sf); letter-spacing: 0; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.hv-tile .vw svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.hv-tile em { position: absolute; right: 16px; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 12px; background: rgba(0,0,0,.78); color: #fff; font: 600 22px/1.1 var(--sf); font-style: normal; }
.hv-tile em.live { background: #e91916; letter-spacing: .02em; }
.hv-tile.y::after { content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 64px; margin: -32px 0 0 -46px; border-radius: 20px; z-index: 2;
  background: rgba(0,0,0,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 36px no-repeat; }
@keyframes hv-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hv-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (max-width: 899px) {
  html[data-hero] .hero { padding: 130px 22px 0; min-height: 0; }
  html[data-hero] .hv-wall { position: relative; width: auto; height: 460px; margin: 36px -22px 0; z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent); }
  .hv-tilt { left: 2%; transform: translateY(-50%) rotateY(-38deg) rotateX(8deg) rotateZ(5deg) scale(.5); }
  .hv-col { width: 300px; }
}

/* ---------- light theme ---------- */
html[data-hero="l"] .hero { background: #f4f4f5; }
html[data-hero="l"] .hv-tile { box-shadow: 0 0 0 1px rgba(9,9,11,.05), 0 24px 44px -26px rgba(9,9,11,.5); }

@media (prefers-reduced-motion: reduce) {
  .hv-w { animation: none; opacity: 1; filter: none; transform: none; }
  .hv-col { animation: none !important; }
}

/* ---------- hero copy and buttons ---------- */
@media (min-width: 900px) { html[data-hero] .hero h1 { white-space: nowrap; } }
html[data-hero] .hero .subtitle b { color: #09090b; font-weight: 600; }
html[data-hero] .hero .subtitle .nl { display: block; }
@media (min-width: 900px) { html[data-hero] .hero .subtitle { max-width: none; } html[data-hero] .hero .subtitle .nl { white-space: nowrap; } }
/* Kicker pill: Apple-style liquid glass (refraction via liquid-glass.js in Chromium, frost elsewhere). */
.hc-pill { margin: 0; padding: 9px 18px 9px 14px; color: #3f3f46; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(244,247,252,.3) 52%, rgba(222,230,244,.5) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); position: relative; isolation: isolate;
  box-shadow: 0 0 0 .5px rgba(16,24,40,.1), 0 10px 26px -10px rgba(16,24,40,.25), inset 0 1.5px 0 #fff, inset 0 -6px 12px -8px rgba(110,130,175,.35); }
.hc-pill::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 60% at 30% -10%, rgba(255,255,255,.95), transparent 70%); }
.hc-dot { width: 7px; height: 7px; border-radius: 50%; background: #09090b; box-shadow: 0 0 0 3px rgba(9,9,11,.08); animation: hc-blink 2.4s ease-in-out infinite; }
@keyframes hc-blink { 50% { opacity: .35; } }
/* Primary: black pill with a white arrow disc and a light sweep. */
.hero .hc-main { height: 58px; padding: 0 8px 0 26px; gap: 16px; font-size: 1.06rem; position: relative; overflow: hidden;
  box-shadow: 0 18px 36px -14px rgba(9,9,11,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.hero .hc-main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); animation: hc-sweep 4.5s ease-in-out infinite 1.6s; }
@keyframes hc-sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.hc-ic { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #09090b; display: grid; place-items: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hc-ic svg { width: 18px; height: 18px; }
.hero .hc-main:hover .hc-ic { transform: translateX(3px) rotate(-45deg); }
/* Secondary: liquid glass with a play disc. */
.hero .hc-glass { height: 58px; padding: 0 24px 0 8px; gap: 12px; font-size: 1.06rem; color: #09090b; border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(244,247,252,.35) 55%, rgba(222,230,244,.55));
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(16,24,40,.1), 0 14px 30px -14px rgba(16,24,40,.3), inset 0 1.5px 0 #fff, inset 0 -8px 14px -10px rgba(110,130,175,.4); }
.hero .hc-glass:hover { background: rgba(255,255,255,.95); }
.hc-play { width: 42px; height: 42px; border-radius: 50%; background: #09090b; color: #fff; display: grid; place-items: center; }
.hc-play svg { width: 16px; height: 16px; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .hero .hc-main::after, .hc-dot { animation: none; } }

/* Horizon at the bottom: the dark arc from hero-1 comes back, the video wall runs out behind it. */
html[data-hero] .hero .arc:not(.glow) { display: block; z-index: 3; top: calc(100% - 120px); width: 190%; height: 1150px; pointer-events: none;
  background: radial-gradient(closest-side, #fff 0%, #fff 93.2%, #f2f2f3 95%, #1a1a1f 97.6%, #050507 99.1%, rgba(5,5,7,0) 100%);
  filter: drop-shadow(0 -18px 34px rgba(9,9,11,.16)); }
@media (max-width: 899px) { html[data-hero] .hero .arc:not(.glow) { top: calc(100% - 56px); width: 260%; height: 900px; } }
.hero.hv-off .hv-col { animation-play-state: paused; }
.hv-col { will-change: transform; }

/* ---------- Intro: one fast, smooth sequence on load (transform/opacity only, ~1.3 s) ---------- */
@keyframes in-up { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes in-down { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: none; } }
@keyframes in-pop { 0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.9); } 70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes in-wall { from { opacity: 0; transform: translate3d(14%, 0, 0) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes in-arc { from { opacity: 0; transform: translate(-50%, 90px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes in-word { 0% { opacity: 0; transform: translate3d(0, .55em, 0) rotate(4deg); filter: blur(10px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-hero] .bar { animation: in-fade .6s ease-out both .05s; }
html[data-hero] .hero .eyebrow-link { animation: in-up .7s cubic-bezier(.16,1,.3,1) both .1s; }
html[data-hero] .hv-w { animation: in-word .75s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.18s + var(--i) * .045s); filter: none; transform-origin: 0 100%; }
html[data-hero] .hero .subtitle { animation: in-up .8s cubic-bezier(.16,1,.3,1) both .55s; }
html[data-hero] .hero .subtitle .nl:last-child { animation: in-up .8s cubic-bezier(.16,1,.3,1) both .65s; }
html[data-hero] .hero .cta-row { animation: none; }
html[data-hero] .hero .cta-row > * { animation: in-pop .7s cubic-bezier(.16,1,.3,1) both .75s; }
html[data-hero] .hero .cta-row > * + * { animation-delay: .83s; }
html[data-hero] .hero .proof { animation: none; }
html[data-hero] .hero .proof li { animation: in-up .6s cubic-bezier(.16,1,.3,1) both; }
html[data-hero] .hero .proof li:nth-child(1) { animation-delay: .95s; }
html[data-hero] .hero .proof li:nth-child(2) { animation-delay: 1.02s; }
html[data-hero] .hero .proof li:nth-child(3) { animation-delay: 1.09s; }
html[data-hero] .hero .gr-slot { animation: in-up .6s cubic-bezier(.16,1,.3,1) both 1.15s; }
html[data-hero] .hv-wall { animation: in-wall 1.4s cubic-bezier(.16,1,.3,1) both .1s; }
html[data-hero] .hero .arc:not(.glow) { animation: in-arc 1.2s cubic-bezier(.16,1,.3,1) both .35s; }
@media (prefers-reduced-motion: reduce) {
  html[data-hero] .bar, html[data-hero] .hero *, html[data-hero] .hv-wall { animation: none !important; opacity: 1 !important; }
}
/* Hide the headline until it is split into words, so it never flashes before the intro. */
html[data-hero] .hero h1:not(.hv-split) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html[data-hero] .hero h1:not(.hv-split) { opacity: 1; } }
/* Long single-sentence headline and paragraph subline. */
@media (min-width: 900px) { html[data-hero] .hero h1.hv-wrap { white-space: normal; max-width: 15ch; font-size: clamp(2.6rem, 5vw, 5.2rem); } }
html[data-hero] .hero h1.hv-wrap { text-wrap: balance; }
html[data-hero] .hero .subtitle { max-width: 40rem; }
@media (min-width: 900px) { html[data-hero] .hero .subtitle:not(:has(.nl)) { max-width: 40rem; } }
html[data-hero] .hero .eyebrow { max-width: min(100%, 40rem); }
@media (min-width: 900px) { html[data-hero] .hero h1.hv-wrap { max-width: 17ch; font-size: clamp(2.6rem, 4.6vw, 4.8rem); line-height: 1.06; } }
/* Headline: one soft diagonal from deep black to grey over all lines. */
html[data-hero] .hero h1 { --hv-grad: linear-gradient(115deg, #09090b 0%, #18181b 38%, #52525b 78%, #8e8e96 100%); }
html[data-hero] .hv-w { background-repeat: no-repeat; }
/* Headline max 3 lines, subline 4 to 5 lines with a break and bold key words. */
@media (min-width: 900px) {
  html[data-hero] .hero h1.hv-wrap { max-width: 22ch; font-size: clamp(2.6rem, 4.4vw, 4.6rem); }
  html[data-hero] .hero .subtitle { max-width: 46rem; }
}
html[data-hero] .hero .subtitle .nl { display: block; white-space: normal; }
html[data-hero] .hero .subtitle .nl + .nl { margin-top: 10px; }
html[data-hero] .hero .subtitle b { color: #09090b; font-weight: 600; }
@media (min-width: 900px) { html[data-hero] .hero h1.hv-wrap { max-width: 24ch; font-size: clamp(2.6rem, 4.3vw, 4.5rem); } }
/* Headline: noble silver, partly see-through, one continuous diagonal over all lines. */
html[data-hero] .hero h1 { --hv-grad: linear-gradient(118deg, #09090b 0%, #18181b 26%, rgba(39,39,42,.82) 44%, rgba(113,113,122,.62) 62%, rgba(161,161,170,.5) 76%, rgba(63,63,70,.78) 90%, rgba(24,24,27,.9) 100%); }
/* Headline: barely see-through on the right, subtle silver sheen top to bottom inside every letter. */
html[data-hero] .hero h1 {
  --hv-grad: linear-gradient(118deg, #09090b 0%, #1c1c20 34%, #34343a 58%, rgba(63,63,70,.92) 80%, rgba(52,52,58,.94) 100%);
  --hv-shine: linear-gradient(180deg, rgba(212,212,216,0) 30%, rgba(212,212,216,.34) 78%, rgba(228,228,231,.42) 100%); }
html[data-hero] .hv-w { background-image: var(--hv-shine), var(--hv-grad); background-repeat: no-repeat; }
/* Headline, refined: lighter weight, tighter tracking, a fine highlight edge and soft depth, stronger silver inside the letters. */
html[data-hero] .hero h1 { font-weight: 560; letter-spacing: -.058em;
  --hv-grad: linear-gradient(118deg, #050506 0%, #18181b 32%, #2e2e33 56%, rgba(58,58,64,.94) 80%, rgba(46,46,52,.95) 100%);
  --hv-shine: linear-gradient(180deg, rgba(212,212,216,0) 26%, rgba(212,212,216,.40) 74%, rgba(235,235,238,.52) 100%); }
/* Stronger veil over the video wall. */
html[data-hero] .hv-shade { background: linear-gradient(to right, var(--hv-bg) 0%, rgba(var(--hv-rgb), .86) 32%, rgba(var(--hv-rgb), .74) 100%) !important; }