/* Startseite: mehr Bewegung und Rückmeldung (Philipp 26.10.2026: „animiere die startseite mal noch etwas um mehr motion und UX
   zu fördern“). Gilt nur ohne prefers-reduced-motion. Ohne Skript bleibt alles sichtbar: Verstecken vor dem Einblenden setzt
   start-motion.js (Klasse sm-warten), und nur für Inhalte unterhalb des ersten Bildschirms. Gemeinsames (sm-auf, Karten-Hover,
   magnetische Knöpfe, Lesefortschritt, Keyframes sm-hoch/sm-zeile/sm-bild) steht in motion.css, das jede Seite lädt. */
.sm-zeile{display:block}

@media (prefers-reduced-motion:no-preference){
  /* Hero: Text nacheinander von unten, Überschrift zeilenweise aus einer Maske */
  .sm-hero>*{animation:sm-hoch .9s cubic-bezier(.2,.7,.2,1) both}
  .sm-hero>:nth-child(1){animation-delay:.05s}
  .sm-hero>:nth-child(2){animation:none}
  .sm-hero>:nth-child(3){animation-delay:.5s}
  .sm-hero>:nth-child(4){animation-delay:.62s}
  .sm-zeile{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
  .sm-zeile>span{display:block}
  .sm-hero .sm-zeile>span{animation:sm-zeile 1s cubic-bezier(.2,.7,.2,1) both}
  .sm-hero .sm-zeile:nth-child(1)>span{animation-delay:.14s}
  .sm-hero .sm-zeile:nth-child(2)>span{animation-delay:.26s}

  /* Collage: Bilder blenden versetzt ein und folgen leicht der Maus (translate, das Schweben der Hülle bleibt) */
  .sm-collage img{animation:sm-bild 1.3s cubic-bezier(.2,.7,.2,1) both;translate:var(--sm-x,0) var(--sm-y,0);transition:translate .8s cubic-bezier(.2,.7,.2,1)}
  .sm-collage>div:nth-child(1) img{animation-delay:.15s}
  .sm-collage>div:nth-child(2) img{animation-delay:.32s}
  .sm-collage>div:nth-child(3) img{animation-delay:.48s}
  .sm-glow{animation:sm-atmen 9s ease-in-out infinite alternate;transform-origin:70% 30%}
  .sm-scroll{animation:sm-wippen 2.6s ease-in-out 1.8s infinite}

  /* Mission, Passion, Vision: erst zieht die Linie von links durch, dann kommen Titel und Text von unten
     (Philipp 26.10.2026: „textanimation der 3sp auf der startseite passt noch nicht“, vorher wischte die ganze Spalte ein) */
  .sm-auf--linie{position:relative;border-top-color:transparent!important}
  .sm-auf--linie::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#0a0a0a;transform-origin:0 50%;transition:scale 1s cubic-bezier(.6,0,.2,1);transition-delay:var(--sm-d,0s)}
  .sm-auf--linie>*{transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
  .sm-auf--linie>:nth-child(1){transition-delay:calc(var(--sm-d,0s) + .3s)}
  .sm-auf--linie>:nth-child(2){transition-delay:calc(var(--sm-d,0s) + .42s)}
  .sm-auf--linie.sm-warten{opacity:1;translate:none}
  .sm-auf--linie.sm-warten::before{scale:0 1}
  .sm-auf--linie.sm-warten>*{opacity:0;translate:0 18px}
  .sm-titel .sm-zeile>span{transition:translate 1s cubic-bezier(.2,.7,.2,1)}
  .sm-titel .sm-zeile:nth-child(2)>span{transition-delay:.12s}
  .sm-titel.sm-warten .sm-zeile>span{translate:0 110%}

  /* Karten: Einblenden und Anheben beim Überfahren zusammen (das Anheben selbst steht in motion.css) */
  @media (hover:hover){
    .kr__karte.sm-auf{transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;transition-delay:var(--sm-d,0s)}
  }
}

/* Referenzen: eigener Mauszeiger über den Karten als Klick-Symbol (Philipp 26.10.2026: erst „entfernen“ für den Kreis „Ziehen“,
   dann „alternativer cursor innerhalb des portfolio sliders“ und „das muss doch ein click symbol sein und nix zum ziehen“):
   weißer Kreis mit schwarzer Kontur und Pfeil nach rechts oben wie die Pfeilknöpfe, beim Drücken schwarz. Ziehen gibt es nicht. */
@media (hover:hover) and (pointer:fine){
  .rs__karte{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22.5' fill='white' stroke='%230a0a0a'/%3E%3Cpath d='M18 30l12-12M20 18h10v10' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 24 24,pointer}
  .rs__karte:active{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22.5' fill='%230a0a0a' stroke='%230a0a0a'/%3E%3Cpath d='M18 30l12-12M20 18h10v10' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 24 24,pointer}
}

@keyframes sm-atmen{from{scale:1;opacity:1}to{scale:1.12;opacity:.75}}
@keyframes sm-wippen{0%,100%{translate:0 0}50%{translate:0 10px}}