/* Intro animation container */
.intro-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white-100);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    perspective: 1500px;
    pointer-events: none;
    transition: background-color 0.25s ease;
}

/* Permetti interazione con le card durante l'animazione */
.intro-container .scene {
    pointer-events: all;
}

/* Mantieni lo stack visibile dopo l'animazione */
.intro-animation-complete .intro-container {
    background-color: transparent;
    z-index: 11;
    /* Mantieni sopra la homepage, sotto la case-modal (z-index: 12) */
}

/* Stack positioning on mobile */
@media (max-width: 640px) {
    .intro-container .scene {
        transform: scale(0.6) !important;
    }
}

.scene {
    width: 280px;
    height: 180px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateZ(-10deg);
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: white;
    color: white;

    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    backface-visibility: visible;
    opacity: 1;
    border: 10px solid white;
    transform-origin: center center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

}

.card span {
    font-size: 1rem;
    font-weight: normal;
    opacity: 0.7;
    margin-top: 10px;
}

/* Video card base styles (works in carousel, stack, and freeform) */
.card--has-video {
    overflow: hidden;
}

.card--has-video .card-video-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.card--has-video .card-video-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.card--has-video .card-mute-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.card--has-video .card-mute-btn:hover {
    opacity: 1;
}

.card--has-video .card-mute-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Loader */
.loader-container {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.loader-counter {
    font-family: "PP Cirka", sans-serif;
    font-size: 1.5rem;
    /* Large size as requested for title-like appearance */
    font-weight: bold;
    color: var(--black-100);
    /* Assuming dark text on light background */
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Prevents jitter when numbers change */
}

/* Hide main content initially */
.site-shell {
    opacity: 1;
}

.floating-video,
.floating-star,
.floating-star-message {
    opacity: 0;
    /* Shown via GSAP after intro */
}

/* Floating video is deprecated: hide completely */
.floating-video {
    display: none !important;
}

.mobile-footer {
    opacity: 0;
}

/* ===== Responsive wrappers (Desktop vs Mobile placeholder) ===== */



.mobile {
    display: none;
}

.mobile-placeholder {
    display: none;
}

.mobile-placeholder__trigger.case-trigger {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--black-100);
    background: var(--white-100);
    color: var(--black-100);
    border-radius: 999px;
    padding: 16px 20px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.125rem;
    line-height: 1.1;
}

@media (max-width: 640px) {
    /* Mobile placeholder only (desktop shell hidden, modal still available) */
    .desktop .site-shell {
        display: none;
    }

    .mobile {
        display: block;
    }

    .mobile-placeholder {
        display: flex;
        min-height: 100vh;
        padding: 24px 24px 180px 24px;
        align-items: center;
        justify-content: center;
    }
}

/* Nascondi gli elementi della lista inizialmente */
.case-item {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* ===== 5 STACK GRID (post-intro) ===== */

:root {
    --stack-card-width: clamp(140px, 16vw, 260px);
    --stack-card-height: calc(var(--stack-card-width) * 0.642857);
    --stack-gap: clamp(18px, 3vw, 56px);
}

.intro-container .stacks-grid {
    pointer-events: none;
}

.stacks-grid {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--stack-gap);
    padding: clamp(24px, 6vw, 96px);
    z-index: 2;
    pointer-events: none;
}

.stack-group {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    text-align: center;
    transform: translateZ(0);
    transition: opacity .35s cubic-bezier(0.22, 1, 0.36, 1),
        background-color .35s cubic-bezier(0.22, 1, 0.36, 1),
        transform .35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

.stack-group--clicked {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 8px;
}

.stack-group--clicked .stack-cards {
    transform: scale(0.95);
    transform-origin: center center;
}

.stack-group:focus-visible {
    outline: 2px solid var(--black-100);
    outline-offset: 6px;
    border-radius: 12px;
}

.stack-cards {
    position: relative;
    width: var(--stack-card-width);
    height: var(--stack-card-height);
    transform-style: preserve-3d;
}

/* Override the big list typography inside the stacks grid */
.stacks-grid .case-trigger {
    font-size: clamp(16px, 1.5vw, 24px);
    margin: 0;
    line-height: 1.2;
    transform: none;
    transform-origin: center;
    text-align: center;
    max-width: clamp(200px, 22vw, 320px);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.stacks-grid.is-hovering .stack-group.is-dimmed {
    opacity: 0.32;
}

.stacks-grid.is-hovering .stack-group.is-active {
    opacity: 1;
    z-index: 9998;
}

/* Video card: glow + frame + media */
.stacks-grid .card--has-video {
    position: absolute;
    transform-style: preserve-3d;
}

.stacks-grid .stack-video-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(320px, 50vw, 780px);
    height: clamp(240px, 40vh, 780px);
    /* Layered radials to keep the “mystic” multi-color vibe while centered */
    background:
        radial-gradient(99.59% 104.53% at 85% 85%,
            #F5F0EA 0%,
            #5932EA 21.88%,
            #C63636 56.25%,
            #F0E81E 75.08%,
            rgba(32, 216, 129, 0.00) 100%),
        radial-gradient(70% 70% at 18% 22%,
            rgba(240, 232, 30, 0.85) 0%,
            rgba(240, 232, 30, 0.00) 58%),
        radial-gradient(72% 72% at 28% 82%,
            rgba(198, 54, 54, 0.55) 0%,
            rgba(198, 54, 54, 0.00) 62%),
        radial-gradient(72% 72% at 78% 26%,
            rgba(89, 50, 234, 0.55) 0%,
            rgba(89, 50, 234, 0.00) 62%);
    filter: blur(32px);
    opacity: 0; /* hidden until hover */
    transform-origin: center;
    border-radius: 100px !important;
    transform: translate(-50%, -50%) scale(.95);
    transition: all .55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0; /* behind the cards (cards use z-index >= 1) */
}

.stacks-grid .stack-group.is-active .stack-video-glow {
    opacity: 1;
    filter: blur(44px);
    transform: translate(-50%, -50%) scale(1.25);
}

.stacks-grid .card--has-video .card-video-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.stacks-grid .card--has-video .card-video-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Slightly more discoverable mute button on the video card */
.stacks-grid .card--has-video .card-mute-btn {
    opacity: 0.9;
}

.stacks-grid .stack-group.is-active .card--has-video .card-mute-btn {
    opacity: 1;
}

/* When focusing the video-card stack, hide the title (it distracts) */
.stacks-grid.is-hovering .stack-group.is-active.stack-group--has-video-card .stack-title {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* When modal is open, hide stacks overlay to avoid covering the dialog */
body.page-home--modal-open .stacks-grid {
    pointer-events: none;
}

body.stacks-grid-ready .case-list {
    display: none;
}

/* Hide stacks completely when About is active */
@media (max-width: 768px) {
    :root {
        --stack-card-width: clamp(120px, 30vw, 220px);
        --stack-gap: clamp(14px, 3vw, 28px);
    }

    .stacks-grid {
        flex-wrap: wrap;
        align-content: center;
    }
}

/* ===== FREEFORM MODE ===== */

.freeform-container {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* World wrapper for edge-pan camera */
.freeform-world {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* When Freeform is active, hide the ordered stack UI */
body.view-freeform .stacks-grid {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.view-freeform .freeform-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.page-home--modal-open .freeform-container {
    pointer-events: none;
}

body.view-transitioning .footer-btn--tabs {
    pointer-events: none;
}

.freeform-container .card--freeform {
    cursor: pointer;
    will-change: transform;
    touch-action: manipulation;
}

.freeform-container .card--freeform:focus-visible {
    outline: 2px solid var(--black-100);
    outline-offset: 6px;
    border-radius: 12px;
}

/* Playground cards */
body.view-freeform .card--freeform.card--playground {
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
}

body.view-freeform .card--has-video .card-video-frame {
    opacity: 0;
}

body.view-freeform .card--has-video .card-video-frame,
body.view-freeform .card--has-video .card-mute-btn {
    pointer-events: none;
}

/* Tooltip for About CTA */
.freeform-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--new-grey, #BCB8AE);
    border-radius: 999px;
    color: var(--black-100);
    font-family: "PP Cirka", sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 0, 0);
}

body.page-home--modal-open .freeform-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Dimmed cards in freeform mode when hovering */
/* Note: !important needed to override Style.css ".card { opacity: 1 !important }" */
.freeform-container.is-hovering .card--freeform {
    transition: opacity 0.25s ease-out;
}

.freeform-container.is-hovering .card--freeform.is-dimmed {
    opacity: 0.32 !important;
    z-index: 1 !important; /* Lower than glow so they appear behind */
}

.freeform-container.is-hovering .card--freeform.is-active {
    opacity: 1 !important;
    z-index: 9998;
}