/* Demo Sequence - Hero Mockup Animation */
:root {
    --demo-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1120 / 600;
    overflow: hidden;
    border-radius: 15px;
}
.demo-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 620ms ease, transform 1800ms var(--demo-ease);
}
.demo-frame.is-changing { opacity: 0; }
.demo-frame.is-tall-frame {
    bottom: auto;
    height: auto;
    min-height: 100%;
    object-fit: contain;
    object-position: top center;
}
.demo-frame.is-scroll-down { transform: translateY(-38%); }
.demo-layer {
    position: absolute;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform-origin: center;
    user-select: none;
    pointer-events: none;
    transition: opacity 560ms ease, transform 560ms var(--demo-ease), visibility 560ms;
}
.demo-stage.is-inspectable .demo-layer {
    pointer-events: auto;
}
.demo-layer.is-visible,
.demo-layer.is-fade-in {
    opacity: 1;
    visibility: visible;
}
.demo-layer.is-fade-out {
    opacity: 0;
    visibility: hidden;
}
.demo-layer.is-zoom-in {
    opacity: 1;
    visibility: visible;
    animation: demoZoomIn 720ms var(--demo-ease) both;
}
.demo-layer.is-dragging {
    opacity: 1;
    visibility: visible;
    animation: demoCardDrag 1400ms var(--demo-ease) both;
}
.layer-weather.is-dragging {
    animation-name: demoWeatherDrag;
}
.layer-hr-tooltip { left: 0.15%; bottom: 5.6%; width: 5.2%; }
.layer-hr-panel { left: 0.15%; bottom: 6%; width: 22.7%; }
.layer-theme-tooltip { left: 4.2%; bottom: 5.6%; width: 3.4%; }
.layer-theme-panel { left: 2.1%; bottom: 6%; width: 21.7%; }
.layer-logo-option { left: 0; top:7.4%; width: 15.6%; height: 17.6%;}
.layer-approval-card {left: 18.3%; top: 14.1%; width: 19.5%; }
.layer-folder-modal { left: 60%; top: 50%; width: 32.6%; transform: translate(-50%, -50%) scale(.92); }
.layer-weather { left: 39.1%; top: 40.8%; width: 23.2%; height: 24.2%; z-index: 12; }
.layer-portlet-guide { left: 38.1%; top: 40.8%; width: 23.2%; height: 24.2%; z-index: 11; }
.layer-weather-approval { left: 15%; top: 40%; width: 46.3%; }
.layer-weather-expanded {left: 14.65%; top: 14.8%; width: 84%;}
.layer-schedule-popup { left: 50%; top: 48%; width: 29%; transform: translate(-50%, -50%) scale(.92); }
.layer-mail-popup { left: 50%; top: 50%; width: 53.7%; transform: translate(-50%, -50%) scale(.92); }
.demo-cursor {
    position: absolute;
    z-index: 40;
    left: 50%;
    top: 50%;
    width: clamp(16px, 2.2vw, 36px);
    height: clamp(16px, 2.2vw, 36px);
    transform: translate(-50%, -50%);
    transition: left 1000ms var(--demo-ease), top 1000ms var(--demo-ease), opacity 240ms ease, transform 180ms ease;
    pointer-events: none;
    user-select: none;
}
.demo-cursor img { width: 100%; height: 100%; display: block; object-fit: contain; }
.demo-cursor.is-clicking { transform: translate(-50%, -50%) scale(.88); }
.demo-cursor.is-hidden { opacity: 0; }
.demo-layer img { width: 100%; height: auto; display: block; }
@keyframes demoZoomIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes demoCardDrag {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 1; transform: translate(82%, 0) scale(.96); }
}
@keyframes demoWeatherDrag {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 1; transform: translate(-104%, 0) scale(.96); }
}