:root {
  --kalc-violet:    #592c86;
  --kalc-yellow:    #fff374;
  --ad-duration:    9s;
  --bezier-springy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  width: 320px;
  height: 416px;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* AD */
.ad {
  position: relative;
  width: 320px;
  height: 416px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--kalc-violet);
  border: 1px solid var(--kalc-violet);
}
/* AD HOVER */
.ad:hover .logo {
  transform: rotate(-10deg);
}
.ad:hover .bg img {
  transform: scale(1.3);
}
.ad:hover .info-text {
  transform: translateY(-.5rem);
}
.ad:hover .info-text p:last-child {
  gap: 0 .75rem;
}

/* CURTAIN */
@keyframes blob-curtain {
  from { transform: translateY(0%)    rotate(-50deg)  scale(1.5); }
  to   { transform: translateY(-100%) rotate(-130deg) scale(1);   }
}
.blob-curtain svg {
  position: absolute;
  top: 0px;
  left: -100%;
  height: 175%;
  transform: translateY(0%) rotate(-50deg) scale(1.5);
  animation: blob-curtain 1.5s cubic-bezier(0.39, 0.58, 0.57, 1) 1 forwards;
}

/* BACKGROUND */
.bg {
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}
@keyframes moving-bg {
  0%   { transform: scale(1.25); }
  16%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .2s linear;
  animation: moving-bg var(--ad-duration) ease-in-out 0s 1 forwards;
}

/* LOGO */
.logo {
  position: absolute;
  top: -1rem;
  right: -2.25rem;
  transition: transform .5s var(--bezier-springy);
}
.logo svg path[fill="#592c86"] {
  fill: #fff374;
}
.logo svg path[fill="#fff"] {
  fill: transparent;
}
@keyframes logo-intro {
  /* — initial pop-in — */
  0%,  4% { transform: scale(0) rotate(-12deg); }
  7%      { transform: scale(1) rotate(0deg); }

  /* — pulse 1 (synced to CTA, cycle 1) — */
  25%  { transform: scale(1) rotate(0deg); animation-timing-function: ease-in; }
  26%  { transform: scale(0.3) rotate(-6deg); }
  28%  { transform: scale(1) rotate(0deg); }

  /* — pulse 2 (synced to CTA, cycle 2) — */
  58%  { transform: scale(1) rotate(0deg); animation-timing-function: ease-in; }
  59%  { transform: scale(0.3) rotate(-6deg); }
  61%  { transform: scale(1) rotate(0deg); }

  /* — pulse 3 (synced to CTA, cycle 3) — */
  91%  { transform: scale(1) rotate(0deg); animation-timing-function: ease-in; }
  92%  { transform: scale(0.3) rotate(-6deg); }
  94%  { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.logo svg {
  height: 160px;
  transform: scale(0);
  transform-origin: center;
  will-change: transform;
  animation: logo-intro calc(var(--ad-duration) * 3) var(--bezier-springy) 0s 1 forwards;
}

/* Content / Text */
@keyframes blob-text-intro {
  from { transform: translateY(calc(100% + 2.5rem)); }
  to   { transform: translateY(0%); }
}
.blob-text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  z-index: 1;
  transform: translateY(calc(100% + 2rem));
  animation: blob-text-intro .75s var(--bezier-springy) forwards;
  animation-delay: 2s;
}
@keyframes blob-text-rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.blob-text > svg {
  position: absolute;
  left: -50%;
  width: 200%;
  top: -1rem;
  height: auto;
  z-index: -1;
  transition: transform .2s var(--bezier-springy);
  animation: blob-text-rotation calc(var(--ad-duration) * 1.5) linear 2s infinite;
}
.blob-text > svg path {
  transition: fill .2s ease-in-out;
}

.info-text {
  color: #070b2b;
  height: 80px;
  overflow: hidden;
  transition: transform .4s var(--bezier-springy), color .2s ease-in-out;
}
.info-text p {
  display: flex;
  align-items: flex-end;
  gap: 0 .25rem;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2em;
  height: 80px;
}
@keyframes switch-text {
  /* — Cycle 1 — */
  0%,  8%  { margin-top:    0; }
  9%,  16% { margin-top:  -80px; }
  17%, 27% { margin-top: -160px; }
  28%, 33% { margin-top: -240px; }
  33%      { animation-timing-function: steps(1, end); }

  /* — Cycle 2 — */
  33.01%, 41% { margin-top:    0; }
  42%,    49% { margin-top:  -80px; }
  50%,    60% { margin-top: -160px; }
  61%,    66% { margin-top: -240px; }
  66%         { animation-timing-function: steps(1, end); }

  /* — Cycle 3 (holds on "Jetzt entdecken") — */
  66.01%, 74% { margin-top:    0; }
  75%,    82% { margin-top:  -80px; }
  83%,   100% { margin-top: -160px; }
}
.info-text p:first-child {
  animation: switch-text calc(var(--ad-duration) * 3) linear 2s 1 forwards;
}
.info-text p:last-child {
  transition: gap .2s linear;
}

/* --- Click area --- */

.click-area {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: block;
  cursor: pointer;
}