/* === v1.1.26.22 — Hero anti-clip + smooth cross-browser float + offset layout === */

/* Tighter but safe line-height; keep reveal possible */
h1.hero-title{
  line-height: 1.06 !important;
  text-align: left;
}

/* Wrap per line: allow reveal while preserving descenders */
h1.hero-title .line{
  display:block;
  overflow:hidden;                 /* needed for reveal */
  padding-bottom:.16em;            /* room for y,p,g,j */
  opacity:0;
  transform: translate3d(0,14px,0);
  animation: heroFixReveal .80s cubic-bezier(.25,.7,.2,1) forwards,
             heroFixFloat 11s cubic-bezier(.45,.05,.55,.95) calc(.9s + var(--float-delay,0s)) infinite;
  will-change: transform, opacity;
}

/* Inner span: hold horizontal offsets and GPU hint */
h1.hero-title .line > .float{
  display:inline-block;
  transform: translate3d(var(--x,0),0,0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Staggered left/right offsets for a poster-like look */
h1.hero-title .line:nth-child(1){ --float-delay: .00s; --x: -1.2vw; }
h1.hero-title .line:nth-child(2){ --float-delay: .18s; --x:  0vw;   }
h1.hero-title .line:nth-child(3){ --float-delay: .36s; --x:  1.2vw; }

/* Smooth float */
@keyframes heroFixFloat{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-10px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Reveal up */
@keyframes heroFixReveal{
  0%   { opacity:0; transform: translate3d(0,14px,0) scale(0.998); }
  100% { opacity:1; transform: translate3d(0,0,0)   scale(1); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  h1.hero-title .line{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* Mobile: center and remove offsets */
@media (max-width: 640px){
  h1.hero-title{ text-align:center; }
  h1.hero-title .line:nth-child(1),
  h1.hero-title .line:nth-child(2),
  h1.hero-title .line:nth-child(3){ --x: 0vw; }
}


/* === v1.1.26.22 — Scroll fix for desktop === */
@media (min-width:1024px){
  html, body { overflow-x: hidden; overflow-y: auto; }
}


/* === v1.1.26.22 — Center container, Chrome animation force, no footer overscroll === */

/* Center the whole content block but keep text left */
.hero .center{
  max-width: 1200px;
  margin: 0 auto;
}

/* Make sure animations run even if earlier CSS tried to disable them */
h1.hero-title .line{
  animation: heroFixReveal .80s cubic-bezier(.25,.7,.2,1) forwards,
             heroFixFloat 11s cubic-bezier(.45,.05,.55,.95) calc(.9s + var(--float-delay,0s)) infinite !important;
}
h1.hero-title .line > .float{
  transform: translate3d(var(--x,0),0,0) !important;
}

/* Prevent background glow from creating extra page height */
.hero{ overflow: hidden; }


/* === v1.1.26.22 — Desktop: no left-cut, centered cluster, refined offsets === */

/* Center the cluster horizontally even when inner text is left-aligned */
.hero .center{
  display: grid;
  justify-items: center;
}

/* Keep the h1 itself left aligned within the centered cluster */
h1.hero-title{ text-align: left; }

/* Allow negative X offsets without clipping the first letter */
@media (min-width: 768px){
  h1.hero-title .line{
    /* provide safe gutters while keeping the same visual width */
    padding-inline: 1.6vw;
    margin-inline: -1.6vw;
  }
  /* Slightly smaller offsets so it feels bold but not cropped */
  h1.hero-title .line:nth-child(1){ --x: -0.8vw; }
  h1.hero-title .line:nth-child(2){ --x:  0vw; }
  h1.hero-title .line:nth-child(3){ --x:  0.8vw; }
}


/* === v1.1.26.22 — No left cut, real centered block, line offsets via text-indent === */

/* Center the cluster and the h1 itself */
.hero .center{ max-width:1200px; margin:0 auto; }
h1.hero-title{ margin-left:auto; margin-right:auto; text-align:left; }

/* Reveal-safe wrapper with generous negative clip so nothing is cut on either side */
h1.hero-title .line{
  overflow:hidden;
  /* expand visible area so negative indents/offsets don't clip first/last letter */
  clip-path: inset(-0.35em -2em -0.35em -2em);
  padding: 0.02em 0; /* tiny buffer for descenders */
}

/* Apply poster look WITHOUT changing the block width: use text-indent */
h1.hero-title .line{ text-indent: var(--indent,0); }
h1.hero-title .line:nth-child(1){ --indent: -0.35em; }
h1.hero-title .line:nth-child(2){ --indent:  0em; }
h1.hero-title .line:nth-child(3){ --indent:  0.35em; }

/* Remove previous translateX on inner span to avoid shifting centering */
h1.hero-title .line > .float{
  transform: translate3d(0,0,0) !important;
}


/* === v1.1.26.22 — Centering polish, button size restore, no clipping === */

/* Use block container instead of grid to avoid side-effects on child sizing */
.hero .center{
  display:block !important;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
h1.hero-title{ text-align:left; margin-left:auto; margin-right:auto; }

/* Ensure CTA buttons keep their compact height */
.hero .cta .btn{ line-height:1; padding:12px 18px; }

/* First-line negative indent: safer magnitude and remove earlier paddings/margins */
h1.hero-title .line{
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  clip-path: inset(-0.4em -2em -0.4em -2em);
  text-indent: var(--indent, 0);
}
h1.hero-title .line:nth-child(1){ --indent: -0.25em; }
h1.hero-title .line:nth-child(2){ --indent:  0em; }
h1.hero-title .line:nth-child(3){ --indent:  0.25em; }


/* === v1.1.26.22 — Prevent internal wrap + safe gutters so first letter never hides === */

/* Do not allow the line content to wrap to a second line */
h1.hero-title .line > .float{ white-space: nowrap; }

/* Match negative indent with internal gutter so nothing gets hidden by overflow */
h1.hero-title .line{ --gutter: 0.35em; padding-left: var(--gutter); margin-left: calc(-1 * var(--gutter)); }
h1.hero-title .line:nth-child(1){ --indent: -0.25em; }
h1.hero-title .line:nth-child(2){ --indent:  0em; }
h1.hero-title .line:nth-child(3){ --indent:  0.25em; }


/* === v1.1.26.22 — Final anti-clip: ascenders/descenders + left gutter, reveal w/o overflow === */

/* Slightly taller line-height helps p/y; still tight */
h1.hero-title{ line-height: 1.08 !important; }

/* NEVER clip the text during float */
h1.hero-title .line{
  overflow: visible !important;                 /* reveal works with opacity+translate */
  clip-path: inset(-0.55em -3em -0.55em -3em) !important;  /* huge safe area */
  padding-bottom: .18em !important;             /* room for descenders */
  --gutter: 0.45em;
  padding-left: var(--gutter) !important;       /* left gutter to protect first letter */
  margin-left: calc(-1 * var(--gutter)) !important;
  text-indent: var(--indent, 0) !important;     /* poster indent */
  white-space: nowrap !important;               /* never wrap */
}

/* Keep the inner span GPU-promoted */
h1.hero-title .line > .float{
  transform: translate3d(0,0,0) !important;
  will-change: transform, opacity;
}

/* Indent amounts (poster look) */
h1.hero-title .line:nth-child(1){ --indent: -0.25em; }
h1.hero-title .line:nth-child(2){ --indent:  0em; }
h1.hero-title .line:nth-child(3){ --indent:  0.25em; }


/* === v1.1.26.22 — Tighter line-height without clipping === */
h1.hero-title{ line-height: 1.05 !important; letter-spacing: -0.005em; }
h1.hero-title .line{
  padding-top: .04em !important;
  padding-bottom: .14em !important;         /* small buffer for p/y */
  clip-path: inset(-0.6em -3em -0.6em -3em) !important; /* keep big safety area */
}


/* === v1.1.26.22 — line-height:1 + independent harmonic floats === */

/* Tightest safe line height */
h1.hero-title{ line-height: 1 !important; }

/* Three slightly different float paths (left, center, right) */
@keyframes heroFloatL {
  0%   { transform: translate3d(0px, 0px, 0); }
  25%  { transform: translate3d(-1.0px, -8px, 0); }
  50%  { transform: translate3d(-1.6px, -12px, 0); }
  75%  { transform: translate3d(-0.8px, -7px, 0); }
  100% { transform: translate3d(0px, 0px, 0); }
}
@keyframes heroFloatC {
  0%   { transform: translate3d(0px, 0px, 0); }
  25%  { transform: translate3d(0.6px, -9px, 0); }
  50%  { transform: translate3d(0.0px, -13px, 0); }
  75%  { transform: translate3d(0.6px, -8px, 0); }
  100% { transform: translate3d(0px, 0px, 0); }
}
@keyframes heroFloatR {
  0%   { transform: translate3d(0px, 0px, 0); }
  25%  { transform: translate3d(1.0px, -8px, 0); }
  50%  { transform: translate3d(1.6px, -12px, 0); }
  75%  { transform: translate3d(0.8px, -7px, 0); }
  100% { transform: translate3d(0px, 0px, 0); }
}

/* Assign a unique float path + duration + phase to each line */
h1.hero-title .line{
  /* keep reveal */
  animation:
    heroFixReveal .80s cubic-bezier(.25,.7,.2,1) forwards,
    var(--floatKey, heroFloatC) var(--dur, 11s) cubic-bezier(.45,.05,.55,.95) calc(.9s + var(--float-delay,0s)) infinite !important;
}
h1.hero-title .line:nth-child(1){ --floatKey: heroFloatL; --dur: 11.5s; --float-delay: .00s; }
h1.hero-title .line:nth-child(2){ --floatKey: heroFloatC; --dur: 10.5s; --float-delay: .18s; }
h1.hero-title .line:nth-child(3){ --floatKey: heroFloatR; --dur: 12.0s; --float-delay: .36s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  h1.hero-title .line{ animation: none !important; opacity:1 !important; transform:none !important; }
}


/* === v1.1.26.22 — Elliptical float (x+y), subtle rotation & scale, line-specific tuning === */

/* Parametric keyframes using CSS variables for amplitude */
@keyframes heroFloatXY {
  0%   { transform: translate3d( calc(var(--ax,0px) * 0.00),  calc(var(--ay,0px) * 0.00), 0) rotate(var(--rot0,0deg)) scale(var(--s0,1)); }
  12.5%{ transform: translate3d( calc(var(--ax,0px) * 0.50),  calc(var(--ay,0px) * -0.35), 0) rotate(var(--rot1,0.02deg)) scale(var(--s1,1.003)); }
  25%  { transform: translate3d( calc(var(--ax,0px) * 1.00),  calc(var(--ay,0px) * -0.70), 0) rotate(var(--rot2,0.04deg)) scale(var(--s2,1.006)); }
  37.5%{ transform: translate3d( calc(var(--ax,0px) * 0.50),  calc(var(--ay,0px) * -0.35), 0) rotate(var(--rot3,0.02deg)) scale(var(--s3,1.003)); }
  50%  { transform: translate3d( calc(var(--ax,0px) * 0.00),  calc(var(--ay,0px) * 0.00), 0) rotate(var(--rot4,0deg)) scale(var(--s4,1)); }
  62.5%{ transform: translate3d( calc(var(--ax,0px) * -0.50), calc(var(--ay,0px) * 0.35), 0) rotate(var(--rot5,-0.02deg)) scale(var(--s5,0.997)); }
  75%  { transform: translate3d( calc(var(--ax,0px) * -1.00), calc(var(--ay,0px) * 0.70), 0) rotate(var(--rot6,-0.04deg)) scale(var(--s6,0.994)); }
  87.5%{ transform: translate3d( calc(var(--ax,0px) * -0.50), calc(var(--ay,0px) * 0.35), 0) rotate(var(--rot7,-0.02deg)) scale(var(--s7,0.997)); }
  100% { transform: translate3d( calc(var(--ax,0px) * 0.00),  calc(var(--ay,0px) * 0.00), 0) rotate(var(--rot0,0deg)) scale(var(--s0,1)); }
}

/* Assign harmonious but distinct motions per line */
h1.hero-title .line{
  --ax: 1.6px;    /* horizontal amplitude */
  --ay: 14px;     /* vertical amplitude */
  --dur: 11s;
  animation:
    heroFixReveal .80s cubic-bezier(.25,.7,.2,1) forwards,
    heroFloatXY var(--dur) cubic-bezier(.45,.05,.55,.95) calc(.9s + var(--float-delay,0s)) infinite !important;
}

/* Line-specific variations: amplitude, duration, and phase */
h1.hero-title .line:nth-child(1){
  --ax: 1.8px; --ay: 12px; --dur: 11.5s; --float-delay: .00s;
}
h1.hero-title .line:nth-child(2){
  --ax: 1.2px; --ay: 15px; --dur: 10.75s; --float-delay: .20s;
}
h1.hero-title .line:nth-child(3){
  --ax: 2.0px; --ay: 13px; --dur: 12.25s; --float-delay: .42s;
}

/* Reduced motion still respected */
@media (prefers-reduced-motion: reduce){
  h1.hero-title .line{ animation: none !important; opacity:1 !important; transform:none !important; }
}


/* === v1.1.26.22 — Asymmetric poster offsets (less staircase) === */
/* Desktop-only offset tuning; mobile stays neutral */
@media (min-width: 768px){
  h1.hero-title .line:nth-child(1){ --indent:  0em !important; }
  h1.hero-title .line:nth-child(2){ --indent:  0.45em !important; }  /* move "To Screen." right */
  h1.hero-title .line:nth-child(3){ --indent: -0.15em !important; }  /* move "And Beyond." slightly left */
}


/* === v1.1.26.22 — Balanced poster offsets (no staircase, subtle weight) === */
@media (min-width: 768px){
  /* Slight left on line 1 anchors the block */
  h1.hero-title .line:nth-child(1){ --indent: -0.15em !important; }
  /* Line 2 moves right a bit more to avoid vertical alignment with line 1 */
  h1.hero-title .line:nth-child(2){ --indent:  0.30em !important; }
  /* Line 3 sits just a touch to the right of center to balance visual mass */
  h1.hero-title .line:nth-child(3){ --indent:  0.06em !important; }
}


/* === v1.1.26.22 — Ultra-smooth float (linear timing + sine-like path, no bouncy feel) === */

/* New XY float with more waypoints and linear timing for constant speed */
@keyframes heroFloatXY_smooth {
  0%   { transform: translate3d( 0.00px,   0.00px, 0) rotate(0.00deg) scale(1); }
  10%  { transform: translate3d( 0.30px,  -1.40px, 0) rotate(0.004deg) scale(1.001); }
  20%  { transform: translate3d( 0.80px,  -3.80px, 0) rotate(0.006deg) scale(1.002); }
  30%  { transform: translate3d( 1.20px,  -6.80px, 0) rotate(0.008deg) scale(1.003); }
  40%  { transform: translate3d( 1.40px,  -9.50px, 0) rotate(0.006deg) scale(1.002); }
  50%  { transform: translate3d( 1.20px, -12.00px, 0) rotate(0.000deg) scale(1.000); }
  60%  { transform: translate3d( 0.80px,  -9.50px, 0) rotate(-0.006deg) scale(0.999); }
  70%  { transform: translate3d( 0.30px,  -6.80px, 0) rotate(-0.008deg) scale(0.998); }
  80%  { transform: translate3d(-0.20px,  -3.80px, 0) rotate(-0.006deg) scale(0.999); }
  90%  { transform: translate3d(-0.40px,  -1.40px, 0) rotate(-0.004deg) scale(1.000); }
  100% { transform: translate3d( 0.00px,   0.00px, 0) rotate(0.000deg) scale(1); }
}

/* Apply smooth animation with linear timing; keep reveal as before */
h1.hero-title .line{
  --ax: 1.6px; --ay: 14px;
  --dur: 14s;  /* slightly longer, calmer */
  animation:
    heroFixReveal .80s cubic-bezier(.25,.7,.2,1) forwards,
    heroFloatXY_smooth var(--dur) linear calc(1.0s + var(--float-delay,0s)) infinite !important;
}

/* Per-line micro-variation (phase & duration) for harmony */
h1.hero-title .line:nth-child(1){ --dur: 14.5s; --float-delay: .00s; }
h1.hero-title .line:nth-child(2){ --dur: 13.5s; --float-delay: .22s; }
h1.hero-title .line:nth-child(3){ --dur: 15.0s; --float-delay: .44s; }


/* === v1.1.26.22 — Cohesive (tethered) float: shared base + small per-line micro-drift === */

/* Base path: all lines follow the same smooth XY orbit (keeps spacing cohesive) */
@keyframes heroFloatXY_base {
  0%   { transform: translate3d( 0.00px,   0.00px, 0); }
  10%  { transform: translate3d( 0.25px,  -1.2px, 0); }
  20%  { transform: translate3d( 0.70px,  -3.2px, 0); }
  30%  { transform: translate3d( 1.10px,  -5.8px, 0); }
  40%  { transform: translate3d( 1.30px,  -8.3px, 0); }
  50%  { transform: translate3d( 1.10px, -10.5px, 0); }
  60%  { transform: translate3d( 0.70px,  -8.3px, 0); }
  70%  { transform: translate3d( 0.25px,  -5.8px, 0); }
  80%  { transform: translate3d(-0.15px,  -3.2px, 0); }
  90%  { transform: translate3d(-0.35px,  -1.2px, 0); }
  100% { transform: translate3d( 0.00px,   0.00px, 0); }
}

/* Micro path: small, line-specific drift so it doesn't feel locked together */
@keyframes heroFloatXY_micro {
  0%   { transform: translate3d( 0px,  0px, 0) rotate(0deg) scale(1); }
  25%  { transform: translate3d( 0.4px,-1.2px,0) rotate(0.01deg) scale(1.001); }
  50%  { transform: translate3d( 0.0px,-1.8px,0) rotate(0deg) scale(1.000); }
  75%  { transform: translate3d(-0.4px,-1.2px,0) rotate(-0.01deg) scale(0.999); }
  100% { transform: translate3d( 0px,  0px, 0) rotate(0deg) scale(1); }
}

/* Apply: base float on the line wrapper; micro float on inner span */
h1.hero-title .line{
  animation:
    heroFixReveal .80s cubic-bezier(.25,.7,.2,1) forwards,
    heroFloatXY_base 15s linear 1.0s infinite !important;  /* shared motion */
  will-change: transform, opacity;
}
h1.hero-title .line > .float{
  display:inline-block;
  animation: heroFloatXY_micro var(--microDur, 9s) linear var(--microDelay, 0s) infinite !important;
  will-change: transform;
}

/* Subtle per-line offsets for micro float (keeps harmony, avoids divergence) */
h1.hero-title .line:nth-child(1) > .float{ --microDur: 8.8s; --microDelay: .10s; }
h1.hero-title .line:nth-child(2) > .float{ --microDur: 9.4s; --microDelay: .28s; }
h1.hero-title .line:nth-child(3) > .float{ --microDur: 10.0s; --microDelay: .46s; }


/* === v1.1.26.22 — More noticeable stagger: per-line phase, duration AND micro amplitude === */

/* Micro path now parameterized by per-line amplitudes */
@keyframes heroFloatXY_micro2 {
  0%   { transform: translate3d(  calc(var(--mx,0px)*0.00),  calc(var(--my,0px)*0.00), 0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(  calc(var(--mx,0px)*0.60),  calc(var(--my,0px)*-0.70), 0) rotate(0.01deg) scale(1.001); }
  50%  { transform: translate3d(  calc(var(--mx,0px)*0.00),  calc(var(--my,0px)*-1.00), 0) rotate(0deg) scale(1.000); }
  75%  { transform: translate3d(  calc(var(--mx,0px)*-0.60), calc(var(--my,0px)*-0.70), 0) rotate(-0.01deg) scale(0.999); }
  100% { transform: translate3d(  calc(var(--mx,0px)*0.00),  calc(var(--my,0px)*0.00), 0) rotate(0deg) scale(1); }
}

h1.hero-title .line > .float{
  animation: heroFloatXY_micro2 var(--microDur, 9s) linear var(--microDelay, 0s) infinite !important;
}

/* Give each line a distinct micro amplitude, duration and phase
   -> visibly versetzt, aber dank shared base float weiterhin kohärent */
h1.hero-title .line:nth-child(1) > .float{ --mx: 1.0px; --my: 1.6px; --microDur: 8.5s; --microDelay: .12s; }
h1.hero-title .line:nth-child(2) > .float{ --mx: 1.6px; --my: 2.2px; --microDur: 9.8s; --microDelay: .36s; }
h1.hero-title .line:nth-child(3) > .float{ --mx: 1.3px; --my: 1.9px; --microDur:10.8s; --microDelay: .58s; }




/* === v1.27.2 — Button-like light sweep on .brand-grad (quick pass every ~6s) === */
/* We render two background layers on the text: the base brand gradient (static)
   and a narrow highlight beam that moves across quickly, then idles. */
.brand-grad{
  --shine-angle: 115deg;
  --shine-w: 22%;                 /* width of the moving beam */
  --shine-color: rgba(255,255,255,.85);
  background-image:
    linear-gradient(90deg, var(--brand2), var(--brand3), var(--brand)),
    linear-gradient(var(--shine-angle),
                    transparent 0%,
                    transparent calc(50% - 18%),
                    var(--shine-color) 50%,
                    transparent calc(50% + 18%),
                    transparent 100%);
  background-size: 100% 100%, var(--shine-w) 100%;
  background-position: 0 0, -35% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: brandTextSweep 6s linear infinite;
  will-change: background-position;
}

/* Quick sweep at the beginning, then idle for the remainder */
@keyframes brandTextSweep{
  /* Non-linear speed: slow-in → fast middle → slow-out, then idle */
  0%   { background-position: 0 0, -35% 0; }
  6%   { background-position: 0 0, -20% 0; }   /* very slow start */
  12%  { background-position: 0 0,  10% 0; }   /* speed up */
  16%  { background-position: 0 0,  60% 0; }   /* fastest */
  20%  { background-position: 0 0, 135% 0; }   /* end of sweep */
  100% { background-position: 0 0, 135% 0; }   /* idle till next cycle */
}
  12%  { background-position: 0 0, 135% 0; }  /* fast pass across */
  100% { background-position: 0 0, 135% 0; }  /* hold (idle) until next cycle */
}

/* Prefers-reduced-motion: keep static brand gradient */
@media (prefers-reduced-motion: reduce){
  .brand-grad{ animation: none !important; background-position: 0 0, -35% 0; }
}