{"id":44,"date":"2026-05-26T19:44:49","date_gmt":"2026-05-26T17:44:49","guid":{"rendered":"https:\/\/gianluca.toscanoagency.com\/?page_id=44"},"modified":"2026-05-27T10:56:20","modified_gmt":"2026-05-27T08:56:20","slug":"portfolio-ia","status":"publish","type":"page","link":"https:\/\/gianluca.toscanoagency.com\/index.php\/portfolio-ia\/","title":{"rendered":"Portfolio Ia"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"44\" class=\"elementor elementor-44\">\n\t\t\t\t<div class=\"elementor-element elementor-element-30c0ee6 e-con-full e-flex e-con e-parent\" data-id=\"30c0ee6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d09257d elementor-widget elementor-widget-html\" data-id=\"d09257d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<!-- Stili portfolio -->\n<style>\n  \/* ====== TOKENS ====== *\/\n  .ai-portfolio{\n    --bg:        oklch(0.985 0.004 95);\n    --bg-soft:   oklch(0.965 0.006 95);\n    position: relative;\n    --ink:       oklch(0.16 0.012 270);\n    --ink-soft:  oklch(0.42 0.012 270);\n    --line:      oklch(0.88 0.008 270);\n    --accent:    oklch(0.58 0.19 295);\n    --accent-2:  oklch(0.72 0.14 220);\n\n    --display: \"Bricolage Grotesque\", ui-serif, Georgia, serif;\n    --body:    \"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    --mono:    \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\n    --maxw: 1200px;\n    --pad: clamp(18px, 5vw, 56px);\n\n    color: var(--ink);\n    font-family: var(--body);\n    font-weight: 400;\n    line-height: 1.55;\n    background: var(--bg);\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n  }\n  .ai-portfolio *,\n  .ai-portfolio *::before,\n  .ai-portfolio *::after { box-sizing: border-box; }\n\n  .ai-portfolio img, .ai-portfolio video { max-width: 100%; display: block; }\n\n  \/* ====== GLOBAL ANIMATED BACKGROUND ======\n     Sits behind the WHOLE landing (position:fixed) so it stays\n     animated under every section as the user scrolls. *\/\n  .ai-portfolio .bg-layer{\n    position: fixed; inset: 0;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .ai-portfolio .bg-base{\n    position: absolute; inset: 0;\n    background: var(--bg);\n  }\n  .ai-portfolio .bg-mesh{\n    position: absolute; inset: 0;\n    overflow: hidden;\n  }\n  .ai-portfolio .bg-mesh::before,\n  .ai-portfolio .bg-mesh::after{\n    content:\"\"; position:absolute; inset:-20%;\n    filter: blur(70px);\n    opacity: .38;\n    will-change: transform;\n  }\n  .ai-portfolio .bg-mesh::before{\n    background:\n      radial-gradient(38% 32% at 20% 25%, oklch(0.78 0.15 295 \/ .85), transparent 60%),\n      radial-gradient(34% 28% at 80% 18%, oklch(0.82 0.12 220 \/ .75), transparent 60%),\n      radial-gradient(42% 36% at 55% 78%, oklch(0.88 0.10 180 \/ .6), transparent 65%);\n    animation: drift1 24s ease-in-out infinite alternate;\n  }\n  .ai-portfolio .bg-mesh::after{\n    background:\n      radial-gradient(28% 26% at 75% 60%, oklch(0.78 0.16 320 \/ .6), transparent 60%),\n      radial-gradient(38% 32% at 15% 78%, oklch(0.85 0.10 250 \/ .65), transparent 60%);\n    animation: drift2 30s ease-in-out infinite alternate;\n  }\n  @keyframes drift1 {\n    0%   { transform: translate(0,0) rotate(0deg) scale(1); }\n    100% { transform: translate(4%, -3%) rotate(8deg) scale(1.1); }\n  }\n  @keyframes drift2 {\n    0%   { transform: translate(0,0) rotate(0deg) scale(1.05); }\n    100% { transform: translate(-5%, 4%) rotate(-10deg) scale(.95); }\n  }\n\n  \/* Faint grid *\/\n  .ai-portfolio .bg-grid{\n    position: absolute; inset: 0;\n    background-image:\n      linear-gradient(to right, oklch(0.16 0.012 270 \/ .05) 1px, transparent 1px),\n      linear-gradient(to bottom, oklch(0.16 0.012 270 \/ .05) 1px, transparent 1px);\n    background-size: 64px 64px;\n    mask-image: radial-gradient(ellipse at center, black 20%, transparent 85%);\n  }\n\n  \/* Canvas particle layer *\/\n  .ai-portfolio #aiCanvas{\n    position: absolute; inset: 0;\n    width: 100%; height: 100%;\n  }\n\n  \/* All content sits above the bg *\/\n  .ai-portfolio > header,\n  .ai-portfolio > main,\n  .ai-portfolio > footer{\n    position: relative;\n    z-index: 1;\n  }\n\n  \/* ====== HERO ====== *\/\n  .ai-portfolio .hero{\n    position: relative;\n    min-height: 100vh;\n    min-height: 100svh;\n    display: flex;\n    flex-direction: column;\n  }\n\n  \/* Nav *\/\n  .ai-portfolio .nav{\n    position: relative; z-index: 2;\n    display: flex; justify-content: space-between; align-items: center;\n    padding: 22px var(--pad);\n    font-family: var(--mono);\n    font-size: 13px;\n    letter-spacing: .02em;\n  }\n  .ai-portfolio .nav .mark{\n    display: inline-flex; align-items: center; gap: 10px;\n    font-weight: 500;\n  }\n  .ai-portfolio .nav .mark .dot{\n    width: 9px; height: 9px; border-radius: 50%;\n    background: var(--accent);\n    box-shadow: 0 0 0 4px oklch(0.58 0.19 295 \/ .15);\n    animation: pulse 2.4s ease-in-out infinite;\n  }\n  @keyframes pulse{\n    0%,100%{ box-shadow: 0 0 0 4px oklch(0.58 0.19 295 \/ .15); }\n    50%{ box-shadow: 0 0 0 8px oklch(0.58 0.19 295 \/ 0); }\n  }\n  .ai-portfolio .nav ul{\n    list-style: none; padding: 0; margin: 0;\n    display: flex; gap: 28px;\n  }\n  .ai-portfolio .nav a{\n    color: var(--ink-soft); text-decoration: none;\n    transition: color .2s;\n  }\n  .ai-portfolio .nav a:hover{ color: var(--ink); }\n\n  \/* Hero content *\/\n  .ai-portfolio .hero-inner{\n    flex: 1;\n    display: grid;\n    place-items: center;\n    padding: 40px var(--pad) 80px;\n    position: relative; z-index: 1;\n  }\n  .ai-portfolio .hero-content{\n    max-width: var(--maxw);\n    width: 100%;\n    text-align: center;\n  }\n\n  .ai-portfolio .eyebrow{\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: .18em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n    margin-bottom: 28px;\n    display: inline-flex; align-items: center; gap: 10px;\n    padding: 8px 14px;\n    border: 1px solid var(--line);\n    border-radius: 100px;\n    background: oklch(1 0 0 \/ .55);\n    backdrop-filter: blur(8px);\n  }\n  .ai-portfolio .eyebrow::before{\n    content:\"\"; width: 6px; height: 6px; border-radius:50%;\n    background: var(--accent);\n  }\n\n  .ai-portfolio h1.hero-title{\n    font-family: var(--display);\n    font-weight: 500;\n    font-size: clamp(40px, 11vw, 132px);\n    line-height: .95;\n    letter-spacing: -0.04em;\n    margin: 0 0 22px;\n    text-wrap: balance;\n  }\n  \/* Split-word stagger reveal *\/\n  .ai-portfolio h1.hero-title .w{\n    display: inline-block;\n    opacity: 0;\n    transform: translateY(0.6em) rotate(2deg);\n    animation: wordIn .9s cubic-bezier(.2,.7,.2,1) forwards;\n    animation-delay: calc(var(--i, 0) * 90ms + 200ms);\n  }\n  @keyframes wordIn{\n    to { opacity: 1; transform: none; }\n  }\n  .ai-portfolio h1.hero-title em{\n    font-style: italic;\n    font-weight: 400;\n    background: linear-gradient(120deg, var(--accent), var(--accent-2));\n    -webkit-background-clip: text;\n    background-clip: text;\n    color: transparent;\n  }\n\n  .ai-portfolio .hero-sub{\n    font-size: clamp(15px, 1.6vw, 20px);\n    color: var(--ink-soft);\n    max-width: 560px;\n    margin: 0 auto 36px;\n    text-wrap: pretty;\n    opacity: 0;\n    animation: fadeUp .8s ease forwards;\n    animation-delay: .7s;\n  }\n  @keyframes fadeUp{\n    from { opacity: 0; transform: translateY(12px); }\n    to   { opacity: 1; transform: none; }\n  }\n\n  .ai-portfolio .hero-cta{\n    display: inline-flex; gap: 14px; flex-wrap: wrap;\n    justify-content: center;\n    margin-bottom: 72px;\n  }\n  .ai-portfolio .btn{\n    display: inline-flex; align-items: center; gap: 10px;\n    padding: 14px 22px;\n    border-radius: 100px;\n    font-family: var(--body);\n    font-size: 15px;\n    font-weight: 500;\n    text-decoration: none;\n    transition: transform .2s, background .2s, color .2s;\n  }\n  .ai-portfolio .btn-primary{\n    background: var(--ink);\n    color: var(--bg);\n  }\n  .ai-portfolio .btn-primary:hover{ transform: translateY(-2px); }\n  .ai-portfolio .btn-ghost{\n    background: oklch(1 0 0 \/ .6);\n    color: var(--ink);\n    border: 1px solid var(--line);\n    backdrop-filter: blur(8px);\n  }\n  .ai-portfolio .btn-ghost:hover{ background: oklch(1 0 0 \/ .9); }\n\n  \/* Tool logos row *\/\n  .ai-portfolio .tools{\n    margin-top: 12px;\n  }\n  .ai-portfolio .tools .tools-label{\n    font-family: var(--mono);\n    font-size: 11px;\n    letter-spacing: .2em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n    margin-bottom: 22px;\n  }\n  .ai-portfolio .tools-row{\n    display: flex; flex-wrap: wrap; justify-content: center;\n    gap: 10px;\n    max-width: 900px; margin: 0 auto;\n  }\n  @media (min-width: 720px){\n    .ai-portfolio .tools-row{ gap: 14px 20px; }\n  }\n  .ai-portfolio .tool{\n    display: inline-flex; align-items: center; gap: 8px;\n    font-family: var(--body);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--ink);\n    opacity: 0;\n    padding: 7px 12px;\n    border: 1px solid var(--line);\n    border-radius: 100px;\n    background: oklch(1 0 0 \/ .5);\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    transition: opacity .2s, transform .25s, background .25s;\n    animation: chipIn .6s ease forwards;\n    animation-delay: calc(var(--i, 0) * 70ms + 900ms);\n  }\n  @media (min-width: 720px){\n    .ai-portfolio .tool{ font-size: 14px; padding: 8px 14px; }\n  }\n  @keyframes chipIn{\n    from { opacity: 0; transform: translateY(8px) scale(.96); }\n    to   { opacity: .9; transform: none; }\n  }\n  .ai-portfolio .tool:hover{ opacity: 1; transform: translateY(-2px); background: oklch(1 0 0 \/ .8); }\n  .ai-portfolio .tool .glyph{\n    width: 8px; height: 8px;\n    border-radius: 2px;\n    background: var(--accent);\n  }\n  .ai-portfolio .tool[data-c=\"b\"] .glyph{ background: var(--accent-2); border-radius:50%; }\n  .ai-portfolio .tool[data-c=\"g\"] .glyph{ background: oklch(0.7 0.14 150); transform: rotate(45deg); }\n  .ai-portfolio .tool[data-c=\"o\"] .glyph{ background: oklch(0.75 0.15 60); border-radius:50%; }\n  .ai-portfolio .tool[data-c=\"r\"] .glyph{ background: oklch(0.68 0.18 25); }\n\n  \/* Scroll hint *\/\n  .ai-portfolio .scroll-hint{\n    position: absolute; bottom: 24px; left: 50%;\n    transform: translateX(-50%);\n    font-family: var(--mono);\n    font-size: 11px;\n    letter-spacing: .2em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n    display: flex; flex-direction: column; align-items: center; gap: 10px;\n  }\n  .ai-portfolio .scroll-hint .line{\n    width: 1px; height: 32px;\n    background: linear-gradient(to bottom, transparent, var(--ink-soft));\n    animation: scrollLine 2s ease-in-out infinite;\n  }\n  @keyframes scrollLine{\n    0%{ transform: scaleY(0); transform-origin: top; }\n    50%{ transform: scaleY(1); transform-origin: top; }\n    51%{ transform: scaleY(1); transform-origin: bottom; }\n    100%{ transform: scaleY(0); transform-origin: bottom; }\n  }\n\n  \/* ====== PROJECT SECTIONS ======\n     Mobile-first: stacked single column by default,\n     two-column grid kicks in from 720px up. *\/\n  .ai-portfolio .section{\n    padding: clamp(64px, 10vh, 160px) var(--pad);\n    border-top: 1px solid oklch(0.16 0.012 270 \/ .08);\n    background: transparent;\n  }\n  .ai-portfolio .section.alt{\n    background: oklch(1 0 0 \/ .25);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n  }\n  .ai-portfolio .section-inner{\n    max-width: var(--maxw);\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: clamp(28px, 5vw, 90px);\n    align-items: center;\n  }\n  @media (min-width: 720px){\n    .ai-portfolio .section-inner{\n      grid-template-columns: 1fr 1fr;\n    }\n    .ai-portfolio .section.reverse .section-inner{\n      direction: rtl;\n    }\n    .ai-portfolio .section.reverse .section-inner > *{ direction: ltr; }\n  }\n\n  .ai-portfolio .section-media{\n    position: relative;\n    aspect-ratio: 4 \/ 5;\n    border-radius: 18px;\n    overflow: hidden;\n    background: oklch(1 0 0 \/ .65);\n    border: 1px solid var(--line);\n    backdrop-filter: blur(6px);\n    -webkit-backdrop-filter: blur(6px);\n    box-shadow:\n      0 1px 2px oklch(0.16 0.012 270 \/ .04),\n      0 24px 60px -20px oklch(0.16 0.012 270 \/ .15);\n    transition: transform .6s cubic-bezier(.2,.7,.2,1);\n  }\n  .ai-portfolio .section-media.video        { aspect-ratio: 16 \/ 10; }\n  .ai-portfolio .section-media.video-v     { aspect-ratio: 9 \/ 16;  }\n  .ai-portfolio .section-media.img-h       { aspect-ratio: 16 \/ 9;  }\n  .ai-portfolio .section-media.img-v       { aspect-ratio: 4 \/ 5;   }\n  .ai-portfolio .section-media.video-43    { aspect-ratio: 4 \/ 3;   }\n\n  \/* ====== SEZIONE 1 \u2014 layout composito ======\n     Riga 1: video centrale full-width\n     Riga 2: due colonne \u2014 video verticale sx | titolo+testo dx  *\/\n  .ai-portfolio .sec1-wrap{\n    max-width: var(--maxw);\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: clamp(16px, 3vw, 28px);\n  }\n  .ai-portfolio .sec1-top .section-media{\n    width: 100%;\n  }\n  .ai-portfolio .sec1-bottom{\n    display: grid !important;\n    grid-template-columns: 1fr 1fr !important;\n    gap: clamp(16px, 3vw, 28px);\n    align-items: center;\n  }\n  @media (max-width: 420px){\n    .ai-portfolio .sec1-bottom{\n      grid-template-columns: 1fr !important;\n    }\n  }\n  @media (min-width: 720px){\n    .ai-portfolio .section-media{ border-radius: 22px; }\n  }\n\n  .ai-portfolio .section-media video{\n    width: 100%; height: 100%;\n    object-fit: cover;\n    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);\n  }\n  .ai-portfolio .section-media img{\n    width: 100%; height: 100%;\n    object-fit: contain;\n    object-position: center;\n    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);\n  }\n  .ai-portfolio .section-media:hover{ transform: translateY(-4px); }\n  .ai-portfolio .section-media:hover img,\n  .ai-portfolio .section-media:hover video{ transform: scale(1.04); }\n\n  \/* Nasconde il placeholder quando immagine o video sono presenti *\/\n  .ai-portfolio .section-media img ~ .media-placeholder,\n  .ai-portfolio .section-media video ~ .media-placeholder { display: none; }\n\n  \/* Placeholder visual when no media is set *\/\n  .ai-portfolio .media-placeholder{\n    position: absolute; inset: 0;\n    display: flex; flex-direction: column;\n    align-items: center; justify-content: center;\n    gap: 12px;\n    background:\n      repeating-linear-gradient(\n        135deg,\n        oklch(0.94 0.008 270) 0 10px,\n        oklch(0.96 0.006 270) 10px 20px\n      );\n    color: var(--ink-soft);\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: .15em;\n    text-transform: uppercase;\n  }\n  .ai-portfolio .media-placeholder .icon{\n    width: 36px; height: 36px;\n    border: 1.5px solid var(--ink-soft);\n    border-radius: 8px;\n    display: grid; place-items: center;\n  }\n\n  .ai-portfolio .section-text .tag{\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: .18em;\n    text-transform: uppercase;\n    color: var(--accent);\n    margin-bottom: 14px;\n    display: inline-block;\n  }\n  .ai-portfolio .section-text h2{\n    font-family: var(--display);\n    font-weight: 500;\n    font-size: clamp(28px, 6vw, 60px);\n    line-height: 1;\n    letter-spacing: -0.025em;\n    margin: 0 0 18px;\n    color: var(--ink);\n    text-wrap: balance;\n  }\n  .ai-portfolio .section-text p{\n    font-size: clamp(15px, 1.5vw, 17px);\n    color: var(--ink-soft);\n    margin: 0;\n    max-width: 52ch;\n    text-wrap: pretty;\n  }\n  .ai-portfolio .section-text .meta{\n    margin-top: 28px;\n    display: flex; flex-wrap: wrap; gap: 10px;\n  }\n  .ai-portfolio .meta-chip{\n    font-family: var(--mono);\n    font-size: 11px;\n    letter-spacing: .1em;\n    text-transform: uppercase;\n    padding: 6px 12px;\n    border: 1px solid var(--line);\n    border-radius: 100px;\n    color: var(--ink-soft);\n  }\n\n  \/* Footer *\/\n  .ai-portfolio .footer{\n    padding: 80px var(--pad) 60px;\n    border-top: 1px solid var(--line);\n    background: var(--bg);\n    text-align: center;\n  }\n  .ai-portfolio .footer h3{\n    font-family: var(--display);\n    font-weight: 500;\n    font-size: clamp(32px, 5vw, 64px);\n    letter-spacing: -0.03em;\n    line-height: 1.05;\n    margin: 0 0 24px;\n    text-wrap: balance;\n  }\n  .ai-portfolio .footer p{\n    color: var(--ink-soft);\n    max-width: 480px;\n    margin: 0 auto 32px;\n  }\n  .ai-portfolio .footer-meta{\n    margin-top: 60px;\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: .15em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n    display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;\n  }\n\n  \/* Reveal animations \u2014 progressive enhancement:\n     content is visible by default; JS adds .reveal-ready BEFORE\n     observing, so if JS \/ IntersectionObserver never fires\n     (e.g. inside some Elementor iframes), everything stays visible. *\/\n\n  \/* MEDIA: clip-path \"curtain\" reveal\n     NB: both states use the 4-value inset() form with explicit\n     percentages so the browser cannot normalize one side to the\n     1-value shorthand (which breaks the transition). *\/\n  .ai-portfolio.reveal-ready [data-reveal=\"media\"]{\n    clip-path: inset(0% 100% 0% 0% round 18px);\n    transform: translateY(20px);\n    transition: clip-path 1.1s cubic-bezier(.7,.05,.2,1),\n                transform 1s cubic-bezier(.2,.7,.2,1);\n  }\n  .ai-portfolio.reveal-ready [data-reveal=\"media\"].in{\n    clip-path: inset(0% 0% 0% 0% round 18px);\n    transform: none;\n  }\n  @media (min-width: 720px){\n    .ai-portfolio.reveal-ready [data-reveal=\"media\"]{\n      clip-path: inset(0% 100% 0% 0% round 22px);\n    }\n    .ai-portfolio.reveal-ready [data-reveal=\"media\"].in{\n      clip-path: inset(0% 0% 0% 0% round 22px);\n    }\n  }\n\n  \/* TEXT: per-child stagger fade-up *\/\n  .ai-portfolio.reveal-ready [data-reveal=\"text\"] > *{\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);\n  }\n  .ai-portfolio.reveal-ready [data-reveal=\"text\"] > *:nth-child(1){ transition-delay: .05s; }\n  .ai-portfolio.reveal-ready [data-reveal=\"text\"] > *:nth-child(2){ transition-delay: .18s; }\n  .ai-portfolio.reveal-ready [data-reveal=\"text\"] > *:nth-child(3){ transition-delay: .32s; }\n  .ai-portfolio.reveal-ready [data-reveal=\"text\"].in > *{\n    opacity: 1;\n    transform: none;\n  }\n\n  \/* Generic reveal (fallback) *\/\n  .ai-portfolio.reveal-ready [data-reveal]:not([data-reveal=\"media\"]):not([data-reveal=\"text\"]){\n    opacity: 0;\n    transform: translateY(28px);\n    transition: opacity .9s ease, transform .9s ease;\n  }\n  .ai-portfolio.reveal-ready [data-reveal]:not([data-reveal=\"media\"]):not([data-reveal=\"text\"]).in{\n    opacity: 1;\n    transform: none;\n  }\n\n  \/* Hero load-in: always plays, no scroll trigger needed *\/\n  .ai-portfolio .hero-content{\n    animation: heroIn 1s ease both;\n  }\n  @keyframes heroIn{\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: none; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .ai-portfolio *{ animation: none !important; transition: none !important; }\n    .ai-portfolio [data-reveal]{\n      opacity: 1 !important;\n      transform: none !important;\n      clip-path: none !important;\n    }\n    .ai-portfolio [data-reveal] > *{ opacity: 1 !important; transform: none !important; }\n    .ai-portfolio h1.hero-title .w{ opacity: 1 !important; transform: none !important; }\n    .ai-portfolio .hero-content{ animation: none; }\n    .ai-portfolio .hero-sub{ opacity: 1 !important; }\n    .ai-portfolio .tool{ opacity: .9 !important; }\n  }\n  \/* ====== VIDEO CONTROLS ====== *\/\n  .ai-portfolio .section-media{ isolation: isolate; }\n\n  .ai-portfolio .vid-controls{\n    position: absolute;\n    bottom: 12px; left: 12px; right: 12px;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 100px;\n    background: oklch(0.08 0.01 270 \/ .55);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    opacity: 0;\n    transform: translateY(6px);\n    transition: opacity .25s ease, transform .25s ease;\n    pointer-events: auto;\n  }\n  .ai-portfolio .section-media:hover .vid-controls{ opacity: 1; transform: none; }\n\n  \/* Pulsante play\/pausa *\/\n  .ai-portfolio .vid-play{\n    flex-shrink: 0;\n    width: 30px; height: 30px;\n    border-radius: 50%;\n    border: none;\n    background: oklch(1 0 0 \/ .18);\n    color: #fff;\n    cursor: pointer;\n    display: grid; place-items: center;\n    transition: background .2s;\n    padding: 0;\n  }\n  .ai-portfolio .vid-play:hover{ background: oklch(1 0 0 \/ .32); }\n  .ai-portfolio .vid-play svg{ display: block; }\n\n  \/* Slider volume *\/\n  .ai-portfolio .vid-vol{\n    flex: 1;\n    -webkit-appearance: none;\n    appearance: none;\n    height: 3px;\n    border-radius: 100px;\n    background: oklch(1 0 0 \/ .25);\n    outline: none;\n    cursor: pointer;\n  }\n  .ai-portfolio .vid-vol::-webkit-slider-thumb{\n    -webkit-appearance: none;\n    width: 13px; height: 13px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 1px 4px rgba(0,0,0,.4);\n  }\n  .ai-portfolio .vid-vol::-moz-range-thumb{\n    width: 13px; height: 13px;\n    border: none;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n  }\n\n  \/* Icona volume *\/\n  .ai-portfolio .vid-vol-icon{\n    flex-shrink: 0;\n    color: oklch(1 0 0 \/ .75);\n    display: grid; place-items: center;\n    width: 18px;\n  }\n  .ai-portfolio .vid-vol-icon svg{ display: block; }\n<\/style>\n\n<!-- Markup portfolio -->\n<div class=\"ai-portfolio\">\n\n  <!-- ============================================================ -->\n  <!-- GLOBAL ANIMATED BACKGROUND (fixed, dietro a tutta la pagina) -->\n  <!-- ============================================================ -->\n  <div class=\"bg-layer\" aria-hidden=\"true\">\n    <div class=\"bg-base\"><\/div>\n    <div class=\"bg-mesh\"><\/div>\n    <div class=\"bg-grid\"><\/div>\n    <canvas id=\"aiCanvas\"><\/canvas>\n  <\/div>\n\n  <!-- ============================================================ -->\n  <!-- HERO \u2014 Sezione principale                                    -->\n  <!-- ============================================================ -->\n  <header class=\"hero\">\n    <nav class=\"nav\">\n      <span class=\"mark\"><span class=\"dot\"><\/span>STUDIO \u2014 AI CREATIVE<\/span>\n    <\/nav>\n\n    <div class=\"hero-inner\">\n      <div class=\"hero-content\">\n        <span class=\"eyebrow\">Portfolio \u00b7 2026<\/span>\n        <h1 class=\"hero-title\">\n          <span class=\"w\" style=\"--i:0\">Immagini<\/span>\n          <span class=\"w\" style=\"--i:1\">e<\/span>\n          <span class=\"w\" style=\"--i:2\">video<\/span><br\/>\n          <span class=\"w\" style=\"--i:3\">generati<\/span>\n          <span class=\"w\" style=\"--i:4\">con<\/span>\n          <span class=\"w\" style=\"--i:5\"><em>AI<\/em>.<\/span>\n        <\/h1>\n        <p class=\"hero-sub\">\n          Direzione creativa e produzione visiva con AI generativa.\n        <\/p>\n\n        <div class=\"tools\">\n          <div class=\"tools-label\">Strumenti & modelli<\/div>\n          <div class=\"tools-row\">\n            <span class=\"tool\" data-c=\"a\" style=\"--i:0\"><span class=\"glyph\"><\/span>ComfyUI<\/span>\n            <span class=\"tool\" data-c=\"b\" style=\"--i:1\"><span class=\"glyph\"><\/span>Claude \u00b7 Anthropic<\/span>\n            <span class=\"tool\" data-c=\"g\" style=\"--i:2\"><span class=\"glyph\"><\/span>Qwen<\/span>\n            <span class=\"tool\" data-c=\"o\" style=\"--i:3\"><span class=\"glyph\"><\/span>LTX 2.3<\/span>\n            <span class=\"tool\" data-c=\"a\" style=\"--i:4\"><span class=\"glyph\"><\/span>Flux<\/span>\n            <span class=\"tool\" data-c=\"r\" style=\"--i:5\"><span class=\"glyph\"><\/span>Wan 2.1<\/span>\n            <span class=\"tool\" data-c=\"b\" style=\"--i:6\"><span class=\"glyph\"><\/span>HunyuanVideo<\/span>\n            <span class=\"tool\" data-c=\"g\" style=\"--i:7\"><span class=\"glyph\"><\/span>Stable Diffusion<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"scroll-hint\">\n      <span>Scroll<\/span>\n      <span class=\"line\"><\/span>\n    <\/div>\n  <\/header>\n\n  <main id=\"lavori\">\n\n    <!-- ============================================================ -->\n    <!-- SEZIONE 1 \u2014 VIDEO CENTRALE + (VIDEO VERTICALE | TESTO)      -->\n    <!-- Riga 1: video centrale orizzontale (16:9)                   -->\n    <!-- Riga 2: video verticale sx \u2014 titolo e testo dx              -->\n    <!-- ============================================================ -->\n    <section class=\"section\">\n      <div class=\"sec1-wrap\">\n\n        <!-- RIGA 1 \u2014 Immagine centrale -->\n        <div class=\"sec1-top\" data-reveal=\"media\">\n          <div class=\"section-media img-h\">\n            <!-- @MEDIA: IMMAGINE CENTRALE (16:9) -->\n            <img decoding=\"async\" src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/Gloria-real-scaled.jpg\" alt=\"Immagine centrale\" \/>\n            <div class=\"media-placeholder\">\n              <div class=\"icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-5-5L5 21\"\/><\/svg>\n              <\/div>\n              Immagine centrale \u00b7 16:9\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- RIGA 2 \u2014 Video verticale sx + Testo dx -->\n        <div class=\"sec1-bottom\">\n\n          <!-- Colonna sx: video verticale -->\n          <div data-reveal=\"media\">\n            <div class=\"section-media video-v\">\n              <!-- @MEDIA: VIDEO VERTICALE (9:16) -->\n              <video autoplay muted loop playsinline preload=\"metadata\"\n                     >\n                <source src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/Edugate-2.mp4\" type=\"video\/mp4\" \/>\n              <\/video>\n              <div class=\"media-placeholder\">\n                <div class=\"icon\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n                <\/div>\n                Video verticale \u00b7 9:16\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Colonna dx: titolo e testo -->\n          <div class=\"section-text\" data-reveal=\"text\">\n            <span class=\"tag\">01<\/span>\n            <h2>Generazione influencer.<\/h2>\n            <p>Partendo da una persona reale, ho replicato il suo modello AI, clonato la sua voce e generato una location. Il video \u00e8 interamente generato.<br> \n            Non \u00e8 coinvolto nessuno oltre me nel processo di generazione.<\/p>\n          <\/div>\n\n        <\/div>\n        <!-- fine sec1-bottom -->\n\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SEZIONE 2 \u2014 IMMAGINE ORIZZONTALE (16:9)                     -->\n    <!-- ============================================================ -->\n    <!-- SEZIONE 2 \u2014 IMMAGINE CENTRALE + (IMMAGINE VERTICALE | TESTO)-->\n    <!-- Riga 1: immagine centrale (16:9)                            -->\n    <!-- Riga 2: immagine verticale sx \u2014 titolo e testo dx           -->\n    <!-- ============================================================ -->\n    <section class=\"section alt\">\n      <div class=\"sec1-wrap\">\n\n        <!-- RIGA 1 \u2014 Immagine centrale -->\n        <div class=\"sec1-top\" data-reveal=\"media\">\n          <div class=\"section-media img-h\">\n            <!-- @MEDIA: IMMAGINE CENTRALE SEZIONE 2 (16:9) -->\n            <img decoding=\"async\" src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/Tavola-disegno-3.png\" alt=\"Ritratti editoriali\" \/>\n            <div class=\"media-placeholder\">\n              <div class=\"icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-5-5L5 21\"\/><\/svg>\n              <\/div>\n              Immagine centrale \u00b7 16:9\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- RIGA 2 \u2014 Immagine verticale sx + Testo dx -->\n        <div class=\"sec1-bottom\">\n\n          <!-- Colonna sx: immagine verticale -->\n          <div data-reveal=\"media\">\n            <div class=\"section-media img-v\">\n              <!-- @MEDIA: IMMAGINE VERTICALE SEZIONE 2 (4:5) -->\n              <video autoplay muted loop playsinline preload=\"metadata\">\n                <source src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/AnimateDiff_00001_p81-audio_hsptp_1776366303.mov\" type=\"video\/mp4\" \/>\n              <\/video>\n              <div class=\"media-placeholder\">\n                <div class=\"icon\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n                <\/div>\n                Video verticale \u00b7 9:16\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Colonna dx: titolo e testo -->\n          <div class=\"section-text\" data-reveal=\"text\">\n            <span class=\"tag\">02<\/span>\n            <h2>Storyboard + Animazione F2F.<\/h2>\n            <p>Generazione di storyboard (o fotografie reali), animazione frame by frame <\/p>\n          <\/div>\n\n        <\/div>\n        <!-- fine sec1-bottom -->\n\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SEZIONE 3 \u2014 IMMAGINE VERTICALE (4:5)                        -->\n    <!-- ============================================================ -->\n    <section class=\"section\">\n      <div class=\"section-inner\">\n        <div class=\"section-media img-v\" data-reveal=\"media\">\n          <!-- @MEDIA: IMMAGINE VERTICALE SEZIONE 3 (4:5) -->\n          <img decoding=\"async\" src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/Tavola-disegno-2.png\" alt=\"Progetto 3\" \/>\n          <div class=\"media-placeholder\">\n            <div class=\"icon\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-5-5L5 21\"\/><\/svg>\n            <\/div>\n            Immagine \u00b7 4:5\n          <\/div>\n        <\/div>\n        <div class=\"section-text\" data-reveal=\"text\">\n          <span class=\"tag\">03<\/span>\n          <h2>Generazione sfondo<\/h2>\n          <p>Semplici immagini su sfondo bianco possono essere riportati su set professionali ad hoc.<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SEZIONE 4 \u2014 IMMAGINE CENTRALE + (VIDEO VERTICALE | TESTO)  -->\n    <!-- Riga 1: immagine centrale (16:9)                           -->\n    <!-- Riga 2: video verticale sx \u2014 titolo e testo dx             -->\n    <!-- ============================================================ -->\n    <section class=\"section alt\">\n      <div class=\"sec1-wrap\">\n\n        <!-- RIGA 1 \u2014 Immagine centrale -->\n        <div class=\"sec1-top\" data-reveal=\"media\">\n          <div class=\"section-media img-h\">\n            <!-- @MEDIA: IMMAGINE CENTRALE SEZIONE 4 (16:9) -->\n            <img decoding=\"async\" src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/Tavola-disegno-1.png\" alt=\"Avatar parlanti\" \/>\n            <div class=\"media-placeholder\">\n              <div class=\"icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-5-5L5 21\"\/><\/svg>\n              <\/div>\n              Immagine centrale \u00b7 16:9\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- RIGA 2 \u2014 Video verticale sx + Testo dx -->\n        <div class=\"sec1-bottom\">\n\n          <!-- Colonna sx: video verticale -->\n          <div data-reveal=\"media\">\n            <div class=\"section-media video-v\">\n              <!-- @MEDIA: VIDEO VERTICALE SEZIONE 4 (9:16) -->\n              <video autoplay muted loop playsinline preload=\"metadata\">\n                <source src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/0518.mp4\" type=\"video\/mp4\" \/>\n              <\/video>\n              <div class=\"media-placeholder\">\n                <div class=\"icon\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n                <\/div>\n                Video verticale \u00b7 9:16\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Colonna dx: titolo e testo -->\n          <div class=\"section-text\" data-reveal=\"text\">\n            <span class=\"tag\">04<\/span>\n            <h2>Scale up+ sfondo + video ads<\/h2>\n            <p>Con immagini di bassa qualit\u00e0 in partenza, ho effettuato uno scalino e una ristrutturazione dell\u2019immagine per poi inserire sfondo e generare video coinvolgenti per meta ads.<\/p>\n          <\/div>\n\n        <\/div>\n        <!-- fine sec1-bottom -->\n\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SEZIONE 5 \u2014 VIDEO 4:3                                       -->\n    <!-- ============================================================ -->\n    <section class=\"section\">\n      <div class=\"section-inner\">\n        <div class=\"section-media video\" data-reveal=\"media\">\n          <!-- @MEDIA: VIDEO FINALE SEZIONE 5 -->\n          <video autoplay muted loop playsinline preload=\"metadata\">\n            <source src=\"https:\/\/gianluca.toscanoagency.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Video-2026-03-18-at-19.25.11.mp4\" type=\"video\/mp4\" \/>\n          <\/video>\n          <div class=\"media-placeholder\">\n            <div class=\"icon\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n            <\/div>\n            Video \u00b7 16:9\n          <\/div>\n        <\/div>\n        <div class=\"section-text\" data-reveal=\"text\">\n          <span class=\"tag\">05<\/span>\n          <h2>Animazione F2F<\/h2>\n          <p>Video generati dalle immagini di default su sfondo bianco.<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n\n\n<style>\n  header.wp-block-template-part,\n  footer.wp-block-template-part {\n    display: none !important;\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef1166c elementor-widget elementor-widget-form\" data-id=\"ef1166c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-084b038 elementor-widget elementor-widget-form\" data-id=\"084b038\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>STUDIO \u2014 AI CREATIVE Portfolio \u00b7 2026 Immagini e video generati con AI. Direzione creativa e produzione visiva con AI generativa. Strumenti &#038; modelli ComfyUI Claude \u00b7 Anthropic Qwen LTX 2.3 Flux Wan 2.1 HunyuanVideo Stable Diffusion Scroll Immagine centrale \u00b7 16:9 Video verticale \u00b7 9:16 01 Generazione influencer. Partendo da una persona reale, ho [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-44","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":67,"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/pages\/44\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/gianluca.toscanoagency.com\/index.php\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}