From 31308ff8bc028b83d39ab62ede5da819ad0e8ca5 Mon Sep 17 00:00:00 2001
From: cdm227 <calogero.dimino92@gmail.com>
Date: Fri, 12 Jun 2026 11:07:27 +0200
Subject: [PATCH] Fixes 100vh hero mobile WCAG/APCA

---
 README.md          |  36 +++++----
 public/css/app.css | 134 +++++++++++++++++++++++++++++++--
 public/demo.html   | 181 ++++++++++++++++++++++++++++++++++++++++-----
 public/index.html  |  26 +++++--
 public/js/app.js   |  15 ++++
 5 files changed, 343 insertions(+), 49 deletions(-)

diff --git a/README.md b/README.md
index cd9ba5a..c37b2e3 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,13 @@
 
 Sicilian agricultural value-chain optimizer powered by **Fabric IQ**, **Foundry IQ**, and **Work IQ** — with GitHub Copilot MCP contract generation.
 
-## Intro Video
+## Submission Demo Video (Agents League)
+
+**2-min judge walkthrough:** [youtu.be/o8KqG8foLfM](https://youtu.be/o8KqG8foLfM)
+
+Recorded from the live teleprompter at [demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) (Fabric / Foundry / Vision / agent memory / Work IQ story).
+
+## Intro Video (README)
 
 <video src="public/media/agrivalue-iq-intro.mp4" controls width="100%" poster="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80"></video>
 
@@ -92,12 +98,12 @@ npm run agent:action -- contract --crop "Olive Oil" --qty 15 --buyer "Cooperativ
 
 ## Challenge Requirements
 
-| Requirement | Documentation |
-|-------------|---------------|
-| GitHub Copilot usage | [docs/COPILOT.md](docs/COPILOT.md) |
-| Microsoft IQ (×3) | [docs/MICROSOFT_IQ.md](docs/MICROSOFT_IQ.md) |
-| Azure deployment | [docs/AZURE_DEPLOY.md](docs/AZURE_DEPLOY.md) |
-| 2-min demo video script | [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md) |
+| Requirement | Status | Documentation |
+|-------------|--------|---------------|
+| GitHub Copilot + MCP | Done | [docs/COPILOT.md](docs/COPILOT.md) |
+| Microsoft IQ (×3) | Demo + docs | [docs/MICROSOFT_IQ.md](docs/MICROSOFT_IQ.md) |
+| Azure deployment | Workflow ready | [docs/AZURE_DEPLOY.md](docs/AZURE_DEPLOY.md) |
+| Submission demo video | [YouTube](https://youtu.be/o8KqG8foLfM) | [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md) |
 
 ## UI Features (v3)
 
@@ -123,16 +129,16 @@ infra/                  # Bicep + Fabric SQL schema
 .github/workflows/      # Azure + GitHub Pages deploy
 ```
 
-## Record Your 2-Min Submission Video
-
-Full step-by-step: [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md)
+## Agents League Submission
 
-### Quick checklist
+| Item | Link |
+|------|------|
+| **Demo video** | https://youtu.be/o8KqG8foLfM |
+| **Live app** | https://cdm227.github.io/AgriValue-Tracker/demo.html |
+| **Register** (required for badge/prizes) | https://aka.ms/agentsleague/register |
+| **Submit issue** (official) | [microsoft/agentsleague — Project Submission](https://github.com/microsoft/agentsleague/issues/new?template=project.yml) |
 
-1. **Demo page:** [demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) → **Start 2-Min Judge Demo** (teleprompter + narration)
-2. **Copilot MCP:** Open this repo in VS Code → Copilot Chat → `@agrivalue-iq generate_supply_contract ...` (see script)
-3. **Record:** OBS, Win+G (Xbox Game Bar), or Loom — capture demo page + VS Code split or cut
-4. **Upload:** YouTube (unlisted) or Loom → paste link at [aka.ms/agentsleague/aisf](https://aka.ms/agentsleague/aisf)
+Recording notes: [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md)
 
 ### Fix default branch & auto-deploy (one-time)
 
diff --git a/public/css/app.css b/public/css/app.css
index 6f58e15..1b8cacf 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -4,6 +4,107 @@
   color-scheme: dark;
 }
 
+html {
+  height: 100%;
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+body.h-full {
+  min-height: 100vh;
+  min-height: 100dvh;
+  height: 100%;
+}
+
+.welcome-hero-media {
+  position: relative;
+  isolation: isolate;
+  min-height: clamp(160px, 28vh, 220px);
+}
+
+.welcome-hero-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  object-fit: cover;
+}
+
+.welcome-hero-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.28);
+  pointer-events: none;
+}
+
+.welcome-hero-caption {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: clamp(16px, 4vw, 24px);
+  text-align: left;
+}
+
+.welcome-hero-eyebrow {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #a7f3d0;
+}
+
+.welcome-hero-title {
+  font-size: clamp(1.25rem, 4vw, 1.65rem);
+  font-weight: 800;
+  line-height: 1.15;
+  color: #ffffff;
+  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+  max-width: 22ch;
+}
+
+.welcome-hero-btn-dettagli {
+  margin-top: 4px;
+  border: 2px solid #f8fafc;
+  border-radius: 10px;
+  padding: 9px 16px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #0c0a09;
+  background: #f8fafc;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
+}
+
+.welcome-hero-btn-dettagli:hover {
+  background: #ffffff;
+  color: #052e16;
+  transform: translateY(-1px);
+}
+
+.welcome-hero-btn-dettagli:focus-visible {
+  outline: 3px solid #6ee7b7;
+  outline-offset: 2px;
+}
+
+.welcome-hero-details {
+  margin-top: 12px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid rgba(52, 211, 153, 0.22);
+  background: rgba(2, 6, 23, 0.55);
+}
+
+.welcome-hero-details.is-open {
+  display: block !important;
+}
+
 body {
   background:
     radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 28rem),
@@ -614,17 +715,17 @@ body[data-theme="light"] .upload-photo-btn:hover {
 @media (max-width: 1024px) {
   html,
   body {
-    height: auto;
-    min-height: 100%;
+    min-height: 100vh;
+    min-height: 100dvh;
+    height: 100%;
   }
 
   body {
-    overflow: auto !important;
+    overflow: hidden !important;
   }
 
   body.h-full.overflow-hidden {
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
   }
 
   .iq-pills-mobile {
@@ -668,7 +769,11 @@ body[data-theme="light"] .upload-photo-btn:hover {
   main {
     display: flex !important;
     flex-direction: column;
-    overflow: visible !important;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto !important;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
   }
 
   main > section,
@@ -784,8 +889,21 @@ body[data-theme="light"] .upload-photo-btn:hover {
     font-size: 26px;
   }
 
-  #welcome-pane .max-w-3xl {
-    height: 128px;
+  .welcome-hero-media {
+    min-height: clamp(148px, 30vh, 200px);
+  }
+
+  .welcome-hero-caption {
+    align-items: stretch;
+  }
+
+  .welcome-hero-btn-dettagli {
+    width: 100%;
+    text-align: center;
+  }
+
+  .welcome-hero-summary {
+    display: none;
   }
 
   #added-value-amt {
diff --git a/public/demo.html b/public/demo.html
index 9c86b31..f793631 100644
--- a/public/demo.html
+++ b/public/demo.html
@@ -11,9 +11,17 @@
     <script src="config.js"></script>
     <style>
         *, *::before, *::after { box-sizing: border-box; }
+        html {
+            height: 100%;
+            min-height: 100vh;
+            min-height: 100dvh;
+        }
         body {
             font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
             background: #0c0a09;
+            min-height: 100vh;
+            min-height: 100dvh;
+            height: 100%;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }
@@ -25,7 +33,100 @@
             backdrop-filter: blur(16px);
             -webkit-backdrop-filter: blur(16px);
         }
-        .demo-shell { grid-template-rows: minmax(0, 1fr); }
+        .demo-shell {
+            grid-template-rows: minmax(0, 1fr);
+            min-height: 100vh;
+            min-height: 100dvh;
+            height: 100vh;
+            height: 100dvh;
+        }
+        .demo-hero {
+            position: relative;
+            isolation: isolate;
+            overflow: hidden;
+            border-radius: 20px;
+            min-height: clamp(220px, 38vh, 320px);
+        }
+        .demo-hero-media {
+            position: absolute;
+            inset: 0;
+            background-size: cover;
+            background-position: center;
+            transform: scale(1.02);
+        }
+        .demo-hero-scrim {
+            position: absolute;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.28);
+            pointer-events: none;
+        }
+        .demo-hero-content {
+            position: relative;
+            z-index: 1;
+            padding: clamp(20px, 4vw, 32px);
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-end;
+            min-height: inherit;
+            gap: 10px;
+        }
+        .demo-hero-eyebrow {
+            font-size: 10px;
+            font-weight: 800;
+            letter-spacing: .14em;
+            text-transform: uppercase;
+            color: #a7f3d0;
+        }
+        .demo-hero-title {
+            font-size: clamp(1.35rem, 4.5vw, 1.85rem);
+            font-weight: 800;
+            line-height: 1.15;
+            color: #ffffff;
+            text-shadow: 0 2px 16px rgba(0,0,0,.45);
+            max-width: 28ch;
+        }
+        .demo-hero-lead {
+            font-size: clamp(.8rem, 2.8vw, .9rem);
+            line-height: 1.5;
+            color: #f5f5f4;
+            max-width: 52ch;
+            text-shadow: 0 1px 10px rgba(0,0,0,.4);
+        }
+        /* APCA/WCAG ≥ 5.48:1 — #0c0a09 on #f8fafc ≈ 19:1 */
+        .demo-hero-btn-dettagli {
+            margin-top: 6px;
+            border: 2px solid #f8fafc;
+            border-radius: 12px;
+            padding: 11px 18px;
+            font-size: 12px;
+            font-weight: 800;
+            letter-spacing: .06em;
+            text-transform: uppercase;
+            color: #0c0a09;
+            background: #f8fafc;
+            box-shadow: 0 8px 24px rgba(0,0,0,.35);
+            transition: background .2s ease, color .2s ease, transform .15s ease;
+        }
+        .demo-hero-btn-dettagli:hover {
+            background: #ffffff;
+            color: #052e16;
+            transform: translateY(-1px);
+        }
+        .demo-hero-btn-dettagli:focus-visible {
+            outline: 3px solid #6ee7b7;
+            outline-offset: 2px;
+        }
+        .demo-hero-details {
+            margin-top: 14px;
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid rgba(52,211,153,.25);
+            background: rgba(0,0,0,.35);
+        }
+        .demo-hero-details.is-open { display: block !important; }
+        .hero-step { padding: 0 !important; overflow: hidden; }
+        .hero-step .demo-hero-details { margin: 0; border-radius: 0; border: none; border-top: 1px solid rgba(52,211,153,.2); }
         .step { opacity: .45; transform: scale(.98); transition: all .45s ease; }
         .step.visible { opacity: 1; transform: scale(1); border-color: rgba(16,185,129,.55); }
         .step.current { box-shadow: 0 0 0 1px rgba(52,211,153,.7), 0 18px 55px rgba(16,185,129,.16); background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(28,25,23,.78)); }
@@ -182,14 +283,15 @@
             font-size: 12px;
             font-weight: 700;
             letter-spacing: .03em;
-            color: #6ee7b7;
-            background: rgba(16,185,129,.08);
-            border: 1px solid rgba(52,211,153,.28);
+            color: #f8fafc;
+            background: rgba(5, 46, 22, 0.92);
+            border: 1px solid rgba(167, 243, 208, 0.45);
             transition: background .2s ease, border-color .2s ease, transform .15s ease;
         }
         .demo-btn-secondary:hover:not(:disabled) {
-            background: rgba(16,185,129,.14);
-            border-color: rgba(52,211,153,.5);
+            background: rgba(6, 78, 59, 0.95);
+            border-color: rgba(167, 243, 208, 0.65);
+            color: #ffffff;
             transform: translateY(-1px);
         }
         .demo-btn-ghost {
@@ -288,17 +390,32 @@
         }
         .aside-compact { display: block; }
         @media (max-width: 1024px) {
-            body.h-full.overflow-hidden { height: auto; min-height: 100%; overflow: auto; }
+            html, body {
+                min-height: 100vh;
+                min-height: 100dvh;
+                height: 100%;
+            }
+            body.h-full.overflow-hidden {
+                min-height: 100vh;
+                min-height: 100dvh;
+                height: 100%;
+                overflow: hidden;
+            }
             .demo-shell {
                 display: flex;
                 flex-direction: column;
                 grid-template-columns: 1fr !important;
                 min-height: 100vh;
-                height: auto;
+                min-height: 100dvh;
+                height: 100vh;
+                height: 100dvh;
             }
             .demo-mobile-bar { display: flex; }
-            main { order: 1; height: auto; min-height: 0; flex: 1; }
-            aside { order: 2; height: auto !important; }
+            main { order: 1; min-height: 0; flex: 1; height: auto; overflow: hidden; }
+            aside { order: 2; height: auto !important; max-height: 42vh; overflow-y: auto; flex-shrink: 0; }
+            .demo-hero { min-height: clamp(200px, 32vh, 280px); }
+            .demo-hero-content { align-items: stretch; }
+            .demo-hero-btn-dettagli { width: 100%; text-align: center; }
             aside .metric-explainer,
             aside .grid.grid-cols-3,
             aside .space-y-3 { display: none; }
@@ -431,15 +548,20 @@ <h1 class="text-4xl font-black mt-2">AgriValue IQ</h1>
 
             <div id="story-scroll">
             <div id="story-board">
-                <div class="step glass rounded-3xl p-4 visible col-span-2" data-step="0">
-                    <div class="grid grid-cols-[1.2fr_.8fr] gap-4 items-center">
-                        <video id="intro-video" class="w-full rounded-2xl border border-emerald-500/20 shadow-2xl shadow-emerald-950/30" src="media/agrivalue-iq-intro.mp4" muted playsinline controls poster="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80"></video>
-                        <div>
-                            <p class="text-[10px] text-emerald-400 font-black uppercase tracking-widest">Intro Video</p>
-                            <h2 class="text-2xl font-black mt-2">From raw harvest to certified value.</h2>
-                            <p class="text-stone-300 text-sm mt-3">A friendly AI story that shows how farmers can turn raw harvest into higher-value products — Don Salvatore listens, Matteo finds the money, Sofia checks the papers, and Copilot packages the deal.</p>
+                <div class="step glass rounded-3xl visible col-span-2 hero-step" data-step="0">
+                    <div class="demo-hero">
+                        <div class="demo-hero-media" style="background-image:url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1600&q=80')" role="img" aria-label="Sicilian olive fields at sunset"></div>
+                        <div class="demo-hero-scrim" aria-hidden="true"></div>
+                        <div class="demo-hero-content">
+                            <p class="demo-hero-eyebrow">Battle #1 · Intro</p>
+                            <h2 class="demo-hero-title">From raw harvest to certified value.</h2>
+                            <p class="demo-hero-lead">Don Salvatore, Matteo, and Sofia turn a silo sale into local DOP value — then Copilot drafts the contract.</p>
+                            <button type="button" id="btn-hero-dettagli" class="demo-hero-btn-dettagli" aria-expanded="false" aria-controls="hero-details">Dettagli</button>
                         </div>
                     </div>
+                    <div id="hero-details" class="demo-hero-details hidden">
+                        <video id="intro-video" class="w-full block" src="media/agrivalue-iq-intro.mp4" muted playsinline controls poster="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80" title="AgriValue IQ intro video"></video>
+                    </div>
                 </div>
                 <div class="step glass rounded-3xl p-6" data-step="1">
                     <p class="text-[10px] text-emerald-400 font-black uppercase tracking-widest">Problem</p>
@@ -530,6 +652,7 @@ <h2 class="text-3xl font-black mt-3">Mamma mia — andiamo!</h2>
 
         document.getElementById("btn-start").onclick = startDemo;
         document.getElementById("btn-start-mobile").onclick = () => document.getElementById("btn-start").click();
+        document.getElementById("btn-hero-dettagli").onclick = toggleHeroDetails;
         document.getElementById("btn-audio").onclick = toggleAudioNarration;
         document.getElementById("btn-replay").onclick = () => { hideFinale(); startDemo(); };
         document.getElementById("btn-close-finale").onclick = hideFinale;
@@ -707,16 +830,36 @@ <h2 class="text-3xl font-black mt-3">Mamma mia — andiamo!</h2>
             status.classList.add("visible");
         }
 
+        function toggleHeroDetails() {
+            const panel = document.getElementById("hero-details");
+            const btn = document.getElementById("btn-hero-dettagli");
+            const open = !panel.classList.contains("is-open");
+            panel.classList.toggle("hidden", !open);
+            panel.classList.toggle("is-open", open);
+            btn.setAttribute("aria-expanded", open ? "true" : "false");
+            btn.textContent = open ? "Nascondi video" : "Dettagli";
+            if (open) {
+                panel.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                playIntroVideo();
+            }
+        }
+
         function playIntroVideo() {
             const video = document.getElementById("intro-video");
+            const panel = document.getElementById("hero-details");
+            const btn = document.getElementById("btn-hero-dettagli");
             if (!video) return;
+            if (panel && !panel.classList.contains("is-open")) {
+                panel.classList.remove("hidden");
+                panel.classList.add("is-open");
+                btn?.setAttribute("aria-expanded", "true");
+                if (btn) btn.textContent = "Nascondi video";
+            }
             video.muted = true;
             video.currentTime = 0;
             video.play().catch(() => {});
         }
 
-        playIntroVideo();
-
         function showCopilotPrompt() {
             exitLiveApp();
             document.querySelectorAll(".step").forEach(el => {
diff --git a/public/index.html b/public/index.html
index 2044884..78aac0f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -187,17 +187,29 @@ <h3 class="panel-card-title text-[10px] font-bold text-slate-400 uppercase track
         <section class="flex-1 flex flex-col gap-4 p-4 overflow-hidden min-w-0">
             <div class="glass rounded-2xl flex-1 overflow-y-auto p-6">
                 <div id="welcome-pane" class="h-full flex flex-col items-center justify-center text-center">
-                    <div class="w-full max-w-3xl h-40 rounded-3xl overflow-hidden mb-6 border border-emerald-500/10 shadow-2xl shadow-emerald-950/20">
-                        <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1400&q=80" alt="Mediterranean fields" class="w-full h-full object-cover opacity-70">
+                    <div class="welcome-hero w-full max-w-3xl mb-6">
+                        <div class="welcome-hero-media rounded-3xl overflow-hidden border border-emerald-500/10 shadow-2xl shadow-emerald-950/20">
+                            <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1400&q=80" alt="Mediterranean fields at sunset" class="welcome-hero-img">
+                            <div class="welcome-hero-scrim" aria-hidden="true"></div>
+                            <div class="welcome-hero-caption">
+                                <p class="welcome-hero-eyebrow">AgriValue IQ · Sicily</p>
+                                <h2 class="welcome-hero-title shimmer-text">Your best route, explained simply</h2>
+                                <button type="button" id="welcome-hero-dettagli" class="welcome-hero-btn-dettagli" aria-expanded="false" aria-controls="welcome-hero-details">Dettagli</button>
+                            </div>
+                        </div>
+                        <div id="welcome-hero-details" class="welcome-hero-details hidden" role="region" aria-label="Harvest workflow details">
+                            <p class="text-slate-300 text-sm leading-relaxed text-left">
+                                <strong class="text-emerald-300">Step 1:</strong> find local buyers and costs.
+                                <strong class="text-indigo-300">Step 2:</strong> Vision scan grades your crop and boosts Path B.
+                                <strong class="text-violet-300">Step 3:</strong> agents remember every trade in history.
+                            </p>
+                        </div>
                     </div>
                     <div class="w-20 h-20 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-5 animate-[float_3s_ease-in-out_infinite]">
                         <i data-lucide="sprout" class="w-10 h-10 text-emerald-400"></i>
                     </div>
-                    <h2 class="text-2xl font-black text-white shimmer-text">Your best route, explained simply</h2>
-                    <p class="text-slate-400 text-sm mt-3 max-w-lg leading-relaxed">
-                        <strong class="text-emerald-400">Step 1:</strong> find local buyers and costs.
-                        <strong class="text-indigo-400">Step 2:</strong> Vision scan grades your crop and boosts Path B.
-                        <strong class="text-violet-400">Step 3:</strong> agents remember every trade in history.
+                    <p class="text-slate-400 text-sm mt-3 max-w-lg leading-relaxed welcome-hero-summary">
+                        Run the IQ pipeline on the left — Matteo compares Path A vs Path B, Sofia checks DOP, then export the contract.
                     </p>
                     <div class="grid grid-cols-3 gap-4 mt-8 max-w-md w-full">
                         <div class="glass rounded-xl p-3 text-center"><i data-lucide="crown" class="w-5 h-5 text-amber-400 mx-auto mb-1"></i><span class="text-[10px] text-slate-400">Don Salvatore</span></div>
diff --git a/public/js/app.js b/public/js/app.js
index cf65358..15939ad 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -23,6 +23,7 @@ export function initApp() {
   setupCropListener();
   setupAdvisor();
   setupIntro();
+  setupWelcomeHero();
   renderTradeHistory(document.getElementById("trade-history-list"));
   if (window.lucide) lucide.createIcons();
 }
@@ -76,6 +77,20 @@ function setupIntro() {
   if (!localStorage.getItem("agrivalue-intro-seen")) showIntro(true);
 }
 
+function setupWelcomeHero() {
+  const btn = document.getElementById("welcome-hero-dettagli");
+  const panel = document.getElementById("welcome-hero-details");
+  if (!btn || !panel) return;
+  btn.addEventListener("click", () => {
+    const open = !panel.classList.contains("is-open");
+    panel.classList.toggle("hidden", !open);
+    panel.classList.toggle("is-open", open);
+    btn.setAttribute("aria-expanded", open ? "true" : "false");
+    btn.textContent = open ? "Nascondi" : "Dettagli";
+    if (open) panel.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  });
+}
+
 window.showIntro = function (visible) {
   const overlay = document.getElementById("intro-overlay");
   if (!overlay) return;