/* ==================================================================
   ailovetheinternet — Startseite
   Der Roboter ist das Original-Logo, unveraendert.
   Das Herz liegt als eigene, deckungsgleiche Ebene darueber, damit es
   geworfen, gedrueckt und vorgezeigt werden kann. Im Koerper bleibt
   eine graue Herzpraegung zurueck.
   Alles laeuft auf EINER 20-Sekunden-Zeitachse, damit Roboter, Herz,
   Schatten und Funken synchron bleiben.
   ================================================================== */

:root {
  --cream:     #f7f0e2;
  --cream-hi:  #fdfaf2;
  --ink:       #3a2f22;
  --red:       #dc534a;
  --show: 20s;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(130% 100% at 50% 30%, var(--cream-hi) 0%, var(--cream) 58%, #f0e7d5 100%);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: 8vh 1.25rem;
}

/* ---------- Buehne ---------- */

.scene {
  position: relative;
  width: min(52vw, 30vh, 240px);
  aspect-ratio: 382.74 / 475.06;
}

.bot-wrap {
  position: absolute;
  inset: 0;
  animation: float 5.5s ease-in-out infinite;
}

.bot, .heart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.bot   { z-index: 1; transform-origin: 50% 96%; animation: bot-act var(--show) linear infinite; }
.heart { z-index: 2; transform-origin: 36.4% 69.6%; animation: heart-act var(--show) linear infinite;
          filter: drop-shadow(.9px 0 0 #030f20) drop-shadow(-.9px 0 0 #030f20)
                  drop-shadow(0 .9px 0 #030f20) drop-shadow(0 -.9px 0 #030f20); }

/* Koerperfarben des Logos */
.bot .cls-1  { fill: #9eafb9; }  .bot .cls-2  { fill: #778c99; }
.bot .cls-3  { fill: #b9c7cf; }  .bot .cls-4  { fill: #2e3b49; }
.bot .cls-5  { fill: #030f20; }  .bot .cls-7  { fill: #798f9c; }
.bot .cls-9  { fill: #c1ced6; }  .bot .cls-10 { fill: #e5e6e7; }
.bot .cls-11 { fill: #081423; }  .bot .cls-12 { fill: #051221; }
.bot .cls-13 { fill: #c4d0d6; }

/* Herzpraegung im Brustpanzer: dieselbe Form, nur in Metall */
.bot .cls-14 { fill: #9eafb9; }
.bot .cls-6  { fill: #8b9daa; }
.bot .cls-8  { fill: #b9c7cf; }

/* Das freie Herz behaelt die Originalfarben */
.heart .cls-14 { fill: #fd765f; }
.heart .cls-6  { fill: #dc534a; }
.heart .cls-8  { fill: #fdd4cc; }

/* Augen-Highlights funkeln gelegentlich */
.bot .cls-10 { animation: sparkle-eye 6.5s steps(1, end) infinite; }

/* ---------- Schatten am Boden ---------- */

.shadow {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 62%;
  height: 7%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(110, 86, 52, .26) 0%, rgba(110, 86, 52, 0) 72%);
  animation: shadow-act var(--show) linear infinite;
}

/* ==================================================================
   Die Nummer. Eine Zeitachse, vier Auftritte.
   0–20 %   Herzschlag
   20–40 %  Knuddeln
   40–65 %  Hochwerfen und Fangen
   65–85 %  Vorzeigen
   85–100 % zurueck zur Ruhe
   ================================================================== */

@keyframes heart-act {
  /* --- Herzschlag --- */
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  2%   { transform: translate(0,0) rotate(0deg) scale(1.07); }
  4%   { transform: translate(0,0) rotate(0deg) scale(1); }
  6%   { transform: translate(0,0) rotate(0deg) scale(1.10); }
  9%   { transform: translate(0,0) rotate(0deg) scale(1); }
  19%  { transform: translate(0,0) rotate(0deg) scale(1); }

  /* --- Knuddeln: zusammendruecken, ausfedern --- */
  22%  { transform: translate(0, 1.5%) rotate(0deg) scale(1.13, .84); }
  25%  { transform: translate(0, -1%)  rotate(0deg) scale(.93, 1.09); }
  28%  { transform: translate(0, 1.5%) rotate(0deg) scale(1.15, .82); }
  31%  { transform: translate(0, -.5%) rotate(0deg) scale(.95, 1.06); }
  34%  { transform: translate(0,0) rotate(0deg) scale(1); }
  39%  { transform: translate(0,0) rotate(0deg) scale(1); }

  /* --- Hochwerfen --- */
  41%  { transform: translate(0, 3.5%) rotate(0deg) scale(1.08, .90); }     /* Ausholen */
  45%  { transform: translate(1%, -62%) rotate(210deg) scale(.93); }
  50%  { transform: translate(2.5%, -104%) rotate(360deg) scale(.84); }     /* Scheitel */
  55%  { transform: translate(1%, -60%) rotate(515deg) scale(.93); }
  59%  { transform: translate(0, 2%)   rotate(720deg) scale(1.16, .82); }   /* gefangen */
  61%  { transform: translate(0, -1%)  rotate(720deg) scale(.94, 1.07); }
  63%  { transform: translate(0,0)     rotate(720deg) scale(1); }

  /* --- Wiegen: das Herz vor dem Koerper hin und her schaukeln --- */
  67%  { transform: translate(-17%, -7%) rotate(-19deg) scale(1.04); }
  71%  { transform: translate( 17%, -7%) rotate( 19deg) scale(1.04); }
  75%  { transform: translate(-15%, -9%) rotate(-16deg) scale(1.06); }
  79%  { transform: translate( 13%, -6%) rotate( 13deg) scale(1.04); }
  83%  { transform: translate(0,0) rotate(0deg) scale(1); }

  100% { transform: translate(0,0) rotate(720deg) scale(1); }
}

@keyframes bot-act {
  0%, 19%  { transform: translateY(0) rotate(0deg) scale(1, 1); }
  /* Knuddeln: kurz zusammensacken, mitgehen */
  22%      { transform: translateY(.8%) rotate(0deg) scale(1.02, .97); }
  25%      { transform: translateY(-.4%) rotate(0deg) scale(.99, 1.02); }
  28%      { transform: translateY(.8%) rotate(0deg) scale(1.02, .97); }
  31%      { transform: translateY(0) rotate(0deg) scale(1, 1); }
  39%      { transform: translateY(0) rotate(0deg) scale(1, 1); }
  /* Wurf: in die Knie, hochstrecken, Blick nach oben, Landung abfedern */
  41%      { transform: translateY(2.4%) rotate(0deg) scale(1.05, .92); }
  44%      { transform: translateY(-2%) rotate(0deg) scale(.97, 1.05); }
  50%      { transform: translateY(-1.4%) rotate(-3deg) scale(.985, 1.03); }
  56%      { transform: translateY(-1%) rotate(2deg) scale(.99, 1.02); }
  59%      { transform: translateY(2.8%) rotate(0deg) scale(1.06, .90); }
  62%      { transform: translateY(0) rotate(0deg) scale(1, 1); }
  /* Wiegen: der Roboter schwingt gegenlaeufig mit */
  67%      { transform: translateY(-.5%) rotate(3deg) scale(1, 1); }
  71%      { transform: translateY(-.5%) rotate(-3deg) scale(1, 1); }
  75%      { transform: translateY(-.5%) rotate(2.4deg) scale(1, 1); }
  79%      { transform: translateY(-.5%) rotate(-2deg) scale(1, 1); }
  83%      { transform: translateY(0) rotate(0deg) scale(1, 1); }
  100%     { transform: translateY(0) rotate(0deg) scale(1, 1); }
}

@keyframes shadow-act {
  0%, 39%  { transform: translateX(-50%) scale(1);      opacity: 1; }
  41%      { transform: translateX(-50%) scale(1.06);   opacity: 1; }
  50%      { transform: translateX(-50%) scale(.9);     opacity: .8; }
  59%      { transform: translateX(-50%) scale(1.08);   opacity: 1; }
  62%, 100% { transform: translateX(-50%) scale(1);     opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4%); }
}

@keyframes sparkle-eye {
  0%, 90%   { fill: #e5e6e7; }
  91%, 94%  { fill: #ffffff; }
  95%, 100% { fill: #e5e6e7; }
}

/* ---------- Kleine Herzchen, nur beim Knuddeln und Vorzeigen ---------- */

.sparks {
  position: absolute;
  left: 36.4%;
  top: 62%;
  width: 0; height: 0;
  z-index: 3;
  pointer-events: none;
  animation: sparks-gate var(--show) steps(1, end) infinite;
}

.sparks i {
  position: absolute;
  display: block;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2011%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23030f20%22%20d%3D%22M0%201h5v1h1v1h1V2h1V1h5v6h-1v1h-1v1h-1v1h-1v1H6v1H5v-1H4v-1H3V9H2V8H1V7H0z%22%2F%3E%3Cpath%20fill%3D%22%23dc534a%22%20d%3D%22M1%202h3v1h1v1h2V3h1V2h3v4h-1v1h-1v1h-1v1H7v1H6v1H5v-1H4v-1H3V8H2V7H1z%22%2F%3E%3Cpath%20fill%3D%22%23fd765f%22%20d%3D%22M2%203h2v1h1v1h2V4h1V3h2v3h-1v1H8v1H7v1H6v1H5V9H4V8H3V7H2z%22%2F%3E%3Cpath%20fill%3D%22%23fdd4cc%22%20d%3D%22M3%204h1v2H3z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  opacity: 0;
  animation: rise var(--dur) var(--delay) cubic-bezier(.3,.5,.4,1) infinite;
  image-rendering: pixelated;
}

.sparks .s1 { --delay: 0s;   --dur: 2.6s; --dx: -78px;  --lift: -150px; --rot: -18deg; width: 17px; height: 16px; }
.sparks .s2 { --delay: .5s;  --dur: 3.0s; --dx:  66px;  --lift: -132px; --rot:  15deg; width: 13px; height: 12px; }
.sparks .s3 { --delay: 1.0s; --dur: 2.8s; --dx: -54px;  --lift: -165px; --rot:  11deg; width: 21px; height: 19px; }
.sparks .s4 { --delay: 1.6s; --dur: 3.2s; --dx:  88px;  --lift: -140px; --rot: -13deg; width: 15px; height: 14px; }
.sparks .s5 { --delay: 2.1s; --dur: 2.7s; --dx: -96px;  --lift: -120px; --rot:  20deg; width: 11px; height: 10px; }

@keyframes sparks-gate {
  0%   { opacity: 0; }
  21%  { opacity: 1; }
  38%  { opacity: 0; }
  66%  { opacity: 1; }
  84%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes rise {
  0%   { transform: translate(-50%, 0) scale(.35) rotate(0deg); opacity: 0; }
  12%  { transform: translate(calc(-50% + var(--dx) * .12), calc(var(--lift) * .08)) scale(1) rotate(calc(var(--rot) * .25)); opacity: 1; }
  68%  { opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx)), var(--lift)) scale(.75) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Wortmarke ---------- */

.wordmark {
  margin: 0;
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: lowercase;
  text-align: center;
  color: var(--ink);
}
.wordmark span { color: var(--red); }

/* ---------- Ruecksicht ---------- */

@media (prefers-reduced-motion: reduce) {
  .bot, .heart, .bot-wrap, .shadow, .sparks, .sparks i, .bot .cls-10 {
    animation: none !important;
  }
  .sparks { display: none; }
}