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

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#carousel {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* ── Slides ── */
.slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.blur-layer {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(0.45);
    z-index: 0;
}

.slide img {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

#slide-bg { z-index: 1; }
#slide-fg { z-index: 2; opacity: 0; }
#slide-fg.entering { opacity: 1; }

/* ── Info ── */
#info {
    position: absolute;
    bottom: 72px; left: 0; right: 0;
    text-align: center;
    z-index: 20;
    pointer-events: none;
    min-height: 52px;
}

#image-name { display: none; }

/* ── Controls ── */
#controls {
    position: absolute;
    bottom: 14px; left: 18px;
    display: flex;
    gap: 8px;
    z-index: 40;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

#controls:hover { opacity: 1; }

/* ── Fullscreen button (standalone, bottom-right) ── */
#btn-fullscreen {
    position: absolute;
    bottom: 14px; right: 18px;
    z-index: 40;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

#btn-fullscreen:hover { opacity: 1; }

/* ── Fullscreen mode: ocultar todos los botones ── */
#carousel.is-fullscreen #controls,
#carousel.is-fullscreen #btn-fullscreen,
#carousel.is-fullscreen #pause-indicator {
    display: none !important;
}

/* ── Cursor oculto en fullscreen tras inactividad ── */
#carousel.is-fullscreen.hide-cursor,
#carousel.is-fullscreen.hide-cursor * {
    cursor: none !important;
}

.ctrl-btn {
    width: 44px; height: 44px;
    border: none; border-radius: 10px;
    background: rgba(30,30,30,0.75);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    border: 1px solid rgba(255,255,255,0.15);
}

.ctrl-btn:hover {
    background: rgba(255,255,255,0.26);
    transform: scale(1.08);
}

.ctrl-btn:focus {
    outline: 2px solid rgba(247,147,30,0.85);
    outline-offset: 2px;
}

.ctrl-btn svg { width: 17px; height: 17px; }

/* ── Pause indicator ── */
#pause-indicator {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.65);
    border-radius: 50%;
    width: 80px; height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#pause-indicator.visible { opacity: 1; }
#pause-indicator svg { width: 34px; height: 34px; }

/* ── Loading ── */
#loading {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.8s ease;
}

#loading.hidden { opacity: 0; pointer-events: none; }

.loader-ring {
    width: 50px; height: 50px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top: 3px solid #f7931e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 18px;
}

@keyframes spin { to { transform: rotate(360deg); } }

#loading p {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════
   20 ENTRANCE ANIMATIONS (GPU-accelerated)
   ════════════════════════════════════════════ */

/* 1. Fade */
@keyframes enterFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#slide-fg.entering.transition-fade img {
    animation: enterFade 1.2s ease forwards;
    will-change: opacity;
}

/* 2. Slide Left — enters from right */
@keyframes enterSlideLeft {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
#slide-fg.entering.transition-slideLeft img {
    animation: enterSlideLeft 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform;
}

/* 3. Slide Right — enters from left */
@keyframes enterSlideRight {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
#slide-fg.entering.transition-slideRight img {
    animation: enterSlideRight 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform;
}

/* 4. Slide Up — enters from bottom */
@keyframes enterSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
#slide-fg.entering.transition-slideUp img {
    animation: enterSlideUp 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform;
}

/* 5. Slide Down — enters from top */
@keyframes enterSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
#slide-fg.entering.transition-slideDown img {
    animation: enterSlideDown 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform;
}

/* 6. Zoom In */
@keyframes enterZoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
#slide-fg.entering.transition-zoomIn img {
    animation: enterZoomIn 1.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
    will-change: transform, opacity;
    transform-origin: center;
}

/* 7. Zoom Out */
@keyframes enterZoomOut {
    from { transform: scale(1.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
#slide-fg.entering.transition-zoomOut img {
    animation: enterZoomOut 1.3s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform, opacity;
    transform-origin: center;
}

/* 8. Rotate 3D (Y axis) */
@keyframes enterRotate {
    from { transform: perspective(1400px) rotateY(-90deg); opacity: 0; }
    to   { transform: perspective(1400px) rotateY(0deg);   opacity: 1; }
}
#slide-fg.entering.transition-rotate img {
    animation: enterRotate 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform, opacity;
    transform-origin: left center;
    backface-visibility: hidden;
}

/* 9. Flip 3D (X axis) */
@keyframes enterFlip {
    from { transform: perspective(1400px) rotateX(90deg); opacity: 0; }
    to   { transform: perspective(1400px) rotateX(0deg);  opacity: 1; }
}
#slide-fg.entering.transition-flip img {
    animation: enterFlip 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform, opacity;
    transform-origin: top center;
    backface-visibility: hidden;
}

/* 10. Blur & Fade */
@keyframes enterBlurFade {
    from { filter: blur(24px); opacity: 0; }
    to   { filter: blur(0px);  opacity: 1; }
}
#slide-fg.entering.transition-blurFade img {
    animation: enterBlurFade 1.1s ease forwards;
    will-change: filter, opacity;
}

/* 11. Scale Pulse */
@keyframes enterScalePulse {
    0%   { transform: scale(0.82); opacity: 0; }
    60%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}
#slide-fg.entering.transition-scalePulse img {
    animation: enterScalePulse 1.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
    will-change: transform, opacity;
    transform-origin: center;
}

/* 12. Diagonal Slide */
@keyframes enterDiagonalSlide {
    from { transform: translate(-100%, -100%); opacity: 0; }
    to   { transform: translate(0, 0);         opacity: 1; }
}
#slide-fg.entering.transition-diagonalSlide img {
    animation: enterDiagonalSlide 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform, opacity;
}

/* 13. Ripple — circle clip-path from center */
@keyframes enterRipple {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(150% at 50% 50%); }
}
#slide-fg.entering.transition-ripple img {
    animation: enterRipple 1.1s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* 14. Split — opens from center */
@keyframes enterSplit {
    from { clip-path: inset(0 50% 0 50%); }
    to   { clip-path: inset(0 0% 0 0%); }
}
#slide-fg.entering.transition-split img {
    animation: enterSplit 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* 15. Swipe — sweeps from right */
@keyframes enterSwipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}
#slide-fg.entering.transition-swipe img {
    animation: enterSwipe 1.0s cubic-bezier(0.77,0,0.175,1) forwards;
}

/* 16. Bounce */
@keyframes enterBounce {
    from { transform: translateY(-80px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
#slide-fg.entering.transition-bounce img {
    animation: enterBounce 1.2s cubic-bezier(0.68,-0.55,0.265,1.55) forwards;
    will-change: transform, opacity;
}

/* 17. Skew */
@keyframes enterSkew {
    from { transform: skewX(28deg) translateX(-100%); opacity: 0; }
    to   { transform: skewX(0deg)  translateX(0);     opacity: 1; }
}
#slide-fg.entering.transition-skew img {
    animation: enterSkew 1.1s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    will-change: transform, opacity;
}

/* 18. Color Wash — dark overlay sweeps then reveals */
@keyframes enterColorWashImg {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes enterColorWashBar {
    0%   { transform: translateX(-102%); }
    48%  { transform: translateX(0%); }
    100% { transform: translateX(102%); }
}
#slide-fg.entering.transition-colorWash img {
    animation: enterColorWashImg 1.0s ease forwards;
    will-change: opacity;
}
#slide-fg.entering.transition-colorWash::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(15,8,2,0.97), transparent);
    animation: enterColorWashBar 1.0s ease forwards;
    z-index: 1;
    pointer-events: none;
}

/* 19. Mosaic — polygon sweep */
@keyframes enterMosaic {
    0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    50%  { clip-path: polygon(0 0, 55% 0, 55% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
#slide-fg.entering.transition-mosaic img {
    animation: enterMosaic 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* 20. Curtain — ellipse clip-path from center */
@keyframes enterCurtain {
    from { clip-path: ellipse(0% 0% at 50% 50%); }
    to   { clip-path: ellipse(150% 150% at 50% 50%); }
}
#slide-fg.entering.transition-curtain img {
    animation: enterCurtain 1.1s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    #slide-fg.entering img { animation-duration: 0.01ms !important; }
}