/* SOS-Kinderdorf | Unternehmenskampagne 2026 | ToFu Banner Michelle | 160x600 */

html, body {
  margin: 0;
  padding: 0;
  width: 160px;
  height: 600px;
  overflow: hidden;
  background: #ffffff;
}

#banner {
  position: relative;
  width: 160px;
  height: 600px;
  overflow: hidden;
  background: #ffffff;
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 600px;
  overflow: hidden;
}

#stage img,
#stage div {
  position: absolute;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---------- Grundpositionen (1:1 aus der PSD) ---------- */

#motiv1, #motiv2 {
  top: 0;
  left: 0;
  width: 160px;
  height: 600px;
  transform-origin: 50% 0%;
}

#motiv1 { animation: motiv1-zoom 13s linear infinite; }
#motiv2 { opacity: 0; animation: motiv2-fade 13s linear infinite; }

#text1 { top: 375px; left: 9px; opacity: 0; animation: text1-move 13s linear infinite; }
#text2 { top: 484px; left: 10px; opacity: 0; animation: text2-move 13s linear infinite; }
#greenbox { top: 442px; left: 0px; opacity: 0; animation: box-in 13s linear infinite; }
#ki { top: 235px; left: 142px; }

#greenbg {
  top: 0;
  left: 0;
  width: 160px;
  height: 600px;
  background: #57ab27;
  opacity: 0;
  animation: fade-in-late 13s linear infinite;
}

#button { top: 546px; left: 10px; transform-origin: 50% 50%; animation: button-pulse 13s linear infinite; }
#subhead { top: 459px; left: 15px; opacity: 0; animation: subhead-in 13s linear infinite; }
#logo { top: 27px; left: 19px; }
#logo-weiss { top: 27px; left: 19px; opacity: 0; animation: fade-in-late 13s linear infinite; }
#motto { top: 211px; left: 16px; opacity: 0; animation: motto-in 13s linear infinite; }

/* ---------- Keyframes (Loop = 13.000 ms, 1 % = 130 ms) ---------- */

/* Motiv 1: Zoom 110 % -> 100 %, 0 - 2.800 ms */
@keyframes motiv1-zoom {
  0% { transform: scale(1.1); animation-timing-function: cubic-bezier(0, 0, .705, .997); }
  21.5385% { transform: scale(1); animation-timing-function: linear; }
  100% { transform: scale(1); }
}

/* Motiv 2: Einblenden 3.200 - 3.700 ms */
@keyframes motiv2-fade {
  0%, 24.6154% { opacity: 0; }
  28.4615%, 100% { opacity: 1; }
}

/* Headline Teil 1: rein 600 - 1.600 ms, raus 5.800 - 6.400 ms */
@keyframes text1-move {
  0%, 4.6154% { opacity: 0; transform: translateX(-20px); animation-timing-function: ease-out; }
  12.3077% { opacity: 1; transform: translateX(0); animation-timing-function: linear; }
  44.6154% { opacity: 1; transform: translateX(0); }
  49.2308%, 100% { opacity: 0; transform: translateX(60px); }
}

/* Headline Teil 2: rein 3.200 - 4.400 ms, raus 5.800 - 6.400 ms */
@keyframes text2-move {
  0%, 24.6154% { opacity: 0; transform: translateX(-20px); animation-timing-function: ease-out; }
  33.8462% { opacity: 1; transform: translateX(0); animation-timing-function: linear; }
  44.6154% { opacity: 1; transform: translateX(0); }
  49.2308%, 100% { opacity: 0; transform: translateX(60px); }
}

/* Gruene Box: 6.800 - 7.400 ms */
@keyframes box-in {
  0%, 52.3077% { opacity: 0; transform: translateX(-20px); }
  56.9231%, 100% { opacity: 1; transform: translateX(0); }
}

/* Subline: 7.000 - 7.600 ms */
@keyframes subhead-in {
  0%, 53.8462% { opacity: 0; transform: translateX(-20px); }
  58.4615%, 100% { opacity: 1; transform: translateX(0); }
}

/* Gruene Vollflaeche + weisses Logo: 9.200 - 9.600 ms */
@keyframes fade-in-late {
  0%, 70.7692% { opacity: 0; }
  73.8462%, 100% { opacity: 1; }
}

/* Kampagnenmotto: 10.000 - 10.600 ms */
@keyframes motto-in {
  0%, 76.9231% { opacity: 0; transform: translateX(-20px); }
  81.5385%, 100% { opacity: 1; transform: translateX(0); }
}

/* Button: Doppel-Puls bei 1.600, 4.200 und 10.800 ms */
@keyframes button-pulse {
  0%, 12.3077% { transform: scale(1); animation-timing-function: ease; }
  13.8462% { transform: scale(.9459); animation-timing-function: ease; }
  15.3846% { transform: scale(1); animation-timing-function: ease; }
  16.9231% { transform: scale(.9459); animation-timing-function: ease; }
  18.4615% { transform: scale(1); animation-timing-function: linear; }
  32.3077% { transform: scale(1); animation-timing-function: ease; }
  33.8462% { transform: scale(.9459); animation-timing-function: ease; }
  35.3846% { transform: scale(1); animation-timing-function: ease; }
  36.9231% { transform: scale(.9459); animation-timing-function: ease; }
  38.4615% { transform: scale(1); animation-timing-function: linear; }
  83.0769% { transform: scale(1); animation-timing-function: ease; }
  84.6154% { transform: scale(.9459); animation-timing-function: ease; }
  86.1538% { transform: scale(1); animation-timing-function: ease; }
  87.6923% { transform: scale(.9459); animation-timing-function: ease; }
  89.2308% { transform: scale(1); animation-timing-function: linear; }
  100% { transform: scale(1); }
}

/* ---------- Klickflaeche ---------- */

.click-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 600px;
  z-index: 100;
  cursor: pointer;
  text-decoration: none;
  background: rgba(0, 0, 0, 0);
}