/* Scroll motion layer. Only active when main.js adds .anim (JS on, motion allowed). */

/* Reading progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none;box-shadow:0 0 12px rgba(200,255,46,.6)}

/* Image label: says in plain words what the graphic shows */
.photo-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 32px);padding:9px 14px 9px 12px;border-radius:999px;background:rgba(10,11,13,.82);border:1px solid rgba(255,255,255,.12);color:#fff;font:600 16.9px/1.2 var(--f-head);letter-spacing:.01em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.photo-tag i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(200,255,46,.6);animation:tag-pulse 2s ease-out infinite}
@keyframes tag-pulse{0%{box-shadow:0 0 0 0 rgba(200,255,46,.6)}70%,100%{box-shadow:0 0 0 9px rgba(200,255,46,0)}}
.anim .photo.rv .photo-tag{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s ease .55s,transform .7s cubic-bezier(.2,.7,.2,1) .55s}
.anim .photo.rv.in .photo-tag{opacity:1;transform:none}

/* Parallax: separate translate/scale properties so they stack with the reveal transform */
.anim .photo img{scale:1.12;translate:0 var(--py,0px);will-change:translate}
/* Hero graphic is shown whole, so no parallax overscan there */
.anim .home-hero-photo img{scale:1;translate:none}

/* Headings: words rise out of a mask */
.sw .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.sw .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--wi,0) * 45ms)}
.sw.in .w>span{transform:none}

/* Stronger reveals */
.anim .card.rv{transform:translateY(44px) scale(.96);filter:blur(6px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .8s ease;transition-delay:var(--d,0s)}
.anim .card.rv.in{transform:none;filter:none}
.anim .pain-item.rv{transform:translateX(-40px)}
/* Elements waiting to slide in must never widen the page (Safari counts them) */
.sec,.sec-sm{overflow-x:clip}
.anim .pain-item.rv.in{transform:none}
.anim .faq details.rv{transform:translateY(18px)}
.anim .cta-band.rv{transform:translateY(40px) scale(.97)}
.anim .cta-band.rv.in{transform:none}
.anim .head.rv .eyebrow::before{transform:scale(0) rotate(-90deg);transition:transform .6s cubic-bezier(.16,1,.3,1) .25s}
.anim .head.rv.in .eyebrow::before{transform:none}

/* Process steps: a lime line fills as the visitor scrolls through them */
.steps>div::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--fill,0));box-shadow:0 0 10px rgba(200,255,46,.5)}
.paper .steps>div::after{background:#8fbf00;box-shadow:none}
.anim .steps>div::before{transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
.anim .steps>div.lit::before{transform:scale(1.25);transform-origin:0 50%}

@media (max-width:680px){
  .photo-tag{left:10px;bottom:10px;font-size:14px;padding:7px 11px 7px 10px}
  /* Phones: readable headline sizes */
  h1{font-size:2.15rem}
  h2,body.home #leistungen h2{font-size:1.72rem}
  h3{font-size:1.2rem}
  /* Phones: show graphics whole (all are 16:9, the hero is 4:3) */
  .photo,.photo.wide,body.home .photo.home-why-photo,body.home .photo.home-process-photo,body.home #faq .photo.home-faq-photo{aspect-ratio:16/9;height:auto;max-height:none}
  body.home .photo.home-hero-photo{aspect-ratio:4/3;height:auto;max-height:none}
  .photo img,body.home .photo img{object-position:center}
  .anim .photo img{scale:1;translate:none}
  /* Phones: hero network fully visible */
  body.home .hero-network{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){.scroll-progress{display:none}.photo-tag i{animation:none}.sw .w>span{transform:none!important}.anim .photo img{translate:none}.anim .card.rv{filter:none!important}}

/* Tech stack as black logos */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stack ul{align-items:center;gap:18px 38px}
.stack li{display:inline-flex;align-items:center;gap:7px;color:var(--text);font:600 19px/1 var(--f-head);}
.stack li img{display:block;height:calc(26px * var(--s,1));width:auto;filter:invert(1)}
.stack li.tight{gap:1px}
.stack li>span:not(.sr-only){font-size:22px}
@media (max-width:680px){.stack ul{gap:12px 22px}.stack li img{height:calc(19px * var(--s,1))}.stack li>span:not(.sr-only){font-size:16px}}

/* Logo band runs in one line (JS duplicates the list for a seamless loop) */
.stack .marquee{position:relative;flex:1;min-width:0;overflow:hidden;contain:paint;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.stack .marquee ul{flex-wrap:nowrap;width:max-content;gap:0 46px;padding-right:46px;animation:stack-run 48s linear infinite}
.stack .marquee:hover ul{animation-play-state:paused}
@keyframes stack-run{to{transform:translateX(-50%)}}

/* Mobile menu: open below the header (the header's blur would otherwise trap a fixed menu) */
@media (max-width:1020px){
  .nav{position:absolute;inset:auto;top:100%;left:0;right:0;height:calc(100vh - 72px);height:calc(100dvh - 72px)}
}

@media (max-width:680px){
  /* Sticky CTA only once the hero button has scrolled away */
  .mcta{box-shadow:0 4px 12px rgba(18,19,22,.16);transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s}
  .mcta-wait .mcta{transform:translateY(160%);opacity:0;pointer-events:none}
  /* Hero network stays clear of the text and frames the graphic below it */
  body.home .hero-network{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 60%,#000 78%);mask-image:linear-gradient(180deg,transparent 0,transparent 60%,#000 78%)}
  .stack .wrap{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px}
  .stack .marquee ul{gap:0 30px;padding-right:30px;animation-duration:36s}
  /* Comparison table as stacked cards, no sideways scrolling */
  .tbl-wrap{overflow:visible;border:0}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;background:var(--ink-2)}
  .paper .tbl tr{border-color:var(--paper-2);background:#fff}
  .tbl td{border:0!important;padding:5px 0!important;display:flex;justify-content:space-between;gap:16px;text-align:right;font-size:16px}
  .tbl td::before{content:attr(data-label);text-align:left;color:var(--muted);font-weight:500}
  .paper .tbl td::before{color:var(--paper-muted)}
  .tbl td:first-child{display:block;text-align:left;font:600 18px/1.3 var(--f-head);color:var(--text)!important;padding-bottom:8px!important}
  .paper .tbl td:first-child{color:var(--paper-ink)!important}
  .tbl td:first-child::before{content:none}
  .tbl td.us{background:none!important;color:var(--text);font-weight:600}
  .paper .tbl td.us{color:var(--paper-ink)}
  .tbl td.us::before{color:var(--acc);font-weight:600}
  .paper .tbl td.us::before{color:#3d4a00}
}