/* Shared presentation tokens — CSS-first animations */
.pres-root {
    --pres-duration: 0.8s;
    --pres-delay: 0s;
    --pres-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --pres-motion-speed: 1;
    --pres-motion-intensity: 50;
    --pres-overlay-intensity: 35;
    position: relative;
}

.pres-root.pres-has-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: rgba(0, 0, 0, calc(var(--pres-overlay-intensity, 35) / 100));
}

.pres-root.pres-enter-fade {
    animation: presFadeIn var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-enter-slide.pres-from-right {
    animation: presSlideRight var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-enter-slide.pres-from-left {
    animation: presSlideLeft var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-enter-slide.pres-from-top {
    animation: presSlideDown var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-enter-slide.pres-from-bottom {
    animation: presSlideUp var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-enter-reveal {
    animation: presReveal var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-enter-cinematic {
    animation: presCinematic var(--pres-duration) var(--pres-ease) var(--pres-delay) both;
}

.pres-root.pres-motion-pan-left img,
.pres-root.pres-motion-pan-left video {
    animation: presPanLeft calc(12s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-pan-right img,
.pres-root.pres-motion-pan-right video {
    animation: presPanRight calc(12s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-pan-up img,
.pres-root.pres-motion-pan-up video {
    animation: presPanUp calc(12s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-pan-down img,
.pres-root.pres-motion-pan-down video {
    animation: presPanDown calc(12s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-zoom-in img,
.pres-root.pres-motion-zoom-in video {
    animation: presZoomIn calc(14s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-zoom-out img,
.pres-root.pres-motion-zoom-out video {
    animation: presZoomOut calc(14s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-drift img,
.pres-root.pres-motion-drift video {
    animation: presDrift calc(18s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root.pres-motion-kenburns img,
.pres-root.pres-motion-kenburns video {
    animation: presKenBurns calc(16s / var(--pres-motion-speed)) linear infinite alternate;
}

.pres-root img,
.pres-root video {
    object-fit: var(--pres-object-fit, cover);
    object-position: var(--pres-object-position, center);
}

@keyframes presFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes presSlideRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes presSlideLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

@keyframes presSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes presSlideDown {
    from { opacity: 0; transform: translateY(-24px); }
    to { opacity: 1; transform: none; }
}

@keyframes presReveal {
    from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes presCinematic {
    from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes presPanLeft {
    from { transform: scale(1.08) translateX(calc(var(--pres-motion-intensity) * 0.06%)); }
    to { transform: scale(1.12) translateX(calc(var(--pres-motion-intensity) * -0.06%)); }
}

@keyframes presPanRight {
    from { transform: scale(1.08) translateX(calc(var(--pres-motion-intensity) * -0.06%)); }
    to { transform: scale(1.12) translateX(calc(var(--pres-motion-intensity) * 0.06%)); }
}

@keyframes presPanUp {
    from { transform: scale(1.08) translateY(calc(var(--pres-motion-intensity) * 0.05%)); }
    to { transform: scale(1.12) translateY(calc(var(--pres-motion-intensity) * -0.05%)); }
}

@keyframes presPanDown {
    from { transform: scale(1.08) translateY(calc(var(--pres-motion-intensity) * -0.05%)); }
    to { transform: scale(1.12) translateY(calc(var(--pres-motion-intensity) * 0.05%)); }
}

@keyframes presZoomIn {
    from { transform: scale(1); }
    to { transform: scale(calc(1 + (var(--pres-motion-intensity) / 500))); }
}

@keyframes presZoomOut {
    from { transform: scale(calc(1 + (var(--pres-motion-intensity) / 500))); }
    to { transform: scale(1); }
}

@keyframes presDrift {
    from { transform: scale(1.06) translate(calc(var(--pres-motion-intensity) * -0.03%), calc(var(--pres-motion-intensity) * 0.02%)); }
    to { transform: scale(1.1) translate(calc(var(--pres-motion-intensity) * 0.03%), calc(var(--pres-motion-intensity) * -0.02%)); }
}

@keyframes presKenBurns {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.12) translate(calc(var(--pres-motion-intensity) * -0.04%), calc(var(--pres-motion-intensity) * 0.02%)); }
}

@media (prefers-reduced-motion: reduce) {
    .pres-root[class*="pres-enter-"],
    .pres-root[class*="pres-motion-"] img,
    .pres-root[class*="pres-motion-"] video {
        animation: none !important;
    }
}