/* werkier.de – Animationen (DE + PL Startseite)
 * Alles hängt an html.motion. Die Klasse setzt ein Inline-Skript im <head>,
 * nur wenn JS läuft und keine reduzierte Bewegung gewünscht ist.
 * Ohne JS oder mit prefers-reduced-motion bleibt alles statisch sichtbar.
 */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}

/* Hero: gestaffelte Sequenz ab dem ersten Frame */
@keyframes mo-rise{from{opacity:0;transform:translateY(32px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes mo-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-zoom{from{transform:scale(1.18)}to{transform:none}}
html.motion .hero .eyebrow{animation:mo-rise .9s var(--ease-out) both}
html.motion .hero h1{animation:mo-rise 1.1s var(--ease-out) .1s both}
html.motion .hero .name{animation:mo-rise .9s var(--ease-out) .3s both}
html.motion .hero .intro{animation:mo-rise .9s var(--ease-out) .42s both}
html.motion .hero .cta-row{animation:mo-rise .9s var(--ease-out) .56s both}
html.motion .hero .facts{animation:mo-rise .9s var(--ease-out) .7s both}
html.motion .portrait{animation:mo-reveal 1.4s var(--ease-out) .15s both}
html.motion .portrait img{animation:mo-zoom 1.8s var(--ease-out) .15s both}

/* Abschnitte und Karten beim Scrollen (Klassen setzt motion.js) */
html.motion .mo{opacity:0;transform:translateY(44px);filter:blur(6px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:var(--mo-delay,0ms)}
html.motion .mo.mo-in{opacity:1;transform:none;filter:none}

/* Überschriften: Akzentlinie zieht sich unter dem Eyebrow auf */
html.motion .eyebrow.mo{position:relative}
html.motion .eyebrow.mo::after{content:"";position:absolute;left:0;bottom:-6px;width:48px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
html.motion .eyebrow.mo.mo-in::after{animation:mo-line .9s var(--ease-out) .25s both}

/* Event-Fotos: Bild zoomt beim Einblenden sanft zurück */
.event > a{display:block;overflow:hidden}
html.motion .event.mo img{transform:scale(1.15);transition:transform 1.6s var(--ease-out)}
html.motion .event.mo.mo-in img{transform:none}

/* Hover-Effekte, nur auf Geräten mit Maus */
@media (hover:hover){
  .card,.price,.step,.event,blockquote{transition:transform .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
  .card:hover,.price:hover,.step:hover,blockquote:hover{transform:translateY(-6px);border-color:rgba(227,32,88,.55);box-shadow:0 22px 44px -20px rgba(0,0,0,.7)}
  .event:hover{transform:translateY(-6px);box-shadow:0 22px 44px -20px rgba(0,0,0,.7)}
  html .event:hover img,html.motion .event.mo.mo-in:hover img{transform:scale(1.06);transition:transform .9s var(--ease-out)}
  .btn{transition:transform .3s var(--ease-out),opacity .3s var(--ease-out),box-shadow .3s var(--ease-out)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(227,32,88,.8)}
  .btn-ghost:hover{box-shadow:none;border-color:var(--muted)}
  .portrait img{transition:transform 1.2s var(--ease-out)}
  .portrait:hover img{transform:scale(1.04)}
  html.motion .mo.mo-in.card:hover,html.motion .mo.mo-in.price:hover,html.motion .mo.mo-in.step:hover,html.motion .mo.mo-in.event:hover,html.motion blockquote.mo.mo-in:hover{transform:translateY(-6px);transition-delay:0ms}
}

/* Hero: schwebende Lichtkugeln und Partikel (Elemente setzt motion.js) */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-orbs{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-orbs span{position:absolute;border-radius:50%;will-change:transform}
.hero-orbs .o1{width:460px;height:460px;top:-160px;right:2%;background:radial-gradient(circle at 35% 35%,rgba(227,32,88,.22),rgba(227,32,88,0) 70%);animation:orb-drift-a 18s ease-in-out infinite}
.hero-orbs .o2{width:380px;height:380px;bottom:-150px;left:-90px;background:radial-gradient(circle at 60% 40%,rgba(120,150,210,.14),rgba(120,150,210,0) 70%);animation:orb-drift-b 22s ease-in-out infinite}
.hero-orbs .o3{width:220px;height:220px;top:40%;left:44%;background:radial-gradient(circle,rgba(227,32,88,.12),rgba(227,32,88,0) 70%);animation:orb-drift-a 26s ease-in-out -8s infinite}
.hero-orbs .p{width:9px;height:9px;background:var(--accent);opacity:.6;animation:orb-float 9s ease-in-out infinite}
.hero-orbs .p.n{background:#F7F6F4;opacity:.3}
.hero-orbs .p1{top:14%;left:46%}
.hero-orbs .p2{top:74%;left:50%;width:6px;height:6px;animation-duration:11s;animation-delay:-3s}
.hero-orbs .p3{top:20%;right:3%;width:7px;height:7px;animation-duration:12s;animation-delay:-6s}
.hero-orbs .p4{bottom:12%;left:5%;width:6px;height:6px;animation-duration:10s;animation-delay:-2s}
.hero-orbs .p5{top:8%;left:9%;width:5px;height:5px;animation-duration:13s;animation-delay:-5s}
@keyframes orb-drift-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,36px) scale(1.1)}}
@keyframes orb-drift-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-34px) scale(1.08)}}
@keyframes orb-float{0%,100%{transform:translate(0,0)}33%{transform:translate(16px,-20px)}66%{transform:translate(-12px,-8px)}}
@media (max-width:760px){.hero-orbs .o1{width:280px;height:280px}.hero-orbs .o3{display:none}}

/* Leistungskarten: Linien-Icons zeichnen sich selbst */
.wk-ico{display:block;width:52px;height:52px;margin-bottom:18px}
.wk-ico svg{width:100%;height:100%;overflow:visible}
.wk-ico :is(.l,.a){fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.wk-ico .l{stroke:#CBD3E1}
.wk-ico .a{stroke:var(--accent)}
.wk-ico.is-on :is(.l,.a){animation:wk-draw .9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(.15s + var(--d,0) * .14s)}
.wk-ico .spin,.wk-ico .arrow{transform-box:fill-box;transform-origin:center}
.wk-ico.is-on .spin{animation:ai-spin 14s linear 1.4s infinite}
.wk-ico.is-on .arrow{animation:wk-arrow 4.5s cubic-bezier(.2,.8,.2,1) 1.6s infinite}
.wk-ico.is-on .pen{animation:wk-draw .9s cubic-bezier(.65,0,.35,1) .57s forwards,wk-redraw 5s ease-in-out 2s infinite}
@keyframes wk-draw{to{stroke-dashoffset:0}}
@keyframes wk-redraw{0%,10%{stroke-dashoffset:0}30%{stroke-dashoffset:1}45%,100%{stroke-dashoffset:0}}
@keyframes wk-arrow{0%,70%,100%{transform:translate(0,0)}78%{transform:translate(3px,-3px)}86%{transform:translate(0,0)}}
@keyframes ai-spin{to{transform:rotate(360deg)}}
@media (hover:hover){.card .wk-ico{transition:transform .45s var(--ease-out)}.card:hover .wk-ico{transform:translateY(-3px) scale(1.06)}}

/* Ablauf: rote Linie läuft über 01 → 02 → 03, Schritte leuchten nacheinander auf */
.steps{position:relative}
.steps::before,.steps::after{content:"";position:absolute;top:-18px;left:0;pointer-events:none}
.steps::before{width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.steps::after{width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(227,32,88,.8);opacity:0}
html.motion .steps.is-on::before{animation:proc-line 2.4s cubic-bezier(.65,0,.35,1) .2s forwards}
html.motion .steps.is-on::after{animation:proc-dot 2.4s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes proc-line{to{transform:scaleX(1)}}
@keyframes proc-dot{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
html.motion .steps .step{transition:opacity .6s ease,border-color .6s ease}
html.motion .steps:not(.is-on) .step{opacity:.35}
html.motion .steps.is-on .step:nth-child(1){transition-delay:.3s}
html.motion .steps.is-on .step:nth-child(2){transition-delay:1.1s}
html.motion .steps.is-on .step:nth-child(3){transition-delay:1.9s}
html.motion .steps.is-on .step{border-color:rgba(227,32,88,.35)}
@media (max-width:900px){.steps::before,.steps::after{display:none}}

/* Reduzierte Bewegung: nichts bewegt sich */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .card:hover,.price:hover,.step:hover,.event:hover,blockquote:hover,.btn:hover,.event:hover img,.portrait:hover img{transform:none !important}
  html .mo,html .mo img{opacity:1 !important;transform:none !important;filter:none !important}
  html .portrait{clip-path:none !important}
}