@font-face {
    font-family: 'Minion Pro';
    src: url('../assets/fonts/MinionPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArialCustom';
    src: url('../assets/fonts/arial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-color: #0056b3;
    --text-color: #333;
    --bg-color: #f4f4f4;
    --slide-bg: transparent;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --control-bg: rgba(255, 255, 255, 0.8);
    --font-main: 'Minion Pro', serif;
    --font-sans: 'ArialCustom', sans-serif;
    --sidebar-width: 17%;
    --sidebar-scale: 0.83;
    --slide4-label-left-bg: linear-gradient(135deg, #A15EB5 0%, #AB437E 100%);
    --slide4-label-right-bg: linear-gradient(135deg, #2B96A4 0%, #4F7EAC 100%);
    /* Responsive unit: 1% of effective slide width (maintaining 16:9 ratio) */
    /* JavaScript will override this with the correct value based on viewport */
    --slide-vw: 1vw;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.app-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 16:9 Aspect Ratio Container */
.main-stage {
    position: relative;
    width: 100%;
    max-width: 177.78vh;
    height: auto;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    background-color: var(--slide-bg);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: width 0.3s ease, margin-right 0.3s ease;
}

@media (min-aspect-ratio: 16/9) {
    .main-stage {
        height: 100vh;
        width: 177.78vh;
    }
}

/* Slides */
#slides-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    transition: transform 0.3s ease;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(1.2 * var(--slide-vw));

}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    overflow: hidden;
}

.slide.no-transition {
    transition: none !important;
}

.slide-content {
    text-align: center;
    z-index: 2;
    overflow: visible !important
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* or cover, depending on requirement. contain is safer for slides */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hotspot {
    position: absolute;
    top: 52%;
    left: 50%;
    width: 30%;
    height: 12%;
    transform: translate(-50%, 0);
    cursor: pointer;
    z-index: 10;
}

/* Slide 2 Specifics */
.slide2-title {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-sans);
    font-size: calc(2.5 * var(--slide-vw));
    font-weight: 700;
    color: #000;
    text-align: center;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

.slide-2-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
    padding: calc(1.2 * var(--slide-vw)) calc(1.5 * var(--slide-vw));
    position: relative;
}

.slide-title {
    font-family: var(--font-sans);
    font-size: calc(3.3 * var(--slide-vw));
    font-weight: bold;
    margin-bottom: calc(1.2 * var(--slide-vw));
    color: black;
}

.split-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(1.5 * var(--slide-vw));
    flex-grow: 1;
    transition: justify-content 0.3s ease, gap 0.3s ease;
}

.slide-2-layout .split-layout {
    background: #DBECED;
    /* Light blue background box */
    border-radius: calc(3 * var(--slide-vw));
    padding: calc(4 * var(--slide-vw)) calc(3 * var(--slide-vw));
    margin-top: calc(5 * var(--slide-vw));
    margin-bottom: calc(2 * var(--slide-vw));
    margin-left: calc(2 * var(--slide-vw));
    margin-right: calc(2 * var(--slide-vw));
    width: 88%;
    align-self: center;
    gap: calc(4 * var(--slide-vw));
    flex-grow: 0;
    flex-shrink: 0;
}

.slide-3-variant .split-layout {
    background: transparent;
    border-radius: calc(3 * var(--slide-vw));
    padding: calc(4 * var(--slide-vw)) calc(3 * var(--slide-vw));
    margin: calc(2 * var(--slide-vw));
    width: 88%;
    align-self: center;
    gap: calc(4 * var(--slide-vw));
    flex-grow: 0;
    flex-shrink: 0;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(1.2 * var(--slide-vw));
    width: 35%;
}

.image-circle {
    width: calc(25 * var(--slide-vw));
    /* Responsive size */
    height: calc(25 * var(--slide-vw));
    max-width: 400px;
    max-height: 400px;
    border-radius: 50%;
    border: calc(0.37 * var(--slide-vw)) solid #c00;
    /* Dark red border */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-2-layout .image-circle,
.slide-3-variant .image-circle {
    background: transparent;
    box-shadow: none;
    border: none;
    width: calc(30 * var(--slide-vw));
    height: calc(30 * var(--slide-vw));
    max-width: 480px;
    max-height: 480px;
}

.image-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.label {
    font-family: var(--font-sans);
    font-size: calc(2.25 * var(--slide-vw));
    font-weight: bold;
    color: #c00;
}

.label-box {
    background: #0098A5;
    /* Teal color */
    color: white;
    font-family: var(--font-sans);
    font-size: calc(2 * var(--slide-vw));
    font-weight: 600;
    padding: calc(0.8 * var(--slide-vw)) calc(2 * var(--slide-vw));
    text-align: center;
    min-width: calc(20 * var(--slide-vw));
}

.slide-2-layout .label-box,
.slide-3-variant .label-box {
    font-size: calc(2.4 * var(--slide-vw));
    padding: calc(1 * var(--slide-vw)) calc(2.5 * var(--slide-vw));
}

.center-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -calc(2.2 * var(--slide-vw));
    /* Align better with circles */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.center-symbol.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}

.plusminus-icon {
    width: calc(6 * var(--slide-vw));
    height: calc(6 * var(--slide-vw));
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}

.slide-ref {
    font-family: var(--font-sans);
    font-size: calc(0.5 * var(--slide-vw));
    text-align: left;
    color: black;
    margin-top: auto;
}

.invisible {
    visibility: hidden;
    pointer-events: none;
}

.slide-3-variant {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.slide[data-slide="2"] {
    background: #ffffff;
}

.slide[data-slide="3"] {
    padding: 0;
}

/* Pink gradient background for slides 3 onwards */
.slide[data-slide="3"],
.slide[data-slide="4"],
.slide[data-slide="5"],
.slide[data-slide="6"],
.slide[data-slide="7"],
.slide[data-slide="8"],
.slide[data-slide="9"],
.slide[data-slide="10"] {
    background: linear-gradient(to bottom, #E7D1C9, white 50%, #E7D1C9);
}

/* Animation State */
#slide2-left-col {
    opacity: 0;
    transition: opacity 1s ease;
}

#slide2-left-col.visible {
    opacity: 1;
}

#slide2-right-col {
    opacity: 0;
    transition: opacity 1s ease;
}

#slide2-right-col.visible {
    opacity: 1;
}

/* Sidebar & Main Stage Responsive Behavior */
.main-stage.with-sidebar {
    /* Keep full stage size; the slide area will shrink via flex, maintaining 16:9 */
    width: 100%;
}

/* Sidebar */
.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100%;
    background: linear-gradient(to bottom, #f1f1f1, #fff 70%);
    /* Light grey as per request/standard */

    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10;
    padding: calc(1.5 * var(--slide-vw));
    overflow-y: auto;
    display: none;
}

.sidebar.visible {
    display: block;
    transform: translateX(0);
}

.sidebar #slide-text sup {
    font-size: 0.55em;
}

.sidebar #slide-text {
    font-size: calc(1.2 * var(--slide-vw));
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
}

.sidebar.hidden {
    display: none;
}

/* References Panel */
.references-panel {
    position: absolute;
    bottom: 2%;
    left: 0;
    width: 85vw;
    max-width: 85%;
    left: 8.5%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
    padding-bottom: calc(1.25 * var(--slide-vw));
    overflow-y: auto;
    font-size: calc(0.6 * var(--slide-vw));
    box-shadow: none;
}

.references-panel ul {
    /* style none */
    list-style: none;
}

.references-panel.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.references-panel.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.main-stage.with-sidebar .references-panel {
    width: 100%;
}

/* Controls */
.controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 20;
    transform-origin: top left;
    transition: transform 0.3s ease;
}

.controls-overlay.hide-controls {
    display: none;
}

.main-stage.with-sidebar #slides-container {
    transform: scale(var(--sidebar-scale));
}

.main-stage.with-sidebar .controls-overlay {
    transform: none;
}

.nav-btn,
.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    transition: transform 0.2s;
    position: absolute;
}

.nav-btn:hover,
.control-btn:hover {
    transform: scale(1.1);
}

.nav-btn.go-home {
    background: #be0f0f;
    color: #fff;
    border-radius: 999px;
    padding: calc(0.9 * var(--slide-vw)) calc(2.2 * var(--slide-vw));
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: calc(1.5 * var(--slide-vw));
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.nav-btn.go-home img {
    display: none;
}

.nav-btn img,
.control-btn img {
    width: calc(4 * var(--slide-vw));
    /* Adjust based on actual image size preference */
    height: auto;
    display: block;
}

/* Positioning */
/* Arrows in the lower part, left and right */
/* Let's place them slightly up to allow space for 'Hide Refs' below Mute which is aligned with Back */
.nav-btn.prev {
    bottom: 15%;
    left: 10%;
    /* Space for Mute button to the left */
}

.nav-btn.next {
    bottom: 15%;
    right: 3%;
}

/* Rotate the arrow for Next */
.nav-btn.next img {
    transform: rotate(180deg);
}

/* Mute: Left of Back */
#btn-audio {
    bottom: 15%;
    left: 3%;
}

/* Hide Refs: Below Mute */
#btn-refs {
    bottom: 5%;
    left: 3%;
}

/* Utility to hide elements */
.hidden-control {
    display: none !important;
}

/* Slide 3 variant uses slide-2-layout with placeholders hidden via .invisible */
.slide3-zoom {
    transform-origin: center;
    transform: scale(1) translateX(0%);
    opacity: 1;
    transition: transform 3s ease-in-out, opacity 2s ease-in-out 2s;
    pointer-events: none;
    user-select: none;
}

.slide3-zoom.zoom-run {
    transform: scale(20) translateX(15%);
    opacity: 0;
}

.slide3-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 20%;
    height: auto;
    opacity: 0;
    transform-origin: center;
    transition: opacity 3s ease-in-out 0.8s, transform 3s ease-in-out 0.8s;
    pointer-events: none;
    z-index: 2;
}

.slide3-overlay.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Footer Loghi */
.footer-logos {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    height: auto;
    z-index: 100;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(0.5 * var(--slide-vw)) 2%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.footer-logos img {
    max-width: 100%;
    height: auto;
    display: block;
}

.slide-badge {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translateX(-50%);
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    background: rgba(255, 255, 255, 0.65);
    color: #000;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: calc(1.75 * var(--slide-vw));
    width: calc(10 * var(--slide-vw));
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 10;
}

.slide-badge.visible {
    opacity: 1;
    visibility: visible;
}

.slide4-badge {
    top: 46%;
}

.slide5-badge,
.slide6-badge,
.slide7-badge,
.slide8-badge,
.slide9-badge,
.slide10-badge {
    top: 30%;
}

.slide3-overlay-img {
    width: 100%;
    height: auto;
    display: block;
    filter: sepia(0.7) saturate(3) hue-rotate(-12deg) brightness(1.05) contrast(1.1) drop-shadow(0 0 8px rgba(200, 0, 0, 0.15));
    /* mix-blend-mode: screen; */
    animation: cell-wobble 1.2s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes cell-wobble {
    0% {
        transform: translate(0px, 0px) rotate(0deg) scale(1) skew(0deg, 0deg);
    }

    15% {
        transform: translate(1.2px, -1px) rotate(-0.5deg) scale(1.01, 0.99) skew(-0.4deg, 0.4deg);
    }

    30% {
        transform: translate(-1.4px, 1.2px) rotate(0.8deg) scale(0.99, 1.01) skew(0.5deg, -0.5deg);
    }

    50% {
        transform: translate(1.6px, 1.1px) rotate(-0.6deg) scale(1.02, 0.98) skew(-0.6deg, 0.3deg);
    }

    70% {
        transform: translate(-1.1px, -1.5px) rotate(0.4deg) scale(0.98, 1.02) skew(0.6deg, -0.6deg);
    }

    85% {
        transform: translate(0.9px, 0.7px) rotate(-0.3deg) scale(1.01, 0.99) skew(-0.3deg, 0.3deg);
    }

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

/* Slide 4 */
.slide-4-layout {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--slide-bg);
    overflow: hidden;
    z-index: 1;
}

.slide4-circle-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 63%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 0;
}

.slide4-cell-wrap {
    position: relative;
    width: 20%;
    pointer-events: none;
    user-select: none;
}

.slide4-cell {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1);
    filter: none;
    animation: none;
    transition: filter 0.6s ease, transform 0.6s ease-out;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slide4-cell.calm {
    transform: scale(1);
}

.slide4-cell.wiggle-active {
    animation: cell-soft-wobble 1.2s ease-in-out infinite;
    filter: sepia(0.7) saturate(3) hue-rotate(-12deg) brightness(1.05) contrast(1.1) drop-shadow(0 0 8px rgba(200, 0, 0, 0.15));
}

.slide4-receptors {
    position: absolute;
    top: 43%;
    left: 54.5%;
    transform: translate(-50%, -50%);
    width: 52%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 3;
}

.slide4-receptors.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-in-out;
}

.slide4-circular {
    position: absolute;
    top: 81%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 31%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 4;
}

.slide4-circular.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0s;
}

.slide4-circle-bg.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-in-out;
}

.slide4-label {
    position: absolute;
    top: 15%;
    padding: calc(0.35 * var(--slide-vw)) calc(7 * var(--slide-vw));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: calc(2 * var(--slide-vw));
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    background: var(--slide4-label-left-bg);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: -1;
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
}

.slide4-label sup {
    font-size: 0.7em;
}

.slide4-label-left {
    left: 18%;
    transform: translateX(-50%);
    background: var(--slide4-label-left-bg);
    padding: calc(0.35 * var(--slide-vw)) calc(7 * var(--slide-vw));
    font-size: calc(2 * var(--slide-vw));
}

.slide4-label-right {
    right: 18%;
    transform: translateX(50%);
    background: var(--slide4-label-right-bg);
    padding: calc(0.35 * var(--slide-vw)) calc(7 * var(--slide-vw));
    font-size: calc(2 * var(--slide-vw));
}

.slide4-label.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-in-out;
}

/* Base layout for slides 1-6 with configurable transforms */
.slide-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
}

.slide[data-slide="1"] .slide-content {
    transform: scale(var(--slide1-scale, 1)) translate(var(--slide1-translate-x, 0), var(--slide1-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide[data-slide="2"] .slide-content {
    transform: scale(var(--slide2-scale, 1)) translate(var(--slide2-translate-x, 0), var(--slide2-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide[data-slide="3"] .slide-content {
    transform: scale(var(--slide3-scale, 1)) translate(var(--slide3-translate-x, 0), var(--slide3-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide[data-slide="4"] .slide-content {
    transform: scale(var(--slide4-scale, 1)) translate(var(--slide4-translate-x, 0), var(--slide4-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-5-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--slide-bg);
    transform: scale(var(--slide5-scale, 1)) translate(var(--slide5-translate-x, 0), var(--slide5-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-6-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--slide-bg);
    transform: scale(var(--slide6-scale, 1)) translate(var(--slide6-translate-x, 0), var(--slide6-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-7-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--slide-bg);
    transform: scale(var(--slide7-scale, 1)) translate(var(--slide7-translate-x, 0), var(--slide7-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-8-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--slide-bg);
    transform: scale(var(--slide8-scale, 1)) translate(var(--slide8-translate-x, 0), var(--slide8-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-9-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--slide-bg);
    transform: scale(var(--slide9-scale, 1)) translate(var(--slide9-translate-x, 0), var(--slide9-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-10-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--slide-bg);
    transform: scale(var(--slide10-scale, 1)) translate(var(--slide10-translate-x, 0), var(--slide10-translate-y, 0));
    transform-origin: center center;
    transition: transform 2s ease;
}

.slide-6-layout.zoom-out {
    /* Zoom-out animation removed - now controlled by slideTransforms config */
    transform: scale(var(--slide6-scale, 1)) translate(var(--slide6-translate-x, 0), var(--slide6-translate-y, 0));
}

.slide5-cell-wrap,
.slide6-cell-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18%;
    pointer-events: none;
    user-select: none;
}

.slide5-cell,
.slide6-cell {
    width: 100%;
    height: auto;
    display: block;
    filter: none;
    transition: filter 0.6s ease-out;
}

.slide5-cell.shake,
.slide6-cell.shake {
    animation: slide5-cell-shake 1.2s ease-in-out 3;
    filter: sepia(0.7) saturate(3) hue-rotate(-12deg) brightness(1.05) contrast(1.1) drop-shadow(0 0 8px rgba(200, 0, 0, 0.15));
    transition: filter 0s;
}

.slide5-il4.show.shake,
.slide6-il4.show.shake {
    animation: shake-il4 1.2s ease-in-out 3 !important;
    transition: none !important;
}

.slide5-btk.show.shake,
.slide6-btk.show.shake {
    animation: shake-btk 1.2s ease-in-out 3 !important;
    transition: none !important;
}

.slide6-c-kit.show.shake {
    animation: shake-ckit 1.2s ease-in-out 3 !important;
    transition: none !important;
}

.slide6-mrgprx2.show.shake {
    animation: slide5-cell-shake 1.2s ease-in-out 3 !important;
    transition: none !important;
}

.slide5-badge,
.slide6-badge {
    opacity: 1;
    visibility: visible;
}

.slide5-il4,
.slide6-il4 {
    position: absolute;
    top: 32%;
    left: 41%;
    width: 4%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: rotate(12deg);
}

.slide5-il4.show,
.slide6-il4.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-item,
.slide6-item {
    position: absolute;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slide5-arrow-il4,
.slide6-arrow-il4 {
    position: absolute;
    top: 32%;
    left: 25%;
    width: 13%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 3;
}

.slide5-arrow-il4.show,
.slide6-arrow-il4.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-arrow-il4ra,
.slide6-arrow-il4ra {
    position: absolute;
    top: 40%;
    left: 42%;
    width: 2%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 3;
}

.slide5-arrow-il4ra.show,
.slide6-arrow-il4ra.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-badge-pill,
.slide6-badge-pill {
    position: absolute;
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: 999px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slide5-badge-pill.show,
.slide6-badge-pill.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

/* Classe comune per badge standard con sizing responsive */
.slide5-badge-standard,
.slide6-badge-standard {
    font-size: calc(1.15 * var(--slide-vw));
    height: calc(1.5 * var(--slide-vw));
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene3-info {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-sans);
    font-size: calc(1.5 * var(--slide-vw));
    color: #000;
    padding: calc(0.4 * var(--slide-vw)) calc(1.2 * var(--slide-vw));
    border-radius: 999px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 5;
}

/* Badge specifici con colori e posizioni */

.slide5-badge-box,
.slide6-badge-box {
    position: absolute;
    top: 25%;
    left: 13%;
    width: calc(9 * var(--slide-vw));
    height: auto;
    background: rgba(240, 240, 240, 1);
    border-radius: calc(1 * var(--slide-vw));
    padding: calc(1 * var(--slide-vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(0.5 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    z-index: 5;
}

.slide5-badge-box.show,
.slide6-badge-box.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-badge-il4,
.slide6-badge-il4 {
    position: relative;
    background: #34509C;
    color: #fff;
    width: 100%;
    font-size: calc(1.30 * var(--slide-vw));
    height: calc(2.74 * var(--slide-vw));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    border-radius: 999px;
}

.slide5-badge-il13,
.slide6-badge-il13 {
    position: relative;
    background: #E67E22;
    color: #fff;
    width: 100%;
    font-size: calc(1.30 * var(--slide-vw));
    height: calc(2.74 * var(--slide-vw));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    border-radius: 999px;
}

.slide6-badge-il5 {
    position: relative;
    background: #BE1010;
    color: #fff;
    width: 100%;
    font-size: calc(1.30 * var(--slide-vw));
    height: calc(2.74 * var(--slide-vw));
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    border-radius: 999px;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.slide6-badge-il5.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-badge-bcell,
.slide6-badge-bcell {
    background: #A7E2F1;
    color: #000;
    top: 67%;
    left: 25%;
    width: 5.5%;
}

.slide5-badge-il4ra,
.slide6-badge-il4ra {
    background: #9CA6CD;
    color: #000;
    top: 36%;
    left: 35%;
}

.slide5-badge-ige,
.slide6-badge-ige {
    background: #D0DDEA;
    color: #000;
    top: 43%;
    left: 27%;
    width: 5%;
}

.slide5-badge-btk,
.slide6-badge-btk {
    background: #6fbcd4d2;
    color: #000;
    top: 56%;
    left: 43%;
}

.slide6-badge-eosinophil {
    background: #F4D6D8;
    color: #000;
    top: 89%;
    left: 26%;
}

.slide5-fceri,
.slide6-fceri {
    background: #E0A78D;
    color: #000;
    top: 44%;
    left: 35.5%;
}

.slide5-fceri::after,
.slide6-fceri::after {
    content: '';
    position: absolute;
    top: 93%;
    left: 95%;
    width: calc(2.75 * var(--slide-vw));
    height: 2px;
    background-color: #C04E15;
    transform: rotate(47deg);
    transform-origin: left center;
}

.slide5-badge-autoallergen,
.slide6-badge-autoallergen {
    background: #BCBCBC;
    color: #000000;
    top: 61%;
    left: 33%;
}

.slide5-btk,
.slide6-btk {
    position: absolute;
    top: 50%;
    left: 38%;
    width: 5%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    z-index: 6;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: rotate(10deg);
}

.slide5-btk.show,
.slide6-btk.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-bcell,
.slide6-bcell {
    position: absolute;
    top: 47%;
    left: 22%;
    width: 12%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.slide5-bcell.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
    animation: slide5-bcell-bounce 1.5s ease-in-out 2;
}

.slide6-bcell.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
}

.slide5-ige,
.slide6-ige {
    position: absolute;
    top: 54%;
    left: 36%;
    width: 8%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.slide5-ige-double,
.slide6-ige-double {
    position: absolute;
    top: 45%;
    left: 30%;
    width: 7%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.slide5-ige-double.show,
.slide6-ige-double.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide5-arrow-bcell,
.slide6-arrow-bcell {
    position: absolute;
    top: 43%;
    left: 17%;
    width: 5%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 3;
}

.slide5-arrow-bcell.show,
.slide6-arrow-bcell.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-arrow-down {
    position: absolute;
    top: 42%;
    left: 16.14%;
    width: calc(2.25 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: -1;
}

.slide6-arrow-down.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-immune-cell {
    position: absolute;
    top: 73%;
    left: calc(9.15 * var(--slide-vw));
    width: 17%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slide6-immune-cell.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-immune-cell-text {
    position: absolute;
    top: 89%;
    left: calc(12 * var(--slide-vw));
    width: 11%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide6-immune-cell-text.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-eosinophil {
    position: absolute;
    top: 72.5%;
    left: 23%;
    width: 17%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slide6-eosinophil.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-eosinophil-arrows {
    position: absolute;
    top: 72.5%;
    left: 23%;
    width: 17%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 3;
}

.slide6-eosinophil-arrows.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-eos-badges {
    position: absolute;
    top: 74%;
    left: 45%;
    width: calc(10 * var(--slide-vw));
    display: flex;
    flex-direction: row;
    gap: calc(0.8 * var(--slide-vw));
    padding: calc(0.5 * var(--slide-vw));
    border-radius: calc(0.5 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s, background-color 0.6s ease;
    z-index: 6;
}

.slide6-eos-badges.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, background-color 0.6s ease;
}

.slide6-eos-badges.with-background {
    background-color: #F2E1EC;
}

.slide6-eos-col-left {
    display: flex;
    flex-direction: column;
    gap: calc(0.35 * var(--slide-vw));
}

.slide6-eos-col-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slide6-badge-scf {
    background: #fff;
    border: calc(0.18 * var(--slide-vw)) solid #346B20;
    color: #000;
    top: 70%;
    left: 37%;
    width: calc(4 * var(--slide-vw));
    z-index: 6;
}

.slide6-badge-epo,
.slide6-badge-mbp,
.slide6-badge-ecp,
.slide6-badge-sp {
    background: #fff;
    border: calc(0.18 * var(--slide-vw)) solid #A02678;
    color: #000;
    position: relative;
    width: calc(4 * var(--slide-vw));
}

.slide6-badge-sp {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.slide6-badge-sp.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-c-kit,
.slide6-mrgprx2 {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slide6-c-kit {
    top: 64%;
    left: 44%;
    width: 3.2%;
    transform: rotate(-8deg);
}

.slide6-mrgprx2 {
    top: 63.3%;
    left: 48%;
    width: 4%;
}

.slide6-badge-ckit {
    background: #BACCB3;
    color: #000;
    border: none;
    top: 65%;
    left: 39%;
    width: calc(5 * var(--slide-vw));
    z-index: 6;
}

.slide6-badge-mrgprx2 {
    background: #E0B5D1;
    color: #000;
    border: none;
    top: 67%;
    left: 53%;
    width: calc(7 * var(--slide-vw));
    z-index: 6;
}

.slide6-short-arrow {
    position: absolute;
    top: 48%;
    left: 59%;
    width: calc(3.8 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide6-short-arrow.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide7-vasodilation,
.slide7-wheals,
.slide7-angioderma {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 5;
}

.slide7-vasodilation {
    top: 11%;
    left: 62.5%;
    width: 12%;
    z-index: 20;
}

.slide7-vasodilation-text {
    top: 2%;
    left: 63.5%;
    width: 10%;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    z-index: 20;
}

.slide7-wheals {
    top: 14.5%;
    left: 73.2%;
    width: 21%;
    z-index: 5;
}

.slide7-angioderma {
    top: 20%;
    left: 73%;
    width: 21%;
    z-index: 5;
}

.slide7-vasodilation.show,
.slide7-vasodilation-text.show,
.slide7-wheals.show,
.slide7-angioderma.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

/* In slide 8 questi elementi devono essere già visibili all'ingresso */
.slide[data-slide="8"] .slide7-vasodilation,
.slide[data-slide="8"] .slide7-vasodilation-text,
.slide[data-slide="8"] .slide7-wheals,
.slide[data-slide="8"] .slide7-angioderma {
    opacity: 1;
    visibility: visible;
}

.slide8-arrow-sense {
    position: absolute;
    top: 55%;
    left: 68%;
    width: calc(1.5 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

.slide8-arrow-sense.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide8-neuronal {
    position: absolute;
    top: 69%;
    left: 61%;
    width: 16%;
    transform: scale(1) !important;
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s, transform 3s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide8-neuronal.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1.35) !important;
    transition: opacity 0.6s ease, transform 3s ease;
}

.slide8-neuronal.scale-normal {
    transform: scale(1) !important;
    transition: opacity 0.6s ease, transform 3s ease;
}

.slide8-neuronal-text {
    position: absolute;
    top: 89%;
    left: 64%;
    width: 10%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s, top 3s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide8-neuronal-text.show {
    opacity: 1;
    visibility: visible;
    top: 95%;
    transition: opacity 0.6s ease, top 3s ease;
}

.slide8-neuronal-text.scale-normal {
    top: 89%;
    transition: opacity 0.6s ease, top 3s ease;
}

.slide8-itch {
    position: absolute;
    top: 67%;
    left: 73%;
    width: 21%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide8-itch.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide8-arrow-sensi-left {
    position: absolute;
    top: 76.2%;
    left: 57%;
    width: calc(7 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide8-arrow-sensi-left.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

/* ========================================
   SLIDE 9 STYLES
   ======================================== */

.slide9-th2 {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 12%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide9-th2.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide9-basophil {
    position: absolute;
    top: 55%;
    left: 2%;
    width: 11%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.slide9-basophil.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide9-basophil-arrow {
    position: absolute;
    top: 55%;
    left: 2%;
    width: 11%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 7;
}

.slide9-basophil-arrow.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide9-arrow-curve {
    position: absolute;
    top: 10%;
    left: 19%;
    width: calc(42 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
    transform: rotate(-3deg);
}

.slide9-arrow-curve.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-badge-il31 {
    position: relative;
    background: #55A4AD;
    color: #fff;
    width: 100%;
    font-size: calc(1.30 * var(--slide-vw));
    height: calc(2.74 * var(--slide-vw));
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    border-radius: 999px;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.slide6-badge-il31.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-mediators-box {
    position: absolute;
    top: 33%;
    left: 63%;
    width: calc(11 * var(--slide-vw));
    background: rgba(240, 240, 240, 1);
    border-radius: calc(1 * var(--slide-vw));
    padding: calc(1 * var(--slide-vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.5 * var(--slide-vw));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    z-index: 6;
}

.slide6-mediators-box.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.slide6-mediators-box .slide6-badge-pill {
    opacity: 1;
    visibility: visible;
    position: relative;
    width: 100%;
    font-size: calc(1.30 * var(--slide-vw));
    min-height: calc(2.74 * var(--slide-vw));
    padding: calc(0.3 * var(--slide-vw)) calc(0.6 * var(--slide-vw));
    border-radius: 999px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide6-badge-histamine {
    background: #AFA360;
    color: #fff;
    width: 100%;
}

.slide6-badge-other-mediators {
    background: #404040;
    color: #fff;
    width: 100%;
    line-height: 1.1;
    min-height: calc(4 * var(--slide-vw)) !important;
    position: relative;
}

.slide6-badge-il4b,
.slide6-badge-il13b {
    width: 75%;
    align-self: center;
}

.slide6-badge-il4b {
    background: #34509C;
    color: #fff;
}

.slide6-badge-il13b {
    background: #E67E22;
    color: #fff;
}

.slide6-c-kit.show,
.slide6-mrgprx2.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

@keyframes slide5-il4-fly {
    0% {
        top: 5%;
        left: 5%;
        opacity: 0;
        transform: rotate(0deg);
    }

    20% {
        opacity: 1;
        transform: rotate(-10deg);
    }



    60% {
        transform: rotate(10deg);
    }


    100% {
        top: 30%;
        left: 40%;
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes cell-soft-wobble {
    0% {
        transform: scale(1) skew(0deg, 0deg);
    }

    25% {
        transform: scale(1.008, 0.992) skew(-0.7deg, 0.7deg);
    }

    50% {
        transform: scale(0.992, 1.008) skew(0.5deg, -0.5deg);
    }

    75% {
        transform: scale(1.012, 0.988) skew(-0.4deg, 0.4deg);
    }

    100% {
        transform: scale(1) skew(0deg, 0deg);
    }
}

@keyframes slide5-bcell-bounce {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-2%);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-2%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slide5-cell-shake {
    0% {
        transform: translate(0px, 0px) rotate(0deg) scale(1) skew(0deg, 0deg);
    }

    15% {
        transform: translate(1.2px, -1px) rotate(-0.5deg) scale(1.01, 0.99) skew(-0.4deg, 0.4deg);
    }

    30% {
        transform: translate(-1.4px, 1.2px) rotate(0.8deg) scale(0.99, 1.01) skew(0.5deg, -0.5deg);
    }

    50% {
        transform: translate(1.6px, 1.1px) rotate(-0.6deg) scale(1.02, 0.98) skew(-0.6deg, 0.3deg);
    }

    70% {
        transform: translate(-1.1px, -1.5px) rotate(0.4deg) scale(0.98, 1.02) skew(0.6deg, -0.6deg);
    }

    85% {
        transform: translate(0.9px, 0.7px) rotate(-0.3deg) scale(1.01, 0.99) skew(-0.3deg, 0.3deg);
    }

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

@keyframes shake-il4 {
    0% {
        transform: translate(0, 0) rotate(12deg);
    }

    25% {
        transform: translate(-2px, 1px) rotate(11deg);
    }

    50% {
        transform: translate(2px, -1px) rotate(13deg);
    }

    75% {
        transform: translate(-1px, 2px) rotate(11.5deg);
    }

    100% {
        transform: translate(0, 0) rotate(12deg);
    }
}

@keyframes shake-btk {
    0% {
        transform: translate(0, 0) rotate(10deg);
    }

    25% {
        transform: translate(-2px, 1px) rotate(9deg);
    }

    50% {
        transform: translate(2px, -1px) rotate(11deg);
    }

    75% {
        transform: translate(-1px, 2px) rotate(9.5deg);
    }

    100% {
        transform: translate(0, 0) rotate(10deg);
    }
}

@keyframes shake-ckit {
    0% {
        transform: translate(0, 0) rotate(-8deg);
    }

    25% {
        transform: translate(-2px, 1px) rotate(-9deg);
    }

    50% {
        transform: translate(2px, -1px) rotate(-7deg);
    }

    75% {
        transform: translate(-1px, 2px) rotate(-8.5deg);
    }

    100% {
        transform: translate(0, 0) rotate(-8deg);
    }
}

/* Slide 10 - Emphasis animations */
.slide6-badge-il4,
.slide6-badge-il13,
.slide6-badge-il4b,
.slide6-badge-il13b,
.scene3-info,
.slide6-immune-cell-text,
.slide8-neuronal-text,
.slide7-wheals,
.slide7-angioderma,
.slide8-itch {
    transition: transform 1s ease-in-out !important;
}

.emphasize {
    transform: scale(1.15) !important;
    z-index: 100;
}

.scene3-info.emphasize {
    transform: translateX(-50%) scale(1.15) !important;
}

.slide7-wheals.emphasize,
.slide7-angioderma.emphasize,
.slide8-itch.emphasize {
    z-index: 6 !important;
}