<template>
  <div class="relative overflow-hidden section-padding min-h-[70vh] flex items-center justify-center">
    <!-- 1. Shadok funambule: walking on tightrope (top-left) -->
    <svg class="shadok-funambule" viewBox="0 0 170 200" fill="none" aria-hidden="true">
      <!-- Tightrope -->
      <line x1="5" y1="170" x2="165" y2="170" stroke="currentColor" stroke-width="2" opacity="0.3"/>
      <!-- Body (small oval, leaning forward) -->
      <ellipse cx="85" cy="110" rx="20" ry="28" fill="currentColor" opacity="0.25" transform="rotate(-5 85 110)"/>
      <!-- Head -->
      <circle cx="88" cy="72" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (focused, looking down-right) -->
      <circle cx="93" cy="70" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="99" cy="71" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (pointy, right side) -->
      <polygon points="103,74 116,72 103,78" fill="currentColor" opacity="0.3"/>
      <!-- Balancing pole (big, horizontal) -->
      <line x1="10" y1="92" x2="160" y2="88" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Arms holding pole -->
      <line x1="67" y1="100" x2="45" y2="92" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="103" y1="98" x2="125" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Left leg (forward, on rope) -->
      <line x1="78" y1="136" x2="70" y2="170" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="70" cy="172" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <!-- Right leg (back, lifted) -->
      <line x1="92" y1="136" x2="108" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="108" cy="167" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 2. Shadok accordeoniste: playing accordion (top-right, profile) -->
    <svg class="shadok-accordeoniste" viewBox="0 0 180 210" fill="none" aria-hidden="true">
      <!-- Body (profile, small) -->
      <ellipse cx="70" cy="115" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head (profile) -->
      <circle cx="72" cy="75" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Beret -->
      <ellipse cx="72" cy="60" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
      <circle cx="72" cy="56" r="4" fill="currentColor" opacity="0.25"/>
      <!-- Eye (profile, one visible) -->
      <circle cx="80" cy="73" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (profile right) -->
      <polygon points="86,76 98,74 86,80" fill="currentColor" opacity="0.3"/>
      <!-- Accordion bellows (big, extended right) -->
      <rect x="92" y="95" width="12" height="45" rx="2" fill="currentColor" opacity="0.3"/>
      <line x1="98" y1="98" x2="98" y2="137" stroke="currentColor" stroke-width="0.8" opacity="0.2"/>
      <rect x="107" y="93" width="8" height="49" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="118" y="91" width="8" height="53" rx="2" fill="currentColor" opacity="0.2"/>
      <rect x="129" y="89" width="8" height="57" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="140" y="87" width="12" height="61" rx="2" fill="currentColor" opacity="0.3"/>
      <!-- Keyboard dots on right panel -->
      <circle cx="146" cy="100" r="1.5" fill="currentColor" opacity="0.2"/>
      <circle cx="146" cy="110" r="1.5" fill="currentColor" opacity="0.2"/>
      <circle cx="146" cy="120" r="1.5" fill="currentColor" opacity="0.2"/>
      <circle cx="146" cy="130" r="1.5" fill="currentColor" opacity="0.2"/>
      <!-- Left arm on bellows -->
      <line x1="52" y1="105" x2="92" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Right arm stretched to far end -->
      <line x1="90" y1="108" x2="140" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Foot tapping (right lifted) -->
      <line x1="60" y1="141" x2="52" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="52" cy="197" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="80" y1="141" x2="90" y2="188" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="90" cy="190" rx="8" ry="3" fill="currentColor" opacity="0.3" transform="rotate(-15 90 190)"/>
      <!-- Music notes -->
      <text x="155" y="80" fill="currentColor" opacity="0.25" font-size="14">&#9834;</text>
      <text x="145" y="68" fill="currentColor" opacity="0.2" font-size="11">&#9835;</text>
    </svg>

    <!-- 3. Shadok jongleur: 4 balls in the air (top-center) -->
    <svg class="shadok-jongleur" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="80" cy="120" rx="21" ry="27" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="80" cy="82" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (looking up, wide) -->
      <circle cx="74" cy="78" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="86" cy="78" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Mouth open (concentration) -->
      <ellipse cx="80" cy="92" rx="4" ry="3" fill="currentColor" opacity="0.2"/>
      <!-- Beak (small, front view) -->
      <polygon points="80,86 87,89 80,92" fill="currentColor" opacity="0.3"/>
      <!-- Arms up wide -->
      <line x1="60" y1="110" x2="30" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="100" y1="110" x2="130" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- 4 juggling balls in arc -->
      <circle cx="40" cy="35" r="8" fill="currentColor" opacity="0.3"/>
      <circle cx="70" cy="18" r="8" fill="currentColor" opacity="0.25"/>
      <circle cx="100" cy="15" r="8" fill="currentColor" opacity="0.3"/>
      <circle cx="128" cy="30" r="8" fill="currentColor" opacity="0.25"/>
      <!-- Long legs -->
      <line x1="72" y1="145" x2="60" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="60" cy="202" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="88" y1="145" x2="100" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="100" cy="202" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 4. Shadok cracheur de feu: head tilted back, flame from mouth -->
    <svg class="shadok-cracheur" viewBox="0 0 170 220" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="75" cy="125" rx="22" ry="30" fill="currentColor" opacity="0.25"/>
      <!-- Head (tilted back) -->
      <circle cx="78" cy="82" r="16" fill="currentColor" opacity="0.3" />
      <!-- Eyes (looking up) -->
      <circle cx="73" cy="76" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="83" cy="76" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (pointing up, open) -->
      <polygon points="78,66 85,52 72,66" fill="currentColor" opacity="0.3"/>
      <!-- Flame stream from beak (big, upward-right) -->
      <path d="M82 54 Q100 25 95 10 Q110 30 120 8 Q115 35 135 15 Q120 42 140 30 Q118 50 130 45" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="currentColor" opacity="0.2"/>
      <!-- Torch in left hand -->
      <line x1="55" y1="115" x2="30" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <rect x="24" y="78" width="8" height="16" rx="2" fill="currentColor" opacity="0.35"/>
      <path d="M28 78 Q28 68 32 72 Q28 65 28 78" fill="currentColor" opacity="0.25"/>
      <!-- Right arm out for balance -->
      <line x1="95" y1="112" x2="125" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Long legs -->
      <line x1="66" y1="153" x2="55" y2="210" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="55" cy="212" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="84" y1="153" x2="95" y2="210" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="95" cy="212" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 5. Shadok trapeziste: hanging from trapeze, body in arc -->
    <svg class="shadok-trapeziste" viewBox="0 0 150 220" fill="none" aria-hidden="true">
      <!-- Trapeze ropes -->
      <line x1="40" y1="0" x2="50" y2="40" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <line x1="110" y1="0" x2="100" y2="40" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <!-- Trapeze bar -->
      <line x1="48" y1="40" x2="102" y2="40" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.35"/>
      <!-- Arms (hanging from bar) -->
      <line x1="60" y1="42" x2="65" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="90" y1="42" x2="85" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Body (arched, graceful) -->
      <ellipse cx="75" cy="95" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(10 75 95)"/>
      <!-- Head (below body, looking down) -->
      <circle cx="78" cy="72" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (excited, looking down) -->
      <circle cx="74" cy="74" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="84" cy="75" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (pointing down-right) -->
      <polygon points="86,78 96,84 86,82" fill="currentColor" opacity="0.3"/>
      <!-- Legs (pointed, graceful, extending down-right) -->
      <line x1="80" y1="118" x2="95" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="70" y1="118" x2="82" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Pointed feet -->
      <polygon points="95,175 105,180 95,182" fill="currentColor" opacity="0.3"/>
      <polygon points="82,180 92,185 82,187" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 6. Shadok batteur: behind drum kit, sticks raised -->
    <svg class="shadok-batteur" viewBox="0 0 180 210" fill="none" aria-hidden="true">
      <!-- Snare drum (center, big) -->
      <ellipse cx="90" cy="165" rx="35" ry="12" fill="currentColor" opacity="0.2"/>
      <rect x="55" y="155" width="70" height="20" rx="3" fill="currentColor" opacity="0.2"/>
      <ellipse cx="90" cy="155" rx="35" ry="12" fill="currentColor" opacity="0.25"/>
      <!-- Hi-hat (left) -->
      <ellipse cx="30" cy="140" rx="18" ry="5" fill="currentColor" opacity="0.2"/>
      <line x1="30" y1="140" x2="30" y2="185" stroke="currentColor" stroke-width="2" opacity="0.2"/>
      <!-- Cymbal (right) -->
      <ellipse cx="155" cy="120" rx="20" ry="5" fill="currentColor" opacity="0.2"/>
      <line x1="155" y1="120" x2="155" y2="185" stroke="currentColor" stroke-width="2" opacity="0.2"/>
      <!-- Body (behind kit) -->
      <ellipse cx="90" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="90" cy="70" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (intense, looking at drums) -->
      <circle cx="84" cy="68" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="96" cy="69" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Beak (front, small) -->
      <polygon points="90,76 97,80 90,82" fill="currentColor" opacity="0.3"/>
      <!-- Arms raised with drumsticks -->
      <line x1="70" y1="100" x2="40" y2="65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="40" y1="65" x2="25" y2="50" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
      <line x1="110" y1="100" x2="140" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="140" y1="60" x2="158" y2="48" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
      <!-- Motion lines on sticks -->
      <path d="M22 52 Q18 48 20 44" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M160 50 Q164 46 162 42" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
      <!-- Legs (tucked behind kit) -->
      <line x1="80" y1="136" x2="70" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <ellipse cx="70" cy="197" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
      <line x1="100" y1="136" x2="110" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <ellipse cx="110" cy="197" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
    </svg>

    <!-- 7. Shadok marionnettiste: holding puppet strings -->
    <svg class="shadok-marionnettiste" viewBox="0 0 160 220" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="80" cy="75" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="80" cy="40" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (looking down at puppet) -->
      <circle cx="75" cy="42" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="86" cy="43" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak -->
      <polygon points="89,44 100,42 89,48" fill="currentColor" opacity="0.3"/>
      <!-- Arms down holding control bar -->
      <line x1="62" y1="68" x2="50" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="98" y1="68" x2="110" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Control bar (cross) -->
      <line x1="40" y1="108" x2="120" y2="108" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
      <line x1="80" y1="98" x2="80" y2="118" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
      <!-- Puppet strings -->
      <line x1="45" y1="108" x2="55" y2="155" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <line x1="80" y1="118" x2="70" y2="158" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <line x1="115" y1="108" x2="85" y2="155" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <line x1="80" y1="98" x2="70" y2="148" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <!-- Mini puppet shadok -->
      <circle cx="70" cy="155" r="8" fill="currentColor" opacity="0.2"/>
      <ellipse cx="70" cy="172" rx="10" ry="13" fill="currentColor" opacity="0.15"/>
      <!-- Puppet eyes -->
      <circle cx="67" cy="154" r="1" fill="currentColor" opacity="0.4"/>
      <circle cx="74" cy="154" r="1" fill="currentColor" opacity="0.4"/>
      <!-- Puppet beak -->
      <polygon points="76,156 82,155 76,158" fill="currentColor" opacity="0.2"/>
      <!-- Puppet legs -->
      <line x1="64" y1="184" x2="58" y2="208" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <line x1="76" y1="184" x2="82" y2="208" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <!-- Master shadok legs -->
      <line x1="72" y1="99" x2="62" y2="155" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
      <line x1="88" y1="99" x2="98" y2="155" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
      <ellipse cx="62" cy="157" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
      <ellipse cx="98" cy="157" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
    </svg>

    <!-- 8. Shadok clown: oversized shoes, red nose, squirting flower -->
    <svg class="shadok-clown" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="80" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="80" cy="70" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Party hat (tall cone) -->
      <polygon points="80,38 68,62 92,62" fill="currentColor" opacity="0.25"/>
      <circle cx="80" cy="38" r="3" fill="currentColor" opacity="0.35"/>
      <!-- Big red nose (circle on beak) -->
      <circle cx="92" cy="74" r="5" fill="currentColor" opacity="0.4"/>
      <!-- Beak behind nose -->
      <polygon points="88,72 100,74 88,78" fill="currentColor" opacity="0.2"/>
      <!-- Eyes (different directions — goofy) -->
      <circle cx="74" cy="66" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="85" cy="64" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Big goofy grin -->
      <path d="M72 82 Q80 90 88 82" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Squirting flower on chest -->
      <circle cx="80" cy="95" r="6" fill="currentColor" opacity="0.25"/>
      <circle cx="80" cy="95" r="2.5" fill="currentColor" opacity="0.35"/>
      <!-- Water squirt from flower -->
      <path d="M86 93 Q100 85 105 90" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
      <circle cx="107" cy="90" r="2" fill="currentColor" opacity="0.2"/>
      <circle cx="112" cy="88" r="1.5" fill="currentColor" opacity="0.15"/>
      <!-- Arms -->
      <line x1="60" y1="100" x2="35" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="100" y1="100" x2="125" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Long legs -->
      <line x1="72" y1="136" x2="50" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="88" y1="136" x2="110" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- OVERSIZED shoes -->
      <ellipse cx="42" cy="190" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
      <ellipse cx="118" cy="190" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 9. Shadok acrobate: mid-cartwheel, body rotated 90deg -->
    <svg class="shadok-acrobate" viewBox="0 0 160 200" fill="none" aria-hidden="true">
      <!-- Body (rotated 90 degrees) -->
      <ellipse cx="80" cy="100" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(90 80 100)"/>
      <!-- Head (at bottom-right, inverted) -->
      <circle cx="112" cy="100" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (dizzy, spiral-ish) -->
      <path d="M108 97 Q110 94 113 97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M117 97 Q119 94 122 97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
      <!-- Beak (pointing right) -->
      <polygon points="124,102 136,100 124,106" fill="currentColor" opacity="0.3"/>
      <!-- Limbs in pinwheel pattern -->
      <!-- Arm up-right -->
      <line x1="85" y1="80" x2="110" y2="35" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Arm down-left -->
      <line x1="75" y1="120" x2="50" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Leg up-left (hand on ground) -->
      <line x1="65" y1="88" x2="25" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <circle cx="23" cy="53" r="4" fill="currentColor" opacity="0.25"/>
      <!-- Leg down-right -->
      <line x1="95" y1="112" x2="135" y2="150" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="110" cy="33" rx="6" ry="3" fill="currentColor" opacity="0.25" transform="rotate(-60 110 33)"/>
      <ellipse cx="135" cy="152" rx="6" ry="3" fill="currentColor" opacity="0.25" transform="rotate(40 135 152)"/>
      <!-- Motion arc -->
      <path d="M30 40 Q20 50 25 60" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M140 140 Q148 148 145 158" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
    </svg>

    <!-- 10. Shadok regisseur: headset, clipboard, running -->
    <svg class="shadok-regisseur" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body (leaning forward, running) -->
      <ellipse cx="75" cy="105" rx="20" ry="27" fill="currentColor" opacity="0.25" transform="rotate(-12 75 105)"/>
      <!-- Head -->
      <circle cx="80" cy="68" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Headset arc -->
      <path d="M66 60 Q80 48 94 60" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.35"/>
      <!-- Headset earpiece -->
      <ellipse cx="66" cy="64" rx="4" ry="6" fill="currentColor" opacity="0.3"/>
      <!-- Headset mic -->
      <path d="M66 70 Q62 78 70 80" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Eyes (stressed, one looking forward one sideways) -->
      <circle cx="76" cy="65" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="87" cy="64" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Beak -->
      <polygon points="91,68 104,66 91,72" fill="currentColor" opacity="0.3"/>
      <!-- Lanyard -->
      <line x1="80" y1="82" x2="80" y2="100" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
      <!-- Badge -->
      <rect x="74" y="100" width="12" height="15" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="76" y="103" width="8" height="3" rx="1" fill="currentColor" opacity="0.15"/>
      <!-- Right arm pointing forward (with authority) -->
      <line x1="92" y1="95" x2="135" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Pointing finger -->
      <line x1="135" y1="75" x2="145" y2="70" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
      <!-- Left arm holding clipboard -->
      <line x1="58" y1="98" x2="38" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Clipboard (big) -->
      <rect x="22" y="105" width="22" height="30" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="28" y="102" width="10" height="5" rx="1" fill="currentColor" opacity="0.3"/>
      <!-- Clipboard lines -->
      <line x1="26" y1="114" x2="40" y2="114" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <line x1="26" y1="120" x2="38" y2="120" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <line x1="26" y1="126" x2="40" y2="126" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <!-- Legs (running stride, long) -->
      <line x1="68" y1="130" x2="40" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="38" cy="197" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="82" y1="130" x2="115" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="117" cy="192" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <div class="container-content relative z-10 text-center">
      <p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
      <h1 class="page-title font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
        {{ content?.title }}
      </h1>
      <p class="mt-4 text-lg" style="color: hsl(var(--color-text-muted))">
        {{ content?.description }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
})

const { data: content } = await usePageContent('evenement')

useHead({
  title: content.value?.meta?.title ?? 'Évènement',
})
</script>

<style scoped>
.page-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

/* 1. Funambule — top-left */
.shadok-funambule {
  position: absolute;
  left: 4%;
  top: 5%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.24;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-sway-funambule 9s ease-in-out infinite;
}

/* 2. Accordeoniste — top-right */
.shadok-accordeoniste {
  position: absolute;
  right: 3%;
  top: 4%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-bounce-accordeon 8s ease-in-out infinite;
}

/* 3. Jongleur — top-center */
.shadok-jongleur {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  width: clamp(70px, 10vw, 130px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-jongleur 7s ease-in-out infinite;
}

/* 4. Cracheur de feu — left 5%, 40% */
.shadok-cracheur {
  position: absolute;
  left: 5%;
  top: 40%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-flicker-cracheur 8s ease-in-out infinite;
}

/* 5. Trapeziste — right 3%, 30% */
.shadok-trapeziste {
  position: absolute;
  right: 3%;
  top: 30%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-swing-trapeze 10s ease-in-out infinite;
}

/* 6. Batteur — left 4%, bottom 15% */
.shadok-batteur {
  position: absolute;
  left: 4%;
  bottom: 15%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-pulse-batteur 7s ease-in-out infinite;
}

/* 7. Marionnettiste — right 4%, bottom 20% */
.shadok-marionnettiste {
  position: absolute;
  right: 4%;
  bottom: 20%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-bob-marionnette 9s ease-in-out infinite;
}

/* 8. Clown — bottom-left */
.shadok-clown {
  position: absolute;
  left: 6%;
  bottom: 3%;
  width: clamp(70px, 10vw, 135px);
  opacity: 0.24;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-wobble-clown 8s ease-in-out infinite;
}

/* 9. Acrobate — center-bottom */
.shadok-acrobate {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: clamp(70px, 10vw, 130px);
  opacity: 0.18;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-spin-acrobate 12s ease-in-out infinite;
}

/* 10. Regisseur — bottom-right */
.shadok-regisseur {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-rush-regisseur 7s ease-in-out infinite;
}

@keyframes shadok-sway-funambule {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(2deg); }
  75% { transform: translateY(-3px) rotate(-2deg); }
}

@keyframes shadok-bounce-accordeon {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(-3px); }
}

@keyframes shadok-float-jongleur {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes shadok-flicker-cracheur {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-4px) scale(1.02); }
  60% { transform: translateY(-2px) scale(0.99); }
}

@keyframes shadok-swing-trapeze {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}

@keyframes shadok-pulse-batteur {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-4px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-6px); }
  60% { transform: translateY(0); }
}

@keyframes shadok-bob-marionnette {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes shadok-wobble-clown {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-5px) rotate(-3deg); }
  70% { transform: translateY(-2px) rotate(3deg); }
}

@keyframes shadok-spin-acrobate {
  0% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(10deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes shadok-rush-regisseur {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(3px) translateY(-5px); }
  50% { transform: translateX(-2px) translateY(-2px); }
  75% { transform: translateX(2px) translateY(-6px); }
}

@media (max-width: 768px) {
  .shadok-funambule,
  .shadok-accordeoniste,
  .shadok-jongleur,
  .shadok-cracheur,
  .shadok-trapeziste,
  .shadok-batteur,
  .shadok-marionnettiste,
  .shadok-clown,
  .shadok-acrobate,
  .shadok-regisseur {
    display: none;
  }
}
</style>
