/* szewald.de - scroll motion layer (14 Oct 2026, Leo: "more scrolling animations, more like a professional tech site").
   Native scroll-driven animations (run off the main thread); browsers without them keep the normal .rv reveals.
   Uses the individual translate/scale properties so nothing fights the existing transform-based effects.
   Everything here is off under prefers-reduced-motion. */

/* faint technical grid behind the heroes (static) */
.home-hero,.l-hero{isolation:isolate}
.home-hero::before,.l-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),
                   linear-gradient(to bottom,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:radial-gradient(70% 80% at 72% 45%,#000 30%,transparent 78%);mask-image:radial-gradient(70% 80% at 72% 45%,#000 30%,transparent 78%)}
.l-hero{position:relative}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){

    /* 1. reading progress: a thin green line under the header */
    .hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc1);
      transform-origin:0 50%;transform:scaleX(0);animation:sz-progress linear both;animation-timeline:scroll(root)}

    /* 2. home hero: the 3D scene drifts back and settles as you scroll away */
    .home-hero .dio{animation:sz-hero-out linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .home-hero .hero-grid2>div:first-child{animation:sz-hero-text linear both;animation-timeline:scroll(root);animation-range:0 90vh}

    /* 3. the two offer cards rise and settle one after the other */
    .offers-sec .spot{animation:sz-settle linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    .offers-sec .spot.lag{animation-range:entry 12% cover 40%}

    /* 4. dark sections open from a rounded card to full width */
    .contact,.sec.price{animation:sz-open linear both;animation-timeline:view();animation-range:entry 0% entry 85%}

    /* 5. headings light up word by word (words wrapped by scroll.js) */
    .sec-h.lit{view-timeline:--sz-h block}
    .sec-h.lit .lw{animation:sz-lit linear both;animation-timeline:--sz-h}
  }
}

/* 6. screenshots open up from a smaller window (fires once, scroll.js adds .on) */
@media (prefers-reduced-motion:no-preference){
  html.sx .clipr{clip-path:inset(9% 7% 9% 7% round 14px);transition:clip-path 900ms var(--ease-in-out)}
  html.sx .clipr img{scale:1.08;transition:scale 1200ms var(--ease-out)}
  html.sx .clipr.on{clip-path:inset(0 0 0 0 round 0)}
  html.sx .clipr.on img{scale:1}
}

@keyframes sz-progress{to{transform:scaleX(1)}}
@keyframes sz-hero-out{to{translate:0 90px;scale:.93}}
@keyframes sz-hero-text{to{translate:0 -36px}}
@keyframes sz-settle{from{translate:0 80px;scale:.95}to{translate:0 0;scale:1}}
@keyframes sz-open{from{clip-path:inset(0 4% 0 4% round 36px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes sz-lit{from{opacity:.16}to{opacity:1}}