/* Web Work iframe cards */

.webwork-wrapper {
    position: fixed;
    top: 28vh;
    left: 0;
    width: 100%;
    height: 76vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* above scene, below navigation */
    pointer-events: none; /* enable per-card control */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    perspective: 1400px;              /* camera-like perspective on parent */
    perspective-origin: 50% 50%;
}

.webwork-wrapper.webwork-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Centered stack container */
.webwork-stack {
    position: relative;
    width: clamp(220px, 32vw, 520px); /* smaller */
    aspect-ratio: 16 / 11;
    pointer-events: none;
    margin-left: auto;
    margin-right: auto;
}

.web-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --radius: 16px;
    border-radius: var(--radius);
    overflow: hidden;
    transform-style: preserve-3d;
    transform: translateY(var(--stack-y, 0)) perspective(1400px) rotateX(0deg) rotateY(0deg) translateZ(0px);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 320ms ease,
                box-shadow 320ms ease;
    box-shadow: 0 14px 44px rgba(0,0,0,0.45);
    /* Responsive overlay offset scales with card size */
    --overlay-offset: clamp(8px, 3.5%, 24px);
}

/* Stacked background plates to match primary state */
/* Remove stacked background plates for now */
.web-card::before,
.web-card::after { content: none; }

.web-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius);
    background: #0f0f10;
    transform: translateZ(0);
    overflow: hidden;
    pointer-events: none; /* disable all iframe mouse interactions */
}

/* Subtle sheen overlay that brightens when hovered */
.sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0) 65%),
                radial-gradient(circle at 15% 15%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 70%);
    mix-blend-mode: screen;
    opacity: 0.18;
    transform: translate3d(0, 0, 0);
    transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-hovered .sheen {
    opacity: 0.46;
}

/* Label that fades in on same plane but above card */
.web-card__label {
    position: absolute;
    bottom: calc(var(--radius) * -1.2);
    left: 0.4rem;
    color: #b79cff;
    font-family: var(--app-font-family, Arial, Helvetica, sans-serif);
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    letter-spacing: 0.3px;
    opacity: 1;
    transform: translateZ(60px) translateY(0) rotateX(0deg);
    transform-origin: bottom left;
    transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Hover/active state */
.web-card { /* static card, no hover transform */ }

/* Only the top-most card should accept pointer events to avoid capturing clicks by hidden layers */
.web-card { pointer-events: none; }
.web-card.topmost { pointer-events: auto; }

.web-card.is-hovered .web-card__label {
    opacity: 1;
    transform: translateZ(100px) translateY(0px);
}

/* Stack container perspective rotation on hover */
.webwork-stack {
    transform-style: preserve-3d;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 50% 50%;
}
.webwork-stack:hover {
    transform: perspective(1400px) rotateY(-45deg) translateZ(0);
}
/* Larger hover hitbox: hovering anywhere in the wrapper rotates the stack */
.webwork-wrapper:hover .webwork-stack {
    transform: perspective(1400px) rotateY(-45deg) translateZ(0);
}

/* Hover: increase only Z separation, no fan-out */
.webwork-stack .web-card {
    transform: translateY(var(--stack-y, 0px)) translateZ(var(--z-compact, 0px));
}

/* Raise the currently focused card */
.web-card.is-raised {
    transform: translateY(var(--stack-y, 0px))
               translateZ(calc(var(--z-compact, 0px) + var(--raise-z, 160px)));
    box-shadow: 0 36px 96px rgba(0,0,0,0.6);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .web-card { transition: none; }
    .web-card__label { transition: none; }
}