/* Scherenschnitt-Illustrationen (07-illustrationen.md, Stil A). Farbrollen kommen aus dem Website-Theme
   (.site: --illu-ground … --illu-ink); die Fallbacks sind R-A „Materialkiste“ (06). Keine Kästen, keine
   Verläufe: die Bildfläche ist durchsichtig, die organische Fläche im Motiv trägt das Bild. */
@layer site {
  .illu[data-illustration] { background: none; border-radius: 0; overflow: visible; }
  .illu-art { overflow: visible; }
  .illu-art path { fill: none; stroke: none; stroke-linecap: round; stroke-linejoin: round; }

  .illu-art .il-f-ground { fill: var(--illu-ground, #FFFCF7); }
  .illu-art .il-f-field  { fill: var(--illu-field, #F3E4CF); }
  .illu-art .il-f-paper  { fill: var(--illu-paper, #FFFDF9); }
  .illu-art .il-f-accent { fill: var(--illu-accent, #E3007D); }
  .illu-art .il-f-gold   { fill: var(--illu-n1, #F2B33D); }
  .illu-art .il-f-sky    { fill: var(--illu-n2, #8FB5E3); }
  .illu-art .il-f-leaf   { fill: var(--illu-n3, #8DBA7C); }
  .illu-art .il-f-wood   { fill: var(--illu-wood, #C9965E); }
  .illu-art .il-f-ink    { fill: var(--illu-ink, #2B2A33); }
  .illu-art .il-f-shade  { fill: var(--illu-ink, #2B2A33); fill-opacity: 0.14; }

  /* Figuren: Haarfarben und Hauttöne (Vielfalt, ohne Gesichter) */
  .illu-art .il-f-hair-blond { fill: var(--illu-hair-blond, #E2BD6E); }
  .illu-art .il-f-hair-red   { fill: var(--illu-hair-red, #C4602F); }
  .illu-art .il-f-hair-brown { fill: var(--illu-hair-brown, #6E4A2F); }
  .illu-art .il-f-hair-black { fill: var(--illu-hair-black, #2B2A33); }
  .illu-art .il-f-hair-grey  { fill: var(--illu-hair-grey, #B4AFB8); }
  .illu-art .il-f-skin-1 { fill: var(--illu-skin-1, #F4D4BD); }
  .illu-art .il-f-skin-2 { fill: var(--illu-skin-2, #DEAA82); }
  .illu-art .il-f-skin-3 { fill: var(--illu-skin-3, #B47B52); }
  .illu-art .il-f-skin-4 { fill: var(--illu-skin-4, #7B4F33); }

  .illu-art .il-s-paper  { stroke: var(--illu-paper, #FFFDF9); }
  .illu-art .il-s-accent { stroke: var(--illu-accent, #E3007D); }
  .illu-art .il-s-gold   { stroke: var(--illu-n1, #F2B33D); }
  .illu-art .il-s-sky    { stroke: var(--illu-n2, #8FB5E3); }
  .illu-art .il-s-leaf   { stroke: var(--illu-n3, #8DBA7C); }
  .illu-art .il-s-wood   { stroke: var(--illu-wood, #C9965E); }
  .illu-art .il-s-ink    { stroke: var(--illu-ink, #2B2A33); }
  .illu-art .il-s-shade  { stroke: var(--illu-ink, #2B2A33); stroke-opacity: 0.14; }

  /* Einmaliges, ruhiges Einblenden – nicht bei reduzierter Bewegung. */
  @media (prefers-reduced-motion: no-preference) {
    .illu-art { animation: illu-in 200ms ease-out both; }
  }
  @keyframes illu-in { from { opacity: 0; } }

  /* ==== Bewegung der Illustrationen ==============================================================
     Alles bewegt sich wie Material in Kinderhand: fallen, stapeln, schwanken, gießen, wachsen. Nichts läuft in
     Dauerschleife außer den langsam ziehenden Vögeln. Bei „Bewegung reduzieren“ steht alles still (site.css). */
  .illu[data-build] { view-timeline-name: --illu; }
  .il-step, .il-sway, .il-part { transform-box: fill-box; transform-origin: 50% 100%; }

  @media (prefers-reduced-motion: no-preference) {
    /* Aufbau: Bausteine fallen von unten nach oben nacheinander an ihren Platz und federn kurz nach
       (Rosa Turm im Hero, Braune Treppe auf „Montessori“ von klein nach groß, zuletzt die Kegel). */
    .illu[data-build] .il-step { animation: il-drop 560ms cubic-bezier(0.3, 0, 0.4, 1) both; animation-delay: calc(280ms + var(--i) * 120ms); }
    [data-illustration='treppe'] .il-step { animation-delay: calc(200ms + var(--i) * 95ms); }

    /* Mouse-over: der Turm schwankt – oben stärker als unten – und kommt wieder zur Ruhe */
    @media (hover: hover) {
      .hero-figure:hover .illu:not([data-fall]) .il-step > .il-sway { animation: il-sway 1100ms ease-in-out both; }
      .site-page-head:hover [data-illustration='kalender'] .il-part-dot > .il-sway { animation: il-hop 520ms cubic-bezier(0.3, 0, 0.3, 1) both; }
      .site-page-head:hover [data-illustration='treppe'] .il-step > .il-sway { animation: il-nudge 520ms ease-in-out both; animation-delay: calc(var(--i) * 45ms); }
    }

    /* Turm umwerfen (Klick, StartPage PlayTower): oberste Würfel zuerst, jeder fällt bis auf den Boden und rollt aus */
    .hero-figure[data-play] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .illu[data-fall] .il-step[data-tower] { transform-origin: 50% 50%; animation: il-fall 1000ms cubic-bezier(0.5, 0, 0.75, 0.6) both; animation-delay: calc((5 - var(--i)) * 45ms); }

    /* Die dunkle Seite dreht sich nicht mit: Sie verschwindet, solange ein Würfel purzelt, und steht danach wieder rechts */
    .illu[data-fall] .il-step[data-tower='true'] .il-f-shade { animation: il-shade 1000ms linear both; animation-delay: calc((5 - var(--i)) * 45ms); }

    /* Vögel ziehen langsam (einzige Dauerbewegung) */
    .illu[data-build] .il-part-birds { animation: il-birds 17s ease-in-out infinite alternate; }

    /* Kalender („Termine“): das Blatt blättert um, dann springt der goldene Punkt auf seinen Tag */
    [data-illustration='kalender'][data-build] .il-part-cal { transform-origin: 50% 0%; animation: il-flip 720ms cubic-bezier(0.4, 0, 0.3, 1) 260ms both; }
    [data-illustration='kalender'][data-build] .il-part-dot { animation: il-dot 640ms cubic-bezier(0.3, 0, 0.3, 1) 980ms both; }

    /* Scroll-gebunden: Gießkanne („Räume & Garten“) kippt, Tropfen fallen, der Keimling wächst;
       im Garten („Das sind wir“) wächst das Hochbeet und die Blüte geht auf. Rückwärts beim Zurückscrollen. */
    @supports (animation-timeline: scroll()) {
      [data-illustration='giesskanne'][data-build] .il-part-kanne { transform-origin: 35% 55%; animation: il-pour linear both; animation-timeline: scroll(root); animation-range: 0px 380px; }
      [data-illustration='giesskanne'][data-build] .il-part-drops { animation: il-drip linear both; animation-timeline: scroll(root); animation-range: 40px 380px; }
      [data-illustration='giesskanne'][data-build] .il-part-sprout { animation: il-grow linear both; animation-timeline: scroll(root); animation-range: 120px 440px; }
      [data-illustration='garten'][data-build] .il-part-plants { animation: il-grow-soft linear both; animation-timeline: --illu; animation-range: cover 26% cover 56%; }
      [data-illustration='garten'][data-build] .il-part-bloom { animation: il-bloom linear both; animation-timeline: --illu; animation-range: cover 44% cover 64%; }
      [data-illustration='garten'][data-build] .il-part-drops { animation: il-drip linear both; animation-timeline: --illu; animation-range: cover 22% cover 46%; }
    }
  }

  @keyframes il-drop {
    0% { opacity: 0; transform: translateY(-90px) rotate(-7deg); }
    25% { opacity: 1; }
    62% { transform: translateY(0) rotate(1.5deg); }
    80% { transform: translateY(-5px) rotate(-0.5deg); }
    100% { transform: none; }
  }
  @keyframes il-sway {
    0%, 100% { transform: none; }
    22% { transform: translateX(calc(var(--i) * 1.3px)) rotate(calc(var(--i) * 0.7deg)); }
    48% { transform: translateX(calc(var(--i) * -0.9px)) rotate(calc(var(--i) * -0.45deg)); }
    74% { transform: translateX(calc(var(--i) * 0.4px)) rotate(calc(var(--i) * 0.2deg)); }
  }
  @keyframes il-nudge { 0%, 100% { transform: none; } 40% { transform: translateY(-7px); } 75% { transform: translateY(1px); } }
  /* Der unterste Würfel (--i: 0) bleibt stehen. Die anderen purzeln an ihren Platz im Haufen (--dx, --fall aus
     illustrations.ts) und drehen sich dabei genau einmal ganz: So liegt die dunkle Seite danach wieder rechts –
     das Licht kommt in jeder Zeichnung von links. */
  @keyframes il-fall {
    0% { transform: none; }
    20% { transform: translateX(calc(var(--dx) * 0.08px)) rotate(calc(min(var(--i), 1) * 24deg)); }
    76% { transform: translate(calc(var(--dx) * 0.94px), calc(var(--fall) * 1px)) rotate(calc(min(var(--i), 1) * 340deg)); }
    88% { transform: translate(calc(var(--dx) * 0.99px), calc(var(--fall) * 1px - min(var(--i), 1) * 6px)) rotate(calc(min(var(--i), 1) * 360deg)); }
    100% { transform: translate(calc(var(--dx) * 1px), calc(var(--fall) * 1px)) rotate(calc(min(var(--i), 1) * 360deg)); }
  }
  @keyframes il-shade { 0% { fill-opacity: 0.14; } 10%, 84% { fill-opacity: 0; } 100% { fill-opacity: 0.14; } }
  @keyframes il-birds { from { transform: translate(-12px, 3px); } to { transform: translate(18px, -5px); } }
  @keyframes il-flip { 0% { transform: none; } 45% { transform: scaleY(0.06) skewX(-6deg); } 100% { transform: none; } }
  @keyframes il-dot { 0% { transform: translate(-26px, -26px); } 45% { transform: translate(-12px, -44px); } 80% { transform: translate(0, 2px) scale(1.12, 0.86); } 100% { transform: none; } }
  @keyframes il-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-13px); } 78% { transform: translateY(1px) scale(1.1, 0.88); } }
  @keyframes il-pour { from { transform: rotate(-9deg) translate(-3px, 3px); } to { transform: rotate(7deg); } }
  @keyframes il-drip { 0% { opacity: 0; transform: translateY(-16px); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(22px); } }
  @keyframes il-grow { from { transform: scale(0.4); } to { transform: scale(1.3); } }
  @keyframes il-grow-soft { from { transform: scaleY(0.5); } }
  @keyframes il-bloom { from { transform: scale(0.15); } 80% { transform: scale(1.2); } }
}